feat/font-store-merge #32
@@ -18,7 +18,7 @@ import {
|
|||||||
type FontLoadRequestConfig,
|
type FontLoadRequestConfig,
|
||||||
type UnifiedFont,
|
type UnifiedFont,
|
||||||
appliedFontsManager,
|
appliedFontsManager,
|
||||||
unifiedFontStore,
|
fontStore,
|
||||||
} from '../../model';
|
} from '../../model';
|
||||||
|
|
||||||
interface Props extends
|
interface Props extends
|
||||||
@@ -50,7 +50,7 @@ let {
|
|||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
const isLoading = $derived(
|
const isLoading = $derived(
|
||||||
unifiedFontStore.isFetching || unifiedFontStore.isLoading,
|
fontStore.isFetching || fontStore.isLoading,
|
||||||
);
|
);
|
||||||
|
|
||||||
function handleInternalVisibleChange(visibleItems: UnifiedFont[]) {
|
function handleInternalVisibleChange(visibleItems: UnifiedFont[]) {
|
||||||
@@ -82,12 +82,12 @@ function handleInternalVisibleChange(visibleItems: UnifiedFont[]) {
|
|||||||
*/
|
*/
|
||||||
function loadMore() {
|
function loadMore() {
|
||||||
if (
|
if (
|
||||||
!unifiedFontStore.pagination.hasMore
|
!fontStore.pagination.hasMore
|
||||||
|| unifiedFontStore.isFetching
|
|| fontStore.isFetching
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
unifiedFontStore.nextPage();
|
fontStore.nextPage();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -97,17 +97,17 @@ function loadMore() {
|
|||||||
* of the loaded items. Only fetches if there are more pages available.
|
* of the loaded items. Only fetches if there are more pages available.
|
||||||
*/
|
*/
|
||||||
function handleNearBottom(_lastVisibleIndex: number) {
|
function handleNearBottom(_lastVisibleIndex: number) {
|
||||||
const { hasMore } = unifiedFontStore.pagination;
|
const { hasMore } = fontStore.pagination;
|
||||||
|
|
||||||
// VirtualList already checks if we're near the bottom of loaded items
|
// VirtualList already checks if we're near the bottom of loaded items
|
||||||
if (hasMore && !unifiedFontStore.isFetching) {
|
if (hasMore && !fontStore.isFetching) {
|
||||||
loadMore();
|
loadMore();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative w-full h-full">
|
<div class="relative w-full h-full">
|
||||||
{#if skeleton && isLoading && unifiedFontStore.fonts.length === 0}
|
{#if skeleton && isLoading && fontStore.fonts.length === 0}
|
||||||
<!-- Show skeleton only on initial load when no fonts are loaded yet -->
|
<!-- Show skeleton only on initial load when no fonts are loaded yet -->
|
||||||
<div transition:fade={{ duration: 300 }}>
|
<div transition:fade={{ duration: 300 }}>
|
||||||
{@render skeleton()}
|
{@render skeleton()}
|
||||||
@@ -115,8 +115,8 @@ function handleNearBottom(_lastVisibleIndex: number) {
|
|||||||
{:else}
|
{:else}
|
||||||
<!-- VirtualList persists during pagination - no destruction/recreation -->
|
<!-- VirtualList persists during pagination - no destruction/recreation -->
|
||||||
<VirtualList
|
<VirtualList
|
||||||
items={unifiedFontStore.fonts}
|
items={fontStore.fonts}
|
||||||
total={unifiedFontStore.pagination.total}
|
total={fontStore.pagination.total}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
onVisibleItemsChange={handleInternalVisibleChange}
|
onVisibleItemsChange={handleInternalVisibleChange}
|
||||||
onNearBottom={handleNearBottom}
|
onNearBottom={handleNearBottom}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
Sits below the filter list, separated by a top border.
|
Sits below the filter list, separated by a top border.
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { unifiedFontStore } from '$entities/Font';
|
import { fontStore } from '$entities/Font';
|
||||||
import type { ResponsiveManager } from '$shared/lib';
|
import type { ResponsiveManager } from '$shared/lib';
|
||||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||||
import { Button } from '$shared/ui';
|
import { Button } from '$shared/ui';
|
||||||
@@ -33,7 +33,7 @@ const {
|
|||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const apiSort = sortStore.apiValue;
|
const apiSort = sortStore.apiValue;
|
||||||
untrack(() => unifiedFontStore.setSort(apiSort));
|
untrack(() => fontStore.setSort(apiSort));
|
||||||
});
|
});
|
||||||
|
|
||||||
const responsive = getContext<ResponsiveManager>('responsive');
|
const responsive = getContext<ResponsiveManager>('responsive');
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
import {
|
import {
|
||||||
type UnifiedFont,
|
type UnifiedFont,
|
||||||
fetchFontsByIds,
|
fetchFontsByIds,
|
||||||
unifiedFontStore,
|
fontStore,
|
||||||
} from '$entities/Font';
|
} from '$entities/Font';
|
||||||
import {
|
import {
|
||||||
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
||||||
@@ -85,7 +85,7 @@ export class ComparisonStore {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Check if fonts are available to set as defaults
|
// Check if fonts are available to set as defaults
|
||||||
const fonts = unifiedFontStore.fonts;
|
const fonts = fontStore.fonts;
|
||||||
if (fonts.length >= 2) {
|
if (fonts.length >= 2) {
|
||||||
// Only set if we really have nothing (fallback)
|
// Only set if we really have nothing (fallback)
|
||||||
if (!this.#fontA) this.#fontA = fonts[0];
|
if (!this.#fontA) this.#fontA = fonts[0];
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
Provides a search input and filtration for fonts
|
Provides a search input and filtration for fonts
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { unifiedFontStore } from '$entities/Font';
|
import { fontStore } from '$entities/Font';
|
||||||
import {
|
import {
|
||||||
FilterControls,
|
FilterControls,
|
||||||
Filters,
|
Filters,
|
||||||
@@ -36,7 +36,7 @@ let { showFilters = $bindable(true) }: Props = $props();
|
|||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const params = mapManagerToParams(filterManager);
|
const params = mapManagerToParams(filterManager);
|
||||||
untrack(() => unifiedFontStore.setParams(params));
|
untrack(() => fontStore.setParams(params));
|
||||||
});
|
});
|
||||||
|
|
||||||
const transform = new Tween(
|
const transform = new Tween(
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { NavigationWrapper } from '$entities/Breadcrumb';
|
import { NavigationWrapper } from '$entities/Breadcrumb';
|
||||||
import { unifiedFontStore } from '$entities/Font';
|
import { fontStore } from '$entities/Font';
|
||||||
import type { ResponsiveManager } from '$shared/lib';
|
import type { ResponsiveManager } from '$shared/lib';
|
||||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||||
import {
|
import {
|
||||||
@@ -36,7 +36,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
|
|||||||
id="sample_set"
|
id="sample_set"
|
||||||
title="Sample Set"
|
title="Sample Set"
|
||||||
headerTitle="visual_output"
|
headerTitle="visual_output"
|
||||||
headerSubtitle="items_total: {unifiedFontStore.pagination.total ?? 0}"
|
headerSubtitle="items_total: {fontStore.pagination.total ?? 0}"
|
||||||
headerAction={registerAction}
|
headerAction={registerAction}
|
||||||
>
|
>
|
||||||
{#snippet headerContent()}
|
{#snippet headerContent()}
|
||||||
|
|||||||
Reference in New Issue
Block a user