fix bug

package.json

@@ -18,7 +18,8 @@
     "firebase-admin": "^11.11.0",
     "flowbite-svelte": "^0.44.17",
     "luxon": "^3.4.1",
-    "svelte-french-toast": "^1.2.0"
+    "svelte-french-toast": "^1.2.0",
+    "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
     "@smui/data-table": "^7.0.0-beta.15",

src/lib/components/Drawer.svelte

@@ -3,7 +3,8 @@
   import List, {Item, Text} from '@smui/list'
   import {goto} from '$app/navigation'
   import {AdminTable} from './index'
-
+  import {selectedEventId} from '$lib/store'
+  import {twMerge} from 'tailwind-merge'
   export let events: DB.Event[]
   export let ticketValue: Map<string, DB.Ticket>
 </script>
@@ -16,7 +17,10 @@
           <button on:click={() => goto(`/admin/dashboard?eventId=${event.id}`)}>
             <Item
               id="event-title"
-              class="flex p-2 cursor-pointer bg-gray-100 hover:bg-gray-300 ease-in-out duration-200 rounded hover:font-semibold">
+              class={twMerge(
+                'flex p-2 cursor-pointer bg-gray-100 hover:bg-gray-300 ease-in-out duration-200 rounded hover:font-semibold',
+                event.id === $selectedEventId && 'bg-purple-300'
+              )}>
               <Text class="text-start">{event.title}</Text>
             </Item>
           </button>

src/lib/store/index.ts

@@ -31,11 +31,12 @@ function handleQuerySnapshot<T extends DocumentData>(
 
 function deriveStoreFromQuery<V, T extends DocumentData>(
   stores: Parameters<typeof derived>[0],
-  getQuery: (value: V) => Query
+  getQuery: (value: V) => Query | null
 ) {
-  return derived(stores, ($stores, set) =>
-    handleQuerySnapshot<T>(getQuery($stores), set)
-  ) as Readable<Map<string, T>>
+  return derived(stores, ($stores, set) => {
+    const q = getQuery($stores)
+    q ? handleQuerySnapshot<T>(q, set) : q
+  }) as Readable<Map<string, T>>
 }
 
 function handleDocSnapshot<T extends DocumentData>(
@@ -61,11 +62,13 @@ export const selectedEventId = writable<string>()
 export const ticketValue = deriveStoreFromQuery<string, DB.Ticket>(
   selectedEventId,
   ($selectedEventId) =>
-    query(
-      collection(db, 'Tickets'),
-      where('eventId', '==', $selectedEventId),
-      orderBy('createdAt', 'desc')
-    )
+    $selectedEventId
+      ? query(
+          collection(db, 'Tickets'),
+          where('eventId', '==', $selectedEventId),
+          orderBy('createdAt', 'desc')
+        )
+      : null
 )
 export const selectedTicket = {
   // State

yarn.lock

@@ -4142,7 +4142,7 @@ svg.select.js@^3.0.1:
 
 tailwind-merge@^1.14.0:
   version "1.14.0"
-  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
 tailwindcss@^3.3.3: