feat: redesign subpages as collapsible tile grid for better overview

- Subpages shown as compact visual tiles in a grid (like folders)
- Each tile shows the first album's cover image + name + album count
- Click a tile to expand/edit that subpage's details below
- Active tile highlighted with accent border
- Only one subpage expanded at a time — no more endless scrolling
- Move arrows changed to ← → (horizontal) matching the grid layout
- Smooth slide-down animation when expanding a subpage

app/admin/admin.css

@@ -641,16 +641,89 @@
   word-break: break-all;
 }
 
-/* Subpage Card */
-.subpage-card {
-  background: var(--admin-bg);
+/* Subpage Overview Grid */
+.subpage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.subpage-tile {
+  background: var(--admin-bg-raised);
   border: 1px solid var(--admin-border);
   border-radius: 10px;
-  margin-bottom: 1rem;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
+}
+
+.subpage-tile:hover {
+  border-color: var(--admin-border-hover);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.subpage-tile.active {
+  border-color: var(--admin-accent);
+  box-shadow: 0 0 0 1px var(--admin-accent);
+}
+
+.subpage-tile-cover {
+  aspect-ratio: 16 / 10;
+  background: var(--admin-bg-elevated);
   overflow: hidden;
 }
 
-.subpage-header {
+.subpage-tile-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.subpage-tile-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+
+.subpage-tile-info {
+  padding: 0.4rem 0.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.05rem;
+}
+
+.subpage-tile-name {
+  font-size: 0.78rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.subpage-tile-meta {
+  font-size: 0.65rem;
+  color: var(--admin-text-muted);
+}
+
+/* Subpage Expanded Detail */
+.subpage-detail {
+  background: var(--admin-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 10px;
+  overflow: hidden;
+  animation: slideDown 0.15s ease-out;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.subpage-detail-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -659,7 +732,7 @@
   border-bottom: 1px solid var(--admin-border);
 }
 
-.subpage-header-left {
+.subpage-detail-header-left {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -667,9 +740,14 @@
   min-width: 0;
 }
 
+.subpage-detail-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .subpage-move-btns {
   display: flex;
-  flex-direction: column;
   gap: 0;
 }
 
@@ -700,12 +778,6 @@
   background: var(--admin-bg-input);
 }
 
-.subpage-header-right {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
 .subpage-meta {
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--admin-border);