update components, add welcome screen, fixed some display logic

arnobt78 · arnobt78 · commit 868fdb6f0d79 · 2025-11-02T14:16:58.000+01:00
diff --git a/app/globals.css b/app/globals.css
@@ -115,6 +115,59 @@
     }
   }
 
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+      transform: translateY(-30px) rotate(5deg);
+    }
+  }
+
+  @keyframes gradientPulse {
+    0%,
+    100% {
+      color: #f42f5f;
+      transform: scale(1);
+      opacity: 0.6;
+      filter: drop-shadow(0 0 2rem rgba(244, 47, 95, 0.4));
+    }
+    50% {
+      color: #fe8d5c;
+      transform: scale(1.15);
+      opacity: 1;
+      filter: drop-shadow(0 0 4rem rgba(254, 141, 92, 0.6));
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-float {
+    animation: float 8s ease-in-out infinite;
+  }
+
+  .animate-gradient-pulse {
+    animation: gradientPulse 3s ease-in-out infinite;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.5s ease-out;
+  }
+
+  .animate-cursor-blink {
+    animation: cursorBlink 1s step-end infinite;
+  }
+
   /* Sonner Toast Custom Styling */
   [data-sonner-toast][data-type="success"] {
     background-color: rgb(240 253 244) !important; /* bg-green-50 */
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
-import SocketGenerator from "@/components/socket-generator";
+import AppWrapper from "@/components/app-wrapper";
 
 export default function Home() {
-  return <SocketGenerator />;
+  return <AppWrapper />;
 }
diff --git a/components/app-wrapper.tsx b/components/app-wrapper.tsx
@@ -0,0 +1,59 @@
+/**
+ * ========================================
+ * APP WRAPPER COMPONENT
+ * ========================================
+ * Client-side wrapper that handles welcome screen logic.
+ * This keeps app/page.tsx clean as a server component entry point.
+ *
+ * Responsibilities:
+ * - Check localStorage for welcome screen state
+ * - Manage welcome screen display/hide
+ * - Prevent hydration mismatches
+ */
+
+"use client";
+
+import React, { useState, useEffect } from "react";
+import SocketGenerator from "@/components/socket-generator";
+import WelcomeScreen from "@/components/welcome-screen";
+
+export default function AppWrapper() {
+  const [showWelcome, setShowWelcome] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Check localStorage to see if user has seen welcome screen
+    const hasSeenWelcome = localStorage.getItem(
+      "socket-generator-has-seen-welcome"
+    );
+    if (hasSeenWelcome !== "true") {
+      setShowWelcome(true);
+    }
+    setIsLoading(false);
+  }, []);
+
+  const handleWelcomeClose = () => {
+    setShowWelcome(false);
+    // Save that user has seen welcome screen
+    localStorage.setItem("socket-generator-has-seen-welcome", "true");
+  };
+
+  // Show loading state briefly to prevent hydration mismatch
+  if (isLoading) {
+    return (
+      <div className="flex h-screen w-screen bg-[#0a0a0a] items-center justify-center">
+        <div className="opacity-0">
+          <SocketGenerator />
+        </div>
+      </div>
+    );
+  }
+
+  // Show welcome screen first time
+  if (showWelcome) {
+    return <WelcomeScreen onClose={handleWelcomeClose} />;
+  }
+
+  // Show main application
+  return <SocketGenerator />;
+}
diff --git a/components/control-panel.tsx b/components/control-panel.tsx
@@ -614,6 +614,7 @@ export default function ControlPanel({
                           <div className="relative">
                             <Input
                               type="text"
+                              placeholder="40.0"
                               value={plateInputs[plate.id]?.width || ""}
                               onFocus={() => {
                                 setSelectedPlateInput(`${plate.id}-width`);
@@ -661,6 +662,7 @@ export default function ControlPanel({
                           <div className="relative">
                             <Input
                               type="text"
+                              placeholder="40.0"
                               value={plateInputs[plate.id]?.height || ""}
                               onFocus={() => {
                                 setSelectedPlateInput(`${plate.id}-height`);
@@ -718,13 +720,14 @@ export default function ControlPanel({
 
           {/* Add plate item button */}
           <div className="flex justify-end mt-4 mb-8">
-            <button
+            <Button
               onClick={addPlate}
-              className="w-fit px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
+              size={undefined}
+              className="w-fit h-auto px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
             >
               Rückwand hinzufügen
               <Plus className="h-4 w-4 stroke-[3] text-green-500 hover:text-green-600 transition-colors" />
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -1040,7 +1043,8 @@ export default function ControlPanel({
                       <div className="flex justify-end mt-4 mb-8">
                         <Button
                           onClick={handleConfirmSocketGroup}
-                          className="w-fit px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
+                          size={undefined}
+                          className="w-fit h-auto px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
                         >
                           Steckdose bestätigen
                         </Button>
@@ -1133,7 +1137,8 @@ export default function ControlPanel({
                   <div className="flex justify-end mt-4 mb-4">
                     <Button
                       onClick={handleAddSocketGroup}
-                      className="w-fit px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
+                      size={undefined}
+                      className="w-fit h-auto px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
                     >
                       Steckdose hinzufügen
                     </Button>
diff --git a/components/plate-canvas.tsx b/components/plate-canvas.tsx
@@ -384,36 +384,48 @@ const PlateCanvas = forwardRef<HTMLDivElement, PlateCanvasProps>(
                     })}
                   </div>
                   {/* Plate dimensions label */}
-                  <div className="text-xs text-gray-400">
-                    Rückwand {plates.findIndex((p) => p.id === plate.id) + 1}:{" "}
-                    {plate.width.toFixed(1)} x {plate.height.toFixed(1)} cm
-                  </div>
+                  {/* When selectedPlate is set, show "Rückwand" prefix only for selected plate */}
+                  {/* When selectedPlate is empty, show all plates without "Rückwand" prefix */}
+                  {(!selectedPlate || selectedPlate === plate.id) && (
+                    <div className="text-xs text-gray-400">
+                      {selectedPlate === plate.id ? "Rückwand " : ""}
+                      {plates.findIndex((p) => p.id === plate.id) + 1}:{" "}
+                      {plate.width.toFixed(1)} x {plate.height.toFixed(1)} cm
+                    </div>
+                  )}
                   {/* Socket group positions - only show when single plate is selected */}
                   {isSinglePlate && plateSocketGroups.length > 0 && (
-                    <div className="mt-2 max-h-32 overflow-y-auto space-y-1">
-                      {plateSocketGroups.map((sg, idx) => {
-                        const isDragging = dragState?.socketGroupId === sg.id;
-                        // Use live drag values if dragging, otherwise use stored position values
-                        const positionX =
-                          isDragging && dragState?.liveDistanceX !== undefined
-                            ? dragState.liveDistanceX
-                            : sg.positionX;
-                        const positionY =
-                          isDragging && dragState?.liveDistanceY !== undefined
-                            ? dragState.liveDistanceY
-                            : sg.positionY;
-                        return (
-                          <div
-                            key={sg.id}
-                            className={`text-[10px] sm:text-xs text-gray-400 ${
-                              isDragging ? "text-green-400 font-semibold" : ""
-                            }`}
-                          >
-                            Steckdosengr. {idx + 1}: X: {positionX.toFixed(1)}{" "}
-                            cm | Y: {positionY.toFixed(1)} cm
-                          </div>
-                        );
-                      })}
+                    <div className="mt-2">
+                      {/* Title for socket groups */}
+                      <div className="text-[10px] sm:text-xs text-gray-400 font-medium text-center mb-1">
+                        Steckdosengr.
+                      </div>
+                      {/* List of socket group positions */}
+                      <div className="max-h-32 overflow-y-auto space-y-1 text-center">
+                        {plateSocketGroups.map((sg, idx) => {
+                          const isDragging = dragState?.socketGroupId === sg.id;
+                          // Use live drag values if dragging, otherwise use stored position values
+                          const positionX =
+                            isDragging && dragState?.liveDistanceX !== undefined
+                              ? dragState.liveDistanceX
+                              : sg.positionX;
+                          const positionY =
+                            isDragging && dragState?.liveDistanceY !== undefined
+                              ? dragState.liveDistanceY
+                              : sg.positionY;
+                          return (
+                            <div
+                              key={sg.id}
+                              className={`text-[10px] sm:text-xs text-gray-400 ${
+                                isDragging ? "text-green-400 font-semibold" : ""
+                              }`}
+                            >
+                              {idx + 1}: X: {positionX.toFixed(1)} cm | Y:{" "}
+                              {positionY.toFixed(1)} cm
+                            </div>
+                          );
+                        })}
+                      </div>
                     </div>
                   )}
                 </div>
diff --git a/components/socket-generator.tsx b/components/socket-generator.tsx
@@ -931,6 +931,12 @@ export default function SocketGenerator() {
       setPlates((prev) => prev.filter((p) => p.id !== plateId));
       setSocketGroups((prev) => prev.filter((sg) => sg.plateId !== plateId));
 
+      // If the deleted plate was selected, reset selection to show all plates
+      if (selectedPlate === plateId) {
+        setSelectedPlate("");
+        setSelectedSocketGroup(null);
+      }
+
       // Show success toast notification with plate details
       if (deletedPlate) {
         toast.success("Rückwand gelöscht", {
@@ -1015,8 +1021,9 @@ export default function SocketGenerator() {
   const handleAddSocketGroup = () => {
     // Reset selection to allow adding a NEW socket group (not editing an existing one)
     setSelectedSocketGroup(null);
-    // Find the first valid plate (40x40cm or larger) to set as default selection
-    setSelectedPlate(plates.find(isPlateLargeEnoughForSockets)?.id || "");
+    // Reset selectedPlate to empty string to show all plates (like toggle-on behavior)
+    // This displays all plates with socket groups on canvas instead of a single selected plate
+    setSelectedPlate("");
     // Reset all configuration fields to default values
     setSocketCount(1);
     setSocketDirection("vertical");
@@ -1790,10 +1797,9 @@ export default function SocketGenerator() {
 
       {/* Mobile/Tablet sidebar overlay from right */}
       <div
-        className={`xl:hidden fixed top-0 right-0 h-full z-50 overflow-x-hidden transition-transform duration-300 ease-out bg-white text-black shadow-2xl ${
+        className={`xl:hidden fixed top-0 right-0 h-full z-50 overflow-x-hidden transition-transform duration-300 ease-out bg-white text-black shadow-2xl w-[80vw] ${
           isSidebarOpen ? "translate-x-0" : "translate-x-full"
         }`}
-        style={{ width: "80vw" }}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="h-full overflow-y-auto">
diff --git a/components/welcome-screen.tsx b/components/welcome-screen.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/scrum-board.svg b/public/scrum-board.svg

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import SocketGenerator from "@/components/socket-generator";`
	`1`	`+import AppWrapper from "@/components/app-wrapper";`
`2`	`2`
`3`	`3`	`export default function Home() {`
`4`		`- return <SocketGenerator />;`
	`4`	`+ return <AppWrapper />;`
`5`	`5`	`}`