X Search

`,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } }\n );\n}\n\nconst css = `\n /* Base styles */\n :root {\n --background: hsl(240 10% 3.9%);\n --foreground: hsl(0 0% 98%);\n --card: hsl(240 10% 3.9%);\n --card-foreground: hsl(0 0% 98%);\n --popover: hsl(240 10% 3.9%);\n --popover-foreground: hsl(0 0% 98%);\n --primary: hsl(0 0% 98%);\n --primary-foreground: hsl(240 5.9% 10%);\n --secondary: hsl(240 3.7% 15.9%);\n --secondary-foreground: hsl(0 0% 98%);\n --muted: hsl(240 3.7% 15.9%);\n --muted-foreground: hsl(240 5% 64.9%);\n --accent: hsl(240 3.7% 15.9%);\n --accent-foreground: hsl(0 0% 98%);\n --destructive: hsl(0 62.8% 30.6%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 3.7% 15.9%);\n --input: hsl(240 3.7% 15.9%);\n --ring: hsl(240 4.9% 83.9%);\n --radius: 0.5rem;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n html, body {\n height: 100%;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n background-color: var(--background);\n color: var(--foreground);\n }\n \n .app {\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n padding: 2rem 1rem;\n }\n \n .title {\n font-size: 1.5rem;\n font-weight: 500;\n margin-bottom: 1.5rem;\n text-align: center;\n }\n \n .card {\n background-color: var(--card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n padding: 1rem;\n margin-bottom: 1rem;\n }\n \n .field {\n margin-bottom: 0.75rem;\n }\n \n .field:last-child {\n margin-bottom: 0;\n }\n \n .label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n margin-bottom: 0.35rem;\n color: var(--muted-foreground);\n }\n \n .input, .select {\n width: 100%;\n padding: 0.5rem;\n font-size: 0.875rem;\n background-color: var(--input);\n color: var(--foreground);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n \n .input:focus, .select:focus {\n border-color: var(--ring);\n box-shadow: 0 0 0 1px var(--ring);\n }\n \n .input-wrapper {\n position: relative;\n }\n \n .input-prefix {\n position: absolute;\n left: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--muted-foreground);\n }\n \n .input-wrapper .input {\n padding-left: 1.5rem;\n }\n \n .field-row {\n display: flex;\n gap: 0.75rem;\n margin-bottom: 0.75rem;\n }\n \n .field-row .field {\n flex: 1;\n margin-bottom: 0;\n }\n \n .search-row {\n display: flex;\n gap: 0.75rem;\n margin-bottom: 0.75rem;\n }\n \n .account-field {\n flex: 0 0 30%;\n }\n \n .query-field {\n flex: 1;\n }\n \n .button-row {\n display: flex;\n justify-content: flex-end;\n margin-top: 1rem;\n }\n \n .button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background-color: var(--secondary);\n color: var(--secondary-foreground);\n border: none;\n border-radius: var(--radius);\n cursor: pointer;\n transition: background-color 0.2s;\n }\n \n .button:hover {\n background-color: var(--accent);\n }\n \n .button.stop {\n background-color: var(--destructive);\n color: var(--destructive-foreground);\n }\n \n .advanced-toggle {\n background: none;\n border: none;\n color: var(--muted-foreground);\n font-size: 0.75rem;\n cursor: pointer;\n padding: 0.25rem 0;\n margin-bottom: 0.75rem;\n display: block;\n width: 100%;\n text-align: left;\n }\n \n .advanced-toggle:hover {\n color: var(--foreground);\n }\n \n .advanced-options {\n margin-bottom: 0.75rem;\n padding-top: 0.25rem;\n border-top: 1px solid var(--border);\n }\n \n .status-card {\n padding: 0.75rem 1rem;\n }\n \n .status {\n color: var(--muted-foreground);\n font-size: 0.875rem;\n text-align: center;\n }\n \n .error {\n color: var(--destructive-foreground);\n background-color: var(--destructive);\n padding: 0.5rem;\n border-radius: var(--radius);\n font-size: 0.875rem;\n text-align: center;\n }\n \n .results-card {\n padding: 0;\n overflow: hidden;\n }\n \n .results-header {\n padding: 0.75rem 1rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n \n .results-summary {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n }\n \n .results-count {\n font-size: 1.25rem;\n font-weight: 600;\n }\n \n .results-label {\n color: var(--muted-foreground);\n font-size: 0.875rem;\n }\n \n .query-display {\n color: var(--muted-foreground);\n font-size: 0.75rem;\n font-style: italic;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 50%;\n }\n \n .tweet-list {\n max-height: 600px;\n overflow-y: auto;\n }\n \n .tweet {\n padding: 1rem;\n border-bottom: 1px solid var(--border);\n }\n \n .tweet:last-child {\n border-bottom: none;\n }\n \n .tweet-header {\n display: flex;\n gap: 0.75rem;\n margin-bottom: 0.75rem;\n }\n \n .avatar {\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 50%;\n flex-shrink: 0;\n }\n \n .user-info {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n \n .name-row {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n }\n \n .name {\n font-weight: 600;\n }\n \n .username {\n color: var(--muted-foreground);\n font-size: 0.75rem;\n }\n \n .date {\n color: var(--muted-foreground);\n font-size: 0.75rem;\n }\n \n .tweet-text {\n margin-bottom: 0.75rem;\n white-space: pre-wrap;\n word-break: break-word;\n }\n \n .media-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n border-radius: calc(var(--radius) - 2px);\n overflow: hidden;\n }\n \n .media-item {\n position: relative;\n aspect-ratio: 16/9;\n overflow: hidden;\n border-radius: calc(var(--radius) - 2px);\n }\n \n .media {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n \n .video-link {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n }\n \n .play-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgba(0, 0, 0, 0.6);\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n }\n \n .tweet-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .metrics {\n display: flex;\n gap: 1rem;\n }\n \n .metric {\n color: var(--muted-foreground);\n font-size: 0.75rem;\n }\n \n .view-link {\n color: var(--foreground);\n text-decoration: none;\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n background-color: var(--secondary);\n border-radius: var(--radius);\n }\n \n .view-link:hover {\n background-color: var(--accent);\n }\n \n .empty-card {\n text-align: center;\n padding: 2rem;\n color: var(--muted-foreground);\n }\n \n footer {\n margin-top: 2rem;\n text-align: center;\n color: var(--muted-foreground);\n font-size: 0.75rem;\n }\n \n footer a {\n color: var(--foreground);\n text-decoration: none;\n }\n \n footer a:hover {\n text-decoration: underline;\n }\n \n /* Responsive adjustments */\n @media (max-width: 480px) {\n .search-row,\n .field-row {\n flex-direction: column;\n gap: 0.5rem;\n }\n \n .account-field,\n .query-field {\n width: 100%;\n }\n \n .button-row {\n justify-content: center;\n }\n \n .results-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n \n .query-display {\n max-width: 100%;\n }\n }\n\n /* Authentication styles */\n .auth-card {\n padding: 1rem;\n }\n\n .auth-tabs {\n display: flex;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--border);\n }\n\n .auth-tab {\n flex: 1;\n background: none;\n border: none;\n padding: 0.5rem;\n font-size: 0.875rem;\n color: var(--muted-foreground);\n cursor: pointer;\n transition: color 0.2s, border-color 0.2s;\n border-bottom: 2px solid transparent;\n margin-bottom: -1px; /* 下線を親要素のborderに重ねる */\n }\n\n .auth-tab.active {\n color: var(--foreground);\n border-bottom-color: var(--primary);\n }\n\n .auth-form {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n /* 認証フォームのエラーメッセージ */\n .auth-error {\n color: var(--destructive-foreground);\n background-color: var(--destructive);\n padding: 0.5rem;\n border-radius: var(--radius);\n font-size: 0.875rem;\n text-align: center;\n margin-top: 0.5rem; /* 上に少しマージンを追加 */\n }\n\n .user-card {\n margin-bottom: 1rem;\n padding: 1rem; /* パディングを追加 */\n }\n\n .user-info-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.5rem;\n }\n\n .welcome {\n font-weight: 500;\n }\n\n .subscription-status {\n font-size: 0.875rem;\n color: var(--muted-foreground);\n margin-bottom: 0.5rem;\n }\n\n .upgrade-prompt {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n margin-top: 0.75rem; /* 少しマージンを調整 */\n padding-top: 0.75rem; /* 上に境界線とスペース */\n border-top: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem; /* ボタンとの間に隙間 */\n }\n\n .button.small {\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n }\n\n .upgrade-button {\n /* プレミアム感のある色に */\n background-color: #7c3aed; /* 紫色 */\n color: white;\n }\n\n .upgrade-button:hover {\n background-color: #6d28d9;\n }\n\n /* 検索フォーム内の保存ボタンの行 */\n .save-search-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 1rem; /* 検索ボタンとの間にスペース */\n padding-top: 1rem; /* 上に境界線とスペース */\n border-top: 1px solid var(--border);\n }\n\n .save-button {\n /* 保存ボタンの色 */\n background-color: #2563eb; /* 青色 */\n color: white;\n }\n\n .save-button:hover {\n background-color: #1d4ed8;\n }\n\n .save-button:disabled {\n background-color: var(--muted);\n color: var(--muted-foreground);\n cursor: not-allowed;\n }\n\n .limit-note {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n }\n\n /* 保存済み検索セクション */\n .saved-searches-card {\n margin-top: 1rem; /* 上の要素との間にスペース */\n padding: 1rem; /* パディングを追加 */\n }\n\n .section-title {\n font-size: 1rem;\n font-weight: 500;\n margin-bottom: 0.75rem;\n color: var(--foreground); /* タイトルの色 */\n }\n\n .saved-searches-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n max-height: 300px; /* 高さを制限してスクロール可能に */\n overflow-y: auto; /* スクロールバーを表示 */\n padding-right: 0.5rem; /* スクロールバー用のスペース */\n }\n\n .saved-search-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.75rem;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n background-color: var(--secondary); /* 背景色を少し変える */\n }\n\n .saved-search-info {\n flex: 1; /* 情報を表示するエリアを広げる */\n margin-right: 1rem; /* ボタンとの間にスペース */\n overflow: hidden; /* はみ出したテキストを隠す */\n }\n\n .saved-search-name {\n font-weight: 500;\n margin-bottom: 0.25rem;\n white-space: nowrap; /* 折り返さない */\n overflow: hidden;\n text-overflow: ellipsis; /* はみ出したら...で表示 */\n }\n\n .saved-search-query {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .saved-search-actions {\n display: flex;\n gap: 0.5rem; /* ボタン間のスペース */\n flex-shrink: 0; /* ボタンが縮まないように */\n }\n\n .run-button {\n background-color: #2563eb; /* 青色 */\n color: white;\n }\n\n .run-button:hover {\n background-color: #1d4ed8;\n }\n\n .delete-button {\n background-color: var(--destructive);\n color: white;\n }\n\n .delete-button:hover {\n background-color: hsl(0 62.8% 26%); /* 少し暗い赤 */\n }\n`;\n","label",[64],"be19f890-2825-11f0-af78-569c3dd06744",["D",1744813929970],"Migrated from folder: x_posts_collect/test01",[75],"pulls","branches","forks","envVars",{"_71":20,"_173":20},"connections",{"_71":20,"_172":20},"unfilledCount","emptyCount",{"_28":161,"_13":75,"_62":74,"_38":-5,"_30":31,"_154":35,"_155":86,"_32":180,"_34":20,"_65":48,"_157":163,"_67":24,"_159":-5,"_177":181,"_129":182},{"_28":153,"_13":64,"_62":63,"_38":-5,"_30":31,"_154":72,"_155":86,"_32":176,"_34":35,"_65":66,"_157":158,"_67":24,"_159":-5,"_177":178,"_129":179},["D",1744813937274],"children",[],[64],["D",1744813929970],[],[75],["D",1746280301656],{"_11":12,"_128":70},{"_11":12,"_124":-5,"_69":70,"_25":68,"_125":126,"_127":24},{"_34":72,"_13":16,"_28":31,"_116":82,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_46":-5,"_148":220,"_221":222,"_223":224,"_225":24,"_226":24,"_227":24,"_228":86,"_229":-5,"_230":-7,"_231":-7,"_232":20,"_233":24,"_234":24,"_235":-5,"_236":24,"_237":24,"_238":24,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":16,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History