From 390a9b2f947c8334a5b63db8dd16aec8f7b25cb3 Mon Sep 17 00:00:00 2001
From: Jon Kazama <kontakt@hellion-media.de>
Date: Sun, 14 Jun 2026 14:55:05 +0200
Subject: [PATCH] Freies Layout: board.pos-Migration aus Auto-Raster, Position
 als --board-x/y beim Render

---
 src/js/boards.js | 35 ++++++++++++++++++++++++++++++++++-
 src/js/state.js  |  3 ++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/js/boards.js b/src/js/boards.js
index 797fa66..453cb7b 100644
--- a/src/js/boards.js
+++ b/src/js/boards.js
@@ -46,6 +46,27 @@ function createPlusSvg() {
   ]);
 }
 
+// ---- POS-MIGRATION ----
+// Boards ohne pos (Altbestand vor v2.3) aus einem Auto-Raster befuellen,
+// damit sie sich nicht alle auf (0,0) stapeln. Raster orientiert sich am
+// Wrapper-Padding (110px oben / 40px links) und der Board-Breite.
+function ensureBoardPositions() {
+  const COL_W = 240 + 14;   // --board-width (Desktop) + gap
+  const ROW_H = 220;        // grober Board-Hoehen-Schaetzwert fuers Auto-Raster
+  const startX = 40, startY = 110;
+  const cols = Math.max(1, Math.floor((window.innerWidth - startX * 2 + 14) / COL_W));
+
+  let migrated = false;
+  boards.forEach((board, i) => {
+    if (board.pos && typeof board.pos.x === 'number' && typeof board.pos.y === 'number') return;
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    board.pos = { x: startX + col * COL_W, y: startY + row * ROW_H };
+    migrated = true;
+  });
+  return migrated;
+}
+
 // ---- RENDER ----
 function renderBoards() {
   const wrapper = document.getElementById('boardsWrapper');
@@ -70,8 +91,20 @@ function renderBoards() {
     return;
   }
 
-  boards.forEach(board => wrapper.appendChild(createBoardEl(board)));
+  // Altbestand ohne pos migrieren (Auto-Raster), danach einmalig speichern.
+  const migrated = ensureBoardPositions();
+
+  boards.forEach(board => {
+    const el = createBoardEl(board);
+    // Position als Custom-Property setzen (nicht inline left/top), damit der
+    // Mobil-@media-Reset sie ueberschreiben kann.
+    el.style.setProperty('--board-x', board.pos.x + 'px');
+    el.style.setProperty('--board-y', board.pos.y + 'px');
+    wrapper.appendChild(el);
+  });
   initBoardDragDrop();
+
+  if (migrated) saveBoards();
 }
 
 function createBoardEl(board) {
diff --git a/src/js/state.js b/src/js/state.js
index cd4a168..3fcaf0f 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -53,7 +53,8 @@ function getDefaultBoards() {
         { id: uid(), title: 'MDN Web Docs',  url: 'https://developer.mozilla.org',   desc: '' },
         { id: uid(), title: 'Next.js Docs',  url: 'https://nextjs.org/docs',         desc: '' },
       ],
-      blurred: false
+      blurred: false,
+      pos: { x: 40, y: 110 }
     }
   ];
 }