From a75fb02ed809651bcec7e1997a23c5b1769cadbc Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Mon, 27 Mar 2023 15:41:25 +0200
Subject: [PATCH] Re-add missing changes

---
 package-lock.json      |   8 ---
 package.json           |   3 -
 src/app.scss           |  38 ++++++------
 src/lib/Sidebar.svelte | 133 +++++++++++++++++++++--------------------
 4 files changed, 87 insertions(+), 95 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2cd0ff7..8792273 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,6 @@
     "": {
       "name": "chatgpt-web",
       "version": "0.0.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "@microsoft/fetch-event-source": "^2.0.1",
@@ -3077,11 +3074,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index bd421bc..b6c1fb4 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,5 @@
     "tslib": "^2.5.0",
     "typescript": "^5.0.2",
     "vite": "^4.1.0"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21"
   }
 }
diff --git a/src/app.scss b/src/app.scss
index 3c51ecb..62acc7e 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -2,6 +2,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -51,7 +52,7 @@ a.is-disabled {
 }
 
 /* Swap the border on user messages to the other side */
-.user-message > .message-body {
+.user-message>.message-body {
   border-width: 0 4px 0 0 !important;
 }
 
@@ -80,25 +81,32 @@ $modal-content-width: 1000px;
 
 @keyframes pulse {
   0% {
-    background-color: initial; /* Default color */
+    background-color: initial;
+    /* Default color */
   }
+
   50% {
-    background-color: $danger; /* Red */
+    background-color: $danger;
+    /* Red */
   }
+
   100% {
-    background-color: initial /* Default color */
+    background-color: initial
+      /* Default color */
   }
 }
 
 /* Support for dark mode */
 $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove this once a new version of bulma-prefers-dark is released
 @import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass";
-.modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
+
+.modal-card-body {
+  // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
   background-color: $background-dark;
 }
 
 /* Support for copy code button */
-.code-block > button {
+.code-block>button {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
@@ -110,26 +118,16 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
   top: 1rem;
 }
 
+/* Delete button on side menu chat name */
 .menu-list {
   a:hover {
-    .delete-btn {
-      display: block;
+    .delete-button {
+      display: block !important;
+      background-color: initial;
     }
   }
 }
 
-.delete-btn {
-  display: none;
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  margin-right: 5px;
-
-}
-
 /* Loading chat messages */
 .is-loading {
   opacity: 0.5;
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 21c483c..c27310a 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -1,86 +1,91 @@
 <script lang="ts">
-    import { params, replace } from 'svelte-spa-router'
+  import { params, replace } from 'svelte-spa-router'
 
-    import { apiKeyStorage, chatsStorage, clearChats, deleteChat } from './Storage.svelte'
-    import { exportAsMarkdown } from './Export.svelte'
-    import _ from 'lodash'
-    $: sortedChats = $chatsStorage.sort((a, b) => b.id - a.id)
+  import { apiKeyStorage, chatsStorage, clearChats, deleteChat } from './Storage.svelte'
+  import { exportAsMarkdown } from './Export.svelte'
 
-    $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
+  $: sortedChats = $chatsStorage.sort((a, b) => b.id - a.id)
 
-    function delChat (chatId) {
-      if (activeChatId === chatId) {
-        // switch to another chat if deleting the active one
-        const newChatId = _.maxBy($chatsStorage.filter(chat => chat.id !== chatId), 'id')?.id
-        if (!newChatId) return
-        replace(`/chat/:${newChatId}`).then(() => deleteChat(chatId))
+  $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
+
+  function delChat (chatId) {
+    if (activeChatId === chatId) {
+    // Find the max chatId other than the current one
+      const newChatId = sortedChats.reduce((maxId, chat) => {
+        if (chat.id === chatId) return maxId
+        return Math.max(maxId, chat.id)
+      }, 0)
+
+      if (!newChatId) {
+        // No other chats, clear all and go to home
+        replace('/').then(() => { deleteChat(chatId) })
       } else {
-        deleteChat(chatId)
+        // Delete the current chat and go to the max chatId
+        replace(`/chat/${newChatId}`).then(() => { deleteChat(chatId) })
       }
+    } else {
+      deleteChat(chatId)
     }
-
+  }
 </script>
 
 <aside class="menu">
-    <p class="menu-label">Chats</p>
-    <ul class="menu-list">
-        {#if sortedChats.length === 0}
-            <li><a href={'#'} class="is-disabled">No chats yet...</a></li>
-        {:else}
+  <p class="menu-label">Chats</p>
+  <ul class="menu-list">
+    {#if sortedChats.length === 0}
+      <li><a href={'#'} class="is-disabled">No chats yet...</a></li>
+    {:else}
+      <li>
+        <ul>
+          {#each sortedChats as chat}
             <li>
-                <ul>
-                    {#each sortedChats as chat}
-                        <li>
-                            <a style="position: relative" href={`#/chat/${chat.id}`} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}
-                            >{chat.name || `Chat ${chat.id}`}
-                                <svg on:click={() => delChat(chat.id)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="delete-btn">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                </svg>
-                            </a
-                            >
-                        </li>
-                    {/each}
-                </ul>
+              <a style="position: relative" href={`#/chat/${chat.id}`} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
+                <a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat(chat.id)}>🗑️</a>
+                {chat.name || `Chat ${chat.id}`}
+              </a>
             </li>
-        {/if}
-    </ul>
-    <p class="menu-label">Actions</p>
-    <ul class="menu-list">
-        <li>
-            <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={!$apiKeyStorage}
-            ><span class="greyscale mr-2">➕</span> New chat</a
-            >
-        </li>
-        <li>
-            <a class="panel-block"
-               href="{'#/'}"
-               class:is-disabled={!$apiKeyStorage}
-               on:click|preventDefault={() => {
+          {/each}
+        </ul>
+      </li>
+    {/if}
+  </ul>
+  <p class="menu-label">Actions</p>
+  <ul class="menu-list">
+    <li>
+      <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={!$apiKeyStorage}
+        ><span class="greyscale mr-2">➕</span> New chat</a
+      >
+    </li>
+    <li>
+      <a class="panel-block"
+        href="{'#/'}"
+        class:is-disabled={!$apiKeyStorage}
+        on:click|preventDefault={() => {
           const confirmDelete = window.confirm('Are you sure you want to delete all your chats?')
           if (confirmDelete) {
             replace('#/').then(() => clearChats())
           }
         }}><span class="greyscale mr-2">🗑️</span> Clear chats</a
-            >
-        </li>
-        {#if activeChatId}
-            <li>
-                <a
-                        href={'#/'}
-                        class="panel-block"
-                        class:is-disabled={!apiKeyStorage}
-                        on:click|preventDefault={() => {
+      >
+    </li>
+    {#if activeChatId}
+      <li>
+        <a
+          href={'#/'}
+          class="panel-block"
+          class:is-disabled={!apiKeyStorage}
+          on:click|preventDefault={() => {
             if (activeChatId) {
               exportAsMarkdown(activeChatId)
             }
           }}><span class="greyscale mr-2">📥</span> Export chat</a
-                >
-            </li>
-        {/if}
-    </ul>
+        >
+      </li>
+    {/if}
+  </ul>
 </aside>