+
diff --git a/src/app/app.ts b/src/app/app.ts index 6ff6d1a..4349cb6 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -5,7 +5,7 @@ import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; selector: 'app-root', imports: [RouterOutlet, RouterLink, RouterLinkActive], templateUrl: './app.html', - styleUrl: './app.css' + styles: [':host { display: block; min-height: 100vh; }'] }) export class App { protected readonly title = signal('watch-list'); diff --git a/src/app/components/add-item/add-item.component.ts b/src/app/components/add-item/add-item.component.ts index c303615..b2cf7d6 100644 --- a/src/app/components/add-item/add-item.component.ts +++ b/src/app/components/add-item/add-item.component.ts @@ -11,44 +11,44 @@ import { Group } from '../../models/group.model'; selector: 'app-add-item', imports: [CommonModule, FormsModule], template: ` -
-

Add New Item

+
+

Add New Item

-
-
- + +
+
-
- +
+
-
- +
+
-
-
- +
+
+
-
- +
+
-
- +
+
-
- - +
+ +
- `, - styles: [` - .add-item-container { - max-width: 600px; - margin: 0 auto; - padding: 2rem; - } - - h1 { - font-size: 2rem; - margin-bottom: 2rem; - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .add-item-form { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - padding: 2rem; - border-radius: 8px; - } - - .form-group { - margin-bottom: 1.5rem; - } - - .form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .form-control { - width: 100%; - padding: 0.75rem; - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 4px; - font-size: 1rem; - box-sizing: border-box; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .form-control:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); - } - - .series-fields { - border-top: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - padding-top: 1.5rem; - margin-top: 1.5rem; - } - - .form-actions { - display: flex; - gap: 1rem; - margin-top: 2rem; - } - - .submit-btn { - padding: 0.75rem 2rem; - background: var(--accent-primary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 1rem; - font-weight: 500; - } - - .submit-btn:hover { - background: var(--accent-primary-hover); - } - - .cancel-btn { - padding: 0.75rem 2rem; - background: var(--accent-secondary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 1rem; - } - - .cancel-btn:hover { - background: var(--accent-secondary-hover); - } - `] + ` }) export class AddItemComponent implements OnInit { groups = signal([]); diff --git a/src/app/components/group-manager/group-manager.component.ts b/src/app/components/group-manager/group-manager.component.ts index dda6c51..685dd91 100644 --- a/src/app/components/group-manager/group-manager.component.ts +++ b/src/app/components/group-manager/group-manager.component.ts @@ -8,36 +8,36 @@ import { Group } from '../../models/group.model'; selector: 'app-group-manager', imports: [CommonModule, FormsModule], template: ` -
-

Group Management

+
+

Group Management

-
-

Create New Group

-
+
+

Create New Group

+ - +
-
-

Groups

-
-
- {{ group.name }} - Order: {{ group.order }} +
+

Groups

+
+
+ {{ group.name }} + Order: {{ group.order }}
-
+
@@ -68,212 +68,26 @@ import { Group } from '../../models/group.model';
-
-
-

Edit Group

+
+
+

Edit Group

-
- - +
+ +
- `, - styles: [` - .group-manager-container { - max-width: 800px; - margin: 0 auto; - padding: 2rem; - } - - h1 { - font-size: 2rem; - margin-bottom: 2rem; - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - h2 { - font-size: 1.5rem; - margin-bottom: 1rem; - color: light-dark(var(--light-font-secondary), var(--dark-font-secondary)); - } - - .create-group-section { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - padding: 1.5rem; - border-radius: 8px; - margin-bottom: 2rem; - } - - .create-form { - display: flex; - gap: 1rem; - } - - .group-input { - flex: 1; - padding: 0.75rem; - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 4px; - font-size: 1rem; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .create-btn { - padding: 0.75rem 1.5rem; - background: var(--accent-primary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-weight: 500; - } - - .create-btn:hover { - background: var(--accent-primary-hover); - } - - .groups-list { - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 8px; - padding: 1.5rem; - } - - .group-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - border-bottom: 1px solid light-dark(var(--light-border-light), var(--dark-border-light)); - } - - .group-item:last-child { - border-bottom: none; - } - - .group-info { - display: flex; - flex-direction: column; - gap: 0.25rem; - } - - .group-name { - font-weight: 500; - font-size: 1.1rem; - } - - .group-order { - font-size: 0.9rem; - color: light-dark(var(--light-font-secondary), var(--dark-font-secondary)); - } - - .group-actions { - display: flex; - gap: 0.5rem; - } - - .action-btn { - padding: 0.5rem 1rem; - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 4px; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - color: light-dark(var(--light-font-color), var(--dark-font-color)); - cursor: pointer; - font-size: 0.9rem; - } - - .action-btn:hover { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - } - - .action-btn.edit { - background: var(--accent-warning); - color: light-dark(#000, #fff); - border-color: var(--accent-warning); - } - - .action-btn.edit:hover { - background: var(--accent-warning-hover); - } - - .action-btn.delete { - background: var(--accent-danger); - color: white; - border-color: var(--accent-danger); - } - - .action-btn.delete:hover { - background: var(--accent-danger-hover); - } - - .edit-modal { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - } - - .modal-content { - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - padding: 2rem; - border-radius: 8px; - min-width: 400px; - } - - .modal-content h3 { - margin-top: 0; - margin-bottom: 1.5rem; - } - - .modal-actions { - display: flex; - gap: 1rem; - margin-top: 1.5rem; - } - - .save-btn { - padding: 0.75rem 1.5rem; - background: var(--accent-primary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .save-btn:hover { - background: var(--accent-primary-hover); - } - - .cancel-btn { - padding: 0.75rem 1.5rem; - background: var(--accent-secondary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .cancel-btn:hover { - background: var(--accent-secondary-hover); - } - `] + ` }) export class GroupManagerComponent implements OnInit { groups = signal([]); diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index de1e8a3..1e2bf0d 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -9,13 +9,13 @@ import { NgIf } from '@angular/common'; selector: 'app-home', imports: [ItemCardComponent, NgIf], template: ` -
-

What should I watch now?

+
+

What should I watch now?

-
-
-

Next Series

-
+
+
+

Next Series

+
-

No series to watch. All series are completed!

+

No series to watch. All series are completed!
-
-

Next Movie

-
+
+

Next Movie

+
-

No movies to watch. All movies are completed!

+

No movies to watch. All movies are completed!
- `, - styles: [` - .home-container { - max-width: 1200px; - margin: 0 auto; - padding: 2rem; - } - - h1 { - font-size: 2rem; - margin-bottom: 2rem; - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .next-items { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem; - margin-bottom: 2rem; - } - - @media (max-width: 768px) { - .next-items { - grid-template-columns: 1fr; - } - } - - .next-item-section h2 { - font-size: 1.5rem; - margin-bottom: 1rem; - color: light-dark(var(--light-font-secondary), var(--dark-font-secondary)); - } - - .next-item-card { - margin-bottom: 1rem; - } - - .empty-message { - padding: 2rem; - text-align: center; - color: light-dark(var(--light-font-muted), var(--dark-font-muted)); - background: light-dark(var(--light-bg-primary), var(--dark-bg-primary)); - border-radius: 8px; - } - `] + ` }) export class HomeComponent { nextSeries = signal(null); diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts index b957feb..9ce80ca 100644 --- a/src/app/components/item-card/item-card.component.ts +++ b/src/app/components/item-card/item-card.component.ts @@ -1,6 +1,6 @@ import { Component, input, output, computed } from '@angular/core'; import { RouterLink } from '@angular/router'; -import { NgIf } from '@angular/common'; +import { NgIf, NgClass } from '@angular/common'; import { Item } from '../../models/item.model'; import { ProgressBarComponent } from '../progress-bar/progress-bar.component'; import { TimeAgoComponent } from '../time-ago/time-ago.component'; @@ -8,22 +8,22 @@ import { WatchListService } from '../../services/watch-list.service'; @Component({ selector: 'app-item-card', - imports: [RouterLink, NgIf, ProgressBarComponent, TimeAgoComponent], + imports: [RouterLink, NgIf, NgClass, ProgressBarComponent, TimeAgoComponent], template: ` -
-
-

- {{ item().title }} +
+
+

+ {{ item().title }}

- {{ item().type }} + {{ item().type }}
-
+
Episode {{ item().progress!.episode }} of {{ item().progress!.totalEpisodes }} - + ({{ progressPercent() }}% complete)
@@ -33,126 +33,27 @@ import { WatchListService } from '../../services/watch-list.service'; [percentage]="progressPercent()!" /> -
- +
+ {{ item().status }}
-
- -
- `, - styles: [` - .item-card { - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 8px; - padding: 1rem; - margin-bottom: 1rem; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - box-shadow: 0 2px 4px light-dark(var(--light-shadow), var(--dark-shadow)); - } - - .item-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; - } - - .item-header h3 { - margin: 0; - font-size: 1.2rem; - } - - .item-header h3 a { - text-decoration: none; - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .item-header h3 a:hover { - color: var(--accent-primary); - } - - .item-type { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-size: 0.8rem; - text-transform: capitalize; - } - - .item-info { - margin: 0.5rem 0; - font-size: 0.9rem; - color: light-dark(var(--light-font-secondary), var(--dark-font-secondary)); - } - - .progress-percent { - margin-left: 0.5rem; - } - - .item-meta { - display: flex; - gap: 1rem; - margin: 0.5rem 0; - font-size: 0.85rem; - } - - .status { - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-weight: 500; - text-transform: capitalize; - } - - .status-not-started { - background: light-dark(#fff3cd, #856404); - color: light-dark(#856404, #fff3cd); - } - - .status-in-progress { - background: light-dark(#d1ecf1, #0c5460); - color: light-dark(#0c5460, #d1ecf1); - } - - .status-completed { - background: light-dark(#d4edda, #155724); - color: light-dark(#155724, #d4edda); - } - - .item-actions { - display: flex; - gap: 0.5rem; - margin-top: 0.5rem; - } - - .item-actions button { - padding: 0.5rem 1rem; - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 4px; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - color: light-dark(var(--light-font-color), var(--dark-font-color)); - cursor: pointer; - font-size: 0.9rem; - } - - .item-actions button:hover:not(:disabled) { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - } - - .item-actions button:disabled { - opacity: 0.5; - cursor: not-allowed; - } - `] + ` }) export class ItemCardComponent { item = input.required(); diff --git a/src/app/components/item-detail/item-detail.component.ts b/src/app/components/item-detail/item-detail.component.ts index 4d36e5c..4cc8307 100644 --- a/src/app/components/item-detail/item-detail.component.ts +++ b/src/app/components/item-detail/item-detail.component.ts @@ -13,323 +13,122 @@ import { TimeAgoComponent } from '../time-ago/time-ago.component'; selector: 'app-item-detail', imports: [CommonModule, FormsModule, RouterLink, ProgressBarComponent, TimeAgoComponent], template: ` -
+
-
-

{{ item()!.title }}

-
- - - + - - + +
-
-
- Type: - {{ item()!.type }} +
+
+ Type: + {{ item()!.type }}
-
- Status: - +
+ Status: + {{ item()!.status }}
-
- Group: - {{ getGroupName(item()!.groupId) }} +
+ Group: + {{ getGroupName(item()!.groupId) }}
-
- Progress: - +
+ Progress: + Episode {{ item()!.progress!.episode }} of {{ item()!.progress!.totalEpisodes }}
-
- Completion: - {{ progressPercent() }}% +
+ Completion: + {{ progressPercent() }}%
-
- Last Watched: - +
+ Last Watched: +
-
- Created: - {{ formatDate(item()!.createdAt) }} +
+ Created: + {{ formatDate(item()!.createdAt) }}
-
-

Edit Item

+
+

Edit Item

-
- - -
+
+ + +
Title is required
-
- -
-
- -
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
-
- - +
+ +
-
-

Item not found

+
+

Item not found

Back to Items
- `, - styles: [` - .item-detail-container { - max-width: 800px; - margin: 0 auto; - padding: 2rem; - } - - .header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; - } - - h1 { - font-size: 2rem; - margin: 0; - color: light-dark(var(--light-font-color), var(--dark-font-color)); - } - - .actions { - display: flex; - gap: 0.5rem; - } - - .action-btn { - padding: 0.5rem 1rem; - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 4px; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - color: light-dark(var(--light-font-color), var(--dark-font-color)); - cursor: pointer; - } - - .action-btn:hover:not(:disabled) { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - } - - .action-btn:disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .action-btn.delete { - background: var(--accent-danger); - color: white; - border-color: var(--accent-danger); - } - - .action-btn.delete:hover { - background: var(--accent-danger-hover); - } - - .action-btn.delete.confirm { - animation: pulse 0.5s ease-in-out; - } - - @keyframes pulse { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.05); } - } - - .item-info { - background: light-dark(var(--light-bg-tertiary), var(--dark-bg-tertiary)); - padding: 1.5rem; - border-radius: 8px; - margin-bottom: 2rem; - } - - .info-row { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - } - - .info-row:last-child { - margin-bottom: 0; - } - - .label { - font-weight: 500; - min-width: 120px; - color: light-dark(var(--light-font-secondary), var(--dark-font-secondary)); - } - - .value { - flex: 1; - } - - .status { - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-weight: 500; - text-transform: capitalize; - } - - .status-not-started { - background: light-dark(#fff3cd, #856404); - color: light-dark(#856404, #fff3cd); - } - - .status-in-progress { - background: light-dark(#d1ecf1, #0c5460); - color: light-dark(#0c5460, #d1ecf1); - } - - .status-completed { - background: light-dark(#d4edda, #155724); - color: light-dark(#155724, #d4edda); - } - - .edit-section { - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 8px; - padding: 1.5rem; - } - - .edit-section h2 { - margin-top: 0; - margin-bottom: 1.5rem; - } - - .form-group { - margin-bottom: 1rem; - } - - .form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - } - - .form-group input, - .form-group select { - width: 100%; - padding: 0.5rem; - border: 1px solid light-dark(var(--light-border-color), var(--dark-border-color)); - border-radius: 4px; - font-size: 1rem; - background: light-dark(var(--light-bg-secondary), var(--dark-bg-secondary)); - color: light-dark(var(--light-font-color), var(--dark-font-color)); - box-sizing: border-box; - } - - .form-group input:focus, - .form-group select:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); - } - - .validation-error { - color: var(--accent-danger); - font-size: 0.875rem; - margin-top: 0.25rem; - } - - .form-actions { - display: flex; - gap: 0.5rem; - margin-top: 1.5rem; - } - - .save-btn { - padding: 0.75rem 1.5rem; - background: var(--accent-primary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-weight: 500; - } - - .save-btn:hover:not(:disabled) { - background: var(--accent-primary-hover); - } - - .save-btn:disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .cancel-btn { - padding: 0.75rem 1.5rem; - background: var(--accent-secondary); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - } - - .cancel-btn:hover { - background: var(--accent-secondary-hover); - } - - .not-found { - text-align: center; - padding: 4rem 2rem; - } - - .not-found h2 { - margin-bottom: 1rem; - } - `] + ` }) export class ItemDetailComponent implements OnInit { item = signal(null); diff --git a/src/app/components/item-list/item-list.component.ts b/src/app/components/item-list/item-list.component.ts index 4e5cc2c..296dd8c 100644 --- a/src/app/components/item-list/item-list.component.ts +++ b/src/app/components/item-list/item-list.component.ts @@ -13,179 +13,54 @@ import { ItemCardComponent } from '../item-card/item-card.component'; selector: 'app-item-list', imports: [CommonModule, FormsModule, RouterLink, ItemCardComponent], template: ` -
-
-

All Items

- Add Item +
+
+

All Items

+ Add Item
-
-