Move toju-app into own its folder

2026-03-29 23:30:37 +02:00
parent 0467a7b612
commit 8162e0444a
287 changed files with 42 additions and 34 deletions
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
@@ -0,0 +1,133 @@
+<!-- eslint-disable @angular-eslint/template/prefer-ngsrc -->
+<div
+  class="flex h-[min(70vh,42rem)] w-full flex-col overflow-hidden rounded-[1.65rem] border border-border/80 shadow-2xl ring-1 ring-white/5"
+  role="dialog"
+  aria-label="KLIPY GIF picker"
+  style="background: hsl(var(--background) / 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)"
+>
+  <div class="flex items-start justify-between gap-4 border-b border-border/70 bg-secondary/15 px-5 py-4">
+    <div>
+      <div class="text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">KLIPY</div>
+      <h3 class="mt-1 text-lg font-semibold text-foreground">Choose a GIF</h3>
+      <p class="mt-1 text-sm text-muted-foreground">
+        {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }}
+      </p>
+    </div>
+
+    <button
+      type="button"
+      (click)="close()"
+      class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-secondary/30 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground"
+      aria-label="Close GIF picker"
+    >
+      <ng-icon
+        name="lucideX"
+        class="h-4 w-4"
+      />
+    </button>
+  </div>
+
+  <div class="border-b border-border/70 bg-secondary/10 px-5 py-4">
+    <label class="relative block">
+      <ng-icon
+        name="lucideSearch"
+        class="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+      />
+      <input
+        #searchInput
+        type="text"
+        [ngModel]="searchQuery"
+        (ngModelChange)="onSearchQueryChanged($event)"
+        placeholder="Search KLIPY"
+        class="relative z-0 w-full rounded-xl border border-border/80 bg-background/70 px-10 py-3 text-sm text-foreground placeholder:text-muted-foreground shadow-sm backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary"
+      />
+    </label>
+  </div>
+
+  <div class="flex-1 overflow-y-auto px-5 py-4">
+    @if (errorMessage()) {
+      <div
+        class="mb-4 flex items-center justify-between gap-3 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-3 text-sm text-destructive backdrop-blur-sm"
+      >
+        <span>{{ errorMessage() }}</span>
+        <button
+          type="button"
+          (click)="retry()"
+          class="rounded-lg bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
+        >
+          Retry
+        </button>
+      </div>
+    }
+
+    @if (loading() && results().length === 0) {
+      <div class="flex h-full min-h-56 flex-col items-center justify-center gap-3 text-muted-foreground">
+        <span class="h-6 w-6 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
+        <p class="text-sm">Loading GIFs from KLIPY…</p>
+      </div>
+    } @else if (results().length === 0) {
+      <div
+        class="flex h-full min-h-56 flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border/80 bg-secondary/10 px-6 text-center text-muted-foreground"
+      >
+        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+          <ng-icon
+            name="lucideImage"
+            class="h-5 w-5"
+          />
+        </div>
+        <div>
+          <p class="text-sm font-medium text-foreground">No GIFs found</p>
+          <p class="mt-1 text-sm">Try another search term or clear the search to browse trending GIFs.</p>
+        </div>
+      </div>
+    } @else {
+      <div class="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
+        @for (gif of results(); track gif.id) {
+          <button
+            type="button"
+            (click)="selectGif(gif)"
+            class="group overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
+          >
+            <div
+              class="relative overflow-hidden bg-secondary/30"
+              [style.aspect-ratio]="gifAspectRatio(gif)"
+            >
+              <img
+                [src]="gifPreviewUrl(gif)"
+                [alt]="gif.title || 'KLIPY GIF'"
+                class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.03]"
+                loading="lazy"
+              />
+              <span
+                class="pointer-events-none absolute bottom-2 left-2 rounded-full bg-black/70 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.24em] text-white/90 backdrop-blur-sm"
+              >
+                KLIPY
+              </span>
+            </div>
+            <div class="px-3 py-2">
+              <p class="truncate text-xs font-medium text-foreground">
+                {{ gif.title || 'KLIPY GIF' }}
+              </p>
+              <p class="mt-1 text-[10px] uppercase tracking-[0.22em] text-muted-foreground">Click to select</p>
+            </div>
+          </button>
+        }
+      </div>
+    }
+  </div>
+
+  <div class="flex items-center justify-between gap-4 border-t border-border/70 bg-secondary/10 px-5 py-4">
+    <p class="text-xs text-muted-foreground">Click a GIF to select it. Powered by KLIPY.</p>
+
+    @if (hasNext()) {
+      <button
+        type="button"
+        (click)="loadMore()"
+        [disabled]="loading()"
+        class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {{ loading() ? 'Loading…' : 'Load more' }}
+      </button>
+    }
+  </div>
+</div>
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts
@@ -0,0 +1,187 @@
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  inject,
+  output,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { firstValueFrom } from 'rxjs';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideImage,
+  lucideSearch,
+  lucideX
+} from '@ng-icons/lucide';
+import { KlipyGif, KlipyService } from '../../application/klipy.service';
+
+@Component({
+  selector: 'app-klipy-gif-picker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgIcon
+  ],
+  viewProviders: [
+    provideIcons({
+      lucideImage,
+      lucideSearch,
+      lucideX
+    })
+  ],
+  templateUrl: './klipy-gif-picker.component.html'
+})
+export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy {
+  readonly gifSelected = output<KlipyGif>();
+  readonly closed = output<undefined>();
+
+  @ViewChild('searchInput') searchInput?: ElementRef<HTMLInputElement>;
+
+  private readonly klipy = inject(KlipyService);
+  private currentPage = 1;
+  private searchTimer: ReturnType<typeof setTimeout> | null = null;
+  private requestId = 0;
+
+  searchQuery = '';
+  results = signal<KlipyGif[]>([]);
+  loading = signal(false);
+  errorMessage = signal('');
+  hasNext = signal(false);
+
+  ngOnInit(): void {
+    void this.loadResults(true);
+  }
+
+  ngAfterViewInit(): void {
+    requestAnimationFrame(() => {
+      this.searchInput?.nativeElement.focus();
+      this.searchInput?.nativeElement.select();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.clearSearchTimer();
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    this.close();
+  }
+
+  onSearchQueryChanged(query: string): void {
+    this.searchQuery = query;
+    this.clearSearchTimer();
+    this.searchTimer = setTimeout(() => {
+      void this.loadResults(true);
+    }, 250);
+  }
+
+  retry(): void {
+    void this.loadResults(true);
+  }
+
+  async loadMore(): Promise<void> {
+    if (this.loading() || !this.hasNext())
+      return;
+
+    this.currentPage += 1;
+    await this.loadResults(false);
+  }
+
+  selectGif(gif: KlipyGif): void {
+    this.gifSelected.emit(gif);
+  }
+
+  close(): void {
+    this.closed.emit(undefined);
+  }
+
+  gifAspectRatio(gif: KlipyGif): string {
+    if (gif.width > 0 && gif.height > 0) {
+      return `${gif.width} / ${gif.height}`;
+    }
+
+    return '1 / 1';
+  }
+
+  gifPreviewUrl(gif: KlipyGif): string {
+    return this.klipy.buildRenderableImageUrl(gif.previewUrl || gif.url);
+  }
+
+  private async loadResults(reset: boolean): Promise<void> {
+    if (reset) {
+      this.currentPage = 1;
+    }
+
+    const requestId = ++this.requestId;
+
+    this.loading.set(true);
+    this.errorMessage.set('');
+
+    try {
+      const response = await firstValueFrom(
+        this.klipy.searchGifs(this.searchQuery, this.currentPage)
+      );
+
+      if (requestId !== this.requestId)
+        return;
+
+      this.results.set(
+        reset
+          ? response.results
+          : this.mergeResults(this.results(), response.results)
+      );
+
+      this.hasNext.set(response.hasNext);
+    } catch (error) {
+      if (requestId !== this.requestId)
+        return;
+
+      this.errorMessage.set(
+        error instanceof Error
+          ? error.message
+          : 'Failed to load GIFs from KLIPY.'
+      );
+
+      if (reset) {
+        this.results.set([]);
+      }
+
+      this.hasNext.set(false);
+    } finally {
+      if (requestId === this.requestId) {
+        this.loading.set(false);
+      }
+    }
+  }
+
+  private mergeResults(existing: KlipyGif[], incoming: KlipyGif[]): KlipyGif[] {
+    const seen = new Set(existing.map((gif) => gif.id));
+    const merged = [...existing];
+
+    for (const gif of incoming) {
+      if (seen.has(gif.id))
+        continue;
+
+      merged.push(gif);
+      seen.add(gif.id);
+    }
+
+    return merged;
+  }
+
+  private clearSearchTimer(): void {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = null;
+    }
+  }
+}