add marker for unread messages

src/View/Components/chatEntry.tsx

@@ -5,10 +5,11 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 export function ChatEntry(chatViewModel: ChatViewModel) {
   const view = (
     <button
-      class="tile colored-tile"
+      class="tile colored-tile chat-entry"
       set:color={chatViewModel.settingsPageViewModel.color}
       style="height: 8rem"
       on:click={chatViewModel.open}
+      toggle:unread={chatViewModel.hasUnreadMessages}
     >
       <span
         class="shadow"

src/View/homePage.css

@@ -31,7 +31,9 @@
 
 #home-page #overview-section,
 #home-page #chat-section {
-  padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom));
+  padding-bottom: calc(
+    var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
+  );
 }
 
 #home-page #chat-grid {
@@ -43,6 +45,15 @@
   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }
 
+.chat-entry[unread] {
+  border: var(--outline-width) solid black;
+}
+
+.chat-entry[unread]:not(:hover):not(:active) {
+  background: rgb(255, 217, 0) !important;
+  color: black;
+}
+
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;