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","deleted","label",[99],"permalink","https://www.val.town/x/tsuchi_ya/test01/code/main.tsx","extension","actionData","errors"]