Better stuff

src/app/layout.tsx

@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
       >
         {children}
       </body>

src/app/workspace/page.tsx

@@ -7,20 +7,21 @@ import {
   CardTitle,
   CardContent,
   CardFooter,
+  CardDescription,
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Trash } from "lucide-react";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { Color, getColor } from "@/lib/ui/color";
 
 type Task = {
   id: string;
   title: string;
   description?: string;
+  tags?: { name: string; color: Color }[];
 };
 
-type ColumnKey = "todo" | "inprogress" | "done";
+const columnLabels: Record<string, string> = {
-
-const columnLabels: Record<ColumnKey, string> = {
   todo: "To do",
   inprogress: "In progress",
   done: "Done",
@@ -30,7 +31,7 @@ const id = (prefix = "t") =>
   `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 
 export default function Workspace() {
-  const [columns, setColumns] = useState<Record<ColumnKey, Task[]>>({
+  const [columns, setColumns] = useState<Record<string, Task[]>>({
     todo: [],
     inprogress: [],
     done: [],
@@ -42,7 +43,20 @@ export default function Workspace() {
         { id: id(), title: "Buy groceries" },
         { id: id(), title: "Plan sprint" },
       ],
-      inprogress: [{ id: id(), title: "Build header" }],
+      inprogress: [
+        {
+          id: id(),
+          title: "Build header",
+          description: "A simple description",
+          tags: [
+            { name: "Website", color: "pink" },
+            { name: "Development", color: "blue" },
+            { name: "API", color: "green" },
+            { name: "App", color: "purple" },
+            { name: "Rust", color: "orange" },
+          ],
+        },
+      ],
       done: [{ id: id(), title: "Set up repo" }],
     });
   }, []);
@@ -52,16 +66,12 @@ export default function Workspace() {
 
   if (!mounted) return null;
 
-  function removeTask(col: ColumnKey, taskId: string) {
-    setColumns((c) => ({ ...c, [col]: c[col].filter((t) => t.id !== taskId) }));
-  }
-
   function onDragEnd(result: any) {
     const { source, destination } = result;
     if (!destination) return;
 
-    const sourceCol = source.droppableId as ColumnKey;
+    const sourceCol = source.droppableId;
-    const destCol = destination.droppableId as ColumnKey;
+    const destCol = destination.droppableId;
 
     if (sourceCol === destCol) {
       const items = Array.from(columns[sourceCol]);
@@ -85,13 +95,13 @@ export default function Workspace() {
     <div className="p-6 w-full h-full flex flex-col gap-6">
       <DragDropContext onDragEnd={onDragEnd}>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
-          {(Object.keys(columnLabels) as ColumnKey[]).map((colKey) => (
+          {Object.keys(columnLabels).map((colKey) => (
             <Droppable key={colKey} droppableId={colKey}>
               {(provided) => (
                 <Card
                   ref={provided.innerRef}
                   {...provided.droppableProps}
-                  className="min-h-[220px] bg-muted/30"
+                  className="min-h-[220px] bg-background"
                 >
                   <CardHeader>
                     <CardTitle className="flex items-center justify-between">
@@ -110,59 +120,55 @@ export default function Workspace() {
                           index={index}
                         >
                           {(provided) => (
-                            <div
+                            <Card
                               ref={provided.innerRef}
                               {...provided.draggableProps}
                               {...provided.dragHandleProps}
-                              className="border rounded-md p-3 bg-white shadow-sm hover:shadow-md transition flex flex-col gap-2"
+                              className="bg-background"
                             >
-                              <div className="flex justify-between items-start">
+                              <CardHeader>
-                                <div>
+                                <CardTitle>{task.title}</CardTitle>
-                                  <strong className="block">
+                                <CardDescription>
-                                    {task.title}
-                                  </strong>
-                                  {task.description ? (
-                                    <p className="text-sm text-muted-foreground">
                                   {task.description}
-                                    </p>
+                                </CardDescription>
-                                  ) : null}
+                              </CardHeader>
-                                </div>
+                              <CardContent className="flex flex-wrap gap-2 overflow-hidden">
-                                <Button
+                                {task.tags?.map((tag, i) => (
-                                  size="sm"
+                                  <span
-                                  variant="destructive"
+                                    key={tag.name}
-                                  onClick={() => removeTask(colKey, task.id)}
+                                    style={getColor(tag.color)}
+                                    className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
                                   >
-                                  <Trash size={14} />
+                                    {tag.name}
-                                </Button>
+                                  </span>
-                              </div>
+                                ))}
-                            </div>
+                              </CardContent>
+                            </Card>
                           )}
                         </Draggable>
                       ))}
                       {provided.placeholder}
                       {columns[colKey].length === 0 && (
                         <p className="text-sm text-muted-foreground">
-                          No tasks — try adding one!
+                          No tasks
                         </p>
                       )}
                     </div>
                   </CardContent>
                   <CardFooter>
                     <div className="flex justify-between w-full items-center">
-                      <span className="text-sm text-muted-foreground">
-                        Quick actions
-                      </span>
                       <Button
                         size="sm"
                         onClick={() => {
-                          const t: Task = { id: id(), title: "New quick task" };
+                          const t: Task = { id: id(), title: "New task" };
                           setColumns((c) => ({
                             ...c,
-                            [colKey]: [t, ...c[colKey]],
+                            [colKey]: [...c[colKey], t],
                           }));
                         }}
+                        className="ml-auto"
                       >
-                        Quick add
+                        Add
                       </Button>
                     </div>
                   </CardFooter>

src/lib/ui/color.ts

@@ -0,0 +1,63 @@
+export type Color =
+  | "default"
+  | "gray"
+  | "brown"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "blue"
+  | "purple"
+  | "pink"
+  | "red";
+
+interface ColorStyle {
+  backgroundColor: string;
+  color: string;
+}
+
+export function getColor(color: Color): ColorStyle {
+  const colors: Record<Color, ColorStyle> = {
+    default: {
+      backgroundColor: "rgba(47, 52, 55, 0.27)",
+      color: "#FFFFFF",
+    },
+    gray: {
+      backgroundColor: "rgba(151, 154, 155, 0.27)",
+      color: "#979A9B",
+    },
+    brown: {
+      backgroundColor: "rgba(147, 114, 100, 0.27)",
+      color: "#937264",
+    },
+    orange: {
+      backgroundColor: "rgba(255, 163, 68, 0.27)",
+      color: "#FFA344",
+    },
+    yellow: {
+      backgroundColor: "rgba(255, 220, 73, 0.27)",
+      color: "#FFDC49",
+    },
+    green: {
+      backgroundColor: "rgba(77, 171, 154, 0.27)",
+      color: "#4DAB9A",
+    },
+    blue: {
+      backgroundColor: "rgba(82, 156, 202, 0.27)",
+      color: "#529CCA",
+    },
+    purple: {
+      backgroundColor: "rgba(154, 109, 215, 0.27)",
+      color: "#9A6DD7",
+    },
+    pink: {
+      backgroundColor: "rgba(226, 85, 161, 0.27)",
+      color: "#E255A1",
+    },
+    red: {
+      backgroundColor: "rgba(255, 115, 105, 0.27)",
+      color: "#FF7369",
+    },
+  };
+
+  return colors[color];
+}