Add mark all read

src/app/components/ChatMenuMobile.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ChatStart from "@app/components/ChatStart.svelte"
+  import {setChecked} from "@app/notifications"
+  import {pushModal} from "@app/modal"
+
+  const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
+
+  const markAsRead = () => {
+    setChecked("/chat/*")
+    history.back()
+  }
+</script>
+
+<div class="col-2">
+  <Button class="btn btn-primary" on:click={startChat}>
+    <Icon size={4} icon="add-circle" />
+    Start chat
+  </Button>
+  <Button class="btn btn-neutral" on:click={markAsRead}>
+    <Icon size={4} icon="check-circle" />
+    Mark all read
+  </Button>
+</div>

src/app/notifications.ts

@@ -36,7 +36,10 @@ export const notifications = derived(
       }
 
       for (const [entryPath, ts] of Object.entries($checked)) {
-        const isMatch = entryPath === "*" || entryPath.startsWith(path)
+        const isMatch =
+          entryPath === "*" ||
+          entryPath.startsWith(path) ||
+          (entryPath === "/chat/*" && path.startsWith("/chat/"))
 
         if (isMatch && ts > latestEvent.created_at) {
           return false

src/routes/chat/+page.svelte

@@ -6,6 +6,7 @@
   import ContentSearch from "@lib/components/ContentSearch.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
+  import ChatMenuMobile from "@app/components/ChatMenuMobile.svelte"
   import {chatSearch} from "@app/state"
   import {pushModal} from "@app/modal"
   import {setChecked} from "@app/notifications"
@@ -14,6 +15,8 @@
 
   const startChat = () => pushModal(ChatStart)
 
+  const openMenu = () => pushModal(ChatMenuMobile)
+
   $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
 
   onDestroy(() => {
@@ -41,8 +44,8 @@
       <Icon icon="magnifer" />
       <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
     </label>
-    <Button class="btn btn-primary" on:click={startChat}>
-      <Icon icon="add-circle" />
+    <Button class="btn btn-primary" on:click={openMenu}>
+      <Icon icon="menu-dots" />
     </Button>
   </div>
   <div slot="content" class="col-2">