From 0ee6fe7ccb9e40d6596cdb2acc1f420ae5f5ccd1 Mon Sep 17 00:00:00 2001 From: haikdc Date: Sat, 18 Apr 2026 12:39:05 -0700 Subject: [PATCH] =?UTF-8?q?[Haik]:=20refactor:=20restructure=20Dashboard?= =?UTF-8?q?=20page=20from=20flat=20file=20layout=20into=20nested=20compone?= =?UTF-8?q?nt=20directories=20=E2=80=94=20move=20DashboardCanvas,=20Dashbo?= =?UTF-8?q?ardHeader,=20DashboardHeaderParts,=20DashboardToolbar,=20Toolba?= =?UTF-8?q?rButtons,=20HistoryPanel,=20ViewPickerPanel,=20CanvasControls,?= =?UTF-8?q?=20and=20DashboardViewCard=20into=20DashboardCanvas/components/?= =?UTF-8?q?=20subtree=20with=20dedicated=20folders=20for=20DashboardToolba?= =?UTF-8?q?r=20and=20DashboardHeader;=20consolidate=20shared=20types=20(Ca?= =?UTF-8?q?rdType,=20CanvasActions,=20TetherInfo)=20from=20useDashboardSel?= =?UTF-8?q?ection,=20useCanvasControls,=20and=20useTetherPaths=20into=20ty?= =?UTF-8?q?pes/types.ts;=20extract=20duplicated=20formatRelativeTime=20int?= =?UTF-8?q?o=20utils/formatRelativeTime.ts;=20update=20all=20import=20path?= =?UTF-8?q?s=20across=20hooks,=20shared=20modules,=20and=20DashboardCard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/pages/Dashboard/Dashboard.tsx | 2 +- .../{ => DashboardCanvas}/DashboardCanvas.tsx | 18 ++--- .../components}/CanvasControls.tsx | 2 +- .../DashboardHeader}/DashboardHeader.tsx | 2 +- .../DashboardHeader}/DashboardHeaderParts.tsx | 0 .../DashboardToolbar}/DashboardToolbar.tsx | 17 +++-- .../components}/HistoryPanel.tsx | 2 +- .../ToolbarButtons}/ToolbarButtons.tsx | 24 +++---- .../components/ToolbarButtons/WarmTooltip.tsx | 25 +++++++ .../components}/ViewPickerPanel.tsx | 0 .../DashboardToolbar}/useDashboardToolbar.ts | 27 +++++++- .../components}/DashboardViewCard.tsx | 0 .../pages/Dashboard/hooks/useDashboardDrag.ts | 2 +- .../pages/Dashboard/hooks/useDashboardInit.ts | 2 +- .../Dashboard/hooks/useDashboardKeyboard.ts | 2 +- .../pages/Dashboard/hooks/useTetherPaths.ts | 10 +-- .../Dashboard/hooks/useToolbarActions.ts | 2 +- .../src/app/pages/Dashboard/toolbarShared.tsx | 65 ------------------- .../src/app/pages/Dashboard/types/types.ts | 32 +++++++-- .../app/pages/Dashboard/useCanvasControls.ts | 2 - .../pages/Dashboard/useDashboardSelection.ts | 3 +- .../Dashboard/utils/formatRelativeTime.ts | 12 ++++ .../DashboardSelection/DashboardCard.tsx | 13 +--- frontend/src/shared/dashboardClipboard.ts | 2 +- 24 files changed, 130 insertions(+), 136 deletions(-) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas}/DashboardCanvas.tsx (95%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components}/CanvasControls.tsx (97%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardHeader}/DashboardHeader.tsx (99%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardHeader}/DashboardHeaderParts.tsx (100%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardToolbar}/DashboardToolbar.tsx (87%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardToolbar/components}/HistoryPanel.tsx (98%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons}/ToolbarButtons.tsx (93%) create mode 100644 frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/WarmTooltip.tsx rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardToolbar/components}/ViewPickerPanel.tsx (100%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components/DashboardToolbar}/useDashboardToolbar.ts (93%) rename frontend/src/app/pages/Dashboard/{ => DashboardCanvas/components}/DashboardViewCard.tsx (100%) delete mode 100644 frontend/src/app/pages/Dashboard/toolbarShared.tsx create mode 100644 frontend/src/app/pages/Dashboard/utils/formatRelativeTime.ts diff --git a/frontend/src/app/pages/Dashboard/Dashboard.tsx b/frontend/src/app/pages/Dashboard/Dashboard.tsx index 6b7b4580..41cdf26e 100644 --- a/frontend/src/app/pages/Dashboard/Dashboard.tsx +++ b/frontend/src/app/pages/Dashboard/Dashboard.tsx @@ -15,7 +15,7 @@ import { useDashboardInit } from './hooks/useDashboardInit'; import { useSubAgentAutoReveal } from './hooks/useSubAgentAutoReveal'; import { useTetherPaths } from './hooks/useTetherPaths'; import { useToolbarActions } from './hooks/useToolbarActions'; -import DashboardCanvas from './DashboardCanvas'; +import DashboardCanvas from './DashboardCanvas/DashboardCanvas'; const SELECT_ATTR = 'data-select-type'; diff --git a/frontend/src/app/pages/Dashboard/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/DashboardCanvas.tsx similarity index 95% rename from frontend/src/app/pages/Dashboard/DashboardCanvas.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/DashboardCanvas.tsx index ffb2eb01..eedce34f 100644 --- a/frontend/src/app/pages/Dashboard/DashboardCanvas.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/DashboardCanvas.tsx @@ -2,17 +2,17 @@ import React from 'react'; import { AnimatePresence } from 'framer-motion'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import AgentCard from './AgentCard/AgentCard'; -import DashboardViewCard from './DashboardViewCard'; -import BrowserCard from './BrowserCard/BrowserCard'; -import CanvasControls from './CanvasControls'; -import DashboardToolbar from './DashboardToolbar'; -import DashboardHeader from './DashboardHeader'; +import AgentCard from '@/app/pages/Dashboard/AgentCard/AgentCard'; +import DashboardViewCard from './components/DashboardViewCard'; +import BrowserCard from '@/app/pages/Dashboard/BrowserCard/BrowserCard'; +import CanvasControls from './components/CanvasControls'; +import DashboardToolbar from './components/DashboardToolbar/DashboardToolbar'; +import DashboardHeader from './components/DashboardHeader/DashboardHeader'; import { useClaudeTokens } from '@/shared/styles/ThemeContext'; import { EXPANDED_CARD_MIN_H, DEFAULT_CARD_W, GRID_GAP } from '@/shared/state/dashboardLayoutSlice'; -import type { TetherInfo } from './hooks/useTetherPaths'; -import type { CardType } from './useDashboardSelection'; -import type { CanvasActions } from './useCanvasControls'; +import type { TetherInfo } from '@/app/pages/Dashboard/types/types'; +import type { CardType } from '@/app/pages/Dashboard/types/types'; +import type { CanvasActions } from '@/app/pages/Dashboard/types/types'; const TETHER_FADE_MS = 2500; diff --git a/frontend/src/app/pages/Dashboard/CanvasControls.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/CanvasControls.tsx similarity index 97% rename from frontend/src/app/pages/Dashboard/CanvasControls.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/CanvasControls.tsx index 1e667a1e..48ef011b 100644 --- a/frontend/src/app/pages/Dashboard/CanvasControls.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/CanvasControls.tsx @@ -8,7 +8,7 @@ import AddIcon from '@mui/icons-material/Add'; import FitScreenIcon from '@mui/icons-material/FitScreen'; import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; import { useClaudeTokens } from '@/shared/styles/ThemeContext'; -import type { CanvasActions } from './useCanvasControls'; +import type { CanvasActions } from '@/app/pages/Dashboard/types/types'; interface Props { zoom: number; diff --git a/frontend/src/app/pages/Dashboard/DashboardHeader.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardHeader/DashboardHeader.tsx similarity index 99% rename from frontend/src/app/pages/Dashboard/DashboardHeader.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardHeader/DashboardHeader.tsx index 58889a63..ac91bf6f 100644 --- a/frontend/src/app/pages/Dashboard/DashboardHeader.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardHeader/DashboardHeader.tsx @@ -10,7 +10,7 @@ import { useClaudeTokens } from '@/shared/styles/ThemeContext'; import type { AgentSession } from '@/shared/state/agentsSlice'; import type { CardPosition, ViewCardPosition, BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice'; import type { App } from '@/shared/backend-bridge/apps/app_builder'; -import type { CanvasActions } from './useCanvasControls'; +import type { CanvasActions } from '@/app/pages/Dashboard/types/types'; import { STATUS_DOT, cleanUrl, CategoryGroup, ItemRow } from './DashboardHeaderParts'; interface DashboardHeaderProps { diff --git a/frontend/src/app/pages/Dashboard/DashboardHeaderParts.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardHeader/DashboardHeaderParts.tsx similarity index 100% rename from frontend/src/app/pages/Dashboard/DashboardHeaderParts.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardHeader/DashboardHeaderParts.tsx diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/DashboardToolbar.tsx similarity index 87% rename from frontend/src/app/pages/Dashboard/DashboardToolbar.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/DashboardToolbar.tsx index 332f972e..af33302f 100644 --- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/DashboardToolbar.tsx @@ -1,13 +1,12 @@ import React from 'react'; +import { motion } from 'framer-motion'; import ChatInput from '@/app/pages/AgentChat/ChatInput/ChatInput'; -import type { Props } from './toolbarShared'; -import { MotionBox, TOOLBAR_OWNER_ID } from './toolbarShared'; -import { useDashboardToolbar } from './useDashboardToolbar'; -import HistoryPanel from './HistoryPanel'; -import ViewPickerPanel from './ViewPickerPanel'; -import ToolbarButtons from './ToolbarButtons'; +import { useDashboardToolbar, TOOLBAR_OWNER_ID, ToolbarProps } from './useDashboardToolbar'; +import HistoryPanel from './components/HistoryPanel'; +import ViewPickerPanel from './components/ViewPickerPanel'; +import ToolbarButtons from './components/ToolbarButtons/ToolbarButtons'; -const DashboardToolbar = React.forwardRef( +const DashboardToolbar = React.forwardRef( ({ inputOpen, onNewAgent, onCancel, onSend, onAddView, onHistoryResume, onAddBrowser, dashboardId }, ref) => { const { c, containerRef, searchInputRef, historyInputRef, historyListRef, @@ -26,7 +25,7 @@ const DashboardToolbar = React.forwardRef( React.useImperativeHandle(ref, () => containerRef.current!, []); return ( - ( c={c} /> )} - + ); }, ); diff --git a/frontend/src/app/pages/Dashboard/HistoryPanel.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/HistoryPanel.tsx similarity index 98% rename from frontend/src/app/pages/Dashboard/HistoryPanel.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/HistoryPanel.tsx index abe94b1a..627867b2 100644 --- a/frontend/src/app/pages/Dashboard/HistoryPanel.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/HistoryPanel.tsx @@ -5,7 +5,7 @@ import InputBase from '@mui/material/InputBase'; import CircularProgress from '@mui/material/CircularProgress'; import SearchIcon from '@mui/icons-material/Search'; import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; -import { formatRelativeTime } from './toolbarShared'; +import { formatRelativeTime } from '@/app/pages/Dashboard/utils/formatRelativeTime'; interface HistoryPanelProps { historyInputRef: React.RefObject; diff --git a/frontend/src/app/pages/Dashboard/ToolbarButtons.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/ToolbarButtons.tsx similarity index 93% rename from frontend/src/app/pages/Dashboard/ToolbarButtons.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/ToolbarButtons.tsx index 3ac551b1..2b2fb22a 100644 --- a/frontend/src/app/pages/Dashboard/ToolbarButtons.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/ToolbarButtons.tsx @@ -6,7 +6,9 @@ import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined'; import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded'; import LanguageIcon from '@mui/icons-material/Language'; import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; -import { WarmTooltip, BTN } from './toolbarShared'; +import { WarmTooltip } from './WarmTooltip'; + +const BUTTON_SIZE = 40; interface ToolbarButtonsProps { onNewAgent: () => void; @@ -36,8 +38,8 @@ export default function ToolbarButtons({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: BTN, - height: BTN, + width: BUTTON_SIZE, + height: BUTTON_SIZE, borderRadius: `${c.radius.lg}px`, bgcolor: c.accent.primary, color: '#fff', @@ -71,8 +73,8 @@ export default function ToolbarButtons({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: BTN, - height: BTN, + width: BUTTON_SIZE, + height: BUTTON_SIZE, borderRadius: `${c.radius.md}px`, color: c.text.tertiary, cursor: 'pointer', @@ -104,8 +106,8 @@ export default function ToolbarButtons({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: BTN, - height: BTN, + width: BUTTON_SIZE, + height: BUTTON_SIZE, borderRadius: `${c.radius.md}px`, color: c.text.tertiary, cursor: 'pointer', @@ -137,8 +139,8 @@ export default function ToolbarButtons({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: BTN, - height: BTN, + width: BUTTON_SIZE, + height: BUTTON_SIZE, borderRadius: `${c.radius.md}px`, color: c.text.tertiary, cursor: 'pointer', @@ -169,8 +171,8 @@ export default function ToolbarButtons({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: BTN, - height: BTN, + width: BUTTON_SIZE, + height: BUTTON_SIZE, borderRadius: `${c.radius.md}px`, color: c.text.tertiary, opacity: 0.45, diff --git a/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/WarmTooltip.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/WarmTooltip.tsx new file mode 100644 index 00000000..bf440d35 --- /dev/null +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ToolbarButtons/WarmTooltip.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import { styled } from '@mui/material/styles'; +import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; + +export const WarmTooltip = styled( + ({ className, ...props }: React.ComponentProps & { className?: string }) => ( + + ) + )<{ tokens: ClaudeTokens }>(({ tokens: c }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: c.bg.inverse, + color: c.text.inverse, + fontFamily: c.font.sans, + fontSize: '0.78rem', + fontWeight: 500, + padding: '6px 12px', + borderRadius: c.radius.md, + boxShadow: c.shadow.md, + letterSpacing: '0.01em', + }, + [`& .${tooltipClasses.arrow}`]: { + color: c.bg.inverse, + }, +})); \ No newline at end of file diff --git a/frontend/src/app/pages/Dashboard/ViewPickerPanel.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ViewPickerPanel.tsx similarity index 100% rename from frontend/src/app/pages/Dashboard/ViewPickerPanel.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/components/ViewPickerPanel.tsx diff --git a/frontend/src/app/pages/Dashboard/useDashboardToolbar.ts b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/useDashboardToolbar.ts similarity index 93% rename from frontend/src/app/pages/Dashboard/useDashboardToolbar.ts rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/useDashboardToolbar.ts index c288b73f..75e36f4a 100644 --- a/frontend/src/app/pages/Dashboard/useDashboardToolbar.ts +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardToolbar/useDashboardToolbar.ts @@ -6,12 +6,33 @@ import { useAppDispatch, useAppSelector } from '@/shared/hooks'; import { clearHistorySearch } from '@/shared/state/agentsSlice'; import { GET_HISTORY } from '@/shared/backend-bridge/apps/agents'; import type { App } from '@/shared/backend-bridge/apps/app_builder'; -import type { Props } from './toolbarShared'; -import { TOOLBAR_OWNER_ID, HISTORY_PAGE_SIZE } from './toolbarShared'; + +export interface ToolbarProps { + inputOpen: boolean; + onNewAgent: () => void; + onCancel: () => void; + onSend: ( + prompt: string, + mode: string, + model: string, + images?: Array<{ data: string; media_type: string }>, + contextPaths?: ContextPath[], + forcedTools?: string[], + attachedSkills?: Array<{ id: string; name: string; content: string }>, + selectedBrowserIds?: string[], + ) => void; + onAddView: (outputId: string) => void; + onHistoryResume: (sessionId: string) => void; + onAddBrowser: () => void; + dashboardId?: string; +} + +export const TOOLBAR_OWNER_ID = '__toolbar__'; +const HISTORY_PAGE_SIZE = 20; export function useDashboardToolbar({ inputOpen, onCancel, onSend, onAddView, onHistoryResume, onAddBrowser, dashboardId, -}: Omit) { +}: Omit) { const c = useClaudeTokens(); const dispatch = useAppDispatch(); const elementSelection = useElementSelection(); diff --git a/frontend/src/app/pages/Dashboard/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardViewCard.tsx similarity index 100% rename from frontend/src/app/pages/Dashboard/DashboardViewCard.tsx rename to frontend/src/app/pages/Dashboard/DashboardCanvas/components/DashboardViewCard.tsx diff --git a/frontend/src/app/pages/Dashboard/hooks/useDashboardDrag.ts b/frontend/src/app/pages/Dashboard/hooks/useDashboardDrag.ts index 79bcb5c0..4a4bf799 100644 --- a/frontend/src/app/pages/Dashboard/hooks/useDashboardDrag.ts +++ b/frontend/src/app/pages/Dashboard/hooks/useDashboardDrag.ts @@ -1,7 +1,7 @@ import { useState, useCallback, useRef } from 'react'; import { useAppDispatch } from '@/shared/hooks'; import { moveCards, bringToFront } from '@/shared/state/dashboardLayoutSlice'; -import type { CardType } from '../useDashboardSelection'; +import type { CardType } from '@/app/pages/Dashboard/types/types'; interface DragSelection { isSelected: (id: string) => boolean; diff --git a/frontend/src/app/pages/Dashboard/hooks/useDashboardInit.ts b/frontend/src/app/pages/Dashboard/hooks/useDashboardInit.ts index 72084ef4..1a168ac1 100644 --- a/frontend/src/app/pages/Dashboard/hooks/useDashboardInit.ts +++ b/frontend/src/app/pages/Dashboard/hooks/useDashboardInit.ts @@ -14,7 +14,7 @@ import { LIST_APPS } from '@/shared/backend-bridge/apps/app_builder'; import { agentsWs } from '@/shared/ws/WebSocketManager'; import { initBrowserCommandHandler } from '@/shared/browserCommandHandler'; import { clearPendingBrowserUrl, clearPendingFocusAgentId } from '@/shared/state/tempStateSlice'; -import type { CanvasActions } from '../useCanvasControls'; +import type { CanvasActions } from '@/app/pages/Dashboard/types/types'; interface InitDeps { dashboardId: string | undefined; diff --git a/frontend/src/app/pages/Dashboard/hooks/useDashboardKeyboard.ts b/frontend/src/app/pages/Dashboard/hooks/useDashboardKeyboard.ts index 65bdbabb..cba959dd 100644 --- a/frontend/src/app/pages/Dashboard/hooks/useDashboardKeyboard.ts +++ b/frontend/src/app/pages/Dashboard/hooks/useDashboardKeyboard.ts @@ -13,7 +13,7 @@ import { placeCard, } from '@/shared/state/dashboardLayoutSlice'; import { setClipboardCards, getClipboardCards, type ClipboardCard } from '@/shared/dashboardClipboard'; -import type { CardType } from '../useDashboardSelection'; +import type { CardType } from '@/app/pages/Dashboard/types/types'; interface KeyboardDeps { newAgentShortcut: string; diff --git a/frontend/src/app/pages/Dashboard/hooks/useTetherPaths.ts b/frontend/src/app/pages/Dashboard/hooks/useTetherPaths.ts index 258010e6..582ccb5d 100644 --- a/frontend/src/app/pages/Dashboard/hooks/useTetherPaths.ts +++ b/frontend/src/app/pages/Dashboard/hooks/useTetherPaths.ts @@ -1,15 +1,7 @@ import { useMemo } from 'react'; import type { RefObject } from 'react'; import { EXPANDED_CARD_MIN_H } from '@/shared/state/dashboardLayoutSlice'; - -export interface TetherInfo { - key: string; - path: string; - labelX: number; - labelY: number; - label: string; - fading: boolean; -} +import type { TetherInfo } from '@/app/pages/Dashboard/types/types'; interface TetherDeps { glowingAgentCards: Record; diff --git a/frontend/src/app/pages/Dashboard/hooks/useToolbarActions.ts b/frontend/src/app/pages/Dashboard/hooks/useToolbarActions.ts index a174e1e4..333cb317 100644 --- a/frontend/src/app/pages/Dashboard/hooks/useToolbarActions.ts +++ b/frontend/src/app/pages/Dashboard/hooks/useToolbarActions.ts @@ -24,7 +24,7 @@ import { } from '@/shared/state/dashboardLayoutSlice'; import { GENERATE_DASHBOARD_NAME } from '@/shared/backend-bridge/apps/dashboards'; import type { ContextPath } from '@/shared/state/agentsTypes'; -import type { CanvasActions } from '../useCanvasControls'; +import type { CanvasActions } from '@/app/pages/Dashboard/types/types'; interface ToolbarDeps { cards: Record; diff --git a/frontend/src/app/pages/Dashboard/toolbarShared.tsx b/frontend/src/app/pages/Dashboard/toolbarShared.tsx deleted file mode 100644 index 5d9df182..00000000 --- a/frontend/src/app/pages/Dashboard/toolbarShared.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; -import { styled } from '@mui/material/styles'; -import { motion } from 'framer-motion'; -import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; -import type { ContextPath } from '@/shared/state/agentsTypes'; - -export interface Props { - inputOpen: boolean; - onNewAgent: () => void; - onCancel: () => void; - onSend: ( - prompt: string, - mode: string, - model: string, - images?: Array<{ data: string; media_type: string }>, - contextPaths?: ContextPath[], - forcedTools?: string[], - attachedSkills?: Array<{ id: string; name: string; content: string }>, - selectedBrowserIds?: string[], - ) => void; - onAddView: (outputId: string) => void; - onHistoryResume: (sessionId: string) => void; - onAddBrowser: () => void; - dashboardId?: string; -} - -export const TOOLBAR_OWNER_ID = '__toolbar__'; -export const BTN = 40; -export const HISTORY_PAGE_SIZE = 20; - -export const WarmTooltip = styled( - ({ className, ...props }: React.ComponentProps & { className?: string }) => ( - - ) -)<{ tokens: ClaudeTokens }>(({ tokens: c }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: c.bg.inverse, - color: c.text.inverse, - fontFamily: c.font.sans, - fontSize: '0.78rem', - fontWeight: 500, - padding: '6px 12px', - borderRadius: c.radius.md, - boxShadow: c.shadow.md, - letterSpacing: '0.01em', - }, - [`& .${tooltipClasses.arrow}`]: { - color: c.bg.inverse, - }, -})); - -export const MotionBox = motion.div; - -export function formatRelativeTime(dateStr: string | null): string { - if (!dateStr) return ''; - const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000); - if (seconds < 60) return 'just now'; - const minutes = Math.floor(seconds / 60); - if (minutes < 60) return `${minutes}m ago`; - const hours = Math.floor(minutes / 60); - if (hours < 24) return `${hours}h ago`; - const days = Math.floor(hours / 24); - return `${days}d ago`; -} diff --git a/frontend/src/app/pages/Dashboard/types/types.ts b/frontend/src/app/pages/Dashboard/types/types.ts index 60e9f51b..74b49cec 100644 --- a/frontend/src/app/pages/Dashboard/types/types.ts +++ b/frontend/src/app/pages/Dashboard/types/types.ts @@ -1,6 +1,28 @@ export interface TabLocalState { - loading: boolean; - canGoBack: boolean; - canGoForward: boolean; - } - \ No newline at end of file + loading: boolean; + canGoBack: boolean; + canGoForward: boolean; +} + +export interface TetherInfo { + key: string; + path: string; + labelX: number; + labelY: number; + label: string; + fading: boolean; +} + +export type CardType = 'agent' | 'view' | 'browser'; + +export interface CanvasActions { + zoomIn: () => void; + zoomOut: () => void; + resetZoom: () => void; + fitToView: () => void; + fitToCards: ( + cardRects: Array<{ x: number; y: number; width: number; height: number }>, + maxZoom?: number, + animate?: boolean, + ) => void; +} \ No newline at end of file diff --git a/frontend/src/app/pages/Dashboard/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/useCanvasControls.ts index d0db6a88..6dd51173 100644 --- a/frontend/src/app/pages/Dashboard/useCanvasControls.ts +++ b/frontend/src/app/pages/Dashboard/useCanvasControls.ts @@ -170,5 +170,3 @@ export function useCanvasControls(zoomSensitivity: number = 50) { actions, } as const; } - -export type CanvasActions = ReturnType['actions']; diff --git a/frontend/src/app/pages/Dashboard/useDashboardSelection.ts b/frontend/src/app/pages/Dashboard/useDashboardSelection.ts index fd81a583..ce8fd9b6 100644 --- a/frontend/src/app/pages/Dashboard/useDashboardSelection.ts +++ b/frontend/src/app/pages/Dashboard/useDashboardSelection.ts @@ -1,7 +1,6 @@ import { useState, useCallback, useRef, useEffect, RefObject } from 'react'; import type { CardPosition, ViewCardPosition, BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice'; - -export type CardType = 'agent' | 'view' | 'browser'; +import type { CardType } from '@/app/pages/Dashboard/types/types'; interface SelectedCard { id: string; diff --git a/frontend/src/app/pages/Dashboard/utils/formatRelativeTime.ts b/frontend/src/app/pages/Dashboard/utils/formatRelativeTime.ts new file mode 100644 index 00000000..dfc041d7 --- /dev/null +++ b/frontend/src/app/pages/Dashboard/utils/formatRelativeTime.ts @@ -0,0 +1,12 @@ +export function formatRelativeTime(dateStr: string | null): string { + if (!dateStr) return ''; + const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000); + if (seconds < 60) return 'just now'; + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return `${minutes}m ago`; + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours}h ago`; + const days = Math.floor(hours / 24); + return `${days}d ago`; + } + \ No newline at end of file diff --git a/frontend/src/app/pages/DashboardSelection/DashboardCard.tsx b/frontend/src/app/pages/DashboardSelection/DashboardCard.tsx index cab402ed..d72732dd 100644 --- a/frontend/src/app/pages/DashboardSelection/DashboardCard.tsx +++ b/frontend/src/app/pages/DashboardSelection/DashboardCard.tsx @@ -8,18 +8,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import { Dashboard } from '@/shared/state/dashboardsSlice'; import { useClaudeTokens } from '@/shared/styles/ThemeContext'; - -function formatRelativeTime(dateStr: string | null): string { - if (!dateStr) return ''; - const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000); - if (seconds < 60) return 'just now'; - const minutes = Math.floor(seconds / 60); - if (minutes < 60) return `${minutes}m ago`; - const hours = Math.floor(minutes / 60); - if (hours < 24) return `${hours}h ago`; - const days = Math.floor(hours / 24); - return `${days}d ago`; -} +import { formatRelativeTime } from '@/app/pages/Dashboard/utils/formatRelativeTime'; interface DashboardCardProps { dashboard: Dashboard; diff --git a/frontend/src/shared/dashboardClipboard.ts b/frontend/src/shared/dashboardClipboard.ts index a31f4bb4..f3f85cca 100644 --- a/frontend/src/shared/dashboardClipboard.ts +++ b/frontend/src/shared/dashboardClipboard.ts @@ -1,4 +1,4 @@ -import type { CardType } from '@/app/pages/Dashboard/useDashboardSelection'; +import type { CardType } from '@/app/pages/Dashboard/types/types'; export interface ClipboardCard { type: CardType;