\n \n \n \n\n`;\n}\n\n/**\n * Server function that handles HTTP routes, DB setup, and returns HTML.\n */\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"rm_ios_test\";\n\n // [ADDED] Ensure the table includes a `link` column.\n // If you already have an existing table, you may need an ALTER TABLE here.\n // For a fresh DB, this will create the needed column right away:\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_apps (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n category TEXT NOT NULL,\n iconUrl TEXT NOT NULL,\n link TEXT\n )\n `);\n\n // GET /api/apps => return all apps\n if (request.method === \"GET\" && request.url.endsWith(\"/api/apps\")) {\n const result = await sqlite.execute(`SELECT * FROM ${KEY}_apps`);\n return new Response(JSON.stringify({ apps: result.rows }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n // POST /api/apps => create new app\n else if (request.method === \"POST\" && request.url.endsWith(\"/api/apps\")) {\n const app = await request.json();\n const id = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO ${KEY}_apps (id, name, category, iconUrl, link) VALUES (?, ?, ?, ?, ?)`,\n [id, app.name, app.category, app.iconUrl, app.link || \"\"],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n // PUT /api/apps => update existing app\n else if (request.method === \"PUT\" && request.url.endsWith(\"/api/apps\")) {\n const app = await request.json();\n await sqlite.execute(\n `UPDATE ${KEY}_apps SET name = ?, category = ?, iconUrl = ?, link = ? WHERE id = ?`,\n [app.name, app.category, app.iconUrl, app.link || \"\", app.id],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n // DELETE /api/apps/:id => delete an app\n else if (request.method === \"DELETE\" && /\\/api\\/apps\\/[^/]+$/.test(request.url)) {\n const segments = request.url.split(\"/\");\n const id = segments[segments.length - 1];\n await sqlite.execute(`DELETE FROM ${KEY}_apps WHERE id = ?`, [id]);\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n // POST /api/apps/import => bulk import (skip duplicates by name)\n else if (request.method === \"POST\" && request.url.endsWith(\"/api/apps/import\")) {\n const { apps } = await request.json();\n const existing = await sqlite.execute(`SELECT name FROM ${KEY}_apps`);\n const existingNames = new Set(existing.rows.map((r) => r.name));\n\n for (const imported of apps) {\n if (existingNames.has(imported.name)) continue;\n const id = crypto.randomUUID();\n // [ADDED] Insert the link as well, if present\n await sqlite.execute(\n `INSERT INTO ${KEY}_apps (id, name, category, iconUrl, link) VALUES (?, ?, ?, ?, ?)`,\n [\n id,\n imported.name,\n imported.category,\n imported.iconUrl,\n imported.link ?? \"\",\n ],\n );\n existingNames.add(imported.name);\n }\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Otherwise, serve the HTML\n return new Response(generateHTML(import.meta.url), {\n headers: { \"content-type\": \"text/html\" },\n });\n}\n\n/* --------------------- React Types & Components --------------------- */\n\n// [ADDED] Add `link` to the App interface\ninterface App {\n id: string;\n name: string;\n category: string;\n iconUrl: string;\n link: string; // new\n}\n\n/**\n * React component that shows an individual app icon & title.\n */\nfunction AppCard({ app, onEdit }: { app: App; onEdit: (app: App) => void }) {\n // Click or \"Enter\" => open via iOS Shortcut\n const handleClick = () => {\n window.location.href = `shortcuts://run-shortcut?name=open_iOS_Apps&input=${encodeURIComponent(app.name)}`;\n };\n\n // Right-click => open edit overlay\n const handleRightClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onEdit(app);\n };\n\n return (\n \n {\n if (e.key === \"Enter\") handleClick();\n }}\n tabIndex={0}\n role=\"button\"\n />\n

{app.name}

