Greyscale emojis, better home

src/app.scss

@@ -17,6 +17,10 @@ a.is-disabled {
   opacity: 0.5;
 }
 
+.greyscale {
+  filter: grayscale(100%);
+}
+
 $footer-padding: 3rem 1.5rem;
 
 @import "/node_modules/bulma/bulma.sass";

src/lib/Chat.svelte

@@ -115,7 +115,7 @@
   class="button is-warning is-pulled-right"
   on:click={() => {
     clearMessages(chatId);
-  }}>🗑️ Clear messages</button
+  }}><span class="greyscale mr-2">🗑️</span> Clear messages</button
 >
 
 <p class="subtitle">Chat {chatId}</p>

src/lib/Home.svelte

@@ -52,15 +52,16 @@
     {/if}
   </div>
 </article>
-<article class="message is-info">
+{#if apiKey}
-  <div class="message-body">
+  <article class="message is-info">
-    <!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
+    <div class="message-body">
-    Select an existing chat on the sidebar, or
+      <!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
-    <a
+      Select an existing chat on the sidebar, or
-      class={!apiKey ? "is-disabled" : ""}
+      <a
-      on:click={() => {
+        on:click={() => {
-        activeChatId = addChat();
+          activeChatId = addChat();
-      }}>create a new chat</a
+        }}>create a new chat</a
-    >
+      >
-  </div>
+    </div>
-</article>
+  </article>
+{/if}

src/lib/Sidebar.svelte

@@ -12,7 +12,7 @@
   <p class="menu-label">Chats</p>
   <ul class="menu-list">
     {#if sortedChats.length === 0}
-      <a class="panel-block">No chats...</a>
+      <a class="panel-block">No chats yet...</a>
     {:else}
       <li>
         <ul>
@@ -34,12 +34,22 @@
   </ul>
   <p class="menu-label">Actions</p>
   <ul class="menu-list">
+    <li>
+      <a
+        class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId
+          ? ''
+          : 'has-background-light'}"
+        on:click={() => {
+          activeChatId = null;
+        }}><span class="greyscale mr-2">🔑</span> API key</a
+      >
+    </li>
     <li>
       <a
         class="panel-block {!apiKey ? 'is-disabled' : ''}"
         on:click={() => {
           activeChatId = addChat();
-        }}>➕ New chat</a
+        }}><span class="greyscale mr-2">➕</span> New chat</a
       >
     </li>
     <li>
@@ -48,15 +58,7 @@
         on:click={() => {
           clearChats();
           activeChatId = null;
-        }}>🗑️ Clear chats</a
+        }}><span class="greyscale mr-2">🗑️</span> Clear chats</a
-      >
-    </li>
-    <li>
-      <a
-        class="panel-block {!apiKey ? 'is-disabled' : ''}"
-        on:click={() => {
-          activeChatId = null;
-        }}>🔙 Back to home</a
       >
     </li>
   </ul>