From 34ef562bc19beb88b85f31bfc8eea0ee3ced87bd Mon Sep 17 00:00:00 2001 From: Luciano Castillo <2213102+luccast@users.noreply.github.com> Date: Mon, 2 Feb 2026 11:04:09 -0500 Subject: [PATCH] Mobile support for workspace view + UI improvements (#33) * feat: implement starred files functionality in workspace - Added state management for starred files, allowing users to star and unstar files. - Updated local storage handling to persist starred files across sessions. - Enhanced sidebar to display starred files, with a collapsed view for better accessibility. - Refactored sidebar animation logic for improved performance and user experience. * feat: enhance FileTree component with starring functionality - Added support for starring and unstarring files within the FileTree component. - Integrated starred files state management in the WorkspacePage, persisting changes to local storage. - Updated UI to display starred files in a dedicated section with both collapsed and expanded views. - Refactored FileTree and FileTreeItem components to accommodate new props for starring functionality. * refactor: remove starring functionality from FileTree and update MarkdownViewer - Removed starred file management from FileTree and FileTreeItem components. - Updated MarkdownViewer to include starring functionality with a star button. - Adjusted WorkspacePage to handle starred files display and interactions. - Cleaned up related props and UI elements for improved clarity and performance. * feat: add mobile components and safe area padding for improved mobile experience - Introduced MobileBottomToolbar, MobileFileDrawer, and MobilePathSheet components for enhanced mobile functionality. - Updated WorkspacePage to conditionally render mobile components based on device type. - Added safe area padding in styles.css to accommodate iOS devices. * feat: update MobileBottomToolbar to include currentPath prop and enhance UI elements - Added currentPath prop to MobileBottomToolbar for displaying the current workspace path. - Improved button styles and layout for better mobile usability. - Adjusted icon sizes and spacing for a more consistent appearance across buttons. * fix: update text color in MobileBottomToolbar based on currentPath prop - Changed text color in the MobileBottomToolbar to reflect the presence of currentPath, enhancing visual feedback for users. - Ensured consistency in UI elements for improved user experience. * feat: enhance MobilePathSheet and WorkspacePage with validation logic - Added validatedPath and pathValid props to MobilePathSheet for improved path validation handling. - Updated button states in MobilePathSheet and WorkspacePage to reflect path validation status, enhancing user feedback. - Improved input styling and layout for better usability on mobile devices. * feat: integrate NavTabs component into MonitorPage and WorkspacePage - Replaced existing navigation tab implementation with the new NavTabs component for a consistent UI across pages. - Simplified the navigation structure by removing redundant tab elements while maintaining connection status visibility. * refactor: simplify SessionList component structure and improve UI transitions - Replaced motion.button with a standard button for better performance. - Enhanced header and search input visibility with smoother opacity transitions. - Updated platform filter buttons to improve accessibility and visual feedback. - Refactored session list rendering for improved animation consistency and clarity. * refactor: improve SessionList and NavTabs components for better UI and functionality - Enhanced SessionList component with improved header visibility and transition effects. - Updated NavTabs to include dropdown functionality with better accessibility and user interaction. - Refactored styles for both components to ensure consistency and responsiveness across different states. * refactor: update NavTabs component styles for improved UI consistency - Increased font size for terminal header and footer text for better readability. - Removed decorative dots from the terminal header to streamline the design. - Adjusted padding in the terminal footer for a more balanced layout. * fix: remove workspace sidebar scrollbar * feat: add mobile components to MonitorPage for enhanced mobile experience - Introduced MobileSessionDrawer and MobileMonitorToolbar components for improved mobile functionality. - Updated MonitorPage to conditionally render mobile components based on device type. - Enhanced layout and state management for mobile interactions. --- .../monitor/MobileMonitorToolbar.tsx | 87 ++++ .../monitor/MobileSessionDrawer.tsx | 374 ++++++++++++++++++ src/components/monitor/SessionList.tsx | 166 ++++---- src/components/monitor/SettingsPanel.tsx | 3 +- src/components/monitor/index.ts | 2 + src/components/navigation/NavTabs.tsx | 173 ++++++++ src/components/navigation/index.ts | 1 + src/components/workspace/FileTree.tsx | 2 +- src/components/workspace/MarkdownViewer.tsx | 21 +- .../workspace/MobileBottomToolbar.tsx | 61 +++ src/components/workspace/MobileFileDrawer.tsx | 146 +++++++ src/components/workspace/MobilePathSheet.tsx | 132 +++++++ src/components/workspace/index.ts | 3 + src/hooks/useIsMobile.ts | 17 + src/routes/monitor/index.tsx | 75 ++-- src/routes/workspace/index.tsx | 353 ++++++++++++----- src/styles.css | 5 + 17 files changed, 1407 insertions(+), 214 deletions(-) create mode 100644 src/components/monitor/MobileMonitorToolbar.tsx create mode 100644 src/components/monitor/MobileSessionDrawer.tsx create mode 100644 src/components/navigation/NavTabs.tsx create mode 100644 src/components/navigation/index.ts create mode 100644 src/components/workspace/MobileBottomToolbar.tsx create mode 100644 src/components/workspace/MobileFileDrawer.tsx create mode 100644 src/components/workspace/MobilePathSheet.tsx create mode 100644 src/hooks/useIsMobile.ts diff --git a/src/components/monitor/MobileMonitorToolbar.tsx b/src/components/monitor/MobileMonitorToolbar.tsx new file mode 100644 index 0000000..adce87a --- /dev/null +++ b/src/components/monitor/MobileMonitorToolbar.tsx @@ -0,0 +1,87 @@ +import { motion } from 'framer-motion' +import { PanelLeft, Settings, Trash2 } from 'lucide-react' +import { StatusIndicator } from './StatusIndicator' + +interface MobileMonitorToolbarProps { + onOpenDrawer: () => void + onOpenSettings: () => void + connected: boolean + connecting: boolean + sessionCount: number + actionCount: number + completedCount: number + onClearCompleted: () => void +} + +export function MobileMonitorToolbar({ + onOpenDrawer, + onOpenSettings, + connected, + connecting, + sessionCount, + actionCount, + completedCount, + onClearCompleted, +}: MobileMonitorToolbarProps) { + return ( + +
+
+ {/* Sessions button */} + + + {/* Stats display */} +
+
+ + + {connecting ? 'connecting' : connected ? 'connected' : 'offline'} + +
+
+
+ {actionCount} + acts +
+
+ + {/* Clear completed button */} + {completedCount > 0 && ( + + )} + + {/* Settings button */} + +
+
+ + ) +} diff --git a/src/components/monitor/MobileSessionDrawer.tsx b/src/components/monitor/MobileSessionDrawer.tsx new file mode 100644 index 0000000..3fa5343 --- /dev/null +++ b/src/components/monitor/MobileSessionDrawer.tsx @@ -0,0 +1,374 @@ +import { useMemo, useState } from 'react' +import { motion, AnimatePresence } from 'framer-motion' +import { X, Users, ChevronDown, Github, Search } from 'lucide-react' +import { StatusIndicator } from './StatusIndicator' +import type { MonitorSession } from '~/integrations/openclaw' + +function isSubagent(session: MonitorSession): boolean { + return Boolean(session.spawnedBy) || session.platform === 'subagent' || session.key.includes('subagent') +} + +function XIcon({ size = 14, className }: { size?: number; className?: string }) { + return ( + + ) +} + +const platformEmoji: Record = { + whatsapp: '💬', + telegram: '✈️', + discord: '🎮', + slack: '💼', +} + +interface MobileSessionDrawerProps { + open: boolean + onClose: () => void + sessions: MonitorSession[] + selectedKey: string | null + onSelect: (key: string) => void +} + +function SubagentItem({ + session, + selected, + onSelect, +}: { + session: MonitorSession + selected: boolean + onSelect: (key: string) => void +}) { + return ( + + ) +} + +export function MobileSessionDrawer({ + open, + onClose, + sessions, + selectedKey, + onSelect, +}: MobileSessionDrawerProps) { + const [filter, setFilter] = useState('') + const [platformFilter, setPlatformFilter] = useState(null) + const [collapsedGroups, setCollapsedGroups] = useState>(new Set()) + + const parentSessions = sessions.filter((s) => !isSubagent(s)) + const platforms = [...new Set(parentSessions.map((s) => s.platform))] + + const filteredParents = parentSessions.filter((session) => { + const matchesText = + !filter || + session.recipient.toLowerCase().includes(filter.toLowerCase()) || + session.agentId.toLowerCase().includes(filter.toLowerCase()) + const matchesPlatform = !platformFilter || session.platform === platformFilter + return matchesText && matchesPlatform + }) + + const sortedParents = [...filteredParents].sort((a, b) => { + if (a.status !== 'idle' && b.status === 'idle') return -1 + if (a.status === 'idle' && b.status !== 'idle') return 1 + return b.lastActivityAt - a.lastActivityAt + }) + + const { subagentsByParent, orphanSubagents } = useMemo(() => { + const byParent = new Map() + const orphans: MonitorSession[] = [] + const parentKeys = new Set(parentSessions.map((s) => s.key)) + + for (const session of sessions) { + if (!isSubagent(session)) continue + const matchesFilter = + !filter || + session.agentId.toLowerCase().includes(filter.toLowerCase()) || + 'subagent'.includes(filter.toLowerCase()) + if (!matchesFilter) continue + + if (session.spawnedBy && parentKeys.has(session.spawnedBy)) { + const list = byParent.get(session.spawnedBy) ?? [] + list.push(session) + byParent.set(session.spawnedBy, list) + } else { + orphans.push(session) + } + } + + for (const [key, list] of byParent) { + list.sort((a, b) => b.lastActivityAt - a.lastActivityAt) + byParent.set(key, list) + } + orphans.sort((a, b) => b.lastActivityAt - a.lastActivityAt) + + return { subagentsByParent: byParent, orphanSubagents: orphans } + }, [sessions, parentSessions, filter]) + + const handleSelect = (key: string) => { + onSelect(key) + onClose() + } + + return ( + + {open && ( + <> + {/* Backdrop */} + + + {/* Sheet - slides up from bottom */} + + {/* Drag handle */} +
+
+
+ + {/* Header */} +
+

+ Sessions +

+ +
+ + {/* Search */} +
+
+ + setFilter(e.target.value)} + className="w-full bg-shell-800 border border-shell-700 rounded-lg pl-9 pr-3 py-2.5 text-sm font-console text-gray-200 placeholder-shell-500 focus:outline-none focus:border-crab-500" + /> +
+ + {/* Platform filters */} + {platforms.length > 1 && ( +
+ + {platforms.map((p) => ( + + ))} +
+ )} +
+ + {/* Session list */} +
+ + {sortedParents.map((session) => ( + + + + {/* Nested subagents */} + {(() => { + const subs = subagentsByParent.get(session.key) + if (!subs?.length) return null + const isGroupCollapsed = collapsedGroups.has(session.key) + return ( + <> + + + {subs.map((sub) => ( + + ))} + + + ) + })()} + + ))} + + {/* Orphan subagents */} + {orphanSubagents.map((sub) => ( + + + + ))} + + + {sortedParents.length === 0 && orphanSubagents.length === 0 && ( +
+
+ > no sessions found +
+
+ )} +
+ + {/* Footer */} + + + + )} + + ) +} diff --git a/src/components/monitor/SessionList.tsx b/src/components/monitor/SessionList.tsx index 62f21ee..bed66e5 100644 --- a/src/components/monitor/SessionList.tsx +++ b/src/components/monitor/SessionList.tsx @@ -57,9 +57,7 @@ function SubagentItem({ onSelect: (key: string) => void; }) { return ( - onSelect(session.key)} className={`w-full text-left border-b border-shell-800/50 transition-all duration-150 group ${ collapsed ? "p-2" : "py-2 pr-3 pl-6" @@ -89,7 +87,7 @@ function SubagentItem({
)} - + ); } @@ -168,16 +166,18 @@ export function SessionList({
{/* Header */} -
-
- {!collapsed && ( -

- Sessions -

- )} +
+
+

+ Sessions +

- {/* Search input - hidden when collapsed */} - {!collapsed && ( - <> -
- setFilter(e.target.value)} - className="input-retro w-full pl-9 pr-3 py-2 text-xs" - /> -
+ {/* Search input - fades when collapsed */} +
+
+ setFilter(e.target.value)} + className="input-retro w-full pl-9 pr-3 py-2 text-xs" + tabIndex={collapsed ? -1 : 0} + /> +
- {/* Platform filters */} - {platforms.length > 1 && ( -
+ {/* Platform filters */} + {platforms.length > 1 && ( +
+ + {platforms.map((p) => ( - {platforms.map((p) => ( - - ))} -
- )} - - )} + ))} +
+ )} +
{/* Session list */}
- + {sortedParents.map((session) => ( -
- +
)} - + {/* Nested subagents */} {(() => { @@ -314,12 +321,12 @@ export function SessionList({ } flex items-center gap-1.5 text-xs font-display uppercase tracking-widest text-shell-500 hover:text-shell-300 hover:bg-shell-800/30`} > - {!collapsed && ( - {subs.length} subagent{subs.length > 1 ? "s" : ""} - )} + + {subs.length} subagent{subs.length > 1 ? "s" : ""} + ); })()} -
+ ))} {/* Orphan subagents */} {orphanSubagents.map((sub) => ( - + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + transition={{ duration: 0.15 }} + > + + ))} - {sortedParents.length === 0 && orphanSubagents.length === 0 && !collapsed && ( -
+ {sortedParents.length === 0 && orphanSubagents.length === 0 && ( +
> no sessions found
@@ -368,10 +382,8 @@ export function SessionList({
{/* Footer */} -
-
+ diff --git a/src/components/monitor/SettingsPanel.tsx b/src/components/monitor/SettingsPanel.tsx index fee7808..b99c4c2 100644 --- a/src/components/monitor/SettingsPanel.tsx +++ b/src/components/monitor/SettingsPanel.tsx @@ -54,9 +54,10 @@ export function SettingsPanel({ return ( <> + {/* Trigger button - hidden on mobile, settings available in bottom bar */} diff --git a/src/components/monitor/index.ts b/src/components/monitor/index.ts index 1b4d743..fd8e5b8 100644 --- a/src/components/monitor/index.ts +++ b/src/components/monitor/index.ts @@ -6,3 +6,5 @@ export { ExecNode } from './ExecNode' export { CrabNode } from './CrabNode' export { StatusIndicator } from './StatusIndicator' export { SettingsPanel } from './SettingsPanel' +export { MobileSessionDrawer } from './MobileSessionDrawer' +export { MobileMonitorToolbar } from './MobileMonitorToolbar' diff --git a/src/components/navigation/NavTabs.tsx b/src/components/navigation/NavTabs.tsx new file mode 100644 index 0000000..69f3412 --- /dev/null +++ b/src/components/navigation/NavTabs.tsx @@ -0,0 +1,173 @@ +import { useState, useRef, useEffect } from 'react' +import { useLocation, useNavigate } from '@tanstack/react-router' +import { motion, AnimatePresence } from 'framer-motion' +import { Activity, FolderTree, ChevronDown, Terminal } from 'lucide-react' + +interface NavTab { + path: string + label: string + icon: React.ReactNode +} + +const TABS: NavTab[] = [ + { + path: '/monitor', + label: 'MONITOR', + icon: , + }, + { + path: '/workspace', + label: 'WORKSPACE', + icon: , + }, +] + +export function NavTabs() { + const [open, setOpen] = useState(false) + const location = useLocation() + const navigate = useNavigate() + const dropdownRef = useRef(null) + const currentPath = location.pathname.replace(/\/$/, '') || '/' + + const activeTab = (TABS.find( + (tab) => tab.path === currentPath || currentPath.startsWith(tab.path) + ) ?? TABS[0])! + + // Close on outside click + useEffect(() => { + function handleClickOutside(e: MouseEvent) { + if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { + setOpen(false) + } + } + if (open) { + document.addEventListener('mousedown', handleClickOutside) + return () => document.removeEventListener('mousedown', handleClickOutside) + } + }, [open]) + + // Close on escape + useEffect(() => { + function handleEscape(e: KeyboardEvent) { + if (e.key === 'Escape') setOpen(false) + } + if (open) { + document.addEventListener('keydown', handleEscape) + return () => document.removeEventListener('keydown', handleEscape) + } + }, [open]) + + const handleSelect = (path: string) => { + setOpen(false) + navigate({ to: path }) + } + + return ( +
+ {/* Trigger button */} + + + {/* Dropdown menu */} + + {open && ( + <> + {/* Backdrop */} + setOpen(false)} + /> + + {/* Dropdown panel */} + + {/* Terminal-style container */} +
+ {/* Terminal header */} +
+ + + navigate + +
+ + {/* Menu items */} +
+ {TABS.map((tab, index) => { + const isActive = + tab.path === currentPath || currentPath.startsWith(tab.path) + + return ( + handleSelect(tab.path)} + className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md transition-all group ${ + isActive + ? 'bg-crab-500/10 text-crab-400' + : 'text-shell-400 hover:bg-shell-800 hover:text-shell-200' + }`} + > + {/* Icon */} + + {tab.icon} + + + {/* Label */} + + {tab.label} + + + {/* Active indicator */} + {isActive && ( + + )} + + ) + })} +
+ + {/* Terminal footer with hint */} +
+ + esc to close + +
+
+ + + )} + +
+ ) +} diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts new file mode 100644 index 0000000..dca548c --- /dev/null +++ b/src/components/navigation/index.ts @@ -0,0 +1 @@ +export { NavTabs } from './NavTabs' diff --git a/src/components/workspace/FileTree.tsx b/src/components/workspace/FileTree.tsx index 7ff6fa6..f0a2ffd 100644 --- a/src/components/workspace/FileTree.tsx +++ b/src/components/workspace/FileTree.tsx @@ -90,7 +90,7 @@ function FileTreeItem({ entry, selectedPath, onSelect, onLoadDirectory, level }: void } // Format file size to human-readable format @@ -45,7 +48,7 @@ function formatModifiedDate(date: Date | undefined): string { } } -export function MarkdownViewer({ content, fileName, fileSize, fileModified, error }: MarkdownViewerProps) { +export function MarkdownViewer({ content, fileName, filePath, fileSize, fileModified, error, isStarred, onStar }: MarkdownViewerProps) { const isMarkdown = useMemo(() => { return fileName.toLowerCase().endsWith('.md') || fileName.toLowerCase().endsWith('.markdown') }, [fileName]) @@ -96,6 +99,20 @@ export function MarkdownViewer({ content, fileName, fileSize, fileModified, erro
{/* File header */}
+ {/* Star button */} + {filePath && onStar && ( + + )}

{fileName}

{isMarkdown && ( diff --git a/src/components/workspace/MobileBottomToolbar.tsx b/src/components/workspace/MobileBottomToolbar.tsx new file mode 100644 index 0000000..ad09360 --- /dev/null +++ b/src/components/workspace/MobileBottomToolbar.tsx @@ -0,0 +1,61 @@ +import { motion } from 'framer-motion' +import { PanelLeft, FolderOpen, RefreshCw } from 'lucide-react' + +interface MobileBottomToolbarProps { + onOpenDrawer: () => void + onOpenPathSheet: () => void + onRefresh: () => void + loading: boolean + pathValid: boolean + currentPath: string +} + +export function MobileBottomToolbar({ + onOpenDrawer, + onOpenPathSheet, + onRefresh, + loading, + pathValid, + currentPath, +}: MobileBottomToolbarProps) { + return ( + +
+
+ {/* Files button */} + + + {/* Path input field */} + + + {/* Refresh button */} + +
+
+ + ) +} diff --git a/src/components/workspace/MobileFileDrawer.tsx b/src/components/workspace/MobileFileDrawer.tsx new file mode 100644 index 0000000..d632e3a --- /dev/null +++ b/src/components/workspace/MobileFileDrawer.tsx @@ -0,0 +1,146 @@ +import { motion, AnimatePresence } from 'framer-motion' +import { X, FileText, Star } from 'lucide-react' +import { FileTree } from './FileTree' +import type { DirectoryEntry } from '~/lib/workspace-fs' + +interface MobileFileDrawerProps { + open: boolean + onClose: () => void + entries: DirectoryEntry[] + selectedPath: string | null + starredPaths: Set + workspacePath: string + pathValid: boolean + onSelect: (path: string, type: 'file' | 'directory') => void + onLoadDirectory: (path: string) => Promise + onStar: (path: string) => void +} + +export function MobileFileDrawer({ + open, + onClose, + entries, + selectedPath, + starredPaths, + workspacePath, + pathValid, + onSelect, + onLoadDirectory, + onStar, +}: MobileFileDrawerProps) { + // Handle file select with auto-close + const handleSelect = (path: string, type: 'file' | 'directory') => { + onSelect(path, type) + if (type === 'file') { + onClose() + } + } + + return ( + + {open && ( + <> + {/* Backdrop */} + + + {/* Drawer */} + + {/* Header */} +
+ + Files + + +
+ + {/* Starred files section */} + {starredPaths.size > 0 && ( +
+ {[...starredPaths].map((filePath) => { + const fileName = filePath.split('/').pop() || filePath + const ext = fileName.includes('.') ? '.' + fileName.split('.').pop() : '' + const isSelected = selectedPath === filePath + return ( +
handleSelect(filePath, 'file')} + > + + + {fileName} + + +
+ ) + })} +
+ )} + + {/* File tree */} +
+ {pathValid ? ( + + ) : ( +
+

+ Set a workspace path to browse files +

+
+ )} +
+ + {/* Footer with path */} + {pathValid && ( +
+

+ {workspacePath} +

+
+ )} + + + )} + + ) +} diff --git a/src/components/workspace/MobilePathSheet.tsx b/src/components/workspace/MobilePathSheet.tsx new file mode 100644 index 0000000..9b9a68d --- /dev/null +++ b/src/components/workspace/MobilePathSheet.tsx @@ -0,0 +1,132 @@ +import { useRef, useEffect, useState } from 'react' +import { motion, AnimatePresence } from 'framer-motion' +import { FolderOpen, AlertCircle } from 'lucide-react' + +interface MobilePathSheetProps { + open: boolean + onClose: () => void + initialPath: string + validatedPath: string + pathValid: boolean + pathError: string | null + onValidate: (path: string) => Promise +} + +export function MobilePathSheet({ + open, + onClose, + initialPath, + validatedPath, + pathValid, + pathError, + onValidate, +}: MobilePathSheetProps) { + const inputRef = useRef(null) + const [pathInput, setPathInput] = useState(initialPath) + const [loading, setLoading] = useState(false) + + // Sync initial path when it changes + useEffect(() => { + setPathInput(initialPath) + }, [initialPath]) + + // Auto-focus input after animation + useEffect(() => { + if (open) { + const timer = setTimeout(() => { + inputRef.current?.focus() + }, 100) + return () => clearTimeout(timer) + } + }, [open]) + + const handleSubmit = async () => { + if (!pathInput.trim() || loading) return + setLoading(true) + try { + const success = await onValidate(pathInput) + if (success) { + onClose() + } + } finally { + setLoading(false) + } + } + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleSubmit() + } + } + + return ( + + {open && ( + <> + {/* Backdrop */} + + + {/* Sheet */} + + {/* Drag handle */} +
+
+
+ + {/* Content */} +
+

+ Workspace Path +

+ +
+ + setPathInput(e.target.value)} + onKeyDown={handleKeyDown} + placeholder="Enter workspace path..." + className="flex-1 bg-shell-800 border border-shell-700 rounded-lg px-4 py-3 text-base font-console text-gray-200 placeholder-shell-500 focus:outline-none focus:border-crab-500" + /> +
+ + {pathError && ( +
+ + {pathError} +
+ )} + + +
+ + + )} + + ) +} diff --git a/src/components/workspace/index.ts b/src/components/workspace/index.ts index c087757..9ed7874 100644 --- a/src/components/workspace/index.ts +++ b/src/components/workspace/index.ts @@ -1,2 +1,5 @@ export { FileTree } from './FileTree' export { MarkdownViewer } from './MarkdownViewer' +export { MobileBottomToolbar } from './MobileBottomToolbar' +export { MobileFileDrawer } from './MobileFileDrawer' +export { MobilePathSheet } from './MobilePathSheet' diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 0000000..616ebe0 --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,17 @@ +import { useState, useEffect } from 'react' + +export function useIsMobile(breakpoint = 640) { + const [isMobile, setIsMobile] = useState(false) + + useEffect(() => { + const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`) + setIsMobile(mql.matches) + + const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches) + mql.addEventListener('change', handler) + + return () => mql.removeEventListener('change', handler) + }, [breakpoint]) + + return isMobile +} diff --git a/src/routes/monitor/index.tsx b/src/routes/monitor/index.tsx index 559b1a9..22fc577 100644 --- a/src/routes/monitor/index.tsx +++ b/src/routes/monitor/index.tsx @@ -4,6 +4,7 @@ import { useLiveQuery } from '@tanstack/react-db' import { motion } from 'framer-motion' import { ArrowLeft, Loader2, HardDrive, Trash2 } from 'lucide-react' import { trpc } from '~/integrations/trpc/client' +import { NavTabs } from '~/components/navigation' import { sessionsCollection, actionsCollection, @@ -21,8 +22,11 @@ import { SessionList, SettingsPanel, StatusIndicator, + MobileSessionDrawer, + MobileMonitorToolbar, } from '~/components/monitor' import { CrabIdleAnimation } from '~/components/ani' +import { useIsMobile } from '~/hooks/useIsMobile' export const Route = createFileRoute('/monitor/')({ component: MonitorPageWrapper, @@ -83,6 +87,10 @@ function MonitorPage() { // Settings panel state const [settingsOpen, setSettingsOpen] = useState(false) + // Mobile state + const isMobile = useIsMobile() + const [sessionDrawerOpen, setSessionDrawerOpen] = useState(false) + // Live queries from TanStack DB collections const sessionsQuery = useLiveQuery(sessionsCollection) const actionsQuery = useLiveQuery(actionsCollection) @@ -379,27 +387,11 @@ function MonitorPage() { {/* Navigation tabs */} -
- {/* Monitor tab - active */} -
-
- -
- - MONITOR - - -
+ - {/* Workspace tab - inactive */} - - - WORKSPACE - - + {/* Connection status */} +
+
@@ -495,17 +487,19 @@ function MonitorPage() { {/* Main content */}
- {/* Sidebar */} - + {/* Sidebar - desktop only */} + {!isMobile && ( + + )} {/* Graph area */} -
+
+ + {/* Mobile components */} + {isMobile && ( + <> + setSessionDrawerOpen(true)} + onOpenSettings={() => setSettingsOpen(true)} + connected={connected} + connecting={connecting} + sessionCount={sessions.length} + actionCount={actions.length} + completedCount={completedCount} + onClearCompleted={handleClearCompleted} + /> + setSessionDrawerOpen(false)} + sessions={sessions} + selectedKey={selectedSession} + onSelect={setSelectedSession} + /> + + )}
) } diff --git a/src/routes/workspace/index.tsx b/src/routes/workspace/index.tsx index 87c3752..2b380fa 100644 --- a/src/routes/workspace/index.tsx +++ b/src/routes/workspace/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useCallback } from 'react' import { createFileRoute, Link } from '@tanstack/react-router' -import { motion, AnimatePresence } from 'framer-motion' +import { motion } from 'framer-motion' import { ArrowLeft, FolderOpen, @@ -8,10 +8,20 @@ import { AlertCircle, PanelLeft, PanelLeftClose, + Star, + FileText, } from 'lucide-react' import { trpc } from '~/integrations/trpc/client' -import { FileTree, MarkdownViewer } from '~/components/workspace' +import { + FileTree, + MarkdownViewer, + MobileBottomToolbar, + MobileFileDrawer, + MobilePathSheet, +} from '~/components/workspace' +import { NavTabs } from '~/components/navigation' import { CrabIdleAnimation } from '~/components/ani' +import { useIsMobile } from '~/hooks/useIsMobile' import type { DirectoryEntry } from '~/lib/workspace-fs' // Get parent directory path using path separator logic @@ -82,10 +92,18 @@ function WorkspacePage() { // Sidebar collapse state const [sidebarCollapsed, setSidebarCollapsed] = useState(false) + // Starred files state + const [starredPaths, setStarredPaths] = useState>(new Set()) + + // Mobile state + const isMobile = useIsMobile() + const [fileDrawerOpen, setFileDrawerOpen] = useState(false) + const [pathSheetOpen, setPathSheetOpen] = useState(false) + // Root entries for FileTree const rootEntries = workspacePath && pathValid ? (pathCache.get(workspacePath) || []) : [] - // Load saved path or default on mount + // Load saved path and starred files on mount useEffect(() => { const savedPath = localStorage.getItem('crabcrawl:workspacePath') if (savedPath) { @@ -95,6 +113,17 @@ function WorkspacePage() { } else { loadDefaultPath() } + + // Load starred files + const savedStarred = localStorage.getItem('crabcrawl:starredFiles') + if (savedStarred) { + try { + const parsed = JSON.parse(savedStarred) + setStarredPaths(new Set(parsed)) + } catch { + // ignore invalid JSON + } + } }, []) // Load entries when workspace path changes and is valid @@ -312,6 +341,21 @@ function WorkspacePage() { } } + // Handle starring/unstarring files + const handleStar = useCallback((filePath: string) => { + setStarredPaths((prev) => { + const next = new Set(prev) + if (next.has(filePath)) { + next.delete(filePath) + } else { + next.add(filePath) + } + // Persist to localStorage + localStorage.setItem('crabcrawl:starredFiles', JSON.stringify([...next])) + return next + }) + }, []) + return ( @@ -330,48 +374,33 @@ function WorkspacePage() { {/* Navigation tabs */} -
- {/* Monitor tab - inactive */} - - - MONITOR - - - - {/* Workspace tab - active */} -
-
- -
- - WORKSPACE - -
-
+
-
- {/* Path input */} -
- + {/* Path input - desktop only */} +
+
+ setWorkspacePathInput(e.target.value)} onKeyDown={handleKeyDown} placeholder="Enter workspace path..." - className="flex-1 bg-shell-800 border border-shell-700 rounded-lg px-3 py-1.5 text-sm font-console text-gray-200 placeholder-shell-500 focus:outline-none focus:border-crab-500 focus:ring-1 focus:ring-crab-500/20" + className="w-full bg-shell-800 border border-shell-700 rounded-lg pl-9 pr-3 py-1.5 text-sm font-console text-gray-200 placeholder-shell-500 focus:outline-none focus:border-crab-500 focus:ring-1 focus:ring-crab-500/20" /> -
+ {pathError && (
@@ -381,8 +410,8 @@ function WorkspacePage() { )}
-
- {/* Refresh button */} + {/* Refresh button - desktop only */} +
-
-
- - {/* File tree */} -
- {pathValid ? ( - + {/* Sidebar - desktop only */} + {!isMobile && ( + + {/* Sidebar header */} +
+ {!sidebarCollapsed && ( + + Files + + )} +
+ {loading && !sidebarCollapsed && ( + + + + )} +
+ +
+
- {/* Sidebar footer */} - {pathValid && ( -
-

- {workspacePath} + {/* Starred files section */} + {starredPaths.size > 0 && ( + <> + {sidebarCollapsed ? ( + // Collapsed: stacked file icons +

+ {[...starredPaths].slice(0, 5).map((filePath) => { + const fileName = filePath.split('/').pop() || filePath + const isSelected = selectedPath === filePath + return ( + + ) + })} + {starredPaths.size > 5 && ( + +{starredPaths.size - 5} + )} +
+ ) : ( + // Expanded: starred files list +
+ {[...starredPaths].map((filePath) => { + const fileName = filePath.split('/').pop() || filePath + const ext = fileName.includes('.') ? '.' + fileName.split('.').pop() : '' + const isSelected = selectedPath === filePath + return ( +
handleSelect(filePath, 'file')} + > + + + {fileName} + + +
+ ) + })} +
+ )} + + )} + + {/* File tree */} + {!sidebarCollapsed && ( +
+ {pathValid ? ( + + ) : ( +
+

+ Enter a workspace path to browse files

)} - +
)} - + + {/* Sidebar footer */} + {pathValid && !sidebarCollapsed && ( +
+

+ {workspacePath} +

+
+ )} + + )} {/* Main content area */} -
- {/* Floating sidebar toggle when collapsed */} - {sidebarCollapsed && ( - setSidebarCollapsed(false)} - className="absolute left-4 top-4 z-10 p-2 bg-shell-800/80 hover:bg-shell-700 rounded-lg border border-shell-700 transition-all" - title="Show sidebar" - > - - - )} +
+ + {/* Mobile components */} + {isMobile && ( + <> + setFileDrawerOpen(true)} + onOpenPathSheet={() => setPathSheetOpen(true)} + onRefresh={handleRefresh} + loading={loading} + pathValid={pathValid} + currentPath={workspacePathInput} + /> + setFileDrawerOpen(false)} + entries={rootEntries} + selectedPath={selectedPath} + starredPaths={starredPaths} + workspacePath={workspacePath} + pathValid={pathValid} + onSelect={handleSelect} + onLoadDirectory={handleLoadDirectory} + onStar={handleStar} + /> + setPathSheetOpen(false)} + initialPath={workspacePathInput} + validatedPath={workspacePath} + pathValid={pathValid} + pathError={pathError} + onValidate={async (path) => { + await validatePathAndSet(path) + return pathValid + }} + /> + + )}
) } diff --git a/src/styles.css b/src/styles.css index 0c4bb18..27f73a3 100644 --- a/src/styles.css +++ b/src/styles.css @@ -433,3 +433,8 @@ code, pre { @apply focus:outline-none focus:border-crab-500 focus:ring-2 focus:ring-crab-500/20; @apply transition-all duration-150; } + +/* Safe area padding for iOS */ +.pb-safe { + padding-bottom: env(safe-area-inset-bottom, 0); +}