sorting: its not working lol

package.json

@@ -39,7 +39,7 @@
     "globals": "^15.0.0",
     "jsdom": "^24.1.0",
     "postcss": "^8.4.38",
-    "svelte": "^5.0.0-next.166",
+    "svelte": "^5.0.0-next.182",
     "svelte-check": "^3.6.0",
     "tailwindcss": "^3.4.4",
     "tslib": "^2.4.1",

src/lib/components/StoragePlace.svelte

@@ -1,78 +1,137 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import Item from '$lib/components/item/Item.svelte'
-  import { type StoredItem } from '$lib/db'
-  import { type ItemStore } from '$lib/stores/item.svelte'
+  import type { SortBy, StoredItem } from '$lib/types'
+  import { sortBy } from '$lib/types'
+  import { itemStore } from '$lib/stores/item.svelte'
+  import { localDb } from '$lib/db'
 
   // Props
   type Props = {
-    storagePlaceName: string
-    items: ItemStore | null
+    storageName: string
   }
 
   const {
-    storagePlaceName,
-    items,
+    storageName,
   }: Props = $props()
 
   // State
-  let newItemName = $state('')
+  let newItemInput = $state('')
+  let sortOption = $state<SortBy>(localDb.storage.getSort(storageName))
+  let previousStorageName = storageName
+  const storageOps = $derived(itemStore.storage(storageName))
+
+  // Reactive declarations
+  $effect(() => {
+    if (localDb.storage.getSort(storageName) !== sortOption)
+      localDb.storage.setSort(storageName, sortOption)
+
+    untrack(() => storageOps.sortItems(sortOption))
+  })
 
   // Methods
