From 23fbc24c6e2f5d5e6cd3173c9447cab6556dce22 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Fri, 3 Mar 2023 14:19:57 +0100
Subject: [PATCH] Greyscale emojis, better home

---
 src/app.scss           |  4 ++++
 src/lib/Chat.svelte    |  2 +-
 src/lib/Home.svelte    | 25 +++++++++++++------------
 src/lib/Sidebar.svelte | 24 +++++++++++++-----------
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 94dbd75..14243aa 100644
--- a/src/app.scss
+++ b/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";
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 2fe06fe..b280c55 100644
--- a/src/lib/Chat.svelte
+++ b/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>
diff --git a/src/lib/Home.svelte b/src/lib/Home.svelte
index e7395c1..9f76643 100644
--- a/src/lib/Home.svelte
+++ b/src/lib/Home.svelte
@@ -52,15 +52,16 @@
     {/if}
   </div>
 </article>
-<article class="message is-info">
-  <div class="message-body">
-    <!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
-    Select an existing chat on the sidebar, or
-    <a
-      class={!apiKey ? "is-disabled" : ""}
-      on:click={() => {
-        activeChatId = addChat();
-      }}>create a new chat</a
-    >
-  </div>
-</article>
+{#if apiKey}
+  <article class="message is-info">
+    <div class="message-body">
+      <!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
+      Select an existing chat on the sidebar, or
+      <a
+        on:click={() => {
+          activeChatId = addChat();
+        }}>create a new chat</a
+      >
+    </div>
+  </article>
+{/if}
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index ec93eac..abbaaaa 100644
--- a/src/lib/Sidebar.svelte
+++ b/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
-      >
-    </li>
-    <li>
-      <a
-        class="panel-block {!apiKey ? 'is-disabled' : ''}"
-        on:click={() => {
-          activeChatId = null;
-        }}>🔙 Back to home</a
+        }}><span class="greyscale mr-2">🗑️</span> Clear chats</a
       >
     </li>
   </ul>