Xアカウント検索

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_192":193,"_194":195},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_145":-5,"_20":146,"_22":147,"_148":149,"_150":151,"_26":152,"_24":153,"_154":-5,"_155":-5,"_156":55,"_157":158,"_159":46,"_160":-5,"_161":-5,"_162":163},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","tsuchi_ya","name","social_data_api_project","branchName","main","version","path","UI","project",{"_34":89,"_13":14,"_47":90,"_91":-5,"_92":55,"_93":94,"_95":94,"_96":-5,"_97":-5,"_98":99,"_100":38,"_101":46,"_102":46,"_103":104,"_105":106,"_107":108,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":114,"_115":114,"_116":117,"_118":117,"_119":117,"_120":114,"_121":114,"_122":123,"_124":125,"_126":127,"_128":55},"tree",[64,65,66],"file",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":63},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","b2cfff28-2f93-11f0-91fc-569c3dd06744","search-interface.ts","fileId","0503178a-2c88-11f0-bbd7-569c3dd06744","parentId","28533d20-2c86-11f0-9599-569c3dd06744","branchId","e014f822-2c81-11f0-810e-569c3dd06744","branchVersion",61,"latest",true,"createdAt",["D",1747097185500],38,"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 // --- State declarations ---\n const [targetAccount, setTargetAccount] = React.useState(\"\");\n const [query, setQuery] = React.useState(\"\");\n const [searchType, setSearchType] = React.useState(\"Latest\");\n const [isDarkMode, setIsDarkMode] = React.useState(false);\n const [maxTweets, setMaxTweets] = React.useState(\"\");\n\n // Date filters\n const [startYear, setStartYear] = React.useState(\"\");\n const [startMonth, setStartMonth] = React.useState(\"\");\n const [startDay, setStartDay] = React.useState(\"\");\n const [endYear, setEndYear] = React.useState(\"\");\n const [endMonth, setEndMonth] = React.useState(\"\");\n const [endDay, setEndDay] = React.useState(\"\");\n\n // Include options\n const [includeReplies, setIncludeReplies] = React.useState(false);\n const [includeRetweets, setIncludeRetweets] = React.useState(false);\n\n // Count filters - removed direction states, as they'll always be \"greater than or equal to\"\n const [likesCount, setLikesCount] = React.useState(\"\");\n const [retweetsCount, setRetweetsCount] = React.useState(\"\");\n const [repliesCount, setRepliesCount] = React.useState(\"\");\n const [bookmarksCount, setBookmarksCount] = React.useState(\"\");\n const [viewsCount, setViewsCount] = React.useState(\"\");\n\n // UI state\n const [showAdvanced, setShowAdvanced] = React.useState(false);\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 [parentOrigin, setParentOrigin] = React.useState(\"\");\n\n // ツイート選択用の状態\n const [selectedTweets, setSelectedTweets] = React.useState({});\n const [allSelected, setAllSelected] = React.useState(false);\n\n const isFetchingRef = React.useRef(false);\n const sourceUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n\n // Toggle dark mode\n const toggleDarkMode = () => {\n const nextIsDarkMode = !isDarkMode; // 次の isDarkMode の状態を計算\n setIsDarkMode(nextIsDarkMode);\n // classList.toggle の第2引数には、次の状態に基づいて light-mode クラスを追加するか削除するかを指定\n document.documentElement.classList.toggle(\"light-mode\", !nextIsDarkMode);\n };\n\n // Initialize dark mode on mount\n React.useEffect(() => {\n document.documentElement.classList.toggle(\"light-mode\", !isDarkMode);\n }, []);\n\n // Close modal when clicking outside\n const modalRef = React.useRef(null);\n React.useEffect(() => {\n const handleClickOutside = (event) => {\n if (modalRef.current && !modalRef.current.contains(event.target)) {\n setShowAdvanced(false);\n }\n };\n\n if (showAdvanced) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [showAdvanced]);\n\n // --- Setup postMessage communication with parent frame ---\n React.useEffect(() => {\n // Listen for messages from parent window\n const handleMessage = (event) => {\n // Ensure the message is from a trusted source\n if (!event.origin || !event.data) return;\n\n // Store the parent origin for future communication\n if (!parentOrigin) {\n setParentOrigin(event.origin);\n }\n\n // Handle different message types\n if (event.data.type === \"SEARCH_RESULTS\") {\n handleSearchResults(event.data.payload);\n } else if (event.data.type === \"SEARCH_ERROR\") {\n handleSearchError(event.data.payload);\n } else if (event.data.type === \"SEARCH_STATUS\") {\n handleSearchStatus(event.data.payload);\n } else if (event.data.type === \"SAVE_TWEETS_RESPONSE\") {\n handleSaveTweetsResponse(event.data.payload);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n\n // Notify parent that iframe is ready\n if (window.parent !== window) {\n window.parent.postMessage({ type: \"IFRAME_READY\" }, \"*\");\n }\n\n return () => {\n window.removeEventListener(\"message\", handleMessage);\n };\n }, [parentOrigin]);\n\n // Generate years for dropdowns\n const generateYears = () => {\n const currentYear = new Date().getFullYear();\n const years = [];\n for (let year = 2006; year <= currentYear; year++) {\n years.push(year);\n }\n return years.reverse();\n };\n\n // Generate months for dropdowns\n const generateMonths = () => {\n return Array.from({ length: 12 }, (_, i) => i + 1);\n };\n\n // Generate days for dropdowns\n const generateDays = () => {\n return Array.from({ length: 31 }, (_, i) => i + 1);\n };\n\n // --- Handle messages from parent ---\n const handleSearchResults = (payload) => {\n if (!payload) return;\n\n const { tweets: newTweets, cursor } = payload;\n\n setTweets((prevTweets) => {\n // If this is a new search (not pagination), replace tweets\n if (!payload.isMore) {\n return newTweets || [];\n }\n // Otherwise append to existing tweets\n return [...prevTweets, ...(newTweets || [])];\n });\n\n if (\n !cursor || (newTweets && newTweets.length === 0)\n || (tweets.length + (newTweets?.length || 0) >= parseInt(maxTweets))\n ) {\n setLoading(false);\n setLoadingMessage(\n tweets.length > 0\n ? `${tweets.length}件のツイートが見つかりました`\n : \"ツイートが見つかりません\",\n );\n isFetchingRef.current = false;\n }\n };\n\n const handleSearchError = (payload) => {\n setError(payload.message || \"An error occurred during search\");\n setLoading(false);\n isFetchingRef.current = false;\n };\n\n const handleSearchStatus = (payload) => {\n if (payload.loading !== undefined) {\n setLoading(payload.loading);\n }\n if (payload.message) {\n setLoadingMessage(payload.message);\n }\n };\n\n const handleSaveTweetsResponse = (payload) => {\n if (payload.success) {\n setError(null);\n setLoadingMessage(`${payload.count}件のツイートを保存しました`);\n } else {\n setError(payload.message || \"ツイートの保存に失敗しました\");\n }\n };\n\n // --- Helper Functions ---\n const buildQuery = React.useCallback(() => {\n // Start with the account filter (required)\n const accountName = targetAccount.trim().replace(/^@/, \"\");\n let finalQuery = `from:${accountName}`;\n\n // Add keywords if provided\n if (query.trim()) {\n finalQuery += ` ${query.trim()}`;\n }\n\n // Add date range if provided\n if (startYear && startMonth && startDay) {\n finalQuery += ` since:${startYear}-${\n startMonth\n .toString()\n .padStart(2, \"0\")\n }-${startDay.toString().padStart(2, \"0\")}`;\n }\n\n if (endYear && endMonth && endDay) {\n finalQuery += ` until:${endYear}-${\n endMonth\n .toString()\n .padStart(2, \"0\")\n }-${endDay.toString().padStart(2, \"0\")}`;\n }\n\n // Handle include/exclude options\n if (!includeReplies) {\n finalQuery += \" -filter:replies\";\n }\n\n if (!includeRetweets) {\n finalQuery += \" -is:retweet\";\n }\n\n // Add engagement filters\n // Always use min_ (greater than or equal to) for API filters\n if (likesCount) {\n finalQuery += ` min_faves:${likesCount}`;\n }\n\n if (retweetsCount) {\n finalQuery += ` min_retweets:${retweetsCount}`;\n }\n\n // Note: Replies count, bookmark count, and views count might not be directly filterable\n // in the Twitter/X API. These may need to be filtered client-side after fetching.\n\n return finalQuery.trim();\n }, [\n targetAccount,\n query,\n startYear,\n startMonth,\n startDay,\n endYear,\n endMonth,\n endDay,\n includeReplies,\n includeRetweets,\n likesCount,\n retweetsCount,\n ]);\n\n // --- Search Functions ---\n const requestSearch = (finalQuery, type, isMore = false, cursor = null) => {\n if (!window.parent || window.parent === window) {\n setError(\"このアプリはiframe内で実行する必要があります\");\n return;\n }\n\n // Use parentOrigin if available, fallback to \"*\" with caution\n const targetOrigin = parentOrigin || \"*\";\n\n // Create search params object with all relevant filters\n const searchParams = {\n query: finalQuery,\n searchType: type,\n isMore,\n cursor,\n maxTweets: parseInt(maxTweets),\n filters: {\n // These filters will be applied client-side if the API doesn't support them directly\n // Always use \"greater than or equal to\" filtering\n repliesCount: repliesCount\n ? { value: parseInt(repliesCount), direction: \"gte\" }\n : null,\n bookmarksCount: bookmarksCount\n ? { value: parseInt(bookmarksCount), direction: \"gte\" }\n : null,\n viewsCount: viewsCount\n ? { value: parseInt(viewsCount), direction: \"gte\" }\n : null,\n likesCount: likesCount\n ? { value: parseInt(likesCount), direction: \"gte\" }\n : null,\n retweetsCount: retweetsCount\n ? { value: parseInt(retweetsCount), direction: \"gte\" }\n : null,\n },\n };\n\n window.parent.postMessage(\n {\n type: \"SEARCH_REQUEST\",\n payload: searchParams,\n },\n targetOrigin,\n );\n\n if (!isMore) {\n setTweets([]);\n setCurrentSearchQuery(finalQuery);\n // 新しい検索を開始するときに選択状態をリセット\n setSelectedTweets({});\n setAllSelected(false);\n }\n\n setLoading(true);\n setLoadingMessage(isMore ? \"さらに結果を取得中...\" : \"検索を開始中...\");\n setError(null);\n isFetchingRef.current = true;\n };\n\n const handleSubmit = (event) => {\n event.preventDefault();\n\n // Validate required account ID\n if (!targetAccount.trim()) {\n setError(\"検索するアカウントIDを入力してください。\");\n return;\n }\n\n // Validate required maxTweets\n if (!maxTweets || parseInt(maxTweets) <= 0) {\n setError(\"取得するツイート数を正の数で指定してください。\");\n return;\n }\n\n const finalQuery = buildQuery();\n\n if (loading) {\n // If already loading, stop the current fetch and start a new one\n handleStopFetching();\n // Use setTimeout to ensure the stop action completes before starting new fetch\n setTimeout(() => {\n requestSearch(finalQuery, searchType);\n }, 100);\n } else {\n // Start a new fetch\n requestSearch(finalQuery, searchType);\n }\n };\n\n const handleStopFetching = () => {\n console.log(\"Stopping fetch...\");\n isFetchingRef.current = false;\n setLoading(false);\n setLoadingMessage(\"取得を停止しました\");\n\n // Notify parent to stop the fetch\n if (window.parent && window.parent !== window && parentOrigin) {\n window.parent.postMessage(\n {\n type: \"STOP_SEARCH\",\n },\n parentOrigin,\n );\n }\n };\n\n const loadMoreTweets = () => {\n if (loading || !currentSearchQuery) return;\n\n // Check if we have already reached the max tweets limit\n if (tweets.length >= parseInt(maxTweets)) {\n setLoadingMessage(`指定された上限(${maxTweets}件)に達しました`);\n return;\n }\n\n // Get the ID of the last tweet as cursor\n const lastTweet = tweets[tweets.length - 1];\n if (!lastTweet) return;\n\n const cursor = lastTweet.id_str;\n requestSearch(currentSearchQuery, searchType, true, cursor);\n };\n\n // Helper to check if a tweet meets the client-side filter criteria\n const meetsCriteria = (tweet) => {\n // Apply any client-side filters here that the API doesn't support\n // Only perform \"greater than or equal to\" checks\n\n // Reply count filter\n if (repliesCount && tweet.reply_count !== undefined) {\n const count = parseInt(repliesCount);\n if (tweet.reply_count < count) return false;\n }\n\n // Bookmarks count filter\n if (bookmarksCount && tweet.bookmark_count !== undefined) {\n const count = parseInt(bookmarksCount);\n if (tweet.bookmark_count < count) return false;\n }\n\n // Views count filter\n if (viewsCount && tweet.view_count !== undefined) {\n const count = parseInt(viewsCount);\n if (tweet.view_count < count) return false;\n }\n\n // Apply like count filter if not handled by API\n if (likesCount && tweet.favorite_count !== undefined) {\n if (tweet.favorite_count < parseInt(likesCount)) return false;\n }\n\n // Apply retweet count filter if not handled by API\n if (retweetsCount && tweet.retweet_count !== undefined) {\n if (tweet.retweet_count < parseInt(retweetsCount)) return false;\n }\n\n return true;\n };\n\n // ツイート選択関連の関数\n const handleTweetSelection = (tweetId) => {\n setSelectedTweets(prev => {\n const newSelected = { ...prev };\n if (newSelected[tweetId]) {\n delete newSelected[tweetId];\n } else {\n newSelected[tweetId] = true;\n }\n return newSelected;\n });\n\n // 全選択の状態を更新\n const willAllBeSelected = Object.keys(selectedTweets).length + 1 >= filteredTweets.length;\n if (willAllBeSelected !== allSelected) {\n setAllSelected(willAllBeSelected);\n }\n };\n\n const handleSelectAllToggle = () => {\n const newAllSelected = !allSelected;\n setAllSelected(newAllSelected);\n\n if (newAllSelected) {\n // 全て選択\n const newSelectedTweets = {};\n filteredTweets.forEach(tweet => {\n newSelectedTweets[tweet.id_str] = true;\n });\n setSelectedTweets(newSelectedTweets);\n } else {\n // 全て選択解除\n setSelectedTweets({});\n }\n };\n\n // 選択したツイートを保存\n const saveTweets = () => {\n const selectedTweetIds = Object.keys(selectedTweets);\n if (selectedTweetIds.length === 0) {\n setError(\"保存するツイートが選択されていません\");\n return;\n }\n\n // 選択されたツイートの完全なデータを取得\n const tweetsToSave = filteredTweets.filter(tweet => selectedTweets[tweet.id_str]);\n\n // 親ウィンドウに保存リクエストを送信\n if (window.parent && window.parent !== window && parentOrigin) {\n window.parent.postMessage(\n {\n type: \"SAVE_TWEETS_REQUEST\",\n payload: {\n tweets: tweetsToSave,\n },\n },\n parentOrigin,\n );\n\n setLoadingMessage(\"ツイートを保存中...\");\n } else {\n setError(\"このアプリはiframe内で実行する必要があります\");\n }\n };\n\n // Filter tweets that meet the criteria\n const filteredTweets = tweets.filter(meetsCriteria);\n\n // 選択されたツイートの数\n const selectedTweetCount = Object.keys(selectedTweets).length;\n\n // --- Render Main Application UI with React.createElement ---\n return React.createElement(\n \"div\",\n { className: \"app\" },\n React.createElement(\n \"div\",\n { className: \"header-container\" },\n React.createElement(\"h1\", { className: \"title\" }, \"X Account Search\"),\n React.createElement(\n \"button\",\n {\n className: \"theme-toggle-btn\",\n onClick: toggleDarkMode,\n \"aria-label\": isDarkMode\n ? \"ライトモードに切り替え\"\n : \"ダークモードに切り替え\",\n },\n // 2. アイコンの表示ロジックを入れ替え\n isDarkMode\n ? React.createElement(\n \"svg\",\n {\n className: \"theme-icon\",\n width: \"18\",\n height: \"18\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"var(--foreground)\",\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n },\n [\n React.createElement(\"circle\", {\n key: \"circle\",\n cx: \"12\",\n cy: \"12\",\n r: \"5\",\n }),\n React.createElement(\"line\", {\n key: \"line1\",\n x1: \"12\",\n y1: \"1\",\n x2: \"12\",\n y2: \"3\",\n }),\n React.createElement(\"line\", {\n key: \"line2\",\n x1: \"12\",\n y1: \"21\",\n x2: \"12\",\n y2: \"23\",\n }),\n React.createElement(\"line\", {\n key: \"line3\",\n x1: \"4.22\",\n y1: \"4.22\",\n x2: \"5.64\",\n y2: \"5.64\",\n }),\n React.createElement(\"line\", {\n key: \"line4\",\n x1: \"18.36\",\n y1: \"18.36\",\n x2: \"19.78\",\n y2: \"19.78\",\n }),\n React.createElement(\"line\", {\n key: \"line5\",\n x1: \"1\",\n y1: \"12\",\n x2: \"3\",\n y2: \"12\",\n }),\n React.createElement(\"line\", {\n key: \"line6\",\n x1: \"21\",\n y1: \"12\",\n x2: \"23\",\n y2: \"12\",\n }),\n React.createElement(\"line\", {\n key: \"line7\",\n x1: \"4.22\",\n y1: \"19.78\",\n x2: \"5.64\",\n y2: \"18.36\",\n }),\n React.createElement(\"line\", {\n key: \"line8\",\n x1: \"18.36\",\n y1: \"5.64\",\n x2: \"19.78\",\n y2: \"4.22\",\n }),\n ],\n )\n : React.createElement(\n // こちらが月アイコン (ライトモード時に表示)\n \"svg\",\n {\n className: \"theme-icon\",\n width: \"18\",\n height: \"18\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\", // ライトモード時は var(--foreground) が暗色になるため currentColor でOK\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n },\n React.createElement(\"path\", {\n d: \"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\",\n }),\n ),\n ),\n ),\n // Search Form\n React.createElement(\n \"form\",\n { onSubmit: handleSubmit, className: \"card\" },\n // Account input field (required)\n React.createElement(\n \"div\",\n { className: \"field account-field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"targetAccount\", className: \"label\" },\n \"アカウントID（必須）\",\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: \"ユーザー名\",\n className: \"input\",\n disabled: loading,\n required: true,\n }),\n ),\n ),\n // Keywords field (optional)\n React.createElement(\n \"div\",\n { className: \"field query-field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"queryKeywords\", className: \"label\" },\n \"キーワード（任意）\",\n ),\n React.createElement(\"input\", {\n type: \"text\",\n id: \"queryKeywords\",\n value: query,\n onChange: (e) => setQuery(e.target.value),\n placeholder: \"このアカウントのツイート内を検索\",\n className: \"input\",\n disabled: loading,\n }),\n ),\n // 取得件数フィールド（必須） - キーワードの下に移動\n React.createElement(\n \"div\",\n { className: \"field tweets-count-field\" },\n React.createElement(\n \"label\",\n { htmlFor: \"maxTweets\", className: \"label\" },\n \"取得件数（必須）\",\n ),\n React.createElement(\"input\", {\n type: \"number\",\n id: \"maxTweets\",\n value: maxTweets,\n onChange: (e) => setMaxTweets(e.target.value),\n placeholder: \"\",\n className: \"input\",\n disabled: loading,\n min: \"1\",\n required: true,\n }),\n ),\n // Date Range (moved from modal to main form)\n React.createElement(\n \"div\",\n { className: \"field-group\" },\n React.createElement(\"h3\", { className: \"group-title\" }, \"期間\"),\n // Start Date\n React.createElement(\n \"div\",\n { className: \"field-row\" },\n React.createElement(\"div\", { className: \"field-label\" }, \"開始日\"),\n React.createElement(\n \"div\",\n { className: \"date-field-group\" },\n // Year\n React.createElement(\n \"select\",\n {\n value: startYear,\n onChange: (e) => setStartYear(e.target.value),\n className: \"select date-select\",\n disabled: loading,\n },\n React.createElement(\"option\", { value: \"\" }, \"年\"),\n generateYears().map((year) => React.createElement(\"option\", { key: year, value: year }, year)),\n ),\n // Month\n React.createElement(\n \"select\",\n {\n value: startMonth,\n onChange: (e) => setStartMonth(e.target.value),\n className: \"select date-select\",\n disabled: loading,\n },\n React.createElement(\"option\", { value: \"\" }, \"月\"),\n generateMonths().map((month) =>\n React.createElement(\n \"option\",\n { key: month, value: month },\n month,\n )\n ),\n ),\n // Day\n React.createElement(\n \"select\",\n {\n value: startDay,\n onChange: (e) => setStartDay(e.target.value),\n className: \"select date-select\",\n disabled: loading,\n },\n React.createElement(\"option\", { value: \"\" }, \"日\"),\n generateDays().map((day) => React.createElement(\"option\", { key: day, value: day }, day)),\n ),\n ),\n ),\n // End Date\n React.createElement(\n \"div\",\n { className: \"field-row\" },\n React.createElement(\"div\", { className: \"field-label\" }, \"終了日\"),\n React.createElement(\n \"div\",\n { className: \"date-field-group\" },\n // Year\n React.createElement(\n \"select\",\n {\n value: endYear,\n onChange: (e) => setEndYear(e.target.value),\n className: \"select date-select\",\n disabled: loading,\n },\n React.createElement(\"option\", { value: \"\" }, \"年\"),\n generateYears().map((year) => React.createElement(\"option\", { key: year, value: year }, year)),\n ),\n // Month\n React.createElement(\n \"select\",\n {\n value: endMonth,\n onChange: (e) => setEndMonth(e.target.value),\n className: \"select date-select\",\n disabled: loading,\n },\n React.createElement(\"option\", { value: \"\" }, \"月\"),\n generateMonths().map((month) =>\n React.createElement(\n \"option\",\n { key: month, value: month },\n month,\n )\n ),\n ),\n // Day\n React.createElement(\n \"select\",\n {\n value: endDay,\n onChange: (e) => setEndDay(e.target.value),\n className: \"select date-select\",\n disabled: loading,\n },\n React.createElement(\"option\", { value: \"\" }, \"日\"),\n generateDays().map((day) => React.createElement(\"option\", { key: day, value: day }, day)),\n ),\n ),\n ),\n ),\n // Advanced options button\n React.createElement(\n \"div\",\n { className: \"advanced-options-container\" },\n React.createElement(\n \"button\",\n {\n type: \"button\",\n className: \"advanced-button\",\n onClick: () => setShowAdvanced(!showAdvanced),\n },\n \"オプション\",\n ),\n // Advanced options modal\n showAdvanced\n && React.createElement(\n \"div\",\n { className: \"modal-backdrop\" },\n React.createElement(\n \"div\",\n {\n className: \"modal-content\",\n ref: modalRef,\n },\n React.createElement(\n \"div\",\n { className: \"modal-header\" },\n React.createElement(\"h3\", {}, \"高度な検索オプション\"),\n React.createElement(\n \"button\",\n {\n className: \"close-button\",\n onClick: () => setShowAdvanced(false),\n },\n \"×\",\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"modal-body\" },\n // Include options (moved into modal)\n React.createElement(\n \"div\",\n { className: \"field-group\" },\n React.createElement(\n \"h3\",\n { className: \"group-title\" },\n \"含めるオプション\",\n ),\n React.createElement(\n \"div\",\n { className: \"field-row include-options\" },\n React.createElement(\n \"div\",\n { className: \"checkbox-field\" },\n React.createElement(\"input\", {\n type: \"checkbox\",\n id: \"includeReplies\",\n checked: includeReplies,\n onChange: (e) => setIncludeReplies(e.target.checked),\n disabled: loading,\n }),\n React.createElement(\n \"label\",\n {\n htmlFor: \"includeReplies\",\n className: \"checkbox-label\",\n },\n \"返信を含める\",\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"checkbox-field\" },\n React.createElement(\"input\", {\n type: \"checkbox\",\n id: \"includeRetweets\",\n checked: includeRetweets,\n onChange: (e) => setIncludeRetweets(e.target.checked),\n disabled: loading,\n }),\n React.createElement(\n \"label\",\n {\n htmlFor: \"includeRetweets\",\n className: \"checkbox-label\",\n },\n \"リツイートを含める\",\n ),\n ),\n ),\n ),\n // Engagement Filters\n React.createElement(\n \"div\",\n { className: \"field-group\" },\n React.createElement(\n \"h3\",\n { className: \"group-title\" },\n \"エンゲージメントフィルター\",\n ),\n // Likes Filter - removed direction dropdown\n React.createElement(\n \"div\",\n { className: \"filter-row\" },\n React.createElement(\n \"label\",\n { className: \"filter-label\" },\n \"いいね\",\n ),\n React.createElement(\n \"div\",\n { className: \"filter-controls\" },\n React.createElement(\"input\", {\n type: \"number\",\n min: \"0\",\n value: likesCount,\n onChange: (e) => setLikesCount(e.target.value),\n placeholder: \"数\",\n className: \"input filter-input no-spinner\",\n disabled: loading,\n }),\n ),\n ),\n // Retweets Filter - removed direction dropdown\n React.createElement(\n \"div\",\n { className: \"filter-row\" },\n React.createElement(\n \"label\",\n { className: \"filter-label\" },\n \"リツイート\",\n ),\n React.createElement(\n \"div\",\n { className: \"filter-controls\" },\n React.createElement(\"input\", {\n type: \"number\",\n min: \"0\",\n value: retweetsCount,\n onChange: (e) => setRetweetsCount(e.target.value),\n placeholder: \"数\",\n className: \"input filter-input no-spinner\",\n disabled: loading,\n }),\n ),\n ),\n // Replies Filter - removed direction dropdown\n React.createElement(\n \"div\",\n { className: \"filter-row\" },\n React.createElement(\n \"label\",\n { className: \"filter-label\" },\n \"返信\",\n ),\n React.createElement(\n \"div\",\n { className: \"filter-controls\" },\n React.createElement(\"input\", {\n type: \"number\",\n min: \"0\",\n value: repliesCount,\n onChange: (e) => setRepliesCount(e.target.value),\n placeholder: \"数\",\n className: \"input filter-input no-spinner\",\n disabled: loading,\n }),\n ),\n ),\n // Bookmarks Filter - removed direction dropdown\n React.createElement(\n \"div\",\n { className: \"filter-row\" },\n React.createElement(\n \"label\",\n { className: \"filter-label\" },\n \"ブックマーク\",\n ),\n React.createElement(\n \"div\",\n { className: \"filter-controls\" },\n React.createElement(\"input\", {\n type: \"number\",\n min: \"0\",\n value: bookmarksCount,\n onChange: (e) => setBookmarksCount(e.target.value),\n placeholder: \"数\",\n className: \"input filter-input no-spinner\",\n disabled: loading,\n }),\n ),\n ),\n // Views Filter - removed direction dropdown\n React.createElement(\n \"div\",\n { className: \"filter-row\" },\n React.createElement(\n \"label\",\n { className: \"filter-label\" },\n \"表示回数\",\n ),\n React.createElement(\n \"div\",\n { className: \"filter-controls\" },\n React.createElement(\"input\", {\n type: \"number\",\n min: \"0\",\n value: viewsCount,\n onChange: (e) => setViewsCount(e.target.value),\n placeholder: \"数\",\n className: \"input filter-input no-spinner\",\n disabled: loading,\n }),\n ),\n ),\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"modal-footer\" },\n React.createElement(\n \"button\",\n {\n type: \"button\",\n className: \"button\",\n onClick: () => setShowAdvanced(false),\n },\n \"適用\",\n ),\n ),\n ),\n ),\n ),\n // Search/Stop Button - Modified to center align\n React.createElement(\n \"div\",\n { className: \"button-row\" },\n !loading\n ? React.createElement(\n \"button\",\n { type: \"submit\", className: \"button\" },\n \"検索\",\n )\n : React.createElement(\n \"button\",\n {\n type: \"button\",\n onClick: handleStopFetching,\n className: \"button stop\",\n },\n \"停止\",\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 // Results\n filteredTweets.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 filteredTweets.length,\n ),\n React.createElement(\n \"span\",\n { className: \"results-label\" },\n \"ツイート\",\n ),\n // 選択件数表示\n selectedTweetCount > 0 && React.createElement(\n \"span\",\n { className: \"selected-count\" },\n `（${selectedTweetCount}件選択中）`,\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"actions-container\" },\n // 全選択ボタン\n React.createElement(\n \"button\",\n {\n type: \"button\",\n className: \"select-all-button\",\n onClick: handleSelectAllToggle,\n },\n allSelected ? \"選択を解除\" : \"全て選択\",\n ),\n // 保存ボタン\n selectedTweetCount > 0 && React.createElement(\n \"button\",\n {\n type: \"button\",\n className: \"save-button\",\n onClick: saveTweets,\n },\n \"保存\",\n ),\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"tweet-list\" },\n filteredTweets.map((tweet) =>\n React.createElement(\n \"div\",\n { key: tweet.id_str, className: \"tweet\" },\n // チェックボックス\n React.createElement(\n \"div\",\n { className: \"tweet-checkbox\" },\n React.createElement(\"input\", {\n type: \"checkbox\",\n id: `tweet-${tweet.id_str}`,\n checked: !!selectedTweets[tweet.id_str],\n onChange: () => handleTweetSelection(tweet.id_str),\n className: \"tweet-select\",\n }),\n ),\n // Tweet Content Container\n React.createElement(\n \"div\",\n { className: \"tweet-content\" },\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 hour: \"2-digit\",\n minute: \"2-digit\",\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 with Engagement Metrics\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.reply_count ?? 0,\n ),\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.bookmark_count ?? 0,\n ),\n React.createElement(\n \"span\",\n { className: \"metric\" },\n \"👁️ \",\n tweet.view_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 \"表示\",\n ),\n ),\n ),\n )\n ),\n ),\n // Load more button - Only show if we haven't reached the limit\n tweets.length < parseInt(maxTweets) && React.createElement(\n \"div\",\n { className: \"load-more-container\" },\n React.createElement(\n \"button\",\n {\n className: \"button load-more-button\",\n onClick: loadMoreTweets,\n disabled: loading,\n },\n loading ? \"読み込み中...\" : \"もっと読み込む\",\n ),\n ),\n ),\n // Empty Results Message\n !loading\n && filteredTweets.length === 0\n && currentSearchQuery\n && !error\n && React.createElement(\n \"div\",\n { className: \"card empty-card\" },\n \"ツイートが見つかりません\",\n ),\n // Footer - Modified text and added link\n React.createElement(\n \"footer\",\n null,\n \"developed by \",\n React.createElement(\n \"a\",\n {\n href: \"https://x.com/ogawa_analyze\",\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n \"Ogawa\",\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 // Serve the main HTML page for GET requests to the root\n const url = new URL(request.url);\n\n if (request.method === \"GET\" && url.pathname === \"/\") {\n return new Response(\n `Xアカウント検索

