Updated layout, added ability to make new sections, added new block types, increased layout size by 30%

app.js

@@ -60,6 +60,71 @@ class ProjectFriction {
         if (!Array.isArray(this.data.sections) || this.data.sections.length === 0) {
             this.loadDefaultConfiguration();
         }
+
+        this.mergeBuilderSectionsFromStorage();
+    }
+
+    mergeBuilderSectionsFromStorage() {
+        if (typeof localStorage === 'undefined') return;
+
+        var raw = localStorage.getItem('pf-builder-sections');
+        if (!raw) return;
+
+        try {
+            var parsed = JSON.parse(raw);
+            var order = Array.isArray(parsed.order) ? parsed.order : Object.keys(parsed.sections || {});
+            var sectionMeta = parsed.sections || {};
+            if (!Array.isArray(this.data.sections)) this.data.sections = [];
+
+            var existingById = {};
+            this.data.sections.forEach(function(section) {
+                existingById[section.id] = section;
+            });
+
+            order.forEach(function(id) {
+                var meta = sectionMeta[id];
+                if (!meta) return;
+
+                var stats = {
+                    articles: parseInt(meta.stats && meta.stats.articles, 10) || 0,
+                    storyMaps: parseInt(meta.stats && meta.stats.storyMaps, 10) || 0,
+                    images: parseInt(meta.stats && meta.stats.images, 10) || 0
+                };
+
+                if (existingById[id]) {
+                    existingById[id].title = meta.title || existingById[id].title;
+                    existingById[id].subtitle = meta.subtitle || existingById[id].subtitle;
+                    existingById[id].description = meta.description || existingById[id].description;
+                    existingById[id].icon = meta.icon || existingById[id].icon;
+                    existingById[id].color = meta.color || existingById[id].color;
+                    existingById[id].stats = stats;
+                } else {
+                    var newSection = {
+                        id: id,
+                        title: meta.title || id,
+                        subtitle: meta.subtitle || '',
+                        icon: meta.icon || '📚',
+                        color: meta.color || '#7f8c8d',
+                        description: meta.description || '',
+                        stats: stats
+                    };
+                    this.data.sections.push(newSection);
+                    existingById[id] = newSection;
+                }
+            }, this);
+
+            // Keep display order aligned with builder tabs for kiosk consistency.
+            var reordered = [];
+            order.forEach(function(id) {
+                if (existingById[id]) reordered.push(existingById[id]);
+            });
+            this.data.sections.forEach(function(section) {
+                if (order.indexOf(section.id) === -1) reordered.push(section);
+            });
+            this.data.sections = reordered;
+        } catch (error) {
+            console.warn('Could not parse builder section metadata from localStorage.');
+        }
     }
 
     async loadJSON(url) {
@@ -434,6 +499,10 @@ class ProjectFriction {
     }
 
     initializeSectionInteractions(sectionId) {
+        if (typeof BlockRenderer !== 'undefined' && typeof BlockRenderer.initGalleries === 'function') {
+            BlockRenderer.initGalleries(document.getElementById('sectionContainer'));
+        }
+
         // Wire map-button blocks to the Leaflet map
         const self = this;
         document.querySelectorAll('.block-map-btn').forEach(function(btn) {
@@ -526,7 +595,7 @@ class ProjectFriction {
         
         if (sidebar && toggleIcon) {
             sidebar.classList.toggle('collapsed');
-            toggleIcon.textContent = sidebar.classList.contains('collapsed') ? '▶' : '◀';
+            toggleIcon.textContent = sidebar.classList.contains('collapsed') ? '◀' : '▶';
         }
     }