mark all as read for all chats in a scope

frontend/app/src/components/home/ChatList.svelte

@@ -16,6 +16,7 @@
         chatIdentifiersEqual,
         emptyCombinedUnreadCounts,
         chatIdentifierToString,
+        type CombinedUnreadCounts,
     } from "openchat-client";
     import { afterUpdate, beforeUpdate, createEventDispatcher, getContext, tick } from "svelte";
     import SearchResult from "./SearchResult.svelte";
@@ -102,12 +103,24 @@
         }
     }
 
+    $: canMarkAllRead = anythingUnread(unreadCounts);
+
     $: {
         if (view === "threads" && searchTerm !== "") {
             view = "chats";
         }
     }
 
+    function anythingUnread(unread: CombinedUnreadCounts): boolean {
+        return (
+            unread.chats.muted +
+                unread.chats.unmuted +
+                unread.threads.muted +
+                unread.threads.unmuted >
+            0
+        );
+    }
+
     function cancelPreview() {
         if ($selectedCommunity) {
             client.removeCommunity($selectedCommunity.id);
@@ -198,19 +211,25 @@
         const scrollTop = view === "chats" ? chatsScrollTop : 0;
         tick().then(() => (chatListElement.scrollTop = scrollTop));
     }
+
+    function markAllRead() {
+        client.markAllReadForCurrentScope();
+    }
 </script>
 
 <!-- svelte-ignore missing-declaration -->
 {#if user}
     {#if $chatListScope.kind === "favourite"}
-        <FavouriteChatsHeader />
+        <FavouriteChatsHeader on:markAllRead={markAllRead} {canMarkAllRead} />
     {:else if $chatListScope.kind === "group_chat"}
-        <GroupChatsHeader on:newGroup />
+        <GroupChatsHeader on:markAllRead={markAllRead} {canMarkAllRead} on:newGroup />
     {:else if $chatListScope.kind === "direct_chat"}
-        <DirectChatsHeader />
+        <DirectChatsHeader on:markAllRead={markAllRead} {canMarkAllRead} />
     {:else if $selectedCommunity && $chatListScope.kind === "community"}
         <SelectedCommunityHeader
             community={$selectedCommunity}
+            {canMarkAllRead}
+            on:markAllRead={markAllRead}
             on:leaveCommunity
             on:deleteCommunity
             on:editCommunity

frontend/app/src/components/home/communities/CommunityMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import MenuIcon from "../../MenuIcon.svelte";
     import HoverIcon from "../../HoverIcon.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
     import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
     import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
     import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
@@ -21,6 +22,7 @@
     const client = getContext<OpenChat>("client");
 
     export let community: CommunitySummary;
+    export let canMarkAllRead: boolean;
 
     const dispatch = createEventDispatcher();
 
@@ -53,6 +55,10 @@
         dispatch("communityDetails", community);
     }
 
+    function markAllRead() {
+        dispatch("markAllRead");
+    }
+
     function newChannel() {
         canCreateChannel && dispatch("newChannel");
     }
@@ -115,6 +121,13 @@
                         ><Translatable resourceKey={i18nKey("communities.createChannel")} /></span>
                 </MenuItem>
             {/if}
+            <MenuItem disabled={!canMarkAllRead} on:click={markAllRead}>
+                <CheckboxMultipleMarked
+                    size={$iconSize}
+                    color={"var(--icon-inverted-txt)"}
+                    slot="icon" />
+                <span slot="text"><Translatable resourceKey={i18nKey("markAllRead")} /></span>
+            </MenuItem>
             {#if member}
                 <MenuItem separator />
                 {#if canDelete}

frontend/app/src/components/home/communities/DirectChatsHeader.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
+    import Kebab from "svelte-material-icons/DotsVertical.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
     import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
     import SectionHeader from "../../SectionHeader.svelte";
     import { iconSize } from "../../../stores/iconSize";
     import Translatable from "../../Translatable.svelte";
     import { i18nKey } from "../../../i18n/i18n";
+    import MenuIcon from "../../MenuIcon.svelte";
+    import HoverIcon from "../../HoverIcon.svelte";
+    import Menu from "../../Menu.svelte";
+    import MenuItem from "../../MenuItem.svelte";
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let canMarkAllRead: boolean;
 </script>
 
 <SectionHeader slim border={false}>
@@ -14,6 +25,29 @@
         <div class="details">
             <h4 class="name"><Translatable resourceKey={i18nKey("communities.directChats")} /></h4>
         </div>
+        <span class="menu">
+            <MenuIcon position="bottom" align="end">
+                <span slot="icon">
+                    <HoverIcon>
+                        <Kebab size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                </span>
+                <span slot="menu">
+                    <Menu>
+                        <MenuItem
+                            disabled={!canMarkAllRead}
+                            on:click={() => dispatch("markAllRead")}>
+                            <CheckboxMultipleMarked
+                                size={$iconSize}
+                                color={"var(--icon-inverted-txt)"}
+                                slot="icon" />
+                            <span slot="text"
+                                ><Translatable resourceKey={i18nKey("markAllRead")} /></span>
+                        </MenuItem>
+                    </Menu>
+                </span>
+            </MenuIcon>
+        </span>
     </div>
 </SectionHeader>
 

frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
+    import Kebab from "svelte-material-icons/DotsVertical.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
     import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
     import SectionHeader from "../../SectionHeader.svelte";
     import { iconSize } from "../../../stores/iconSize";
     import Translatable from "../../Translatable.svelte";
     import { i18nKey } from "../../../i18n/i18n";
+    import MenuIcon from "../../MenuIcon.svelte";
+    import HoverIcon from "../../HoverIcon.svelte";
+    import Menu from "../../Menu.svelte";
+    import MenuItem from "../../MenuItem.svelte";
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let canMarkAllRead: boolean;
 </script>
 
 <SectionHeader slim border={false}>
@@ -14,6 +25,29 @@
         <div class="details">
             <h4 class="name"><Translatable resourceKey={i18nKey("communities.favourites")} /></h4>
         </div>
+        <span class="menu">
+            <MenuIcon position="bottom" align="end">
+                <span slot="icon">
+                    <HoverIcon>
+                        <Kebab size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                </span>
+                <span slot="menu">
+                    <Menu>
+                        <MenuItem
+                            disabled={!canMarkAllRead}
+                            on:click={() => dispatch("markAllRead")}>
+                            <CheckboxMultipleMarked
+                                size={$iconSize}
+                                color={"var(--icon-inverted-txt)"}
+                                slot="icon" />
+                            <span slot="text"
+                                ><Translatable resourceKey={i18nKey("markAllRead")} /></span>
+                        </MenuItem>
+                    </Menu>
+                </span>
+            </MenuIcon>
+        </span>
     </div>
 </SectionHeader>
 

frontend/app/src/components/home/communities/GroupChatsHeader.svelte

@@ -5,6 +5,8 @@
     import GroupChatsMenu from "./GroupChatsMenu.svelte";
     import Translatable from "../../Translatable.svelte";
     import { i18nKey } from "../../../i18n/i18n";
+
+    export let canMarkAllRead: boolean;
 </script>
 
 <SectionHeader slim border={false}>
@@ -19,7 +21,7 @@
         </div>
     </div>
     <span class="menu">
-        <GroupChatsMenu on:newGroup />
+        <GroupChatsMenu {canMarkAllRead} on:markAllRead on:newGroup />
     </span>
 </SectionHeader>
 

frontend/app/src/components/home/communities/GroupChatsMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import MenuIcon from "../../MenuIcon.svelte";
     import HoverIcon from "../../HoverIcon.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
     import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
     import Kebab from "svelte-material-icons/DotsVertical.svelte";
     import Compass from "svelte-material-icons/CompassOutline.svelte";
@@ -16,6 +17,8 @@
     const client = getContext<OpenChat>("client");
     const dispatch = createEventDispatcher();
 
+    export let canMarkAllRead: boolean;
+
     $: identityState = client.identityState;
     $: anonUser = client.anonUser;
     $: {
@@ -59,6 +62,13 @@
                 <Compass size={$iconSize} color={"var(--icon-inverted-txt)"} slot="icon" />
                 <span slot="text"><Translatable resourceKey={i18nKey("exploreGroups")} /></span>
             </MenuItem>
+            <MenuItem disabled={!canMarkAllRead} on:click={() => dispatch("markAllRead")}>
+                <CheckboxMultipleMarked
+                    size={$iconSize}
+                    color={"var(--icon-inverted-txt)"}
+                    slot="icon" />
+                <span slot="text"><Translatable resourceKey={i18nKey("markAllRead")} /></span>
+            </MenuItem>
         </Menu>
     </span>
 </MenuIcon>

frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte

@@ -13,6 +13,7 @@
     const client = getContext<OpenChat>("client");
 
     export let community: CommunitySummary;
+    export let canMarkAllRead: boolean;
 
     function showCommunityMembers() {
         pushRightPanelHistory({ kind: "show_community_members" });
@@ -50,6 +51,8 @@
             on:leaveCommunity
             on:editCommunity
             on:deleteCommunity
+            on:markAllRead
+            {canMarkAllRead}
             {community} />
     </span>
 </SectionHeader>

frontend/app/src/i18n/en.json

@@ -1409,4 +1409,4 @@
     "yourChats": "Your chats",
     "youreBlocked": "Sorry - you have been blocked from this group",
     "yourRoleChanged": "{changedBy} changed your role from {oldRole} to {newRole}"
-}
+}

frontend/app/src/styles/mixins.scss

@@ -542,8 +542,12 @@ $shadow-level-3: 2px 6px 12px 0 rgba(25, 25, 25, 0.55);
         display: flex;
     }
 
-    .details h4 {
-        @include font(book, normal, fs-120);
+    .details {
+        flex: auto;
+
+        h4 {
+            @include font(book, normal, fs-120);
+        }
     }
 }
 

frontend/openchat-client/src/openchat.ts

@@ -3739,6 +3739,10 @@ export class OpenChat extends OpenChatAgentWorker {
         messagesRead.markAllRead(chat);
     }
 
+    markAllReadForCurrentScope() {
+        this._liveState.chatSummariesList.forEach((chat) => messagesRead.markAllRead(chat));
+    }
+
     getDisplayDate = getDisplayDate;
     isSocialVideoLink = isSocialVideoLink;
     containsSocialVideoLink = containsSocialVideoLink;