merge: combine all features from both codebases - mobile dashboard + layer panel + notifications + shares + all fixes

2026-07-04 16:43:55 +02:00
parent 0606dbb501
commit be62470b53
79 changed files with 9562 additions and 3132 deletions
@@ -0,0 +1,116 @@
+/**
+ * InlineTextEditor – Floating input overlay for non-blocking text editing.
+ * Replaces window.prompt() for text element editing.
+ */
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface InlineTextEditorProps {
+  initialText: string;
+  onSubmit: (text: string) => void;
+  onCancel: () => void;
+}
+
+const InlineTextEditor: React.FC<InlineTextEditorProps> = ({ initialText, onSubmit, onCancel }) => {
+  const [text, setText] = useState(initialText);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onSubmit(text);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  const handleBlur = () => {
+    onSubmit(text);
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: 10000,
+        background: 'var(--color-bg-secondary, #2a2a2a)',
+        border: '1px solid var(--color-border, #444)',
+        borderRadius: '8px',
+        padding: '12px 16px',
+        boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        minWidth: '320px',
+      }}
+    >
+      <label
+        style={{
+          fontSize: '12px',
+          color: 'var(--color-text-secondary, #aaa)',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        Text eingeben
+      </label>
+      <input
+        ref={inputRef}
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        style={{
+          width: '100%',
+          padding: '8px 10px',
+          fontSize: '14px',
+          background: 'var(--color-bg-primary, #1a1a1a)',
+          color: 'var(--color-text-primary, #fff)',
+          border: '1px solid var(--color-border, #555)',
+          borderRadius: '4px',
+          outline: 'none',
+        }}
+      />
+      <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+        <button
+          onClick={onCancel}
+          style={{
+            padding: '6px 14px',
+            fontSize: '13px',
+            background: 'transparent',
+            color: 'var(--color-text-secondary, #aaa)',
+            border: '1px solid var(--color-border, #555)',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Abbrechen (Esc)
+        </button>
+        <button
+          onClick={() => onSubmit(text)}
+          style={{
+            padding: '6px 14px',
+            fontSize: '13px',
+            background: 'var(--color-accent, #3498db)',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Bestätigen (Enter)
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InlineTextEditor;