Skip to content

feat(desktop): unify sidebar section actions into a per-section ⋮ menu #1577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesbillman merged 4 commits into from
Jul 7, 2026
Merged

feat(desktop): unify sidebar section actions into a per-section ⋮ menu #1577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e4a02b
feat(desktop): unify sidebar section actions into a per-section ⋮ menu
Jul 7, 2026
ff3e77a
test(desktop): route create-channel E2E callers through section actio…
Jul 7, 2026
f070daf
refactor(desktop): split sidebar channel context menu + menu helpers …
Jul 7, 2026
0b76ec0
test(desktop): open Sort submenu before asserting radios in channel-s…
Jul 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 29 additions & 72 deletions desktop/src/features/sidebar/ui/AppSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
// biome-ignore format: keep compact to stay within file size limit
import { MessageCirclePlus } from "lucide-react";

import * as React from "react";
import { FeatureGate } from "@/shared/features";
import { SidebarDndContext } from "@/features/sidebar/ui/SidebarDnd";
Expand Down Expand Up @@ -36,8 +34,9 @@ import { SidebarSection } from "@/features/sidebar/ui/SidebarSection";
import {
ChannelGroupSection,
CustomChannelSection,
SectionActionsMenu,
SectionQuickAction,
} from "@/features/sidebar/ui/CustomChannelSection";
import { ChannelSortDropdown } from "@/features/sidebar/ui/ChannelSortDropdown";
import { CreateChannelDialog } from "@/features/sidebar/ui/CreateChannelDialog";
import { NewDirectMessageDialog } from "@/features/sidebar/ui/NewDirectMessageDialog";
import { SidebarProfileCard } from "@/features/sidebar/ui/SidebarProfileCard";
Expand All @@ -47,10 +46,6 @@ import {
SidebarLoadingContent,
useSidebarLoadingShape,
} from "@/features/sidebar/ui/sidebarLoadingSkeleton";
import {
SECTION_ACTION_VISIBILITY_CLASS,
SECTION_ICON_BUTTON_CLASS,
} from "@/features/sidebar/ui/sidebarSectionStyles";
import { useDeferredModalOpen } from "@/shared/ui/deferredModalOpen";
import { SidebarUpdateCard } from "@/features/settings/SidebarUpdateCard";
import { useUpdaterContext } from "@/features/settings/hooks/UpdaterProvider";
Expand Down Expand Up @@ -592,24 +587,16 @@ export function AppSidebar({
<>
{starredChannels.length > 0 ? (
<ChannelGroupSection
createAriaLabel="Starred channels"
hasUnread={starredChannels.some((c) =>
unreadChannelIds.has(c.id),
)}
isCollapsed={collapsedGroups.starred}
isActiveChannel={selectedView === "channel"}
activeWorkingByChannelId={activeWorkingByChannelId}
items={starredChannels}
leadingHeaderAction={
<ChannelSortDropdown
groupLabel="starred channels"
onSortModeChange={(mode) =>
setSortModeFor("starred", mode)
}
sortMode={sortModeFor("starred")}
testId="channel-sort-trigger-starred"
/>
}
sortMode={sortModeFor("starred")}
onSortModeChange={(mode) => setSortModeFor("starred", mode)}
actionsTestId="section-actions-starred"
listTestId="starred-list"
onMarkAllRead={() => {
for (const channel of starredChannels) {
Expand Down Expand Up @@ -661,21 +648,9 @@ export function AppSidebar({
assignments={channelAssignments}
isFirst={idx === 0}
isLast={idx === channelSections.length - 1}
leadingHeaderAction={
<ChannelSortDropdown
groupLabel={section.name}
onSortModeChange={(mode) =>
setSortModeFor(
sectionSortGroupKey(section.id),
mode,
)
}
sortMode={sortModeFor(
sectionSortGroupKey(section.id),
)}
testId={`channel-sort-trigger-section-${section.id}`}
visibilityClassName=""
/>
sortMode={sortModeFor(sectionSortGroupKey(section.id))}
onSortModeChange={(mode) =>
setSortModeFor(sectionSortGroupKey(section.id), mode)
}
onToggleCollapsed={() =>
toggleCollapsedSection(section.id)
Expand Down Expand Up @@ -707,27 +682,23 @@ export function AppSidebar({
/>
))}
<ChannelGroupSection
browseAriaLabel="Browse channels"
createAriaLabel="Create a channel"
browseLabel="Browse channels"
createLabel="New channel"
Comment thread
klopez4212 marked this conversation as resolved.
draggable
hasUnread={unreadChannelIds.size > 0}
isCollapsed={collapsedGroups.channels}
isActiveChannel={selectedView === "channel"}
activeWorkingByChannelId={activeWorkingByChannelId}
items={sectionBuckets.unassigned}
leadingHeaderAction={
<ChannelSortDropdown
groupLabel="channels"
onSortModeChange={(mode) =>
setSortModeFor("channels", mode)
}
sortMode={sortModeFor("channels")}
testId="channel-sort-trigger-channels"
/>
sortMode={sortModeFor("channels")}
onSortModeChange={(mode) =>
setSortModeFor("channels", mode)
}
actionsTestId="section-actions-channels"
listTestId="stream-list"
onBrowseClick={onBrowseChannels}
onCreateClick={() => openCreateDialog("stream")}
showQuickCreate
onMarkAllRead={onMarkAllChannelsRead}
onMarkChannelRead={onMarkChannelRead}
onMarkChannelUnread={onMarkChannelUnread}
Expand All @@ -753,22 +724,15 @@ export function AppSidebar({
</SidebarDndContext>
<FeatureGate feature="forum">
<ChannelGroupSection
createAriaLabel="Create a forum"
createLabel="New forum"
hasUnread={unreadChannelIds.size > 0}
isCollapsed={collapsedGroups.forums}
isActiveChannel={selectedView === "channel"}
activeWorkingByChannelId={activeWorkingByChannelId}
items={forumChannels}
leadingHeaderAction={
<ChannelSortDropdown
groupLabel="forums"
onSortModeChange={(mode) =>
setSortModeFor("forums", mode)
}
sortMode={sortModeFor("forums")}
testId="channel-sort-trigger-forums"
/>
}
sortMode={sortModeFor("forums")}
onSortModeChange={(mode) => setSortModeFor("forums", mode)}
actionsTestId="section-actions-forums"
listTestId="forum-list"
onCreateClick={() => openCreateDialog("forum")}
onMarkAllRead={onMarkAllChannelsRead}
Expand All @@ -788,25 +752,18 @@ export function AppSidebar({
<SidebarSection
action={
<div className="absolute right-1 top-1/2 z-10 flex -translate-y-1/2 items-center gap-0.5">
<ChannelSortDropdown
groupLabel="direct messages"
onSortModeChange={(mode) => setSortModeFor("dms", mode)}
<SectionQuickAction
label="New message"
onClick={() => setIsNewDmOpen(true)}
testId="section-actions-dms-quick-create"
/>
<SectionActionsMenu
sectionLabel="direct messages"
testId="section-actions-dms"
onNewMessage={() => setIsNewDmOpen(true)}
sortMode={sortModeFor("dms")}
testId="channel-sort-trigger-dms"
onSortModeChange={(mode) => setSortModeFor("dms", mode)}
/>
<button
aria-expanded={isNewDmOpen}
aria-label="Compose new message"
className={`${SECTION_ICON_BUTTON_CLASS} ${SECTION_ACTION_VISIBILITY_CLASS}`}
data-testid="new-dm-trigger"
onClick={() => {
setIsNewDmOpen(true);
}}
title="Compose new message"
type="button"
>
<MessageCirclePlus className="h-4 w-4" />
</button>
</div>
}
dmParticipantsByChannelId={dmParticipantsByChannelId}
Expand Down
Loading