broke up monolithic structure

frontend/js/main.js

@@ -0,0 +1,38 @@
+window.App = window.App || {};
+
+(function() {
+    // App bootstrap: initialize storage, render UI, and load the first page.
+    async function initApp() {
+        await App.storage.ensureDefaults();
+        App.ui.applyTheme();
+        App.ui.renderMenu();
+        App.favorites.renderBar();
+        App.ui.bindGlobalHandlers();
+
+        App.videos.observeSentinel();
+
+        const loadMoreBtn = document.getElementById('load-more-btn');
+        if (loadMoreBtn) {
+            loadMoreBtn.onclick = () => {
+                App.videos.loadVideos();
+            };
+        }
+
+        const errorToastClose = document.getElementById('error-toast-close');
+        if (errorToastClose) {
+            errorToastClose.onclick = () => {
+                const toast = document.getElementById('error-toast');
+                if (toast) toast.classList.remove('show');
+            };
+        }
+
+        window.addEventListener('resize', () => {
+            App.videos.ensureViewportFilled();
+        });
+
+        await App.videos.loadVideos();
+        App.favorites.syncButtons();
+    }
+
+    initApp();
+})();