diff --git a/packages/website/src/components/Gallery/List.tsx b/packages/website/src/components/Gallery/List.tsx index f6638f3a6..a7856d6e7 100644 --- a/packages/website/src/components/Gallery/List.tsx +++ b/packages/website/src/components/Gallery/List.tsx @@ -1,15 +1,15 @@ -import locales from '@blitzkit/i18n/locales.json'; -import { literals } from '@blitzkit/i18n/src/literals'; -import { Flex, Text } from '@radix-ui/themes'; -import fuzzysort from 'fuzzysort'; -import { times } from 'lodash-es'; -import { useMemo, useState } from 'react'; -import { awaitableGallery } from '../../core/awaitables/gallery'; -import { useLocale } from '../../hooks/useLocale'; -import { GalleryEphemeral } from '../../stores/galleryEphemeral'; -import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps'; -import { InlineSkeleton } from '../InlineSkeleton'; -import { GalleryCard } from './Card'; +import locales from "@blitzkit/i18n/locales.json"; +import { literals } from "@blitzkit/i18n/src/literals"; +import { Flex, Text } from "@radix-ui/themes"; +import fuzzysort from "fuzzysort"; +import { times } from "lodash-es"; +import { useMemo, useState } from "react"; +import { awaitableGallery } from "../../core/awaitables/gallery"; +import { useLocale } from "../../hooks/useLocale"; +import { Gallery } from "../../stores/gallery"; +import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; +import { InlineSkeleton } from "../InlineSkeleton"; +import { GalleryCard } from "./Card"; export interface Avatar { name: string; @@ -22,7 +22,7 @@ const DEFAULT_LOADED = 42; const PREVIEW_COUNT = 28; export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) { - const search = GalleryEphemeral.use((state) => state.search); + const search = Gallery.use((state) => state.search); const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED); const { locale, strings } = useLocale(); const filtered = useMemo(() => { @@ -35,9 +35,9 @@ export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) { .go(search, gallery.avatars, { keys: [ ...locales.supported.map( - (supported) => `name.locales.${supported.locale}`, + (supported) => `name.locales.${supported.locale}` ), - 'id', + "id", ], }) .map((result) => result.obj); @@ -72,7 +72,7 @@ export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) { skeleton onIntersection={() => setLoadedCards((state) => state + 2)} /> - ), + ) )} diff --git a/packages/website/src/components/Gallery/Search.tsx b/packages/website/src/components/Gallery/Search.tsx index 790cdf125..16307b2db 100644 --- a/packages/website/src/components/Gallery/Search.tsx +++ b/packages/website/src/components/Gallery/Search.tsx @@ -1,13 +1,12 @@ -import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; -import { TextField } from '@radix-ui/themes'; -import { useRef } from 'react'; -import { useLocale } from '../../hooks/useLocale'; -import { GalleryEphemeral } from '../../stores/galleryEphemeral'; -import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps'; +import { MagnifyingGlassIcon } from "@radix-ui/react-icons"; +import { TextField } from "@radix-ui/themes"; +import { useRef } from "react"; +import { useLocale } from "../../hooks/useLocale"; +import { Gallery } from "../../stores/gallery"; +import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) { const input = useRef(null); - const mutateGalleryEphemeral = GalleryEphemeral.useMutation(); const { strings } = useLocale(); return ( @@ -17,7 +16,7 @@ export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) { placeholder={strings.website.tools.gallery.search.hint} ref={input} onChange={(event) => { - mutateGalleryEphemeral((draft) => { + Gallery.mutate((draft) => { const trimmed = event.target.value.trim(); draft.search = trimmed.length === 0 ? undefined : trimmed; }); diff --git a/packages/website/src/pages/[...locale]/gallery/_index.tsx b/packages/website/src/pages/[...locale]/gallery/_index.tsx index d52169f10..e18e63bfc 100644 --- a/packages/website/src/pages/[...locale]/gallery/_index.tsx +++ b/packages/website/src/pages/[...locale]/gallery/_index.tsx @@ -1,12 +1,11 @@ -import { GalleryList } from '../../../components/Gallery/List'; -import { GallerySearch } from '../../../components/Gallery/Search'; -import { PageWrapper } from '../../../components/PageWrapper'; +import { GalleryList } from "../../../components/Gallery/List"; +import { GallerySearch } from "../../../components/Gallery/Search"; +import { PageWrapper } from "../../../components/PageWrapper"; import { LocaleProvider, type LocaleAcceptorProps, -} from '../../../hooks/useLocale'; -import { GalleryEphemeral } from '../../../stores/galleryEphemeral'; -import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps'; +} from "../../../hooks/useLocale"; +import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps"; export function Page({ locale, @@ -22,10 +21,8 @@ export function Page({ function Content({ skeleton }: MaybeSkeletonComponentProps) { return ( - - - - + + ); } diff --git a/packages/website/src/stores/gallery.ts b/packages/website/src/stores/gallery.ts new file mode 100644 index 000000000..238431771 --- /dev/null +++ b/packages/website/src/stores/gallery.ts @@ -0,0 +1,7 @@ +import { Varuna } from "varuna"; + +interface Gallery { + search?: string; +} + +export const Gallery = new Varuna({}); diff --git a/packages/website/src/stores/galleryEphemeral.ts b/packages/website/src/stores/galleryEphemeral.ts deleted file mode 100644 index 51eb96db5..000000000 --- a/packages/website/src/stores/galleryEphemeral.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { create } from 'zustand'; -import { subscribeWithSelector } from 'zustand/middleware'; -import { createContextualStore } from '../core/zustand/createContextualStore'; - -interface GalleryEphemeral { - search?: string; -} - -export const GalleryEphemeral = createContextualStore(() => { - return create()( - subscribeWithSelector(() => ({})), - ); -});