football2801
5fcfb806be
CI / test (push) Has been cancelled
- Add manifest.webmanifest with standalone display + warm-craft theme colors, apple-touch-icon, and 192/512/512-maskable icons (frame-with-sunset glyph). - Add PWA meta tags + viewport-fit=cover so add-to-home-screen produces a true standalone app on iOS instead of a Safari bookmark. - Drop the Shared bottom-nav tab; the in-page sub-tabs already cover that. Three nav tabs total (Home / Library / Settings); pending-share badge moves to the Library tab. Predicate-based isActive() now correctly disambiguates /library vs /library?tab=shared. - Safe-area handling: bottom nav, bottom sheet, upload overlay, and #app respect env(safe-area-inset-*); sticky Library tabs anchor below the iPhone status bar. Introduces --bottom-nav-height token consumed by Settings, Library, and the toast. - LibraryView reactively follows route.query.tab so deep-linking /library?tab=shared lands on the right sub-tab. - Theme-color meta syncs client-side via useTheme.applyTheme so the user's chosen theme follows them into Android Chrome's chrome bar. Test suite expanded to 278 tests / 100% line coverage (99.84% statements, 99.78% branches). Remaining gaps are unreachable defensive code. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { useAuthStore } from '@/stores/auth'
|
|
import { useToastStore } from '@/stores/toast'
|
|
|
|
export interface ThemeOption {
|
|
id: string
|
|
label: string
|
|
primary: string
|
|
bg: string
|
|
text: string
|
|
}
|
|
|
|
export const THEMES: ThemeOption[] = [
|
|
{ id: 'warm-craft', label: 'Warm Craft', primary: '#c97c3a', bg: '#fdf6ee', text: '#3a2e22' },
|
|
{ id: 'playful-pop', label: 'Playful Pop', primary: '#d63aab', bg: '#fff0fb', text: '#2d0a28' },
|
|
{ id: 'sage-cream', label: 'Sage & Cream', primary: '#4e7c3a', bg: '#f6f8f3', text: '#1e2b1a' },
|
|
{ id: 'dusty-mauve', label: 'Dusty Mauve', primary: '#8e4a84', bg: '#f6f0f4', text: '#2a1828' },
|
|
{ id: 'ocean-dusk', label: 'Ocean Dusk', primary: '#1a6ea8', bg: '#eef3f8', text: '#0e2030' },
|
|
{ id: 'honey-slate', label: 'Honey & Slate', primary: '#c49a20', bg: '#f2f2ee', text: '#1c1c18' },
|
|
]
|
|
|
|
export function useTheme() {
|
|
const auth = useAuthStore()
|
|
const toast = useToastStore()
|
|
|
|
function applyTheme(themeId: string) {
|
|
document.documentElement.dataset.theme = themeId
|
|
if (auth.user) auth.user.theme = themeId
|
|
|
|
const theme = THEMES.find(t => t.id === themeId)
|
|
if (theme) {
|
|
const meta = document.querySelector('meta[name="theme-color"]')
|
|
if (meta) meta.setAttribute('content', theme.bg)
|
|
}
|
|
}
|
|
|
|
async function saveTheme(themeId: string) {
|
|
applyTheme(themeId)
|
|
try {
|
|
const res = await fetch('/api/user/theme', {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ theme: themeId }),
|
|
})
|
|
if (!res.ok) throw new Error('Failed to save theme')
|
|
} catch {
|
|
toast.show('Could not save theme — try again', 'error')
|
|
}
|
|
}
|
|
|
|
return { THEMES, applyTheme, saveTheme }
|
|
}
|