`,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n // Fallback for unhandled routes\n return Response.json({ error: \"Not Found\" }, { status: 404 });\n}\n\n// --- CSS ---\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 4% 20%); /* 入力より少し明るく */\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 4% 23%); /* ボタン背景より少し明るく */\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 --success: hsl(142, 76%, 36%);\n --success-foreground: hsl(0 0% 98%);\n }\n\n /* Light mode variables */\n html.light-mode {\n --background: hsl(0 0% 98%);\n --foreground: hsl(240 10% 3.9%);\n --card: hsl(0 0% 98%);\n --card-foreground: hsl(240 10% 3.9%);\n --popover: hsl(0 0% 98%);\n --popover-foreground: hsl(240 10% 3.9%);\n --primary: hsl(240 5.9% 10%);\n --primary-foreground: hsl(0 0% 98%);\n --secondary: hsl(240 5% 88%); /* 入力より少し暗く */\n --secondary-foreground: hsl(240 5.9% 10%);\n --muted: hsl(240 4.8% 95.9%);\n --muted-foreground: hsl(240 3.8% 46.1%);\n --accent: hsl(240 5% 85%); /* ボタン背景より少し暗く */\n --accent-foreground: hsl(240 5.9% 10%);\n --destructive: hsl(0 84.2% 60.2%);\n --destructive-foreground: hsl(0 0% 98%);\n --border: hsl(240 5.9% 90%);\n --input: hsl(240 5.9% 90%);\n --ring: hsl(240 5.9% 10%);\n --success: hsl(142, 69%, 58%);\n --success-foreground: hsl(144, 61%, 20%);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html, body {\n height: 100%;\n /* 日本語表示に適したフォントとして \"Noto Sans JP\" を優先的に指定 */\n /* Noto Sans JP を実際に表示するには、別途フォントを読み込む必要があります (例: Google Fontsから) */\n font-family: \"Noto Sans JP\", -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 .header-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n }\n\n .title {\n font-size: 1.5rem;\n font-weight: 500;\n margin: 0;\n }\n\n .theme-toggle-btn {\n background: var(--secondary);\n border: none;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 1.25rem;\n transition: background-color 0.2s;\n }\n\n .theme-toggle-btn:hover {\n background-color: var(--accent);\n }\n\n .theme-icon {\n font-size: 1.1rem;\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 .field-hint {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n margin-top: 0.25rem;\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 /* Hide spinner buttons on number inputs */\n input[type=\"number\"]::-webkit-inner-spin-button, \n input[type=\"number\"]::-webkit-outer-spin-button { \n -webkit-appearance: none; \n margin: 0; \n }\n \n input[type=\"number\"] {\n -moz-appearance: textfield;\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 align-items: center;\n }\n\n .field-row .field {\n flex: 1;\n margin-bottom: 0;\n }\n \n /* Include options styling */\n .include-options {\n margin: 1rem 0;\n }\n \n .checkbox-field {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n \n .checkbox-label {\n font-size: 0.875rem;\n cursor: pointer;\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: center;\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 Options Button */\n .advanced-options-container {\n position: relative;\n margin: 1rem 0;\n }\n \n .advanced-button {\n width: 100%;\n padding: 0.75rem;\n background-color: var(--secondary);\n color: var(--secondary-foreground);\n border: none;\n border-radius: var(--radius);\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s, transform 0.1s;\n }\n \n .advanced-button:hover {\n background-color: var(--accent);\n }\n \n .advanced-button:active {\n transform: scale(0.98);\n }\n \n /* Modal Styles */\n .modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.2s ease;\n }\n \n .modal-content {\n width: 90%;\n max-width: 400px; /* Reduced from 500px to make modal narrower */\n max-height: 90vh;\n overflow-y: auto;\n background-color: var(--card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);\n animation: slideIn 0.2s ease;\n }\n \n .modal-header {\n padding: 1rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .modal-header h3 {\n font-size: 1.1rem;\n font-weight: 600;\n margin: 0;\n }\n \n .close-button {\n background: none;\n border: none;\n font-size: 1.5rem;\n color: var(--muted-foreground);\n cursor: pointer;\n transition: color 0.2s;\n }\n \n .close-button:hover {\n color: var(--foreground);\n }\n \n .modal-body {\n padding: 1rem;\n overflow-y: auto;\n max-height: 70vh;\n }\n \n .modal-footer {\n padding: 1rem;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: flex-end;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideIn {\n from { transform: translateY(-20px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n\n /* Advanced options styling */\n .field-group {\n margin-bottom: 1.5rem;\n }\n \n .group-title {\n font-size: 1rem;\n font-weight: 500;\n margin-bottom: 0.75rem;\n color: var(--foreground);\n }\n \n .field-label {\n font-size: 0.875rem;\n min-width: 80px;\n }\n \n .date-field-group {\n display: flex;\n gap: 0.5rem;\n flex: 1;\n }\n \n .date-select {\n flex: 1;\n }\n \n /* Filter styles */\n .filter-row {\n display: flex;\n align-items: center;\n margin-bottom: 0.75rem;\n }\n \n .filter-label {\n font-size: 0.875rem;\n min-width: 80px;\n }\n \n .filter-controls {\n flex: 1;\n }\n \n .filter-input {\n flex: 1;\n max-width: 120px; /* Reduce width of the input fields */\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 margin-top: 0.5rem; /* Added margin for general errors */\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 .selected-count {\n color: var(--muted-foreground);\n font-size: 0.875rem;\n margin-left: 0.25rem;\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 display: flex;\n gap: 0.75rem;\n }\n\n .tweet:last-child {\n border-bottom: none;\n }\n \n .tweet-checkbox {\n display: flex;\n align-items: center;\n padding-top: 8px;\n }\n \n .tweet-select {\n transform: scale(1.2);\n cursor: pointer;\n }\n \n .tweet-content {\n flex: 1;\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 .load-more-container {\n padding: 1rem;\n text-align: center;\n border-top: 1px solid var(--border);\n }\n\n .load-more-button {\n width: 100%;\n max-width: 200px;\n }\n \n /* Action container and buttons */\n .actions-container {\n display: flex;\n gap: 0.75rem;\n align-items: center;\n }\n \n .select-all-button {\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n background-color: var(--secondary);\n color: var(--secondary-foreground);\n border: none;\n border-radius: var(--radius);\n cursor: pointer;\n }\n \n .save-button {\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n background-color: var(--success);\n color: var(--success-foreground);\n border: none;\n border-radius: var(--radius);\n cursor: pointer;\n }\n \n .select-all-button:hover,\n .save-button:hover {\n opacity: 0.9;\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 .date-field-group {\n flex-direction: column;\n }\n \n .filter-controls {\n flex-direction: column;\n }\n \n .actions-container {\n width: 100%;\n flex-wrap: wrap;\n justify-content: space-between;\n margin-top: 0.5rem;\n }\n \n .tweet {\n padding: 0.75rem;\n }\n }\n`;","deleted",false,"label",[19,36],"3147cdce-2c86-11f0-b40f-569c3dd06744",8,["D",1746761531236],1,"directory",[19],{"_34":82,"_13":83,"_37":84,"_39":-5,"_41":42,"_43":85,"_45":46,"_47":86,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_68":87,"_18":88},{"_34":75,"_13":76,"_37":77,"_39":-5,"_41":42,"_43":78,"_45":46,"_47":79,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_68":80,"_18":81},{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":67,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_68":69,"_18":70},["D",1746761531236],"children",[71],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":72,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_68":73,"_18":74},["D",1747097185500],[],[19,36],"5676d5a4-2c86-11f0-a532-569c3dd06744","COMMON","5160dd8a-2c86-11f0-905a-569c3dd06744",15,["D",1746761593626],[],[76],"3f671040-2c86-11f0-941c-569c3dd06744","API","3a2e0048-2c86-11f0-8b4d-569c3dd06744",11,["D",1746761554932],[],[83],"e014a5fc-2c81-11f0-810e-569c3dd06744",["D",1746759677031],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","fc0bd9ca-263d-48ce-84f0-30b4a2ea6082","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",27,"likeCount",0,"orgId","fc71265b-929d-440a-aa31-727271a3da69","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_144":140},"org",{"_11":12,"_138":-5,"_139":140,"_98":99,"_141":142,"_143":55},"branch",{"_17":129,"_13":16,"_34":42,"_130":89,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"isOwned",64,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVRJUVhlbWlxQ1ZNUnJVcWpHQ1dWNGEwcU0ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":89,"_13":14,"_47":188,"_91":-5,"_92":55,"_93":94,"_95":94,"_96":-5,"_97":-5,"_98":99,"_100":38,"_101":46,"_102":46,"_103":104,"_105":106,"_107":108,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":114,"_115":114,"_116":117,"_118":117,"_119":117,"_120":114,"_121":114,"_122":189,"_124":190,"_126":191,"_128":55},[176,177,178],"files",[176,177,178,179],"counts",{"_167":106,"_168":61,"_169":106,"_32":170,"_171":172},[165],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":164},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":166},[19,36],"pulls","branches","forks",{"_173":106,"_175":106},"connections",{"_173":106,"_174":106},"count","unfilledCount","emptyCount",{"_34":82,"_13":83,"_37":84,"_39":-5,"_41":42,"_43":85,"_45":46,"_47":86,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_68":186,"_18":187},{"_34":75,"_13":76,"_37":77,"_39":-5,"_41":42,"_43":78,"_45":46,"_47":79,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_68":184,"_18":185},{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":67,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_68":182,"_18":183},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":72,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_68":180,"_18":181},[],[19,36],[179],[19],[],[76],[],[83],["D",1746759677031],{"_11":12,"_144":140},{"_11":12,"_138":-5,"_139":140,"_98":99,"_141":142,"_143":55},{"_17":129,"_13":16,"_34":42,"_130":89,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"ctx",{"_122":-5,"_161":225,"_226":227,"_228":229,"_230":55,"_231":55,"_232":55,"_233":46,"_234":-5,"_235":-7,"_236":-7,"_237":106,"_238":55,"_239":55,"_240":-5,"_241":55,"_242":55,"_243":55,"_244":-5},"ENV",{"_196":197,"_198":199,"_200":16,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]