fix tabs, remove debugs

Author: LucHeart

src/routes/(authenticated)/shares/user/+layout.svelte

@@ -1,21 +1,32 @@
 <script lang="ts">
   import { Plus } from '@lucide/svelte';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
   import type { BasicUserInfo } from '$lib/api/internal/v1';
   import { Button } from '$lib/components/ui/button';
   import * as Tabs from '$lib/components/ui/tabs/index.js';
-  import {  refreshOwnHubs } from '$lib/stores/HubsStore';
+  import { refreshOwnHubs } from '$lib/stores/HubsStore';
   import { type Snippet, onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
   import DialogShareCodeCreate from './dialog-share-code-create.svelte';
   import DialogShareCodeCreated from './dialog-share-code-created.svelte';
-  import { goto } from '$app/navigation';
-  import { page } from '$app/state';
 
   let createDialogOpen = $state(false);
 
   let createdCode = $state<string | null>(null);
 
-  let tab = $derived(page.url.pathname.includes('outstanding') ? 'outstanding' : 'shares');
+  let tab = $derived(() => {
+    switch (page.url.pathname) {
+      case '/shares/user/outgoing':
+        return 'shares';
+      case '/shares/user/incoming':
+        return 'incoming';
+      case '/shares/user/outstanding':
+        return 'outstanding';
+      default:
+        return 'shares';
+    }
+  });
 
   let { children }: { children?: Snippet } = $props();
 
@@ -41,11 +52,15 @@
 
 <div class="h-full m-8 mt-4 flex flex-col gap-4">
   <div class="flex-none flex w-full">
-    <Tabs.Root value={tab} class="w-[400px]">
+    <Tabs.Root value={tab()} class="w-[400px]">
       <Tabs.List>
         <Tabs.Trigger value="shares" onclick={() => navigateTo('outgoing')}>Shares</Tabs.Trigger>
-        <Tabs.Trigger value="outstanding" onclick={() => navigateTo('outstanding')}>Outstanding Invites & Codes</Tabs.Trigger>
-        <Tabs.Trigger value="incoming" onclick={() => navigateTo('incoming')}>Shared with Me</Tabs.Trigger>
+        <Tabs.Trigger value="outstanding" onclick={() => navigateTo('outstanding')}
+          >Outstanding Invites & Codes</Tabs.Trigger
+        >
+        <Tabs.Trigger value="incoming" onclick={() => navigateTo('incoming')}
+          >Shared with Me</Tabs.Trigger
+        >
       </Tabs.List>
     </Tabs.Root>
 

src/routes/(authenticated)/shares/user/outgoing/+page.svelte

@@ -4,26 +4,17 @@
   import UserShareItem from './user-share-item.svelte';
   import LoadingCircle from '$lib/components/svg/LoadingCircle.svelte';
   import { UserShares, refreshUserShares } from '$lib/stores/UserSharesStore';
-  import { onMount } from 'svelte';
 
   let editShareDrawerOpen = $state(false);
   let editShareDrawerOpenCount = $state(0);
   let editIndex = $state(0);
-  let a = $state(0);
-
   let refreshPromise = $state(refreshUserShares())
 
   function openEditDrawer(userShareIndex: number) {
     editIndex = userShareIndex;
     editShareDrawerOpenCount += 1;
     editShareDrawerOpen = true;
   }
-
-  onMount(() => {
-    UserShares.subscribe((value) => {
-      console.log(value);
-    }); // logs '0'
-  });
 </script>
 
 {#key editShareDrawerOpenCount}
@@ -35,9 +26,6 @@
   {/if}
 {/key}
 
-<button onclick={() => a += 1}>aaa</button>
-
-{#key a}
 {#await refreshPromise}
 <div class="flex justify-center items-center h-full w-full">
 <LoadingCircle />
@@ -59,5 +47,4 @@
 {:catch error}
   <div class="text-red-500">Failed to load shares: {error.message}</div>
 {/await}
-{/key}