v0.1.8: Inventory quantity display/edit, pagination, iPhone safe area

Author: alexandrosnt

src/app.css

@@ -38,6 +38,7 @@ body {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
+	padding-top: env(safe-area-inset-top, 0px);
 }
 
 @keyframes gradientBG {

src/lib/components/ItemDetailSheet.svelte

@@ -29,6 +29,7 @@
 	let editCategoryId = $state(0);
 	let editSubcategoryId = $state(0);
 	let editPrice = $state('');
+	let editQuantity = $state(1);
 	let editNotes = $state('');
 	/** @type {Category[]} */
 	let categories = $state([]);
@@ -148,6 +149,7 @@
 		editCategoryId = displayItem.category_id;
 		editSubcategoryId = displayItem.subcategory_id ?? 0;
 		editPrice = displayItem.purchase_price != null ? String(displayItem.purchase_price) : '';
+		editQuantity = displayItem.quantity ?? 1;
 		editNotes = displayItem.notes ?? '';
 		categories = await getCategories();
 		if (displayItem.category_id) {
@@ -173,6 +175,7 @@
 				category_id: editCategoryId,
 				subcategory_id: editSubcategoryId > 0 ? editSubcategoryId : null,
 				purchase_price: editPrice ? Number(editPrice) : null,
+				quantity: editQuantity > 0 ? editQuantity : 1,
 				notes: editNotes || null
 			});
 			triggerRefresh();
@@ -300,6 +303,17 @@
 							/>
 						</div>
 
+						<div class="form-group">
+							<label for="edit-quantity">{t.addModal.quantity}</label>
+							<input
+								id="edit-quantity"
+								type="number"
+								min="1"
+								step="1"
+								bind:value={editQuantity}
+							/>
+						</div>
+
 						<div class="form-group">
 							<label for="edit-notes">{t.itemDetail.notes}</label>
 							<textarea

src/lib/db/queries.ts

@@ -602,6 +602,7 @@ export async function updateItem(
 		category_id: number;
 		subcategory_id: number | null;
 		purchase_price: number | null;
+		quantity: number;
 		notes: string | null;
 	}>
 ): Promise<void> {

src/lib/i18n/de.ts

@@ -13,6 +13,8 @@ const de = {
 		notes: 'Notizen',
 		items: 'Artikel',
 		total: 'gesamt',
+		showMore: 'Mehr anzeigen',
+		remaining: 'übrig',
 		done: 'erledigt',
 		viewAll: 'Alle anzeigen',
 		seeAll: 'Alle ansehen',

src/lib/i18n/en.ts

@@ -13,6 +13,8 @@ const en = {
 		notes: 'Notes',
 		items: 'items',
 		total: 'total',
+		showMore: 'Show more',
+		remaining: 'remaining',
 		done: 'done',
 		viewAll: 'View All',
 		seeAll: 'See All',

src/routes/inventory/+page.svelte

@@ -24,6 +24,8 @@
     let refresh = getRefreshSignal();
     let selectedStatus = $state('all');
     let searchQuery = $state('');
+    let pageSize = 20;
+    let visibleCount = $state(20);
     /** @type {import('$lib/db/queries').Item | null} */
     let selectedItem = $state(null);
 
@@ -102,6 +104,22 @@
         return result;
     });
 
+    let paginatedItems = $derived(filteredItems.slice(0, visibleCount));
+    let hasMore = $derived(filteredItems.length > visibleCount);
+
+    function showMore() {
+        visibleCount += pageSize;
+    }
+
+    // Reset pagination when filters change
+    $effect(() => {
+        searchQuery;
+        selectedCategoryId;
+        selectedSubcategoryId;
+        selectedStatus;
+        visibleCount = pageSize;
+    });
+
     let statusCounts = $derived.by(() => {
         const catItems = selectedCategoryId === 0 ? items : items.filter(i => i.category_id === selectedCategoryId);
         const counts = { all: catItems.length, active: 0, used_up: 0, decluttered: 0 };
@@ -236,7 +254,7 @@
         </div>
     {:else}
         <div class="items-list">
-            {#each filteredItems as item (item.id)}
+            {#each paginatedItems as item (item.id)}
                 {#if selectMode}
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -247,7 +265,7 @@
                                 <i class={item.category_icon ?? 'ri-box-3-line'}></i>
                             </div>
                             <div class="list-item-info">
-                                <h3 class="list-item-name">{item.name}</h3>
+                                <h3 class="list-item-name">{item.name}{#if item.quantity > 1} <span class="qty-badge">x{item.quantity}</span>{/if}</h3>
                                 <span class="list-item-sub">{item.subcategory_name || item.category_name}</span>
                             </div>
                             <div class="list-item-right">
@@ -275,7 +293,7 @@
                                 <i class={item.category_icon ?? 'ri-box-3-line'}></i>
                             </div>
                             <div class="list-item-info">
-                                <h3 class="list-item-name">{item.name}</h3>
+                                <h3 class="list-item-name">{item.name}{#if item.quantity > 1} <span class="qty-badge">x{item.quantity}</span>{/if}</h3>
                                 <span class="list-item-sub">{item.subcategory_name || item.category_name}</span>
                             </div>
                             <div class="list-item-right">
@@ -305,6 +323,11 @@
                 </div>
             {/each}
         </div>
+        {#if hasMore}
+            <button class="show-more-btn" onclick={showMore}>
+                {t.common.showMore} ({filteredItems.length - visibleCount} {t.common.remaining})
+            </button>
+        {/if}
     {/if}
 </main>
 
@@ -500,6 +523,15 @@
         margin: 0;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
+    .qty-badge {
+        font-size: 11px;
+        font-weight: 700;
+        color: white;
+        background: var(--accent-pink);
+        padding: 1px 6px;
+        border-radius: 50px;
+        vertical-align: middle;
+    }
     .list-item-sub {
         font-size: 11px; color: var(--text-soft);
         text-transform: uppercase; letter-spacing: 0.3px;
@@ -552,4 +584,23 @@
         color: var(--accent-pink);
         transform: scale(0.85);
     }
+    .show-more-btn {
+        width: 100%;
+        padding: 14px;
+        margin-top: 12px;
+        border: 1px dashed rgba(0, 0, 0, 0.12);
+        border-radius: var(--radius-s);
+        background: transparent;
+        font-family: 'Poppins', sans-serif;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--accent-pink);
+        cursor: pointer;
+        transition: 0.2s;
+        -webkit-tap-highlight-color: transparent;
+    }
+    .show-more-btn:active {
+        transform: scale(0.97);
+        background: rgba(255, 107, 129, 0.04);
+    }
 </style>