Align channel management panel with profile

desktop/src/app/AppShell.tsx

@@ -1,12 +1,8 @@
 import * as React from "react";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useQueryClient } from "@tanstack/react-query";
 import { Outlet, useLocation } from "@tanstack/react-router";
 
-import {
-  deriveShellRoute,
-  isWindowDragHandleEvent,
-} from "@/app/AppShell.helpers";
+import { deriveShellRoute } from "@/app/AppShell.helpers";
 import { AppShellProvider } from "@/app/AppShellContext";
 import {
   AppShellOverlays,
@@ -20,6 +16,7 @@ import { useMarkAsReadShortcuts } from "@/app/useMarkAsReadShortcuts";
 import { useSettingsShortcuts } from "@/app/useSettingsShortcuts";
 import { useAppShellDesktopNotifications } from "@/app/useAppShellDesktopNotifications";
 import { useThreadActivityFeedItems } from "@/app/useThreadActivityFeedItems";
+import { useTauriWindowDrag } from "@/app/useTauriWindowDrag";
 import { useWebviewZoomShortcuts } from "@/app/useWebviewZoomShortcuts";
 import {
   channelsQueryKey,
@@ -88,10 +85,15 @@ const LazySettingsScreen = React.lazy(async () => {
 
 export function AppShell() {
   useWebviewZoomShortcuts();
+  useTauriWindowDrag();
+
   const workspacesHook = useWorkspaces();
   const [isAddWorkspaceOpen, setIsAddWorkspaceOpen] = React.useState(false);
   const [isChannelManagementOpen, setIsChannelManagementOpen] =
     React.useState(false);
+  const [managedChannelId, setManagedChannelId] = React.useState<string | null>(
+    null,
+  );
   const [searchFocusRequest, setSearchFocusRequest] = React.useState(0);
   const [browseDialogType, setBrowseDialogType] =
     React.useState<BrowseDialogType>(null);
@@ -118,9 +120,7 @@ export function AppShell() {
     () => deriveShellRoute(location.pathname),
     [location.pathname],
   );
-  // Settings lives in the history stack: /settings?section=… opens it, back
-  // (or "Back to app") returns to the previous entry — panels and all — and
-  // reloads restore the open section from the URL.
+  // Settings lives in history so back returns to the previous app entry.
   const settingsOpen = location.pathname === "/settings";
   const locationSearchSection = (location.search as { section?: unknown })
     .section;
@@ -187,6 +187,12 @@ export function AppShell() {
         : null,
     [channels, selectedChannelId],
   );
+  const managedChannel = React.useMemo(() => {
+    const targetChannelId = managedChannelId ?? selectedChannelId;
+    return targetChannelId
+      ? (channels.find((channel) => channel.id === targetChannelId) ?? null)
+      : null;
+  }, [channels, managedChannelId, selectedChannelId]);
 
   const {
     handleChannelNotification,
@@ -289,6 +295,7 @@ export function AppShell() {
     channels,
   );
 
+  // Badge count consumes the shared NIP-RS read-state from useUnreadChannels.
   const { homeBadgeCount, homeBadgeCountExcludingHighPriority } =
     useHomeFeedNotificationState(
       homeFeedQuery.data,
@@ -554,36 +561,6 @@ export function AppShell() {
     selectedView,
   });
 
-  React.useEffect(() => {
-    function handlePointerDown(event: PointerEvent) {
-      if (event.button !== 0 || event.detail > 1) {
-        return;
-      }
-
-      if (!isWindowDragHandleEvent(event)) {
-        return;
-      }
-
-      void getCurrentWindow().startDragging();
-    }
-
-    function handleDoubleClick(event: MouseEvent) {
-      if (event.button !== 0 || !isWindowDragHandleEvent(event)) {
-        return;
-      }
-
-      event.preventDefault();
-      void getCurrentWindow().toggleMaximize();
-    }
-
-    window.addEventListener("pointerdown", handlePointerDown, true);
-    window.addEventListener("dblclick", handleDoubleClick, true);
-    return () => {
-      window.removeEventListener("pointerdown", handlePointerDown, true);
-      window.removeEventListener("dblclick", handleDoubleClick, true);
-    };
-  }, []);
-
   return (
     <PreventSleepProvider>
       <ChannelNavigationProvider channels={channels}>
@@ -593,7 +570,12 @@ export function AppShell() {
             markChannelRead,
             markChannelUnread,
             openCreateChannel: handleOpenCreateChannel,
-            openChannelManagement: () => setIsChannelManagementOpen(true),
+            openChannelManagement: (channelId?: string) => {
+              setManagedChannelId(
+                typeof channelId === "string" ? channelId : null,
+              );
+              setIsChannelManagementOpen(true);
+            },
             getChannelReadAt,
             getThreadReadAt,
             markThreadRead,
@@ -827,16 +809,22 @@ export function AppShell() {
                       </div>
                     )}
                     <AppShellOverlays
-                      activeChannel={activeChannel}
+                      activeChannel={managedChannel}
                       browseDialogType={browseDialogType}
                       channels={channels}
                       currentPubkey={identityQuery.data?.pubkey}
                       isChannelManagementOpen={isChannelManagementOpen}
                       onBrowseChannelJoin={handleBrowseChannelJoin}
                       onBrowseDialogOpenChange={handleBrowseDialogOpenChange}
-                      onChannelManagementOpenChange={setIsChannelManagementOpen}
+                      onChannelManagementOpenChange={(open) => {
+                        setIsChannelManagementOpen(open);
+                        if (!open) {
+                          setManagedChannelId(null);
+                        }
+                      }}
                       onDeleteActiveChannel={() => {
                         setIsChannelManagementOpen(false);
+                        setManagedChannelId(null);
                         void goHome({ replace: true });
                       }}
                       onSelectChannel={(channelId) => {

desktop/src/app/AppShellContext.tsx

@@ -15,7 +15,7 @@ type AppShellContextValue = {
   ) => void;
   markChannelUnread: (channelId: string) => void;
   openCreateChannel: () => void;
-  openChannelManagement: () => void;
+  openChannelManagement: (channelId?: string) => void;
   // NIP-RS read marker for a channel as a unix-seconds timestamp, or null
   // when unknown. Backed by the single AppShell-mounted ReadStateManager so
   // every surface (sidebar, home, badges) projects from the same source.

desktop/src/app/useTauriWindowDrag.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+import { isWindowDragHandleEvent } from "@/app/AppShell.helpers";
+
+export function useTauriWindowDrag() {
+  React.useEffect(() => {
+    function handlePointerDown(event: PointerEvent) {
+      if (
+        event.button !== 0 ||
+        event.detail > 1 ||
+        !isWindowDragHandleEvent(event)
+      ) {
+        return;
+      }
+
+      void getCurrentWindow().startDragging();
+    }
+
+    function handleDoubleClick(event: MouseEvent) {
+      if (event.button !== 0 || !isWindowDragHandleEvent(event)) {
+        return;
+      }
+
+      event.preventDefault();
+      void getCurrentWindow().toggleMaximize();
+    }
+
+    window.addEventListener("pointerdown", handlePointerDown, true);
+    window.addEventListener("dblclick", handleDoubleClick, true);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown, true);
+      window.removeEventListener("dblclick", handleDoubleClick, true);
+    };
+  }, []);
+}

desktop/src/features/channels/ui/ChannelCanvas.tsx

@@ -56,7 +56,7 @@ export function ChannelCanvas({
   }
 
   if (canvasQuery.isLoading) {
-    return <p className="text-sm text-muted-foreground">Loading canvas…</p>;
+    return <p className="text-sm text-muted-foreground">Loading canvas...</p>;
   }
 
   if (canvasQuery.error instanceof Error) {
@@ -78,7 +78,7 @@ export function ChannelCanvas({
           data-testid="channel-canvas-editor"
           disabled={setCanvasMutation.isPending}
           onChange={(event) => setDraft(event.target.value)}
-          placeholder="Write your canvas content in Markdown…"
+          placeholder="Write your canvas content in Markdown..."
           value={draft}
         />
         <div className="flex gap-2">
@@ -94,7 +94,7 @@ export function ChannelCanvas({
             type="button"
           >
             <Save className="h-4 w-4" />
-            {setCanvasMutation.isPending ? "Saving…" : "Save canvas"}
+            {setCanvasMutation.isPending ? "Saving..." : "Save canvas"}
           </Button>
           <Button
             data-testid="channel-canvas-cancel"

desktop/src/features/channels/ui/ChannelManagementAuxiliaryPanel.tsx

@@ -0,0 +1,64 @@
+import type * as React from "react";
+
+import type { Channel } from "@/shared/api/types";
+import { ChannelManagementSheet } from "@/features/channels/ui/ChannelManagementSheet";
+import { RightAuxiliaryPane } from "@/features/channels/ui/RightAuxiliaryPane";
+
+type ChannelManagementAuxiliaryPanelProps = {
+  activeChannel: Channel;
+  canResetThreadPanelWidth: boolean;
+  currentPubkey?: string;
+  isSinglePanelView: boolean;
+  onChannelManagementDeleted?: () => void;
+  onCloseChannelManagement?: () => void;
+  onResetThreadPanelWidth: () => void;
+  onThreadPanelResizeStart: (
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  threadPanelWidthPx: number;
+  useSplitAuxiliaryPane: boolean;
+};
+
+export function ChannelManagementAuxiliaryPanel({
+  activeChannel,
+  canResetThreadPanelWidth,
+  currentPubkey,
+  isSinglePanelView,
+  onChannelManagementDeleted,
+  onCloseChannelManagement,
+  onResetThreadPanelWidth,
+  onThreadPanelResizeStart,
+  threadPanelWidthPx,
+  useSplitAuxiliaryPane,
+}: ChannelManagementAuxiliaryPanelProps) {
+  const panel = (
+    <ChannelManagementSheet
+      channel={activeChannel}
+      currentPubkey={currentPubkey}
+      layout={useSplitAuxiliaryPane || isSinglePanelView ? "split" : "overlay"}
+      onDeleted={onChannelManagementDeleted}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onCloseChannelManagement?.();
+        }
+      }}
+      open={true}
+    />
+  );
+
+  if (!useSplitAuxiliaryPane) {
+    return panel;
+  }
+
+  return (
+    <RightAuxiliaryPane
+      canResetWidth={canResetThreadPanelWidth}
+      onResetWidth={onResetThreadPanelWidth}
+      onResizeStart={onThreadPanelResizeStart}
+      testId="channel-management-auxiliary-pane"
+      widthPx={threadPanelWidthPx}
+    >
+      {panel}
+    </RightAuxiliaryPane>
+  );
+}