From 45cc0afb734a422ee7765dc5c60dccbcc6721367 Mon Sep 17 00:00:00 2001 From: Martin Kagamino Lehoux Date: Tue, 28 Jul 2026 12:13:31 +0200 Subject: feat: warm redesign, full French localization, compact sticky form, fixed row heights, and show quality score in list --- README.md | 13 ++- src/app.css | 27 ++++- src/lib/components/Nav.svelte | 25 +++-- src/routes/+layout.svelte | 6 +- src/routes/+page.server.ts | 6 +- src/routes/+page.svelte | 158 ++++++++++++++++++++--------- src/routes/catalog/+page.server.ts | 2 +- src/routes/catalog/+page.svelte | 95 ++++++++++------- src/routes/categories/+page.server.ts | 2 +- src/routes/categories/+page.svelte | 107 ++++++++++++++------ src/routes/grocery/[id]/+page.server.ts | 4 +- src/routes/grocery/[id]/+page.svelte | 174 +++++++++++++++++++++----------- 12 files changed, 417 insertions(+), 202 deletions(-) diff --git a/README.md b/README.md index bfc2ebe..86ce6b4 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,12 @@ efficient shopping walk. ## TODO -- [ ] Full FR -- [ ] Find a design identity -- [ ] Deploy -- [ ] Auth +- [ ] Edit grocery category +- [ ] Global code review + +## Deploy + +```bash +docker build -t home-sveltekit . +docker save home-sveltekit | ssh user@vps docker load +``` diff --git a/src/app.css b/src/app.css index 3d027fb..2aeefb0 100644 --- a/src/app.css +++ b/src/app.css @@ -8,27 +8,46 @@ :root { font-family: + 'Inter', system-ui, -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, sans-serif; font-size: 16px; line-height: 1.5; - color: #1a1a1a; - background-color: #fafafa; + color: var(--text); + background-color: var(--bg); + + --bg: #f9f7f3; + --surface: #ffffff; + --text: #2d2a26; + --text-secondary: #8c857b; + --accent: #d97757; + --accent-hover: #c56a4d; + --success: #7bae7f; + --border: #e8e3db; + --shadow: rgba(45, 42, 38, 0.06); + --danger: #d9534f; } body { min-height: 100dvh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } h1 { - font-size: 2rem; + font-size: 1.875rem; font-weight: 700; + letter-spacing: -0.02em; } h2 { - font-size: 1.5rem; + font-size: 1.25rem; font-weight: 600; + letter-spacing: -0.01em; } button { diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte index f6c83fc..725c098 100644 --- a/src/lib/components/Nav.svelte +++ b/src/lib/components/Nav.svelte @@ -3,11 +3,11 @@ @@ -15,29 +15,32 @@ .navbar { display: flex; gap: 0.25rem; - padding: 0.5rem 0; - border-bottom: 1px solid #ddd; + padding: 0.75rem 0; + border-bottom: 1px solid var(--border); position: sticky; top: 0; - background: #fafafa; + background: var(--bg); z-index: 20; } .navbar a { padding: 0.5rem 1rem; - border-radius: 0.5rem; - color: #333; + border-radius: 9999px; + color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; - transition: background 0.15s; + font-weight: 500; + transition: all 0.2s ease; } .navbar a:hover { - background: #f5f5f5; + color: var(--text); + background: var(--surface); } .navbar a.active { - background: #333; + background: var(--accent); color: #fff; + box-shadow: 0 1px 2px var(--shadow); } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5999926..9dc0244 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,7 +6,7 @@ - Home + Courses
@@ -16,8 +16,8 @@ diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 55ac82d..0a8a3f4 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -40,7 +40,7 @@ export const actions: Actions = { const categoryId = data.get('category_id')?.toString() || null; if (!name) { - return fail(400, { error: 'Name is required' }); + return fail(400, { error: 'Le nom est requis' }); } const [existing] = await db @@ -77,7 +77,7 @@ export const actions: Actions = { .from(groceries) .where(eq(groceries.id, id)); if (!item) { - return fail(404, { error: 'Item not found' }); + return fail(404, { error: 'Article introuvable' }); } await db @@ -94,7 +94,7 @@ export const actions: Actions = { const categoryId = data.get('category_id')?.toString() || null; if (!name) { - return fail(400, { error: 'Name is required' }); + return fail(400, { error: 'Le nom est requis' }); } const [existing] = await db diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b0398af..3dcd3bc 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,7 +10,7 @@ function groupByCategory(items: typeof listItems) { const groups: Record = {}; for (const item of items) { - const key = item.categoryName ?? 'Uncategorized'; + const key = item.categoryName ?? 'Non catégorisé'; (groups[key] ??= []).push(item); } return Object.entries(groups); @@ -22,11 +22,11 @@ type="text" name="name" bind:value={name} - placeholder="Add an item..." + placeholder="Ajouter un article..." autocomplete="off" /> - - + + {#if form?.error} @@ -34,7 +34,7 @@ {/if} {#if listItems.length === 0} -

Nothing to buy

+

Rien à acheter

{:else}
{#each groupByCategory(listItems) as [cat, items] (cat)} @@ -46,12 +46,15 @@ {item.name} {#if item.bestRef} - {item.bestRef.reference} - {#if item.bestRef.price && item.bestRef.unit} -  {item.bestRef.price.toFixed(2)} {item.bestRef.unit} - {/if} - + {item.bestRef.reference} + {#if item.bestRef.price && item.bestRef.unit} +  {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {/if} + {#if item.bestRef.qualityScore != null} +  ({item.bestRef.qualityScore}/100) + {/if} + {/if} @@ -67,77 +70,114 @@ .add-bar { display: flex; gap: 0.5rem; - padding: 0.5rem 1rem 0.5rem; + padding: 0.75rem 0; position: sticky; - top: 3rem; - background: #fafafa; + top: 3.1rem; + background: var(--bg); z-index: 10; } input { flex: 1; - padding: 0.75rem; - border: 1px solid #ccc; - border-radius: 0.5rem; + padding: 0.75rem 1rem; + border: 1.5px solid var(--border); + border-radius: 0.75rem; font-size: 1rem; font-family: inherit; - background: #fff; + background: var(--surface); min-width: 0; + transition: border-color 0.2s, box-shadow 0.2s; + } + + input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15); } .add-bar button { - padding: 0.75rem 1rem; + width: 3rem; + height: 3rem; + flex-shrink: 0; + padding: 0; border: none; - border-radius: 0.5rem; - font-size: 1rem; + border-radius: 0.75rem; + font-size: 1.25rem; + font-weight: 500; font-family: inherit; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; } .add-bar button[type='submit']:not([formaction]) { - background: #333; + background: var(--accent); color: #fff; + box-shadow: 0 1px 2px var(--shadow); + } + + .add-bar button[type='submit']:not([formaction]):hover { + background: var(--accent-hover); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2); } .add-bar button[formaction] { - background: #e0e0e0; - color: #333; + background: var(--surface); + color: var(--text-secondary); + border: 1.5px solid var(--border); + } + + .add-bar button[formaction]:hover { + border-color: var(--accent); + color: var(--text); } .error { - color: #d00; + color: var(--danger); + font-size: 0.875rem; margin-bottom: 1rem; + padding: 0.5rem 0.75rem; + background: rgba(217, 83, 79, 0.08); + border-radius: 0.5rem; } .item-list { list-style: none; display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.375rem; } .item-list li button { width: 100%; text-align: left; - height: 2.5rem; - padding: 0 0.75rem; - border: 1px solid #e0e0e0; - border-radius: 0.5rem; - background: #fff; + padding: 0 0.875rem; + height: 100%; + border: none; + border-radius: 0.75rem; + background: var(--surface); font-size: 1rem; + font-weight: 500; display: flex; align-items: center; - transition: background 0.15s; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); } .item-list li button:hover { - background: #f5f5f5; + background: #fff8f5; + box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); + transform: translateY(-1px); } .catalog-item { display: flex; - gap: 0.25rem; - height: 2.5rem; + gap: 0.5rem; + align-items: center; + height: 2.75rem; } .catalog-item button:first-child { @@ -145,6 +185,7 @@ width: auto; display: flex; align-items: center; + height: 100%; } .item-text { @@ -152,42 +193,59 @@ flex-direction: column; text-align: left; line-height: 1.2; + gap: 0.0625rem; + overflow: hidden; } .best-ref { - font-size: 0.625rem; - color: #999; + font-size: 0.75rem; + color: var(--text-secondary); + font-weight: 400; } .ref-link { - width: 2.5rem; + width: 2.75rem; + flex-shrink: 0; + height: 2.75rem; + aspect-ratio: 1; display: flex; align-items: center; justify-content: center; - border: 1px solid #e0e0e0; - border-radius: 0.5rem; - background: #fff; - color: #333; + border-radius: 0.75rem; + background: var(--surface); + color: var(--text-secondary); text-decoration: none; font-size: 1rem; - transition: background 0.15s; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); } .ref-link:hover { - background: #f5f5f5; + background: #fff8f5; + color: var(--accent); + box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); + transform: translateY(-1px); } .empty { - color: #999; - font-size: 0.875rem; - margin-top: 0.5rem; + color: var(--text-secondary); + font-size: 0.9375rem; + margin-top: 1rem; + text-align: center; + padding: 2rem; + background: var(--surface); + border-radius: 0.75rem; + box-shadow: 0 1px 2px var(--shadow); } .category-name { font-size: 0.75rem; - font-weight: 600; + font-weight: 700; text-transform: uppercase; - color: #999; - margin: 1rem 0 0.25rem; + letter-spacing: 0.08em; + color: var(--accent); + margin: 1.25rem 0 0.5rem; + padding-left: 0.5rem; + border-left: 3px solid var(--accent); } diff --git a/src/routes/catalog/+page.server.ts b/src/routes/catalog/+page.server.ts index 34d0a06..a3a611e 100644 --- a/src/routes/catalog/+page.server.ts +++ b/src/routes/catalog/+page.server.ts @@ -39,7 +39,7 @@ export const actions: Actions = { .from(groceries) .where(eq(groceries.id, id)); if (!item) { - return fail(404, { error: 'Item not found' }); + return fail(404, { error: 'Article introuvable' }); } await db diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte index 1ac558f..0fda271 100644 --- a/src/routes/catalog/+page.svelte +++ b/src/routes/catalog/+page.svelte @@ -9,7 +9,7 @@ function groupByCategory(items: typeof catalogItems) { const groups: Record = {}; for (const item of items) { - const key = item.categoryName ?? 'Uncategorized'; + const key = item.categoryName ?? 'Non catégorisé'; (groups[key] ??= []).push(item); } return Object.entries(groups); @@ -17,7 +17,7 @@ {#if catalogItems.length === 0} -

No items yet

+

Aucun article

{:else} {#each groupByCategory(catalogItems) as [cat, items] (cat)} @@ -29,12 +29,15 @@ {item.name} {#if item.bestRef} - {item.bestRef.reference} - {#if item.bestRef.price && item.bestRef.unit} -  {item.bestRef.price.toFixed(2)} {item.bestRef.unit} - {/if} - + {item.bestRef.reference} + {#if item.bestRef.price && item.bestRef.unit} +  {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {/if} + {#if item.bestRef.qualityScore != null} +  ({item.bestRef.qualityScore}/100) + {/if} + {/if} @@ -51,31 +54,36 @@ list-style: none; display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.375rem; } .item-list li button { width: 100%; text-align: left; - height: 2.5rem; - padding: 0 0.75rem; - border: 1px solid #e0e0e0; - border-radius: 0.5rem; - background: #fff; + padding: 0 0.875rem; + height: 100%; + border: none; + border-radius: 0.75rem; + background: var(--surface); font-size: 1rem; + font-weight: 500; display: flex; align-items: center; - transition: background 0.15s; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); } .item-list li button:hover { - background: #f5f5f5; + background: #fff8f5; + box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); + transform: translateY(-1px); } .catalog-item { display: flex; - gap: 0.25rem; - height: 2.5rem; + gap: 0.5rem; + align-items: center; + height: 2.75rem; } .catalog-item button:first-child { @@ -83,6 +91,7 @@ width: auto; display: flex; align-items: center; + height: 100%; } .item-text { @@ -90,47 +99,65 @@ flex-direction: column; text-align: left; line-height: 1.2; + gap: 0.0625rem; + overflow: hidden; } .checked { text-decoration: line-through; - opacity: 0.5; + color: var(--text-secondary); + font-weight: 400; } .best-ref { - font-size: 0.625rem; - color: #999; + font-size: 0.75rem; + color: var(--text-secondary); + font-weight: 400; } .ref-link { - width: 2.5rem; + width: 2.75rem; + flex-shrink: 0; + height: 2.75rem; + aspect-ratio: 1; display: flex; align-items: center; justify-content: center; - border: 1px solid #e0e0e0; - border-radius: 0.5rem; - background: #fff; - color: #333; + border-radius: 0.75rem; + background: var(--surface); + color: var(--text-secondary); text-decoration: none; font-size: 1rem; - transition: background 0.15s; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); } .ref-link:hover { - background: #f5f5f5; + background: #fff8f5; + color: var(--accent); + box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); + transform: translateY(-1px); } .empty { - color: #999; - font-size: 0.875rem; - margin-top: 0.5rem; + color: var(--text-secondary); + font-size: 0.9375rem; + margin-top: 1rem; + text-align: center; + padding: 2rem; + background: var(--surface); + border-radius: 0.75rem; + box-shadow: 0 1px 2px var(--shadow); } .category-name { font-size: 0.75rem; - font-weight: 600; + font-weight: 700; text-transform: uppercase; - color: #999; - margin: 1rem 0 0.25rem; + letter-spacing: 0.08em; + color: var(--accent); + margin: 1.25rem 0 0.5rem; + padding-left: 0.5rem; + border-left: 3px solid var(--accent); } diff --git a/src/routes/categories/+page.server.ts b/src/routes/categories/+page.server.ts index 241370e..7cedd98 100644 --- a/src/routes/categories/+page.server.ts +++ b/src/routes/categories/+page.server.ts @@ -19,7 +19,7 @@ export const actions: Actions = { const name = data.get('name')?.toString().trim(); if (!name) { - return fail(400, { error: 'Name is required' }); + return fail(400, { error: 'Le nom est requis' }); } await db.insert(categories).values({ name }); diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte index 541b280..eab0219 100644 --- a/src/routes/categories/+page.svelte +++ b/src/routes/categories/+page.svelte @@ -8,16 +8,16 @@ - + {#if form?.error} @@ -38,7 +38,7 @@ {#if (data?.categories?.length ?? 0) === 0} -

No categories yet

+

Aucune catégorie

{/if} diff --git a/src/routes/grocery/[id]/+page.server.ts b/src/routes/grocery/[id]/+page.server.ts index e434e9f..b19825a 100644 --- a/src/routes/grocery/[id]/+page.server.ts +++ b/src/routes/grocery/[id]/+page.server.ts @@ -8,7 +8,7 @@ export const load: PageServerLoad = async ({ params }) => { const id = Number(params.id); const [item] = await db.select().from(groceries).where(eq(groceries.id, id)); - if (!item) throw error(404, 'Item not found'); + if (!item) throw error(404, 'Article introuvable'); const [cat] = item.categoryId ? await db @@ -40,7 +40,7 @@ export const actions: Actions = { const qualityScore = data.get('quality_score')?.toString().trim(); if (!reference) { - return fail(400, { error: 'Reference is required' }); + return fail(400, { error: 'La référence est requise' }); } await db.insert(references).values({ diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte index 35cf33a..c3c3706 100644 --- a/src/routes/grocery/[id]/+page.svelte +++ b/src/routes/grocery/[id]/+page.svelte @@ -18,22 +18,22 @@
-

References

+

Références

- +
{#if form?.error} @@ -81,7 +81,7 @@ > {/if} {#if ref.qualityScore != null} - Score: {ref.qualityScore}/100 + Note : {ref.qualityScore}/100 {/if}
+ -← Back to list +← Retour à la liste -- cgit v1.3