refactor(nx): update repository structure for portals

libs/portal/shared/ui/src/index.ts

@@ -2,9 +2,11 @@ export * from './lib/components/category-view/category-view.component';
 export * from './lib/components/content-card/content-card.component';
 export * from './lib/components/favorites-layout/favorites-layout.component';
 export * from './lib/components/playlist-error-view/playlist-error-view.component';
+export * from './lib/components/progress-capsule/progress-capsule.component';
 export * from './lib/components/portal-collection-live-shell/portal-collection-live-shell.component';
 export * from './lib/components/portal-collection-shell/portal-collection-shell.component';
 export * from './lib/components/portal-empty-state/portal-empty-state.component';
 export * from './lib/components/search-form/search-form.component';
 export * from './lib/components/search-layout/search-layout.component';
+export * from './lib/components/watched-badge/watched-badge.component';
 export * from './lib/navigation/portal-rail-links.component';

libs/portal/shared/ui/src/lib/components/progress-capsule/progress-capsule.component.ts

@@ -0,0 +1,55 @@
+import { Component, input, computed } from '@angular/core';
+
+@Component({
+    selector: 'app-progress-capsule',
+    standalone: true,
+    template: `
+        <div
+            class="progress-capsule"
+            [class.progress-capsule--watched]="isWatched()"
+        >
+            <div
+                class="progress-capsule__fill"
+                [style.width.%]="progress()"
+            ></div>
+        </div>
+    `,
+    styles: [
+        `
+            .progress-capsule {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 5px;
+                background: rgba(255, 255, 255, 0.2);
+                overflow: hidden;
+
+                &__fill {
+                    height: 100%;
+                    background: linear-gradient(
+                        90deg,
+                        #e50914 0%,
+                        #ff4d4d 100%
+                    );
+                    transition: width 0.3s ease-out;
+                    border-radius: 0 2px 2px 0;
+                }
+
+                &--watched {
+                    .progress-capsule__fill {
+                        background: linear-gradient(
+                            90deg,
+                            #46d369 0%,
+                            #2ecc71 100%
+                        );
+                    }
+                }
+            }
+        `,
+    ],
+})
+export class ProgressCapsuleComponent {
+    readonly progress = input.required<number>(); // 0-100
+    readonly isWatched = computed(() => this.progress() >= 90);
+}

libs/portal/shared/ui/src/lib/components/watched-badge/watched-badge.component.ts

@@ -0,0 +1,44 @@
+import { Component, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-watched-badge',
+    standalone: true,
+    imports: [MatIcon],
+    template: `
+        @if (isWatched()) {
+        <div class="watched-badge">
+            <mat-icon>{{ icon() }}</mat-icon>
+        </div>
+        }
+    `,
+    styles: [
+        `
+            .watched-badge {
+                position: absolute;
+                top: 8px;
+                left: 8px;
+                width: 24px;
+                height: 24px;
+                background: rgba(70, 211, 105, 0.9);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                backdrop-filter: blur(4px);
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+                mat-icon {
+                    font-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    color: white;
+                }
+            }
+        `,
+    ],
+})
+export class WatchedBadgeComponent {
+    readonly isWatched = input.required<boolean>();
+    readonly icon = input<string>('check_circle');
+}