Skip to content

Commit 2ef4526

Browse files
0xGingi0xGingi
committed
fix svelte warnings
1 parent adf9acf commit 2ef4526

7 files changed

Lines changed: 68 additions & 35 deletions

File tree

‎src/lib/cache/cached-query.svelte.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface CachedQueryOptions {
1010
cacheKey?: string;
1111
ttl?: number;
1212
staleWhileRevalidate?: boolean;
13-
enabled?: boolean;
13+
enabled?: boolean | (() => boolean);
1414
}
1515

1616
export interface QueryResult<T> {
@@ -78,13 +78,15 @@ export function useCachedQuery<TResult>(
7878

7979
const getArgs = () => (typeof queryArgs === 'function' ? queryArgs() : queryArgs);
8080
const getCacheKey = () => cacheKey || `${queryConfig.url}:${JSON.stringify(getArgs())}`;
81+
const isEnabled = () => (typeof enabled === 'function' ? enabled() : enabled);
8182

8283
async function fetchData() {
83-
if (!enabled) {
84+
if (!isEnabled()) {
8485
isLoading = false;
8586
return;
8687
}
8788

89+
isLoading = true;
8890
const key = getCacheKey();
8991

9092
// Check cache first
@@ -147,7 +149,8 @@ export function useCachedQuery<TResult>(
147149

148150
// Watch for argument changes and match cache keys
149151
$effect(() => {
150-
const _ = extract(queryArgs);
152+
extract(queryArgs);
153+
isEnabled();
151154
fetchData();
152155
});
153156

‎src/lib/components/account/ThemeSelector.svelte‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,24 @@
1212
primaryColor = $bindable(),
1313
accentColor = $bindable(),
1414
}: {
15-
currentTheme: string | null | undefined;
15+
currentTheme: string | null | undefined;
1616
primaryColor: string | null | undefined;
1717
accentColor: string | null | undefined;
1818
} = $props();
1919
2020
let saving = $state(false);
2121
const hexColorRegex = /^#([0-9a-f]{6})$/i;
2222
23-
const currentThemeData = $derived(currentTheme ? getTheme(currentTheme) ?? null : null);
23+
const currentThemeData = $derived(currentTheme ? (getTheme(currentTheme) ?? null) : null);
2424
const primarySwatch = $derived(
2525
primaryColor && hexColorRegex.test(primaryColor)
2626
? primaryColor.toLowerCase()
27-
: currentThemeData?.colors.primary ?? getComputedThemeColor('--primary') ?? '#0f172a'
27+
: (currentThemeData?.colors.primary ?? getComputedThemeColor('--primary') ?? '#0f172a')
2828
);
2929
const accentSwatch = $derived(
3030
accentColor && hexColorRegex.test(accentColor)
3131
? accentColor.toLowerCase()
32-
: currentThemeData?.colors.accent ?? getComputedThemeColor('--accent') ?? '#0f172a'
32+
: (currentThemeData?.colors.accent ?? getComputedThemeColor('--accent') ?? '#0f172a')
3333
);
3434
3535
function normalizeHex(color: string | null | undefined): string | null {
@@ -40,14 +40,21 @@
4040
4141
function getComputedThemeColor(variable: '--primary' | '--accent'): string | null {
4242
if (typeof document === 'undefined') return null;
43-
const style = getComputedStyle(document.documentElement).getPropertyValue(variable).trim().toLowerCase();
43+
const style = getComputedStyle(document.documentElement)
44+
.getPropertyValue(variable)
45+
.trim()
46+
.toLowerCase();
4447
return /^#([0-9a-f]{6})$/.test(style) ? style : null;
4548
}
4649
47-
async function saveTheme(themeId: string | null, nextPrimaryColor: string | null, nextAccentColor: string | null) {
50+
async function saveTheme(
51+
themeId: string | null,
52+
nextPrimaryColor: string | null,
53+
nextAccentColor: string | null
54+
) {
4855
if (!session.current?.user.id) return;
4956
50-
const theme = themeId ? getTheme(themeId) ?? null : null;
57+
const theme = themeId ? (getTheme(themeId) ?? null) : null;
5158
const previousTheme = currentTheme;
5259
const previousPrimaryColor = normalizeHex(primaryColor);
5360
const previousAccentColor = normalizeHex(accentColor);
@@ -82,7 +89,7 @@
8289
currentTheme = previousTheme;
8390
primaryColor = previousPrimaryColor;
8491
accentColor = previousAccentColor;
85-
const previousThemeData = previousTheme ? getTheme(previousTheme) ?? null : null;
92+
const previousThemeData = previousTheme ? (getTheme(previousTheme) ?? null) : null;
8693
applyTheme(previousThemeData, {
8794
primaryColor: previousPrimaryColor,
8895
accentColor: previousAccentColor,
@@ -118,7 +125,6 @@
118125
void saveTheme(currentTheme ?? null, normalizeHex(primaryColor), null);
119126
}
120127
}
121-
122128
</script>
123129

124130
<div class="flex flex-col gap-4">
@@ -167,7 +173,8 @@
167173
<div class="mt-2 flex gap-1">
168174
<div
169175
class="h-8 w-8 rounded border"
170-
style="background-color: {theme.colors.background}; border-color: {theme.colors.border};"
176+
style="background-color: {theme.colors.background}; border-color: {theme.colors
177+
.border};"
171178
></div>
172179
<div
173180
class="h-8 w-8 rounded border"
@@ -187,14 +194,15 @@
187194
</div>
188195

189196
{#if currentThemeData || currentTheme === null}
190-
<div class="space-y-3 rounded-lg border border-border p-3">
197+
<div class="border-border space-y-3 rounded-lg border p-3">
191198
<p class="text-muted-foreground text-sm">Customize this theme&apos;s key accents.</p>
192199

193200
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
194201
<div class="flex flex-col gap-2">
195-
<label class="text-sm font-medium">Primary</label>
202+
<label for="theme-primary-color" class="text-sm font-medium">Primary</label>
196203
<div class="flex items-center gap-2">
197204
<input
205+
id="theme-primary-color"
198206
type="color"
199207
value={primarySwatch}
200208
onchange={handlePrimaryColorChange}
@@ -214,9 +222,10 @@
214222
</div>
215223
</div>
216224
<div class="flex flex-col gap-2">
217-
<label class="text-sm font-medium">Accent</label>
225+
<label for="theme-accent-color" class="text-sm font-medium">Accent</label>
218226
<div class="flex items-center gap-2">
219227
<input
228+
id="theme-accent-color"
220229
type="color"
221230
value={accentSwatch}
222231
onchange={handleAccentColorChange}

‎src/lib/components/model-picker/model-picker.svelte‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
haystack: enrichedEnabledModels,
135135
needle: search,
136136
property: 'modelId',
137-
})
137+
})
138138
: enrichedEnabledModels;
139139
140140
return models
@@ -153,13 +153,18 @@
153153
});
154154
});
155155
156-
const currentModel = $derived(settings.modelId ? enabledModelById.get(settings.modelId) : undefined);
156+
const currentModel = $derived(
157+
settings.modelId ? enabledModelById.get(settings.modelId) : undefined
158+
);
157159
158160
$effect(() => {
159161
if (enabledModelsQuery.isLoading) return;
160162
const selectedModelId = settings.modelId;
161163
162-
if ((selectedModelId == null || !enabledModelById.has(selectedModelId)) && enabledArr.length > 0) {
164+
if (
165+
(selectedModelId == null || !enabledModelById.has(selectedModelId)) &&
166+
enabledArr.length > 0
167+
) {
163168
settings.modelId = enabledArr[0]!.modelId;
164169
}
165170
});
@@ -325,7 +330,7 @@
325330
'border-border bg-muted/30 flex gap-1 p-2',
326331
isMobile.current
327332
? 'flex-row overflow-x-auto border-b'
328-
: 'flex-col border-r min-h-0 overflow-y-auto'
333+
: 'min-h-0 flex-col overflow-y-auto border-r'
329334
)}
330335
>
331336
<!-- Favorites/All button -->
@@ -680,6 +685,10 @@
680685
></div>
681686
<div
682687
class="bg-background fixed inset-x-0 bottom-0 z-50 h-[85vh] touch-none rounded-t-xl border-t shadow-xl"
688+
role="dialog"
689+
aria-modal="true"
690+
aria-label="Model picker"
691+
tabindex="-1"
683692
style="transform: translateY({drawerTranslateY}px);"
684693
transition:fly={{ y: 100, duration: 200 }}
685694
ontouchstart={(e) => {

‎src/lib/components/ui/light-switch/theme-toggle.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
const userSettings = useCachedQuery<UserSettings>(
3232
api.user_settings.get,
3333
{},
34-
{ enabled: shouldFetchSettings }
34+
{ enabled: () => shouldFetchSettings }
3535
);
3636
3737
const resolvedTheme = $derived(providedSettings?.theme ?? userSettings.data?.theme);

‎src/lib/components/ui/prompt-picker/prompt-picker.svelte‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@
8181
}
8282
8383
function handleKeydown(event: KeyboardEvent) {
84+
if (!open) return;
85+
8486
if (step === 'variables') {
8587
if (event.key === 'Escape') {
8688
event.preventDefault();
@@ -137,10 +139,13 @@
137139
}
138140
</script>
139141

140-
<svelte:window use:shortcut={getKeybindOptions('openPromptPicker', () => (open = true))} />
142+
<svelte:window
143+
use:shortcut={getKeybindOptions('openPromptPicker', () => (open = true))}
144+
onkeydown={handleKeydown}
145+
/>
141146

142147
<Modal bind:open>
143-
<div class="space-y-4" onkeydown={handleKeydown}>
148+
<div class="space-y-4">
144149
{#if step === 'select'}
145150
<h2 class="text-lg font-semibold">Insert Prompt</h2>
146151

@@ -186,7 +191,9 @@
186191
<div class="flex items-center gap-2">
187192
<div class="truncate font-medium">{prompt.name}</div>
188193
{#if prompt.variables && prompt.variables.length > 0}
189-
<span class="bg-primary/10 text-primary flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs">
194+
<span
195+
class="bg-primary/10 text-primary flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs"
196+
>
190197
<Variable class="size-3" />
191198
{prompt.variables.length}
192199
</span>
@@ -267,9 +274,7 @@
267274
</Button>
268275
</div>
269276

270-
<p class="text-muted-foreground text-center text-xs">
271-
Press Enter to apply, Esc to go back
272-
</p>
277+
<p class="text-muted-foreground text-center text-xs">Press Enter to apply, Esc to go back</p>
273278
{/if}
274279
</div>
275280
</Modal>

‎src/lib/components/ui/switch/switch.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
let {
77
class: className,
88
value = $bindable(false),
9-
...rest
9+
disabled,
1010
}: ComponentProps<ToggleProps> & { class?: string } = $props();
1111
1212
const toggle = new Toggle({
1313
value: () => value ?? false,
14+
disabled: () => disabled,
1415
onValueChange: (v) => (value = v),
15-
...rest,
1616
});
1717
</script>
1818

‎src/lib/components/ui/tooltip.svelte‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<script lang="ts">
2-
import { getters, type ComponentProps, type Extracted } from 'melt';
2+
import { type ComponentProps, type Extracted } from 'melt';
33
import { Tooltip, type TooltipProps } from 'melt/builders';
44
import type { Snippet } from 'svelte';
55
66
type FloatingConfig = NonNullable<Extracted<TooltipProps['floatingConfig']>>;
77
8-
interface Props extends Omit<ComponentProps<TooltipProps>, 'floatingConfig'> {
8+
interface Props extends Omit<
9+
ComponentProps<TooltipProps>,
10+
'floatingConfig' | 'open' | 'onOpenChange'
11+
> {
912
children: Snippet;
1013
trigger: Snippet<[Tooltip]>;
1114
placement?: NonNullable<FloatingConfig['computePosition']>['placement'];
@@ -18,27 +21,31 @@
1821
placement = 'bottom',
1922
openDelay = 250,
2023
disabled,
21-
...rest
24+
closeDelay,
25+
closeOnPointerDown,
26+
forceVisible = true,
27+
disableHoverableContent = true,
2228
}: Props = $props();
2329
2430
let open = $state(false);
2531
const tooltip = new Tooltip({
26-
forceVisible: true,
2732
floatingConfig: () => ({
2833
computePosition: { placement },
2934
flip: {
3035
fallbackPlacements: ['bottom'],
3136
padding: 10,
3237
},
3338
}),
39+
closeDelay: () => closeDelay,
40+
closeOnPointerDown: () => closeOnPointerDown,
41+
forceVisible: () => forceVisible,
3442
open: () => open,
3543
onOpenChange(v) {
3644
if (disabled) open = false;
3745
else open = v;
3846
},
3947
openDelay: () => openDelay,
40-
disableHoverableContent: true,
41-
...getters(rest),
48+
disableHoverableContent: () => disableHoverableContent,
4249
});
4350
</script>
4451

0 commit comments

Comments
 (0)