Use class directive

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>

src/lib/Sidebar.svelte

@@ -19,9 +19,9 @@
             <li>
               <a
                 href={"#"}
-                class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId === chat.id
+                class="panel-block"
-                  ? 'has-background-light'
+                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;