Added hash-based routing using svelte-spa-router

src/App.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import Router, {location} from 'svelte-spa-router';
+  import routes from "./routes";
+
   import Navbar from "./lib/Navbar.svelte";
   import Sidebar from "./lib/Sidebar.svelte";
   import Home from "./lib/Home.svelte";
@@ -15,8 +18,6 @@
   if (urlParams.has("key")) {
     apiKeyStorage.set(urlParams.get("key")!);
   }
-
-  let activeChatId: number;
 </script>
 
 <Navbar />
@@ -25,14 +26,12 @@
   <div class="container is-fullhd">
     <div class="columns">
       <div class="column is-one-fifth">
-        <Sidebar bind:apiKey bind:sortedChats bind:activeChatId />
+          <Sidebar bind:apiKey bind:sortedChats />
       </div>
       <div class="column is-four-fifths">
-        {#if activeChatId}
-          <Chat bind:chatId={activeChatId} />
-        {:else}
-          <Home bind:activeChatId />
-        {/if}
+        {#key $location}
+          <Router {routes}/>
+        {/key}
       </div>
     </div>
   </div>

src/lib/Chat.svelte

@@ -6,9 +6,11 @@
   import Code from "./Code.svelte";
 
   import { afterUpdate, onMount } from "svelte";
+  import { replace } from 'svelte-spa-router'
   import SvelteMarkdown from "svelte-markdown";
 
-  export let chatId: number;
+  export let params = {};
+  let chatId: number = parseInt(params.chatId);
   let updating: boolean = false;
 
   let input: HTMLTextAreaElement;
@@ -229,8 +231,9 @@
 
   const deleteChat = () => {
     if (confirm("Are you sure you want to delete this chat?")) {
-      chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
-      chatId = null;
+      replace('/').then(() => {
+        chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
+      });
     }
   };
 

src/lib/Home.svelte

@@ -2,8 +2,6 @@
   import { addChat, apiKeyStorage } from "./Storage.svelte";
 
   $: apiKey = $apiKeyStorage;
-
-  export let activeChatId: number;
 </script>
 
 <article class="message">
@@ -54,12 +52,7 @@
   <article class="message is-info">
     <div class="message-body">
       Select an existing chat on the sidebar, or
-      <a
-        href={"#"}
-        on:click|preventDefault={() => {
-          activeChatId = addChat();
-        }}>create a new chat</a
-      >
+      <a href={"#/chat/new"}>create a new chat</a>
     </div>
   </article>
 {/if}

src/lib/Navbar.svelte

@@ -4,7 +4,7 @@
 
 <nav class="navbar" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-item" href={"#"} on:click|preventDefault={() => (window.location = window.location)}>
+    <a class="navbar-item" href={"#/"}>
       <img src={logo} alt="ChatGPT-web" width="28" height="28" />
       <p class="ml-2 is-size-4 has-text-weight-bold">ChatGPT-web</p>
     </a>

src/lib/NewChat.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { addChat } from "./Storage.svelte";
+  import { replace } from 'svelte-spa-router'
+
+  // Create the new chat instance then redirect to it
+  const chatId = addChat();
+  replace(`/chat/${chatId}`);
+</script>

src/lib/Sidebar.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import {params, replace} from 'svelte-spa-router';
+
   import { addChat, clearChats } from "./Storage.svelte";
   import { exportAsMarkdown } from "./Export.svelte";
   import type { Chat } from "./Types.svelte";
 
-  export let activeChatId: number;
   export let sortedChats: Chat[];
   export let apiKey: string;
+
+  $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined;
 </script>
 
 <aside class="menu">
@@ -19,10 +22,9 @@
           {#each sortedChats as chat}
             <li>
               <a
-                href={"#"}
+                href={`#/chat/${chat.id}`}
                 class:is-disabled={!apiKey}
-                class:is-active={activeChatId === chat.id}
-                on:click|preventDefault={() => (activeChatId = chat.id)}>{chat.name || `Chat ${chat.id}`}</a
+                class:is-active={activeChatId === chat.id}>{chat.name || `Chat ${chat.id}`}</a
               >
             </li>
           {/each}
@@ -34,40 +36,35 @@
   <ul class="menu-list">
     <li>
       <a
-        href={"#"}
+        href={"#/"}
         class="panel-block"
         class:is-disabled={!apiKey}
-        class:is-active={!activeChatId}
-        on:click|preventDefault={() => {
-          activeChatId = null;
-        }}><span class="greyscale mr-2">🔑</span> API key</a
+        class:is-active={!activeChatId}><span class="greyscale mr-2">🔑</span> API key</a
       >
     </li>
     <li>
       <a
-        href={"#"}
+        href={"#/chat/new"}
         class="panel-block"
-        class:is-disabled={!apiKey}
-        on:click|preventDefault={() => {
-          activeChatId = addChat();
-        }}><span class="greyscale mr-2">➕</span> New chat</a
+        class:is-disabled={!apiKey}><span class="greyscale mr-2">➕</span> New chat</a
       >
     </li>
     <li>
       <a
-        href={"#"}
+        href={"#/"}
         class="panel-block"
         class:is-disabled={!apiKey}
-        on:click|preventDefault={() => {
-          clearChats();
-          activeChatId = null;
+        on:click={() => {
+          replace('#/').then(() => {
+            clearChats();
+          });
         }}><span class="greyscale mr-2">🗑️</span> Clear chats</a
       >
     </li>
     {#if activeChatId}
       <li>
         <a
-          href={"#"}
+          href={"#/"}
           class="panel-block"
           class:is-disabled={!apiKey}
           on:click|preventDefault={() => {

src/routes.ts

@@ -0,0 +1,12 @@
+import Home from "./lib/Home.svelte";
+import Chat from "./lib/Chat.svelte";
+import NewChat from "./lib/NewChat.svelte";
+
+export default {
+    '/': Home,
+
+    '/chat/new': NewChat,
+    '/chat/:chatId': Chat,
+
+    '*': Home,
+};