Saved layouts feature

server/app/templates/frame_layout.html

@@ -35,6 +35,19 @@
         <div id="add-widget-buttons" class="checkbox-row" style="gap: 10px; flex-wrap: wrap;"></div>
         <p class="sub" id="add-widget-hint" style="margin-top: 8px;"></p>
       </section>
+
+      <section class="card" style="margin-top: 20px;">
+        <h2 class="card-title">Saved layouts</h2>
+        <p class="sub">Save this whole arrangement -- widgets, their settings, and button
+          assignments -- under a name, then switch back to it any time. Saved layouts are
+          yours across every frame you control with a matching orientation, not just this one.</p>
+        <div class="saved-layout-add">
+          <input type="text" id="saved-layout-name" placeholder="Layout name" maxlength="60">
+          <button type="button" id="save-layout-btn" class="secondary">Save current as...</button>
+        </div>
+        <ul class="saved-layout-list" id="saved-layout-list" style="margin-top: 14px;"></ul>
+        <p class="sub" id="saved-layout-empty-hint" style="margin-top: 10px;">No saved layouts yet.</p>
+      </section>
     </div>
   </div>
 
@@ -62,4 +75,5 @@
   <script src="/static/widget_dialog_static.js"></script>
   <script src="/static/widget_dialog_text.js"></script>
   <script src="/static/frame_layout.js"></script>
+  <script src="/static/saved_layouts.js"></script>
 {% endblock %}