From a8a1554a0f24cd3cbd43d98ed7bd5f13e46d73a2 Mon Sep 17 00:00:00 2001
From: Webifi <john@webifi.com>
Date: Thu, 1 Jun 2023 14:45:27 -0500
Subject: [PATCH] Add message icon to each chat item

---
 src/app.scss                | 20 ++++++++++++++++++--
 src/lib/ChatMenuItem.svelte |  7 ++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index dead100..c481321 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -59,6 +59,12 @@ html {
   
 }
 
+@media only screen and (max-width: 900px) and (min-width: 769px) {
+  .chat-menu-item .chat-icon {
+    display: none;
+  }  
+}
+
 @media only screen and (max-width: 768px) {
   .navbar {
     display: block !important;
@@ -213,6 +219,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 }
 
 /* Delete button on side menu chat name */
+
 .menu-list {
   a:hover {
     .delete-button {
@@ -220,8 +227,17 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
       background-color: initial;
     }
   }
+  .delete-button {
+    opacity: .8;
+  }
+  
+  .delete-button:hover {
+    opacity: 1;
+  }
 }
 
+
+
 /* Loading chat messages */
 .is-loading {
   opacity: 0.5;
@@ -277,7 +293,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 .chat-menu-item {
   position: relative;
 }
-.chat-menu-item span {
+.chat-menu-item .chat-item-name {
   display: block;
   white-space:nowrap;
   overflow: hidden;
@@ -429,6 +445,7 @@ aside.menu.main-menu .menu-expanse {
     }
   }
 }
+
 @media only screen and (max-width: 340px) {
   .section-footer {
     .author {
@@ -437,7 +454,6 @@ aside.menu.main-menu .menu-expanse {
   }
 }
 
-
 .content.running-total-container {
   min-height:1em;
   // padding-bottom:.6em;
diff --git a/src/lib/ChatMenuItem.svelte b/src/lib/ChatMenuItem.svelte
index 2d94c08..d4eeb93 100644
--- a/src/lib/ChatMenuItem.svelte
+++ b/src/lib/ChatMenuItem.svelte
@@ -4,6 +4,7 @@
   import { apiKeyStorage, deleteChat, pinMainMenu } from './Storage.svelte'
   import Fa from 'svelte-fa/src/fa.svelte'
   import { faTrash, faCircleCheck } from '@fortawesome/free-solid-svg-icons/index'
+  import { faMessage } from '@fortawesome/free-regular-svg-icons/index'
 
   export let chat:Chat
   export let activeChatId:number|undefined
@@ -39,10 +40,10 @@
 <li>
   <a class="chat-menu-item" href={`#/chat/${chat.id}`} on:click={() => { $pinMainMenu = false }} class:is-waiting={waitingForConfirm} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
     {#if waitingForConfirm}
-    <a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
+    <a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
     {:else}
-    <a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
+    <a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
     {/if}
-    <span>{chat.name || `Chat ${chat.id}`}</span>
+    <span class="chat-item-name"><Fa class="mr-2 chat-icon" size="xs" icon="{faMessage}"/>{chat.name || `Chat ${chat.id}`}</span>
   </a>
 </li>
\ No newline at end of file