Sidebar & Navigation

The sidebar provides the primary navigation structure for the Loop desktop app. It lists channels and threads, supports drag-and-drop reordering, batch selection, search filtering, and houses the app’s footer actions.

Related docs: Desktop App | Layouts | Settings | Chat

Layout

The sidebar is a vertical column on the left side of the app with the following sections, top to bottom:

1. Drag region (38px) – macOS window dragging area with a collapse button at the top-right
2. Header bar – “CHANNELS” label with Select and “+ new” buttons
3. Search box – filter channels and threads
4. New channel input – inline text field (shown when creating)
5. DM channel – pinned at top
6. Project channels – sortable list with collapsible threads
7. Spacer – pushes footer to bottom
8. Footer – update button, settings, README
9. Resize handle – right edge for width adjustment

Dimensions

The width is adjusted via a 4px-wide resize handle on the right edge:

• Cursor changes to col-resize on hover
• Handle becomes visible (colors.textDim) on hover and during drag
• A 1px border-right (colors.border) is always visible
• user-select: none is applied during drag to prevent text selection

When collapsed (sidebarOpen === false), the entire sidebar is hidden (returns null). An expand button appears in the workspace layout’s top drag region to restore the sidebar.

Channel Ordering

Drag-and-Drop

Top-level channels (not threads, not DM) support drag-and-drop reordering:

1. Each ChannelItem has draggable set on its container.
2. On drag start, the channel ID is stored in draggedIdRef.
3. On drag over, the target channel shows a green top border (2px solid colors.active).
4. On drop, the channel order array is updated: the source is removed from its position and inserted at the target position.

Persistence

Channel order is stored in localStorage under the key loop-channel-order as a JSON array of channel IDs. Channels not in the stored order sort to the end.

Search

The search box sits below the header and provides real-time case-insensitive filtering.

Behavior

• Filters top-level channels by name match
• Shows a parent channel if any of its threads match (even if the parent name does not match)
• When the parent matches, all its threads are shown
• When only threads match, only those matching threads are shown under the parent
• Press Escape to clear the search query

UI

• Search icon (magnifying glass) positioned inside the input field (left-aligned)
• Input: full width, colors.bg background, 12px font, 4px border-radius
• Placeholder: “Search…”

Selection Mode

Clicking “Select” enters batch selection mode.

Behavior in Select Mode

• Each channel and thread shows a checkbox instead of the collapse chevron
• The DM channel is excluded from selection (pinned, not selectable)
• Checked items have a green border and background with a checkmark icon
• Header shows:
  • “Delete (N)” button – deletes all selected items (red on hover)
  • “Cancel” button – exits selection mode and clears selections

Batch Delete

Channels and threads are deleted individually in sequence. If the currently selected channel is among the deleted, the selection is cleared.

Create Channel

Clicking “+ new” opens a dropdown menu with two options:

The dropdown is a positioned overlay that closes on outside click (left mousedown).

DM Channel

The DM channel is always pinned at the top of the channel list:

• Identified by name === "dm" and no parent_id
• Created automatically on first load if it does not exist (ensureChannel)
• Auto-selected on first load if no channel is selected and no hash is present
• Cannot be deleted (excluded from context menu delete option)
• Cannot be selected in batch selection mode

Channel Item

Each channel item (ChannelItem component) displays:

Visual Elements

Interaction

Context Menu

Right-clicking a channel opens a context menu with:

The “Delete Channel” item has danger: true styling (red text) and a separator above it.

Thread Item

Threads are listed below their parent channel, indented with a tree connector line. Threads can contain sub-threads (e.g. scheduled task threads), forming a 3-level hierarchy.

Visual Elements

Indentation

Threads are indented with padding-left: 30px (accounting for the tree connector). The connector line uses colors.textDisabled (#555555) at 1.5px stroke width.

Interaction

Create Thread

Clicking “+ thread” on a channel reveals an inline input (NewThreadInput) below the channel. Behavior:

• Enter submits the thread name
• Escape or blur cancels
• The input auto-focuses on mount

Delete Thread

Threads can be deleted via:

• Context menu “Delete Channel” (same operation for threads)
• Batch selection mode

Footer

The footer sits at the bottom of the sidebar, separated by a top border.

Update Button

Only shown when updateStatus?.available is true. The button text and behavior depend on the update state:

The button includes a download icon (arrow into tray).

Kanban Button

• Board icon + “Kanban” text
• Click opens the Kanban panel as an overlay
• colors.textDim text, brightens on hover

Settings Button

• Gear icon + “Settings” text
• Click opens the Settings panel
• Keyboard shortcut: Cmd+, (handled at the app level)
• colors.textDim text, brightens on hover

README Button

• Book icon + “README” text
• Click opens the README markdown panel
• colors.textDim text, brightens on hover

Window Title

The app title bar updates based on the selected channel/thread (handled in App.tsx):