This commit is contained in:
2026-02-19 12:03:45 +00:00
parent dd8ab84df5
commit 111d4c86eb
12 changed files with 174 additions and 183 deletions
+12 -9
View File
@@ -11,13 +11,14 @@ type WidgetProps = ComponentPropsWithoutRef<'div'> & {
title?: string;
resizable?: boolean;
collapsible?: boolean | { title: string; icon?: LucideIcon };
minimizable?: boolean;
moveable?: boolean;
position?: Position;
onPositionChange?: (pos: Position) => void;
onClose?: () => void;
};
export const Widget = ({ title, className, style, resizable, collapsible, moveable, position: controlledPosition, onPositionChange, onClose, children, ...props }: WidgetProps) => {
export const Widget = ({ title, className, style, resizable, collapsible, minimizable = false, moveable, position: controlledPosition, onPositionChange, onClose, children, ...props }: WidgetProps) => {
const [expanded, setExpanded] = useState(true);
const [minimized, setMinimized] = useState(false);
const [internalPosition, setInternalPosition] = useState<Position>({ x: 0, y: 0 });
@@ -69,7 +70,7 @@ export const Widget = ({ title, className, style, resizable, collapsible, moveab
const isCardPadding = target === card;
const isHeader = !isCardPadding && target.closest('[data-widget-header]') && !target.closest('button');
if (!isCardPadding && !isHeader) return;
if (isHeader && ev.detail === 2) {
if (minimizable && isHeader && ev.detail === 2) {
toggleMinimized();
return;
}
@@ -132,13 +133,15 @@ export const Widget = ({ title, className, style, resizable, collapsible, moveab
<div data-widget-header className="flex h-8 items-center gap-12 px-3 select-none cursor-grab">
{title && <span className="text-sm font-bold text-muted-foreground pointer-events-none">{title}</span>}
<div className="ml-auto flex items-center gap-0.5">
<button
type="button"
className="p-1 rounded cursor-pointer text-muted-foreground hover:text-foreground"
onClick={() => toggleMinimized()}
>
{minimized ? <Plus size={14} /> : <Minus size={14} />}
</button>
{minimizable && (
<button
type="button"
className="p-1 rounded cursor-pointer text-muted-foreground hover:text-foreground"
onClick={() => toggleMinimized()}
>
{minimized ? <Plus size={14} /> : <Minus size={14} />}
</button>
)}
{onClose && (
<button
type="button"
+5 -5
View File
@@ -7,9 +7,9 @@ import { DailyGoals } from './DailyGoals/index';
import { QuickNotes } from './QuickNotes/index';
export const widgetRegistry: Record<string, AppRegistryEntry> = {
'clock': { name: 'Clock', icon: ClockIcon, component: () => <Clock /> },
'weather': { name: 'Weather', icon: CloudSun, component: () => <Weather /> },
'pomodoro': { name: 'Pomodoro', icon: Timer, component: () => <Pomodoro /> },
'daily-goals': { name: 'Daily Goals', icon: Target, component: () => <DailyGoals /> },
'quick-notes': { name: 'Quick Notes', icon: StickyNote, component: () => <QuickNotes /> },
'clock': { name: 'Clock', icon: ClockIcon, component: () => <Clock />, widget: true },
'weather': { name: 'Weather', icon: CloudSun, component: () => <Weather />, widget: true },
'pomodoro': { name: 'Pomodoro', icon: Timer, component: () => <Pomodoro />, widget: true },
'daily-goals': { name: 'Daily Goals', icon: Target, component: () => <DailyGoals />, widget: true },
'quick-notes': { name: 'Quick Notes', icon: StickyNote, component: () => <QuickNotes />, widget: true },
};