/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; /* ------------------------------ CSS Styles ------------------------------ */ const css = ` :root { /* Colors */ --bg-color: #121212; --text-color: #e0e0e0; --overlay-bg: #1e1e1e; --button-bg: #333; --button-border: #555; --accent-color: #003366; --danger-color: #b30000; /* Sizing + spacing */ --icon-radius: 10px; --button-radius: 5px; --button-padding: 0.3rem; --grid-gap: 1rem; --header-padding: 0.5rem; --nav-button-margin: 0.2rem; --category-button-padding: 0.3rem 0.5rem; } /* Minimal reset and dark background */ body { margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); font-family: sans-serif; } /* Header: compact, place h1 + actions in one row */ header { display: flex; align-items: center; justify-content: space-between; padding: var(--header-padding) 1rem; } header h1 { margin: 0; font-size: 1.2rem; } /* The row of icon buttons in the header, top-right */ .actions-row { display: flex; align-items: center; gap: 0.5rem; } /* Overall container for the rest */ .app-gallery { max-width: 1000px; margin: 0 auto; padding: 0 1rem 1rem; position: relative; } /* Category nav - minimal style, more compact, rounded corners */ .category-nav { display: flex; justify-content: center; list-style-type: none; padding: 0; margin: 0 0 0.5rem 0; flex-wrap: wrap; } .category-nav li { margin: var(--nav-button-margin); } .category-nav button { background: var(--button-bg); border: 1px solid var(--button-border); color: var(--text-color); padding: var(--category-button-padding); cursor: pointer; font-size: 0.8rem; border-radius: var(--button-radius); } .category-nav button.active { text-decoration: underline; font-weight: bold; } /* Grid of apps */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--grid-gap); } /* Each app "card" */ .app-card { display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; background: none; border: none; padding: 0.5rem 0; } /* Icons with rounded corners */ .app-icon { width: 60px; height: 60px; object-fit: cover; /* or "contain" if you want no cropping */ margin-bottom: 0.25rem; border-radius: var(--icon-radius); } /* Title under the icon */ .app-card h3 { margin: 0; font-size: 0.8rem; } /* Overlay for editing/adding/apps or settings */ .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; } /* Edit/add form or settings form */ .overlay-content { background-color: var(--overlay-bg); padding: 1rem; border-radius: var(--button-radius); color: var(--text-color); width: 400px; max-width: 90%; } .form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; align-items: center; } .overlay-content input[type="text"], .overlay-content select { width: 100%; padding: 0.25rem; background-color: var(--button-bg); color: var(--text-color); border: 1px solid var(--button-border); } /* Shared button group styling */ .button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; } /* Text-based buttons (e.g. "Save", "Cancel", "Search") */ button, [type="button"], [type="submit"], [type="reset"] { padding: var(--button-padding) 0.7rem; background-color: var(--button-bg); color: var(--text-color); border: 1px solid var(--button-border); cursor: pointer; border-radius: var(--button-radius); } /* Icon-only buttons (dark blue) */ .icon-button { border: none; background-color: var(--accent-color); color: #fff; width: 40px; height: 40px; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--button-radius); padding: 0; } /* Red "danger" delete button (icon-only) */ .delete-button { background-color: var(--danger-color) !important; } /* For grouped layout: category heading */ .group-heading { font-weight: bold; margin-top: 1rem; margin-bottom: 0.5rem; } `; /** * Generates the main HTML shell, injecting the CSS and the client script. */ function generateHTML(importMetaUrl: string) { return ` iOS App Gallery

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

{ if (e.key === "Enter") handleClick(); }} tabIndex={0} role="button" />

{app.name}

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

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

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

{/* [ADDED] The new button to fetch the correct icon + link */} {app?.id && ( )}

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

Settings

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

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

iOS App Gallery

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

{/* Export */} {/* Import */} {/* Add App */} {/* Settings */}

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

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

{cat}

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

); })}

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

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

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

); } /** * Client entry-point to render the React App. */ function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); }

ios_test