Cleaner code in main app

src/App.svelte

@@ -6,10 +6,7 @@
   import Sidebar from './lib/Sidebar.svelte'
   import Footer from './lib/Footer.svelte'
 
-  import { apiKeyStorage, chatsStorage } from './lib/Storage.svelte'
+  import { apiKeyStorage } from './lib/Storage.svelte'
-
-  $: sortedChats = $chatsStorage.sort((a, b) => b.id - a.id)
-  $: apiKey = $apiKeyStorage
 
   // Check if the API key is passed in as a "key" query parameter - if so, save it
   const urlParams: URLSearchParams = new URLSearchParams(window.location.search)
@@ -24,7 +21,7 @@
   <div class="container is-fullhd">
     <div class="columns">
       <div class="column is-one-fifth">
-        <Sidebar bind:apiKey bind:sortedChats />
+        <Sidebar />
       </div>
       <div class="column is-four-fifths" id="content">
         {#key $location}

src/lib/Sidebar.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import { params, replace } from 'svelte-spa-router'
 
-  import { clearChats } from './Storage.svelte'
+  import { apiKeyStorage, chatsStorage, clearChats } from './Storage.svelte'
   import { exportAsMarkdown } from './Export.svelte'
-  import type { Chat } from './Types.svelte'
 
-  export let sortedChats: Chat[]
+  $: sortedChats = $chatsStorage.sort((a, b) => b.id - a.id)
-  export let apiKey: string
 
   $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
 </script>
@@ -15,13 +13,13 @@
   <p class="menu-label">Chats</p>
   <ul class="menu-list">
     {#if sortedChats.length === 0}
-      <li><a href={'#'}>No chats yet...</a></li>
+      <li><a href={'#'} class="is-disabled">No chats yet...</a></li>
     {:else}
       <li>
         <ul>
           {#each sortedChats as chat}
             <li>
-              <a href={`#/chat/${chat.id}`} class:is-disabled={!apiKey} class:is-active={activeChatId === chat.id}
+              <a href={`#/chat/${chat.id}`} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}
                 >{chat.name || `Chat ${chat.id}`}</a
               >
             </li>
@@ -33,12 +31,12 @@
   <p class="menu-label">Actions</p>
   <ul class="menu-list">
     <li>
-      <a href={'#/'} class="panel-block" class:is-disabled={!apiKey} class:is-active={!activeChatId}
+      <a href={'#/'} class="panel-block" class:is-disabled={!$apiKeyStorage} class:is-active={!activeChatId}
         ><span class="greyscale mr-2">🔑</span> API key</a
       >
     </li>
     <li>
-      <a href={'#/chat/new'} class="panel-block" class:is-disabled={!apiKey}
+      <a href={'#/chat/new'} class="panel-block" class:is-disabled={!$apiKeyStorage}
         ><span class="greyscale mr-2">➕</span> New chat</a
       >
     </li>
@@ -46,7 +44,7 @@
       <a
         href={'#/'}
         class="panel-block"
-        class:is-disabled={!apiKey}
+        class:is-disabled={!$apiKeyStorage}
         on:click={() => {
           replace('#/').then(() => {
             clearChats()
@@ -59,7 +57,7 @@
         <a
           href={'#/'}
           class="panel-block"
-          class:is-disabled={!apiKey}
+          class:is-disabled={!apiKeyStorage}
           on:click|preventDefault={() => {
             if (activeChatId) {
               exportAsMarkdown(activeChatId)