pastilhas
82ca696ccf
Four panels became three, and the arrangement carries the change: everything that organises or configures is stacked in one narrow column, and the whole of the rest is one surface for looking at images. Collections is a LIST, not a grid of covers — it sits in a narrow column beside the gallery, where two cards per row meant four collections visible. A row is a name, a count, and rename/delete on hover. Create is a dialog rather than an always-present input, and a filter field replaces it in that space, since finding one is the frequent act and making one is not. Selecting a collection now shows it in the GALLERY. It used to replace the list inside its own panel, which meant the selector disappeared the moment it was used, and both panels kept their own copy of one collection's images and disagreed after any edit. `?collection=` is read by the gallery now; the collections hook stopped fetching detail entirely. Deleting asks the question that cannot be undone: keep the images, or delete them too. That needed a server route — DELETE /collections/:id?images=delete — which reads the members BEFORE the collection goes, since deleting it takes the memberships with it. Unchecked by default: the recoverable answer is the one you get by pressing Enter without reading. Providers stopped being a panel. It was a card per provider, each with a key field and three buttons, filling a quarter of the screen for something set once — it is a dropdown at the top of Generate now, listing "adapter · model" with a delete on each, and adding one opens a dialog. The form and the dropdown share one provider list (useProviders); they were two fetches, so adding a provider left the form showing the old models until a reload.
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { useAtelierClient } from '../lib/api';
|
|
import type { CollectionSummary } from '../lib/api';
|
|
|
|
/**
|
|
* The collection LIST — no detail view any more.
|
|
*
|
|
* A selected collection is rendered by the Gallery panel, which reads the same `?collection=` param.
|
|
* This hook stopped fetching the detail when that moved: two panels both holding a copy of one
|
|
* collection's images is two things to keep in step, and the narrow list has no use for them.
|
|
*/
|
|
export const useCollectionsManager = () => {
|
|
const client = useAtelierClient();
|
|
const [collections, setCollections] = useState<CollectionSummary[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [query, setQuery] = useState('');
|
|
|
|
const refresh = useCallback(async () => {
|
|
try {
|
|
setCollections(await client.listCollections());
|
|
setError(null);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void refresh();
|
|
}, [refresh]);
|
|
|
|
// Filtering happens here rather than server-side: the list is small enough that a round trip per
|
|
// keystroke would be slower than the filter, and a search that cannot go stale needs no refresh.
|
|
const visible = useMemo(() => {
|
|
const needle = query.trim().toLowerCase();
|
|
if (!needle) return collections;
|
|
return collections.filter((collection) => collection.name.toLowerCase().includes(needle));
|
|
}, [collections, query]);
|
|
|
|
const guard = async (action: () => Promise<unknown>) => {
|
|
try {
|
|
await action();
|
|
setError(null);
|
|
await refresh();
|
|
return true;
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
return false;
|
|
}
|
|
};
|
|
|
|
return {
|
|
collections: visible,
|
|
total: collections.length,
|
|
loading,
|
|
error,
|
|
query,
|
|
setQuery,
|
|
refresh,
|
|
create: (name: string) => guard(() => client.createCollection(name.trim())),
|
|
rename: (id: string, name: string) => guard(() => client.renameCollection(id, name.trim())),
|
|
remove: (id: string, deleteImages: boolean) => guard(() => client.deleteCollection(id, deleteImages)),
|
|
};
|
|
};
|
|
|
|
export type CollectionsManager = ReturnType<typeof useCollectionsManager>;
|