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

feat(ux): user-select global, swipe-gauche édition, clavier numérique, versionnage v0.4.0

Browse Source 
- user-select:none global (index.css) + reset sur input/textarea/select
- ItemRow: swipe gauche → édition (fond bleu), suppression long press,
  bouton ✕ toujours visible sur mobile
- SwipeableRow: prop onSwipeLeft, révèle rightContent entre seuil/2 et seuil,
  déclenche onSwipeLeft au seuil complet
- TodosPage: onSwipeLeft → édition (remplace double-tap)
- inputMode=decimal sur tous les champs quantité et prix
- formatQty: affiche "2" au lieu de "2.000"
- Versionnage: __APP_VERSION__ injecté par Vite depuis package.json v0.4.0
- HomePage: version affichée à côté du titre (v0.4.0)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gilles soulier
2026-05-25 07:38:23 +02:00
parent f86dd01d95
commit 19c686b4be
10 changed files with 59 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "homehub-frontend",
"private": true,
"version": "0.1.0",
"version": "0.4.0",
"type": "module",
"scripts": {
"dev": "vite",
frontend/src/components/shopping/CatalogueModal.tsx
+2
View File
@@ -228,11 +228,13 @@ export default function CatalogueModal({ stores, onClose }: CatalogueModalProps)
/>
<input
style={inputStyle} placeholder="Prix (€)"
inputMode="decimal"
value={form.price ?? ''}
onChange={e => setForm(f => ({ ...f, price: e.target.value }))}
/>
<input
style={inputStyle} placeholder="Qté/unité"
inputMode="decimal"
value={form.quantity_per_unit ?? ''}
onChange={e => setForm(f => ({ ...f, quantity_per_unit: e.target.value }))}
/>
frontend/src/components/shopping/ItemRow.tsx
+21 -42
View File
@@ -10,57 +10,38 @@ interface ItemRowProps {
}
const SWIPE_THRESHOLD = 80
const LONG_PRESS_MS = 500
function formatQty(qty: string): string {
const n = parseFloat(qty)
if (isNaN(n)) return qty
return n % 1 === 0 ? String(Math.round(n)) : n.toString()
}
export default function ItemRow({ item, onCheck, onDelete, onEdit, storeMode = false }: ItemRowProps) {
const [offsetX, setOffsetX] = useState(0)
const [isDragging, setIsDragging] = useState(false)
const startX = useRef<number | null>(null)
const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
const didLongPress = useRef(false)
function clearLongPress() {
if (longPressTimer.current) {
clearTimeout(longPressTimer.current)
longPressTimer.current = null
}
}
function onTouchStart(e: React.TouchEvent) {
startX.current = e.touches[0].clientX
setIsDragging(true)
didLongPress.current = false
if (onEdit) {
longPressTimer.current = setTimeout(() => {
didLongPress.current = true
onEdit()
}, LONG_PRESS_MS)
}
}
function onTouchMove(e: React.TouchEvent) {
if (startX.current === null) return
const dx = e.touches[0].clientX - startX.current
if (Math.abs(dx) > 8) clearLongPress()
if (!storeMode) setOffsetX(Math.max(Math.min(dx, 0), -120))
}
function onTouchEnd() {
clearLongPress()
if (!storeMode && offsetX < -SWIPE_THRESHOLD) {
onDelete()
if (!storeMode && offsetX < -SWIPE_THRESHOLD && onEdit) {
onEdit()
}
setOffsetX(0)
setIsDragging(false)
startX.current = null
}
function handleClick() {
if (didLongPress.current) return
onCheck()
}
const minHeight = storeMode ? 64 : 52
return (
@@ -69,11 +50,11 @@ export default function ItemRow({ item, onCheck, onDelete, onEdit, storeMode = f
<div style={{
position: 'absolute', right: 0, top: 0, bottom: 0,
width: 120, display: 'flex', alignItems: 'center', justifyContent: 'center',
background: 'var(--err)',
background: 'var(--info)',
opacity: offsetX < -20 ? 1 : 0,
transition: 'opacity 0.15s',
}}>
<span style={{ color: '#fff', fontSize: 20 }}>✕</span>
<span style={{ color: '#fff', fontSize: 20 }}>✏️</span>
</div>
)}
@@ -81,7 +62,7 @@ export default function ItemRow({ item, onCheck, onDelete, onEdit, storeMode = f
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onClick={handleClick}
onClick={onCheck}
style={{
transform: `translateX(${offsetX}px)`,
transition: isDragging ? 'none' : 'transform 0.2s ease',
@@ -126,7 +107,7 @@ export default function ItemRow({ item, onCheck, onDelete, onEdit, storeMode = f
</div>
{(item.quantity || item.unit) && (
<div style={{ color: 'var(--ink-3)', fontSize: 11, marginTop: 2, fontFamily: 'var(--font-mono)' }}>
{item.quantity}{item.unit ? ` ${item.unit}` : ''}
{item.quantity ? formatQty(item.quantity) : ''}{item.unit ? ` ${item.unit}` : ''}
</div>
)}
</div>
@@ -153,17 +134,15 @@ export default function ItemRow({ item, onCheck, onDelete, onEdit, storeMode = f
>✕</button>
</div>
{/* Suppression mode magasin mobile uniquement */}
{storeMode && !item.is_checked && (
<button
className="flex lg:hidden"
onClick={e => { e.stopPropagation(); onDelete() }}
style={{
background: 'transparent', border: 'none', color: 'var(--ink-4)',
fontSize: 18, cursor: 'pointer', padding: '4px 8px', minHeight: 44,
}}
>✕</button>
)}
{/* Suppression mobile — visible sur toutes les lignes */}
<button
className="flex lg:hidden"
onClick={e => { e.stopPropagation(); onDelete() }}
style={{
background: 'transparent', border: 'none', color: 'var(--ink-4)',
fontSize: 18, cursor: 'pointer', padding: '4px 8px', minHeight: 44,
}}
>✕</button>
</div>
</div>
)
frontend/src/components/todos/SwipeableRow.tsx
+10 -21
View File
@@ -4,17 +4,15 @@ interface SwipeableRowProps {
children: React.ReactNode
rightContent: React.ReactNode
onSwipeRight?: () => void
onDoubleTap?: () => void
onSwipeLeft?: () => void
}
const THRESHOLD = 80
const DOUBLE_TAP_DELAY = 300
export default function SwipeableRow({ children, rightContent, onSwipeRight, onDoubleTap }: SwipeableRowProps) {
export default function SwipeableRow({ children, rightContent, onSwipeRight, onSwipeLeft }: SwipeableRowProps) {
const [offsetX, setOffsetX] = useState(0)
const [isDragging, setIsDragging] = useState(false)
const startX = useRef<number | null>(null)
const lastTap = useRef<number>(0)
function onTouchStart(e: React.TouchEvent) {
startX.current = e.touches[0].clientX
@@ -28,27 +26,14 @@ export default function SwipeableRow({ children, rightContent, onSwipeRight, onD
}
function onTouchEnd() {
const finalOffset = offsetX
if (finalOffset > THRESHOLD && onSwipeRight) {
onSwipeRight()
}
// Double-tap : seulement si le doigt n'a pas bougé (tap, pas swipe)
if (Math.abs(finalOffset) < 10 && onDoubleTap) {
const now = Date.now()
if (now - lastTap.current < DOUBLE_TAP_DELAY) {
onDoubleTap()
}
lastTap.current = now
}
if (offsetX > THRESHOLD && onSwipeRight) onSwipeRight()
if (offsetX < -THRESHOLD && onSwipeLeft) onSwipeLeft()
setOffsetX(0)
setIsDragging(false)
startX.current = null
}
const revealActions = offsetX < -(THRESHOLD / 2)
const revealActions = offsetX < -(THRESHOLD / 2) && offsetX > -THRESHOLD
return (
<div style={{ position: 'relative', overflow: 'hidden' }}>
@@ -76,7 +61,11 @@ export default function SwipeableRow({ children, rightContent, onSwipeRight, onD
style={{
transform: `translateX(${offsetX}px)`,
transition: isDragging ? 'none' : 'transform 0.2s ease',
background: offsetX > THRESHOLD / 2 ? 'var(--ok)' : 'var(--bg-3)',
background: offsetX > THRESHOLD / 2
? 'var(--ok)'
: offsetX < -THRESHOLD
? 'var(--info)'
: 'var(--bg-3)',
position: 'relative',
zIndex: 1,
}}
frontend/src/index.css
+7
View File
@@ -6,6 +6,13 @@
* {
box-sizing: border-box;
-webkit-user-select: none;
user-select: none;
}
input, textarea, select {
-webkit-user-select: text;
user-select: text;
}
body {
frontend/src/pages/HomePage.tsx
+8 -3
View File
@@ -4,9 +4,14 @@ export default function HomePage() {
return (
<div className="p-4">
<div className="glass" style={{ padding: 20, borderRadius: 10, marginBottom: 16 }}>
<h1 style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', margin: 0 }}>
HomeHub
</h1>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
<h1 style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', margin: 0 }}>
HomeHub
</h1>
<span style={{ color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
v{__APP_VERSION__}
</span>
</div>
<p style={{ color: 'var(--ink-2)', marginTop: 8 }}>
Application d&apos;organisation personnelle
</p>
frontend/src/pages/ShoppingPage.tsx
+2
View File
@@ -447,6 +447,7 @@ export default function ShoppingPage() {
<input
style={inputStyle}
placeholder="Quantité"
inputMode="decimal"
value={editQty}
onChange={e => setEditQty(e.target.value)}
autoFocus
@@ -555,6 +556,7 @@ export default function ShoppingPage() {
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
<input
style={inputStyle} placeholder="Quantité"
inputMode="decimal"
value={newItemQty}
onChange={e => setNewItemQty(e.target.value)}
/>
frontend/src/pages/TodosPage.tsx
+1 -1
View File
@@ -197,7 +197,7 @@ export default function TodosPage() {
<SwipeableRow
key={todo.id}
onSwipeRight={() => void handleDone(todo.id)}
onDoubleTap={() => setEditingTodo(todo)}
onSwipeLeft={() => setEditingTodo(todo)}
rightContent={
<div style={{ display: 'flex', gap: 4, padding: '0 8px' }}>
<button
frontend/src/vite-env.d.ts
Vendored
+3
View File
@@ -0,0 +1,3 @@
/// <reference types="vite/client" />
declare const __APP_VERSION__: string
frontend/vite.config.ts
+4
View File
@@ -1,8 +1,12 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
import pkg from './package.json'
export default defineConfig({
define: {
__APP_VERSION__: JSON.stringify(pkg.version),
},
plugins: [
react(),
VitePWA({