From bee571ed19e77c1cb275c5c9ce3026555b78dcf7 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 27 Feb 2026 22:59:04 +0100
Subject: [PATCH] Edit

---
 src/components/view/edit/EditView.tsx | 318 ++++++++++++++++++++++++++
 1 file changed, 318 insertions(+)
 create mode 100644 src/components/view/edit/EditView.tsx

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<TagId, Tag>;
+  statuses: Status[];
+  setTags: (tags: Record<TagId, Tag>) => 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 (
+    <div className="space-y-6">
+      {/* Tags Section */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Tags</h3>
+        <Card className="p-4 space-y-3">
+          {Object.entries(tags).map(([tagId, tag]) => (
+            <div
+              key={tagId}
+              className="flex items-center gap-3 p-3 bg-secondary rounded-lg"
+            >
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
+                    style={{ backgroundColor: tag.color || "gray" }}
+                  />
+                </PopoverTrigger>
+                <PopoverContent className="w-40 p-3">
+                  <div className="grid grid-cols-3 gap-2">
+                    {COLOR_OPTIONS.map((color) => (
+                      <button
+                        key={color}
+                        className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
+                        style={{
+                          backgroundColor: color,
+                          borderColor:
+                            tag.color === color ? "black" : "transparent",
+                        }}
+                        onClick={() => handleUpdateTagColor(tagId, color)}
+                      />
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+
+              <Input
+                value={tag.name}
+                onChange={(e) => handleUpdateTagName(tagId, e.target.value)}
+                placeholder="Tag name"
+                className="flex-1"
+              />
+
+              <button
+                onClick={() => handleDeleteTag(tagId)}
+                className="p-2 hover:bg-destructive/10 rounded-md transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+
+          <Separator />
+
+          <div className="flex gap-2 pt-2">
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
+                  style={{ backgroundColor: newTagColor || "gray" }}
+                />
+              </PopoverTrigger>
+              <PopoverContent className="w-40 p-3">
+                <div className="grid grid-cols-3 gap-2">
+                  {COLOR_OPTIONS.map((color) => (
+                    <button
+                      key={color}
+                      className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
+                      style={{
+                        backgroundColor: color,
+                        borderColor:
+                          newTagColor === color ? "black" : "transparent",
+                      }}
+                      onClick={() => setNewTagColor(color)}
+                    />
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            <Input
+              value={newTagName}
+              onChange={(e) => setNewTagName(e.target.value)}
+              placeholder="New tag name"
+              className="flex-1"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleAddTag();
+                }
+              }}
+            />
+
+            <Button onClick={handleAddTag} size="sm" className="gap-1">
+              <Plus className="w-4 h-4" />
+              Add
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* Statuses Section */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Statuses</h3>
+        <Card className="p-4 space-y-3">
+          {statuses.map((status) => (
+            <div
+              key={status.id}
+              className="flex items-center gap-3 p-3 bg-secondary rounded-lg"
+            >
+              <GripVertical className="w-4 h-4 text-muted-foreground" />
+
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
+                    style={{ backgroundColor: status.color || "gray" }}
+                  />
+                </PopoverTrigger>
+                <PopoverContent className="w-40 p-3">
+                  <div className="grid grid-cols-3 gap-2">
+                    {COLOR_OPTIONS.map((color) => (
+                      <button
+                        key={color}
+                        className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
+                        style={{
+                          backgroundColor: color,
+                          borderColor:
+                            status.color === color ? "black" : "transparent",
+                        }}
+                        onClick={() =>
+                          handleUpdateStatusColor(status.id, color)
+                        }
+                      />
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+
+              <Input
+                value={status.name}
+                onChange={(e) =>
+                  handleUpdateStatusName(status.id, e.target.value)
+                }
+                placeholder="Status name"
+                className="flex-1"
+              />
+
+              <button
+                onClick={() => handleDeleteStatus(status.id)}
+                className="p-2 hover:bg-destructive/10 rounded-md transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+
+          <Separator />
+
+          <div className="flex gap-2 pt-2">
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
+                  style={{ backgroundColor: newStatusColor || "gray" }}
+                />
+              </PopoverTrigger>
+              <PopoverContent className="w-40 p-3">
+                <div className="grid grid-cols-3 gap-2">
+                  {COLOR_OPTIONS.map((color) => (
+                    <button
+                      key={color}
+                      className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
+                      style={{
+                        backgroundColor: color,
+                        borderColor:
+                          newStatusColor === color ? "black" : "transparent",
+                      }}
+                      onClick={() => setNewStatusColor(color)}
+                    />
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            <Input
+              value={newStatusName}
+              onChange={(e) => setNewStatusName(e.target.value)}
+              placeholder="New status name"
+              className="flex-1"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleAddStatus();
+                }
+              }}
+            />
+
+            <Button onClick={handleAddStatus} size="sm" className="gap-1">
+              <Plus className="w-4 h-4" />
+              Add
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}