diff --git a/frontend/index.html b/frontend/index.html index 18c6146..2516a84 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,5 @@ - + @@ -11,6 +11,16 @@ HomeHub + +
diff --git a/frontend/package.json b/frontend/package.json index 8bdf6e5..696e7c0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "homehub-frontend", "private": true, - "version": "0.4.14", + "version": "0.5.0", "type": "module", "scripts": { "dev": "vite", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2e26976..5798bba 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,6 +4,7 @@ import HomePage from './pages/HomePage' import TodosPage from './pages/TodosPage' import ShoppingPage from './pages/ShoppingPage' import NotesPage from './pages/NotesPage' +import ConfigPage from './pages/ConfigPage' export default function App() { return ( @@ -14,6 +15,7 @@ export default function App() { } /> } /> } /> + } /> diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index 12b1ed7..4b7ce00 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -2,22 +2,59 @@ import { Outlet } from 'react-router-dom' import BottomNav from './BottomNav' import SideNav from './SideNav' import { ActionButtonProvider } from '../../contexts/ActionButtonContext' +import { ThemeProvider, useTheme, type ThemeMode } from '../../contexts/ThemeContext' -export default function Layout() { +const THEME_CYCLE: ThemeMode[] = ['dark', 'light', 'system'] +const THEME_ICON: Record = { + dark: 'moon', + light: 'sun', + system: 'circle-half-stroke', +} + +function TopBar() { + const { theme, setTheme, resolved } = useTheme() + + function cycleTheme() { + const idx = THEME_CYCLE.indexOf(theme) + setTheme(THEME_CYCLE[(idx + 1) % THEME_CYCLE.length]) + } + + return ( +
+ +
+ ) +} + +function AppLayout() { return ( -
- {/* Sidebar — visible uniquement sur laptop (lg et +) */} + +
- - {/* Contenu principal */}
- - {/* Navigation bas — visible uniquement sur mobile */}
@@ -25,3 +62,11 @@ export default function Layout() { ) } + +export default function Layout() { + return ( + + + + ) +} diff --git a/frontend/src/components/todos/TodoForm.tsx b/frontend/src/components/todos/TodoForm.tsx index 5edcc77..54be8f5 100644 --- a/frontend/src/components/todos/TodoForm.tsx +++ b/frontend/src/components/todos/TodoForm.tsx @@ -1,4 +1,4 @@ -import { useState, useRef } from 'react' +import { useState, useRef, useEffect } from 'react' import type { TodoCreate } from '../../api/todos' const DOMAINS = [ @@ -76,9 +76,7 @@ export default function TodoForm({ onSubmit, onCancel, initialValues, submitLabe setSelectedDomains(prev => prev.includes(d) ? prev.filter(x => x !== d) : [...prev, d]) } - async function handlePhotoCapture(e: React.ChangeEvent) { - const file = e.target.files?.[0] - if (!file) return + async function uploadPhoto(file: File) { setPhotoLoading(true) try { const formData = new FormData() @@ -90,9 +88,26 @@ export default function TodoForm({ onSubmit, onCancel, initialValues, submitLabe } } finally { setPhotoLoading(false) + if (fileRef.current) fileRef.current.value = '' } } + async function handlePhotoCapture(e: React.ChangeEvent) { + const file = e.target.files?.[0] + if (file) await uploadPhoto(file) + } + + useEffect(() => { + function onPaste(e: ClipboardEvent) { + const item = Array.from(e.clipboardData?.items ?? []).find(i => i.type.startsWith('image/')) + if (!item) return + const file = item.getAsFile() + if (file) void uploadPhoto(file) + } + window.addEventListener('paste', onPaste) + return () => window.removeEventListener('paste', onPaste) + }, []) + function handleGps() { if (!navigator.geolocation) return setGpsLoading(true) @@ -250,52 +265,59 @@ export default function TodoForm({ onSubmit, onCancel, initialValues, submitLabe /> {/* Photo + GPS */} -
- - - +
+
+ + + +
+ {!photoPath && !photoLoading && ( + + ou Ctrl+V pour coller une image + + )}
{/* Boutons */} diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..9a27e77 --- /dev/null +++ b/frontend/src/contexts/ThemeContext.tsx @@ -0,0 +1,75 @@ +import { createContext, useContext, useEffect, useState, type ReactNode } from 'react' + +export type ThemeMode = 'dark' | 'light' | 'system' + +interface ThemeCtx { + theme: ThemeMode + setTheme: (t: ThemeMode) => void + resolved: 'dark' | 'light' + fontScale: number + setFontScale: (s: number) => void +} + +const Ctx = createContext({ + theme: 'system', setTheme: () => {}, resolved: 'dark', + fontScale: 1, setFontScale: () => {}, +}) + +function systemTheme(): 'dark' | 'light' { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' +} + +function resolveTheme(t: ThemeMode): 'dark' | 'light' { + return t === 'system' ? systemTheme() : t +} + +export function ThemeProvider({ children }: { children: ReactNode }) { + const [theme, setThemeState] = useState( + () => (localStorage.getItem('theme') as ThemeMode) ?? 'system' + ) + const [resolved, setResolved] = useState<'dark' | 'light'>( + () => resolveTheme((localStorage.getItem('theme') as ThemeMode) ?? 'system') + ) + const [fontScale, setFontScaleState] = useState( + () => parseFloat(localStorage.getItem('fontScale') ?? '1') + ) + + function setTheme(t: ThemeMode) { + localStorage.setItem('theme', t) + setThemeState(t) + } + + function setFontScale(s: number) { + const clamped = Math.round(s * 100) / 100 + localStorage.setItem('fontScale', String(clamped)) + setFontScaleState(clamped) + } + + useEffect(() => { + const r = resolveTheme(theme) + setResolved(r) + document.documentElement.setAttribute('data-theme', r) + }, [theme]) + + useEffect(() => { + if (theme !== 'system') return + const mq = window.matchMedia('(prefers-color-scheme: dark)') + function onChange() { + const r = systemTheme() + setResolved(r) + document.documentElement.setAttribute('data-theme', r) + } + mq.addEventListener('change', onChange) + return () => mq.removeEventListener('change', onChange) + }, [theme]) + + useEffect(() => { + document.documentElement.style.zoom = String(fontScale) + }, [fontScale]) + + return {children} +} + +export function useTheme() { + return useContext(Ctx) +} diff --git a/frontend/src/pages/ConfigPage.tsx b/frontend/src/pages/ConfigPage.tsx new file mode 100644 index 0000000..ba7ec15 --- /dev/null +++ b/frontend/src/pages/ConfigPage.tsx @@ -0,0 +1,128 @@ +import { useNavigate } from 'react-router-dom' +import { useTheme, type ThemeMode } from '../contexts/ThemeContext' + +const sectionStyle: React.CSSProperties = { + background: 'var(--bg-3)', + borderRadius: 10, + padding: '16px 16px', + display: 'flex', + flexDirection: 'column', + gap: 12, +} + +const labelStyle: React.CSSProperties = { + color: 'var(--ink-3)', + fontSize: 11, + fontFamily: 'var(--font-ui)', + textTransform: 'uppercase', + letterSpacing: 0.5, +} + +const THEME_OPTIONS: { value: ThemeMode; label: string; icon: string }[] = [ + { value: 'dark', label: 'Sombre', icon: 'moon' }, + { value: 'light', label: 'Clair', icon: 'sun' }, + { value: 'system', label: 'Système', icon: 'circle-half-stroke' }, +] + +const FONT_LABELS: Record = { + '0.8': 'XS', '0.85': 'S', '0.9': 'S+', + '0.95': 'M-', '1': 'M', '1.05': 'M+', + '1.1': 'L-', '1.15': 'L', '1.2': 'L+', + '1.25': 'XL', '1.3': 'XL+', '1.35': 'XXL', '1.4': 'XXL+', +} + +export default function ConfigPage() { + const navigate = useNavigate() + const { theme, setTheme, fontScale, setFontScale } = useTheme() + + const scaleLabel = FONT_LABELS[String(fontScale)] ?? `${Math.round(fontScale * 100)}%` + + return ( +
+ {/* Titre */} +
+ +

+ Paramètres +

+
+ + {/* Thème */} +
+
Thème d'affichage
+
+ {THEME_OPTIONS.map(opt => { + const active = theme === opt.value + return ( + + ) + })} +
+
+ + {/* Taille du texte */} +
+
Taille du texte
+
+ A + setFontScale(parseFloat(e.target.value))} + style={{ flex: 1, accentColor: 'var(--accent)', cursor: 'pointer' }} + /> + A +
+
+ + {scaleLabel} — {Math.round(fontScale * 100)}% + + {fontScale !== 1 && ( + + )} +
+ {/* Aperçu */} +
+
+ Aperçu du texte principal +
+
+ Texte secondaire et labels +
+
+
+
+ ) +} diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 1cea986..465409a 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -21,6 +21,7 @@ export default function HomePage() { { label: 'Todos', icon: 'list-check', path: '/todos' }, { label: 'Courses', icon: 'cart-shopping', path: '/shopping' }, { label: 'Notes', icon: 'note-sticky', path: '/notes' }, + { label: 'Paramètres', icon: 'sliders', path: '/config' }, ].map((item) => (