WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-02 14:28:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] dock: rail actions go Apple-flat, one hairline lucide family on the rail material, pucks and gradients gone

Browse Source
This commit is contained in:
ciregenz
2026-08-04 20:16:10 -07:00
parent 9cfdf390b4
commit 96565841ff
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/Dashboard/desktop/DockActionTiles.tsx
+14 -14
View File
@@ -1,10 +1,7 @@
import React from 'react';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import LanguageIcon from '@mui/icons-material/Language';
import EventRepeatIcon from '@mui/icons-material/EventRepeat';
import SettingsIcon from '@mui/icons-material/Settings';
import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
import { Globe, CalendarClock, Settings, LayoutGrid } from 'lucide-react';
import { useAppDispatch } from '@/shared/hooks';
import { openSettingsCard, openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
@@ -18,21 +15,21 @@ interface DockActionTilesProps {
onHoverAway: () => void;
}
/** The dock's fixed group: browser, workflows, then settings + applications under their own divider. */
/** The dock's fixed group: browser, workflows, then settings + applications under their own divider. Action buttons are flat hairline glyphs resting on the rail material (running dock tiles above keep their colored tiles), so actions and running things read as different species. */
function DockActionTiles({ tile, onAddBrowser, onApplications, onHoverAway }: DockActionTilesProps): React.ReactElement {
const dispatch = useAppDispatch();
const actions: { label: string; icon: React.ReactNode; act: () => void; divider?: boolean; bg?: string }[] = [
{ label: 'New browser', icon: <LanguageIcon sx={{ color: '#e8e8ee' }} />, act: onAddBrowser },
{ label: 'Workflows', icon: <EventRepeatIcon sx={{ color: '#e8e8ee' }} />, act: () => dispatch(openWorkflowsApp()) },
{ label: 'Settings', icon: <SettingsIcon sx={{ color: '#e8e8ee' }} />, act: () => dispatch(openSettingsCard()), divider: true },
{ label: 'Applications', icon: <AppsRoundedIcon sx={{ color: '#e8e8ee' }} />, act: onApplications, bg: 'linear-gradient(135deg, #3d3d46, #232329)' },
const actions: { label: string; Icon: typeof Globe; act: () => void; divider?: boolean }[] = [
{ label: 'New browser', Icon: Globe, act: onAddBrowser },
{ label: 'Workflows', Icon: CalendarClock, act: () => dispatch(openWorkflowsApp()) },
{ label: 'Settings', Icon: Settings, act: () => dispatch(openSettingsCard()), divider: true },
{ label: 'Applications', Icon: LayoutGrid, act: onApplications },
];
return (
<>
{actions.map((a) => (
<React.Fragment key={a.label}>
{a.divider && <Box sx={{ width: tile - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />}
{a.divider && <Box sx={{ width: tile - 16, height: '1px', background: 'rgba(255,255,255,0.10)', alignSelf: 'center', flexShrink: 0 }} />}
<Tooltip title={a.label} placement="right">
<Box
className="osw-dock-tile"
@@ -41,16 +38,19 @@ function DockActionTiles({ tile, onAddBrowser, onApplications, onHoverAway }: Do
sx={{
width: tile,
height: tile,
borderRadius: '12px',
background: a.bg ?? 'linear-gradient(135deg, #5a5a62, #34343c)',
borderRadius: '10px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
flexShrink: 0,
color: 'rgba(235, 235, 240, 0.72)',
transition: 'background-color 0.15s ease, color 0.15s ease',
'&:hover': { backgroundColor: 'rgba(255,255,255,0.10)', color: '#ffffff' },
'&:active': { backgroundColor: 'rgba(255,255,255,0.16)' },
}}
>
{a.icon}
<a.Icon size={19} strokeWidth={1.5} />
</Box>
</Tooltip>
</React.Fragment>