note-251112-modern-sidebar-navigation

Modern Sidebar Navigation - Obsidian-Inspired

Date: 2025-11-12
Status: ✅ Complete
Type: UI/UX Enhancement

Overview

Redesigned the sidebar navigation with a modern, hierarchical structure inspired by Obsidian's local-first, developer-friendly philosophy. The new design features collapsible sections, visual badges, and organized workflows.

Design Philosophy

Inspired by Obsidian:

  • Collapsible Sections: Organize features into logical groups
  • Visual Hierarchy: Clear parent/child relationships with indentation
  • Information Density: Compact yet readable with smart use of badges
  • Developer-First: Emphasizes tools and workflows for P2P development
  • Local-First Indicators: Status footer reinforces the local-first architecture

New Navigation Structure

1. Workspace Section

Purpose: Core user-facing features

  • Playlists - Active playlist management
  • Library - Local music library (coming soon)
  • Sessions - Collaborative sessions (coming soon)

2. P2P Network Section

Purpose: P2P networking and protocol development

  • Network Status - Current P2P interface (comprehensive dev UI)
  • Peer Management - Advanced peer features (coming soon)
    • Friend lists
    • Peer reputation
    • Connection history
  • Protocols - Protocol development workspace (active placeholder)
    • Handshake, Data Test, File Transfer, Playlist Sync protocols
    • Protocol handler registry
    • Stream inspector
    • Message logger
    • Protocol tester

3. Development Section

Purpose: Developer tools and testing

  • RxDB Evaluation - Issue spike test (active)
  • Protocol Testing - Automated protocol tests (coming soon)
  • Debug Console - Unified logging interface (coming soon)

4. Settings Section

Purpose: Application configuration

  • General - App-wide settings (coming soon)
  • P2P Config - P2P networking settings (coming soon)
  • Storage - Database and storage config (coming soon)

Visual Improvements

Header

  • Gradient App Icon: Blue-purple gradient with music note
  • Version Badge: "v0.0.0 Alpha" clearly visible
  • Brand Identity: Clean, modern presentation

Section Headers:

  • Uppercase, tracked text
  • Collapsible with chevron indicators
  • Subtle hover states

Child Items:

  • Indented with left border for hierarchy
  • Larger touch targets
  • Clear active state (blue highlight)

Badges

Three badge types with distinct styling:

  1. "Soon" - Gray badge for planned features
  2. "Dev" - Orange badge for active development areas
  3. "#4", "#10" - Blue badges for issue tracking

Status Indicator:

  • Animated green pulse dot
  • "Local-First Mode" label
  • Database icon for emphasis

Quick Actions:

  • GitHub link button
  • Future: documentation, community links

Key Features

1. Collapsible Sections

const [expandedSections, setExpandedSections] = useState<Set<string>>(
    new Set(['workspace', 'p2p', 'development'])
);

Sections start expanded for immediate access, but can be collapsed for focus.

2. Smart Active State

const isActive = (itemId: string) => {
    if (activeView === itemId) return true;

    // Highlight parent if child is active
    const item = navigationItems.find(i => i.id === itemId);
    if (item?.children) {
        return item.children.some(child => activeView === child.id);
    }
    return false;
};

Parent sections show when their children are active, providing context.

3. Protocol Development Workspace

The "Protocols" view now shows a comprehensive placeholder with:

  • Alert banner explaining the workspace purpose
  • List of planned protocols with their paths
  • Grid of upcoming tools (handler registry, stream inspector, etc.)
  • Developer-focused layout

This sets clear expectations for upcoming work while providing visual structure.

Files Modified

  • app/src/renderer/components/Layout/Sidebar.tsx - Complete redesign
  • app/src/renderer/App.tsx - New view IDs and placeholder views

Breaking Changes

View ID Changes:

  • 'spike' → 'rxdb-spike'
  • 'p2p' → 'p2p-status'

These are more explicit and align with the hierarchical structure.

User Experience Improvements

Before

  • Flat list of 6 items
  • No visual hierarchy
  • Limited context about upcoming features
  • Static, dated feel

After

  • 13 distinct views organized into 4 sections
  • Clear hierarchy with parent/child relationships
  • Visual badges indicate feature status
  • Modern, Obsidian-like aesthetic
  • Collapsible sections for focus
  • Animated status indicators

Developer Benefits

  1. Clear Roadmap: Badges and placeholders show what's coming
  2. Organized Workflow: Related features grouped logically
  3. Focus Mode: Collapse sections to reduce visual noise
  4. Context Awareness: Active states show where you are in the hierarchy
  5. Protocol Focus: Dedicated section for P2P development work

Future Enhancements

Planned Additions

  • Keyboard Shortcuts: Cmd/Ctrl+1-9 for quick navigation
  • Search/Command Palette: Obsidian-style quick switcher
  • Custom Sections: User-defined navigation groups
  • Pinned Items: Pin frequently used views to top
  • Recent Items: Quick access to recently viewed sections

Protocol Workspace Evolution

As protocols are implemented:

  1. "Dev" badges change to "Active"
  2. Placeholder grids become functional tools
  3. Protocol handler registry shows live protocol list
  4. Stream inspector displays active connections
  5. Message logger captures real protocol traffic

Design Patterns Used

Visual Hierarchy

SECTION HEADER (uppercase, small)
├─ Child Item 1 (normal case, larger)
├─ Child Item 2 [Badge]
└─ Child Item 3 [Badge]

Color Semantics

  • Blue: Active/selected state
  • Green: Online/active status
  • Orange: Development/warning state
  • Gray: Inactive/coming soon

Spacing

  • Compact vertical spacing for density
  • Generous padding for touch targets
  • Clear indentation for hierarchy

Accessibility

  • Keyboard Navigation: All items focusable and activatable
  • Color Contrast: WCAG AA compliant text colors
  • Clear Labels: Descriptive, unambiguous text
  • Visual Feedback: Hover and active states clearly indicated
  • note-251112-p2p-development-interface-complete.md - The comprehensive P2P UI this navigation serves
  • note-251112-protocol-implementation-roadmap.md - Protocols referenced in navigation
  • CLAUDE.md - Obsidian inspiration for local-first philosophy

Conclusion

This navigation redesign transforms WhatNext from a simple app into a comprehensive development workspace. The hierarchical structure accommodates current features while clearly signposting future capabilities. The Obsidian-inspired aesthetic reinforces the local-first, user-sovereign philosophy at the core of the project.

Ready for exploration and protocol development. 🎯