From 9a837305330cc7a784bb58284ec31c1f19999b7d Mon Sep 17 00:00:00 2001
From: "Dennis (via Claude+Gemma)" <dennis.paradzinski@it.financeflow.de>
Date: Sat, 23 May 2026 10:29:02 +0200
Subject: [PATCH] feat(context-menu-component): ContextMenu mit right-click
 trigger [tsc:fail]

---
 .phase42-state.json                     |  7 ++-
 GENERATION_LOG.md                       | 18 ++++++
 apps/web/src/components/ContextMenu.tsx | 73 +++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/ContextMenu.tsx

diff --git a/.phase42-state.json b/.phase42-state.json
index 282451f..0baa6f0 100644
--- a/.phase42-state.json
+++ b/.phase42-state.json
@@ -1,5 +1,8 @@
 {
   "completed_features": [],
-  "current_feature": "button-group-component",
-  "started_at": "2026-05-23T10:28:27.180963"
+  "current_feature": "context-menu-component",
+  "started_at": "2026-05-23T10:28:27.180963",
+  "attempted_features": [
+    "button-group-component"
+  ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index 7635e48..645142c 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -4369,3 +4369,21 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
+- `10:28:40` **INFO**   Committed feature button-group-component
+- `10:28:40` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: context-menu-component (2026-05-23 10:28:40)
+
+- `10:28:40` **INFO** Description: ContextMenu mit right-click trigger
+- `10:28:40` **INFO**   Generating apps/web/src/components/ContextMenu.tsx (ContextMenu-Component. Props: items (array {label, icon?, onClick, dan…)
+- `10:29:00` **INFO**     wrote 2340 chars in 19.5s (attempt 1)
+- `10:29:00` **INFO** Running tsc --noEmit on api…
+- `10:29:02` **WARN**   tsc errors:
+src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
diff --git a/apps/web/src/components/ContextMenu.tsx b/apps/web/src/components/ContextMenu.tsx
new file mode 100644
index 0000000..1cde80f
--- /dev/null
+++ b/apps/web/src/components/ContextMenu.tsx
@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface ContextMenuItem {
+  label: string;
+  icon?: LucideIcon;
+  onClick: () => void;
+  danger?: boolean;
+}
+
+interface ContextMenuProps {
+  items: ContextMenuItem[];
+  children: React.ReactNode;
+}
+
+export default function ContextMenu({ items, children }: ContextMenuProps) {
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setVisible(false);
+      }
+    }
+    if (visible) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [visible]);
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setPosition({ x: e.clientX, y: e.clientY });
+    setVisible(true);
+  };
+
+  return (
+    <div onContextMenu={handleContextMenu} className="relative inline-block">
+      {children}
+
+      {visible && (
+        <div
+          ref={menuRef}
+          className="fixed z-50 min-w-[160px] py-1 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          style={{ top: position.y, left: position.x }}
+        >
+          {items.map((item, index) => {
+            const Icon = item.icon;
+            return (
+              <button
+                key={index}
+                onClick={() => {
+                  item.onClick();
+                  setVisible(false);
+                }}
+                className={`flex items-center w-full px-3 py-2 text-sm transition-colors cursor-pointer
+                  ${item.danger 
+                    ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20' 
+                    : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800'
+                  }`}
+              >
+                {Icon && <Icon className="w-4 h-4 mr-2" />}
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file