aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md13
-rw-r--r--src/app.css27
-rw-r--r--src/lib/components/Nav.svelte25
-rw-r--r--src/routes/+layout.svelte6
-rw-r--r--src/routes/+page.server.ts6
-rw-r--r--src/routes/+page.svelte158
-rw-r--r--src/routes/catalog/+page.server.ts2
-rw-r--r--src/routes/catalog/+page.svelte95
-rw-r--r--src/routes/categories/+page.server.ts2
-rw-r--r--src/routes/categories/+page.svelte107
-rw-r--r--src/routes/grocery/[id]/+page.server.ts4
-rw-r--r--src/routes/grocery/[id]/+page.svelte174
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 @@
</script>
<nav class="navbar">
- <a href="/" class:active={$page.url.pathname === '/'}>List</a>
- <a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalog</a
+ <a href="/" class:active={$page.url.pathname === '/'}>Liste</a>
+ <a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalogue</a
>
<a href="/categories" class:active={$page.url.pathname === '/categories'}
- >Categories</a
+ >Catégories</a
>
</nav>
@@ -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);
}
</style>
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 @@
</script>
<svelte:head>
- <title>Home</title>
+ <title>Courses</title>
</svelte:head>
<div class="app">
@@ -16,8 +16,8 @@
<style>
.app {
- max-width: 48rem;
+ max-width: 36rem;
margin: 0 auto;
- padding: 0 1rem;
+ padding: 0 1rem 2rem;
}
</style>
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<string, typeof listItems> = {};
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"
/>
- <button type="submit">Add</button>
- <button type="submit" formaction="?/addAndEdit">Edit</button>
+ <button type="submit" aria-label="Ajouter">+</button>
+ <button type="submit" formaction="?/addAndEdit" aria-label="Modifier">→</button>
</form>
{#if form?.error}
@@ -34,7 +34,7 @@
{/if}
{#if listItems.length === 0}
- <p class="empty">Nothing to buy</p>
+ <p class="empty">Rien à acheter</p>
{:else}
<form method="POST" action="?/toggle" use:enhance>
{#each groupByCategory(listItems) as [cat, items] (cat)}
@@ -46,12 +46,15 @@
<span class="item-text">
{item.name}
{#if item.bestRef}
- <span class="best-ref"
- >{item.bestRef.reference}
- {#if item.bestRef.price && item.bestRef.unit}
- &nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
- {/if}
- </span>
+ <span class="best-ref"
+ >{item.bestRef.reference}
+ {#if item.bestRef.price && item.bestRef.unit}
+ &nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+ {/if}
+ {#if item.bestRef.qualityScore != null}
+ &nbsp;({item.bestRef.qualityScore}/100)
+ {/if}
+ </span>
{/if}
</span>
</button>
@@ -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);
}
</style>
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<string, typeof catalogItems> = {};
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 @@
</script>
{#if catalogItems.length === 0}
- <p class="empty">No items yet</p>
+ <p class="empty">Aucun article</p>
{:else}
<form method="POST" action="?/toggle" use:enhance>
{#each groupByCategory(catalogItems) as [cat, items] (cat)}
@@ -29,12 +29,15 @@
<span class="item-text">
<span class:checked={item.checked}>{item.name}</span>
{#if item.bestRef}
- <span class="best-ref"
- >{item.bestRef.reference}
- {#if item.bestRef.price && item.bestRef.unit}
- &nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
- {/if}
- </span>
+ <span class="best-ref"
+ >{item.bestRef.reference}
+ {#if item.bestRef.price && item.bestRef.unit}
+ &nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+ {/if}
+ {#if item.bestRef.qualityScore != null}
+ &nbsp;({item.bestRef.qualityScore}/100)
+ {/if}
+ </span>
{/if}
</span>
</button>
@@ -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);
}
</style>
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 @@
<form class="add-form" method="POST" action="?/add" use:enhance>
<label>
- <span class="label">New category</span>
+ <span class="label">Nouvelle catégorie</span>
<input
type="text"
name="name"
bind:value={name}
- placeholder="e.g. Boissons"
+ placeholder="ex. Boissons"
autocomplete="off"
/>
</label>
- <button type="submit">Add</button>
+ <button type="submit">Ajouter</button>
</form>
{#if form?.error}
@@ -38,7 +38,7 @@
</form>
{#if (data?.categories?.length ?? 0) === 0}
- <p class="empty">No categories yet</p>
+ <p class="empty">Aucune catégorie</p>
{/if}
<style>
@@ -46,70 +46,108 @@
display: flex;
flex-direction: column;
gap: 0.5rem;
- margin-bottom: 1rem;
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ background: var(--surface);
+ border-radius: 0.75rem;
+ box-shadow: 0 1px 2px var(--shadow);
}
.add-form label {
display: flex;
flex-direction: column;
- gap: 0.25rem;
+ gap: 0.375rem;
}
.label {
font-size: 0.75rem;
- font-weight: 600;
+ font-weight: 700;
text-transform: uppercase;
- color: #999;
+ letter-spacing: 0.06em;
+ color: var(--text-secondary);
}
input {
- 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: var(--bg);
+ 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-form button[type='submit'] {
- padding: 0.75rem 1.25rem;
+ padding: 0.75rem 1.5rem;
border: none;
- border-radius: 0.5rem;
- background: #333;
+ border-radius: 0.75rem;
+ background: var(--accent);
color: #fff;
- font-size: 1rem;
+ font-size: 0.9375rem;
+ font-weight: 500;
align-self: flex-start;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 2px var(--shadow);
+ }
+
+ .add-form button[type='submit']:hover {
+ background: var(--accent-hover);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
}
.error {
- color: #d00;
- margin-top: -0.5rem;
- margin-bottom: 1rem;
+ color: var(--danger);
+ font-size: 0.875rem;
+ margin-top: -0.25rem;
+ margin-bottom: 0.5rem;
+ 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;
}
.catalog-item {
display: flex;
- gap: 0.25rem;
- height: 2rem;
+ gap: 0.5rem;
align-items: center;
+ padding: 0.5rem 0.75rem;
+ background: var(--surface);
+ border-radius: 0.75rem;
+ box-shadow: 0 1px 2px var(--shadow);
+ transition: all 0.2s ease;
+ }
+
+ .catalog-item:hover {
+ box-shadow: 0 2px 6px var(--shadow);
+ transform: translateY(-1px);
}
.cat-name {
flex-grow: 1;
- padding: 0 0.75rem;
+ font-weight: 500;
+ color: var(--text);
}
.delete-btn {
- border: 1px solid #e0e0e0;
- border-radius: 0.5rem;
- background: #fff;
- color: #d00;
- transition: background 0.15s;
+ border: none;
+ border-radius: 0.625rem;
+ background: transparent;
+ color: var(--text-secondary);
+ transition: all 0.2s ease;
width: 2rem;
aspect-ratio: 1;
padding: 0;
@@ -118,15 +156,22 @@
justify-content: center;
font-size: 1.25rem;
cursor: pointer;
+ flex-shrink: 0;
}
.delete-btn:hover {
- background: #fee;
+ background: rgba(217, 83, 79, 0.1);
+ color: var(--danger);
}
.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);
}
</style>
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 @@
<hr />
-<h2>References</h2>
+<h2>Références</h2>
<form class="add-form" method="POST" action="?/add" use:enhance>
<label>
- <span class="label">Reference</span>
+ <span class="label">Référence</span>
<input
type="text"
name="reference"
bind:value={reference}
- placeholder="e.g. Carte Noire"
+ placeholder="ex. Carte Noire"
autocomplete="off"
/>
</label>
<div class="ref-row">
<label>
- <span class="label">Price</span>
+ <span class="label">Prix</span>
<input
type="number"
name="price"
@@ -43,7 +43,7 @@
/>
</label>
<label>
- <span class="label">Unit</span>
+ <span class="label">Unité</span>
<select name="unit" bind:value={unit}>
<option value="€/kg">€/kg</option>
<option value="€/L">€/L</option>
@@ -51,18 +51,18 @@
</select>
</label>
<label>
- <span class="label">Score</span>
+ <span class="label">Note</span>
<input
type="number"
name="quality_score"
bind:value={qualityScore}
- placeholder="0-100"
+ placeholder="0–100"
min="0"
max="100"
/>
</label>
</div>
- <button type="submit">Add reference</button>
+ <button type="submit">Ajouter une référence</button>
</form>
{#if form?.error}
@@ -81,7 +81,7 @@
>
{/if}
{#if ref.qualityScore != null}
- <span class="ref-detail">Score: {ref.qualityScore}/100</span>
+ <span class="ref-detail">Note : {ref.qualityScore}/100</span>
{/if}
</div>
<button class="delete-btn" name="id" value={ref.id} type="submit">
@@ -93,81 +93,112 @@
</form>
{#if (data?.references?.length ?? 0) === 0}
- <p class="empty">No references yet</p>
+ <p class="empty">Aucune référence</p>
{/if}
<form method="POST" action="?/deleteItem" use:enhance>
- <button type="submit" class="delete-item-btn">Delete item</button>
+ <button type="submit" class="delete-item-btn">Supprimer l'article</button>
</form>
-<a href="/" class="back-link">&larr; Back to list</a>
+<a href="/" class="back-link">&larr; Retour à la liste</a>
<style>
.category {
- color: #999;
- font-size: 0.875rem;
+ color: var(--text-secondary);
+ font-size: 0.9375rem;
+ font-weight: 500;
+ margin-top: 0.25rem;
}
.add-form {
display: flex;
flex-direction: column;
- gap: 0.5rem;
- margin-bottom: 1rem;
- margin-top: 0.5rem;
+ gap: 0.75rem;
+ margin-bottom: 1.5rem;
+ margin-top: 0.75rem;
+ padding: 1rem;
+ background: var(--surface);
+ border-radius: 0.75rem;
+ box-shadow: 0 1px 2px var(--shadow);
}
.add-form label {
display: flex;
flex-direction: column;
- gap: 0.25rem;
+ gap: 0.375rem;
}
.label {
font-size: 0.75rem;
- font-weight: 600;
+ font-weight: 700;
text-transform: uppercase;
- color: #999;
+ letter-spacing: 0.06em;
+ color: var(--text-secondary);
}
input,
select {
- 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(--bg);
+ transition: border-color 0.2s, box-shadow 0.2s;
+ min-width: 0;
+ }
+
+ input:focus,
+ select:focus {
+ outline: none;
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
}
.ref-row {
display: flex;
- gap: 0.5rem;
+ gap: 0.75rem;
+ flex-wrap: wrap;
}
.ref-row label {
flex: 1;
- min-width: 0;
+ min-width: 6rem;
}
.add-form button[type='submit'] {
- padding: 0.75rem 1.25rem;
+ padding: 0.75rem 1.5rem;
border: none;
- border-radius: 0.5rem;
- background: #333;
+ border-radius: 0.75rem;
+ background: var(--accent);
color: #fff;
- font-size: 1rem;
+ font-size: 0.9375rem;
+ font-weight: 500;
align-self: flex-start;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 2px var(--shadow);
+ }
+
+ .add-form button[type='submit']:hover {
+ background: var(--accent-hover);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
}
.error {
- color: #d00;
- margin-top: -0.5rem;
- margin-bottom: 1rem;
+ color: var(--danger);
+ font-size: 0.875rem;
+ margin-top: -0.25rem;
+ margin-bottom: 0.5rem;
+ padding: 0.5rem 0.75rem;
+ background: rgba(217, 83, 79, 0.08);
+ border-radius: 0.5rem;
}
hr {
border: none;
- border-top: 1px solid #ddd;
+ border-top: 1.5px solid var(--border);
margin: 1.5rem 0;
}
@@ -175,17 +206,23 @@
list-style: none;
display: flex;
flex-direction: column;
- gap: 0.25rem;
+ gap: 0.5rem;
}
.ref-item {
display: flex;
align-items: center;
- gap: 0.5rem;
- padding: 0.75rem;
- border: 1px solid #e0e0e0;
- border-radius: 0.5rem;
- background: #fff;
+ gap: 0.75rem;
+ padding: 0.875rem 1rem;
+ border-radius: 0.75rem;
+ background: var(--surface);
+ box-shadow: 0 1px 2px var(--shadow);
+ transition: all 0.2s ease;
+ }
+
+ .ref-item:hover {
+ box-shadow: 0 2px 6px var(--shadow);
+ transform: translateY(-1px);
}
.ref-info {
@@ -197,8 +234,12 @@
}
.ref-detail {
- color: #666;
+ color: var(--text-secondary);
font-size: 0.875rem;
+ font-weight: 500;
+ background: var(--bg);
+ padding: 0.125rem 0.5rem;
+ border-radius: 0.375rem;
}
.delete-btn {
@@ -206,48 +247,65 @@
width: 2rem;
aspect-ratio: 1;
padding: 0;
- border: 1px solid #e0e0e0;
- border-radius: 0.5rem;
- background: #fff;
- color: #d00;
+ border: none;
+ border-radius: 0.625rem;
+ background: transparent;
+ color: var(--text-secondary);
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- transition: background 0.15s;
+ transition: all 0.2s ease;
}
.delete-btn:hover {
- background: #fee;
+ background: rgba(217, 83, 79, 0.1);
+ color: var(--danger);
}
.empty {
- color: #999;
- font-size: 0.875rem;
- margin-top: 0.5rem;
+ color: var(--text-secondary);
+ font-size: 0.9375rem;
+ margin-top: 0.75rem;
+ text-align: center;
+ padding: 1.5rem;
+ background: var(--surface);
+ border-radius: 0.75rem;
+ box-shadow: 0 1px 2px var(--shadow);
}
.back-link {
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.375rem;
margin-top: 1.5rem;
- color: #333;
+ color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
+ font-weight: 500;
+ transition: color 0.2s;
+ }
+
+ .back-link:hover {
+ color: var(--accent);
}
.delete-item-btn {
margin-top: 1.5rem;
- padding: 0.5rem 1rem;
- border: 1px solid #d00;
- border-radius: 0.5rem;
- background: #fff;
- color: #d00;
+ padding: 0.625rem 1.25rem;
+ border: 1.5px solid var(--danger);
+ border-radius: 0.75rem;
+ background: var(--surface);
+ color: var(--danger);
font-size: 0.875rem;
+ font-weight: 500;
cursor: pointer;
+ transition: all 0.2s ease;
}
.delete-item-btn:hover {
- background: #fee;
+ background: rgba(217, 83, 79, 0.08);
+ transform: translateY(-1px);
}
</style>
generated by cgit v1.3 (git 2.53.0) at 2026-10-18 22:48:55 +0000