-
-
- - To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
+
+ Welcome to Drift
++ Your personal productivity workspace +
+ +
-
- {workspace.name}
-
+ {workspace.name}
+
- ;
+ /** optional setter for the current workspace, used for rename */
+ setWorkspace: React.Dispatch>;
+ addEntity: (
+ type: "todo" | "doc",
+ parentGroupId: string | null,
+ name?: string,
+ ) => string | undefined;
+ addGroup: (name: string | undefined, parentGroupId: string | null) => string;
+ renameEntity: (entityId: string, newName: string) => void;
+ deleteEntity: (entityId: string) => void;
+ removeNode: (id: string) => void;
+ renameGroup: (id: string, name: string) => void;
+};
export default function AppSidebar({
children,
workspace,
-}: Readonly<{
- children: React.ReactNode;
- workspace: Workspace;
-}>) {
+ setRoute,
+ setWorkspace,
+ addEntity,
+ addGroup,
+ renameEntity,
+ deleteEntity,
+ removeNode,
+ renameGroup,
+}: AppSidebarProps) {
+ // actions are passed from parent `useWorkspace` instance
+
+ const [availableWorkspaces, setAvailableWorkspaces] = React.useState<
+ Workspace[]
+ >([]);
+
+ const [isRenameOpen, setIsRenameOpen] = React.useState(false);
+ const [proposedName, setProposedName] = React.useState(workspace.name);
+ const [isWorkspaceCreateOpen, setIsWorkspaceCreateOpen] =
+ React.useState(false);
+ const [newWorkspaceName, setNewWorkspaceName] = React.useState("");
+ const [isCreateOpen, setIsCreateOpen] = React.useState(false);
+ const [createMode, setCreateMode] = React.useState<"list" | "doc" | "group">(
+ "list",
+ );
+ const [createValue, setCreateValue] = React.useState("");
+
+ React.useEffect(() => {
+ setProposedName(workspace.name);
+ }, [workspace.name]);
+
+ // reload list when component mounts or whenever the current workspace changes
+ React.useEffect(() => {
+ setAvailableWorkspaces(listWorkspaces());
+ }, [workspace]);
+
+ const switchWorkspace = (id: string) => {
+ setRoute({ workspace: id });
+ };
+
+ const importWorkspace = async () => {
+ try {
+ const { content } = await openFileDialog(".json");
+ const parsed = JSON.parse(content);
+ if (parsed && typeof parsed.id === "string") {
+ saveWorkspaceToLocalStorage(parsed);
+ setAvailableWorkspaces(listWorkspaces());
+ switchWorkspace(parsed.id);
+ } else {
+ throw new Error("invalid shape");
+ }
+ } catch (err) {
+ console.error("Failed to import workspace:", err);
+ window.alert("Import failed: invalid file");
+ }
+ };
+
+ const exportWorkspace = () => {
+ try {
+ const text = JSON.stringify(workspace, null, 2);
+ const blob = new Blob([text], { type: "application/json" });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `workspace-${workspace.name}.json`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ } catch (err) {
+ console.error("Export failed", err);
+ window.alert("Failed to download workspace");
+ }
+ };
+
+ const renameWorkspace = (name: string) => {
+ if (!name || name === workspace.name) return;
+
+ const updated: Workspace = {
+ ...workspace,
+ name,
+ updatedAt: Date.now(),
+ };
+ saveWorkspaceToLocalStorage(updated);
+ setAvailableWorkspaces(listWorkspaces());
+ if (setWorkspace) {
+ setWorkspace(updated);
+ }
+ };
+
return (
+ {/* Header */}
-
+
- Acme Inc
- Acme Corp.
+ {/* list all known workspaces */}
+ {[
+ availableWorkspaces.find((w) => w.id === workspace.id),
+ ...availableWorkspaces.filter((w) => w.id !== workspace.id),
+ ].map((w) => (
+ w && switchWorkspace(w?.id)}
+ >
+ {w?.name}
+ {w?.id === workspace.id ? " (current)" : ""}
+
+ ))}
+ {
+ setCreateMode("list");
+ setCreateValue("New list");
+ setIsCreateOpen(true);
+ }}
+ >
+ New list (root)
+
+ {
+ setCreateMode("doc");
+ setCreateValue("New doc");
+ setIsCreateOpen(true);
+ }}
+ >
+ New doc (root)
+
+ {
+ setCreateMode("group");
+ setCreateValue("New group");
+ setIsCreateOpen(true);
+ }}
+ >
+ New group (root)
+
+ setIsRenameOpen(true)}>
+ Rename Workspace
+
+
+ Import Workspace
+
+
+ Export Workspace
+
+ {
+ setNewWorkspaceName("New workspace");
+ setIsWorkspaceCreateOpen(true);
+ }}
+ >
+ Create workspace
+
+ {
+ localStorage.removeItem(workspace.id);
+ }}
+ variant="destructive"
+ >
+ Delete workspace
+
+
+ {/* Sidebar Content */}
- {workspace.entityLayout.map((entity, i) => (
-
+
- {children}
+
+ {children}
+
+ {/* rename dialog */}
+
+ {/* create workspace dialog */}
+
+ {/* create dialog */}
+
);
}
-export function SidebarTrigger({
- className,
- ...props
-}: React.ComponentProps<"div">) {
+export function SidebarTrigger(props: React.ComponentProps<"div">) {
const { toggleSidebar } = useSidebar();
return (
+
);
+ }
+
+ default:
+ return null;
}
}
diff --git a/src/components/sidebar/AppSidebar.tsx b/src/components/sidebar/AppSidebar.tsx
index 0993702..0b77f91 100644
--- a/src/components/sidebar/AppSidebar.tsx
+++ b/src/components/sidebar/AppSidebar.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import * as React from "react";
+
import {
Sidebar,
SidebarContent,
@@ -8,74 +12,401 @@ import {
SidebarProvider,
useSidebar,
} from "@/components/ui/sidebar";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
import EntitySwitch from "./Entity";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
+ DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
+
import { ChevronDown } from "lucide-react";
-import { Workspace } from "@/hooks/workspace";
+import { Route, SetState, Workspace } from "@/lib/types";
+import {
+ listWorkspaces,
+ saveWorkspaceToLocalStorage,
+ createDefaultWorkspace,
+} from "@/lib/workspace";
+import { openFileDialog } from "@/lib/import";
+
+// Simple ID generator
+const id = (prefix = "t") =>
+ `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+
+type AppSidebarProps = {
+ children: React.ReactNode;
+ workspace: Workspace;
+ setRoute: SetState{entity.name}
+ {
- toggleSidebar();
- }}
+ onClick={toggleSidebar}
{...props}
/>
);
diff --git a/src/components/sidebar/Entity.tsx b/src/components/sidebar/Entity.tsx
index 0ac8a64..bf9310a 100644
--- a/src/components/sidebar/Entity.tsx
+++ b/src/components/sidebar/Entity.tsx
@@ -1,4 +1,8 @@
-import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+
import {
SidebarGroup,
SidebarGroupContent,
@@ -7,63 +11,254 @@ import {
SidebarMenuButton,
SidebarMenuItem,
} from "../ui/sidebar";
-import { Collapsible, CollapsibleContent } from "../ui/collapsible";
-import { ChevronDown } from "lucide-react";
-import { Workspace } from "@/hooks/workspace";
-export type SidebarEntity =
- | {
- kind: "group";
- name: string;
- children: SidebarEntity[];
- }
- | {
- kind?: "item";
- id: string;
- };
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "../ui/collapsible";
-export default function EntitySwitch({
- entity,
- workspace,
-}: {
- entity: SidebarEntity;
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuSeparator,
+ ContextMenuTrigger,
+} from "../ui/context-menu";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogFooter,
+} from "../ui/dialog";
+
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+
+import { Route, Workspace, LayoutNode } from "@/lib/types";
+
+type DialogMode = "rename" | "add-item" | "add-group";
+
+type Props = {
+ node: LayoutNode;
workspace: Workspace;
-}) {
- if (entity.kind === "group") {
- return (
-
-
-
-
-
- {entity.name}
-
-
-
-
-
-
- {entity.children?.map((entity, i) => (
-
-
-
-
-
+ setRoute: (route: Route) => void;
+ addEntity: (
+ type: "todo" | "doc",
+ parentGroupId: string | null,
+ name?: string,
+ ) => string | undefined;
+ addGroup: (name: string, parentGroupId: string | null) => string;
+ renameEntity: (entityId: string, newName: string) => void;
+ deleteEntity: (entityId: string) => void;
+ removeNode: (id: string) => void;
+ renameGroup: (id: string, name: string) => void;
+};
+
+export default function EntitySwitch(props: Props) {
+ const {
+ node,
+ workspace,
+ setRoute,
+ addEntity,
+ addGroup,
+ renameEntity,
+ deleteEntity,
+ removeNode,
+ renameGroup,
+ } = props;
+
+ const [dialogValue, setDialogValue] = useState("");
+ const [dialogMode, setDialogMode] = useState();
+
+ const parentId = node.type === "group" ? node.id : null;
+
+ const openDialog = (mode: DialogMode, initial = "") => {
+ setDialogMode(mode);
+ setDialogValue(
+ initial ||
+ (mode === "add-item"
+ ? "New list"
+ : mode === "add-group"
+ ? "New group"
+ : ""),
);
- } else {
+ };
+
+ const closeDialog = () => setDialogMode(undefined);
+
+ const handleSubmit = () => {
+ const value = dialogValue.trim();
+ if (!value) return;
+
+ switch (dialogMode) {
+ case "rename":
+ if (node.type === "group") renameGroup(node.id, value);
+ else if (node.type === "item") renameEntity(node.entityId, value);
+ break;
+
+ case "add-item":
+ addEntity("todo", parentId, value);
+ break;
+
+ case "add-group":
+ addGroup(value, parentId);
+ break;
+ }
+
+ closeDialog();
+ };
+
+ const confirmDelete = (message: string, action: () => void) => {
+ if (window.confirm(message)) action();
+ };
+
+ const dialogTitle = dialogMode?.startsWith("rename")
+ ? "Rename"
+ : dialogMode === "add-item"
+ ? "Add new list"
+ : "Add new group";
+
+ const dialog = (
+
+ );
+
+ /* ================= GROUP ================= */
+
+ if (node.type === "group") {
return (
-
- {
- workspace.setRoute(entity.id);
- }}
- >
- {workspace.entities[entity.id].name}
-
-
+ <>
+
+
+
+
+
+
+
+ {node.name}
+
+
+
+
+
+ openDialog("add-item")}>
+ Add list
+
+
+ openDialog("add-group")}>
+ Add group
+
+
+ openDialog("rename", node.name)}
+ >
+ Rename
+
+
+
+ confirmDelete("Delete this group and its children?", () =>
+ removeNode(node.id),
+ )
+ }
+ >
+ Delete
+
+
+
+
+
+
+
+
+ {node.children.map((child) => (
+
+
+
+
+
+ {dialog}
+
);
}
+
+ /* ================= ITEM ================= */
+
+ const entity = workspace.entities[node.entityId];
+ if (!entity) return null;
+
+ return (
+ <>
+
+
+
+
+ setRoute({
+ workspace: workspace.id,
+ entity: node.entityId,
+ })
+ }
+ >
+ {entity.name}
+
+
+
+
+ openDialog("rename", entity.name)}>
+ Rename
+
+
+
+ confirmDelete("Delete this list?", () =>
+ deleteEntity(node.entityId),
+ )
+ }
+ >
+ Delete
+
+
+
+
+ {dialog}
+
+ );
}
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..183bdc3
--- /dev/null
+++ b/src/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function ContextMenu({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return (
+ & {
+ inset?: boolean;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function ContextMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function ContextMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+ variant?: "default" | "destructive";
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function ContextMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function ContextMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean;
+}) {
+ return (
+ ) {
+ return (
+ (null);
+ const [isExporting, setIsExporting] = useState(false);
+
+ const handleExport = (format: "json" | "markdown" | "html") => {
+ const docEntity = {
+ id: "",
+ type: "doc" as const,
+ name: docName,
+ content: doc,
+ createdAt: Date.now(),
+ updatedAt: Date.now(),
+ };
+ let content = "";
+ let filename = `${docName.replace(/\s+/g, "_")}_${Date.now()}`;
+
+ switch (format) {
+ case "json":
+ content = exportDocAsJson(docEntity);
+ filename += ".json";
+ break;
+ case "markdown":
+ content = exportDocAsMarkdown(docEntity);
+ filename += ".md";
+ break;
+ case "html":
+ content = exportDocAsHtml(docEntity);
+ filename += ".html";
+ break;
+ }
+
+ downloadFile(
+ content,
+ filename,
+ format === "html" ? "text/html" : "text/plain",
+ );
+ };
useEffect(() => {
let editor: any;
@@ -118,6 +170,10 @@ export default function DocView({
},
data: doc,
async onChange() {
+ if (!editor || !editor.save) {
+ console.warn("unable to save, editor.save is null");
+ return;
+ }
const savedData = await editor.save();
console.log("Document data:", toMarkdown(savedData));
setDoc(savedData);
@@ -131,5 +187,31 @@ export default function DocView({
};
}, []);
- return ;
+ return (
+ ;
- tasks: Task[];
- setTasks: SetState;
- createTask: (status: string) => void;
+ tags: Record;
+
+ tasks: Record;
+
+ statuses: Status[];
+
+ /** Update entire tasks record */
+ setTasks: (tasks: Record) => void;
+
+ /** Update tags */
+ setTags: (tags: Record) => void;
+
+ /** Update statuses */
+ setStatuses: (statuses: Status[]) => void;
+
+ /** Create a new task with a status */
+ createTask: (statusId: string) => void;
+
+ /** Entity name for export */
+ entityName?: string;
};
export default function TaskView({
tags,
tasks,
+ statuses,
setTasks,
+ setTags,
+ setStatuses,
createTask,
+ entityName = "Tasks",
}: TaskViewProps) {
+ const [isExporting, setIsExporting] = useState(false);
+
+ const handleExport = (format: "json" | "csv" | "markdown") => {
+ const todoEntity = {
+ id: "",
+ type: "todo" as const,
+ name: entityName,
+ config: { statuses },
+ tags,
+ tasks,
+ createdAt: Date.now(),
+ updatedAt: Date.now(),
+ };
+
+ let content = "";
+ let filename = `${entityName.replace(/\s+/g, "_")}_${Date.now()}`;
+
+ switch (format) {
+ case "json":
+ content = exportTodoAsJson(todoEntity);
+ filename += ".json";
+ break;
+ case "csv":
+ content = exportTodoAsCsv(todoEntity);
+ filename += ".csv";
+ break;
+ case "markdown":
+ content = exportTodoAsMarkdown(todoEntity);
+ filename += ".md";
+ break;
+ }
+
+ downloadFile(content, filename, "text/plain");
+ };
return (
-
+
+ );
}
diff --git a/src/components/view/TaskView.tsx b/src/components/view/TaskView.tsx
index e3c334e..adffc7a 100644
--- a/src/components/view/TaskView.tsx
+++ b/src/components/view/TaskView.tsx
@@ -1,45 +1,161 @@
"use client";
-import { SetState, Task } from "@/lib/types";
+import { Tag, TagId, Task, TaskId, Status } from "@/lib/types";
import { Color } from "@/lib/ui/color";
import BoardView from "./board/BoardView";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { TableView } from "./table/TableView";
+import EditView from "./edit/EditView";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { FileDown } from "lucide-react";
+import {
+ downloadFile,
+ exportTodoAsJson,
+ exportTodoAsCsv,
+ exportTodoAsMarkdown,
+} from "@/lib/export";
+import { useEffect, useState } from "react";
export type TaskViewProps = {
- tags: Record
+
+
+
+
+
+ handleExport("markdown")}>
+ Export as Markdown
+
+ handleExport("html")}>
+ Export as HTML
+
+ handleExport("json")}>
+ Export as JSON
+
+
+
+
+
+
-
-
- Board
- Table
-
-
+
+
+
+
-
+
+
+
+
+
diff --git a/src/components/view/board/BoardView.tsx b/src/components/view/board/BoardView.tsx
index 3418f57..8cef5de 100644
--- a/src/components/view/board/BoardView.tsx
+++ b/src/components/view/board/BoardView.tsx
@@ -3,101 +3,333 @@
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, Trash2 } from "lucide-react";
import BoardTask from "./Task";
import { TaskViewProps } from "../TaskView";
-
-const statusLabels: Record = {
- todo: "To do",
- inprogress: "In progress",
- done: "Done",
-};
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { useState, useEffect, useRef, useCallback } from "react";
export default function BoardView({
tags,
tasks,
setTasks,
createTask,
+ statuses,
}: TaskViewProps) {
+ const [selectedIds, setSelectedIds] = useState>(new Set());
+ const [isDraggingSelection, setIsDraggingSelection] = useState(false);
+ const [selectionBox, setSelectionBox] = useState<{
+ startX: number;
+ startY: number;
+ endX: number;
+ endY: number;
+ } | null>(null);
+ const boardRef = useRef(null);
+ const taskCardRefs = useRef>({});
+ const mouseDownPos = useRef<{ x: number; y: number } | null>(null);
+
function onDragEnd(result: any) {
const { draggableId, source, destination } = result;
if (!destination) return;
- setTasks((tasks) => {
- const taskIndex = tasks.findIndex((task) => task.id === draggableId);
- const task = tasks[taskIndex];
- tasks.splice(taskIndex, 1);
+ const task = Object.values(tasks).find((t) => t.id === draggableId);
+ if (!task) return;
- const destinationGroupStartIndex = tasks.findIndex(
- (t) => t.status === destination.droppableId
- );
-
- const insertIndex =
- destinationGroupStartIndex === -1
- ? tasks.length
- : destinationGroupStartIndex + destination.index;
-
- tasks.splice(insertIndex, 0, {
+ setTasks({
+ ...tasks,
+ [task.id]: {
...task,
- status: destination.droppableId,
- });
-
- return tasks;
+ statusId: destination.droppableId,
+ updatedAt: Date.now(),
+ },
});
}
+ const deleteSelected = useCallback(() => {
+ if (selectedIds.size === 0) return;
+ const updated = { ...tasks };
+ selectedIds.forEach((id) => delete updated[id]);
+ setTasks(updated);
+ setSelectedIds(new Set());
+ }, [selectedIds, tasks, setTasks]);
+
+ // Ctrl+A to select all, Backspace/Delete to delete selected
+ useEffect(() => {
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === "a" && (e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ setSelectedIds(new Set(Object.keys(tasks)));
+ }
+ if (e.key === "Backspace" || e.key === "Delete") {
+ // Don't fire if user is typing in an input/textarea
+ const target = e.target as HTMLElement;
+ if (
+ target.tagName === "INPUT" ||
+ target.tagName === "TEXTAREA" ||
+ target.isContentEditable
+ )
+ return;
+ deleteSelected();
+ }
+ }
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [tasks, deleteSelected]);
+
+ // Mouse drag selection
+ useEffect(() => {
+ function handleMouseDown(e: MouseEvent) {
+ // Only start selection if clicking on the board background (not a card)
+ const target = e.target as HTMLElement;
+ const isCard = target.closest("[data-task-card]");
+ if (isCard) return;
+ if (e.button !== 0) return;
+
+ mouseDownPos.current = { x: e.clientX, y: e.clientY };
+ }
+
+ function handleMouseMove(e: MouseEvent) {
+ if (!mouseDownPos.current) return;
+ const dx = Math.abs(e.clientX - mouseDownPos.current.x);
+ const dy = Math.abs(e.clientY - mouseDownPos.current.y);
+ if (dx > 4 || dy > 4) {
+ setIsDraggingSelection(true);
+ setSelectionBox({
+ startX: mouseDownPos.current.x,
+ startY: mouseDownPos.current.y,
+ endX: e.clientX,
+ endY: e.clientY,
+ });
+ }
+ }
+
+ function handleMouseUp(e: MouseEvent) {
+ if (isDraggingSelection && selectionBox) {
+ // Find all task cards that intersect with the selection box
+ const minX = Math.min(selectionBox.startX, selectionBox.endX);
+ const maxX = Math.max(selectionBox.startX, selectionBox.endX);
+ const minY = Math.min(selectionBox.startY, selectionBox.endY);
+ const maxY = Math.max(selectionBox.startY, selectionBox.endY);
+
+ const newSelected = new Set();
+ Object.entries(taskCardRefs.current).forEach(([id, el]) => {
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+ if (
+ rect.left < maxX &&
+ rect.right > minX &&
+ rect.top < maxY &&
+ rect.bottom > minY
+ ) {
+ newSelected.add(id);
+ }
+ });
+
+ if (e.shiftKey) {
+ setSelectedIds((prev) => new Set([...prev, ...newSelected]));
+ } else {
+ setSelectedIds(newSelected);
+ }
+ } else if (!isDraggingSelection) {
+ // Click on empty area deselects
+ const target = e.target as HTMLElement;
+ const isCard = target.closest("[data-task-card]");
+ if (!isCard) {
+ setSelectedIds(new Set());
+ }
+ }
+
+ mouseDownPos.current = null;
+ setIsDraggingSelection(false);
+ setSelectionBox(null);
+ }
+
+ window.addEventListener("mousedown", handleMouseDown);
+ window.addEventListener("mousemove", handleMouseMove);
+ window.addEventListener("mouseup", handleMouseUp);
+ return () => {
+ window.removeEventListener("mousedown", handleMouseDown);
+ window.removeEventListener("mousemove", handleMouseMove);
+ window.removeEventListener("mouseup", handleMouseUp);
+ };
+ }, [isDraggingSelection, selectionBox]);
+
+ function handleTaskClick(e: React.MouseEvent, taskId: string) {
+ if (e.ctrlKey || e.metaKey) {
+ setSelectedIds((prev) => {
+ const next = new Set(prev);
+ if (next.has(taskId)) next.delete(taskId);
+ else next.add(taskId);
+ return next;
+ });
+ } else if (e.shiftKey) {
+ setSelectedIds((prev) => new Set([...prev, taskId]));
+ }
+ // Normal click handled by SheetTrigger (task edit) if not multi-select
+ }
+
+ const tasksArray = Object.values(tasks);
+ const tasksByStatus = statuses.map((status) => ({
+ status,
+ tasks: tasksArray
+ .filter((t) => t.statusId === status.id)
+ .sort((a, b) => a.createdAt - b.createdAt),
+ }));
+
+ const selRect = selectionBox
+ ? {
+ left: Math.min(selectionBox.startX, selectionBox.endX),
+ top: Math.min(selectionBox.startY, selectionBox.endY),
+ width: Math.abs(selectionBox.endX - selectionBox.startX),
+ height: Math.abs(selectionBox.endY - selectionBox.startY),
+ }
+ : null;
+
return (
-
+
+ Board
+ Table
+ Edit
+
+
+
+
+
+
+
+ handleExport("csv")}>
+ Export as CSV
+
+ handleExport("markdown")}>
+ Export as Markdown
+
+ handleExport("json")}>
+ Export as JSON
+
+
+
+
+
+
+
+ {/* Selection box overlay */}
+ {isDraggingSelection && selRect && (
+
+ )}
+
+ {/* Delete bar when items selected */}
+ {selectedIds.size > 0 && (
+
-
+
+ {selectedIds.size} task{selectedIds.size !== 1 ? "s" : ""} selected
+
+
+ — press Backspace to delete
+
+
+
+
+ )}
+
- {Object.keys(statusLabels).map((status) => (
-
+
+ {tasksByStatus.map(({ status, tasks: statusTasks }) => (
+
{(provided) => (
- {statusLabels[status]}
+ {status.name}
-
+
- {tasks
- .filter((task) => task.status === status)
- .map((task, index) => (
-
- {(provided) => (
-
- setTasks((cols) =>
- cols.map((c) => (c.id === t.id ? t : c))
- )
- }
- provided={provided}
- task={task}
- tags={tags}
- />
- )}
-
- ))}
+ {statusTasks.map((task, index) => (
+
+ {(provided) => (
+
+
+
+
+
+ {
+ const updated = { ...tasks };
+ delete updated[task.id];
+ setTasks(updated);
+ setSelectedIds((prev) => {
+ const next = new Set(prev);
+ next.delete(task.id);
+ return next;
+ });
+ }}
+ >
+
+
+
+ )}
+
+ ))}
{provided.placeholder}
- {tasks.filter((task) => task.status === status).length ===
- 0 && (
+ {statusTasks.length === 0 && (
;
+ tags: Record;
+ onDelete?: (taskId: string) => void;
+ isSelected?: boolean;
}) {
return (
-
- {task.title}
-
-
-
+
+ {task.title}
+
- {task.description}
+ {task.description && (
+
+ {task.description}
+
+ )}
-
- {task.tags?.map((tag, i) => (
+
+ {task.tagIds?.map((tagId) => (
- {tag}
+ {tags[tagId]?.name || tagId}
))}
@@ -68,4 +96,4 @@ export default function BoardTask({
);
-}
+}
\ No newline at end of file
diff --git a/src/components/view/edit/DocDialog.tsx b/src/components/view/edit/DocDialog.tsx
index e4cb881..47e6f5e 100644
--- a/src/components/view/edit/DocDialog.tsx
+++ b/src/components/view/edit/DocDialog.tsx
@@ -10,8 +10,8 @@ import {
import { ScrollArea } from "@/components/ui/scroll-area";
import DocView from "../DocView";
import { Badge } from "@/components/ui/badge";
-import { Task } from "@/lib/types";
-import { Color, getColor } from "@/lib/ui/color";
+import { Task, Tag, TagId } from "@/lib/types";
+import { getColor } from "@/lib/ui/color";
import { useState } from "react";
import { OutputData } from "@editorjs/editorjs";
@@ -23,10 +23,19 @@ export default function DocDialog({
}: {
task: Task;
setTask: (t: Task) => void;
- tags: Record;
+ tags: Record;
children: React.ReactNode;
}) {
- const [doc, setDoc] = useState({ blocks: [] });
+ // if there is an existing document on the task use it, otherwise start with a blank one
+ const doc = task.doc || { version: "2.28.0", time: Date.now(), blocks: [] };
+
+ const handleDocChange = (newDoc: OutputData) => {
+ setTask({
+ ...task,
+ doc: newDoc,
+ updatedAt: Date.now(),
+ });
+ };
return (
diff --git a/src/components/view/edit/EditView.tsx b/src/components/view/edit/EditView.tsx
new file mode 100644
index 0000000..a9b8b4a
--- /dev/null
+++ b/src/components/view/edit/EditView.tsx
@@ -0,0 +1,318 @@
+"use client";
+
+import { Tag, TagId, Status } from "@/lib/types";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { X, Plus, GripVertical } from "lucide-react";
+
+export type EditViewProps = {
+ tags: Record;
+ statuses: Status[];
+ setTags: (tags: Record) => void;
+ setStatuses: (statuses: Status[]) => void;
+};
+
+const COLOR_OPTIONS = [
+ "red",
+ "orange",
+ "yellow",
+ "green",
+ "blue",
+ "indigo",
+ "purple",
+ "pink",
+ "gray",
+];
+
+export default function EditView({
+ tags,
+ statuses,
+ setTags,
+ setStatuses,
+}: EditViewProps) {
+ const [newTagName, setNewTagName] = useState("");
+ const [newTagColor, setNewTagColor] = useState("blue");
+ const [newStatusName, setNewStatusName] = useState("");
+ const [newStatusColor, setNewStatusColor] = useState("blue");
+
+ const handleAddTag = () => {
+ if (newTagName.trim()) {
+ const newTagId = `tag-${Date.now()}`;
+ setTags({
+ ...tags,
+ [newTagId]: {
+ id: newTagId,
+ name: newTagName,
+ color: newTagColor,
+ },
+ });
+ setNewTagName("");
+ setNewTagColor("blue");
+ }
+ };
+
+ const handleDeleteTag = (tagId: TagId) => {
+ const newTags = { ...tags };
+ delete newTags[tagId];
+ setTags(newTags);
+ };
+
+ const handleAddStatus = () => {
+ if (newStatusName.trim()) {
+ const newStatus: Status = {
+ id: `status-${Date.now()}`,
+ name: newStatusName,
+ color: newStatusColor,
+ order: statuses.length,
+ };
+ setStatuses([...statuses, newStatus]);
+ setNewStatusName("");
+ setNewStatusColor("blue");
+ }
+ };
+
+ const handleDeleteStatus = (statusId: string) => {
+ setStatuses(statuses.filter((s) => s.id !== statusId));
+ };
+
+ const handleUpdateStatusName = (statusId: string, newName: string) => {
+ setStatuses(
+ statuses.map((s) => (s.id === statusId ? { ...s, name: newName } : s)),
+ );
+ };
+
+ const handleUpdateStatusColor = (statusId: string, newColor: string) => {
+ setStatuses(
+ statuses.map((s) => (s.id === statusId ? { ...s, color: newColor } : s)),
+ );
+ };
+
+ const handleUpdateTagName = (tagId: TagId, newName: string) => {
+ setTags({
+ ...tags,
+ [tagId]: { ...tags[tagId], name: newName },
+ });
+ };
+
+ const handleUpdateTagColor = (tagId: TagId, newColor: string) => {
+ setTags({
+ ...tags,
+ [tagId]: { ...tags[tagId], color: newColor },
+ });
+ };
+
+ return (
+ ;
+ tags: Record;
children: React.ReactNode;
}) {
return (
@@ -52,32 +38,48 @@ export default function TaskEdit({
{
+ provided.innerRef(el);
+ taskCardRefs.current[task.id] = el;
+ }}
+ {...provided.draggableProps}
+ {...provided.dragHandleProps}
+ data-task-card={task.id}
+ onClick={(e) => handleTaskClick(e, task.id)}
+ >
+
+ setTasks({
+ ...tasks,
+ [t.id]: t,
+ })
+ }
+ provided={provided}
+ task={task}
+ tags={tags}
+ isSelected={selectedIds.has(task.id)}
+ onDelete={(id) => {
+ const updated = { ...tasks };
+ delete updated[id];
+ setTasks(updated);
+ setSelectedIds((prev) => {
+ const next = new Set(prev);
+ next.delete(id);
+ return next;
+ });
+ }}
+ />
+
+ No tasks
diff --git a/src/components/view/board/Task.tsx b/src/components/view/board/Task.tsx index 6a5d96a..d662510 100644 --- a/src/components/view/board/Task.tsx +++ b/src/components/view/board/Task.tsx @@ -7,60 +7,88 @@ import { CardTitle, } from "@/components/ui/card"; import { SheetTrigger } from "@/components/ui/sheet"; -import { Task } from "@/lib/types"; +import { Task, Tag, TagId } from "@/lib/types"; import { Color, getColor } from "@/lib/ui/color"; import { DraggableProvided } from "@hello-pangea/dnd"; import TaskEdit from "../edit/TaskEdit"; import { Button } from "@/components/ui/button"; -import { NotepadText } from "lucide-react"; +import { NotepadText, Trash2 } from "lucide-react"; import DocDialog from "../edit/DocDialog"; +import { cn } from "@/lib/utils"; export default function BoardTask({ task, provided, setTask, tags, + onDelete, + isSelected, }: { task: Task; setTask: (t: Task) => void; provided: DraggableProvided; - tags: Record
+
+
+
+ {onDelete && (
+
+ )}
+
+ {/* Tags Section */}
+
+ );
+}
diff --git a/src/components/view/edit/TaskEdit.tsx b/src/components/view/edit/TaskEdit.tsx
index 0bb65ff..45abb0b 100644
--- a/src/components/view/edit/TaskEdit.tsx
+++ b/src/components/view/edit/TaskEdit.tsx
@@ -8,23 +8,9 @@ import {
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
-import { Task } from "@/lib/types";
+import { Task, Tag, TagId } from "@/lib/types";
import { Color, getColor } from "@/lib/ui/color";
-import { DraggableProvided } from "@hello-pangea/dnd";
import { Button } from "../../ui/button";
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTrigger,
-} from "../../ui/dialog";
-import DocView from "../DocView";
-import { useState } from "react";
-import { OutputData } from "@editorjs/editorjs";
-import { DialogTitle } from "@radix-ui/react-dialog";
-import { ScrollArea } from "../../ui/scroll-area";
-import { Badge } from "../../ui/badge";
import DocDialog from "./DocDialog";
export default function TaskEdit({
@@ -35,7 +21,7 @@ export default function TaskEdit({
}: {
task: Task;
setTask: (t: Task) => void;
- tags: Record
+
+ {Object.entries(tags).map(([tagId, tag]) => (
+
+
+
+ {/* Statuses Section */}
+ Tags
+
+
+
+
+
+
+
+
+
+ handleUpdateTagName(tagId, e.target.value)}
+ placeholder="Tag name"
+ className="flex-1"
+ />
+
+
+
+ ))}
+
+
+ {COLOR_OPTIONS.map((color) => (
+
+
+
+
+
+
+
+
+
+
+ setNewTagName(e.target.value)}
+ placeholder="New tag name"
+ className="flex-1"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ handleAddTag();
+ }
+ }}
+ />
+
+
+
+
+ {COLOR_OPTIONS.map((color) => (
+
+
+
+ {statuses.map((status) => (
+
+
+ Statuses
+
+
+
+
+
+
+
+
+
+
+ handleUpdateStatusName(status.id, e.target.value)
+ }
+ placeholder="Status name"
+ className="flex-1"
+ />
+
+
+
+ ))}
+
+
+ {COLOR_OPTIONS.map((color) => (
+
+
+
+
+
+
+
+
+
+
+ setNewStatusName(e.target.value)}
+ placeholder="New status name"
+ className="flex-1"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ handleAddStatus();
+ }
+ }}
+ />
+
+
+
+
+ {COLOR_OPTIONS.map((color) => (
+
+
setTask({ ...task, title: e.target.value })}
+ value={task.title}
+ onChange={(e) =>
+ setTask({
+ ...task,
+ title: e.target.value,
+ updatedAt: Date.now(),
+ })
+ }
/>
- setTask({ ...task, description: e.target.value })
+ setTask({
+ ...task,
+ description: e.target.value,
+ updatedAt: Date.now(),
+ })
}
/>
-
+
({
label: tag.name,
value: id,
style: {
- iconColor: getColor(tag.color).color,
- badgeColor: getColor(tag.color).backgroundColor,
+ iconColor: getColor(tag.color || "#808080").color,
+ badgeColor: getColor(tag.color || "#808080").backgroundColor,
},
}))}
- onValueChange={(tags) => setTask({ ...task, tags })}
- defaultValue={task.tags}
+ onValueChange={(tagIds) =>
+ setTask({
+ ...task,
+ tagIds: tagIds as TagId[],
+ updatedAt: Date.now(),
+ })
+ }
+ defaultValue={task.tagIds}
/>
diff --git a/src/components/view/table/TableView.tsx b/src/components/view/table/TableView.tsx
index 282e88a..248030d 100644
--- a/src/components/view/table/TableView.tsx
+++ b/src/components/view/table/TableView.tsx
@@ -15,6 +15,10 @@ import { getColor } from "@/lib/ui/color";
import TableTask from "./Task";
export function TableView({ tasks, setTasks, tags }: TaskViewProps) {
+ const tasksArray = Object.values(tasks).sort(
+ (a, b) => b.createdAt - a.createdAt,
+ );
+
return (