X Search

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_126":-5,"_20":127,"_22":128,"_129":130,"_131":132,"_25":133,"_24":-5,"_134":-5,"_135":-5,"_136":54,"_137":138,"_139":45,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","tsuchi_ya","name","test01","branchName","main","version","path","","project",{"_34":73,"_13":14,"_46":74,"_75":-5,"_76":45,"_77":78,"_79":78,"_80":-5,"_81":-5,"_82":83,"_84":38,"_85":45,"_86":-5,"_87":-5,"_88":61,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":96,"_98":99,"_100":99,"_101":99,"_102":96,"_103":96,"_104":105,"_106":107,"_108":109,"_110":54},"tree",[64,65],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":60,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_18":63},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","be240b46-2825-11f0-af78-569c3dd06744","main.tsx","fileId","be19f386-2825-11f0-af78-569c3dd06744","parentId","branchId","be1781be-2825-11f0-af78-569c3dd06744","branchVersion",2,"latest",true,"createdAt",["D",1744813937274],1,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\n/**\n * The main App component is rendered on the client.\n */\nfunction App() {\n const [query, setQuery] = React.useState(\"\");\n const [targetAccount, setTargetAccount] = React.useState(\"\");\n const [apiKey, setApiKey] = React.useState(\"\");\n const [searchType, setSearchType] = React.useState(\"Latest\");\n const [sinceDate, setSinceDate] = React.useState(\"\");\n const [untilDate, setUntilDate] = React.useState(\"\");\n const [desiredCount, setDesiredCount] = React.useState(40);\n const [tweets, setTweets] = React.useState([]);\n const [loading, setLoading] = React.useState(false);\n const [loadingMessage, setLoadingMessage] = React.useState(\"\");\n const [error, setError] = React.useState(null);\n const [currentSearchQuery, setCurrentSearchQuery] = React.useState(\"\");\n const [showAdvanced, setShowAdvanced] = React.useState(false);\n const [user, setUser] = React.useState(null);\n const [authMode, setAuthMode] = React.useState(\"login\"); // 'login' または 'register'\n const [authFormData, setAuthFormData] = React.useState({\n username: \"\",\n email: \"\",\n password: \"\",\n });\n const [authError, setAuthError] = React.useState(null);\n const [savedSearches, setSavedSearches] = React.useState([]);\n\n // ページロード時に認証状態を確認するためのuseEffectを追加します\n React.useEffect(() => {\n // ユーザー情報を取得する非同期関数\n const checkAuth = async () => {\n try {\n const response = await fetch(\"/api/me\"); // サーバーに現在のユーザー情報を問い合わせる\n if (response.ok) {\n const userData = await response.json(); // 応答がOKならユーザーデータを取得\n setUser(userData); // 取得したユーザー情報をstateにセット\n fetchSavedSearches(); // ログインしていれば保存済み検索も取得\n } else {\n // 応答がOKでない場合（ログインしていない、トークン切れなど）\n setUser(null); // ユーザー情報をnullにする\n }\n } catch (err) {\n console.error(\"Auth check error:\", err); // エラーが発生した場合\n setUser(null); // エラー時もユーザー情報はnullにする\n }\n };\n\n checkAuth(); // 上で定義した関数を実行\n }, []); // 第2引数の配列が空なので、このuseEffectはコンポーネントが最初に表示された時に1回だけ実行されます\n\n // 保存された検索を取得する関数\n const fetchSavedSearches = async () => {\n if (!user) return; // ユーザーがログインしていない場合は何もしない（※useEffectの後に移動したのでこのチェックは不要かも）\n try {\n const response = await fetch(\"/api/searches\"); // 保存済み検索APIを叩く\n if (response.ok) {\n const searches = await response.json();\n setSavedSearches(searches); // 取得した検索リストをstateにセット\n } else {\n console.error(\"Failed to fetch saved searches:\", await response.text());\n setSavedSearches([]); // エラー時は空にする\n }\n } catch (err) {\n console.error(\"Fetch saved searches error:\", err);\n setSavedSearches([]); // エラー時は空にする\n }\n };\n\n // fetchSavedSearchesをユーザー情報が変わった時に実行するように変更\n React.useEffect(() => {\n if (user) {\n fetchSavedSearches();\n } else {\n setSavedSearches([]); // ログアウトしたら保存済み検索リストをクリア\n }\n }, [user]); // userステートが変わるたびに実行\n\n // 認証フォームの入力値を処理する関数\n const handleAuthInputChange = (e) => {\n setAuthFormData({\n ...authFormData,\n [e.target.name]: e.target.value,\n });\n };\n\n // ログイン処理関数\n const handleLogin = async (e) => {\n e.preventDefault(); // フォームのデフォルト送信を防ぐ\n setAuthError(null); // エラーメッセージをリセット\n\n try {\n const response = await fetch(\"/api/login\", {\n // ログインAPIを叩く\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n email: authFormData.email,\n password: authFormData.password,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n // 応答がOKでなければエラー\n throw new Error(data.error || \"Login failed\");\n }\n\n setUser(data.user); // 成功したらユーザー情報をstateにセット\n setAuthFormData({ username: \"\", email: \"\", password: \"\" }); // フォームをクリア\n // fetchSavedSearches(); // useEffectでuserが変わると自動で呼ばれるので不要\n } catch (err) {\n setAuthError(err.message); // エラーメッセージをstateにセット\n }\n };\n\n // 登録処理関数\n const handleRegister = async (e) => {\n e.preventDefault();\n setAuthError(null);\n\n try {\n const response = await fetch(\"/api/register\", {\n // 登録APIを叩く\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(authFormData), // フォームデータをそのまま送信\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Registration failed\");\n }\n\n setUser(data.user); // 成功したらユーザー情報をstateにセット\n setAuthFormData({ username: \"\", email: \"\", password: \"\" }); // フォームをクリア\n } catch (err) {\n setAuthError(err.message);\n }\n };\n\n // ログアウト処理関数\n const handleLogout = async () => {\n try {\n await fetch(\"/api/logout\"); // ログアウトAPIを叩く\n setUser(null); // ユーザー情報をnullにする\n // setSavedSearches([]); // useEffectでuserが変わると自動でクリアされるので不要\n } catch (err) {\n console.error(\"Logout error:\", err);\n }\n };\n\n // 検索条件を保存する関数\n const handleSaveSearch = async () => {\n if (!user) {\n // ログインしていない場合\n setAuthError(\"Please login to save searches\"); // エラー表示はauthErrorではなく、通常のerrorステートを使う方が適切かもしれません\n setError(\"Please login to save searches\"); // 通常のエラーステートを使用\n return;\n }\n\n try {\n // 検索クエリを構築（buildQueryは既存の関数）\n const finalQuery = buildQuery(query, targetAccount, sinceDate, untilDate);\n if (!finalQuery && !targetAccount.trim()) {\n // キーワードもアカウントもない場合\n setError(\"Please enter keywords or a target account to save.\");\n return;\n }\n\n // 保存する名前をユーザーに入力してもらう\n const searchName = prompt(\"Enter a name for this search:\");\n if (!searchName) return; // キャンセルされたら何もしない\n\n const response = await fetch(\"/api/searches/save\", {\n // 保存APIを叩く\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n name: searchName,\n query: query, // queryステートをそのまま保存\n account: targetAccount,\n type: searchType,\n sinceDate,\n untilDate,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to save search\");\n }\n\n alert(\"Search saved successfully!\"); // 成功メッセージ\n fetchSavedSearches(); // 保存済み検索リストを再取得して更新\n } catch (err) {\n // alert(err.message); // alertではなくエラー表示用のUIを使う方が良い\n setError(err.message);\n }\n };\n\n // 保存した検索を削除する関数\n const handleDeleteSearch = async (searchId) => {\n // 削除確認\n if (!confirm(\"Are you sure you want to delete this saved search?\")) return;\n\n try {\n const response = await fetch(`/api/searches/${searchId}/delete`, {\n method: \"POST\", // Val Townの制限でDELETEが使えない場合があるのでPOSTを使う\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to delete search\");\n }\n\n fetchSavedSearches(); // 保存済み検索リストを再取得して更新\n } catch (err) {\n // alert(err.message);\n setError(err.message);\n }\n };\n\n // 保存した検索を実行する関数\n const handleRunSavedSearch = (search) => {\n // 保存された検索条件をフォームにセットする\n setTargetAccount(search.account || \"\");\n // 保存されたqueryから `from:` 部分を除去する必要があるか確認\n // buildQueryで from: が付与されるので、ここではキーワード部分だけをセットするのが良い\n // 簡易的に、保存されたクエリ全体をキーワードとしてセットしてみます\n setQuery(search.query || \"\");\n setSearchType(search.type || \"Latest\");\n setSinceDate(search.since_date || \"\");\n setUntilDate(search.until_date || \"\");\n\n // フォームのhandleSubmitを直接呼び出すか、同様のロジックを実行\n // 少し待ってから検索を実行（stateの更新が反映されるのを待つため）\n setTimeout(() => {\n const finalQuery = buildQuery(\n search.query || \"\",\n search.account,\n search.since_date,\n search.until_date\n );\n fetchAllTweets(finalQuery, search.type || \"Latest\", desiredCount);\n }, 100);\n };\n\n const isFetchingRef = React.useRef(false);\n const sourceUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n\n const buildQuery = React.useCallback((keywords, account, since, until) => {\n let finalQuery = keywords.trim();\n if (account.trim()) {\n const accountPart = `from:${account.trim().replace(/^@/, \"\")}`;\n finalQuery = finalQuery ? `${accountPart} ${finalQuery}` : accountPart;\n }\n if (since) {\n finalQuery += ` since:${since}`;\n }\n if (until) {\n finalQuery += ` until:${until}`;\n }\n if (\n !finalQuery.toLowerCase().includes(\"filter:replies\") &&\n !finalQuery.toLowerCase().includes(\"to:\")\n ) {\n finalQuery += \" -filter:replies\";\n }\n return finalQuery.trim();\n }, []);\n\n const fetchAllTweets = React.useCallback(\n async (fullQuery, type, targetCount) => {\n if (!apiKey.trim()) {\n setError(\"Please enter your SocialData API Key.\");\n return;\n }\n setLoading(true);\n setLoadingMessage(\"Starting search...\");\n setError(null);\n setTweets([]);\n setCurrentSearchQuery(fullQuery);\n isFetchingRef.current = true;\n\n let accumulatedTweets = [];\n let currentCursor = null;\n let pageNum = 1;\n\n try {\n while (\n isFetchingRef.current &&\n accumulatedTweets.length < targetCount\n ) {\n setLoadingMessage(\n `Fetching page ${pageNum}... (${accumulatedTweets.length}/${targetCount})`\n );\n const params = new URLSearchParams({ query: fullQuery, type: type });\n if (currentCursor) {\n params.append(\"cursor\", currentCursor);\n }\n const response = await fetch(`/api/search?${params.toString()}`, {\n headers: { \"X-Api-Key\": apiKey },\n });\n if (!isFetchingRef.current) break;\n if (!response.ok) {\n const errorData = await response\n .json()\n .catch(() => ({ message: `API Error: ${response.statusText}` }));\n throw new Error(\n errorData.message ||\n `API Error: ${response.statusText} on page ${pageNum}`\n );\n }\n const data = await response.json();\n if (!isFetchingRef.current) break;\n if (data.status === \"error\") {\n throw new Error(\n data.message || `API returned an error on page ${pageNum}`\n );\n }\n const newTweets = data.tweets || [];\n accumulatedTweets = [...accumulatedTweets, ...newTweets];\n setTweets(accumulatedTweets);\n currentCursor = data.next_cursor || null;\n if (!currentCursor || newTweets.length === 0) {\n setLoadingMessage(\n accumulatedTweets.length > 0\n ? `Found ${accumulatedTweets.length} tweets`\n : \"No tweets found\"\n );\n break;\n }\n if (accumulatedTweets.length >= targetCount) {\n setLoadingMessage(`Found ${accumulatedTweets.length} tweets`);\n break;\n }\n pageNum++;\n }\n } catch (err) {\n console.error(\"Fetch error:\", err);\n setError(err.message);\n setTweets(accumulatedTweets);\n } finally {\n if (isFetchingRef.current) {\n setLoading(false);\n setLoadingMessage(\"\");\n }\n isFetchingRef.current = false;\n }\n },\n [apiKey]\n );\n\n const handleSubmit = (event) => {\n event.preventDefault();\n if (!targetAccount.trim() && !query.trim()) {\n setError(\"Please enter keywords or a target account name.\");\n return;\n }\n if (!apiKey.trim()) {\n setError(\"Please enter your SocialData API Key.\");\n return;\n }\n if (loading) {\n handleStopFetching();\n setTimeout(() => {\n const finalQuery = buildQuery(\n query,\n targetAccount,\n sinceDate,\n untilDate\n );\n fetchAllTweets(finalQuery, searchType, desiredCount);\n }, 100);\n } else {\n const finalQuery = buildQuery(query, targetAccount, sinceDate, untilDate);\n fetchAllTweets(finalQuery, searchType, desiredCount);\n }\n };\n\n const handleStopFetching = () => {\n console.log(\"Stopping fetch...\");\n isFetchingRef.current = false;\n setLoading(false);\n setLoadingMessage(\"Fetching stopped\");\n };\n\n // Using React.createElement instead of JSX\n return React.createElement(\n \"div\",\n { className: \"app\" },\n React.createElement(\"h1\", { className: \"title\" }, \"X Search\"),\n // --- ここから認証UI ---\n user\n ? React.createElement(\n // ログイン済みの場合\n \"div\",\n { className: \"card user-card\" },\n React.createElement(\n \"div\",\n { className: \"user-info-header\" },\n React.createElement(\n \"span\",\n { className: \"welcome\" },\n `Welcome, ${user.username}`\n ),\n React.createElement(\n \"button\",\n {\n onClick: handleLogout,\n className: \"button small\", // 小さいボタン用のクラス\n },\n \"Logout\"\n )\n ),\n React.createElement(\n \"div\",\n { className: \"subscription-status\" },\n `Subscription: ${\n user.subscriptionStatus === \"premium\" ? \"🌟 Premium\" : \"✓ Free\"\n }`\n ),\n // 無料ユーザー向けのアップグレード案内（ダミー）\n user.subscriptionStatus !== \"premium\" &&\n React.createElement(\n \"div\",\n { className: \"upgrade-prompt\" },\n \"Upgrade to Premium for unlimited saved searches and more features!\",\n React.createElement(\n \"button\",\n {\n className: \"button small upgrade-button\",\n onClick: () =>\n alert(\"Subscription functionality coming soon!\"), // ダミーのクリック処理\n },\n \"Upgrade\"\n )\n )\n )\n : React.createElement(\n // 未ログインの場合\n \"div\",\n { className: \"card auth-card\" },\n React.createElement(\n // タブ切り替え\n \"div\",\n { className: \"auth-tabs\" },\n React.createElement(\n \"button\",\n {\n className:\n authMode === \"login\" ? \"auth-tab active\" : \"auth-tab\",\n onClick: () => setAuthMode(\"login\"), // ログインモードに切り替え\n },\n \"Login\"\n ),\n React.createElement(\n \"button\",\n {\n className:\n authMode === \"register\" ? \"auth-tab active\" : \"auth-tab\",\n onClick: () => setAuthMode(\"register\"), // 登録モードに切り替え\n },\n \"Register\"\n )\n ),\n authMode === \"login\" // ログインフォーム\n ? React.createElement(\n \"form\",\n { onSubmit: handleLogin, className: \"auth-form\" },\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"auth-email\", className: \"label\" },\n \"Email\"\n ), // idを重複させない\n React.createElement(\"input\", {\n type: \"email\",\n id: \"auth-email\",\n name: \"email\",\n value: authFormData.email,\n onChange: handleAuthInputChange,\n className: \"input\",\n required: true,\n })\n ),\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"auth-password\", className: \"label\" },\n \"Password\"\n ), // idを重複させない\n React.createElement(\"input\", {\n type: \"password\",\n id: \"auth-password\",\n name: \"password\",\n value: authFormData.password,\n onChange: handleAuthInputChange,\n className: \"input\",\n required: true,\n })\n ),\n authError &&\n React.createElement(\n \"p\",\n { className: \"error auth-error\" },\n authError\n ), // エラー表示\n React.createElement(\n \"button\",\n { type: \"submit\", className: \"button\" },\n \"Login\"\n )\n )\n : React.createElement(\n // 登録フォーム\n \"form\",\n { onSubmit: handleRegister, className: \"auth-form\" },\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"auth-username\", className: \"label\" },\n \"Username\"\n ), // idを重複させない\n React.createElement(\"input\", {\n type: \"text\",\n id: \"auth-username\",\n name: \"username\",\n value: authFormData.username,\n onChange: handleAuthInputChange,\n className: \"input\",\n required: true,\n })\n ),\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"auth-email-reg\", className: \"label\" },\n \"Email\"\n ), // idを重複させない\n React.createElement(\"input\", {\n type: \"email\",\n id: \"auth-email-reg\",\n name: \"email\",\n value: authFormData.email,\n onChange: handleAuthInputChange,\n className: \"input\",\n required: true,\n })\n ),\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"auth-password-reg\", className: \"label\" },\n \"Password\"\n ), // idを重複させない\n React.createElement(\"input\", {\n type: \"password\",\n id: \"auth-password-reg\",\n name: \"password\",\n value: authFormData.password,\n onChange: handleAuthInputChange,\n className: \"input\",\n minLength: 6,\n required: true,\n })\n ),\n authError &&\n React.createElement(\n \"p\",\n { className: \"error auth-error\" },\n authError\n ), // エラー表示\n React.createElement(\n \"button\",\n { type: \"submit\", className: \"button\" },\n \"Register\"\n )\n )\n ),\n // API Key Section\n React.createElement(\n \"div\",\n { className: \"card\" },\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"apiKey\", className: \"label\" },\n \"API Key\"\n ),\n React.createElement(\"input\", {\n type: \"password\",\n id: \"apiKey\",\n value: apiKey,\n onChange: (e) => setApiKey(e.target.value),\n placeholder: \"Enter SocialData API Key\",\n className: \"input\",\n })\n )\n ),\n // Search Form\n React.createElement(\n \"form\",\n {\n onSubmit: handleSubmit,\n className: \"card\",\n },\n // Basic search fields\n React.createElement(\n \"div\",\n { className: \"search-row\" },\n React.createElement(\n \"div\",\n { className: \"field account-field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"targetAccount\", className: \"label\" },\n \"Account\"\n ),\n React.createElement(\n \"div\",\n { className: \"input-wrapper\" },\n React.createElement(\"span\", { className: \"input-prefix\" }, \"@\"),\n React.createElement(\"input\", {\n type: \"text\",\n id: \"targetAccount\",\n value: targetAccount,\n onChange: (e) => setTargetAccount(e.target.value),\n placeholder: \"username\",\n className: \"input\",\n disabled: loading,\n })\n )\n ),\n React.createElement(\n \"div\",\n { className: \"field query-field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"queryKeywords\", className: \"label\" },\n \"Keywords\"\n ),\n React.createElement(\"input\", {\n type: \"text\",\n id: \"queryKeywords\",\n value: query,\n onChange: (e) => setQuery(e.target.value),\n placeholder: \"Search terms\",\n className: \"input\",\n disabled: loading,\n })\n )\n ),\n // Advanced options toggle\n React.createElement(\n \"button\",\n {\n type: \"button\",\n className: \"advanced-toggle\",\n onClick: () => setShowAdvanced(!showAdvanced),\n },\n showAdvanced ? \"Hide options\" : \"Show options\"\n ),\n // Advanced options\n showAdvanced &&\n React.createElement(\n \"div\",\n { className: \"advanced-options\" },\n React.createElement(\n \"div\",\n { className: \"field-row\" },\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"searchType\", className: \"label\" },\n \"Type\"\n ),\n React.createElement(\n \"select\",\n {\n id: \"searchType\",\n value: searchType,\n onChange: (e) => setSearchType(e.target.value),\n disabled: loading,\n className: \"select\",\n },\n React.createElement(\"option\", { value: \"Latest\" }, \"Latest\"),\n React.createElement(\"option\", { value: \"Top\" }, \"Top\")\n )\n ),\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"desiredCount\", className: \"label\" },\n \"Count\"\n ),\n React.createElement(\"input\", {\n type: \"number\",\n id: \"desiredCount\",\n value: desiredCount,\n onChange: (e) =>\n setDesiredCount(\n Math.max(1, parseInt(e.target.value, 10) || 1)\n ),\n min: \"1\",\n className: \"input\",\n disabled: loading,\n })\n )\n ),\n React.createElement(\n \"div\",\n { className: \"field-row\" },\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"sinceDate\", className: \"label\" },\n \"Since\"\n ),\n React.createElement(\"input\", {\n type: \"date\",\n id: \"sinceDate\",\n value: sinceDate,\n onChange: (e) => setSinceDate(e.target.value),\n className: \"input\",\n disabled: loading,\n })\n ),\n React.createElement(\n \"div\",\n { className: \"field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"untilDate\", className: \"label\" },\n \"Until\"\n ),\n React.createElement(\"input\", {\n type: \"date\",\n id: \"untilDate\",\n value: untilDate,\n onChange: (e) => setUntilDate(e.target.value),\n className: \"input\",\n disabled: loading,\n })\n )\n )\n ),\n // Button\n React.createElement(\n \"div\",\n { className: \"button-row\" },\n !loading\n ? React.createElement(\n \"button\",\n {\n type: \"submit\",\n className: \"button\",\n },\n \"Search\"\n )\n : React.createElement(\n \"button\",\n {\n type: \"button\",\n onClick: handleStopFetching,\n className: \"button stop\",\n },\n \"Stop\"\n )\n ),\n // Save Search button (for logged-in users only)\n user &&\n React.createElement(\n \"div\",\n { className: \"save-search-row\" },\n React.createElement(\n \"button\",\n {\n type: \"button\",\n onClick: handleSaveSearch,\n className: \"button save-button\",\n disabled: loading || (!query.trim() && !targetAccount.trim()),\n },\n \"Save Search\"\n ),\n // Show limit note for free users\n savedSearches.length >= 3 &&\n user.subscriptionStatus !== \"premium\" &&\n React.createElement(\n \"p\",\n { className: \"limit-note\" },\n `${savedSearches.length}/3 saved searches used (Free plan)`\n )\n )\n ),\n // Status messages\n (loading || error) &&\n React.createElement(\n \"div\",\n { className: \"card status-card\" },\n loading &&\n React.createElement(\"p\", { className: \"status\" }, loadingMessage),\n error && React.createElement(\"p\", { className: \"error\" }, error)\n ),\n // Saved searches list (for logged-in users only)\n user &&\n savedSearches.length > 0 &&\n React.createElement(\n \"div\",\n { className: \"card saved-searches-card\" },\n React.createElement(\n \"h2\",\n { className: \"section-title\" },\n \"Saved Searches\"\n ),\n React.createElement(\n \"div\",\n { className: \"saved-searches-list\" },\n savedSearches.map((search) =>\n React.createElement(\n \"div\",\n { key: search.id, className: \"saved-search-item\" },\n React.createElement(\n \"div\",\n { className: \"saved-search-info\" },\n React.createElement(\n \"div\",\n { className: \"saved-search-name\" },\n search.name\n ),\n React.createElement(\n \"div\",\n { className: \"saved-search-query\" },\n search.account\n ? `@${search.account} ${search.query}`\n : search.query\n )\n ),\n React.createElement(\n \"div\",\n { className: \"saved-search-actions\" },\n React.createElement(\n \"button\",\n {\n className: \"button small run-button\",\n onClick: () => handleRunSavedSearch(search),\n },\n \"Run\"\n ),\n React.createElement(\n \"button\",\n {\n className: \"button small delete-button\",\n onClick: () => handleDeleteSearch(search.id),\n },\n \"Delete\"\n )\n )\n )\n )\n )\n ),\n // Results\n tweets.length > 0 &&\n React.createElement(\n \"div\",\n { className: \"card results-card\" },\n React.createElement(\n \"div\",\n { className: \"results-header\" },\n React.createElement(\n \"div\",\n { className: \"results-summary\" },\n React.createElement(\n \"span\",\n { className: \"results-count\" },\n tweets.length\n ),\n React.createElement(\n \"span\",\n { className: \"results-label\" },\n tweets.length === 1 ? \"Tweet\" : \"Tweets\"\n )\n ),\n currentSearchQuery &&\n React.createElement(\n \"div\",\n { className: \"query-display\" },\n `\"${currentSearchQuery}\"`\n )\n ),\n React.createElement(\n \"div\",\n { className: \"tweet-list\" },\n tweets.map((tweet) =>\n React.createElement(\n \"div\",\n { key: tweet.id_str, className: \"tweet\" },\n // Tweet Header\n React.createElement(\n \"div\",\n { className: \"tweet-header\" },\n React.createElement(\"img\", {\n src: tweet.user.profile_image_url_https,\n alt: `${tweet.user.name}'s profile`,\n className: \"avatar\",\n }),\n React.createElement(\n \"div\",\n { className: \"user-info\" },\n React.createElement(\n \"div\",\n { className: \"name-row\" },\n React.createElement(\n \"span\",\n { className: \"name\" },\n tweet.user.name\n ),\n React.createElement(\n \"span\",\n { className: \"username\" },\n `@${tweet.user.screen_name}`\n )\n ),\n React.createElement(\n \"div\",\n { className: \"date\" },\n new Date(tweet.tweet_created_at).toLocaleDateString(\n undefined,\n {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n }\n )\n )\n )\n ),\n // Tweet Content\n React.createElement(\n \"p\",\n { className: \"tweet-text\" },\n tweet.full_text\n ),\n // Media\n tweet.entities?.media?.length > 0 &&\n React.createElement(\n \"div\",\n { className: \"media-container\" },\n tweet.entities.media.map((mediaItem) =>\n React.createElement(\n \"div\",\n { key: mediaItem.id_str, className: \"media-item\" },\n mediaItem.type === \"photo\" ||\n mediaItem.type === \"animated_gif\"\n ? React.createElement(\n \"a\",\n {\n href: mediaItem.expanded_url,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n React.createElement(\"img\", {\n src: mediaItem.media_url_https,\n alt: `Media`,\n loading: \"lazy\",\n className: \"media\",\n })\n )\n : mediaItem.type === \"video\"\n ? React.createElement(\n \"a\",\n {\n href: mediaItem.expanded_url,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"video-link\",\n },\n React.createElement(\"img\", {\n src: mediaItem.media_url_https,\n alt: `Video preview`,\n loading: \"lazy\",\n className: \"media\",\n }),\n React.createElement(\n \"div\",\n { className: \"play-icon\" },\n \"▶\"\n )\n )\n : null\n )\n )\n ),\n // Tweet Footer\n React.createElement(\n \"div\",\n { className: \"tweet-footer\" },\n React.createElement(\n \"div\",\n { className: \"metrics\" },\n React.createElement(\n \"span\",\n { className: \"metric\" },\n \"❤️ \",\n tweet.favorite_count ?? 0\n ),\n React.createElement(\n \"span\",\n { className: \"metric\" },\n \"🔁 \",\n tweet.retweet_count ?? 0\n ),\n React.createElement(\n \"span\",\n { className: \"metric\" },\n \"💬 \",\n tweet.reply_count ?? 0\n )\n ),\n React.createElement(\n \"a\",\n {\n href: `https://x.com/${tweet.user.screen_name}/status/${tweet.id_str}`,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"view-link\",\n },\n \"View\"\n )\n )\n )\n )\n )\n ),\n // Empty results\n !loading &&\n tweets.length === 0 &&\n currentSearchQuery &&\n !error &&\n React.createElement(\n \"div\",\n { className: \"card empty-card\" },\n \"No tweets found\"\n ),\n // Footer\n React.createElement(\n \"footer\",\n null,\n \"Powered by \",\n React.createElement(\n \"a\",\n {\n href: \"https://docs.socialdata.tools/\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n \"SocialData API\"\n ),\n \" | \",\n React.createElement(\n \"a\",\n {\n href: sourceUrl,\n target: \"_top\",\n },\n \"View Source\"\n )\n )\n );\n}\n\n/**\n * Client-only code\n */\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n createRoot(root).render(React.createElement(App));\n } else {\n console.error(\"Root element not found\");\n }\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\n/**\n * Server-only code\n */\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n // SQLiteをインポート\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"test01\";\n\n // ユーザーテーブルの作成\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL,\n email TEXT UNIQUE NOT NULL,\n password_hash TEXT NOT NULL,\n subscription_status TEXT DEFAULT 'free',\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // 保存済み検索テーブルの作成\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_saved_searches (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n name TEXT NOT NULL,\n query TEXT NOT NULL,\n account TEXT,\n type TEXT DEFAULT 'Latest',\n since_date TEXT,\n until_date TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES ${KEY}_users(id)\n )\n`);\n\n // 認証関連の関数（より単純な方法で実装）\n // パスワードのハッシュ化と検証\n async function hashPassword(password) {\n // 実際のハッシュ化の代わりに簡易版を使用（実運用では安全ではありません）\n return \"hashed_\" + password;\n }\n\n async function verifyPassword(password, hash) {\n // 簡易版の検証\n return hash === \"hashed_\" + password;\n }\n\n // JWTトークン生成・検証の簡易版\n async function createToken(userId, username) {\n // 簡易版のトークン生成\n return btoa(\n JSON.stringify({\n sub: userId.toString(),\n username,\n exp: Date.now() + 604800000,\n })\n );\n }\n\n async function verifyToken(token) {\n try {\n // 簡易版のトークン検証\n return JSON.parse(atob(token));\n } catch (err) {\n return null;\n }\n }\n\n // クッキーからユーザー情報を取得する関数\n async function getUserFromRequest(req) {\n const cookies = req.headers.get(\"cookie\") || \"\";\n const tokenMatch = cookies.match(/auth_token=([^;]+)/);\n\n if (!tokenMatch) return null;\n\n const token = tokenMatch[1];\n const payload = await verifyToken(token);\n\n if (!payload) return null;\n\n return {\n id: parseInt(payload.sub),\n username: payload.username,\n };\n }\n\n // テーブル確認用エンドポイント\n if (url.pathname === \"/api/check-table\") {\n try {\n const result = await sqlite.execute(`\n SELECT name FROM sqlite_master \n WHERE type='table' AND name='${KEY}_users'\n `);\n\n if (result.rows.length > 0) {\n return Response.json({ success: true, message: \"Users table exists\" });\n } else {\n return Response.json({\n success: false,\n message: \"Users table does not exist\",\n });\n }\n } catch (err) {\n return Response.json({ error: err.message }, { status: 500 });\n }\n }\n\n // ヘルパー関数テスト用エンドポイント（単純化）\n if (url.pathname === \"/api/test-helpers\") {\n try {\n // パスワードハッシュ化のテスト\n const password = \"testpassword\";\n const hash = await hashPassword(password);\n const isValid = await verifyPassword(password, hash);\n\n // JWTのテスト\n const token = await createToken(1, \"testuser\");\n const payload = await verifyToken(token);\n\n return Response.json({\n success: true,\n passwordTest: isValid,\n jwtTest: payload ? true : false,\n hash,\n token,\n });\n } catch (err) {\n console.error(\"Test helpers error:\", err);\n return Response.json({ error: String(err) }, { status: 500 });\n }\n }\n\n // ユーザー登録エンドポイント\n if (url.pathname === \"/api/register\") {\n if (request.method !== \"POST\") {\n return Response.json({ error: \"Method not allowed\" }, { status: 405 });\n }\n\n try {\n const { username, email, password } = await request.json();\n\n // 入力検証\n if (!username || !email || !password) {\n return Response.json(\n { error: \"All fields are required\" },\n { status: 400 }\n );\n }\n\n if (password.length < 6) {\n return Response.json(\n { error: \"Password must be at least 6 characters\" },\n { status: 400 }\n );\n }\n\n // メールアドレスの簡易検証\n if (!email.includes(\"@\") || !email.includes(\".\")) {\n return Response.json(\n { error: \"Invalid email format\" },\n { status: 400 }\n );\n }\n\n // ユーザー名とメールアドレスの重複チェック\n const existingUser = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ? OR email = ?`,\n [username, email]\n );\n\n if (existingUser.rows.length > 0) {\n return Response.json(\n { error: \"Username or email already exists\" },\n { status: 409 }\n );\n }\n\n // パスワードのハッシュ化\n const passwordHash = await hashPassword(password);\n\n // ユーザーを登録\n await sqlite.execute(\n `INSERT INTO ${KEY}_users (username, email, password_hash) VALUES (?, ?, ?)`,\n [username, email, passwordHash]\n );\n\n // 新しく作成されたユーザーの情報を取得\n const userData = await sqlite.execute(\n `SELECT id, username FROM ${KEY}_users WHERE email = ?`,\n [email]\n );\n\n const user = userData.rows[0];\n\n // JWT トークンを生成\n const token = await createToken(user.id, user.username);\n\n // クッキーにトークンを設定して返す\n return Response.json(\n {\n success: true,\n user: {\n id: user.id,\n username: user.username,\n subscriptionStatus: \"free\",\n },\n },\n {\n status: 201,\n headers: {\n \"Set-Cookie\": `auth_token=${token}; Path=/; HttpOnly; SameSite=Strict; Max-Age=604800`,\n },\n }\n );\n } catch (err) {\n console.error(\"Registration error:\", err);\n return Response.json(\n { error: \"Registration failed: \" + String(err) },\n { status: 500 }\n );\n }\n }\n\n // ユーザーログインエンドポイント\n if (url.pathname === \"/api/login\") {\n if (request.method !== \"POST\") {\n return Response.json({ error: \"Method not allowed\" }, { status: 405 });\n }\n\n try {\n const { email, password } = await request.json();\n\n // 入力検証\n if (!email || !password) {\n return Response.json(\n { error: \"Email and password are required\" },\n { status: 400 }\n );\n }\n\n // ユーザー情報を取得\n const userData = await sqlite.execute(\n `SELECT id, username, password_hash, subscription_status FROM ${KEY}_users WHERE email = ?`,\n [email]\n );\n\n if (userData.rows.length === 0) {\n return Response.json(\n { error: \"Invalid email or password\" },\n { status: 401 }\n );\n }\n\n const user = userData.rows[0];\n\n // パスワードを検証\n const validPassword = await verifyPassword(password, user.password_hash);\n\n if (!validPassword) {\n return Response.json(\n { error: \"Invalid email or password\" },\n { status: 401 }\n );\n }\n\n // JWT トークンを生成\n const token = await createToken(user.id, user.username);\n\n // クッキーにトークンを設定\n return Response.json(\n {\n success: true,\n user: {\n id: user.id,\n username: user.username,\n subscriptionStatus: user.subscription_status,\n },\n },\n {\n status: 200,\n headers: {\n \"Set-Cookie\": `auth_token=${token}; Path=/; HttpOnly; SameSite=Strict; Max-Age=604800`,\n },\n }\n );\n } catch (err) {\n console.error(\"Login error:\", err);\n return Response.json(\n { error: \"Login failed: \" + String(err) },\n { status: 500 }\n );\n }\n }\n\n // 現在のユーザー情報取得エンドポイント\n if (url.pathname === \"/api/me\") {\n try {\n // ユーザー情報を取得\n const user = await getUserFromRequest(request);\n\n if (!user) {\n return Response.json({ error: \"Not authenticated\" }, { status: 401 });\n }\n\n // ユーザーの詳細情報を取得\n const userData = await sqlite.execute(\n `SELECT id, username, email, subscription_status FROM ${KEY}_users WHERE id = ?`,\n [user.id]\n );\n\n if (userData.rows.length === 0) {\n return Response.json({ error: \"User not found\" }, { status: 404 });\n }\n\n const userDetails = userData.rows[0];\n\n return Response.json({\n id: userDetails.id,\n username: userDetails.username,\n email: userDetails.email,\n subscriptionStatus: userDetails.subscription_status,\n });\n } catch (err) {\n console.error(\"Get user error:\", err);\n return Response.json(\n { error: \"Failed to get user information: \" + String(err) },\n { status: 500 }\n );\n }\n }\n\n // ログアウトエンドポイント\n if (url.pathname === \"/api/logout\") {\n return Response.json(\n { success: true },\n {\n headers: {\n // クッキーを期限切れにして削除\n \"Set-Cookie\":\n \"auth_token=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0\",\n },\n }\n );\n }\n\n // 検索条件保存エンドポイント\n if (url.pathname === \"/api/searches/save\") {\n if (request.method !== \"POST\") {\n return Response.json({ error: \"Method not allowed\" }, { status: 405 });\n }\n\n try {\n // ユーザー情報を取得\n const user = await getUserFromRequest(request);\n\n if (!user) {\n return Response.json({ error: \"Not authenticated\" }, { status: 401 });\n }\n\n const { name, query, account, type, sinceDate, untilDate } =\n await request.json();\n\n // 入力検証\n if (!name || (!query && !account)) {\n return Response.json(\n { error: \"Name and either query or account are required\" },\n { status: 400 }\n );\n }\n\n // 無料ユーザーの保存数制限をチェック\n const userData = await sqlite.execute(\n `SELECT subscription_status FROM ${KEY}_users WHERE id = ?`,\n [user.id]\n );\n\n const isPremium = userData.rows[0].subscription_status === \"premium\";\n\n if (!isPremium) {\n const savedCount = await sqlite.execute(\n `SELECT COUNT(*) as count FROM ${KEY}_saved_searches WHERE user_id = ?`,\n [user.id]\n );\n\n if (savedCount.rows[0].count >= 3) {\n return Response.json(\n {\n error:\n \"Free users can save up to 3 searches. Upgrade to Premium for unlimited searches.\",\n },\n { status: 403 }\n );\n }\n }\n\n // 検索条件を保存\n await sqlite.execute(\n `INSERT INTO ${KEY}_saved_searches (user_id, name, query, account, type, since_date, until_date) \n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [\n user.id,\n name,\n query || \"\",\n account || \"\",\n type || \"Latest\",\n sinceDate || \"\",\n untilDate || \"\",\n ]\n );\n\n // 新しく保存した検索のIDを取得\n const newSearchData = await sqlite.execute(\n `SELECT id FROM ${KEY}_saved_searches \n WHERE user_id = ? ORDER BY id DESC LIMIT 1`,\n [user.id]\n );\n\n return Response.json({\n success: true,\n searchId: newSearchData.rows[0].id,\n });\n } catch (err) {\n console.error(\"Save search error:\", err);\n return Response.json(\n { error: \"Failed to save search: \" + String(err) },\n { status: 500 }\n );\n }\n }\n\n // 保存済み検索一覧取得エンドポイント\n if (url.pathname === \"/api/searches\") {\n try {\n // ユーザー情報を取得\n const user = await getUserFromRequest(request);\n\n if (!user) {\n return Response.json({ error: \"Not authenticated\" }, { status: 401 });\n }\n\n // ユーザーの保存済み検索を取得\n const searches = await sqlite.execute(\n `SELECT id, name, query, account, type, since_date, until_date, created_at \n FROM ${KEY}_saved_searches \n WHERE user_id = ? \n ORDER BY created_at DESC`,\n [user.id]\n );\n\n return Response.json(searches.rows);\n } catch (err) {\n console.error(\"Get searches error:\", err);\n return Response.json(\n { error: \"Failed to get searches: \" + String(err) },\n { status: 500 }\n );\n }\n }\n\n // 保存済み検索削除エンドポイント\n if (\n url.pathname.startsWith(\"/api/searches/\") &&\n url.pathname.includes(\"/delete\")\n ) {\n if (request.method !== \"DELETE\" && request.method !== \"POST\") {\n return Response.json({ error: \"Method not allowed\" }, { status: 405 });\n }\n\n try {\n // ユーザー情報を取得\n const user = await getUserFromRequest(request);\n\n if (!user) {\n return Response.json({ error: \"Not authenticated\" }, { status: 401 });\n }\n\n // URLから検索IDを取得\n const searchId = parseInt(url.pathname.split(\"/\")[3]);\n\n if (isNaN(searchId)) {\n return Response.json({ error: \"Invalid search ID\" }, { status: 400 });\n }\n\n // 検索が存在し、ユーザーのものであることを確認\n const searchData = await sqlite.execute(\n `SELECT * FROM ${KEY}_saved_searches WHERE id = ? AND user_id = ?`,\n [searchId, user.id]\n );\n\n if (searchData.rows.length === 0) {\n return Response.json(\n { error: \"Search not found or not authorized\" },\n { status: 404 }\n );\n }\n\n // 検索を削除\n await sqlite.execute(`DELETE FROM ${KEY}_saved_searches WHERE id = ?`, [\n searchId,\n ]);\n\n return Response.json({ success: true });\n } catch (err) {\n console.error(\"Delete search error:\", err);\n return Response.json(\n { error: \"Failed to delete search: \" + String(err) },\n { status: 500 }\n );\n }\n }\n\n // 既存のAPI検索エンドポイント\n if (url.pathname === \"/api/search\") {\n const apiKey = request.headers.get(\"X-Api-Key\");\n if (!apiKey) {\n return Response.json(\n { status: \"error\", message: \"API Key missing\" },\n { status: 401 }\n );\n }\n const query = url.searchParams.get(\"query\");\n const cursor = url.searchParams.get(\"cursor\");\n const type = url.searchParams.get(\"type\") || \"Latest\";\n if (!query) {\n return Response.json(\n { status: \"error\", message: \"Missing query\" },\n { status: 400 }\n );\n }\n const apiUrl = new URL(\"https://api.socialdata.tools/twitter/search\");\n apiUrl.searchParams.set(\"query\", query);\n apiUrl.searchParams.set(\"type\", type);\n if (cursor) apiUrl.searchParams.set(\"cursor\", cursor);\n\n try {\n const apiResponse = await fetch(apiUrl.toString(), {\n headers: {\n Authorization: `Bearer ${apiKey}`,\n Accept: \"application/json\",\n },\n });\n let responseData;\n try {\n responseData = await apiResponse.json();\n } catch (e) {\n const text = await apiResponse.text();\n console.error(\"Non-JSON response:\", text);\n return Response.json(\n {\n status: \"error\",\n message: `API non-JSON response: ${apiResponse.statusText}`,\n },\n {\n status: apiResponse.status,\n }\n );\n }\n if (!apiResponse.ok || responseData.status === \"error\") {\n console.error(`API Error (${apiResponse.status}):`, responseData);\n return Response.json(\n {\n status: \"error\",\n message:\n responseData?.message || `API Error: ${apiResponse.statusText}`,\n },\n { status: apiResponse.status }\n );\n }\n return Response.json(responseData);\n } catch (err) {\n console.error(\"Fetch error:\", err);\n return Response.json(\n { status: \"error\", message: `Server fetch error: ${err.message}` },\n { status: 500 }\n );\n }\n }\n\n // Serve the main HTML page\n return new Response(\n `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",false,"label",[36],"be19f890-2825-11f0-af78-569c3dd06744","README.md","be19f926-2825-11f0-af78-569c3dd06744",["D",1744813929970],0,"Migrated from folder: x_posts_collect/test01",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":70,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_67":71,"_18":72},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":66,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_67":68,"_18":69},["D",1744813937274],"children",[],[36],["D",1744813929970],[],[58],"be1739b6-2825-11f0-af78-569c3dd06744",["D",1746280301656],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","fc0bd9ca-263d-48ce-84f0-30b4a2ea6082","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","fc71265b-929d-440a-aa31-727271a3da69","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_125":121},"org",{"_11":12,"_119":-5,"_120":121,"_82":83,"_122":123,"_124":54},"branch",{"_17":43,"_13":16,"_34":41,"_111":73,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVRJUVhlbWlxQ1ZNUnJVcWpHQ1dWNGEwcU0ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":73,"_13":14,"_46":163,"_75":-5,"_76":45,"_77":78,"_79":78,"_80":-5,"_81":-5,"_82":83,"_84":38,"_85":45,"_86":-5,"_87":-5,"_88":61,"_89":90,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":96,"_97":96,"_98":99,"_100":99,"_101":99,"_102":96,"_103":96,"_104":164,"_106":165,"_108":166,"_110":54},[157,158],"files",[157,158],"counts",{"_148":61,"_149":48,"_150":61,"_31":151,"_152":153},[144,145],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":60,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_18":147},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":146},[36],[58],"pulls","branches","forks",{"_154":61,"_156":61},"connections",{"_154":61,"_155":61},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":48,"_44":45,"_46":70,"_17":61,"_49":24,"_51":62,"_53":54,"_55":-5,"_67":161,"_18":162},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":66,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_67":159,"_18":160},[],[36],[],[58],["D",1746280301656],{"_11":12,"_125":121},{"_11":12,"_119":-5,"_120":121,"_82":83,"_122":123,"_124":54},{"_17":43,"_13":16,"_34":41,"_111":73,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"ctx",{"_104":-5,"_141":200,"_201":202,"_203":204,"_205":54,"_206":54,"_207":54,"_208":45,"_209":-5,"_210":-7,"_211":-7,"_212":61,"_213":54,"_214":54,"_215":-5,"_216":54,"_217":54,"_218":54,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":16,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Code