feat(frontend): add "add to pool" button on the file viewer
deploy / deploy (push) Successful in 58s
deploy / deploy (push) Successful in 58s
Extract the bottom-sheet pool picker (load, search, add) into a reusable PoolPicker component and use it both for the grid's bulk selection and from a new button in the file viewer's top bar, which adds the single open file to a chosen pool. While the picker is open the viewer hands it the keyboard so Escape closes the sheet (even from its search) instead of the viewer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api/client';
|
||||
import type { Pool, PoolOffsetPage } from '$lib/api/types';
|
||||
|
||||
interface Props {
|
||||
/** Files to add to the chosen pool. */
|
||||
fileIds: string[];
|
||||
/** Called after a successful add (before close) — e.g. to clear a selection. */
|
||||
onAdded?: (poolId: string) => void;
|
||||
/** Close the picker without adding. */
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { fileIds, onAdded, onClose }: Props = $props();
|
||||
|
||||
let pools = $state<Pool[]>([]);
|
||||
let loading = $state(true);
|
||||
let loadError = $state('');
|
||||
let addError = $state('');
|
||||
let search = $state('');
|
||||
let busy = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
void load();
|
||||
});
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
loadError = '';
|
||||
try {
|
||||
const res = await api.get<PoolOffsetPage>('/pools?limit=200&sort=name&order=asc');
|
||||
pools = res.items ?? [];
|
||||
} catch {
|
||||
loadError = 'Failed to load pools';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let filtered = $derived(
|
||||
search.trim()
|
||||
? pools.filter((p) => p.name?.toLowerCase().includes(search.toLowerCase()))
|
||||
: pools
|
||||
);
|
||||
|
||||
async function add(poolId: string) {
|
||||
if (busy) return;
|
||||
busy = true;
|
||||
addError = '';
|
||||
try {
|
||||
await api.post(`/pools/${poolId}/files`, { file_ids: fileIds });
|
||||
onAdded?.(poolId);
|
||||
onClose();
|
||||
} catch {
|
||||
addError = 'Failed to add to pool';
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
let count = $derived(fileIds.length);
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="picker-backdrop" role="presentation" onclick={onClose}></div>
|
||||
<div class="picker-sheet" class:busy role="dialog" aria-label="Add to pool">
|
||||
<div class="picker-header">
|
||||
<span class="picker-title">Add {count} file{count !== 1 ? 's' : ''} to pool</span>
|
||||
<button class="picker-close" onclick={onClose} aria-label="Close">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M3 3l10 10M13 3L3 13"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="picker-search-wrap">
|
||||
<input
|
||||
class="picker-search"
|
||||
type="search"
|
||||
placeholder="Search pools…"
|
||||
bind:value={search}
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="picker-empty">Loading…</p>
|
||||
{:else if loadError}
|
||||
<p class="picker-error">{loadError}</p>
|
||||
{:else}
|
||||
{#if addError}
|
||||
<p class="picker-error">{addError}</p>
|
||||
{/if}
|
||||
{#if filtered.length === 0}
|
||||
<p class="picker-empty">No pools found.</p>
|
||||
{:else}
|
||||
<ul class="picker-list">
|
||||
{#each filtered as pool (pool.id)}
|
||||
<li>
|
||||
<button class="picker-item" onclick={() => pool.id && add(pool.id)}>
|
||||
<span class="picker-item-name">{pool.name}</span>
|
||||
<span class="picker-item-count">{pool.file_count ?? 0} files</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.picker-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 110;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.picker-sheet {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 111;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 14px 14px 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
max-height: 70dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slide-up 0.18s ease-out;
|
||||
}
|
||||
|
||||
.picker-sheet.busy {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 16px 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.picker-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.picker-close:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.picker-search-wrap {
|
||||
padding: 0 14px 10px;
|
||||
}
|
||||
|
||||
.picker-search {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
|
||||
background-color: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.picker-search:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.picker-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 8px 12px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 11px 10px;
|
||||
border-radius: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.picker-item:hover {
|
||||
background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
|
||||
}
|
||||
|
||||
.picker-item-name {
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.picker-item-count {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.picker-empty,
|
||||
.picker-error {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.picker-error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user