mbatchelder
eba1d78fb9
Calendar: - GET /api/domains/[domainId]/calendar/events?from=&to= — returns tasks, habits, projects, milestones - PATCH /api/domains/[domainId]/tasks/[id]/schedule — drag-to-reschedule with activity feed - Calendar UI with month/week/day views via react-big-calendar - Drag-to-reschedule with SSE updates - Filter by entity type and domain - Keyboard shortcuts: t=today, m/w/d=view, ←/→=navigate - Mobile: auto-switches to day view on small screens Dashboard: - GET/PUT /api/domains/[domainId]/dashboard — layout stored in domain custom_fields - 8 per-widget data endpoints (today-tasks, habit-checklist, weekly-stats, project-progress, upcoming-calendar, recent-notes, activity-feed, quick-capture) - react-grid-layout with responsive breakpoints (12/8/4 cols) - Drag-to-reorder, resize, add/remove widgets - Edit mode toggle, per-workspace layout persistence - Widget error boundary Search: - tsvector columns + GIN indexes on tasks, notes, projects, habits, domains - GET /api/search?q=&types=&domain= — ranked results with ts_headline snippets - Dedicated search page with grouped results, filters, recent searches (localStorage) - Empty state with hints Schema: - Added custom_fields jsonb column to domains table (migration 0002) - Removed stale root app/ directory Build: passes, typecheck: passes, tests: 18/18 wikilink-parser tests pass
109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import dynamic from 'next/dynamic';
|
|
import 'react-grid-layout/css/styles.css';
|
|
import 'react-resizable/css/styles.css';
|
|
|
|
// react-grid-layout needs WidthProvider for responsive behavior
|
|
// Dynamic import to avoid SSR issues
|
|
const ReactGridLayout = dynamic(
|
|
() => import('react-grid-layout').then((mod) => {
|
|
// react-grid-layout v2 exports GridLayout as default
|
|
// WidthProvider is a named export
|
|
const GridLayout = (mod as any).default || mod;
|
|
const WidthProvider = (mod as any).WidthProvider;
|
|
if (WidthProvider) {
|
|
return WidthProvider(GridLayout);
|
|
}
|
|
return GridLayout;
|
|
}),
|
|
{ ssr: false }
|
|
);
|
|
|
|
interface LayoutItem {
|
|
i: string;
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
minW?: number;
|
|
minH?: number;
|
|
maxW?: number;
|
|
maxH?: number;
|
|
static?: boolean;
|
|
}
|
|
|
|
interface ResponsiveGridProps {
|
|
layout: LayoutItem[];
|
|
onLayoutChange: (newLayout: LayoutItem[]) => void;
|
|
children: React.ReactNode;
|
|
isDraggable?: boolean;
|
|
isResizable?: boolean;
|
|
className?: string;
|
|
compactType?: 'vertical' | 'horizontal' | null;
|
|
preventCollision?: boolean;
|
|
rowHeight?: number;
|
|
cols?: number;
|
|
}
|
|
|
|
export default function ResponsiveGrid({
|
|
layout,
|
|
onLayoutChange,
|
|
children,
|
|
isDraggable = true,
|
|
isResizable = true,
|
|
className = '',
|
|
compactType = 'vertical',
|
|
preventCollision = false,
|
|
rowHeight = 200,
|
|
cols = 12,
|
|
}: ResponsiveGridProps) {
|
|
// Build responsive layouts: same layout for all breakpoints
|
|
const responsiveLayouts = useMemo(() => {
|
|
// Desktop: 12 columns
|
|
const lg = layout.map((item) => ({ ...item }));
|
|
// Tablet: 8 columns — scale widths proportionally
|
|
const md = layout.map((item) => ({
|
|
...item,
|
|
w: Math.max(1, Math.min(8, Math.round(item.w * (8 / 12)))),
|
|
}));
|
|
// Mobile: 4 columns — stack widgets
|
|
const sm = layout.map((item, idx) => ({
|
|
...item,
|
|
x: 0,
|
|
y: idx,
|
|
w: 4,
|
|
h: Math.max(2, item.h),
|
|
}));
|
|
return { lg, md, sm, xs: sm, xxs: sm };
|
|
}, [layout]);
|
|
|
|
const handleLayoutChange = (newLayout: LayoutItem[]) => {
|
|
onLayoutChange(newLayout);
|
|
};
|
|
|
|
const GridComponent = ReactGridLayout as any;
|
|
|
|
return (
|
|
<div className={`w-full ${className}`}>
|
|
<GridComponent
|
|
layouts={responsiveLayouts}
|
|
onLayoutChange={handleLayoutChange}
|
|
isDraggable={isDraggable}
|
|
isResizable={isResizable}
|
|
compactType={compactType}
|
|
preventCollision={preventCollision}
|
|
rowHeight={rowHeight}
|
|
cols={{ lg: 12, md: 8, sm: 4, xs: 4, xxs: 4 }}
|
|
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
|
draggableHandle=".widget-drag-handle"
|
|
margin={[16, 16]}
|
|
containerPadding={[0, 0]}
|
|
>
|
|
{children}
|
|
</GridComponent>
|
|
</div>
|
|
);
|
|
}
|