From aa521d5a19b368c12f74378becf6c89370c568db Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Mon, 6 Mar 2023 11:57:38 +0100
Subject: [PATCH] Use class directive

---
 src/lib/Home.svelte    |  4 ++--
 src/lib/Sidebar.svelte | 16 ++++++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/Home.svelte b/src/lib/Home.svelte
index 8a01c0f..68200db 100644
--- a/src/lib/Home.svelte
+++ b/src/lib/Home.svelte
@@ -17,7 +17,7 @@
     <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'}">
+<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
   <div class="message-body">
     Set your OpenAI API key below:
 
@@ -28,7 +28,7 @@
       }}
     >
       <p class="control is-expanded">
-        <input aria-label="OpenAI API key" type="password" class="input {!apiKey ? 'is-danger' : ''}" value={apiKey} />
+        <input aria-label="OpenAI API key" type="password" class="input" class:is-danger={!apiKey} value={apiKey} />
       </p>
       <p class="control">
         <button class="button is-info" type="submit">Save</button>
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 470576e..4a08aa2 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -19,9 +19,9 @@
             <li>
               <a
                 href={"#"}
-                class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId === chat.id
-                  ? 'has-background-light'
-                  : ''}"
+                class="panel-block"
+                class:is-disabled={!apiKey}
+                class:has-background-light={activeChatId === chat.id}
                 on:click|preventDefault={() => (activeChatId = chat.id)}>{chat.name || `Chat ${chat.id}`}</a
               >
             </li>
@@ -35,7 +35,9 @@
     <li>
       <a
         href={"#"}
-        class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId ? '' : 'has-background-light'}"
+        class="panel-block"
+        class:is-disabled={!apiKey}
+        class:has-background-light={!activeChatId}
         on:click|preventDefault={() => {
           activeChatId = null;
         }}><span class="greyscale mr-2">🔑</span> API key</a
@@ -44,7 +46,8 @@
     <li>
       <a
         href={"#"}
-        class="panel-block {!apiKey ? 'is-disabled' : ''}"
+        class="panel-block"
+        class:is-disabled={!apiKey}
         on:click|preventDefault={() => {
           activeChatId = addChat();
         }}><span class="greyscale mr-2">➕</span> New chat</a
@@ -53,7 +56,8 @@
     <li>
       <a
         href={"#"}
-        class="panel-block {!apiKey ? 'is-disabled' : ''}"
+        class="panel-block"
+        class:is-disabled={!apiKey}
         on:click|preventDefault={() => {
           clearChats();
           activeChatId = null;