Community breadcrumb in favourites scope

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

@@ -1,13 +1,16 @@
 <script lang="ts">
     import type { ChatSummary, OpenChat } from "openchat-client";
-    import { getContext } from "svelte";
+    import { createEventDispatcher, getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import { now } from "../../stores/time";
     import VisibilityLabel from "./VisibilityLabel.svelte";
     import DisappearLabel from "./DisappearLabel.svelte";
 
     const client = getContext<OpenChat>("client");
+    const dispatch = createEventDispatcher();
+
     export let chat: ChatSummary;
+    export let clickableMembers = false;
 
     $: userStore = client.userStore;
     $: userId = chat.kind === "direct_chat" ? chat.them.userId : "";
@@ -27,6 +30,12 @@
             });
         }
     }
+
+    function onMembersClick() {
+        if (clickableMembers) {
+            dispatch("membersClick");
+        }
+    }
 </script>
 
 {#if chat.kind === "direct_chat"}
@@ -37,7 +46,7 @@
             <DisappearLabel ttl={chat.eventsTTL} />
         {/if}
         <VisibilityLabel isPublic={chat.public} />
-        <div class="members">
+        <div class="members" class:clickable={clickableMembers} on:click={onMembersClick}>
             <span class="num">{chat.memberCount.toLocaleString()}</span>
             {$_("members")}
         </div>
@@ -58,4 +67,8 @@
             font-weight: 700;
         }
     }
+
+    .clickable {
+        cursor: pointer;
+    }
 </style>

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

@@ -289,10 +289,14 @@
     }
 
     $: displayDate = client.getDisplayDate(chatSummary);
-    $: selectedCommunity = client.selectedCommunity;
+    $: communities = client.communities;
+    $: community =
+        chatSummary.kind === "channel"
+            ? $communities.get({ kind: "community", communityId: chatSummary.id.communityId })
+            : undefined;
     $: blocked = chatSummary.kind === "direct_chat" && $blockedUsers.has(chatSummary.them.userId);
     $: readonly = client.isChatReadOnly(chatSummary.id);
-    $: canDelete = getCanDelete(chatSummary, $selectedCommunity);
+    $: canDelete = getCanDelete(chatSummary, community);
     $: pinned = client.pinned($chatListScope.kind, chatSummary.id);
     $: muted = chatSummary.membership.notificationsMuted;
 
@@ -344,7 +348,13 @@
         <div class="details" class:rtl={$rtlStore}>
             <div class="name-date">
                 <div class="chat-name">
-                    <h4>{chat.name}</h4>
+                    <h4>
+                        {#if community !== undefined && $chatListScope.kind === "favourite"}
+                            <span>{community.name}</span>
+                            <span>{">"}</span>
+                        {/if}
+                        <span>{chat.name}</span>
+                    </h4>
                     <Diamond status={chat.diamondStatus} />
                 </div>
             </div>
@@ -672,7 +682,11 @@
             .chat-name {
                 h4 {
                     @include font(medium, normal, fs-100);
+                    display: flex;
+                    flex-direction: row;
+                    gap: $sp2;
                 }
+
                 display: flex;
                 align-items: center;
                 gap: $sp2;

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

@@ -1,5 +1,11 @@
 <script lang="ts">
-    import { AvatarSize, type OpenChat, type TypersByKey } from "openchat-client";
+    import {
+        AvatarSize,
+        routeForChatIdentifier,
+        type OpenChat,
+        type TypersByKey,
+    } from "openchat-client";
+    import page from "page";
     import { mobileWidth } from "../../stores/screenDimensions";
     import CurrentChatMenu from "./CurrentChatMenu.svelte";
     import SectionHeader from "../SectionHeader.svelte";
@@ -38,6 +44,8 @@
     $: isBot = $userStore[userId]?.kind === "bot";
     $: hasUserProfile = !isMultiUser && !isBot;
     $: selectedChatId = client.selectedChatId;
+    $: selectedCommunity = client.selectedCommunity;
+    $: chatListScope = client.chatListScope;
 
     function clearSelection() {
         dispatch("clearSelection");
@@ -104,6 +112,18 @@
         }
     }
 
+    function navigateToCommunity() {
+        if ($selectedCommunity !== undefined) {
+            page(`/community/${$selectedCommunity.id.communityId}`);
+        }
+    }
+
+    function navigateToChannel() {
+        if ($selectedCommunity !== undefined) {
+            page(routeForChatIdentifier("community", selectedChatSummary.id));
+        }
+    }
+
     $: chat = normaliseChatSummary($now, selectedChatSummary, $typersByContext);
 </script>
 
@@ -134,11 +154,21 @@
             size={AvatarSize.Default} />
     </div>
     <div class="chat-details">
-        <div class="chat-name" title={chat.name}>
+        <div class="chat-name">
             {#if isMultiUser && !readonly}
-                <span on:click={showGroupDetails} class="group-details">
-                    {chat.name}
-                </span>
+                <div class="title">
+                    {#if $selectedCommunity !== undefined && $chatListScope.kind === "favourite"}
+                        <span on:click={navigateToCommunity} class="pointer">
+                            {$selectedCommunity.name}
+                        </span>
+                        <span>{">"}</span>
+                        <span on:click={navigateToChannel} class="pointer">
+                            {chat.name}
+                        </span>
+                    {:else}
+                        {chat.name}
+                    {/if}
+                </div>
             {:else if hasUserProfile}
                 <span on:click={openUserProfile} class="user-link">
                     {chat.name}
@@ -157,9 +187,10 @@
             {:else if chat.typing !== undefined}
                 {chat.typing} <Typing />
             {:else if isMultiUser}
-                <div class="members" on:click={showGroupMembers}>
-                    <ChatSubtext chat={selectedChatSummary} />
-                </div>
+                <ChatSubtext
+                    chat={selectedChatSummary}
+                    clickableMembers
+                    on:membersClick={showGroupMembers} />
             {:else}
                 <ChatSubtext chat={selectedChatSummary} />
             {/if}
@@ -197,10 +228,6 @@
         @include font(book, normal, fs-80);
         @include ellipsis();
         color: var(--txt-light);
-
-        .members {
-            cursor: pointer;
-        }
     }
 
     .avatar {
@@ -211,7 +238,7 @@
         }
     }
 
-    .group-details {
+    .pointer {
         cursor: pointer;
     }
 
@@ -235,6 +262,12 @@
         padding: 0 $sp2;
     }
 
+    .title {
+        display: flex;
+        flex-direction: row;
+        gap: $sp3;
+    }
+
     .back {
         flex: 0 0 10px;
         margin-right: 5px;