feat: community gallery UI (auth modals, stack cards, star/use, share), search, presets, dependency/port warnings

src/main.js

@@ -3,6 +3,8 @@ import { generateCompose, generateEnv } from './generators/compose.js';
 import { generateSetupScript } from './generators/setup.js';
 import { analyseCompose, fixCompose } from './generators/analyser.js';
 import { trackDownload, fetchPopularity } from './utils/analytics.js';
+import { initAuth } from './utils/auth.js';
+import { initGallery } from './utils/gallery.js';
 import JSZip from 'jszip';
 import './style.css';
 
@@ -383,8 +385,21 @@ initModeNav();
 initAnalyser();
 initSearch();
 initPresets();
+initAuth();
+initGallery(() => [...state.selected], getConfig);
 document.getElementById('download-btn').addEventListener('click', downloadBundle);
 
+// Listen for "Use This Stack" from gallery
+window.addEventListener('use-stack', (e) => {
+  const { apps: stackApps } = e.detail;
+  state.selected = new Set(stackApps);
+  renderAppGrid();
+  checkDependencies();
+  checkPortConflicts();
+  updatePreview();
+  updateUrlState();
+});
+
 // Load popularity data (async, non-blocking)
 fetchPopularity().then(data => {
   if (data) {
@@ -420,7 +435,7 @@ function initPresets() {
   });
 }
 
-// Mode switching (builder vs analyser)
+// Mode switching (builder vs analyser vs gallery)
 function initModeNav() {
   document.querySelectorAll('.mode-btn').forEach(btn => {
     btn.addEventListener('click', () => {
@@ -429,6 +444,7 @@ function initModeNav() {
       const mode = btn.dataset.mode;
       document.querySelector('.container').style.display = mode === 'builder' ? 'block' : 'none';
       document.getElementById('step-analyser').style.display = mode === 'analyser' ? 'block' : 'none';
+      document.getElementById('step-gallery').style.display = mode === 'gallery' ? 'block' : 'none';
     });
   });
 }