From b5481a6e8e51ce488724ff8d953ee21bee4e5965 Mon Sep 17 00:00:00 2001 From: Florian <45694132+flo-bit@users.noreply.github.com> Date: Tue, 12 May 2026 03:34:22 +0200 Subject: [PATCH] fix errors and warnings --- .../_base/BaseCard/BaseEditingCard.svelte | 114 +++++++++++--- .../visual/DrawCard/EditingDrawCard.svelte | 2 + .../bluesky-post/BlueskyPost.svelte | 2 +- .../RichTextEditorMenu.svelte | 2 +- src/lib/website/CardSettingsSidebar.svelte | 142 ++++++++++++------ src/lib/website/EditableWebsite.svelte | 2 + .../settings/sections/AccountSection.svelte | 7 +- 7 files changed, 201 insertions(+), 70 deletions(-) diff --git a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte index b9ef3c4..9eab987 100644 --- a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte +++ b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte @@ -18,10 +18,7 @@ } from '$lib/website/context'; import PlainTextEditor from '$lib/components/PlainTextEditor.svelte'; - let colorsChoices = [ - { class: 'text-base-500', label: 'base' }, - { class: 'text-accent-500', label: 'accent' }, - { class: 'text-base-300 dark:text-base-700', label: 'transparent' }, + const customColorChoices = [ { class: 'text-red-500', label: 'red' }, { class: 'text-orange-500', label: 'orange' }, { class: 'text-amber-500', label: 'amber' }, @@ -41,6 +38,12 @@ { class: 'text-rose-500', label: 'rose' } ]; + const specialColors = ['base', 'accent', 'transparent'] as const; + const colorModes = ['base', 'accent', 'transparent', 'custom'] as const; + type ColorMode = (typeof colorModes)[number]; + + let lastCustomColor = $state('rose'); + export type BaseEditingCardProps = { item: Item; ondelete: () => void; @@ -58,7 +61,29 @@ ...rest }: BaseEditingCardProps = $props(); - let selectedColor = $derived(colorsChoices.find((c) => getColor(item) === c.label)); + const currentColor = $derived(getColor(item)); + const colorMode = $derived( + (specialColors as readonly string[]).includes(currentColor) + ? (currentColor as ColorMode) + : 'custom' + ); + const selectedCustomColor = $derived( + colorMode === 'custom' ? customColorChoices.find((c) => c.label === currentColor) : undefined + ); + + function setColorMode(mode: ColorMode) { + if (mode === 'custom') { + item.color = lastCustomColor; + return; + } + if (colorMode === 'custom') lastCustomColor = currentColor; + item.color = mode; + } + + function pickCustomColor(label: string) { + item.color = label; + lastCustomColor = label; + } let canEdit = getCanEdit(); let isMobile = getIsMobile(); @@ -293,11 +318,11 @@ {/snippet} - { - if (typeof previous === 'string' || typeof color === 'string') { - return; - } - - item.color = color.label; - }} - class="w-64" - /> +
+
+ {#each colorModes as mode (mode)} + + {/each} +
+ {#if colorMode === 'custom'} + { + if (typeof color === 'string') return; + pickCustomColor(color.label); + }} + class="w-64" + /> + {/if} +
{/if} diff --git a/src/lib/cards/visual/DrawCard/EditingDrawCard.svelte b/src/lib/cards/visual/DrawCard/EditingDrawCard.svelte index 454ac1c..516b0a0 100644 --- a/src/lib/cards/visual/DrawCard/EditingDrawCard.svelte +++ b/src/lib/cards/visual/DrawCard/EditingDrawCard.svelte @@ -137,6 +137,8 @@
- import { cn, Toggle, toggleVariants, Tooltip } from '@foxui/core'; + import { cn, Toggle, toggleVariants } from '@foxui/core'; import type { Editor } from '@tiptap/core'; import Select from './Select.svelte'; import type { RichTextTypes } from '.'; diff --git a/src/lib/website/CardSettingsSidebar.svelte b/src/lib/website/CardSettingsSidebar.svelte index a6adc13..9d1c61c 100644 --- a/src/lib/website/CardSettingsSidebar.svelte +++ b/src/lib/website/CardSettingsSidebar.svelte @@ -97,6 +97,23 @@ colorMode === 'custom' ? allColorChoices.find((c) => c.label === currentColor) : undefined ); + const sizeOptions = [ + { w: 2, h: 2, label: 'Small', preview: 'size-3' }, + { w: 4, h: 2, label: 'Wide', preview: 'h-3 w-6' }, + { w: 2, h: 4, label: 'Tall', preview: 'h-6 w-3' }, + { w: 4, h: 4, label: 'Large', preview: 'size-6' } + ] as const; + const availableSizes = $derived(sizeOptions.filter((s) => canSetSize(s.w, s.h))); + + function isCurrentSize(w: number, h: number) { + if (!item) return false; + const currentW = isMobile ? item.mobileW : item.w; + const currentH = isMobile ? item.mobileH : item.h; + const targetW = isMobile ? w * 2 : w; + const targetH = isMobile ? h * 2 : h; + return currentW === targetW && currentH === targetH; + } + type TabId = 'content' | 'design'; const allTabs: { id: TabId; label: string }[] = [ { id: 'content', label: 'Content' }, @@ -167,20 +184,56 @@ {:else if activeTab === 'design'} {#if cardDef.allowSetColor !== false}
-

Color

-
+

+ Background color +

+
{#each colorModes as mode (mode)} {/each}
@@ -198,54 +251,47 @@ {/if} - {#if cardDef.canResize !== false} + {#if cardDef.canResize !== false && availableSizes.length > 1}

Size

-
- {#if canSetSize(2, 2)} - - {/if} - {#if canSetSize(4, 2)} - - {/if} - {#if canSetSize(2, 4)} +
+ {#each availableSizes as size (`${size.w}x${size.h}`)} + {@const selected = isCurrentSize(size.w, size.h)} - {/if} - {#if canSetSize(4, 4)} - - {/if} + {/each}
{/if} diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte index 0d11e28..239babb 100644 --- a/src/lib/website/EditableWebsite.svelte +++ b/src/lib/website/EditableWebsite.svelte @@ -69,7 +69,9 @@ }); // Snapshot the original cards and sections so savePage can detect deletions. + // svelte-ignore state_referenced_locally const originalCards: Item[] = structuredClone(data.cards); + // svelte-ignore state_referenced_locally const originalSections: SectionRecord[] = structuredClone(data.sections); // svelte-ignore state_referenced_locally diff --git a/src/lib/website/settings/sections/AccountSection.svelte b/src/lib/website/settings/sections/AccountSection.svelte index 4e69cc9..021dd31 100644 --- a/src/lib/website/settings/sections/AccountSection.svelte +++ b/src/lib/website/settings/sections/AccountSection.svelte @@ -93,7 +93,12 @@ -
-- 2.51.2