use better typescript

Author: aster-void

packages/client/src/components/app/ChatApp.svelte

@@ -5,10 +5,7 @@
   import Channel from "../channels/Channel.svelte";
   import ChannelList from "../channels/ChannelList.svelte";
   import Personalization from "../chat/Personalization.svelte";
-
-  type Selection =
-    | { type: "chat"; selectedChannelId: Id<"channels"> | undefined }
-    | { type: "personalization"; selectedChannelId: undefined };
+  import type { Selection } from "../chat/types.ts";
 
   interface Props {
     organizationId: Id<"organizations">;

packages/client/src/components/channels/ChannelList.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
   import { useQuery } from "convex-svelte";
+  import type { Selection } from "$components/chat/types";
   import CreateChannelButton from "./CreateChannelButton.svelte";
 
-  type Selection =
-    | { type: "chat"; selectedChannelId: Id<"channels"> | undefined }
-    | { type: "personalization"; selectedChannelId: undefined };
-
   interface Props {
     organizationId: Id<"organizations">;
     screenMode: Selection;
@@ -28,25 +25,21 @@
   <div class="flex-1 overflow-y-auto">
     {#if channels.data}
       {#each channels.data as channel (channel._id)}
-        <button
+        {@const active =
+          screenMode.type === "chat" &&
+          screenMode.selectedChannelId === channel._id}
+        <a
           class={[
-            "border-base-300 w-full border-b p-3 text-left",
-            screenMode.selectedChannelId === channel._id
-              ? "bg-primary text-primary-content"
-              : "hover:bg-base-300",
-          ].join(" ")}
-          onclick={() => {
-            screenMode = {
-              type: "chat",
-              selectedChannelId: channel._id as Id<"channels">,
-            };
-          }}
+            "border-base-300 block w-full border-b p-3 text-left",
+            active ? "bg-primary text-primary-content" : "hover:bg-base-300",
+          ]}
+          href={`/orgs/${organizationId}/chat/${channel._id}`}
         >
-          <div class="font-medium"># {channel.name}</div>
+          <span class="font-medium"># {channel.name}</span>
           {#if channel.description}
-            <div class="text-sm opacity-70">{channel.description}</div>
+            <span class="text-sm opacity-70">{channel.description}</span>
           {/if}
-        </button>
+        </a>
       {/each}
     {:else}
       <div class="text-base-content/60 p-4 text-center">
@@ -60,10 +53,8 @@
       </div>
     {/if}
   </div>
-  <button
+  <a
     class="btn btn-primary mt-auto mb-2 w-full"
-    onclick={() => {
-      screenMode = { type: "personalization", selectedChannelId: undefined };
-    }}>個人用設定</button
+    href={`/orgs/${organizationId}/personalization`}>個人用設定</a
   >
 </div>

packages/client/src/components/chat/types.ts

@@ -0,0 +1,6 @@
+import type { Id } from "@packages/convex";
+
+export type Selection =
+  | { type: "top" }
+  | { type: "chat"; selectedChannelId: Id<"channels"> }
+  | { type: "personalization" };

packages/client/src/routes/orgs/[orgId]/+page.svelte

@@ -6,7 +6,4 @@
   const orgId = $derived(page.params.orgId as Id<"organizations">);
 </script>
 
-<ChatApp
-  organizationId={orgId}
-  screenMode={{ type: "chat", selectedChannelId: undefined }}
-/>
+<ChatApp organizationId={orgId} screenMode={{ type: "top" }} />

packages/client/src/routes/orgs/[orgId]/personalization/+page.svelte

@@ -8,5 +8,5 @@
 
 <ChatApp
   organizationId={orgId as Id<"organizations">}
-  screenMode={{ type: "personalization", selectedChannelId: undefined }}
+  screenMode={{ type: "personalization" }}
 />