Linting (width 120)

src/lib/Chat.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
   //import { fetchEventSource } from "@microsoft/fetch-event-source";
 
-  import {
+  import { apiKeyStorage, chatsStorage, addMessage, clearMessages } from "./Storage.svelte";
-    apiKeyStorage,
-    chatsStorage,
-    addMessage,
-    clearMessages,
-  } from "./Storage.svelte";
   import type { Message } from "./Types.svelte";
 
   import { marked } from "marked";
@@ -135,13 +130,9 @@
         {@html marked(message.content)}
         {#if message.usage}
           <p class="is-size-7">
-            This message was generated using <span class="has-text-weight-bold"
+            This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
-              >{message.usage.total_tokens}</span
-            >
             tokens ~=
-            <span class="has-text-weight-bold"
+            <span class="has-text-weight-bold">${(message.usage.total_tokens * token_price).toFixed(6)}</span>
-              >${(message.usage.total_tokens * token_price).toFixed(6)}</span
-            >
           </p>
         {/if}
       </div>

src/lib/Home.svelte

@@ -8,26 +8,13 @@
 
 <article class="message">
   <div class="message-body">
-    <strong
+    <strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong>
-      ><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong
+    is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
-    >
+    <a href="https://platform.openai.com/account/api-key" target="_blank" rel="noreferrer">an OpenAI API key</a>
-    is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you
+    first. OpenAI bills per token (usage-based), which means it is a lot cheaper than
-    need to register for
+    <a href="https://openai.com/blog/chatgpt-plus" target="_blank" rel="noreferrer">ChatGPT Plus</a>, unless you use
-    <a
+    more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is
-      href="https://platform.openai.com/account/api-key"
+    <strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
-      target="_blank"
-      rel="noreferrer">an OpenAI API key</a
-    >
-    first. OpenAI bills per token (usage-based), which means it is a lot cheaper
-    than
-    <a
-      href="https://openai.com/blog/chatgpt-plus"
-      target="_blank"
-      rel="noreferrer">ChatGPT Plus</a
-    >, unless you use more than 10 million tokens per month. All messages are
-    stored in your browser's local storage, so everything is
-    <strong>private</strong>. You can also close the browser tab and come back
-    later to continue the conversation.
   </div>
 </article>
 <article class="message {!apiKey ? 'is-danger' : 'is-warning'}">
@@ -41,12 +28,7 @@
       }}
     >
       <p class="control is-expanded">
-        <input
+        <input aria-label="OpenAI API key" type="text" class="input {!apiKey ? 'is-danger' : ''}" value={apiKey} />
-          aria-label="OpenAI API key"
-          type="text"
-          class="input {!apiKey ? 'is-danger' : ''}"
-          value={apiKey}
-        />
       </p>
       <p class="control">
         <button class="button is-info" type="submit">Save</button>
@@ -54,9 +36,7 @@
     </form>
 
     {#if !apiKey}
-      <p class="help is-danger">
+      <p class="help is-danger">Please enter your OpenAI API key above to use ChatGPT-web</p>
-        Please enter your OpenAI API key above to use ChatGPT-web
-      </p>
     {/if}
   </div>
 </article>

src/lib/Sidebar.svelte

@@ -19,13 +19,10 @@
             <li>
               <a
                 href={"#"}
-                class="panel-block {!apiKey
+                class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId === chat.id
-                  ? 'is-disabled'
-                  : ''} {activeChatId === chat.id
                   ? 'has-background-light'
                   : ''}"
-                on:click|preventDefault={() => (activeChatId = chat.id)}
+                on:click|preventDefault={() => (activeChatId = chat.id)}>Chat {chat.id}</a
-                >Chat {chat.id}</a
               >
             </li>
           {/each}
@@ -38,9 +35,7 @@
     <li>
       <a
         href={"#"}
-        class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId
+        class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId ? '' : 'has-background-light'}"
-          ? ''
-          : 'has-background-light'}"
         on:click|preventDefault={() => {
           activeChatId = null;
         }}><span class="greyscale mr-2">🔑</span> API key</a

src/lib/Storage.svelte

@@ -10,8 +10,7 @@
     const chats = get(chatsStorage);
 
     // Find the max chatId
-    const chatId =
+    const chatId = chats.reduce((maxId, chat) => Math.max(maxId, chat.id), 0) + 1;
-      chats.reduce((maxId, chat) => Math.max(maxId, chat.id), 0) + 1;
 
     // Add a new chat
     chats.push({