Filtering by user tag

src/app/app.css

@@ -1,12 +0,0 @@
-.private {
-  padding: 1rem;
-  container-type: inline-size;
-}
-
-.public {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-}
-

src/app/app.html

@@ -1,11 +1 @@
-@if (authStatus()?.authenticated) {
-  <main class="private">
-    <app-nav>
-      <router-outlet/>
-    </app-nav>
-  </main>
-} @else {
-  <main class="public">
-    <router-outlet/>
-  </main>
-}
+<ng-container *ngComponentOutlet="getOutlet()"/>

src/app/app.routes.ts

@@ -8,18 +8,18 @@ export const routes: Routes = [
   { path: '', redirectTo: 'auth', pathMatch: 'full' },
   { path: 'auth', component: AuthPage, data: { title: 'Authentication' } },
   {
-    path: 'home',
+    path: 'articles',
     loadComponent: async () => {
-      const c = await import('./pages/home/home-page.component')
-      return c.HomePage
+      const c = await import('./pages/articles-page/articles-page')
+      return c.ArticlesPage
     },
     canMatch: [authGuard],
   },
   {
     path: 'bookmarks',
     loadComponent: async () => {
-      const c = await import('./pages/bookmarks/bookmarks')
-      return c.Bookmarks
+      const c = await import('./pages/bookmarks-page/bookmarks-page')
+      return c.BookmarksPage
     },
     canMatch: [authGuard],
   },
@@ -35,7 +35,7 @@ export const routes: Routes = [
   {
     path: 'subscription/:subscriptionId/article/:articleId',
     loadComponent: async () => {
-      const c = await import('./pages/article-page/article-page.component')
+      const c = await import('./pages/article-page/article-page')
       return c.ArticlePage
     },
     data: { title: 'Article' },
@@ -44,7 +44,7 @@ export const routes: Routes = [
   {
     path: 'tags',
     loadComponent: async () => {
-      const c = await import('./pages/tags/tags-page.component')
+      const c = await import('./pages/tags-page/tags-page')
       return c.TagsPage
     },
     data: { title: 'Tags' },
@@ -63,6 +63,7 @@ export const routes: Routes = [
     path: 'status',
     component: StatusPage,
     data: { title: 'Status' },
+    canMatch: [authGuard],
   },
   {
     path: '**',

src/app/app.ts

@@ -1,16 +1,21 @@
 import { Component, inject } from '@angular/core'
-import { RouterOutlet } from '@angular/router'
-import { NavComponent } from './components/nav/nav.component'
 import { AuthService } from './services/auth-service'
 import { toSignal } from '@angular/core/rxjs-interop'
+import { PrivateOutlet } from './outlet/private-outlet/private-outlet'
+import { PublicOutlet } from './outlet/public-outlet/public-outlet'
+import { NgComponentOutlet } from '@angular/common'
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NavComponent],
+  imports: [NgComponentOutlet],
   templateUrl: './app.html',
   styleUrl: './app.css',
 })
 export class App {
   private readonly authService = inject(AuthService)
-  protected readonly authStatus = toSignal(this.authService.$authStatus)
+  private readonly authStatus = toSignal(this.authService.$authStatus)
+
+  getOutlet() {
+    return this.authStatus()?.authenticated ? PrivateOutlet : PublicOutlet
+  }
 }

src/app/components/login-form/login-form.css

@@ -4,3 +4,7 @@
   gap: 1rem;
   margin: 1rem 0;
 }
+
+.description {
+  max-width: 30ch;
+}

src/app/components/login-form/login-form.html

@@ -1,5 +1,8 @@
 <form (ngSubmit)="onSubmit()">
   <mat-card-content class="credentials">
+    <span class="description">
+      Login with your existing password and login.
+    </span>
     <mat-form-field>
       <mat-label>Login</mat-label>
       <input

src/app/components/login-form/login-form.ts

@@ -53,7 +53,7 @@ export class LoginForm {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((result) => {
         if (result) {
-          this.router.navigate(['/home'])
+          this.router.navigate(['/articles'])
         }
       })
   }

src/app/components/nav/nav.component.ts

@@ -1,11 +1,4 @@
-import {
-  Component,
-  DestroyRef,
-  inject,
-  OnInit,
-  signal,
-  viewChild
-} from '@angular/core'
+import { Component, DestroyRef, inject, OnInit, signal, viewChild } from '@angular/core'
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
 import { AsyncPipe } from '@angular/common'
 import { MatToolbarModule } from '@angular/material/toolbar'
@@ -55,7 +48,7 @@ export class NavComponent implements OnInit {
   private router = inject(Router)
 
   menuItems: { title: string; icon?: string; url: string }[] = [
-    { title: 'Articles', url: '/home', icon: 'library_books' },
+    { title: 'Articles', url: '/articles', icon: 'library_books' },
     { title: 'Bookmarks', url: '/bookmarks', icon: 'bookmark' },
     { title: 'Subscriptions', url: '/subscriptions', icon: 'rss_feed' },
     { title: 'Tags', url: '/tags', icon: 'tag' },

src/app/components/page-display-toggle/page-display-toggle.html

@@ -1,12 +1,16 @@
 <mat-button-toggle>
-  <mat-icon
+  <button
+    matIconButton
     [class]="(display | async) === PageDisplay.Title ? 'highlighted' : undefined"
     (click)="toggleDisplay(PageDisplay.Title)"
-  >view_day
-  </mat-icon>
-  <mat-icon
+  >
+    <mat-icon>view_day</mat-icon>
+  </button>
+  <button
+    matIconButton
     [class]="(display | async) === PageDisplay.Short ? 'highlighted' : undefined"
     (click)="toggleDisplay(PageDisplay.Short)"
-  >view_agenda
-  </mat-icon>
+  >
+    <mat-icon>view_agenda</mat-icon>
+  </button>
 </mat-button-toggle>

src/app/components/page-display-toggle/page-display-toggle.ts

@@ -4,10 +4,11 @@ import { MatButtonToggle } from '@angular/material/button-toggle'
 import { MatIcon } from '@angular/material/icon'
 import { PageDisplay } from '../../entities/page/page.enums'
 import { AsyncPipe } from '@angular/common'
+import { MatIconButton } from '@angular/material/button'
 
 @Component({
   selector: 'app-page-display-toggle',
-  imports: [MatButtonToggle, MatIcon, MatButtonToggle, MatIcon, AsyncPipe],
+  imports: [MatButtonToggle, MatIcon, MatButtonToggle, MatIcon, AsyncPipe, MatIconButton],
   templateUrl: './page-display-toggle.html',
   styleUrl: './page-display-toggle.css',
 })

src/app/outlet/private-outlet/private-outlet.css

@@ -0,0 +1,4 @@
+.private {
+  padding: 1rem;
+  container-type: inline-size;
+}

src/app/outlet/private-outlet/private-outlet.html

@@ -0,0 +1,5 @@
+<main class="private">
+  <app-nav>
+    <router-outlet/>
+  </app-nav>
+</main>

src/app/outlet/private-outlet/private-outlet.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+import { NavComponent } from '../../components/nav/nav.component'
+import { RouterOutlet } from '@angular/router'
+
+@Component({
+  selector: 'app-private-outlet',
+  imports: [NavComponent, RouterOutlet],
+  templateUrl: './private-outlet.html',
+  styleUrl: './private-outlet.css',
+})
+export class PrivateOutlet {}

src/app/outlet/public-outlet/public-outlet.css

@@ -0,0 +1,6 @@
+.public {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}

src/app/outlet/public-outlet/public-outlet.html

@@ -0,0 +1,3 @@
+<main class="public">
+  <router-outlet/>
+</main>

src/app/outlet/public-outlet/public-outlet.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+import { RouterOutlet } from '@angular/router'
+
+@Component({
+  selector: 'app-public',
+  imports: [RouterOutlet],
+  templateUrl: './public-outlet.html',
+  styleUrl: './public-outlet.css',
+})
+export class PublicOutlet {}

src/app/pages/article-page/article-page.component.ts → src/app/pages/article-page/article-page.ts

@@ -17,7 +17,7 @@ import { TitleService } from '../../services/title-service'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 
 @Component({
-  selector: 'app-article',
+  selector: 'app-article-page',
   imports: [
     MatToolbarModule,
     MatProgressBarModule,
@@ -28,8 +28,8 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
     MatIconButton,
     MatDivider,
   ],
-  templateUrl: './article-page.component.html',
-  styleUrl: './article-page.component.css',
+  templateUrl: './article-page.html',
+  styleUrl: './article-page.css',
 })
 export class ArticlePage implements OnInit {
   feedService = inject(FeedService)

src/app/pages/home/home-page.component.html → src/app/pages/articles-page/articles-page.html

@@ -10,24 +10,34 @@
   </button>
   <app-row-spacer/>
   <mat-button-toggle>
-    <mat-icon
+    <button
+      matIconButton
       [class]="($dateOrder | async) === SortOrder.Asc ? 'highlighted' : undefined"
       (click)="orderHandler('date')"
       [title]="($dateOrder | async) === SortOrder.Asc ? 'Older first' : 'Newer first'"
-    >schedule
-    </mat-icon>
-    <mat-icon
+    >
+
+      <mat-icon>schedule</mat-icon>
+    </button>
+    <button
+      matIconButton
       [class]="($readFilter | async) ? 'highlighted' : undefined"
       (click)="filterHandler('read')"
       [title]="($readFilter | async) ? 'Show read' : 'Show unread'"
-    >{{ ($readFilter | async) ? 'mark_email_unread' : 'mark_email_read' }}
-    </mat-icon>
-    <mat-icon
-      [class]="($favFilter | async) ? 'highlighted' : undefined"
+    >
+      <mat-icon>
+        {{ ($readFilter | async) ? 'mark_email_unread' : 'mark_email_read' }}
+      </mat-icon>
+    </button>
+    <button
+      matIconButton
       (click)="filterHandler('fav')"
+      [class]="($favFilter | async) ? 'highlighted' : undefined"
       [title]="($favFilter | async) ? 'Show favorites' : 'Show all'"
-    >bookmark
-    </mat-icon>
+      [disabled]="$tagFilter | async"
+    >
+      <mat-icon>bookmark</mat-icon>
+    </button>
   </mat-button-toggle>
 </mat-toolbar-row>