From 1ae8d0e45f1c5d187912a9331980292907d8d91d Mon Sep 17 00:00:00 2001 From: Developer Date: Sat, 13 Jun 2026 21:45:33 +0000 Subject: [PATCH] fix: hide page title on mobile Profile view The mobile profile form already renders its own header via ProfileMobileView, so the desktop page title was redundant on small viewports. Quality gates: npm run typecheck, npm run lint Refs: openspec/changes/mobile-tool-profile-ui --- .pi-map.md | 4 ++-- 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/pages/.pi-map.index.md | 2 +- apps/web/src/pages/.pi-map.md | 10 +++++----- apps/web/src/pages/ProfilePage.tsx | 2 +- 9 files changed, 17 insertions(+), 17 deletions(-) diff --git a/.pi-map.md b/.pi-map.md index ecfa994..e13d4d8 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 -A self-hosted, containerized project management and Git repository platform with OAuth2/SSO authentication, designed for deployment via Docker Compose with optional Traefik reverse proxy integration. +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 @@ A self-hosted, containerized project management and Git repository platform with - 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 containerized architecture using PostgreSQL and Redis for persistence/caching, a decoupled frontend/backend web stack, environment-driven configuration via .env files, and infrastructure-as-code deployment patterns with Docker Compose profiles for standalone and reverse-proxy modes. +Containerized microservices architecture using Docker Compose with PostgreSQL/Redis data layer, Traefik reverse proxy for TLS/ingress, and environment-driven configuration across frontend/backend services. ## tags docker, redis, git, application, postgresql, compose, traefik, project ## symbols diff --git a/apps/.pi-map.md b/apps/.pi-map.md index 0453b66..ee59b25 100644 --- a/apps/.pi-map.md +++ b/apps/.pi-map.md @@ -4,10 +4,10 @@ dir: apps index: apps/.pi-map.index.md ## role -Container directory for individual deployable applications within the project. +Contains the main deployable application entry points and top-level configurations for the project. ## files ## arch -Monorepo-style organization where each subdirectory represents a standalone application sharing common infrastructure and dependencies. +Monorepo-style app separation with distinct application boundaries, likely sharing common libraries/modules while maintaining independent deployment artifacts. ## tags - ## symbols diff --git a/apps/web/.pi-map.index.md b/apps/web/.pi-map.index.md index 5435632..5595ada 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 for a browser-based code editing and terminal environment with client-side routing. +Frontend web application for a React-based developer workspace 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 20e9c70..3bb69f3 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 providing the user-facing interface for the "headquarter" project, built as a modern React SPA with code editing, terminal, and routing capabilities. +Frontend web application for a React-based developer workspace 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 providing the user-facing interface for the "headquarte - 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 React SPA architecture using Vite for build tooling, TypeScript for type safety, nginx for static serving with SPA routing support, and Docker multi-stage builds for containerized deployment with non-root security. +Modern Vite-based SPA with TypeScript, nginx reverse proxy serving, multi-stage Docker containerization, and client-side routing. ## 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 54a2642..5ab9050 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 -Entry point and core infrastructure for a React web application providing authentication-aware routing and shared type definitions. +Entry point and core infrastructure for a React web application handling authentication, routing, and domain type definitions. ## 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 da8121e..8a2f9b8 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. +Entry point and core infrastructure for a React web application handling authentication, routing, and domain type definitions. ## 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 React SPA architecture using React Router v6 with nested route layouts, provider composition pattern for auth/session context, and centralized TypeScript domain modeling. +Provider pattern wrapping React Router with nested route layouts, protected route guards, and centralized TypeScript type definitions for session-based auth and workspace/project domain models. ## tags pages, styles, css, router, react, session, dom, project ## symbols diff --git a/apps/web/src/pages/.pi-map.index.md b/apps/web/src/pages/.pi-map.index.md index c9e9886..e4d8b9d 100644 --- a/apps/web/src/pages/.pi-map.index.md +++ b/apps/web/src/pages/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/pages ## role -Contains top-level React page components that render the main views of the web application, each handling a specific domain area (workspaces, projects, git, settings, etc.) with responsive mobile/desktop layouts. +Contains top-level page components that serve as route endpoints for the web application, each managing a distinct functional domain of the developer workspace platform. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/pages/.pi-map.md b/apps/web/src/pages/.pi-map.md index 61a6a1b..19d2812 100644 --- a/apps/web/src/pages/.pi-map.md +++ b/apps/web/src/pages/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web/src/pages index: apps/web/src/pages/.pi-map.index.md ## role -Contains top-level React page components that render the main views of the web application, each handling a specific domain area (workspaces, projects, git, settings, etc.) with responsive mobile/desktop layouts. +Contains top-level page components that serve as route endpoints for the web application, each managing a distinct functional domain of the developer workspace platform. ## files - ConfigProfilesPage.tsx | Renders a responsive configuration profiles management page with sidebar list and editor panel for desktop, and a dedicated mobile view for creating, editing, and managing config profiles. | exp: ConfigProfilesPage | dep: react, ../components/data-states, ../hooks/use-mobile-viewport, ../hooks/use-config-profiles, ../components/features/config-profiles/ConfigProfileListSidebar, ../components/features/config-profiles/ConfigProfileEditorPanel, ../components/features/config-profiles/ConfigProfilesMobileView - DashboardPage.test.tsx | Unit tests for the DashboardPage component verifying overview loading and error retry behavior | dep: @testing-library/jest-dom/vitest, @testing-library/react, react-router-dom, vitest, ./DashboardPage, ../state/sessions, DashboardPage, SessionsProvider @@ -12,7 +12,7 @@ Contains top-level React page components that render the main views of the web a - GitHistoryPage.tsx | Renders a Git commit history page with branch selection, commit list with graph visualization, and a detail panel showing commit metadata, stats, and diffs. | exp: GitHistoryPage | dep: react, react-router-dom, ../api/git-repositories, ../components/data-states, ../components/icon, ../hooks/use-async-data - GitRepositoriesPage.tsx | Displays and manages a project's Git repositories with CRUD operations including listing, creating, navigating to history, and deleting with confirmation | exp: GitRepositoriesPage | dep: react, react-router-dom, ../api/git-repositories, ../components/data-states, ../components/icon, ../components/features/project/repository-create-dialog, ../hooks/use-async-data - PlaceholderPage.tsx | Exports three simple React page components (PlaceholderPage, NotFoundPage, LoginRedirectPage) for a frontend scaffold. | exp: PlaceholderPage, NotFoundPage, LoginRedirectPage | dep: ../components/icon, React -- ProfilePage.tsx | Renders a user profile page that supports viewing, editing, and saving profile data including name, email, and avatar upload, with responsive mobile/desktop layouts. | exp: ProfilePage | dep: react, ../api/profile, ../components/data-states, ../components/icon, ../components/features/profile/ProfileMobileView, ../state/auth, ../hooks/use-async-data, ../hooks/use-mobile-viewport +- ProfilePage.tsx | A React component that renders a responsive profile page with form editing, avatar upload, and save functionality for both mobile and desktop viewports. | exp: ProfilePage | dep: react, ../api/profile, ../components/data-states, ../components/icon, ../components/features/profile/ProfileMobileView, ../state/auth, ../hooks/use-async-data, ../hooks/use-mobile-viewport - ProjectSettingsPage.tsx | Renders a project settings page with tabbed navigation for general settings, repositories, and members, including project data fetching, editing, and deletion capabilities. | exp: ProjectSettingsPage | dep: react, react-router-dom, ../components/features/settings/settings-tab-layout, ../components/features/project/repositories-settings-tab, ../api/client, ../types - ProjectsPage.test.tsx | Unit tests for the ProjectsPage component covering loading, empty, error, create, edit, and delete states with API mocking. | dep: @testing-library/react, react-router-dom, vitest, ./ProjectsPage, ../api/projects, ProjectsPage - ProjectsPage.tsx | Renders a responsive projects management page with separate mobile and desktop layouts, supporting project CRUD operations, repository management, and workspace actions. | exp: ProjectsPage | dep: react, ../components/data-states, ../components/icon, ../hooks/use-mobile-viewport, ../components/features/project/ProjectCard, ../components/features/project/ProjectDialog, ../components/features/project/repository-create-dialog, ../components/features/mobile/mobile-list-view, ../components/features/mobile/mobile-fab, ../hooks/use-projects, ../types, use-mobile-viewport, use-projects, data-states, icon, ProjectCard, ProjectDialog, RepositoryCreateDialog, MobileListView, MobileFAB @@ -20,14 +20,14 @@ Contains top-level React page components that render the main views of the web a - SettingsPage.tsx | A React settings page component that loads, displays, and manages user configuration with tabbed navigation and nested outlet for child routes. | exp: SettingsPage | dep: react, react-router-dom, ../api/settings, ../components/data-states, ../hooks/use-async-data, ../components/features/settings/GeneralSettingsTab - SshKeysPage.tsx | React page component for managing SSH keys including generation, listing, signing, verification, and deletion | exp: SSHKeysPage | dep: react-router-dom, ../components/data-states, ../hooks/use-ssh-keys, ../components/features/ssh-keys/SSHKeyCreateForm, ../components/features/ssh-keys/SSHKeyList - TerminalPage.tsx | Renders a responsive terminal page that switches between mobile and desktop views based on device type, managing terminal sessions and their interactions. | exp: TerminalPage | dep: react, ../hooks/use-terminal-page, ../components/features/terminal/MobileTerminalView, ../components/features/terminal/DesktopTerminalView, useTerminalPage hook, MobileTerminalView, DesktopTerminalView -- ToolWorkshopPage.tsx | Renders a responsive tool workshop page with sidebar navigation and editor panel for managing tool types, adapting layout for mobile and desktop viewports. | exp: ToolWorkshopPage | dep: ../components/data-states, ../hooks/use-mobile-viewport, ../hooks/use-tool-workshop, ../components/features/tool-workshop/ToolTypeListSidebar, ../components/features/tool-workshop/ToolTypeEditorPanel, ../components/features/tool-workshop/ToolWorkshopMobileView, react, use-mobile-viewport, use-tool-workshop, data-states, tool-workshop components +- ToolWorkshopPage.tsx | Renders a responsive tool workshop page with sidebar navigation and editor panel for managing tool types, with mobile-specific view switching | exp: ToolWorkshopPage | dep: ../components/data-states, ../hooks/use-mobile-viewport, ../hooks/use-tool-workshop, ../components/features/tool-workshop/ToolTypeListSidebar, ../components/features/tool-workshop/ToolTypeEditorPanel, ../components/features/tool-workshop/ToolWorkshopMobileView, react - WorkspaceDetailPage.test.tsx | Tests the WorkspaceDetailPage component rendering and tab switching behavior | dep: @testing-library/jest-dom/vitest, @testing-library/react, react-router-dom, vitest, ./WorkspaceDetailPage, @testing-library/jest-dom, WorkspaceDetailPage, use-workspaces, use-workspace-files, use-workspace-git, use-workspace-instances, use-mobile-viewport - WorkspaceDetailPage.tsx | Renders a workspace detail page with tab-based navigation for files, git, tools, and settings panels, with mobile-responsive layout. | exp: func:WorkspaceDetailPage(), call:useParams, call:useState, call:useMobileViewport, call:useWorkspaces, call:workspaces.find | dep: react, react-router-dom, ../hooks/use-workspaces, ../hooks/use-mobile-viewport, ../components/features/workspace/workspace-detail-header, ../components/features/workspace/workspace-tab-bar, ../components/features/workspace/workspace-file-panel, ../components/features/workspace/workspace-git-panel, ../components/features/workspace/workspace-tools-panel, ../components/features/workspace/workspace-settings-panel, use-workspaces, use-mobile-viewport, workspace-detail-header, workspace-tab-bar, workspace-file-panel, workspace-git-panel, workspace-tools-panel, workspace-settings-panel - WorkspacesPage.tsx | Renders a responsive workspaces management page with mobile and desktop views supporting listing, creating, viewing details, syncing, deleting, and starting tools for workspaces. | exp: func:WorkspacesPage(), call:useMobileViewport, call:useState, call:useWorkspaces, call:useWorkspaceActions, call:actions.delete, call:actions.sync, call:setMobileView, call:refresh, call:setStartWorkspace, call:handleDelete, call:setSelectedWorkspace, call:workspaces.map, call:e.stopPropagation, call:setShowCreate | dep: react, ../components/icon, ../hooks/use-mobile-viewport, ../hooks/use-workspaces, ../hooks/use-workspace-actions, ../components/features/workspace/workspace-card, ../components/features/workspace/workspace-create-form, ../components/features/mobile/mobile-detail-view, ../components/features/mobile/mobile-fab, ../components/features/tool/tool-starter, ../types/workspace ## arch -Follows a page-based routing architecture where each file corresponds to a route; uses responsive design patterns with explicit mobile/desktop view branching, tabbed navigation for complex pages, polling for real-time data, and direct API integration with loading/error states rather than a centralized state management layer. +Follows a page-based routing architecture with responsive mobile/desktop split layouts, heavy use of tabbed navigation and sidebar+editor panel patterns, polling-based real-time data updates, and CRUD-heavy container components with embedded API logic. ## tags -page, components, workspace, features, mobile, react, hooks, settings +page, components, workspace, features, react, mobile, hooks, settings ## symbols - WorkspaceDetailPage - WorkspacesPage diff --git a/apps/web/src/pages/ProfilePage.tsx b/apps/web/src/pages/ProfilePage.tsx index 58d3968..785cd14 100644 --- a/apps/web/src/pages/ProfilePage.tsx +++ b/apps/web/src/pages/ProfilePage.tsx @@ -93,7 +93,7 @@ export const ProfilePage = () => { return (
-

Profile

+ {!isMobile &&

Profile

} {displayStatus === "loading" && }