Re-add missing changes

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",

package.json

@@ -39,8 +39,5 @@
     "tslib": "^2.5.0",
     "typescript": "^5.0.2",
     "vite": "^4.1.0"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21"
   }
 }

src/app.scss

@@ -2,6 +2,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -80,20 +81,27 @@ $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;
 }
 
@@ -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 {
+    .delete-button {
-      display: block;
+      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;

src/lib/Sidebar.svelte

@@ -3,22 +3,30 @@
 
   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)
 
   $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
 
   function delChat (chatId) {
     if (activeChatId === chatId) {
-        // switch to another chat if deleting the active one
+    // Find the max chatId other than the current one
-        const newChatId = _.maxBy($chatsStorage.filter(chat => chat.id !== chatId), 'id')?.id
+      const newChatId = sortedChats.reduce((maxId, chat) => {
-        if (!newChatId) return
+        if (chat.id === chatId) return maxId
-        replace(`/chat/:${newChatId}`).then(() => deleteChat(chatId))
+        return Math.max(maxId, chat.id)
+      }, 0)
+
+      if (!newChatId) {
+        // No other chats, clear all and go to home
+        replace('/').then(() => { deleteChat(chatId) })
+      } else {
+        // Delete the current chat and go to the max chatId
+        replace(`/chat/${newChatId}`).then(() => { deleteChat(chatId) })
+      }
     } else {
       deleteChat(chatId)
     }
   }
-
 </script>
 
 <aside class="menu">
@@ -31,13 +39,10 @@
         <ul>
           {#each sortedChats as chat}
             <li>
-                            <a style="position: relative" href={`#/chat/${chat.id}`} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}
+              <a style="position: relative" href={`#/chat/${chat.id}`} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
-                            >{chat.name || `Chat ${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>
-                                <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">
+                {chat.name || `Chat ${chat.id}`}
-                                    <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"/>
+              </a>
-                                </svg>
-                            </a
-                            >
             </li>
           {/each}
         </ul>