From 91c973d862f5ca82fcad5b5ba87588d172d836d8 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Fri, 12 Jun 2026 10:52:04 -0700 Subject: [PATCH] cleanup and add toggle for sidebar --- .../src/features/compose/compose-overlay.tsx | 6 ++--- .../particles/particle-children-list.tsx | 9 ++++++- .../particles/stream-list-sidebar.tsx | 20 ++++++++------ .../src/features/particles/stream-view.tsx | 26 ++++++++++--------- js/desktop/src/lib/particle-display.ts | 1 - 5 files changed, 36 insertions(+), 26 deletions(-) diff --git a/js/desktop/src/features/compose/compose-overlay.tsx b/js/desktop/src/features/compose/compose-overlay.tsx index 1a525e5..9144fa2 100644 --- a/js/desktop/src/features/compose/compose-overlay.tsx +++ b/js/desktop/src/features/compose/compose-overlay.tsx @@ -48,8 +48,7 @@ export type ComposeStep = type RecordingSource = 'media' | 'screen'; -type PendingArtifact = - | { type: 'task'; properties: TaskProperties }; +type PendingArtifact = { type: 'task'; properties: TaskProperties }; interface ComposeOverlayProps { networkId: string; @@ -466,7 +465,7 @@ export function ComposeOverlay({ // --- Compose intent handlers --- // Single source of truth for the step transitions triggered by the user. // Both the keyboard handler and the intent store dispatch into these so - // guards (disabled, quota) and screen-vs-media branching live in one place. + // guards (quota) and screen-vs-media branching live in one place. const guardIdle = useCallback((): boolean => { if (stepRef.current !== 'idle') return false; @@ -497,7 +496,6 @@ export function ComposeOverlay({ setStepSync('task'); }, [guardIdle, setStepSync]); - // Artifact submit: capture the artifact, then reuse the standard flow — // reply mode creates it under targetPath, root mode configures a stream // that will hold it as its first child. diff --git a/js/desktop/src/features/particles/particle-children-list.tsx b/js/desktop/src/features/particles/particle-children-list.tsx index 7ea629f..a1e1407 100644 --- a/js/desktop/src/features/particles/particle-children-list.tsx +++ b/js/desktop/src/features/particles/particle-children-list.tsx @@ -1,4 +1,11 @@ -import { Fragment, useMemo, useRef, useEffect, memo, createElement } from 'react'; +import { + Fragment, + useMemo, + useRef, + useEffect, + memo, + createElement, +} from 'react'; import { Headphones, Radio, FolderIcon } from 'lucide-react'; import { cn, getInitials } from '@/lib/utils'; import { useLiveLatestChild } from '@/hooks/use-particle'; diff --git a/js/desktop/src/features/particles/stream-list-sidebar.tsx b/js/desktop/src/features/particles/stream-list-sidebar.tsx index 4cc8e35..c022276 100644 --- a/js/desktop/src/features/particles/stream-list-sidebar.tsx +++ b/js/desktop/src/features/particles/stream-list-sidebar.tsx @@ -1,18 +1,12 @@ import { useEffect, useRef } from 'react'; -import { - CircleCheck, - FileText, - Image, - List, - Mic, - Video, -} from 'lucide-react'; +import { CircleCheck, FileText, Image, List, Mic, Video } from 'lucide-react'; import { isParticleDeleted, type Human, type Particle } from '@/api/types'; import { cn } from '@/lib/utils'; import { useNetwork } from '@/hooks/use-networks'; import { resolveHumanDisplay } from '@/lib/humans'; import { RelativeTimestamp } from '@/components/relative-timestamp'; import { HumanAvatar } from '@/components/human-avatar'; +import { KeyHint } from '@/components/key-hint'; import { ScrollArea } from '@/components/ui/scroll-area'; interface StreamListSidebarProps { @@ -21,6 +15,7 @@ interface StreamListSidebarProps { networkId: string; currentIndex: number; onSelect: (index: number) => void; + onToggle: () => void; } /** @@ -34,6 +29,7 @@ export function StreamListSidebar({ networkId, currentIndex, onSelect, + onToggle, }: StreamListSidebarProps) { const network = useNetwork(networkId); const rowRefs = useRef>([]); @@ -52,6 +48,14 @@ export function StreamListSidebar({ {streamName} {items.length} + + to close +
diff --git a/js/desktop/src/features/particles/stream-view.tsx b/js/desktop/src/features/particles/stream-view.tsx index fe3e0c1..39b32b5 100644 --- a/js/desktop/src/features/particles/stream-view.tsx +++ b/js/desktop/src/features/particles/stream-view.tsx @@ -68,6 +68,18 @@ import { requireDesktop } from '@/lib/platform/desktop-only'; const noop = () => {}; +// Compose step → the composing-presence mode broadcast to other viewers. +const STEP_TO_COMPOSING_MODE: Record = { + idle: null, + submitting: null, + recording: 'recording', + typing: 'typing', + task: 'typing', + reviewing: 'typing', + configuring: 'typing', + picking: 'screen', +}; + function getReactions( particle: Particle, ): Record | undefined { @@ -321,18 +333,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) { // Broadcast composing state to other viewers useEffect(() => { - const stepToMode: Record = { - idle: null, - submitting: null, - recording: 'recording', - typing: 'typing', - task: 'typing', - event: 'typing', - reviewing: 'typing', - configuring: 'typing', - picking: 'screen', - }; - const mode = stepToMode[composeStep] ?? null; + const mode = STEP_TO_COMPOSING_MODE[composeStep] ?? null; if (mode) { startComposing(mode); } else { @@ -575,6 +576,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) { networkId={networkId} currentIndex={currentIndex} onSelect={goTo} + onToggle={toggleViewMode} /> )}
diff --git a/js/desktop/src/lib/particle-display.ts b/js/desktop/src/lib/particle-display.ts index b350d33..5f117e0 100644 --- a/js/desktop/src/lib/particle-display.ts +++ b/js/desktop/src/lib/particle-display.ts @@ -89,4 +89,3 @@ export function getParticleDisplayName(particle: Particle): string { return 'Unsupported particle'; } } -