\n \n );\n}\n\n/**\n * Overlay to add or edit an app.\n */\nfunction AppOverlay({\n app,\n onSave,\n onClose,\n onDelete,\n}: {\n app: App | null;\n onSave: (updatedApp: App) => void;\n onClose: () => void;\n onDelete: (id: string) => void;\n}) {\n const [editedApp, setEditedApp] = useState(\n app || { id: \"\", name: \"\", category: \"\", iconUrl: \"\", link: \"\" },\n );\n const overlayRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (overlayRef.current && !overlayRef.current.contains(event.target as Node)) {\n onClose();\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [onClose]);\n\n const handleSave = () => {\n onSave(editedApp);\n onClose();\n };\n\n // Optional utility: open a DuckDuckGo search for the app\n const handleSearch = () => {\n window.open(\n `https://duckduckgo.com/?q=${encodeURIComponent(editedApp.name + \" app store\")}`,\n \"_blank\",\n );\n };\n\n // [ADDED] Fetch the correct 434x0w.webp icon & store link via iTunes Search\n const handleFetchIcon = async () => {\n if (!editedApp.name) {\n alert(\"Please enter a name first.\");\n return;\n }\n try {\n const res = await fetch(\n `https://itunes.apple.com/search?term=${encodeURIComponent(editedApp.name)}&entity=software`,\n );\n const data = await res.json();\n if (data.resultCount === 0) {\n alert(\"No matching app found in iTunes Search.\");\n return;\n }\n const first = data.results[0];\n let newIcon = first.artworkUrl100;\n // Attempt to replace \"100x100bb\" or \"512x512bb\" with \"434x0w.webp\"\n newIcon = newIcon.replace(/(\\d+x\\d+bb)\\.?[a-z]*/i, \"434x0w.webp\");\n\n setEditedApp({\n ...editedApp,\n iconUrl: newIcon,\n link: first.trackViewUrl || \"\", // store the link to the App Store\n });\n } catch (error) {\n console.error(error);\n alert(\"Error fetching from iTunes. See console for details.\");\n }\n };\n\n return (\n

{app ? \"Edit App\" : \"Add App\"}

\n Name:\n setEditedApp({ ...editedApp, name: e.target.value })}\n />\n\n Category:\n setEditedApp({ ...editedApp, category: e.target.value })}\n />\n\n Icon URL:\n setEditedApp({ ...editedApp, iconUrl: e.target.value })}\n />\n\n {/* [ADDED] New Link field */}\n App Store Link:\n setEditedApp({ ...editedApp, link: e.target.value })}\n />\n

\n\n

