gilles/home_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: thème dark/light/system, taille police, page config, paste photo todo

Browse Source 
ThemeContext
- ThemeMode dark/light/system persisté en localStorage
- fontScale 0.8–1.4 appliqué via CSS zoom sur <html>
- Écoute prefers-color-scheme pour le mode système

index.html
- Script anti-flash : applique thème et zoom synchrone avant le premier rendu

Layout
- TopBar fixe 44px : bouton icône qui cycle dark→light→system→dark
- Contenu décalé de 44px vers le bas

ConfigPage (/config)
- Sélecteur de thème (3 boutons avec icônes)
- Slider taille de texte avec aperçu temps réel
- Bouton Réinitialiser

HomePage
- Tuile Paramètres (fa-sliders) → /config

TodoForm
- Paste Ctrl+V pour ajouter une photo (même mécanique que CatalogueModal)
- Indice visuel "ou Ctrl+V"

v0.5.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gilles
2026-05-25 13:41:42 +02:00
co-authored by Claude Sonnet 4.6
parent 3dbd554eeb
commit bd0e06c5dd
8 changed files with 342 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+11 -1
View File
@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="fr" data-theme="dark"> <html lang="fr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
@@ -11,6 +11,16 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>HomeHub</title> <title>HomeHub</title>
<!-- Anti-flash : applique thème et zoom avant le premier rendu -->
<script>
(function(){
var t=localStorage.getItem('theme')||'system';
var r=t==='system'?(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'):t;
document.documentElement.setAttribute('data-theme',r);
var z=localStorage.getItem('fontScale');
if(z)document.documentElement.style.zoom=z;
})();
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "homehub-frontend", "name": "homehub-frontend",
"private": true, "private": true,
"version": "0.4.14", "version": "0.5.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
frontend/src/App.tsx
+2
View File
@@ -4,6 +4,7 @@ import HomePage from './pages/HomePage'
import TodosPage from './pages/TodosPage' import TodosPage from './pages/TodosPage'
import ShoppingPage from './pages/ShoppingPage' import ShoppingPage from './pages/ShoppingPage'
import NotesPage from './pages/NotesPage' import NotesPage from './pages/NotesPage'
import ConfigPage from './pages/ConfigPage'
export default function App() { export default function App() {
return ( return (
@@ -14,6 +15,7 @@ export default function App() {
<Route path="todos" element={<TodosPage />} /> <Route path="todos" element={<TodosPage />} />
<Route path="shopping" element={<ShoppingPage />} /> <Route path="shopping" element={<ShoppingPage />} />
<Route path="notes" element={<NotesPage />} /> <Route path="notes" element={<NotesPage />} />
<Route path="config" element={<ConfigPage />} />
</Route> </Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
frontend/src/components/layout/Layout.tsx
+52 -7
View File
@@ -2,22 +2,59 @@ import { Outlet } from 'react-router-dom'
import BottomNav from './BottomNav' import BottomNav from './BottomNav'
import SideNav from './SideNav' import SideNav from './SideNav'
import { ActionButtonProvider } from '../../contexts/ActionButtonContext' 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<ThemeMode, string> = {
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 (
<header style={{
position: 'fixed', top: 0, left: 0, right: 0,
height: 44, zIndex: 100,
background: 'var(--bg-2)',
borderBottom: '1px solid var(--border-2)',
display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
padding: '0 12px',
}}>
<button
onClick={cycleTheme}
title={`Thème : ${theme} (${resolved})`}
style={{
background: 'var(--bg-4)', border: 'none', borderRadius: 8,
width: 36, height: 36, cursor: 'pointer',
color: 'var(--ink-2)', fontSize: 16,
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}
>
<i className={`fa-solid fa-${THEME_ICON[theme]}`} />
</button>
</header>
)
}
function AppLayout() {
return ( return (
<ActionButtonProvider> <ActionButtonProvider>
<div style={{ display: 'flex', height: '100dvh', background: 'var(--bg-1)' }}> <TopBar />
{/* Sidebar — visible uniquement sur laptop (lg et +) */} <div style={{ display: 'flex', height: '100dvh', background: 'var(--bg-1)', paddingTop: 44 }}>
<div className="hidden lg:flex" style={{ flexShrink: 0 }}> <div className="hidden lg:flex" style={{ flexShrink: 0 }}>
<SideNav /> <SideNav />
</div> </div>
{/* Contenu principal */}
<main style={{ flex: 1, overflow: 'auto', paddingBottom: 0 }} className="lg:pb-0 pb-14"> <main style={{ flex: 1, overflow: 'auto', paddingBottom: 0 }} className="lg:pb-0 pb-14">
<Outlet /> <Outlet />
</main> </main>
{/* Navigation bas — visible uniquement sur mobile */}
<div className="lg:hidden" style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50, overflow: 'visible' }}> <div className="lg:hidden" style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50, overflow: 'visible' }}>
<BottomNav /> <BottomNav />
</div> </div>
@@ -25,3 +62,11 @@ export default function Layout() {
</ActionButtonProvider> </ActionButtonProvider>
) )
} }
export default function Layout() {
return (
<ThemeProvider>
<AppLayout />
</ThemeProvider>
)
}
frontend/src/components/todos/TodoForm.tsx
+72 -50
View File
@@ -1,4 +1,4 @@
import { useState, useRef } from 'react' import { useState, useRef, useEffect } from 'react'
import type { TodoCreate } from '../../api/todos' import type { TodoCreate } from '../../api/todos'
const DOMAINS = [ 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]) setSelectedDomains(prev => prev.includes(d) ? prev.filter(x => x !== d) : [...prev, d])
} }
async function handlePhotoCapture(e: React.ChangeEvent<HTMLInputElement>) { async function uploadPhoto(file: File) {
const file = e.target.files?.[0]
if (!file) return
setPhotoLoading(true) setPhotoLoading(true)
try { try {
const formData = new FormData() const formData = new FormData()
@@ -90,9 +88,26 @@ export default function TodoForm({ onSubmit, onCancel, initialValues, submitLabe
} }
} finally { } finally {
setPhotoLoading(false) setPhotoLoading(false)
if (fileRef.current) fileRef.current.value = ''
} }
} }
async function handlePhotoCapture(e: React.ChangeEvent<HTMLInputElement>) {
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() { function handleGps() {
if (!navigator.geolocation) return if (!navigator.geolocation) return
setGpsLoading(true) setGpsLoading(true)
@@ -250,52 +265,59 @@ export default function TodoForm({ onSubmit, onCancel, initialValues, submitLabe
/> />
{/* Photo + GPS */} {/* Photo + GPS */}
<div style={{ display: 'flex', gap: 8 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
<input <div style={{ display: 'flex', gap: 8 }}>
ref={fileRef} <input
type="file" ref={fileRef}
accept="image/*" type="file"
capture="environment" accept="image/*"
style={{ display: 'none' }} capture="environment"
onChange={handlePhotoCapture} style={{ display: 'none' }}
/> onChange={handlePhotoCapture}
<button />
type="button" <button
onClick={() => fileRef.current?.click()} type="button"
style={{ onClick={() => fileRef.current?.click()}
flex: 1, style={{
padding: '8px', flex: 1,
borderRadius: 8, padding: '8px',
border: '1px solid var(--bg-5)', borderRadius: 8,
background: photoPath ? 'var(--ok)' : 'var(--bg-4)', border: '1px solid var(--bg-5)',
color: photoPath ? '#1d2021' : 'var(--ink-3)', background: photoPath ? 'var(--ok)' : 'var(--bg-4)',
fontFamily: 'var(--font-ui)', color: photoPath ? '#1d2021' : 'var(--ink-3)',
fontSize: 13, fontFamily: 'var(--font-ui)',
cursor: 'pointer', fontSize: 13,
minHeight: 40, cursor: 'pointer',
}} minHeight: 40,
> }}
{photoLoading ? '…' : photoPath ? 'Photo ajoutée' : 'Ajouter une photo'} >
</button> {photoLoading ? '…' : photoPath ? 'Photo ajoutée ✓' : 'Ajouter une photo'}
<button </button>
type="button" <button
onClick={handleGps} type="button"
disabled={!navigator.geolocation} onClick={handleGps}
style={{ disabled={!navigator.geolocation}
flex: 1, style={{
padding: '8px', flex: 1,
borderRadius: 8, padding: '8px',
border: '1px solid var(--bg-5)', borderRadius: 8,
background: gpsLat != null ? 'var(--info)' : 'var(--bg-4)', border: '1px solid var(--bg-5)',
color: gpsLat != null ? '#fff' : 'var(--ink-3)', background: gpsLat != null ? 'var(--info)' : 'var(--bg-4)',
fontFamily: 'var(--font-ui)', color: gpsLat != null ? '#fff' : 'var(--ink-3)',
fontSize: 13, fontFamily: 'var(--font-ui)',
cursor: navigator.geolocation ? 'pointer' : 'default', fontSize: 13,
minHeight: 40, cursor: navigator.geolocation ? 'pointer' : 'default',
}} minHeight: 40,
> }}
{gpsLoading ? '…' : gpsLat != null ? `GPS : ${gpsLat.toFixed(4)}` : 'Position GPS'} >
</button> {gpsLoading ? '…' : gpsLat != null ? `GPS : ${gpsLat.toFixed(4)}` : 'Position GPS'}
</button>
</div>
{!photoPath && !photoLoading && (
<span style={{ color: 'var(--ink-4)', fontSize: 11, fontFamily: 'var(--font-ui)', paddingLeft: 4 }}>
ou Ctrl+V pour coller une image
</span>
)}
</div> </div>
{/* Boutons */} {/* Boutons */}
frontend/src/contexts/ThemeContext.tsx
+75
View File
@@ -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<ThemeCtx>({
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<ThemeMode>(
() => (localStorage.getItem('theme') as ThemeMode) ?? 'system'
)
const [resolved, setResolved] = useState<'dark' | 'light'>(
() => resolveTheme((localStorage.getItem('theme') as ThemeMode) ?? 'system')
)
const [fontScale, setFontScaleState] = useState<number>(
() => 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 <Ctx.Provider value={{ theme, setTheme, resolved, fontScale, setFontScale }}>{children}</Ctx.Provider>
}
export function useTheme() {
return useContext(Ctx)
}
frontend/src/pages/ConfigPage.tsx
+128
View File
@@ -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<string, string> = {
'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 (
<div style={{ padding: '12px 16px 32px', maxWidth: 520, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
{/* Titre */}
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<button
onClick={() => navigate(-1)}
style={{ background: 'var(--bg-4)', border: 'none', borderRadius: 8, width: 36, height: 36, cursor: 'pointer', color: 'var(--ink-2)', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
>
<i className="fa-solid fa-arrow-left" />
</button>
<h2 style={{ margin: 0, color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: 18, fontWeight: 600 }}>
Paramètres
</h2>
</div>
{/* Thème */}
<div style={sectionStyle}>
<div style={labelStyle}>Thème d'affichage</div>
<div style={{ display: 'flex', gap: 8 }}>
{THEME_OPTIONS.map(opt => {
const active = theme === opt.value
return (
<button
key={opt.value}
onClick={() => setTheme(opt.value)}
style={{
flex: 1,
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
padding: '10px 6px',
borderRadius: 8,
border: active ? 'none' : '1px solid var(--bg-5)',
background: active ? 'var(--accent)' : 'var(--bg-4)',
color: active ? '#1d2021' : 'var(--ink-3)',
cursor: 'pointer',
fontFamily: 'var(--font-ui)',
fontSize: 12,
fontWeight: active ? 600 : 400,
minHeight: 64,
userSelect: 'none',
}}
>
<i className={`fa-solid fa-${opt.icon}`} style={{ fontSize: 20 }} />
{opt.label}
</button>
)
})}
</div>
</div>
{/* Taille du texte */}
<div style={sectionStyle}>
<div style={labelStyle}>Taille du texte</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 12, minWidth: 16, textAlign: 'center' }}>A</span>
<input
type="range"
min={0.8}
max={1.4}
step={0.05}
value={fontScale}
onChange={e => setFontScale(parseFloat(e.target.value))}
style={{ flex: 1, accentColor: 'var(--accent)', cursor: 'pointer' }}
/>
<span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 20, minWidth: 16, textAlign: 'center' }}>A</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
<span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
{scaleLabel} — {Math.round(fontScale * 100)}%
</span>
{fontScale !== 1 && (
<button
onClick={() => setFontScale(1)}
style={{ padding: '3px 10px', borderRadius: 999, border: '1px solid var(--bg-5)', background: 'transparent', color: 'var(--ink-3)', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 11 }}
>Réinitialiser</button>
)}
</div>
{/* Aperçu */}
<div style={{ background: 'var(--bg-4)', borderRadius: 8, padding: '10px 12px' }}>
<div style={{ color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: `${14 * fontScale}px`, lineHeight: 1.5 }}>
Aperçu du texte principal
</div>
<div style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: `${12 * fontScale}px`, marginTop: 4 }}>
Texte secondaire et labels
</div>
</div>
</div>
</div>
)
}
frontend/src/pages/HomePage.tsx
+1
View File
@@ -21,6 +21,7 @@ export default function HomePage() {
{ label: 'Todos', icon: 'list-check', path: '/todos' }, { label: 'Todos', icon: 'list-check', path: '/todos' },
{ label: 'Courses', icon: 'cart-shopping', path: '/shopping' }, { label: 'Courses', icon: 'cart-shopping', path: '/shopping' },
{ label: 'Notes', icon: 'note-sticky', path: '/notes' }, { label: 'Notes', icon: 'note-sticky', path: '/notes' },
{ label: 'Paramètres', icon: 'sliders', path: '/config' },
].map((item) => ( ].map((item) => (
<Link <Link
key={item.path} key={item.path}