feat: implement gallery page with category filtering and lightbox functionality

apps/data-panel/renderer/configs.js

@@ -481,4 +481,49 @@ export const COLLECTION_CONFIGS = {
       meta: [],
     }),
   },
+  gallery: {
+    label: "Gallery",
+    itemLabel: "Gallery Item",
+    fileName: "gallery.ts",
+    exportName: "GALLERY_ITEMS",
+    fields: [
+      {
+        key: "id",
+        label: "ID",
+        required: true,
+        placeholder: "gallery-1",
+      },
+      {
+        key: "title",
+        label: "Title",
+        required: true,
+        placeholder: "Project Mockup",
+      },
+      {
+        key: "category",
+        label: "Category",
+        required: true,
+        placeholder: "UI Design",
+      },
+      {
+        key: "image",
+        label: "Image URL",
+        required: true,
+        type: "url",
+        placeholder: "/gallery/mockup.png",
+      },
+      {
+        key: "description",
+        label: "Description",
+        type: "textarea",
+        full: true,
+        placeholder: "Detail about visual...",
+      },
+    ],
+    card: (item) => ({
+      title: item.title || item.id || "Untitled",
+      meta: [item.category],
+      footer: item.description,
+    }),
+  },
 };

apps/data-panel/renderer/index.html

@@ -103,6 +103,13 @@
       >
         YouTube
       </button>
+      <button
+        class="tab-btn"
+        data-tab="collection"
+        data-collection-key="gallery"
+      >
+        Gallery
+      </button>
       <button class="tab-btn" data-tab="media">Media</button>
       <button class="tab-btn" data-tab="publish">Publish</button>
     </nav>