From 530225d37c9225c3bb5125955e0c022c0e7c9796 Mon Sep 17 00:00:00 2001 From: Developer Date: Sat, 13 Jun 2026 19:32:16 +0000 Subject: [PATCH] feat: mobile Spaces nav and list-based project/workspace views - Combine Projects and Workspaces into a single 'Spaces' grouped mobile nav item that opens a bottom-sheet menu. - Add SpacesBottomSheet component with Projects/Workspaces options. - Extend MobileListView with optional renderItem prop for rich rows. - Redesign mobile ProjectsPage rows to show project description and repository chips. - Replace mobile WorkspacesPage list with compact WorkspaceCard grid, matching desktop card content. - Add mobile-list-* CSS and mobile-workspaces-list spacing. Quality gates: npm run typecheck, npm run lint clean, npm test -- --run 87 passed. --- .pi-map.index.md | 2 +- .pi-map.md | 4 +- apps/.pi-map.index.md | 2 +- apps/.pi-map.md | 4 +- apps/web/.pi-map.index.md | 2 +- apps/web/.pi-map.md | 4 +- apps/web/src/.pi-map.index.md | 2 +- apps/web/src/.pi-map.md | 4 +- apps/web/src/components/.pi-map.index.md | 2 +- apps/web/src/components/.pi-map.md | 4 +- .../src/components/features/.pi-map.index.md | 86 ++++++------ apps/web/src/components/features/.pi-map.md | 10 +- .../features/mobile/.pi-map.index.md | 3 +- .../src/components/features/mobile/.pi-map.md | 11 +- .../features/mobile/mobile-list-view.tsx | 19 ++- .../components/features/mobile/mobile-nav.tsx | 23 +++- .../features/mobile/spaces-bottom-sheet.tsx | 62 +++++++++ apps/web/src/pages/.pi-map.index.md | 2 +- apps/web/src/pages/.pi-map.md | 10 +- apps/web/src/pages/ProjectsPage.tsx | 26 +++- apps/web/src/pages/WorkspacesPage.tsx | 29 ++--- apps/web/src/styles/.pi-map.index.md | 2 +- apps/web/src/styles/.pi-map.md | 8 +- apps/web/src/styles/pages/.pi-map.index.md | 2 +- apps/web/src/styles/pages/.pi-map.md | 8 +- apps/web/src/styles/pages/workspaces.css | 5 + apps/web/src/styles/utilities.css | 123 ++++++++++++++++++ 27 files changed, 346 insertions(+), 113 deletions(-) create mode 100644 apps/web/src/components/features/mobile/spaces-bottom-sheet.tsx diff --git a/.pi-map.index.md b/.pi-map.index.md index ba97793..015bdf0 100644 --- a/.pi-map.index.md +++ b/.pi-map.index.md @@ -16,7 +16,7 @@ dir: . Trust boundary: index routes, map orients, source decides. ## role -Infrastructure and deployment configuration for a self-hosted project management platform with containerized services, SSO integration, and AI agent development workflows. +Infrastructure and deployment configuration for a self-hosted project management and git repository platform with OAuth2 authentication. ## parent - ## children diff --git a/.pi-map.md b/.pi-map.md index 7924746..52f44b1 100644 --- a/.pi-map.md +++ b/.pi-map.md @@ -18,7 +18,7 @@ index: ./.pi-map.index.md Trust boundary: index routes, map orients, source decides. ## role -Infrastructure and deployment configuration for a self-hosted project management platform with containerized services, SSO integration, and AI agent development workflows. +Infrastructure and deployment configuration for a self-hosted project management and git repository platform with OAuth2 authentication. ## files - .env.example | Provides a template of environment variables for configuring a Headquarter application with PostgreSQL, Redis, Authentik SSO, and Docker/Traefik deployment - .gitignore | Specifies files and directories for Git to ignore across a multi-language project with Python, Node, and custom tooling | dep: Git @@ -31,7 +31,7 @@ Infrastructure and deployment configuration for a self-hosted project management - progress.md | Tracks completed and remaining tasks for a backend-frontend code refactoring project organized in 7 phases - swap-pane | Empty file with no functionality ## arch -Multi-service Docker Compose architecture with PostgreSQL/Redis data layer, Node/Python frontend/backend split, Traefik reverse proxy for TLS termination, and OpenSpec-driven AI agent orchestration with environment-based configuration management. +Containerized microservices architecture using Docker Compose with PostgreSQL/Redis persistence, Traefik reverse proxy for TLS termination, environment-driven configuration, and a decoupled frontend/API backend structure. ## tags docker, redis, git, application, postgresql, compose, traefik, project ## symbols diff --git a/apps/.pi-map.index.md b/apps/.pi-map.index.md index 9d5e74a..5fc61be 100644 --- a/apps/.pi-map.index.md +++ b/apps/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps ## role -Contains the main deployable application entry points and top-level configurations for the project. +Contains the main executable application modules that serve as entry points for the project. ## parent index: ./.pi-map.index.md map: ./.pi-map.md diff --git a/apps/.pi-map.md b/apps/.pi-map.md index 597eba2..1c5a71c 100644 --- a/apps/.pi-map.md +++ b/apps/.pi-map.md @@ -4,10 +4,10 @@ dir: apps index: apps/.pi-map.index.md ## role -Contains the main deployable application entry points and top-level configurations for the project. +Contains the main executable application modules that serve as entry points for the project. ## files ## arch -Monorepo-style directory structure typically housing multiple independent applications that share common libraries or modules, each with its own configuration and dependencies. +Modular application structure with separate deployable units, likely following microservices or layered architecture patterns with domain-driven design boundaries. ## tags - ## symbols diff --git a/apps/web/.pi-map.index.md b/apps/web/.pi-map.index.md index 0cfd285..e3fea25 100644 --- a/apps/web/.pi-map.index.md +++ b/apps/web/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web ## role -Frontend web application serving as the browser-based UI for the project, built with React/Vite/TypeScript and deployed via nginx. +Frontend web application for the headquarters system, providing a browser-based UI with code editing, terminal, and routing capabilities. ## parent index: apps/.pi-map.index.md map: apps/.pi-map.md diff --git a/apps/web/.pi-map.md b/apps/web/.pi-map.md index 4e9fdae..3e86514 100644 --- a/apps/web/.pi-map.md +++ b/apps/web/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web index: apps/web/.pi-map.index.md ## role -Frontend web application serving as the browser-based UI for the project, built with React/Vite/TypeScript and deployed via nginx. +Frontend web application for the headquarters system, providing a browser-based UI with code editing, terminal, and routing capabilities. ## files - .env.example | Template file defining example environment variables for frontend API and application URL configuration - .eslintrc.cjs | Configures ESLint for a TypeScript browser project with modern ECMAScript module support | dep: @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint @@ -16,7 +16,7 @@ Frontend web application serving as the browser-based UI for the project, built - tsconfig.json | TypeScript configuration file for a React project using Vite with modern ES2020 target and bundler module resolution | dep: typescript, react, vite - vite.config.ts | Configures Vite build tool for a React project with custom dev server port and Vitest test settings. | dep: vite, @vitejs/plugin-react ## arch -Modern SPA architecture using Vite for bundling, React for UI, TypeScript for type safety, with containerized nginx deployment and environment-driven configuration. +Modern React SPA built with Vite and TypeScript, containerized with multi-stage Docker/nginx deployment, using ES modules with Vitest for testing. ## tags react, eslint, vite, typescript, dom, application, nginx, web ## symbols diff --git a/apps/web/src/.pi-map.index.md b/apps/web/src/.pi-map.index.md index 4ebffb3..37825fa 100644 --- a/apps/web/src/.pi-map.index.md +++ b/apps/web/src/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src ## role -Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based frontend. +Frontend web application entry point and core infrastructure for a React-based collaborative development platform. ## parent index: apps/web/.pi-map.index.md map: apps/web/.pi-map.md diff --git a/apps/web/src/.pi-map.md b/apps/web/src/.pi-map.md index 6b1e291..94b88c6 100644 --- a/apps/web/src/.pi-map.md +++ b/apps/web/src/.pi-map.md @@ -4,13 +4,13 @@ dir: apps/web/src index: apps/web/src/.pi-map.index.md ## role -Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based frontend. +Frontend web application entry point and core infrastructure for a React-based collaborative development platform. ## files - main.tsx | Bootstraps a React application with routing, authentication, and session management providers. | dep: react, react-dom/client, react-router-dom, ./router, ./state/auth, ./state/sessions, ./styles/tokens.css, ./styles/global.css, ./styles/utilities.css, ./styles/syntax-highlight.css, ./styles/pages/git-history.css, ./styles/pages/projects.css, ./styles/pages/sessions.css, ./styles/pages/ssh-keys.css, ./styles/pages/workspace-detail.css, ./styles/pages/workspaces.css, react-dom - router.tsx | Defines the React Router configuration for a web application with protected routes, nested layouts, and redirects. | exp: AppRouter | dep: react-router-dom, ./components/app-shell, ./components/protected-route, ./pages/DashboardPage, ./pages/PlaceholderPage, ./pages/ProfilePage, ./pages/ProjectsPage, ./pages/GitRepositoriesPage, ./pages/GitHistoryPage, ./pages/ProjectSettingsPage, ./pages/SettingsPage, ./pages/TerminalPage, ./pages/ToolWorkshopPage, ./pages/SshKeysPage, ./pages/ConfigProfilesPage, ./pages/SessionsPage, ./pages/WorkspacesPage, ./pages/WorkspaceDetailPage - types.ts | Defines TypeScript type definitions for user sessions, projects, repositories, and workspaces in an application. | exp: SessionUser, SessionPayload, Project, WorkspaceSummary, RepositorySummary, ProjectWithRepos ## arch -Layered architecture with provider composition pattern for cross-cutting concerns (auth, routing, sessions), declarative route configuration with nested layouts and route guards, and centralized TypeScript domain modeling. +Provider-composition pattern with React Router v6 nested route declarations, centralized type definitions, and layered authentication/session management wrapping a protected route hierarchy. ## tags pages, styles, css, router, react, session, dom, project ## symbols diff --git a/apps/web/src/components/.pi-map.index.md b/apps/web/src/components/.pi-map.index.md index 42d604a..f142af4 100644 --- a/apps/web/src/components/.pi-map.index.md +++ b/apps/web/src/components/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components ## role -Provides reusable, accessible React UI components and utilities for the web application including layout shells, data display states, icon system, code editing, routing guards, and toast notification infrastructure. +Provides foundational, reusable React UI components and utilities for rendering layouts, interactive elements, data states, icons, code editing, routing guards, and toast notifications across the web application. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/components/.pi-map.md b/apps/web/src/components/.pi-map.md index 68984f2..7949bf0 100644 --- a/apps/web/src/components/.pi-map.md +++ b/apps/web/src/components/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web/src/components index: apps/web/src/components/.pi-map.index.md ## role -Provides reusable, accessible React UI components and utilities for the web application including layout shells, data display states, icon system, code editing, routing guards, and toast notification infrastructure. +Provides foundational, reusable React UI components and utilities for rendering layouts, interactive elements, data states, icons, code editing, routing guards, and toast notifications across the web application. ## files - app-shell.tsx | Renders the main application shell layout with navigation, session management, and responsive mobile/desktop views for a React Router-based app. | exp: AppShell | dep: react-router-dom, ../api/sessions, ../hooks/use-theme, ../state/auth, ../state/sessions, ../hooks/use-mobile-viewport, ../state/events, ../state/toast, ../state/notifications, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./icon, ./features/mobile/mobile-nav, ./features/tool/start-tool-fab, ../utils/icons - code-editor.tsx | A React component that renders a syntax-highlighted code editor with line numbers using react-simple-code-editor. | exp: CodeEditor | dep: react, react-simple-code-editor, ../utils/language @@ -17,7 +17,7 @@ Provides reusable, accessible React UI components and utilities for the web appl - toast-rules.test.ts | Unit tests for mapping instance events to toast notification categories and severities | dep: vitest, ./toast-rules, ../types/events - toast-rules.ts | Maps instance events to toast notifications with deduplication logic to prevent spam | exp: func:mapEventToCategory(event: InstanceEventPayload) → string, call:event.event.startsWith, func:mapEventToSeverity(event: InstanceEventPayload) → "info" | "warning" | "error" | "success", func:handleEventToast(event: InstanceEventPayload) → void, call:shouldShowToast, call:toast.info, call:toast.success, call:toast.warning, call:toast.error, func:clearToastDedup() → void, call:lastToastTime.clear | dep: ../state/toast, ../types/events, toast state module, InstanceEventPayload type ## arch -Component-based architecture with functional React patterns, custom hooks for state management, utility modules for cross-cutting concerns (icons, toasts), and test co-location with implementation files. +Component-based architecture with functional React patterns, custom hooks for state management, centralized icon mapping with type safety, HOC-like route guards, and utility modules for cross-cutting concerns (toast rules, data states) with co-located test files. ## tags toast, icon, react, state, code, loading, event, editor ## symbols diff --git a/apps/web/src/components/features/.pi-map.index.md b/apps/web/src/components/features/.pi-map.index.md index 482f345..b86c088 100644 --- a/apps/web/src/components/features/.pi-map.index.md +++ b/apps/web/src/components/features/.pi-map.index.md @@ -1,52 +1,52 @@ -# features (index) -dir: features +# apps/web/src/components/features (index) +dir: apps/web/src/components/features ## role -Contains modular, feature-based components that encapsulate specific domain functionality or user-facing capabilities within the project. +Contains reusable UI components organized by feature domain for the web application. ## parent -index: ./.pi-map.index.md -map: ./.pi-map.md +index: apps/web/src/components/.pi-map.index.md +map: apps/web/src/components/.pi-map.md ## children -- features/config-profiles - index: features/config-profiles/.pi-map.index.md - map: features/config-profiles/.pi-map.md -- features/git - index: features/git/.pi-map.index.md - map: features/git/.pi-map.md -- features/mobile - index: features/mobile/.pi-map.index.md - map: features/mobile/.pi-map.md -- features/notification - index: features/notification/.pi-map.index.md - map: features/notification/.pi-map.md -- features/project - index: features/project/.pi-map.index.md - map: features/project/.pi-map.md -- features/session - index: features/session/.pi-map.index.md - map: features/session/.pi-map.md -- features/settings - index: features/settings/.pi-map.index.md - map: features/settings/.pi-map.md -- features/ssh-keys - index: features/ssh-keys/.pi-map.index.md - map: features/ssh-keys/.pi-map.md -- features/terminal - index: features/terminal/.pi-map.index.md - map: features/terminal/.pi-map.md -- features/tool - index: features/tool/.pi-map.index.md - map: features/tool/.pi-map.md -- features/tool-workshop - index: features/tool-workshop/.pi-map.index.md - map: features/tool-workshop/.pi-map.md -- features/workspace - index: features/workspace/.pi-map.index.md - map: features/workspace/.pi-map.md +- apps/web/src/components/features/config-profiles + index: apps/web/src/components/features/config-profiles/.pi-map.index.md + map: apps/web/src/components/features/config-profiles/.pi-map.md +- apps/web/src/components/features/git + index: apps/web/src/components/features/git/.pi-map.index.md + map: apps/web/src/components/features/git/.pi-map.md +- apps/web/src/components/features/mobile + index: apps/web/src/components/features/mobile/.pi-map.index.md + map: apps/web/src/components/features/mobile/.pi-map.md +- apps/web/src/components/features/notification + index: apps/web/src/components/features/notification/.pi-map.index.md + map: apps/web/src/components/features/notification/.pi-map.md +- apps/web/src/components/features/project + index: apps/web/src/components/features/project/.pi-map.index.md + map: apps/web/src/components/features/project/.pi-map.md +- apps/web/src/components/features/session + index: apps/web/src/components/features/session/.pi-map.index.md + map: apps/web/src/components/features/session/.pi-map.md +- apps/web/src/components/features/settings + index: apps/web/src/components/features/settings/.pi-map.index.md + map: apps/web/src/components/features/settings/.pi-map.md +- apps/web/src/components/features/ssh-keys + index: apps/web/src/components/features/ssh-keys/.pi-map.index.md + map: apps/web/src/components/features/ssh-keys/.pi-map.md +- apps/web/src/components/features/terminal + index: apps/web/src/components/features/terminal/.pi-map.index.md + map: apps/web/src/components/features/terminal/.pi-map.md +- apps/web/src/components/features/tool + index: apps/web/src/components/features/tool/.pi-map.index.md + map: apps/web/src/components/features/tool/.pi-map.md +- apps/web/src/components/features/tool-workshop + index: apps/web/src/components/features/tool-workshop/.pi-map.index.md + map: apps/web/src/components/features/tool-workshop/.pi-map.md +- apps/web/src/components/features/workspace + index: apps/web/src/components/features/workspace/.pi-map.index.md + map: apps/web/src/components/features/workspace/.pi-map.md ## files ## links -index: features/.pi-map.index.md -map: features/.pi-map.md +index: apps/web/src/components/features/.pi-map.index.md +map: apps/web/src/components/features/.pi-map.md ## workflows - ## dirty diff --git a/apps/web/src/components/features/.pi-map.md b/apps/web/src/components/features/.pi-map.md index ee6baf0..32f4478 100644 --- a/apps/web/src/components/features/.pi-map.md +++ b/apps/web/src/components/features/.pi-map.md @@ -1,13 +1,13 @@ -# features -dir: features +# apps/web/src/components/features +dir: apps/web/src/components/features -index: features/.pi-map.index.md +index: apps/web/src/components/features/.pi-map.index.md ## role -Contains modular, feature-based components that encapsulate specific domain functionality or user-facing capabilities within the project. +Contains reusable UI components organized by feature domain for the web application. ## files ## arch -Feature-based modular architecture with self-contained, cohesive units that likely combine related components, logic, and assets to support vertical slicing of application functionality. +Feature-based colocation pattern with domain-specific subdirectories grouping related components, likely using composition patterns with shared UI primitives. ## tags - ## symbols diff --git a/apps/web/src/components/features/mobile/.pi-map.index.md b/apps/web/src/components/features/mobile/.pi-map.index.md index 2ded892..c61099b 100644 --- a/apps/web/src/components/features/mobile/.pi-map.index.md +++ b/apps/web/src/components/features/mobile/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features/mobile ## role -Provides mobile-optimized UI components for a responsive web application, covering navigation, lists, detail views, forms, modals, and specialized terminal interfaces. +Provides a complete set of mobile-optimized UI components for core application patterns including navigation, lists, detail views, editing, modals, and specialized terminal interfaces. ## parent index: apps/web/src/components/features/.pi-map.index.md map: apps/web/src/components/features/.pi-map.md @@ -18,6 +18,7 @@ map: apps/web/src/components/features/.pi-map.md - mobile-page-header.tsx - mobile-terminal-header.tsx - mobile-terminal-wrapper.tsx +- spaces-bottom-sheet.tsx ## links index: apps/web/src/components/features/mobile/.pi-map.index.md map: apps/web/src/components/features/mobile/.pi-map.md diff --git a/apps/web/src/components/features/mobile/.pi-map.md b/apps/web/src/components/features/mobile/.pi-map.md index e7d049d..f593990 100644 --- a/apps/web/src/components/features/mobile/.pi-map.md +++ b/apps/web/src/components/features/mobile/.pi-map.md @@ -4,21 +4,22 @@ dir: apps/web/src/components/features/mobile index: apps/web/src/components/features/mobile/.pi-map.index.md ## role -Provides mobile-optimized UI components for a responsive web application, covering navigation, lists, detail views, forms, modals, and specialized terminal interfaces. +Provides a complete set of mobile-optimized UI components for core application patterns including navigation, lists, detail views, editing, modals, and specialized terminal interfaces. ## files - mobile-action-sheet.tsx | Renders a mobile-optimized action sheet modal with title, configurable action buttons, and cancel option. | exp: MobileActionSheetItem, func:MobileActionSheet({ isOpen, onClose, title, actions, }: MobileActionSheetProps), call:useRef, call:useEffect, call:onClose, call:document.addEventListener, call:document.removeEventListener, call:e.stopPropagation, call:actions.map, call:action.onClick | dep: react, ../../icon, icon - mobile-detail-view.tsx | A React component that renders a mobile-optimized detail view with a header (back button, title, edit/delete actions) and a field list supporting multiple value types (text, code, JSON, boolean). | exp: MobileDetailView | dep: ../../icon, react - mobile-edit-view.tsx | A React component that renders a mobile-optimized form for editing data with configurable field types and save/cancel actions. | exp: MobileEditView | dep: react - mobile-fab.tsx | Renders a floating action button component for mobile with an add icon and configurable click handler and label. | exp: MobileFAB | dep: ../../icon, react, icon -- mobile-list-view.tsx | Renders a searchable mobile-friendly list view with optional icons, subtitles, and click handling | exp: MobileListView | dep: ../../icon, ../../../utils/icons, react, icon, icons -- mobile-nav.tsx | Renders a mobile navigation bar with routing links, a tools group button that opens a bottom sheet, and session count badges | exp: MobileNav | dep: react, react-router-dom, ../../icon, ../tool/tools-bottom-sheet, ../../../utils/icons, icon, tools-bottom-sheet, icons utils +- mobile-list-view.tsx | Renders a mobile-optimized list view with optional search, custom item rendering, and empty state handling | exp: MobileListView | dep: react, ../../icon, ../../../utils/icons, icon +- mobile-nav.tsx | Renders a mobile navigation bar with route links and expandable bottom sheets for grouped navigation items. | exp: MobileNav | dep: react, react-router-dom, ../../icon, ../tool/tools-bottom-sheet, ./spaces-bottom-sheet, ../../../utils/icons - mobile-page-header.tsx | Renders a mobile-only page header with optional back navigation and custom actions. | exp: func:MobilePageHeader({ title, showBack = true, actions }: MobilePageHeaderProps), call:useNavigate, call:useMobileViewport, call:navigate | dep: react-router-dom, ../../../hooks/use-mobile-viewport, ../../icon, use-mobile-viewport hook, Icon component - mobile-terminal-header.tsx | Renders a mobile-responsive header for a terminal interface with navigation, title, connection status, font size controls, and close actions. | exp: MobileTerminalHeader | dep: react, ../../icon, icon - mobile-terminal-wrapper.tsx | Wraps a terminal component with mobile-specific UI including auto-hiding header, virtual keyboard handling, and special keys interface. | exp: MobileTerminalWrapper | dep: react, ../terminal/terminal, ./mobile-terminal-header, ../terminal/special-keys-strip, ../terminal/special-keys-panel, ../../../hooks/use-mobile-viewport, ../../../hooks/use-virtual-keyboard, ../../../hooks/use-auto-hide, ../../../hooks/use-special-keys +- spaces-bottom-sheet.tsx | Renders a mobile bottom sheet navigation menu for switching between "Projects" and "Workspaces" spaces with active state highlighting | exp: SpacesBottomSheet | dep: react-router-dom, ../../icon ## arch -Feature-based component organization with compound mobile UI patterns (action sheets, FABs, bottom sheets, auto-hiding headers) that mirror native mobile app paradigms, using configurable props for customization and likely React Context or hooks for keyboard/virtual terminal state management. +Composable mobile-first component library using bottom sheets, action sheets, and floating action buttons as primary mobile interaction patterns, with feature-specific wrappers that handle mobile concerns like virtual keyboards and auto-hiding headers. ## tags -mobile, terminal, view, icon, header, react, sheet, action +mobile, terminal, sheet, view, react, icon, header, renders ## symbols - MobileActionSheet - MobilePageHeader diff --git a/apps/web/src/components/features/mobile/mobile-list-view.tsx b/apps/web/src/components/features/mobile/mobile-list-view.tsx index 45dc438..a3b9a29 100644 --- a/apps/web/src/components/features/mobile/mobile-list-view.tsx +++ b/apps/web/src/components/features/mobile/mobile-list-view.tsx @@ -1,3 +1,4 @@ +import type { ReactNode } from "react"; import { Icon } from "../../icon"; import type { IconName } from "../../../utils/icons"; @@ -17,6 +18,7 @@ interface MobileListViewProps { emptyMessage?: string; searchPlaceholder?: string; onSearch?: (query: string) => void; + renderItem?: (item: MobileListItem) => ReactNode; } export const MobileListView: React.FC = ({ @@ -25,6 +27,7 @@ export const MobileListView: React.FC = ({ emptyMessage = "No items found", searchPlaceholder = "Search...", onSearch, + renderItem, }) => { return (
@@ -58,12 +61,16 @@ export const MobileListView: React.FC = ({
)} -
-
{item.title}
- {item.subtitle && ( -
{item.subtitle}
- )} -
+ {renderItem ? ( + renderItem(item) + ) : ( +
+
{item.title}
+ {item.subtitle && ( +
{item.subtitle}
+ )} +
+ )}
diff --git a/apps/web/src/components/features/mobile/mobile-nav.tsx b/apps/web/src/components/features/mobile/mobile-nav.tsx index 5edefd3..d89efbd 100644 --- a/apps/web/src/components/features/mobile/mobile-nav.tsx +++ b/apps/web/src/components/features/mobile/mobile-nav.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { NavLink, useLocation } from "react-router-dom"; import { Icon } from "../../icon"; import { ToolsBottomSheet } from "../tool/tools-bottom-sheet"; +import { SpacesBottomSheet } from "./spaces-bottom-sheet"; import type { IconName } from "../../../utils/icons"; interface MobileNavProps { @@ -13,26 +14,35 @@ interface NavItem { label: string; icon: IconName; isGroup?: boolean; + group?: "tools" | "spaces"; } const MOBILE_NAV_ITEMS: NavItem[] = [ { to: "/", label: "Home", icon: "dashboard" }, - { to: "/projects", label: "Projects", icon: "projects" }, { to: "/sessions", label: "Sessions", icon: "terminal" }, - { to: "/tools", label: "Tools", icon: "settings", isGroup: true }, + { to: "/spaces", label: "Spaces", icon: "projects", isGroup: true, group: "spaces" }, + { to: "/tools", label: "Tools", icon: "settings", isGroup: true, group: "tools" }, { to: "/settings", label: "Settings", icon: "settings" }, ]; export const MobileNav: React.FC = ({ sessionCount }) => { const location = useLocation(); const [toolsSheetOpen, setToolsSheetOpen] = useState(false); + const [spacesSheetOpen, setSpacesSheetOpen] = useState(false); const isToolsActive = location.pathname === "/tool-workshop" || location.pathname === "/config-profiles"; + const isSpacesActive = + location.pathname.startsWith("/projects") || + location.pathname.startsWith("/workspaces"); + const handleNavClick = (item: NavItem) => { - if (item.isGroup) { + if (!item.isGroup) return; + if (item.group === "spaces") { + setSpacesSheetOpen(true); + } else { setToolsSheetOpen(true); } }; @@ -42,10 +52,11 @@ export const MobileNav: React.FC = ({ sessionCount }) => {