-  function addItem() {
-    if (items)
-      items.add(newItemName)
-    newItemName = ''
+  function inputItem() {
+    if (newItemInput === '')
+      return
+
+    let name = newItemInput
+    let quantity = 1
+
+    const itemList = newItemInput.split(' ')
+    if (itemList.length > 1 && itemList[0].match(/^\d+$/)) {
+      name = newItemInput.slice(itemList[0].length).trim()
+      quantity = Number(itemList[0])
+    }
+    storageOps.addItem({ name, quantity })
+    sortOption = 'none'
+    newItemInput = ''
   }
 
   // Handlers
   function handleInputKeypress(event: KeyboardEvent) {
     if (event.key === 'Enter')
-      addItem()
+      inputItem()
+  }
+
+  function handleSort() {
+    storageOps.sortItems(sortOption)
+  }
+
+  function handleEnter(event: KeyboardEvent) {
+    if (event.key !== 'Enter')
+      return
+
+    const target = event.target as HTMLElement
+    event.preventDefault()
+    itemStore.updateStorage(previousStorageName, target.textContent || '')
+    localDb.storage.rename(previousStorageName, target.textContent || '')
+    previousStorageName = target.textContent || ''
+    target.blur()
   }
 </script>
 
 <div
   class="rounded-sm border m-3 inline-block h-fit min-w-80 max-w-[420px] border-black p-1"
   role="tree"
 >
-  <h1 class="font-bold">{storagePlaceName}
-    {#if items} <span class="text-stone-400">({items.list.length})</span> {/if}
-  </h1>
-  {#if items}
-    {@const store = items}
-    <div role="group">
-      {#each items.list as item, i (item.id)}
-        <Item
-          bind:item={items.list[i]}
-          isSelected={items.selected === i}
-          onSelected={(amount = 0) => {
-            store.select(i + amount)
-          }}
-          onDelete={() => {
-            store.delete(item.id)
-          }}
-          onUpdate={(updatedItem: StoredItem) => {
-            store.update(item.id, updatedItem)
-          }}
-        />
-      {/each}
+  <div class="flex w-full justify-between items-center ">
+    <h1>
+      <span
+        contenteditable
+        role="textbox"
+        aria-multiline="false"
+        tabindex="0"
+        onkeydown={handleEnter}
+      >
+        <b>{storageName}</b>
+      </span>
+      <span class="text-stone-400">({itemStore.itemCounts[storageName]})</span>
+    </h1>
+
+    <div class="flex items-center">
+      <span class="text-sm italic text-stone-500 mr-1">sort:</span>
+      <select
+        class="text-sm py-1 my-1 italic text-stone-500"
+        bind:value={sortOption}
+        onchange={handleSort}
+      >
+        {#each sortBy as sort}
+          <option value={sort} hidden={sort === 'none'}>{sort}</option>
+        {/each}
+      </select>
     </div>
-    {#if items.list.length === 0}
-      <div class="text-stone-400">Nothing in the {storagePlaceName}.</div>
-    {/if}
-  {:else}
-    <p class="text-stone-400">Loading...</p>
+
+  </div>
+  <div role="group">
+    {#each itemStore.items[storageName] as item, i (item.id)}
+      <Item
+        bind:item={itemStore.items[storageName][i]}
+        isSelected={itemStore.selected.storage === storageName && itemStore.selected.index === i}
+        onSelected={(amount = 0) => {
+          itemStore.selectItem(storageName, i + amount)
+        }}
+        onDelete={() => {
+          storageOps.deleteItem(item.id)
+        }}
+        onUpdate={(updatedItem: StoredItem) => {
+          storageOps.updateItem(updatedItem)
+        }}
+      />
+    {/each}
+  </div>
+  {#if itemStore.itemCounts[storageName] === 0}
+    <div class="text-stone-400">Nothing in the {storageName}.</div>
   {/if}
   <input
     class="rounded-sm border border-black px-1 transition mt-5 outline-emerald-600 placeholder:text-stone-400 placeholder:italic placeholder:text-sm"
-    bind:value={newItemName}
+    bind:value={newItemInput}
     onkeypress={handleInputKeypress}
     maxlength="20"
     placeholder="Add a new item..."
   />
   <button
-    class="transition hover:font-bold hover:text-emerald-600"
-    onclick={addItem}
+    class="transition hover:font-bold hover:text-emerald-700"
+    onclick={inputItem}
   >
     +
   </button>

src/lib/components/item/Item.svelte

@@ -36,10 +36,8 @@
   // DOM nodes
   let itemDiv: HTMLDivElement
   let itemNameInput: HTMLSpanElement
-  let itemQuantityInput: HTMLInputElement
   let childrenDiv: HTMLDivElement
   let dateAddedInput: HTMLInputElement
-  let shelfLifeInput: HTMLInputElement
 
   // Reactive declarations
   const daysTilSpoil = $derived(
@@ -229,7 +227,6 @@
   <div class="flex justify-between">
     <span>
       <input
-        bind:this={itemQuantityInput}
         bind:value={item.quantity}
         type="number"
         min="0"
@@ -271,11 +268,12 @@
             : ' text-stone-400'}">{dayjs(item.dateAdded).fromNow()}
       </span>
       <button
-        class="transition items-end hover:text-red-600"
+        class="transition items-end text-stone-600 hover:text-red-600"
         onclick={() => {
           onDelete()
         }}
-      >delete
+      >
+        <span title="delete" class="icon tabler--x" aria-hidden="true"></span>
       </button>
     </span>
   </div>
@@ -303,7 +301,6 @@
     <div role="treeitem" aria-selected="false">
       Edit shelf life:
       <input
-        bind:this={shelfLifeInput}
         type="number"
         class="border-1 max-w-12 border border-dashed border-stone-400 text-center always-display-spinner sm mb-1 ml-3 w-fit rounded"
         bind:value={draftShelfLife}

src/lib/components/item/Item.test.ts

@@ -43,11 +43,11 @@ describe('the Item component', () => {
   })
 
   it('renders correctly', () => {
-    const { getByText, getByDisplayValue } = component
+    const { getByText, getByDisplayValue, getByTitle } = component
 
     expect(getByText(/Test Item/)).toBeTruthy()
     expect(getByDisplayValue('2')).toBeTruthy()
-    expect(getByText('delete')).toBeTruthy()
+    expect(getByTitle('delete')).toBeTruthy()
   })
 
   it('increases quantity on right arrow key press', async () => {
@@ -76,9 +76,9 @@ describe('the Item component', () => {
   })
 
   it('calls deleteItem when delete button is clicked', async () => {
-    const { getByText } = component
+    const { getByTitle } = component
 
-    await fireEvent.click(getByText('delete'))
+    await fireEvent.click(getByTitle('delete'))
     expect(mockDeleteItem).toHaveBeenCalledOnce()
   })
 })

src/lib/db.ts

@@ -1,13 +1,5 @@
 import Dexie, { type Table } from 'dexie'
-
-export interface StoredItem {
-  id: string
-  name: string
-  quantity: number
-  dateAdded: string
-  storage: string
-  shelfLife: number
-}
+import type { SortBy, StoredItem } from './types'
 
 export interface CommonItem {
   id: string
@@ -37,4 +29,57 @@ class FoodInventoryDatabase extends Dexie {
   }
 }
 
+type SortStorage = {
+  storage: string
+  sortBy: SortBy
+}[]
+
+class LocalStorageDatabase {
+  private getTable<T>(tableName: string): T {
+    const tableJson = localStorage.getItem(tableName)
+    return tableJson ? JSON.parse(tableJson) : []
+  }
+
+  private setTable<T>(tableName: string, data: T) {
+    localStorage.setItem(tableName, JSON.stringify(data))
+  }
+
+  constructor() {
+    if (!localStorage.getItem('sortOptions'))
+      this.setTable<SortStorage>('sortOptions', [])
+  }
+
+  public storage = {
+    add: (storage: string) => {
+      const sortOptions = this.getTable<SortStorage>('sortOptions')
+      sortOptions.push({ storage, sortBy: 'none' })
+      this.setTable('sortOptions', sortOptions)
+    },
+    getSort: (storage: string) => {
+      const sortOptions = this.getTable<SortStorage>('sortOptions')
+      const storageSort = sortOptions.find(sort => sort.storage === storage)
+      return storageSort ? storageSort.sortBy : 'none'
+    },
+    setSort: (storage: string, sortBy: SortBy) => {
+      const sortOptions = this.getTable<SortStorage>('sortOptions')
+      const storageSort = sortOptions.find(sort => sort.storage === storage)
+      if (storageSort)
+        storageSort.sortBy = sortBy
+      else
+        sortOptions.push({ storage, sortBy })
+
+      this.setTable('sortOptions', sortOptions)
+    },
+    rename: (oldName: string, newName: string) => {
+      const sortOptions = this.getTable<SortStorage>('sortOptions')
+      const storageSort = sortOptions.find(sort => sort.storage === oldName)
+      if (storageSort)
+        storageSort.storage = newName
+
+      this.setTable('sortOptions', sortOptions)
+    },
+  }
+}
+
 export const db = new FoodInventoryDatabase()
+export const localDb = new LocalStorageDatabase()