163 lines
7.1 KiB
HTML
163 lines
7.1 KiB
HTML
<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)"
|
|
>
|
|
@if (!isMobile()) {
|
|
<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]="isMobile() ? 'Search KLIPY and add a gif to the chat' : '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]="isMobile() ? 'grid grid-cols-2 gap-2' : 'columns-[12rem] gap-4'">
|
|
@for (gif of results(); track gif.id) {
|
|
<button
|
|
type="button"
|
|
(click)="selectGif(gif)"
|
|
[class]="(isMobile()
|
|
? 'group block w-full overflow-hidden rounded-xl 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'
|
|
: 'group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top 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') + ' [content-visibility:auto] [contain-intrinsic-size:auto_180px]'"
|
|
>
|
|
<div
|
|
class="relative flex items-center justify-center overflow-hidden bg-secondary/30"
|
|
[style.height.px]="gifCardHeight(gif)"
|
|
>
|
|
<img
|
|
[appChatImageProxyFallback]="gif.previewUrl || gif.url"
|
|
[signalSource]="signalSource()"
|
|
[alt]="gif.title || 'KLIPY GIF'"
|
|
class="h-full w-full object-contain p-1.5 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>
|
|
@if (!isMobile()) {
|
|
<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>
|
|
|
|
@if (isMobile() && hasNext()) {
|
|
<div class="mt-3 flex justify-center">
|
|
<button
|
|
type="button"
|
|
(click)="loadMore()"
|
|
[disabled]="loading()"
|
|
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/80 bg-background/60 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
|
|
[attr.aria-label]="loading() ? 'Loading more GIFs' : 'Load more GIFs'"
|
|
>
|
|
@if (loading()) {
|
|
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
|
|
} @else {
|
|
<ng-icon
|
|
name="lucideChevronDown"
|
|
class="h-5 w-5"
|
|
/>
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
@if (!isMobile()) {
|
|
<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>
|