\n \n \n \n {/* [ADDED] The new button to fetch the correct icon + link */}\n \n\n {app?.id && (\n onDelete(app.id)}\n title=\"Delete App\"\n >\n \n \n )}\n

\n );\n}\n\n/**\n * Overlay for changing settings (e.g., grouping by category).\n */\nfunction SettingsOverlay({\n groupByCategory,\n onChangeGroupByCategory,\n onClose,\n}: {\n groupByCategory: boolean;\n onChangeGroupByCategory: (value: boolean) => void;\n onClose: () => void;\n}) {\n const overlayRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (overlayRef.current && !overlayRef.current.contains(event.target as Node)) {\n onClose();\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [onClose]);\n\n return (\n

Settings

\n \n onChangeGroupByCategory(e.target.checked)}\n />{\" \"}\n Group apps by category\n \n

\n \n

\n );\n}\n\n/**\n * Main React component that displays the header, categories, apps, & state.\n */\nfunction App() {\n const [selectedCategory, setSelectedCategory] = useState(\"All\");\n const [apps, setApps] = useState([]);\n const [categories, setCategories] = useState([\"All\"]);\n const [editingApp, setEditingApp] = useState(null);\n const [isAddingApp, setIsAddingApp] = useState(false);\n const [showSettings, setShowSettings] = useState(false);\n // Start grouped by default\n const [groupByCategory, setGroupByCategory] = useState(true);\n\n // Load apps from server on mount\n useEffect(() => {\n loadApps();\n }, []);\n\n // Get all apps, build categories\n const loadApps = async () => {\n const response = await fetch(\"/api/apps\");\n const data = await response.json();\n setApps(data.apps);\n\n const distinctCats = Array.from(new Set(data.apps.map((a: App) => a.category)));\n setCategories([\"All\", ...distinctCats]);\n };\n\n // For the ungrouped case:\n const filteredApps = apps.filter(\n (app) => selectedCategory === \"All\" || app.category === selectedCategory,\n );\n\n // For the grouped case, we gather apps by category\n const grouped = apps.reduce((acc: Record, app) => {\n if (!acc[app.category]) acc[app.category] = [];\n acc[app.category].push(app);\n return acc;\n }, {});\n\n // Editing existing\n const handleEdit = (app: App) => {\n setEditingApp(app);\n };\n\n // Save new or updated\n const handleSave = async (updatedApp: App) => {\n const method = updatedApp.id ? \"PUT\" : \"POST\";\n await fetch(\"/api/apps\", {\n method,\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(updatedApp),\n });\n await loadApps();\n };\n\n // Delete\n const handleDelete = async (id: string) => {\n if (!window.confirm(\"Are you sure you want to delete this app?\")) return;\n const resp = await fetch(`/api/apps/${id}`, { method: \"DELETE\" });\n if (resp.ok) {\n await loadApps();\n setEditingApp(null);\n setIsAddingApp(false);\n } else {\n alert(\"Failed to delete app.\");\n }\n };\n\n // Add new\n const handleAddApp = () => {\n setIsAddingApp(true);\n };\n\n // Export\n const handleExportApps = async () => {\n const response = await fetch(\"/api/apps\");\n const data = await response.json();\n const jsonStr = JSON.stringify(data.apps, null, 2);\n\n const blob = new Blob([jsonStr], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = \"apps_export.json\";\n link.click();\n URL.revokeObjectURL(url);\n };\n\n // Import\n const handleImportApps = async (e: React.ChangeEvent) => {\n if (!e.target.files || e.target.files.length === 0) return;\n const file = e.target.files[0];\n try {\n const text = await file.text();\n const importedApps = JSON.parse(text);\n await fetch(\"/api/apps/import\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ apps: importedApps }),\n });\n await loadApps();\n alert(\"Apps imported successfully!\");\n } catch (error) {\n console.error(error);\n alert(\"Invalid JSON file.\");\n } finally {\n e.target.value = \"\";\n }\n };\n\n return (\n <>\n

iOS App Gallery

\n {/* Icon buttons on the top right */}\n

\n {/* Export */}\n \n {/* Import */}\n \n \n \n \n {/* Add App */}\n \n {/* Settings */}\n setShowSettings(true)}\n className=\"icon-button\"\n title=\"Settings\"\n >\n \n \n

\n\n

\n {/* Category nav ALWAYS visible, whether grouped or not */}\n \n\n {\n /* If grouping => show categories as separate sections.\n But still respect selectedCategory if it's not \"All\". */\n }\n {groupByCategory\n ? (\n

\n {Object.keys(grouped).map((cat) => {\n // If user selected a specific category, skip others\n if (selectedCategory !== \"All\" && cat !== selectedCategory) {\n return null;\n }\n return (\n

{cat}

\n {grouped[cat].map((app) => )}\n

\n );\n })}\n

\n )\n : (\n // If NOT grouping => single grid filtered by category\n

\n {filteredApps.map((app) => )}\n

\n )}\n\n {/* Overlays */}\n {(editingApp || isAddingApp) && (\n {\n setEditingApp(null);\n setIsAddingApp(false);\n }}\n onDelete={handleDelete}\n />\n )}\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n

\n \n );\n}\n\n/**\n * Client entry-point to render the React App.\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}","deleted","label",[99],"permalink","https://www.val.town/x/arfan/rm_ios_test/code/main.tsx","extension","actionData","errors"]