first commit

src/components/themes/theme-page.component.html

@@ -0,0 +1,44 @@
+<div class="container mx-auto p-4 sm:p-6">
+  <h2 class="text-3xl font-bold mb-6 text-slate-100 border-l-4 border-red-500 pl-4 flex items-center gap-2">
+    <span>{{ themes.bySlug(themeSlug())?.emoji }}</span>
+    <span>{{ themeLabel() }}</span>
+  </h2>
+
+  <div class="space-y-10">
+    <section *ngFor="let b of blocks()">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="text-xl font-semibold">{{ b.label }}</h3>
+        <a [routerLink]="['/p', b.provider, 't', themeSlug()]" class="text-sm px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 border border-slate-700">{{ 'themes.viewAll' | t }}</a>
+      </div>
+
+      <!-- Loading state -->
+      <div *ngIf="b.loading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+        <div *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]" class="animate-pulse bg-slate-800 rounded-lg h-40"></div>
+      </div>
+
+      <!-- Error / empty -->
+      <div *ngIf="!b.loading && b.error" class="text-amber-300">{{ b.error }}</div>
+      <div *ngIf="!b.loading && !b.error && b.items.length === 0" class="text-slate-400">{{ 'empty.noItems' | t }}</div>
+
+      <!-- Grid -->
+      <div *ngIf="!b.loading && !b.error && b.items.length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+        <a *ngFor="let v of b.items"
+           [routerLink]="['/watch', v.videoId]"
+           [queryParams]="watchQueryParams(b.provider, v)"
+           [state]="{ video: v }"
+           class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50 transition-all duration-300">
+          <div class="relative">
+            <img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full h-40 object-cover">
+            <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded" *ngIf="v.duration">
+              {{ v.duration / 60 | number:'1.0-0' }}:{{ (v.duration % 60) | number:'2.0-0' }}
+            </div>
+          </div>
+          <div class="p-3">
+            <h4 class="font-semibold line-clamp-2">{{ v.title }}</h4>
+            <div class="text-sm text-slate-400 mt-1">{{ v.uploaderName }}</div>
+          </div>
+        </a>
+      </div>
+    </section>
+  </div>
+</div>