\n Title\n setEditTitle(e.target.value)}\n placeholder=\"Title\"\n required\n aria-label=\"Edit Title\"\n />\n

\n Audio URL\n setEditUrl(e.target.value)}\n placeholder=\"Audio URL\"\n required\n aria-label=\"Edit Audio URL\"\n />\n

\n Tag (Optional)\n setEditTag(e.target.value)}\n placeholder=\"Tag (optional)\"\n aria-label=\"Edit Tag\"\n />\n

\n \n \n

\n );\n }\n\n return (\n // Add onMouseLeave to cancel delete confirmation if mouse leaves the card\n

{song.title}

\n {song.tag && {song.tag}}\n

\n {!READ_ONLY && (\n

\n setIsEditing(true)}\n className=\"action-btn edit-btn\"\n aria-label={`Edit ${song.title}`}\n title=\"Edit\"\n disabled={isConfirmingDelete || isDeleting} // Disable if delete is pending\n >\n edit\n \n \n {isDeleting\n ? sync // Show spinner when deleting\n : {isConfirmingDelete ? \"check_circle\" : \"delete_forever\"}}\n \n

\n )}\n

\n \n Added:{\" \"}\n {new Date(song.created_at).toLocaleDateString(\"en-US\", { year: \"numeric\", month: \"long\", day: \"numeric\" })}\n \n {/* Optionally add more metadata here if available */}\n

\n );\n}\n\nfunction App() {\n const [songs, setSongs] = React.useState([]);\n const [sortBy, setSortBy] = React.useState<\"date\" | \"title\">(\"date\"); // Default sort should match initial fetch if possible\n const [selectedTag, setSelectedTag] = React.useState(\"\");\n const [isLoading, setIsLoading] = React.useState(true);\n const [error, setError] = React.useState(\"\");\n const [viewMode, setViewMode] = React.useState<\"grid\" | \"list\">(\"grid\"); // State for view mode\n\n // Using useCallback to stabilize the function reference\n const fetchSongs = React.useCallback(async () => {\n setError(\"\"); // Clear previous errors before fetching\n // Keep isLoading true if it was already true (initial load)\n // Don't set it to true on subsequent fetches unless desired (e.g., manual refresh button)\n try {\n const response = await fetch(\"/api/songs\");\n if (!response.ok) {\n const errorText = await response.text(); // Try to get error text\n throw new Error(`Failed to fetch songs: ${response.status} ${errorText || response.statusText}`);\n }\n const data = await response.json();\n // Basic data validation\n if (!Array.isArray(data)) {\n console.error(\"Invalid data received:\", data);\n throw new Error(\"Invalid data format received from server.\");\n }\n setSongs(data as Song[]);\n } catch (err) {\n console.error(\"Fetch error:\", err);\n setError(`Failed to load songs. ${err.message || \"Please try again later.\"}`);\n // Consider clearing songs or leaving stale data based on desired UX\n // setSongs([]); // Optional: Clear songs on error\n } finally {\n setIsLoading(false); // Always set loading to false after fetch attempt\n }\n }, []); // Empty dependency array: function created once\n\n React.useEffect(() => {\n setIsLoading(true); // Set loading true when the component mounts\n fetchSongs();\n }, [fetchSongs]); // Run effect when fetchSongs changes (which is only on mount)\n\n const handleAdd = async (songData: Omit) => {\n setError(\"\"); // Clear previous errors\n // Construct the payload exactly as the original server POST expects:\n const payload = {\n title: songData.title,\n url: songData.url,\n position: songData.position, // Should be 0 based on original form submit\n tag: songData.tag || null, // Send null if tag is empty, similar to original potential behavior\n };\n try {\n const response = await fetch(\"/api/songs\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Failed to add song: ${response.status} ${errorText || response.statusText}`);\n }\n await fetchSongs(); // Refetch to update the list\n } catch (err) {\n console.error(\"Add error:\", err);\n setError(`Failed to add song. ${err.message || \"Please try again.\"}`);\n }\n };\n\n const handleEdit = async (song: Song) => {\n setError(\"\");\n // Construct the payload exactly as the original server PUT expects:\n // It needs title, url, position, tag, and the ID is in the URL.\n const payload = {\n title: song.title,\n url: song.url,\n position: song.position, // Send the existing position\n tag: song.tag || null, // Send null if tag is empty/undefined\n };\n const originalSongs = [...songs]; // Keep a copy to revert on error\n const songIndex = songs.findIndex(s => s.id === song.id);\n\n // Optimistic UI Update\n if (songIndex !== -1) {\n const updatedSongs = [...songs];\n updatedSongs[songIndex] = song;\n setSongs(updatedSongs);\n }\n\n try {\n const response = await fetch(`/api/songs/${song.id}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n // Send only the fields the original server expected in the body\n body: JSON.stringify(payload),\n });\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Failed to update song: ${response.status} ${errorText || response.statusText}`);\n }\n // Optional: Refetch if server might modify data (e.g., updated_at, though not used here)\n // await fetchSongs();\n // If optimistic update is enough, no fetch needed here.\n } catch (err) {\n console.error(\"Edit error:\", err);\n setError(`Failed to update song. ${err.message || \"Please try again.\"}`);\n setSongs(originalSongs); // Revert optimistic update on error\n }\n };\n\n const handleDelete = async (id: string) => {\n setError(\"\");\n const originalSongs = [...songs]; // For reverting on error\n\n // Optimistic UI update\n setSongs(prevSongs => prevSongs.filter(s => s.id !== id));\n\n try {\n const response = await fetch(`/api/songs/${id}`, {\n method: \"DELETE\",\n });\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Failed to delete song: ${response.status} ${errorText || response.statusText}`);\n }\n // No fetch needed after successful delete with optimistic update\n } catch (err) {\n console.error(\"Delete error:\", err);\n setError(`Failed to delete song. ${err.message || \"Please try again.\"}`);\n setSongs(originalSongs); // Revert optimistic update\n }\n };\n\n // Memoize tags derivation\n const tags = React.useMemo(() => {\n const tagSet = new Set();\n songs.forEach(s => {\n if (s.tag && s.tag.trim()) { // Ensure tag exists and is not just whitespace\n tagSet.add(s.tag.trim());\n }\n });\n return Array.from(tagSet).sort(); // Sort tags alphabetically\n }, [songs]);\n\n // Memoize filtered and sorted songs\n const filteredAndSortedSongs = React.useMemo(() => {\n let filtered = songs;\n\n // Filter by tag\n if (selectedTag) {\n filtered = songs.filter((s) => s.tag === selectedTag);\n }\n\n // Sort (Client-side sorting is kept)\n // Note: The initial fetch order from the original server was `position, created_at DESC`.\n // Client-side sort overrides this. If you want initial load to match server,\n // set default `sortBy` state based on that, or remove client sort initially.\n // Current default is 'date' (created_at DESC client-side).\n return [...filtered].sort((a, b) => {\n if (sortBy === \"date\") {\n // Sort descending by date (newest first)\n return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();\n } else { // sortBy === \"title\"\n // Sort ascending by title (case-insensitive)\n return a.title.localeCompare(b.title, undefined, { sensitivity: \"base\" });\n }\n });\n }, [songs, sortBy, selectedTag]);\n\n const handleTagSelection = (tag: string) => {\n setSelectedTag(prevTag => (prevTag === tag ? \"\" : tag)); // Toggle selection\n };\n\n if (isLoading && songs.length === 0) { // Show loader only on initial load\n return (\n

\n sync\n

Loading Tracks...

\n );\n }\n\n return (\n // Add the viewMode class to the container\n

Audio Archive

Your Personal Sound Collection {READ_ONLY && \"(Read Only Mode)\"}

\n\n {!READ_ONLY && (\n

\n {/* Open form if no songs */}\n

\n add_circle_outline Add New Track\n

\n \n

\n )}\n\n {/* Filter and Sort Controls Section */}\n

Filtering and Sorting Controls

{\" \"}\n {/* Heading for accessibility */}\n

\n {/* Sorting Controls */}\n

\n Sort by:\n

\n setSortBy(\"date\")}\n aria-pressed={sortBy === \"date\"}\n >\n calendar_today Date Added\n \n setSortBy(\"title\")}\n aria-pressed={sortBy === \"title\"}\n >\n title Title\n \n

\n\n {/* Tag Filtering Controls */}\n {tags.length > 0 && (\n

\n Filter by Tag:\n

\n handleTagSelection(\"\")}\n aria-pressed={selectedTag === \"\"}\n >\n All Tags\n \n {tags.map(tag => (\n handleTagSelection(tag)}\n aria-pressed={selectedTag === tag}\n >\n {tag}\n \n ))}\n

\n )}\n\n {/* View Mode Switch */}\n

\n View:\n

\n setViewMode(\"grid\")}\n aria-pressed={viewMode === \"grid\"}\n title=\"Grid View\"\n >\n grid_view\n \n setViewMode(\"list\")}\n aria-pressed={viewMode === \"list\"}\n title=\"List View\"\n >\n view_list\n \n

\n\n {error &&

{error}

}\n\n {/* Songs Display Area */}\n

\n {isLoading && songs.length > 0 && ( // Show subtle loading indicator when refetching\n

\n sync Refreshing...\n

\n )}\n {/* Add a conditional message for no results */}\n {!isLoading && filteredAndSortedSongs.length === 0 && (\n

\n music_off\n

{selectedTag ? `No tracks found with the tag \"${selectedTag}\".` : \"No tracks added yet.\"}

\n {selectedTag && (\n \n )}\n

\n )}\n

\n {filteredAndSortedSongs.map(song => (\n \n ))}\n

\n \n

\n );\n}\n\n// --- Client-side rendering logic (remains unchanged from previous) ---\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// --- Server-side logic ---\n// --- REVERTED to match the database interactions of your ORIGINAL code ---\nexport default async function server(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n // EXACT KEY from your original code\n const KEY = \"jamz\";\n\n // EXACT TABLE SCHEMA from your original code\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_songs_${SCHEMA_VERSION} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n url TEXT NOT NULL,\n position INTEGER NOT NULL DEFAULT 0,\n tag TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(req.url);\n\n // API endpoints - Using ORIGINAL queries and parameter style\n try { // Keep basic try/catch for general errors\n if (url.pathname === \"/api/songs\") {\n if (req.method === \"GET\") {\n const result = await sqlite.execute(\n // EXACT SELECT query from your original code\n `SELECT * FROM ${KEY}_songs_${SCHEMA_VERSION} ORDER BY position, created_at DESC`,\n );\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n status: 200, // Explicitly set status\n });\n }\n\n if (req.method === \"POST\") {\n // NOTE: Original code did NOT check READ_ONLY here. Adding it is safer,\n // but removing if strict adherence to original is required. Assuming safer is ok.\n if (READ_ONLY) return new Response(JSON.stringify({ error: \"App is in read-only mode\" }), { status: 403 });\n\n const song = await req.json();\n const id = nanoid();\n // EXACT INSERT query and parameter style from your original code\n await sqlite.execute(\n `INSERT INTO ${KEY}_songs_${SCHEMA_VERSION} (id, title, url, position, tag) VALUES (?, ?, ?, ?, ?)`,\n [id, song.title, song.url, song.position, song.tag], // Uses array directly\n );\n // Original response\n return new Response(null, { status: 201 });\n }\n // Added Method Not Allowed for clarity, original might have just failed later\n return new Response(JSON.stringify({ error: \"Method Not Allowed\" }), { status: 405 });\n }\n\n if (url.pathname.startsWith(\"/api/songs/\")) {\n const id = url.pathname.split(\"/\").pop();\n if (!id) return new Response(JSON.stringify({ error: \"Missing song ID\" }), { status: 400 }); // Basic check\n\n if (req.method === \"PUT\") {\n // NOTE: Original code did NOT check READ_ONLY here.\n if (READ_ONLY) return new Response(JSON.stringify({ error: \"App is in read-only mode\" }), { status: 403 });\n\n const song = await req.json();\n // EXACT UPDATE query and parameter style from your original code\n await sqlite.execute(\n `UPDATE ${KEY}_songs_${SCHEMA_VERSION} SET title = ?, url = ?, position = ?, tag = ? WHERE id = ?`,\n [song.title, song.url, song.position, song.tag, id], // Uses array directly\n );\n // Original response\n return new Response(null, { status: 200 });\n }\n\n if (req.method === \"DELETE\") {\n // NOTE: Original code did NOT check READ_ONLY here.\n if (READ_ONLY) return new Response(JSON.stringify({ error: \"App is in read-only mode\" }), { status: 403 });\n\n // EXACT DELETE query and parameter style from your original code\n await sqlite.execute(`DELETE FROM ${KEY}_songs_${SCHEMA_VERSION} WHERE id = ?`, [id]); // Uses array directly\n // Original response\n return new Response(null, { status: 200 });\n }\n\n // Added Method Not Allowed for clarity\n return new Response(JSON.stringify({ error: \"Method Not Allowed\" }), { status: 405 });\n }\n } catch (error) {\n // Basic error handler, similar to implicit original behavior\n console.error(\"API Error:\", error);\n return new Response(JSON.stringify({ error: \"An internal server error occurred.\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // HTML response (SSR Shell) - Kept from enhanced version\n // Renders the page structure, CSS, and JS includes. React hydrates on the client.\n return new Response(\n `\n \n \n \n \n Audio Archive\n \n \n \n \n \n \n {/* Using the enhanced CSS */}\n \n \n

JavaScript Required

This application requires JavaScript to function. Please enable it in your browser settings.

\n \n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n },\n },\n );\n}\n\n// --- Enhanced Newspaper CSS (remains unchanged from previous step) ---\nconst enhancedNewspaperCSS = `\n@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap');\n\n:root {\n /* Color Palette */\n --paper-bg: #f8f6f2; /* Slightly warmer off-white */\n --ink-main: #2a2a2a; /* Dark grey, not pure black */\n --ink-secondary: #585858;\n --ink-light: #888;\n --accent-color: #b34444; /* Muted red for accents/errors */\n --accent-light: #fde8e8;\n --border-color: #dcdcdc;\n --highlight-bg: #e8e4d9;\n --button-bg: #eaeaea;\n --button-hover-bg: #dcdcdc;\n --button-active-bg: var(--accent-color);\n --button-active-text: var(--paper-bg);\n --card-bg: #ffffff;\n --shadow-color: rgba(0, 0, 0, 0.08);\n\n /* Typography */\n --font-serif: 'Merriweather', serif;\n --font-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;\n\n /* Spacing */\n --space-xs: 0.25rem;\n --space-sm: 0.5rem;\n --space-md: 1rem;\n --space-lg: 1.5rem;\n --space-xl: 2rem;\n\n /* Borders */\n --border-width: 1px;\n --border-style: solid;\n --border: var(--border-width) var(--border-style) var(--border-color);\n --radius-sm: 3px; /* Less rounded corners */\n --radius-md: 5px;\n}\n\n/* Global Resets & Base Styles */\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 16px; /* Base font size */\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-sans);\n background-color: var(--paper-bg);\n color: var(--ink-main);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Accessibility */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* App Container */\n.app-container {\n max-width: 1400px; /* Wider max-width for columns */\n margin: 0 auto;\n padding: var(--space-lg) var(--space-md);\n}\n\n/* Masthead/Header */\n.masthead {\n text-align: center;\n margin-bottom: var(--space-xl);\n padding-bottom: var(--space-lg);\n border-bottom: 2px solid var(--ink-main); /* Prominent bottom border */\n}\n\n.masthead h1 {\n font-family: var(--font-serif);\n font-size: 3rem;\n font-weight: 700;\n margin-bottom: var(--space-xs);\n color: var(--ink-main);\n}\n\n.masthead .subtitle {\n font-size: 1.1rem;\n color: var(--ink-secondary);\n font-family: var(--font-sans);\n}\n\n/* Add Song Section */\n.add-song-section {\n margin-bottom: var(--space-xl);\n border: var(--border);\n border-radius: var(--radius-sm);\n background-color: var(--highlight-bg);\n}\n\n.add-song-toggle {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n padding: var(--space-md);\n font-weight: 600;\n cursor: pointer;\n list-style: none; /* Remove default marker */\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n font-size: 1.1rem;\n color: var(--ink-secondary);\n}\n.add-song-toggle::marker { /* Hide marker specifically for summary */\n content: \"\";\n}\n.add-song-toggle::-webkit-details-marker { /* Hide marker for Webkit */\n display: none;\n}\n.add-song-toggle .material-icons {\n color: var(--ink-secondary);\n transition: transform 0.2s ease-in-out;\n}\n.add-song-section[open] > .add-song-toggle .material-icons {\n transform: rotate(45deg);\n}\n\n.add-song-form {\n padding: var(--space-lg);\n padding-top: var(--space-sm); /* Less padding top as toggle is there */\n background: var(--paper-bg); /* Different bg inside details */\n border-top: var(--border);\n display: flex;\n flex-wrap: wrap; /* Allow wrapping on smaller screens */\n gap: var(--space-md);\n align-items: flex-end; /* Align items to bottom */\n}\n\n.form-group {\n flex: 1 1 200px; /* Allow flexible growth and basis */\n min-width: 180px; /* Ensure minimum width */\n}\n\n.form-group label {\n display: block;\n margin-bottom: var(--space-xs);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--ink-secondary);\n}\n\ninput[type=\"text\"],\ninput[type=\"url\"] {\n width: 100%;\n padding: 0.65rem 0.75rem; /* Slightly adjusted padding */\n border: var(--border);\n border-radius: var(--radius-sm);\n font-size: 1rem;\n font-family: var(--font-sans);\n background-color: var(--card-bg); /* White background */\n transition: border-color 0.2s, box-shadow 0.2s;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"url\"]:focus {\n outline: none;\n border-color: var(--accent-color);\n box-shadow: 0 0 0 2px var(--accent-light);\n}\n\n.form-actions {\n margin-left: auto; /* Push button to the right in flex wrap */\n padding-bottom: 0; /* Align with input bottom */\n}\n\n/* Controls Section */\n.controls-section {\n margin-bottom: var(--space-xl);\n padding: var(--space-md) 0;\n border-top: var(--border);\n border-bottom: var(--border);\n}\n.controls-bar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-lg);\n align-items: center;\n}\n.control-group {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n flex-wrap: wrap; /* Allow wrapping within groups */\n}\n.control-label {\n font-weight: 600;\n color: var(--ink-secondary);\n font-size: 0.9rem;\n white-space: nowrap; /* Prevent label wrapping */\n}\n\n.button-group {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-sm);\n}\n\n/* Shared Button Styles */\nbutton, .control-button {\n display: inline-flex; /* Use inline-flex for icon alignment */\n align-items: center;\n gap: var(--space-xs);\n padding: 0.5rem 1rem;\n border: var(--border);\n border-radius: var(--radius-sm);\n background-color: var(--button-bg);\n color: var(--ink-secondary);\n font-family: var(--font-sans);\n font-size: 0.9rem;\n font-weight: 600;\n cursor: pointer;\n text-align: center;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;\n -webkit-appearance: none; /* Fix iOS button styling */\n appearance: none;\n}\nbutton .material-icons, .control-button .material-icons {\n font-size: 1.1em; /* Make icon slightly larger than text */\n}\n\nbutton:hover, .control-button:hover {\n background-color: var(--button-hover-bg);\n border-color: var(--ink-light);\n color: var(--ink-main);\n}\nbutton:focus-visible, .control-button:focus-visible {\n outline: 2px solid var(--accent-color);\n outline-offset: 2px;\n}\nbutton:disabled, .control-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background-color: var(--button-bg);\n /* Prevent hover styles on disabled */\n border-color: var(--border-color);\n color: var(--ink-secondary);\n}\n\n/* Specific Button States */\n.control-button.active {\n background-color: var(--accent-color);\n color: var(--button-active-text);\n border-color: var(--accent-color);\n}\n.control-button.active:hover {\n background-color: var(--accent-color); /* Keep active color on hover */\n filter: brightness(1.1);\n}\n\n.tag-pills .control-button {\n padding: 0.3rem 0.8rem;\n font-size: 0.85rem;\n}\n\n/* Add Song Form Button */\n.add-song-form button[type=\"submit\"] {\n background-color: var(--accent-color);\n color: var(--button-active-text);\n border-color: var(--accent-color);\n padding: 0.65rem 1.2rem; /* Match input height */\n}\n.add-song-form button[type=\"submit\"]:hover:not(:disabled) { /* Only apply hover if not disabled */\n filter: brightness(1.1);\n background-color: var(--accent-color); /* Maintain bg color */\n border-color: var(--accent-color);\n}\n\n/* Songs Area */\n.songs-area {\n position: relative; /* For inline loading indicator positioning */\n}\n.loading-inline {\n position: absolute;\n top: -15px; /* Adjust as needed, relative to songs-area */\n left: 50%;\n transform: translateX(-50%);\n background: var(--paper-bg);\n padding: var(--space-xs) var(--space-sm);\n border-radius: var(--radius-sm);\n border: var(--border);\n font-size: 0.9em;\n color: var(--ink-secondary);\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n z-index: 10;\n box-shadow: 0 1px 3px var(--shadow-color);\n}\n.loading-inline .material-icons {\n font-size: 1.2em;\n}\n\n/* Songs Container - Column Layout (Grid View Default) */\n.app-container.view-grid .songs-container {\n margin-top: var(--space-lg);\n /* Newspaper Column Layout */\n column-count: 3; /* Default number of columns */\n column-gap: var(--space-lg);\n column-fill: balance; /* Try to balance column heights */\n}\n/* Adjust column count for different screen sizes */\n@media (max-width: 1200px) {\n .app-container.view-grid .songs-container {\n column-count: 2;\n }\n}\n@media (max-width: 768px) {\n .app-container.view-grid .songs-container {\n column-count: 1;\n }\n}\n\n/* Song Card Styling */\n.song-card {\n background: var(--card-bg);\n border: var(--border);\n border-radius: var(--radius-sm);\n padding: var(--space-md);\n margin-bottom: var(--space-lg); /* Spacing between cards */\n box-shadow: 0 2px 5px var(--shadow-color);\n /* Prevent cards from breaking across columns */\n break-inside: avoid;\n page-break-inside: avoid; /* For printing */\n overflow: hidden; /* Contain elements */\n transition: box-shadow 0.2s ease-in-out;\n}\n.app-container.view-grid .song-card:hover { /* Hover only in grid */\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);\n}\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start; /* Align items to the top */\n gap: var(--space-md);\n margin-bottom: var(--space-sm);\n}\n\n.card-title h2 {\n font-family: var(--font-serif);\n font-size: 1.3rem;\n font-weight: 700;\n line-height: 1.3;\n color: var(--ink-main);\n margin-bottom: var(--space-xs);\n /* Allow breaking long titles */\n overflow-wrap: break-word;\n word-wrap: break-word; /* Older browsers */\n word-break: break-word; /* Force break if needed */\n}\n\n.card-actions {\n display: flex;\n gap: var(--space-sm);\n flex-shrink: 0; /* Prevent actions from shrinking */\n}\n\n/* Action Buttons (Edit/Delete) */\n.action-btn {\n padding: var(--space-xs);\n border: none;\n border-radius: var(--radius-sm);\n background: transparent;\n color: var(--ink-light);\n cursor: pointer;\n transition: background-color 0.2s, color 0.2s;\n display: flex; /* Ensure icon is centered */\n align-items: center;\n justify-content: center;\n line-height: 1; /* Prevent extra space */\n}\n.action-btn .material-icons {\n font-size: 1.25rem;\n display: block; /* Ensure icon takes block space */\n}\n\n.action-btn:hover:not(:disabled) { /* Apply hover only if not disabled */\n background-color: var(--button-bg);\n color: var(--ink-secondary);\n}\n.action-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: transparent !important; /* Ensure no hover bg when disabled */\n color: var(--ink-light) !important;\n}\n\n.edit-btn:hover:not(:disabled) {\n color: #4b8cc8; /* A different subtle color for edit */\n}\n\n.remove-btn:hover:not(:disabled) {\n color: var(--accent-color);\n}\n\n.remove-btn.confirm {\n color: var(--button-active-text);\n background-color: var(--accent-color);\n}\n.remove-btn.confirm:hover:not(:disabled) {\n filter: brightness(1.1);\n background-color: var(--accent-color); /* Keep bg */\n color: var(--button-active-text); /* Keep text color */\n}\n\n\n/* Card Metadata (Date, Tag) */\n.card-meta {\n margin-bottom: var(--space-sm);\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-sm) var(--space-md); /* Row and column gap */\n align-items: center;\n}\n.card-meta time {\n color: var(--ink-secondary);\n font-size: 0.8rem;\n font-style: italic;\n white-space: nowrap;\n}\n\n.tag {\n display: inline-block;\n background-color: var(--highlight-bg);\n color: var(--ink-secondary);\n padding: 0.15rem 0.6rem;\n border-radius: var(--radius-sm);\n font-size: 0.75rem;\n font-weight: 600;\n border: 1px solid var(--border-color);\n white-space: nowrap;\n}\n\n.card-divider {\n border: none;\n border-top: var(--border-width) var(--border-style) var(--border-color);\n margin: var(--space-sm) 0 var(--space-md) 0;\n}\n\n.audio-player {\n width: 100%;\n margin-top: 0; /* Removed top margin as divider provides space */\n /* Subtle styling for the player itself if possible */\n border-radius: var(--radius-sm);\n max-height: 50px; /* Limit height */\n}\n/* Attempt to style audio player controls (limited cross-browser support) */\naudio::-webkit-media-controls-panel {\n background-color: var(--paper-bg);\n border-radius: var(--radius-sm);\n}\naudio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-mute-button {\n color: var(--accent-color);\n}\n\n\n/* Editing State */\n.song-card.editing {\n box-shadow: 0 0 0 2px var(--accent-color), 0 4px 10px rgba(0, 0, 0, 0.12); /* Highlight editing card */\n /* Ensure editing card doesn't break if columns active */\n break-inside: avoid;\n page-break-inside: avoid;\n}\n.edit-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n}\n.edit-actions {\n display: flex;\n gap: var(--space-sm);\n justify-content: flex-end; /* Align buttons to the right */\n margin-top: var(--space-sm);\n}\n.save-btn {\n background-color: var(--accent-color);\n border-color: var(--accent-color);\n color: var(--button-active-text);\n}\n.save-btn:hover:not(:disabled) {\n filter: brightness(1.1);\n background-color: var(--accent-color); /* Keep bg */\n border-color: var(--accent-color);\n color: var(--button-active-text);\n}\n.cancel-btn {\n /* Standard button style */\n}\n\n\n/* Error Messages */\n.error-message {\n background-color: var(--accent-light);\n color: var(--accent-color);\n padding: var(--space-md);\n border-radius: var(--radius-sm);\n margin-bottom: var(--space-md);\n border: 1px solid var(--accent-color);\n font-weight: 600;\n}\n.error-message.global-error {\n text-align: center;\n margin: var(--space-md) 0 var(--space-xl) 0; /* Center global errors */\n}\n\n/* Loading Indicators */\n.loading {\n animation: spin 1s linear infinite;\n}\n@keyframes spin {\n 100% { transform: rotate(360deg); }\n}\n\n.loading-container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 50vh; /* Take up significant vertical space */\n}\n.loading-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-md);\n color: var(--ink-secondary);\n}\n.loading-spinner .material-icons {\n font-size: 3rem;\n color: var(--ink-light);\n}\n\n/* No Results Message */\n.no-results {\n text-align: center;\n padding: var(--space-xl) var(--space-md);\n color: var(--ink-secondary);\n border: 2px dashed var(--border-color);\n border-radius: var(--radius-md);\n margin-top: var(--space-lg);\n}\n.no-results .material-icons {\n font-size: 3rem;\n margin-bottom: var(--space-sm);\n color: var(--ink-light);\n}\n.no-results p {\n margin-bottom: var(--space-md);\n font-size: 1.1rem;\n}\n.no-results .control-button {\n /* Style the button if needed */\n}\n\n\n/* Footer */\n.app-footer {\n margin-top: var(--space-xl);\n padding-top: var(--space-lg);\n border-top: 2px solid var(--ink-main);\n text-align: center;\n font-size: 0.85rem;\n color: var(--ink-secondary);\n}\n\n\n/* List View Specific Styles */\n.app-container.view-list .songs-container {\n column-count: 1; /* Disable columns for list view */\n margin-top: var(--space-lg);\n}\n.app-container.view-list .song-card {\n display: flex;\n flex-wrap: wrap; /* Allow wrapping on small screens */\n align-items: center; /* Center items vertically */\n padding: var(--space-sm) var(--space-md);\n box-shadow: none; /* Less emphasis for list items */\n border-bottom: none; /* Remove bottom border */\n border-radius: 0; /* No radius */\n margin-bottom: 0; /* No bottom margin */\n}\n.app-container.view-list .song-card:not(:first-child) {\n border-top: var(--border); /* Add separator border */\n}\n\n.app-container.view-list .card-header {\n flex-grow: 1; /* Allow header to take available space */\n margin-bottom: 0;\n padding-right: var(--space-md); /* Space before audio player */\n order: 1; /* Order: Header Content */\n}\n.app-container.view-list .card-title h2 {\n font-size: 1.1rem; /* Slightly smaller title */\n font-family: var(--font-sans); /* Use sans-serif for list view title */\n font-weight: 600;\n}\n.app-container.view-list .card-meta {\n width: 100%; /* Make metadata take full width below title */\n order: 2; /* Place metadata after header */\n margin-bottom: var(--space-sm);\n padding-left: 0; /* No indent */\n border-top: none; /* No border here */\n margin-top: var(--space-xs);\n padding-top: 0;\n}\n.app-container.view-list .card-actions {\n order: 4; /* Place actions last on the right */\n padding-left: var(--space-md);\n}\n.app-container.view-list hr.card-divider {\n display: none; /* Hide the horizontal rule in list view */\n}\n.app-container.view-list .audio-player {\n flex-shrink: 0; /* Prevent player shrinking */\n width: auto; /* Allow player to size naturally or set fixed width */\n min-width: 280px; /* Ensure minimum width */\n margin-top: 0;\n order: 3; /* Place player before actions */\n margin-left: auto; /* Push player to the right if space allows */\n}\n\n/* Print Styles */\n@media print {\n body {\n background-color: #fff;\n color: #000;\n font-size: 10pt; /* Smaller font size for print */\n }\n\n :root {\n /* Override colors for pure B&W */\n --paper-bg: #ffffff;\n --ink-main: #000000;\n --ink-secondary: #333333;\n --border-color: #aaaaaa;\n --card-bg: #ffffff;\n --shadow-color: transparent; /* Remove shadows */\n --accent-color: #000000; /* Black instead of red */\n }\n\n .app-container {\n max-width: 100%;\n padding: 1cm; /* Use print units */\n }\n\n /* Hide non-essential elements */\n .add-song-section,\n .controls-section,\n .card-actions, /* Hide Edit/Delete */\n .app-footer,\n .loading-inline,\n .no-results .control-button,\n .view-controls, /* Hide view switcher */\n .action-btn.edit-btn, /* Specifically hide edit/delete */\n .action-btn.remove-btn,\n .add-song-toggle .material-icons /* Hide +/- icon */\n {\n display: none !important;\n }\n\n .masthead {\n border-bottom: 2pt solid #000;\n text-align: left; /* Align left for print */\n margin-bottom: 1cm;\n }\n .masthead h1 {\n font-size: 20pt;\n }\n .masthead .subtitle {\n font-size: 11pt;\n }\n\n /* Use list view layout for printing */\n .app-container.view-grid .songs-container, /* Override grid columns */\n .app-container.view-list .songs-container {\n column-count: 1;\n margin-top: 0;\n }\n .app-container .song-card, /* Apply list styles to all cards */\n .app-container.view-list .song-card {\n display: block; /* Stack elements vertically */\n border: none;\n border-top: 1pt solid #aaa;\n padding: 0.5cm 0;\n box-shadow: none;\n break-inside: avoid;\n page-break-inside: avoid;\n border-radius: 0;\n margin-bottom: 0;\n }\n .app-container .song-card:first-child {\n border-top: none; /* No top border on first card */\n }\n .app-container .card-header,\n .app-container.view-list .card-header {\n padding: 0; margin: 0; order: 1;\n }\n .app-container .card-title h2,\n .app-container.view-list .card-title h2 {\n font-size: 12pt; font-family: var(--font-sans); font-weight: bold;\n }\n .app-container .card-meta,\n .app-container.view-list .card-meta {\n order: 2; margin: 0.2cm 0; padding: 0;\n }\n .app-container .card-meta time, .tag,\n .app-container.view-list .card-meta time, .tag {\n font-size: 8pt;\n }\n .app-container .card-divider,\n .app-container.view-list .card-divider {\n display: none; /* Hide divider */\n }\n .app-container .audio-player,\n .app-container.view-list .audio-player {\n order: 3;\n width: 100%; /* Full width */\n min-width: 0;\n margin-top: 0.3cm;\n border: 1pt solid #ccc; /* Add border for visibility */\n }\n /* Ensure links are underlined and visible */\n a, a:visited {\n color: #000 !important; /* Ensure black */\n text-decoration: underline !important;\n }\n\n}\n\n/* Responsive Adjustments */\n@media (max-width: 768px) { /* Apply earlier than 640 for list view */\n /* Adjust list view for medium screens */\n .app-container.view-list .song-card {\n flex-direction: column;\n align-items: stretch;\n }\n .app-container.view-list .card-header { padding-right: 0; }\n .app-container.view-list .card-meta { order: 2; width: 100%; margin-top: var(--space-xs); }\n .app-container.view-list .audio-player { order: 3; width: 100%; min-width: 0; margin-top: var(--space-sm); margin-left: 0; }\n .app-container.view-list .card-actions { order: 4; justify-content: flex-end; padding: var(--space-sm) 0 0 0; margin-top: var(--space-sm); border-top: var(--border); width: 100%;}\n}\n\n@media (max-width: 640px) {\n html { font-size: 15px; } /* Slightly smaller base on mobile */\n .masthead h1 { font-size: 2rem; }\n .masthead .subtitle { font-size: 1rem; }\n\n .add-song-form {\n flex-direction: column;\n align-items: stretch; /* Stretch items full width */\n }\n .form-group { min-width: 0;} /* Reset min-width */\n .form-actions { margin-left: 0; width: 100%; }\n .add-song-form button[type=\"submit\"] { width: 100%; padding: 0.75rem 1.2rem; } /* Ensure height */\n\n .controls-bar { flex-direction: column; align-items: stretch; gap: var(--space-md); }\n .control-group { gap: var(--space-sm); flex-direction: column; align-items: stretch; width: 100%;}\n .button-group { justify-content: flex-start; width: 100%; flex-wrap: wrap;} /* Ensure wrap */\n .control-label { margin-bottom: var(--space-xs); width: 100%; text-align: left; }\n .view-controls .button-group { justify-content: flex-end; } /* Align view switcher right */\n .sort-controls .button-group button,\n .tag-controls .button-group button {\n flex-grow: 1; /* Allow buttons to grow */\n min-width: 100px; /* Min width for buttons */\n }\n}\n\n\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/jamz/code/main.tsx","extension","actionData","errors"]