Add customizable home layout editing and settings

Introduces an edit mode on the home page allowing users to drag and reposition the greeting, search bar, top sites, and 'at a glance' widget. Adds persistent storage for these layout preferences and a settings panel for fine-tuning positions and widget corner. Updates CSS, HTML, and JS to support edit UI, drag logic, and settings integration.
2025-09-06 21:46:08 +12:00
parent 285fc44124
commit 5e3b99fdd6
5 changed files with 302 additions and 0 deletions
@@ -12,6 +12,7 @@
 </head>
 <body>
  <div class="home-container">
+  <button id="editLayoutBtn" class="edit-btn" aria-pressed="false" title="Edit layout">Edit</button>
    <!-- Dynamic greeting replaces the large logo for a cleaner hero look -->
    <h1 id="greeting" class="greeting-title">Welcome</h1>

@@ -75,6 +76,12 @@
    </div>
  </aside>

+  <!-- Edit mode toolbar -->
+  <div id="editToolbar" class="edit-toolbar" hidden>
+    <button id="cancelEditBtn" class="btn secondary" aria-label="Cancel layout edits">Cancel</button>
+    <button id="saveEditBtn" class="btn primary" aria-label="Save layout edits">Save</button>
+  </div>
+
  <!-- Popup for adding a bookmark -->
  <div id="addPopup" class="popup hidden">
    <div class="popup-inner">