style: format entire codebase with prettier
This commit is contained in:
Rasmus Q
@@ -1,158 +1,161 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
|
||||
import { getLocalWishlists, forgetLocalWishlist, toggleLocalFavorite, type LocalWishlist } from '$lib/utils/localWishlists';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Star } from '@lucide/svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
|
||||
import {
|
||||
getLocalWishlists,
|
||||
forgetLocalWishlist,
|
||||
toggleLocalFavorite,
|
||||
type LocalWishlist
|
||||
} from '$lib/utils/localWishlists';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Star } from '@lucide/svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let {
|
||||
isAuthenticated = false,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null
|
||||
}: {
|
||||
isAuthenticated?: boolean;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
} = $props();
|
||||
let {
|
||||
isAuthenticated = false,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null
|
||||
}: {
|
||||
isAuthenticated?: boolean;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
let localWishlists = $state<LocalWishlist[]>([]);
|
||||
let enrichedWishlists = $state<any[]>([]);
|
||||
let localWishlists = $state<LocalWishlist[]>([]);
|
||||
let enrichedWishlists = $state<any[]>([]);
|
||||
|
||||
onMount(async () => {
|
||||
localWishlists = getLocalWishlists();
|
||||
onMount(async () => {
|
||||
localWishlists = getLocalWishlists();
|
||||
|
||||
const promises = localWishlists.map(async (local) => {
|
||||
try {
|
||||
const response = await fetch(`/api/wishlist/${local.ownerToken}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
return {
|
||||
...data,
|
||||
isFavorite: local.isFavorite || false
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch wishlist data:', error);
|
||||
}
|
||||
return {
|
||||
id: local.ownerToken,
|
||||
title: local.title,
|
||||
ownerToken: local.ownerToken,
|
||||
publicToken: local.publicToken,
|
||||
createdAt: local.createdAt,
|
||||
isFavorite: local.isFavorite || false,
|
||||
items: [],
|
||||
theme: null,
|
||||
color: null
|
||||
};
|
||||
});
|
||||
const promises = localWishlists.map(async (local) => {
|
||||
try {
|
||||
const response = await fetch(`/api/wishlist/${local.ownerToken}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
return {
|
||||
...data,
|
||||
isFavorite: local.isFavorite || false
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch wishlist data:', error);
|
||||
}
|
||||
return {
|
||||
id: local.ownerToken,
|
||||
title: local.title,
|
||||
ownerToken: local.ownerToken,
|
||||
publicToken: local.publicToken,
|
||||
createdAt: local.createdAt,
|
||||
isFavorite: local.isFavorite || false,
|
||||
items: [],
|
||||
theme: null,
|
||||
color: null
|
||||
};
|
||||
});
|
||||
|
||||
enrichedWishlists = await Promise.all(promises);
|
||||
});
|
||||
enrichedWishlists = await Promise.all(promises);
|
||||
});
|
||||
|
||||
async function refreshEnrichedWishlists() {
|
||||
const promises = localWishlists.map(async (local) => {
|
||||
try {
|
||||
const response = await fetch(`/api/wishlist/${local.ownerToken}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
return {
|
||||
...data,
|
||||
isFavorite: local.isFavorite || false
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch wishlist data:', error);
|
||||
}
|
||||
return {
|
||||
id: local.ownerToken,
|
||||
title: local.title,
|
||||
ownerToken: local.ownerToken,
|
||||
publicToken: local.publicToken,
|
||||
createdAt: local.createdAt,
|
||||
isFavorite: local.isFavorite || false,
|
||||
items: [],
|
||||
theme: null,
|
||||
color: null
|
||||
};
|
||||
});
|
||||
async function refreshEnrichedWishlists() {
|
||||
const promises = localWishlists.map(async (local) => {
|
||||
try {
|
||||
const response = await fetch(`/api/wishlist/${local.ownerToken}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
return {
|
||||
...data,
|
||||
isFavorite: local.isFavorite || false
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch wishlist data:', error);
|
||||
}
|
||||
return {
|
||||
id: local.ownerToken,
|
||||
title: local.title,
|
||||
ownerToken: local.ownerToken,
|
||||
publicToken: local.publicToken,
|
||||
createdAt: local.createdAt,
|
||||
isFavorite: local.isFavorite || false,
|
||||
items: [],
|
||||
theme: null,
|
||||
color: null
|
||||
};
|
||||
});
|
||||
|
||||
enrichedWishlists = await Promise.all(promises);
|
||||
}
|
||||
enrichedWishlists = await Promise.all(promises);
|
||||
}
|
||||
|
||||
async function handleForget(ownerToken: string) {
|
||||
forgetLocalWishlist(ownerToken);
|
||||
localWishlists = getLocalWishlists();
|
||||
await refreshEnrichedWishlists();
|
||||
}
|
||||
async function handleForget(ownerToken: string) {
|
||||
forgetLocalWishlist(ownerToken);
|
||||
localWishlists = getLocalWishlists();
|
||||
await refreshEnrichedWishlists();
|
||||
}
|
||||
|
||||
async function handleToggleFavorite(ownerToken: string) {
|
||||
toggleLocalFavorite(ownerToken);
|
||||
localWishlists = getLocalWishlists();
|
||||
await refreshEnrichedWishlists();
|
||||
}
|
||||
async function handleToggleFavorite(ownerToken: string) {
|
||||
toggleLocalFavorite(ownerToken);
|
||||
localWishlists = getLocalWishlists();
|
||||
await refreshEnrichedWishlists();
|
||||
}
|
||||
|
||||
// Use enriched wishlists which have full data including theme and color
|
||||
const transformedWishlists = $derived(() => enrichedWishlists);
|
||||
// Use enriched wishlists which have full data including theme and color
|
||||
const transformedWishlists = $derived(() => enrichedWishlists);
|
||||
|
||||
// Description depends on authentication status
|
||||
const sectionDescription = $derived(() => {
|
||||
if (isAuthenticated) {
|
||||
return t.dashboard.localWishlistsAuthDescription || "Wishlists stored in your browser that haven't been claimed yet.";
|
||||
}
|
||||
return t.dashboard.localWishlistsDescription || "Wishlists stored in your browser. Sign in to save them permanently.";
|
||||
});
|
||||
// Description depends on authentication status
|
||||
const sectionDescription = $derived(() => {
|
||||
if (isAuthenticated) {
|
||||
return (
|
||||
t.dashboard.localWishlistsAuthDescription ||
|
||||
"Wishlists stored in your browser that haven't been claimed yet."
|
||||
);
|
||||
}
|
||||
return (
|
||||
t.dashboard.localWishlistsDescription ||
|
||||
'Wishlists stored in your browser. Sign in to save them permanently.'
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<WishlistSection
|
||||
title={t.dashboard.localWishlists || "Local Wishlists"}
|
||||
description={sectionDescription()}
|
||||
items={transformedWishlists()}
|
||||
emptyMessage={t.dashboard.emptyLocalWishlists || "No local wishlists yet"}
|
||||
emptyActionLabel={t.dashboard.createLocalWishlist || "Create local wishlist"}
|
||||
emptyActionHref="/"
|
||||
showCreateButton={true}
|
||||
fallbackColor={fallbackColor}
|
||||
fallbackTheme={fallbackTheme}
|
||||
title={t.dashboard.localWishlists || 'Local Wishlists'}
|
||||
description={sectionDescription()}
|
||||
items={transformedWishlists()}
|
||||
emptyMessage={t.dashboard.emptyLocalWishlists || 'No local wishlists yet'}
|
||||
emptyActionLabel={t.dashboard.createLocalWishlist || 'Create local wishlist'}
|
||||
emptyActionHref="/"
|
||||
showCreateButton={true}
|
||||
{fallbackColor}
|
||||
{fallbackTheme}
|
||||
>
|
||||
{#snippet actions(wishlist, unlocked)}
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => handleToggleFavorite(wishlist.ownerToken)}
|
||||
>
|
||||
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
|
||||
>
|
||||
{t.dashboard.manage}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/wishlist/${wishlist.publicToken}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t.dashboard.copyLink}
|
||||
</Button>
|
||||
{#if unlocked}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onclick={() => handleForget(wishlist.ownerToken)}
|
||||
>
|
||||
{t.dashboard.forget || "Forget"}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet actions(wishlist, unlocked)}
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<Button size="sm" variant="outline" onclick={() => handleToggleFavorite(wishlist.ownerToken)}>
|
||||
<Star class={wishlist.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
|
||||
>
|
||||
{t.dashboard.manage}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/wishlist/${wishlist.publicToken}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t.dashboard.copyLink}
|
||||
</Button>
|
||||
{#if unlocked}
|
||||
<Button size="sm" variant="destructive" onclick={() => handleForget(wishlist.ownerToken)}>
|
||||
{t.dashboard.forget || 'Forget'}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</WishlistSection>
|
||||
|
||||
@@ -1,55 +1,61 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from '$lib/components/ui/card';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
itemCount,
|
||||
color = null,
|
||||
theme = null,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
description?: string | null;
|
||||
itemCount: number;
|
||||
color?: string | null;
|
||||
theme?: string | null;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
children?: Snippet;
|
||||
} = $props();
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
itemCount,
|
||||
color = null,
|
||||
theme = null,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
description?: string | null;
|
||||
itemCount: number;
|
||||
color?: string | null;
|
||||
theme?: string | null;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
children?: Snippet;
|
||||
} = $props();
|
||||
|
||||
const finalColor = $derived(color || fallbackColor);
|
||||
const finalTheme = $derived(theme || fallbackTheme);
|
||||
const cardStyle = $derived(getCardStyle(color, fallbackColor));
|
||||
const finalColor = $derived(color || fallbackColor);
|
||||
const finalTheme = $derived(theme || fallbackTheme);
|
||||
const cardStyle = $derived(getCardStyle(color, fallbackColor));
|
||||
</script>
|
||||
|
||||
<Card style={cardStyle} class="h-full flex flex-col relative overflow-hidden">
|
||||
<ThemeCard themeName={finalTheme} color={finalColor} />
|
||||
<CardHeader class="flex-shrink-0 relative z-10">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
|
||||
<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
|
||||
<span class="truncate">{title}</span>
|
||||
</CardTitle>
|
||||
<span class="text-sm text-muted-foreground flex-shrink-0">
|
||||
{itemCount} item{itemCount === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
{#if description}
|
||||
<CardDescription class="line-clamp-3 whitespace-pre-line">{description}</CardDescription>
|
||||
{/if}
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 flex-1 flex flex-col justify-end relative z-10">
|
||||
{#if children}
|
||||
<div>
|
||||
{@render children()}
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
<ThemeCard themeName={finalTheme} color={finalColor} />
|
||||
<CardHeader class="flex-shrink-0 relative z-10">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
|
||||
<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
|
||||
<span class="truncate">{title}</span>
|
||||
</CardTitle>
|
||||
<span class="text-sm text-muted-foreground flex-shrink-0">
|
||||
{itemCount} item{itemCount === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
{#if description}
|
||||
<CardDescription class="line-clamp-3 whitespace-pre-line">{description}</CardDescription>
|
||||
{/if}
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 flex-1 flex flex-col justify-end relative z-10">
|
||||
{#if children}
|
||||
<div>
|
||||
{@render children()}
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,97 +1,103 @@
|
||||
<script lang="ts">
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import EmptyState from '$lib/components/layout/EmptyState.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from '$lib/components/ui/card';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import EmptyState from '$lib/components/layout/EmptyState.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
items,
|
||||
emptyMessage,
|
||||
emptyDescription,
|
||||
emptyActionLabel,
|
||||
emptyActionHref,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null,
|
||||
headerAction,
|
||||
searchBar,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
items: any[];
|
||||
emptyMessage: string;
|
||||
emptyDescription?: string;
|
||||
emptyActionLabel?: string;
|
||||
emptyActionHref?: string;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
headerAction?: Snippet;
|
||||
searchBar?: Snippet;
|
||||
children: Snippet<[any]>;
|
||||
} = $props();
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
items,
|
||||
emptyMessage,
|
||||
emptyDescription,
|
||||
emptyActionLabel,
|
||||
emptyActionHref,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null,
|
||||
headerAction,
|
||||
searchBar,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
items: any[];
|
||||
emptyMessage: string;
|
||||
emptyDescription?: string;
|
||||
emptyActionLabel?: string;
|
||||
emptyActionHref?: string;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
headerAction?: Snippet;
|
||||
searchBar?: Snippet;
|
||||
children: Snippet<[any]>;
|
||||
} = $props();
|
||||
|
||||
const cardStyle = $derived(getCardStyle(fallbackColor, null));
|
||||
const cardStyle = $derived(getCardStyle(fallbackColor, null));
|
||||
|
||||
let scrollContainer: HTMLElement | null = null;
|
||||
let scrollContainer: HTMLElement | null = null;
|
||||
|
||||
function handleWheel(event: WheelEvent) {
|
||||
if (!scrollContainer) return;
|
||||
function handleWheel(event: WheelEvent) {
|
||||
if (!scrollContainer) return;
|
||||
|
||||
// Check if we have horizontal overflow
|
||||
const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth;
|
||||
// Check if we have horizontal overflow
|
||||
const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth;
|
||||
|
||||
if (hasHorizontalScroll && event.deltaY !== 0) {
|
||||
event.preventDefault();
|
||||
scrollContainer.scrollLeft += event.deltaY;
|
||||
}
|
||||
}
|
||||
if (hasHorizontalScroll && event.deltaY !== 0) {
|
||||
event.preventDefault();
|
||||
scrollContainer.scrollLeft += event.deltaY;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card style={cardStyle} class="relative overflow-hidden">
|
||||
<ThemeCard themeName={fallbackTheme} color={fallbackColor} showPattern={false} />
|
||||
<CardHeader class="relative z-10">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<CardTitle>{title}</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
</div>
|
||||
{#if headerAction}
|
||||
<div class="flex-shrink-0">
|
||||
{@render headerAction()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if searchBar}
|
||||
<div class="mt-4">
|
||||
{@render searchBar()}
|
||||
</div>
|
||||
{/if}
|
||||
</CardHeader>
|
||||
<CardContent class="relative z-10">
|
||||
{#if items && items.length > 0}
|
||||
<div
|
||||
bind:this={scrollContainer}
|
||||
onwheel={handleWheel}
|
||||
class="flex overflow-x-auto gap-4 pb-4 -mx-6 px-6"
|
||||
>
|
||||
{#each items as item (item.id)}
|
||||
<div class="flex-shrink-0 w-80" animate:flip={{ duration: 300 }}>
|
||||
{@render children(item)}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<EmptyState
|
||||
message={emptyMessage}
|
||||
description={emptyDescription}
|
||||
actionLabel={emptyActionLabel}
|
||||
actionHref={emptyActionHref}
|
||||
/>
|
||||
{/if}
|
||||
</CardContent>
|
||||
<ThemeCard themeName={fallbackTheme} color={fallbackColor} showPattern={false} />
|
||||
<CardHeader class="relative z-10">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<CardTitle>{title}</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
</div>
|
||||
{#if headerAction}
|
||||
<div class="flex-shrink-0">
|
||||
{@render headerAction()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if searchBar}
|
||||
<div class="mt-4">
|
||||
{@render searchBar()}
|
||||
</div>
|
||||
{/if}
|
||||
</CardHeader>
|
||||
<CardContent class="relative z-10">
|
||||
{#if items && items.length > 0}
|
||||
<div
|
||||
bind:this={scrollContainer}
|
||||
onwheel={handleWheel}
|
||||
class="flex overflow-x-auto gap-4 pb-4 -mx-6 px-6"
|
||||
>
|
||||
{#each items as item (item.id)}
|
||||
<div class="flex-shrink-0 w-80" animate:flip={{ duration: 300 }}>
|
||||
{@render children(item)}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<EmptyState
|
||||
message={emptyMessage}
|
||||
description={emptyDescription}
|
||||
actionLabel={emptyActionLabel}
|
||||
actionHref={emptyActionHref}
|
||||
/>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,166 +1,170 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import WishlistGrid from '$lib/components/dashboard/WishlistGrid.svelte';
|
||||
import WishlistCard from '$lib/components/dashboard/WishlistCard.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { Star } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import SearchBar from '$lib/components/ui/SearchBar.svelte';
|
||||
import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import WishlistGrid from '$lib/components/dashboard/WishlistGrid.svelte';
|
||||
import WishlistCard from '$lib/components/dashboard/WishlistCard.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { Star } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import SearchBar from '$lib/components/ui/SearchBar.svelte';
|
||||
import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type WishlistItem = any; // You can make this more specific based on your types
|
||||
type WishlistItem = any; // You can make this more specific based on your types
|
||||
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
items,
|
||||
emptyMessage,
|
||||
emptyDescription,
|
||||
emptyActionLabel,
|
||||
emptyActionHref,
|
||||
showCreateButton = false,
|
||||
hideIfEmpty = false,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null,
|
||||
actions
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
items: WishlistItem[];
|
||||
emptyMessage: string;
|
||||
emptyDescription?: string;
|
||||
emptyActionLabel?: string;
|
||||
emptyActionHref?: string;
|
||||
showCreateButton?: boolean;
|
||||
hideIfEmpty?: boolean;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
actions: Snippet<[WishlistItem, boolean]>; // item, unlocked
|
||||
} = $props();
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
items,
|
||||
emptyMessage,
|
||||
emptyDescription,
|
||||
emptyActionLabel,
|
||||
emptyActionHref,
|
||||
showCreateButton = false,
|
||||
hideIfEmpty = false,
|
||||
fallbackColor = null,
|
||||
fallbackTheme = null,
|
||||
actions
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
items: WishlistItem[];
|
||||
emptyMessage: string;
|
||||
emptyDescription?: string;
|
||||
emptyActionLabel?: string;
|
||||
emptyActionHref?: string;
|
||||
showCreateButton?: boolean;
|
||||
hideIfEmpty?: boolean;
|
||||
fallbackColor?: string | null;
|
||||
fallbackTheme?: string | null;
|
||||
actions: Snippet<[WishlistItem, boolean]>; // item, unlocked
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
let unlocked = $state(false);
|
||||
let searchQuery = $state('');
|
||||
let unlocked = $state(false);
|
||||
let searchQuery = $state('');
|
||||
|
||||
// Filter items based on search query
|
||||
const filteredItems = $derived(() => {
|
||||
if (!searchQuery.trim()) return items;
|
||||
// Filter items based on search query
|
||||
const filteredItems = $derived(() => {
|
||||
if (!searchQuery.trim()) return items;
|
||||
|
||||
return items.filter(item => {
|
||||
const title = item.title || item.wishlist?.title || '';
|
||||
const description = item.description || item.wishlist?.description || '';
|
||||
const query = searchQuery.toLowerCase();
|
||||
return items.filter((item) => {
|
||||
const title = item.title || item.wishlist?.title || '';
|
||||
const description = item.description || item.wishlist?.description || '';
|
||||
const query = searchQuery.toLowerCase();
|
||||
|
||||
return title.toLowerCase().includes(query) || description.toLowerCase().includes(query);
|
||||
});
|
||||
});
|
||||
return title.toLowerCase().includes(query) || description.toLowerCase().includes(query);
|
||||
});
|
||||
});
|
||||
|
||||
// Sort items by favorite, end date, then created date
|
||||
const sortedItems = $derived(() => {
|
||||
return [...filteredItems()].sort((a, b) => {
|
||||
// Handle both direct wishlists and saved wishlists
|
||||
const aItem = a.wishlist || a;
|
||||
const bItem = b.wishlist || b;
|
||||
// Sort items by favorite, end date, then created date
|
||||
const sortedItems = $derived(() => {
|
||||
return [...filteredItems()].sort((a, b) => {
|
||||
// Handle both direct wishlists and saved wishlists
|
||||
const aItem = a.wishlist || a;
|
||||
const bItem = b.wishlist || b;
|
||||
|
||||
// Sort by favorite first
|
||||
if (a.isFavorite && !b.isFavorite) return -1;
|
||||
if (!a.isFavorite && b.isFavorite) return 1;
|
||||
// Sort by favorite first
|
||||
if (a.isFavorite && !b.isFavorite) return -1;
|
||||
if (!a.isFavorite && b.isFavorite) return 1;
|
||||
|
||||
// Then by end date
|
||||
const aHasEndDate = !!aItem.endDate;
|
||||
const bHasEndDate = !!bItem.endDate;
|
||||
// Then by end date
|
||||
const aHasEndDate = !!aItem.endDate;
|
||||
const bHasEndDate = !!bItem.endDate;
|
||||
|
||||
if (aHasEndDate && !bHasEndDate) return -1;
|
||||
if (!aHasEndDate && bHasEndDate) return 1;
|
||||
if (aHasEndDate && !bHasEndDate) return -1;
|
||||
if (!aHasEndDate && bHasEndDate) return 1;
|
||||
|
||||
if (aHasEndDate && bHasEndDate) {
|
||||
return new Date(aItem.endDate!).getTime() - new Date(bItem.endDate!).getTime();
|
||||
}
|
||||
if (aHasEndDate && bHasEndDate) {
|
||||
return new Date(aItem.endDate!).getTime() - new Date(bItem.endDate!).getTime();
|
||||
}
|
||||
|
||||
// Finally by created date (most recent first)
|
||||
const aCreatedAt = a.createdAt || aItem.createdAt;
|
||||
const bCreatedAt = b.createdAt || bItem.createdAt;
|
||||
return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
|
||||
});
|
||||
});
|
||||
// Finally by created date (most recent first)
|
||||
const aCreatedAt = a.createdAt || aItem.createdAt;
|
||||
const bCreatedAt = b.createdAt || bItem.createdAt;
|
||||
return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
|
||||
});
|
||||
});
|
||||
|
||||
function formatEndDate(date: Date | string | null): string | null {
|
||||
if (!date) return null;
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString(languageStore.t.date.format.short, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
function formatEndDate(date: Date | string | null): string | null {
|
||||
if (!date) return null;
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString(languageStore.t.date.format.short, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function getWishlistDescription(item: any): string | null {
|
||||
const wishlist = item.wishlist || item;
|
||||
if (!wishlist) return null;
|
||||
function getWishlistDescription(item: any): string | null {
|
||||
const wishlist = item.wishlist || item;
|
||||
if (!wishlist) return null;
|
||||
|
||||
const lines: string[] = [];
|
||||
const lines: string[] = [];
|
||||
|
||||
const topItems = wishlist.items?.slice(0, 3).map((i: any) => i.title) || [];
|
||||
if (topItems.length > 0) {
|
||||
lines.push(topItems.join(', '));
|
||||
}
|
||||
const topItems = wishlist.items?.slice(0, 3).map((i: any) => i.title) || [];
|
||||
if (topItems.length > 0) {
|
||||
lines.push(topItems.join(', '));
|
||||
}
|
||||
|
||||
if (wishlist.user?.name || wishlist.user?.username) {
|
||||
const ownerName = wishlist.user.name || wishlist.user.username;
|
||||
lines.push(`${t.dashboard.by} ${ownerName}`);
|
||||
}
|
||||
if (wishlist.user?.name || wishlist.user?.username) {
|
||||
const ownerName = wishlist.user.name || wishlist.user.username;
|
||||
lines.push(`${t.dashboard.by} ${ownerName}`);
|
||||
}
|
||||
|
||||
if (wishlist.endDate) {
|
||||
lines.push(`${t.dashboard.ends}: ${formatEndDate(wishlist.endDate)}`);
|
||||
}
|
||||
if (wishlist.endDate) {
|
||||
lines.push(`${t.dashboard.ends}: ${formatEndDate(wishlist.endDate)}`);
|
||||
}
|
||||
|
||||
return lines.length > 0 ? lines.join('\n') : null;
|
||||
}
|
||||
return lines.length > 0 ? lines.join('\n') : null;
|
||||
}
|
||||
|
||||
// Hide entire section if hideIfEmpty is true and there are no items
|
||||
const shouldShow = $derived(() => {
|
||||
return !hideIfEmpty || items.length > 0;
|
||||
});
|
||||
// Hide entire section if hideIfEmpty is true and there are no items
|
||||
const shouldShow = $derived(() => {
|
||||
return !hideIfEmpty || items.length > 0;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if shouldShow()}
|
||||
<WishlistGrid
|
||||
{title}
|
||||
{description}
|
||||
items={sortedItems() || []}
|
||||
{emptyMessage}
|
||||
{emptyDescription}
|
||||
{emptyActionLabel}
|
||||
{emptyActionHref}
|
||||
{fallbackColor}
|
||||
{fallbackTheme}
|
||||
>
|
||||
{#snippet headerAction()}
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
{#if showCreateButton}
|
||||
<Button onclick={() => (window.location.href = '/')}>{t.dashboard.createNew}</Button>
|
||||
{/if}
|
||||
<UnlockButton bind:unlocked />
|
||||
</div>
|
||||
{/snippet}
|
||||
<WishlistGrid
|
||||
{title}
|
||||
{description}
|
||||
items={sortedItems() || []}
|
||||
{emptyMessage}
|
||||
{emptyDescription}
|
||||
{emptyActionLabel}
|
||||
{emptyActionHref}
|
||||
{fallbackColor}
|
||||
{fallbackTheme}
|
||||
>
|
||||
{#snippet headerAction()}
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
{#if showCreateButton}
|
||||
<Button onclick={() => (window.location.href = '/')}>{t.dashboard.createNew}</Button>
|
||||
{/if}
|
||||
<UnlockButton bind:unlocked />
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet searchBar()}
|
||||
{#if items.length > 0}
|
||||
<SearchBar bind:value={searchQuery} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
{#snippet searchBar()}
|
||||
{#if items.length > 0}
|
||||
<SearchBar bind:value={searchQuery} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(item)}
|
||||
{@const wishlist = item.wishlist || item}
|
||||
<WishlistCard
|
||||
title={wishlist.title}
|
||||
description={getWishlistDescription(item)}
|
||||
itemCount={wishlist.items?.length || 0}
|
||||
color={wishlist.color}
|
||||
theme={wishlist.theme}
|
||||
fallbackColor={fallbackColor}
|
||||
fallbackTheme={fallbackTheme}
|
||||
>
|
||||
{@render actions(item, unlocked)}
|
||||
</WishlistCard>
|
||||
{/snippet}
|
||||
</WishlistGrid>
|
||||
{#snippet children(item)}
|
||||
{@const wishlist = item.wishlist || item}
|
||||
<WishlistCard
|
||||
title={wishlist.title}
|
||||
description={getWishlistDescription(item)}
|
||||
itemCount={wishlist.items?.length || 0}
|
||||
color={wishlist.color}
|
||||
theme={wishlist.theme}
|
||||
{fallbackColor}
|
||||
{fallbackTheme}
|
||||
>
|
||||
{@render actions(item, unlocked)}
|
||||
</WishlistCard>
|
||||
{/snippet}
|
||||
</WishlistGrid>
|
||||
{/if}
|
||||
|
||||
@@ -1,92 +1,100 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { ThemeToggle } from '$lib/components/ui/theme-toggle';
|
||||
import { LanguageToggle } from '$lib/components/ui/language-toggle';
|
||||
import ThemePicker from '$lib/components/ui/theme-picker.svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import { signOut } from '@auth/sveltekit/client';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { ThemeToggle } from '$lib/components/ui/theme-toggle';
|
||||
import { LanguageToggle } from '$lib/components/ui/language-toggle';
|
||||
import ThemePicker from '$lib/components/ui/theme-picker.svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import { signOut } from '@auth/sveltekit/client';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let {
|
||||
userName,
|
||||
userEmail,
|
||||
dashboardTheme = 'none',
|
||||
dashboardColor = null,
|
||||
isAuthenticated = false,
|
||||
onThemeUpdate,
|
||||
onColorUpdate
|
||||
}: {
|
||||
userName?: string | null;
|
||||
userEmail?: string | null;
|
||||
dashboardTheme?: string;
|
||||
dashboardColor?: string | null;
|
||||
isAuthenticated?: boolean;
|
||||
onThemeUpdate?: (theme: string | null) => void;
|
||||
onColorUpdate?: (color: string | null) => void;
|
||||
} = $props();
|
||||
let {
|
||||
userName,
|
||||
userEmail,
|
||||
dashboardTheme = 'none',
|
||||
dashboardColor = null,
|
||||
isAuthenticated = false,
|
||||
onThemeUpdate,
|
||||
onColorUpdate
|
||||
}: {
|
||||
userName?: string | null;
|
||||
userEmail?: string | null;
|
||||
dashboardTheme?: string;
|
||||
dashboardColor?: string | null;
|
||||
isAuthenticated?: boolean;
|
||||
onThemeUpdate?: (theme: string | null) => void;
|
||||
onColorUpdate?: (color: string | null) => void;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
async function handleThemeChange(theme: string) {
|
||||
if (onThemeUpdate) {
|
||||
onThemeUpdate(theme);
|
||||
}
|
||||
async function handleThemeChange(theme: string) {
|
||||
if (onThemeUpdate) {
|
||||
onThemeUpdate(theme);
|
||||
}
|
||||
|
||||
if (isAuthenticated) {
|
||||
const formData = new FormData();
|
||||
formData.append('theme', theme);
|
||||
if (isAuthenticated) {
|
||||
const formData = new FormData();
|
||||
formData.append('theme', theme);
|
||||
|
||||
await fetch('?/updateDashboardTheme', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
}
|
||||
}
|
||||
await fetch('?/updateDashboardTheme', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let localColor = $state(dashboardColor);
|
||||
let localColor = $state(dashboardColor);
|
||||
|
||||
$effect(() => {
|
||||
localColor = dashboardColor;
|
||||
});
|
||||
$effect(() => {
|
||||
localColor = dashboardColor;
|
||||
});
|
||||
|
||||
async function handleColorChange() {
|
||||
if (onColorUpdate) {
|
||||
onColorUpdate(localColor);
|
||||
}
|
||||
async function handleColorChange() {
|
||||
if (onColorUpdate) {
|
||||
onColorUpdate(localColor);
|
||||
}
|
||||
|
||||
if (isAuthenticated) {
|
||||
const formData = new FormData();
|
||||
if (localColor) {
|
||||
formData.append('color', localColor);
|
||||
}
|
||||
if (isAuthenticated) {
|
||||
const formData = new FormData();
|
||||
if (localColor) {
|
||||
formData.append('color', localColor);
|
||||
}
|
||||
|
||||
await fetch('?/updateDashboardColor', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
}
|
||||
}
|
||||
await fetch('?/updateDashboardColor', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-3xl font-bold">{t.nav.dashboard}</h1>
|
||||
{#if isAuthenticated}
|
||||
<p class="text-muted-foreground truncate">{t.dashboard.welcomeBack}, {userName || userEmail}</p>
|
||||
{:else}
|
||||
<p class="text-muted-foreground">{t.dashboard.anonymousDashboard || "Your local wishlists"}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
|
||||
<ColorPicker bind:color={localColor} onchange={handleColorChange} size="sm" />
|
||||
<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} color={localColor} />
|
||||
<LanguageToggle color={localColor} />
|
||||
<ThemeToggle />
|
||||
{#if isAuthenticated}
|
||||
<Button variant="outline" onclick={() => signOut({ callbackUrl: '/' })}>{t.auth.signOut}</Button>
|
||||
{:else}
|
||||
<Button variant="outline" onclick={() => (window.location.href = '/signin')}>{t.auth.signIn}</Button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-3xl font-bold">{t.nav.dashboard}</h1>
|
||||
{#if isAuthenticated}
|
||||
<p class="text-muted-foreground truncate">
|
||||
{t.dashboard.welcomeBack}, {userName || userEmail}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="text-muted-foreground">
|
||||
{t.dashboard.anonymousDashboard || 'Your local wishlists'}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
|
||||
<ColorPicker bind:color={localColor} onchange={handleColorChange} size="sm" />
|
||||
<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} color={localColor} />
|
||||
<LanguageToggle color={localColor} />
|
||||
<ThemeToggle />
|
||||
{#if isAuthenticated}
|
||||
<Button variant="outline" onclick={() => signOut({ callbackUrl: '/' })}
|
||||
>{t.auth.signOut}</Button
|
||||
>
|
||||
{:else}
|
||||
<Button variant="outline" onclick={() => (window.location.href = '/signin')}
|
||||
>{t.auth.signIn}</Button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
let {
|
||||
message,
|
||||
description,
|
||||
actionLabel,
|
||||
actionHref,
|
||||
onclick,
|
||||
children
|
||||
}: {
|
||||
message: string;
|
||||
description?: string;
|
||||
actionLabel?: string;
|
||||
actionHref?: string;
|
||||
onclick?: () => void;
|
||||
children?: Snippet;
|
||||
} = $props();
|
||||
let {
|
||||
message,
|
||||
description,
|
||||
actionLabel,
|
||||
actionHref,
|
||||
onclick,
|
||||
children
|
||||
}: {
|
||||
message: string;
|
||||
description?: string;
|
||||
actionLabel?: string;
|
||||
actionHref?: string;
|
||||
onclick?: () => void;
|
||||
children?: Snippet;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="text-center py-8 text-muted-foreground">
|
||||
<p class="text-base">{message}</p>
|
||||
{#if description}
|
||||
<p class="text-sm mt-2">{description}</p>
|
||||
{/if}
|
||||
{#if children}
|
||||
<div class="mt-4">
|
||||
{@render children()}
|
||||
</div>
|
||||
{:else if actionLabel}
|
||||
<Button
|
||||
class="mt-4"
|
||||
onclick={() => {
|
||||
if (onclick) {
|
||||
onclick();
|
||||
} else if (actionHref) {
|
||||
window.location.href = actionHref;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{actionLabel}
|
||||
</Button>
|
||||
{/if}
|
||||
<p class="text-base">{message}</p>
|
||||
{#if description}
|
||||
<p class="text-sm mt-2">{description}</p>
|
||||
{/if}
|
||||
{#if children}
|
||||
<div class="mt-4">
|
||||
{@render children()}
|
||||
</div>
|
||||
{:else if actionLabel}
|
||||
<Button
|
||||
class="mt-4"
|
||||
onclick={() => {
|
||||
if (onclick) {
|
||||
onclick();
|
||||
} else if (actionHref) {
|
||||
window.location.href = actionHref;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{actionLabel}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,36 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { ThemeToggle } from '$lib/components/ui/theme-toggle';
|
||||
import { LanguageToggle } from '$lib/components/ui/language-toggle';
|
||||
import { LayoutDashboard } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { ThemeToggle } from '$lib/components/ui/theme-toggle';
|
||||
import { LanguageToggle } from '$lib/components/ui/language-toggle';
|
||||
import { LayoutDashboard } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
|
||||
let {
|
||||
isAuthenticated = false,
|
||||
showDashboardLink = false,
|
||||
color = null
|
||||
}: {
|
||||
isAuthenticated?: boolean;
|
||||
showDashboardLink?: boolean;
|
||||
color?: string | null;
|
||||
} = $props();
|
||||
let {
|
||||
isAuthenticated = false,
|
||||
showDashboardLink = false,
|
||||
color = null
|
||||
}: {
|
||||
isAuthenticated?: boolean;
|
||||
showDashboardLink?: boolean;
|
||||
color?: string | null;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
</script>
|
||||
|
||||
<nav class="flex items-center gap-1 sm:gap-2 mb-6 w-full">
|
||||
{#if isAuthenticated}
|
||||
<Button variant="outline" size="sm" onclick={() => (window.location.href = '/dashboard')} class="px-2 sm:px-3">
|
||||
<LayoutDashboard class="w-4 h-4" />
|
||||
<span class="hidden sm:inline sm:ml-2">{t.nav.dashboard}</span>
|
||||
</Button>
|
||||
{:else}
|
||||
<Button variant="outline" size="sm" onclick={() => (window.location.href = '/signin')} class="px-2 sm:px-3">
|
||||
{t.auth.signIn}
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="ml-auto flex items-center gap-1 sm:gap-2">
|
||||
<LanguageToggle {color} />
|
||||
<ThemeToggle size="sm" {color} />
|
||||
</div>
|
||||
{#if isAuthenticated}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = '/dashboard')}
|
||||
class="px-2 sm:px-3"
|
||||
>
|
||||
<LayoutDashboard class="w-4 h-4" />
|
||||
<span class="hidden sm:inline sm:ml-2">{t.nav.dashboard}</span>
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (window.location.href = '/signin')}
|
||||
class="px-2 sm:px-3"
|
||||
>
|
||||
{t.auth.signIn}
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="ml-auto flex items-center gap-1 sm:gap-2">
|
||||
<LanguageToggle {color} />
|
||||
<ThemeToggle size="sm" {color} />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
|
||||
import { hexToRgba } from '$lib/utils/colors';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
|
||||
import { hexToRgba } from '$lib/utils/colors';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
|
||||
let {
|
||||
children,
|
||||
maxWidth = '6xl',
|
||||
theme = null,
|
||||
themeColor = null
|
||||
}: {
|
||||
children: Snippet;
|
||||
maxWidth?: string;
|
||||
theme?: string | null;
|
||||
themeColor?: string | null;
|
||||
} = $props();
|
||||
let {
|
||||
children,
|
||||
maxWidth = '6xl',
|
||||
theme = null,
|
||||
themeColor = null
|
||||
}: {
|
||||
children: Snippet;
|
||||
maxWidth?: string;
|
||||
theme?: string | null;
|
||||
themeColor?: string | null;
|
||||
} = $props();
|
||||
|
||||
const backgroundStyle = $derived.by(() => {
|
||||
if (!themeColor) return '';
|
||||
const backgroundStyle = $derived.by(() => {
|
||||
if (!themeColor) return '';
|
||||
|
||||
const isDark = themeStore.getResolvedTheme() === 'dark';
|
||||
const tintedColor = hexToRgba(themeColor, 0.15);
|
||||
const isDark = themeStore.getResolvedTheme() === 'dark';
|
||||
const tintedColor = hexToRgba(themeColor, 0.15);
|
||||
|
||||
return isDark
|
||||
? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
|
||||
: `background-color: ${tintedColor};`;
|
||||
});
|
||||
return isDark
|
||||
? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
|
||||
: `background-color: ${tintedColor};`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen p-4 md:p-8 relative overflow-hidden" style={backgroundStyle}>
|
||||
<ThemeBackground themeName={theme} color={themeColor} />
|
||||
<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
|
||||
{@render children()}
|
||||
</div>
|
||||
<ThemeBackground themeName={theme} color={themeColor} />
|
||||
<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
<script lang="ts">
|
||||
import TopPattern from './svgs/TopPattern.svelte';
|
||||
import BottomPattern from './svgs/BottomPattern.svelte';
|
||||
import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
import TopPattern from './svgs/TopPattern.svelte';
|
||||
import BottomPattern from './svgs/BottomPattern.svelte';
|
||||
import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
|
||||
let {
|
||||
themeName,
|
||||
showTop = true,
|
||||
showBottom = true,
|
||||
color
|
||||
}: {
|
||||
themeName?: string | null;
|
||||
showTop?: boolean;
|
||||
showBottom?: boolean;
|
||||
color?: string;
|
||||
} = $props();
|
||||
let {
|
||||
themeName,
|
||||
showTop = true,
|
||||
showBottom = true,
|
||||
color
|
||||
}: {
|
||||
themeName?: string | null;
|
||||
showTop?: boolean;
|
||||
showBottom?: boolean;
|
||||
color?: string;
|
||||
} = $props();
|
||||
|
||||
const theme = $derived(getTheme(themeName));
|
||||
const patternColor = $derived.by(() => {
|
||||
const isDark = themeStore.getResolvedTheme() === 'dark';
|
||||
return isDark ? '#FFFFFF' : '#000000';
|
||||
});
|
||||
const theme = $derived(getTheme(themeName));
|
||||
const patternColor = $derived.by(() => {
|
||||
const isDark = themeStore.getResolvedTheme() === 'dark';
|
||||
return isDark ? '#FFFFFF' : '#000000';
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if theme.pattern !== 'none'}
|
||||
{#if showTop}
|
||||
<TopPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
|
||||
{/if}
|
||||
{#if showBottom}
|
||||
<BottomPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
|
||||
{/if}
|
||||
{#if showTop}
|
||||
<TopPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
|
||||
{/if}
|
||||
{#if showBottom}
|
||||
<BottomPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<script lang="ts">
|
||||
import CardPattern from './svgs/CardPattern.svelte';
|
||||
import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
import CardPattern from './svgs/CardPattern.svelte';
|
||||
import { getTheme, PATTERN_OPACITY } from '$lib/utils/themes';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
|
||||
let {
|
||||
themeName,
|
||||
color,
|
||||
showPattern = true
|
||||
}: {
|
||||
themeName?: string | null;
|
||||
color?: string | null;
|
||||
showPattern?: boolean;
|
||||
} = $props();
|
||||
let {
|
||||
themeName,
|
||||
color,
|
||||
showPattern = true
|
||||
}: {
|
||||
themeName?: string | null;
|
||||
color?: string | null;
|
||||
showPattern?: boolean;
|
||||
} = $props();
|
||||
|
||||
const theme = $derived(getTheme(themeName));
|
||||
const patternColor = $derived.by(() => {
|
||||
const isDark = themeStore.getResolvedTheme() === 'dark';
|
||||
return isDark ? '#FFFFFF' : '#000000';
|
||||
});
|
||||
const theme = $derived(getTheme(themeName));
|
||||
const patternColor = $derived.by(() => {
|
||||
const isDark = themeStore.getResolvedTheme() === 'dark';
|
||||
return isDark ? '#FFFFFF' : '#000000';
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if showPattern && theme.pattern !== 'none'}
|
||||
<CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
|
||||
<CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
|
||||
{/if}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { asset } from '$app/paths';
|
||||
import { asset } from '$app/paths';
|
||||
|
||||
let {
|
||||
pattern = 'none',
|
||||
color = '#000000',
|
||||
opacity = 0.1
|
||||
}: {
|
||||
pattern?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
} = $props();
|
||||
let {
|
||||
pattern = 'none',
|
||||
color = '#000000',
|
||||
opacity = 0.1
|
||||
}: {
|
||||
pattern?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
} = $props();
|
||||
|
||||
const patternPath = $derived(asset(`/themes/${pattern}/bgbottom.svg`));
|
||||
const patternPath = $derived(asset(`/themes/${pattern}/bgbottom.svg`));
|
||||
</script>
|
||||
|
||||
{#if pattern !== 'none'}
|
||||
<div
|
||||
class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
|
||||
style="
|
||||
<div
|
||||
class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
|
||||
style="
|
||||
mask-image: url({patternPath});
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
@@ -26,5 +26,5 @@
|
||||
opacity: {opacity};
|
||||
height: 100vh;
|
||||
"
|
||||
/>
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { asset } from '$app/paths';
|
||||
import { asset } from '$app/paths';
|
||||
|
||||
let {
|
||||
pattern = 'none',
|
||||
color = '#000000',
|
||||
opacity = 0.1
|
||||
}: {
|
||||
pattern?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
} = $props();
|
||||
let {
|
||||
pattern = 'none',
|
||||
color = '#000000',
|
||||
opacity = 0.1
|
||||
}: {
|
||||
pattern?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
} = $props();
|
||||
|
||||
const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
|
||||
const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
|
||||
</script>
|
||||
|
||||
{#if pattern !== 'none'}
|
||||
<div
|
||||
class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
|
||||
style="
|
||||
<div
|
||||
class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
|
||||
style="
|
||||
mask-image: url({patternPath});
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
@@ -26,5 +26,5 @@
|
||||
opacity: {opacity};
|
||||
width: 100%;
|
||||
"
|
||||
/>
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { asset } from '$app/paths';
|
||||
import { asset } from '$app/paths';
|
||||
|
||||
let {
|
||||
pattern = 'none',
|
||||
color = '#000000',
|
||||
opacity = 0.1
|
||||
}: {
|
||||
pattern?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
} = $props();
|
||||
let {
|
||||
pattern = 'none',
|
||||
color = '#000000',
|
||||
opacity = 0.1
|
||||
}: {
|
||||
pattern?: string;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
} = $props();
|
||||
|
||||
const patternPath = $derived(asset(`/themes/${pattern}/bgtop.svg`));
|
||||
const patternPath = $derived(asset(`/themes/${pattern}/bgtop.svg`));
|
||||
</script>
|
||||
|
||||
{#if pattern !== 'none'}
|
||||
<div
|
||||
class="fixed top-0 right-0 left-0 pointer-events-none z-0"
|
||||
style="
|
||||
<div
|
||||
class="fixed top-0 right-0 left-0 pointer-events-none z-0"
|
||||
style="
|
||||
mask-image: url({patternPath});
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
@@ -26,5 +26,5 @@
|
||||
opacity: {opacity};
|
||||
height: 100vh;
|
||||
"
|
||||
/>
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,65 +1,62 @@
|
||||
<script lang="ts">
|
||||
import { X, Pencil } from '@lucide/svelte';
|
||||
import IconButton from './IconButton.svelte';
|
||||
import { X, Pencil } from '@lucide/svelte';
|
||||
import IconButton from './IconButton.svelte';
|
||||
|
||||
let {
|
||||
color = $bindable(null),
|
||||
size = 'md',
|
||||
onchange
|
||||
}: {
|
||||
color: string | null;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
onchange?: () => void;
|
||||
} = $props();
|
||||
let {
|
||||
color = $bindable(null),
|
||||
size = 'md',
|
||||
onchange
|
||||
}: {
|
||||
color: string | null;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
onchange?: () => void;
|
||||
} = $props();
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'w-8 h-8',
|
||||
md: 'w-10 h-10',
|
||||
lg: 'w-12 h-12'
|
||||
};
|
||||
const sizeClasses = {
|
||||
sm: 'w-8 h-8',
|
||||
md: 'w-10 h-10',
|
||||
lg: 'w-12 h-12'
|
||||
};
|
||||
|
||||
const iconSizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-4 h-4',
|
||||
lg: 'w-5 h-5'
|
||||
};
|
||||
const iconSizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-4 h-4',
|
||||
lg: 'w-5 h-5'
|
||||
};
|
||||
|
||||
const buttonSize = sizeClasses[size];
|
||||
const iconSize = iconSizeClasses[size];
|
||||
const buttonSize = sizeClasses[size];
|
||||
const iconSize = iconSizeClasses[size];
|
||||
|
||||
function handleColorChange(e: Event) {
|
||||
color = (e.target as HTMLInputElement).value;
|
||||
onchange?.();
|
||||
}
|
||||
function handleColorChange(e: Event) {
|
||||
color = (e.target as HTMLInputElement).value;
|
||||
onchange?.();
|
||||
}
|
||||
|
||||
function clearColor() {
|
||||
color = null;
|
||||
onchange?.();
|
||||
}
|
||||
function clearColor() {
|
||||
color = null;
|
||||
onchange?.();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
{#if color}
|
||||
<IconButton
|
||||
onclick={clearColor}
|
||||
{color}
|
||||
{size}
|
||||
aria-label="Clear color"
|
||||
rounded="md"
|
||||
>
|
||||
<X class={iconSize} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
<label
|
||||
class="{buttonSize} flex items-center justify-center rounded-md border border-input hover:opacity-90 transition-opacity cursor-pointer relative overflow-hidden"
|
||||
style={color ? `background-color: ${color};` : ''}
|
||||
>
|
||||
<Pencil class="{iconSize} relative z-10 pointer-events-none" style={color ? 'color: white; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));' : ''} />
|
||||
<input
|
||||
type="color"
|
||||
value={color || '#ffffff'}
|
||||
oninput={handleColorChange}
|
||||
class="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
</label>
|
||||
{#if color}
|
||||
<IconButton onclick={clearColor} {color} {size} aria-label="Clear color" rounded="md">
|
||||
<X class={iconSize} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
<label
|
||||
class="{buttonSize} flex items-center justify-center rounded-md border border-input hover:opacity-90 transition-opacity cursor-pointer relative overflow-hidden"
|
||||
style={color ? `background-color: ${color};` : ''}
|
||||
>
|
||||
<Pencil
|
||||
class="{iconSize} relative z-10 pointer-events-none"
|
||||
style={color ? 'color: white; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));' : ''}
|
||||
/>
|
||||
<input
|
||||
type="color"
|
||||
value={color || '#ffffff'}
|
||||
oninput={handleColorChange}
|
||||
class="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -1,133 +1,133 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { scale } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import type { Snippet } from 'svelte';
|
||||
import IconButton from './IconButton.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { scale } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import type { Snippet } from 'svelte';
|
||||
import IconButton from './IconButton.svelte';
|
||||
|
||||
let {
|
||||
items,
|
||||
selectedValue,
|
||||
onSelect,
|
||||
color,
|
||||
showCheckmark = true,
|
||||
icon,
|
||||
ariaLabel
|
||||
}: {
|
||||
items: Array<{ value: string; label: string }>;
|
||||
selectedValue: string;
|
||||
onSelect: (value: string) => void;
|
||||
color?: string | null;
|
||||
showCheckmark?: boolean;
|
||||
icon: Snippet;
|
||||
ariaLabel: string;
|
||||
} = $props();
|
||||
let {
|
||||
items,
|
||||
selectedValue,
|
||||
onSelect,
|
||||
color,
|
||||
showCheckmark = true,
|
||||
icon,
|
||||
ariaLabel
|
||||
}: {
|
||||
items: Array<{ value: string; label: string }>;
|
||||
selectedValue: string;
|
||||
onSelect: (value: string) => void;
|
||||
color?: string | null;
|
||||
showCheckmark?: boolean;
|
||||
icon: Snippet;
|
||||
ariaLabel: string;
|
||||
} = $props();
|
||||
|
||||
let showMenu = $state(false);
|
||||
let showMenu = $state(false);
|
||||
|
||||
const menuClasses = $derived(
|
||||
color
|
||||
? 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md'
|
||||
: 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/90'
|
||||
);
|
||||
const menuClasses = $derived(
|
||||
color
|
||||
? 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md'
|
||||
: 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/90'
|
||||
);
|
||||
|
||||
const menuStyle = $derived(
|
||||
color
|
||||
? `border-color: ${color}; background-color: ${color}20; backdrop-filter: blur(12px);`
|
||||
: ''
|
||||
);
|
||||
const menuStyle = $derived(
|
||||
color
|
||||
? `border-color: ${color}; background-color: ${color}20; backdrop-filter: blur(12px);`
|
||||
: ''
|
||||
);
|
||||
|
||||
function getItemStyle(itemValue: string): string {
|
||||
if (!color) return '';
|
||||
return selectedValue === itemValue ? `background-color: ${color}20;` : '';
|
||||
}
|
||||
function getItemStyle(itemValue: string): string {
|
||||
if (!color) return '';
|
||||
return selectedValue === itemValue ? `background-color: ${color}20;` : '';
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
showMenu = !showMenu;
|
||||
}
|
||||
function toggleMenu() {
|
||||
showMenu = !showMenu;
|
||||
}
|
||||
|
||||
function handleSelect(value: string) {
|
||||
onSelect(value);
|
||||
showMenu = false;
|
||||
}
|
||||
function handleSelect(value: string) {
|
||||
onSelect(value);
|
||||
showMenu = false;
|
||||
}
|
||||
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest('.dropdown-menu')) {
|
||||
showMenu = false;
|
||||
}
|
||||
}
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest('.dropdown-menu')) {
|
||||
showMenu = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseEnter(e: MouseEvent) {
|
||||
if (color) {
|
||||
(e.currentTarget as HTMLElement).style.backgroundColor = `${color}15`;
|
||||
}
|
||||
}
|
||||
function handleMouseEnter(e: MouseEvent) {
|
||||
if (color) {
|
||||
(e.currentTarget as HTMLElement).style.backgroundColor = `${color}15`;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseLeave(e: MouseEvent, itemValue: string) {
|
||||
if (color) {
|
||||
(e.currentTarget as HTMLElement).style.backgroundColor =
|
||||
selectedValue === itemValue ? `${color}20` : 'transparent';
|
||||
}
|
||||
}
|
||||
function handleMouseLeave(e: MouseEvent, itemValue: string) {
|
||||
if (color) {
|
||||
(e.currentTarget as HTMLElement).style.backgroundColor =
|
||||
selectedValue === itemValue ? `${color}20` : 'transparent';
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (showMenu) {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}
|
||||
});
|
||||
$effect(() => {
|
||||
if (showMenu) {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="relative dropdown-menu">
|
||||
<IconButton
|
||||
size="sm"
|
||||
rounded="md"
|
||||
onclick={toggleMenu}
|
||||
aria-label={ariaLabel}
|
||||
class={color ? 'hover-themed' : ''}
|
||||
style={color ? `--hover-bg: ${color}20;` : ''}
|
||||
>
|
||||
{@render icon()}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="sm"
|
||||
rounded="md"
|
||||
onclick={toggleMenu}
|
||||
aria-label={ariaLabel}
|
||||
class={color ? 'hover-themed' : ''}
|
||||
style={color ? `--hover-bg: ${color}20;` : ''}
|
||||
>
|
||||
{@render icon()}
|
||||
</IconButton>
|
||||
|
||||
{#if showMenu}
|
||||
<div
|
||||
class={menuClasses}
|
||||
style={menuStyle}
|
||||
transition:scale={{ duration: 150, start: 0.95, opacity: 0, easing: cubicOut }}
|
||||
>
|
||||
<div class="py-1">
|
||||
{#each items as item}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-2 text-sm transition-colors"
|
||||
class:hover:bg-slate-100={!color}
|
||||
class:dark:hover:bg-slate-900={!color}
|
||||
class:font-bold={selectedValue === item.value}
|
||||
class:bg-slate-100={selectedValue === item.value && !color}
|
||||
class:dark:bg-slate-900={selectedValue === item.value && !color}
|
||||
class:flex={showCheckmark}
|
||||
class:items-center={showCheckmark}
|
||||
class:justify-between={showCheckmark}
|
||||
style={getItemStyle(item.value)}
|
||||
onmouseenter={handleMouseEnter}
|
||||
onmouseleave={(e) => handleMouseLeave(e, item.value)}
|
||||
onclick={() => handleSelect(item.value)}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
{#if showCheckmark && selectedValue === item.value}
|
||||
<span class="ml-2">✓</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if showMenu}
|
||||
<div
|
||||
class={menuClasses}
|
||||
style={menuStyle}
|
||||
transition:scale={{ duration: 150, start: 0.95, opacity: 0, easing: cubicOut }}
|
||||
>
|
||||
<div class="py-1">
|
||||
{#each items as item}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-2 text-sm transition-colors"
|
||||
class:hover:bg-slate-100={!color}
|
||||
class:dark:hover:bg-slate-900={!color}
|
||||
class:font-bold={selectedValue === item.value}
|
||||
class:bg-slate-100={selectedValue === item.value && !color}
|
||||
class:dark:bg-slate-900={selectedValue === item.value && !color}
|
||||
class:flex={showCheckmark}
|
||||
class:items-center={showCheckmark}
|
||||
class:justify-between={showCheckmark}
|
||||
style={getItemStyle(item.value)}
|
||||
onmouseenter={handleMouseEnter}
|
||||
onmouseleave={(e) => handleMouseLeave(e, item.value)}
|
||||
onclick={() => handleSelect(item.value)}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
{#if showCheckmark && selectedValue === item.value}
|
||||
<span class="ml-2">✓</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.hover-themed:hover) {
|
||||
background-color: var(--hover-bg) !important;
|
||||
}
|
||||
:global(.hover-themed:hover) {
|
||||
background-color: var(--hover-bg) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,52 +1,53 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
interface Props extends HTMLButtonAttributes {
|
||||
color?: string | null;
|
||||
rounded?: 'full' | 'md' | 'lg';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
children: Snippet;
|
||||
}
|
||||
interface Props extends HTMLButtonAttributes {
|
||||
color?: string | null;
|
||||
rounded?: 'full' | 'md' | 'lg';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
color = null,
|
||||
rounded = 'full',
|
||||
size = 'md',
|
||||
class: className = '',
|
||||
children,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
let {
|
||||
color = null,
|
||||
rounded = 'full',
|
||||
size = 'md',
|
||||
class: className = '',
|
||||
children,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'w-8 h-8',
|
||||
md: 'w-10 h-10',
|
||||
lg: 'w-12 h-12'
|
||||
};
|
||||
const sizeClasses = {
|
||||
sm: 'w-8 h-8',
|
||||
md: 'w-10 h-10',
|
||||
lg: 'w-12 h-12'
|
||||
};
|
||||
|
||||
const roundedClasses = {
|
||||
full: 'rounded-full',
|
||||
md: 'rounded-md',
|
||||
lg: 'rounded-lg'
|
||||
};
|
||||
const roundedClasses = {
|
||||
full: 'rounded-full',
|
||||
md: 'rounded-md',
|
||||
lg: 'rounded-lg'
|
||||
};
|
||||
|
||||
const baseClasses = 'flex items-center justify-center border border-input transition-colors backdrop-blur';
|
||||
const sizeClass = sizeClasses[size];
|
||||
const roundedClass = roundedClasses[rounded];
|
||||
const baseClasses =
|
||||
'flex items-center justify-center border border-input transition-colors backdrop-blur';
|
||||
const sizeClass = sizeClasses[size];
|
||||
const roundedClass = roundedClasses[rounded];
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
|
||||
class:hover:bg-accent={!color}
|
||||
style={color ? `--hover-bg: ${color}20;` : ''}
|
||||
{...restProps}
|
||||
type="button"
|
||||
class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
|
||||
class:hover:bg-accent={!color}
|
||||
style={color ? `--hover-bg: ${color}20;` : ''}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children()}
|
||||
{@render children()}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button[style*='--hover-bg']:hover {
|
||||
background-color: var(--hover-bg);
|
||||
}
|
||||
button[style*='--hover-bg']:hover {
|
||||
background-color: var(--hover-bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
|
||||
let {
|
||||
value = $bindable(''),
|
||||
placeholder = languageStore.t.dashboard.searchPlaceholder
|
||||
}: {
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
} = $props();
|
||||
let {
|
||||
value = $bindable(''),
|
||||
placeholder = languageStore.t.dashboard.searchPlaceholder
|
||||
}: {
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<Input
|
||||
type="search"
|
||||
{placeholder}
|
||||
bind:value
|
||||
/>
|
||||
<Input type="search" {placeholder} bind:value />
|
||||
|
||||
@@ -1,30 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Lock, LockOpen } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Lock, LockOpen } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
|
||||
let {
|
||||
unlocked = $bindable(false)
|
||||
}: {
|
||||
unlocked: boolean;
|
||||
} = $props();
|
||||
let {
|
||||
unlocked = $bindable(false)
|
||||
}: {
|
||||
unlocked: boolean;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
function handleClick() {
|
||||
unlocked = !unlocked;
|
||||
}
|
||||
function handleClick() {
|
||||
unlocked = !unlocked;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Button
|
||||
onclick={handleClick}
|
||||
variant={unlocked ? "default" : "outline"}
|
||||
>
|
||||
{#if unlocked}
|
||||
<Lock class="mr-2 h-4 w-4" />
|
||||
{t.wishlist.lockDeletion}
|
||||
{:else}
|
||||
<LockOpen class="mr-2 h-4 w-4" />
|
||||
{t.wishlist.unlockDeletion}
|
||||
{/if}
|
||||
<Button onclick={handleClick} variant={unlocked ? 'default' : 'outline'}>
|
||||
{#if unlocked}
|
||||
<Lock class="mr-2 h-4 w-4" />
|
||||
{t.wishlist.lockDeletion}
|
||||
{:else}
|
||||
<LockOpen class="mr-2 h-4 w-4" />
|
||||
{t.wishlist.unlockDeletion}
|
||||
{/if}
|
||||
</Button>
|
||||
|
||||
@@ -1,83 +1,81 @@
|
||||
<script lang="ts" module>
|
||||
import { cn, type WithElementRef } from '$lib/utils.js';
|
||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
|
||||
import { type VariantProps, tv } from 'tailwind-variants';
|
||||
import { cn, type WithElementRef } from '$lib/utils.js';
|
||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
|
||||
import { type VariantProps, tv } from 'tailwind-variants';
|
||||
|
||||
export const buttonVariants = tv({
|
||||
base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*="size-"])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
|
||||
outline:
|
||||
'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline'
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
'icon-sm': 'size-8',
|
||||
'icon-lg': 'size-10'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default'
|
||||
}
|
||||
});
|
||||
export const buttonVariants = tv({
|
||||
base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*="size-"])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
|
||||
outline:
|
||||
'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline'
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
'icon-sm': 'size-8',
|
||||
'icon-lg': 'size-10'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default'
|
||||
}
|
||||
});
|
||||
|
||||
export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
|
||||
export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
|
||||
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
|
||||
WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
};
|
||||
export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
|
||||
export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
|
||||
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
|
||||
WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
let {
|
||||
class: className,
|
||||
variant = 'default',
|
||||
size = 'default',
|
||||
ref = $bindable(null),
|
||||
href = undefined,
|
||||
type = 'button',
|
||||
disabled,
|
||||
children,
|
||||
...restProps
|
||||
}: ButtonProps = $props();
|
||||
let {
|
||||
class: className,
|
||||
variant = 'default',
|
||||
size = 'default',
|
||||
ref = $bindable(null),
|
||||
href = undefined,
|
||||
type = 'button',
|
||||
disabled,
|
||||
children,
|
||||
...restProps
|
||||
}: ButtonProps = $props();
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
href={disabled ? undefined : href}
|
||||
aria-disabled={disabled}
|
||||
role={disabled ? 'link' : undefined}
|
||||
tabindex={disabled ? -1 : undefined}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
<a
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
href={disabled ? undefined : href}
|
||||
aria-disabled={disabled}
|
||||
role={disabled ? 'link' : undefined}
|
||||
tabindex={disabled ? -1 : undefined}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{disabled}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
<button
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{disabled}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import Root, {
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
buttonVariants
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
buttonVariants
|
||||
} from './button.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
type ButtonProps as Props,
|
||||
Root as Button,
|
||||
buttonVariants,
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant
|
||||
Root,
|
||||
type ButtonProps as Props,
|
||||
Root as Button,
|
||||
buttonVariants,
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant
|
||||
};
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLAttributes<HTMLDivElement> & {
|
||||
children?: any;
|
||||
};
|
||||
type Props = HTMLAttributes<HTMLDivElement> & {
|
||||
children?: any;
|
||||
};
|
||||
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class={cn('p-6 pt-0', className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLAttributes<HTMLParagraphElement> & {
|
||||
children?: any;
|
||||
};
|
||||
type Props = HTMLAttributes<HTMLParagraphElement> & {
|
||||
children?: any;
|
||||
};
|
||||
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<p class={cn('text-sm text-muted-foreground', className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
{@render children?.()}
|
||||
</p>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLAttributes<HTMLDivElement> & {
|
||||
children?: any;
|
||||
};
|
||||
type Props = HTMLAttributes<HTMLDivElement> & {
|
||||
children?: any;
|
||||
};
|
||||
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLAttributes<HTMLHeadingElement> & {
|
||||
children?: any;
|
||||
};
|
||||
type Props = HTMLAttributes<HTMLHeadingElement> & {
|
||||
children?: any;
|
||||
};
|
||||
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<h3 class={cn('font-semibold leading-none tracking-tight', className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
{@render children?.()}
|
||||
</h3>
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLAttributes<HTMLDivElement> & {
|
||||
children?: any;
|
||||
};
|
||||
type Props = HTMLAttributes<HTMLDivElement> & {
|
||||
children?: any;
|
||||
};
|
||||
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
<div class={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@@ -5,15 +5,15 @@ import Header from './card-header.svelte';
|
||||
import Title from './card-title.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Description,
|
||||
Header,
|
||||
Title,
|
||||
//
|
||||
Root as Card,
|
||||
Content as CardContent,
|
||||
Description as CardDescription,
|
||||
Header as CardHeader,
|
||||
Title as CardTitle
|
||||
Root,
|
||||
Content,
|
||||
Description,
|
||||
Header,
|
||||
Title,
|
||||
//
|
||||
Root as Card,
|
||||
Content as CardContent,
|
||||
Description as CardDescription,
|
||||
Header as CardHeader,
|
||||
Title as CardTitle
|
||||
};
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLInputAttributes & {
|
||||
value?: string | number;
|
||||
};
|
||||
type Props = HTMLInputAttributes & {
|
||||
value?: string | number;
|
||||
};
|
||||
|
||||
let { class: className, type = 'text', value = $bindable(''), ...restProps }: Props = $props();
|
||||
let { class: className, type = 'text', value = $bindable(''), ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<input
|
||||
type={type}
|
||||
class={cn(
|
||||
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
bind:value
|
||||
{...restProps}
|
||||
{type}
|
||||
class={cn(
|
||||
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
bind:value
|
||||
{...restProps}
|
||||
/>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLLabelAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLLabelAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLLabelAttributes & {
|
||||
children?: any;
|
||||
};
|
||||
type Props = HTMLLabelAttributes & {
|
||||
children?: any;
|
||||
};
|
||||
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
let { class: className, children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<label
|
||||
class={cn(
|
||||
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
class={cn(
|
||||
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
{@render children?.()}
|
||||
</label>
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { languages } from '$lib/i18n/translations';
|
||||
import Dropdown from '$lib/components/ui/Dropdown.svelte';
|
||||
import { Languages } from '@lucide/svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { languages } from '$lib/i18n/translations';
|
||||
import Dropdown from '$lib/components/ui/Dropdown.svelte';
|
||||
import { Languages } from '@lucide/svelte';
|
||||
|
||||
let { color }: { color?: string | null } = $props();
|
||||
let { color }: { color?: string | null } = $props();
|
||||
|
||||
const languageItems = $derived(
|
||||
languages.map((lang) => ({
|
||||
value: lang.code,
|
||||
label: lang.name
|
||||
}))
|
||||
);
|
||||
const languageItems = $derived(
|
||||
languages.map((lang) => ({
|
||||
value: lang.code,
|
||||
label: lang.name
|
||||
}))
|
||||
);
|
||||
|
||||
function setLanguage(code: string) {
|
||||
languageStore.setLanguage(code as 'en' | 'da');
|
||||
}
|
||||
function setLanguage(code: string) {
|
||||
languageStore.setLanguage(code as 'en' | 'da');
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
items={languageItems}
|
||||
selectedValue={languageStore.current}
|
||||
onSelect={setLanguage}
|
||||
{color}
|
||||
showCheckmark={false}
|
||||
ariaLabel="Toggle language"
|
||||
items={languageItems}
|
||||
selectedValue={languageStore.current}
|
||||
onSelect={setLanguage}
|
||||
{color}
|
||||
showCheckmark={false}
|
||||
ariaLabel="Toggle language"
|
||||
>
|
||||
{#snippet icon()}
|
||||
<Languages class="h-[1.2rem] w-[1.2rem]" />
|
||||
{/snippet}
|
||||
{#snippet icon()}
|
||||
<Languages class="h-[1.2rem] w-[1.2rem]" />
|
||||
{/snippet}
|
||||
</Dropdown>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLTextareaAttributes } from 'svelte/elements';
|
||||
import { cn } from '$lib/utils';
|
||||
import type { HTMLTextareaAttributes } from 'svelte/elements';
|
||||
|
||||
type Props = HTMLTextareaAttributes & {
|
||||
value?: string;
|
||||
};
|
||||
type Props = HTMLTextareaAttributes & {
|
||||
value?: string;
|
||||
};
|
||||
|
||||
let { class: className, value = $bindable(''), ...restProps }: Props = $props();
|
||||
let { class: className, value = $bindable(''), ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<textarea
|
||||
class={cn(
|
||||
'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
bind:value
|
||||
{...restProps}
|
||||
class={cn(
|
||||
'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
bind:value
|
||||
{...restProps}
|
||||
></textarea>
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
<script lang="ts">
|
||||
import Dropdown from '$lib/components/ui/Dropdown.svelte';
|
||||
import { Palette } from '@lucide/svelte';
|
||||
import { AVAILABLE_THEMES } from '$lib/utils/themes';
|
||||
import Dropdown from '$lib/components/ui/Dropdown.svelte';
|
||||
import { Palette } from '@lucide/svelte';
|
||||
import { AVAILABLE_THEMES } from '$lib/utils/themes';
|
||||
|
||||
let {
|
||||
value = 'none',
|
||||
onValueChange,
|
||||
color
|
||||
}: {
|
||||
value?: string;
|
||||
onValueChange: (theme: string) => void;
|
||||
color?: string | null;
|
||||
} = $props();
|
||||
let {
|
||||
value = 'none',
|
||||
onValueChange,
|
||||
color
|
||||
}: {
|
||||
value?: string;
|
||||
onValueChange: (theme: string) => void;
|
||||
color?: string | null;
|
||||
} = $props();
|
||||
|
||||
const themeItems = $derived(
|
||||
Object.entries(AVAILABLE_THEMES).map(([key, theme]) => ({
|
||||
value: key,
|
||||
label: theme.name
|
||||
}))
|
||||
);
|
||||
const themeItems = $derived(
|
||||
Object.entries(AVAILABLE_THEMES).map(([key, theme]) => ({
|
||||
value: key,
|
||||
label: theme.name
|
||||
}))
|
||||
);
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
items={themeItems}
|
||||
selectedValue={value}
|
||||
onSelect={onValueChange}
|
||||
{color}
|
||||
showCheckmark={true}
|
||||
ariaLabel="Select theme pattern"
|
||||
items={themeItems}
|
||||
selectedValue={value}
|
||||
onSelect={onValueChange}
|
||||
{color}
|
||||
showCheckmark={true}
|
||||
ariaLabel="Select theme pattern"
|
||||
>
|
||||
{#snippet icon()}
|
||||
<Palette class="h-[1.2rem] w-[1.2rem]" />
|
||||
{/snippet}
|
||||
{#snippet icon()}
|
||||
<Palette class="h-[1.2rem] w-[1.2rem]" />
|
||||
{/snippet}
|
||||
</Dropdown>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
import { Sun, Moon, Monitor } from '@lucide/svelte';
|
||||
import IconButton from '../IconButton.svelte';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
import { Sun, Moon, Monitor } from '@lucide/svelte';
|
||||
import IconButton from '../IconButton.svelte';
|
||||
|
||||
let {
|
||||
color = $bindable(null),
|
||||
size = 'sm',
|
||||
}: {
|
||||
color: string | null;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
} = $props();
|
||||
let {
|
||||
color = $bindable(null),
|
||||
size = 'sm'
|
||||
}: {
|
||||
color: string | null;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
} = $props();
|
||||
|
||||
function toggle() {
|
||||
themeStore.toggle();
|
||||
}
|
||||
function toggle() {
|
||||
themeStore.toggle();
|
||||
}
|
||||
</script>
|
||||
|
||||
<IconButton onclick={toggle} {size} {color} rounded="md">
|
||||
{#if themeStore.current === 'light'}
|
||||
<Sun size={20} />
|
||||
<span class="sr-only">Light mode (click for dark)</span>
|
||||
{:else if themeStore.current === 'dark'}
|
||||
<Moon size={20} />
|
||||
<span class="sr-only">Dark mode (click for system)</span>
|
||||
{:else}
|
||||
<Monitor size={20} />
|
||||
<span class="sr-only">System mode (click for light)</span>
|
||||
{/if}
|
||||
{#if themeStore.current === 'light'}
|
||||
<Sun size={20} />
|
||||
<span class="sr-only">Light mode (click for dark)</span>
|
||||
{:else if themeStore.current === 'dark'}
|
||||
<Moon size={20} />
|
||||
<span class="sr-only">Dark mode (click for system)</span>
|
||||
{:else}
|
||||
<Monitor size={20} />
|
||||
<span class="sr-only">System mode (click for light)</span>
|
||||
{/if}
|
||||
</IconButton>
|
||||
|
||||
@@ -1,150 +1,154 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import ImageSelector from './ImageSelector.svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import ImageSelector from './ImageSelector.svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
|
||||
interface Props {
|
||||
onSuccess?: () => void;
|
||||
wishlistColor?: string | null;
|
||||
wishlistTheme?: string | null;
|
||||
}
|
||||
interface Props {
|
||||
onSuccess?: () => void;
|
||||
wishlistColor?: string | null;
|
||||
wishlistTheme?: string | null;
|
||||
}
|
||||
|
||||
let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
|
||||
let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
|
||||
|
||||
const cardStyle = $derived(getCardStyle(wishlistColor, null));
|
||||
const cardStyle = $derived(getCardStyle(wishlistColor, null));
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
|
||||
const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
|
||||
|
||||
let linkUrl = $state('');
|
||||
let imageUrl = $state('');
|
||||
let color = $state<string | null>(null);
|
||||
let scrapedImages = $state<string[]>([]);
|
||||
let isLoadingImages = $state(false);
|
||||
let linkUrl = $state('');
|
||||
let imageUrl = $state('');
|
||||
let color = $state<string | null>(null);
|
||||
let scrapedImages = $state<string[]>([]);
|
||||
let isLoadingImages = $state(false);
|
||||
|
||||
async function handleLinkChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
linkUrl = input.value;
|
||||
async function handleLinkChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
linkUrl = input.value;
|
||||
|
||||
if (linkUrl && linkUrl.startsWith('http')) {
|
||||
isLoadingImages = true;
|
||||
scrapedImages = [];
|
||||
if (linkUrl && linkUrl.startsWith('http')) {
|
||||
isLoadingImages = true;
|
||||
scrapedImages = [];
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/scrape-images', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: linkUrl })
|
||||
});
|
||||
try {
|
||||
const response = await fetch('/api/scrape-images', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: linkUrl })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
scrapedImages = data.images || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to scrape images:', error);
|
||||
} finally {
|
||||
isLoadingImages = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
scrapedImages = data.images || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to scrape images:', error);
|
||||
} finally {
|
||||
isLoadingImages = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card style={cardStyle} class="relative overflow-hidden">
|
||||
<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
|
||||
<CardHeader class="relative z-10">
|
||||
<CardTitle>{t.form.addNewWish}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="relative z-10">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addItem"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
onSuccess?.();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="title">{t.form.wishName} ({t.form.required})</Label>
|
||||
<Input id="title" name="title" required placeholder="e.g., Blue Headphones" />
|
||||
</div>
|
||||
<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
|
||||
<CardHeader class="relative z-10">
|
||||
<CardTitle>{t.form.addNewWish}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="relative z-10">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addItem"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
onSuccess?.();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="title">{t.form.wishName} ({t.form.required})</Label>
|
||||
<Input id="title" name="title" required placeholder="e.g., Blue Headphones" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="description">{t.form.description}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
placeholder="Add details about the item..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="description">{t.form.description}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
placeholder="Add details about the item..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="link">{t.form.link}</Label>
|
||||
<Input
|
||||
id="link"
|
||||
name="link"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={linkUrl}
|
||||
oninput={handleLinkChange}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="link">{t.form.link}</Label>
|
||||
<Input
|
||||
id="link"
|
||||
name="link"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={linkUrl}
|
||||
oninput={handleLinkChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="imageUrl">{t.form.imageUrl}</Label>
|
||||
<Input
|
||||
id="imageUrl"
|
||||
name="imageUrl"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={imageUrl}
|
||||
/>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="imageUrl">{t.form.imageUrl}</Label>
|
||||
<Input
|
||||
id="imageUrl"
|
||||
name="imageUrl"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={imageUrl}
|
||||
/>
|
||||
|
||||
<ImageSelector images={scrapedImages} bind:selectedImage={imageUrl} isLoading={isLoadingImages} />
|
||||
</div>
|
||||
<ImageSelector
|
||||
images={scrapedImages}
|
||||
bind:selectedImage={imageUrl}
|
||||
isLoading={isLoadingImages}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="price">{t.form.price}</Label>
|
||||
<Input id="price" name="price" type="number" step="0.01" placeholder="0.00" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="price">{t.form.price}</Label>
|
||||
<Input id="price" name="price" type="number" step="0.01" placeholder="0.00" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="currency">{t.form.currency}</Label>
|
||||
<select
|
||||
id="currency"
|
||||
name="currency"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
{#each currencies as curr}
|
||||
<option value={curr} selected={curr === 'DKK'}>{curr}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="currency">{t.form.currency}</Label>
|
||||
<select
|
||||
id="currency"
|
||||
name="currency"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
{#each currencies as curr}
|
||||
<option value={curr} selected={curr === 'DKK'}>{curr}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="color">{t.form.cardColor}</Label>
|
||||
<ColorPicker bind:color={color} />
|
||||
</div>
|
||||
<input type="hidden" name="color" value={color || ''} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="color">{t.form.cardColor}</Label>
|
||||
<ColorPicker bind:color />
|
||||
</div>
|
||||
<input type="hidden" name="color" value={color || ''} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" class="w-full md:w-auto">{t.wishlist.addWish}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
<Button type="submit" class="w-full md:w-auto">{t.wishlist.addWish}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,69 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { enhance } from '$app/forms';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { isLocalWishlist } from '$lib/utils/localWishlists';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { enhance } from '$app/forms';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { isLocalWishlist } from '$lib/utils/localWishlists';
|
||||
|
||||
let {
|
||||
isAuthenticated,
|
||||
isOwner,
|
||||
hasClaimed,
|
||||
ownerToken
|
||||
}: {
|
||||
isAuthenticated: boolean;
|
||||
isOwner: boolean;
|
||||
hasClaimed: boolean;
|
||||
ownerToken: string;
|
||||
} = $props();
|
||||
let {
|
||||
isAuthenticated,
|
||||
isOwner,
|
||||
hasClaimed,
|
||||
ownerToken
|
||||
}: {
|
||||
isAuthenticated: boolean;
|
||||
isOwner: boolean;
|
||||
hasClaimed: boolean;
|
||||
ownerToken: string;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
// Check if this wishlist is in localStorage
|
||||
const isLocal = $derived(isLocalWishlist(ownerToken));
|
||||
// Check if this wishlist is in localStorage
|
||||
const isLocal = $derived(isLocalWishlist(ownerToken));
|
||||
</script>
|
||||
|
||||
{#if isAuthenticated}
|
||||
<div class="mb-6">
|
||||
{#if isOwner}
|
||||
<Button
|
||||
disabled
|
||||
variant="outline"
|
||||
class="w-full md:w-auto opacity-60 cursor-not-allowed"
|
||||
>
|
||||
{t.wishlist.youOwnThis}
|
||||
</Button>
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
{t.wishlist.alreadyInDashboard}
|
||||
</p>
|
||||
{:else}
|
||||
<form
|
||||
method="POST"
|
||||
action={hasClaimed ? "?/unclaimWishlist" : "?/claimWishlist"}
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
variant={hasClaimed ? "outline" : "default"}
|
||||
class="w-full md:w-auto"
|
||||
>
|
||||
{hasClaimed ? "Unclaim Wishlist" : "Claim Wishlist"}
|
||||
</Button>
|
||||
</form>
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
{#if hasClaimed}
|
||||
You have claimed this wishlist. It will appear in your dashboard.
|
||||
{:else}
|
||||
Claim this wishlist to add it to your dashboard for easy access.
|
||||
{#if isLocal}
|
||||
<br />
|
||||
<span class="text-xs">It will remain in your local wishlists and also appear in your claimed wishlists.</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
{#if isOwner}
|
||||
<Button disabled variant="outline" class="w-full md:w-auto opacity-60 cursor-not-allowed">
|
||||
{t.wishlist.youOwnThis}
|
||||
</Button>
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
{t.wishlist.alreadyInDashboard}
|
||||
</p>
|
||||
{:else}
|
||||
<form
|
||||
method="POST"
|
||||
action={hasClaimed ? '?/unclaimWishlist' : '?/claimWishlist'}
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Button type="submit" variant={hasClaimed ? 'outline' : 'default'} class="w-full md:w-auto">
|
||||
{hasClaimed ? 'Unclaim Wishlist' : 'Claim Wishlist'}
|
||||
</Button>
|
||||
</form>
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
{#if hasClaimed}
|
||||
You have claimed this wishlist. It will appear in your dashboard.
|
||||
{:else}
|
||||
Claim this wishlist to add it to your dashboard for easy access.
|
||||
{#if isLocal}
|
||||
<br />
|
||||
<span class="text-xs"
|
||||
>It will remain in your local wishlists and also appear in your claimed wishlists.</span
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,46 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { enhance } from '$app/forms';
|
||||
import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { enhance } from '$app/forms';
|
||||
import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
|
||||
let {
|
||||
unlocked = $bindable()
|
||||
}: {
|
||||
unlocked: boolean;
|
||||
} = $props();
|
||||
let {
|
||||
unlocked = $bindable()
|
||||
}: {
|
||||
unlocked: boolean;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
</script>
|
||||
|
||||
<div class="mt-12 pt-8 border-t border-border space-y-4">
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-stretch md:items-center">
|
||||
<UnlockButton bind:unlocked />
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-stretch md:items-center">
|
||||
<UnlockButton bind:unlocked />
|
||||
|
||||
{#if unlocked}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteWishlist"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm(t.wishlist.deleteConfirm)) {
|
||||
cancel();
|
||||
return;
|
||||
}
|
||||
return async ({ result }) => {
|
||||
if (result.type === "success") {
|
||||
window.location.href = "/dashboard";
|
||||
}
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="destructive"
|
||||
class="w-full md:w-auto"
|
||||
>
|
||||
{t.wishlist.deleteWishlist}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{#if unlocked}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteWishlist"
|
||||
use:enhance={({ cancel }) => {
|
||||
if (!confirm(t.wishlist.deleteConfirm)) {
|
||||
cancel();
|
||||
return;
|
||||
}
|
||||
return async ({ result }) => {
|
||||
if (result.type === 'success') {
|
||||
window.location.href = '/dashboard';
|
||||
}
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Button type="submit" variant="destructive" class="w-full md:w-auto">
|
||||
{t.wishlist.deleteWishlist}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,186 +1,215 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import ImageSelector from './ImageSelector.svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import type { Item } from '$lib/server/schema';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import ImageSelector from './ImageSelector.svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import type { Item } from '$lib/server/schema';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
|
||||
interface Props {
|
||||
item: Item;
|
||||
onSuccess?: () => void;
|
||||
onCancel?: () => void;
|
||||
onColorChange?: (itemId: string, color: string) => void;
|
||||
currentPosition?: number;
|
||||
totalItems?: number;
|
||||
onPositionChange?: (newPosition: number) => void;
|
||||
wishlistColor?: string | null;
|
||||
wishlistTheme?: string | null;
|
||||
}
|
||||
interface Props {
|
||||
item: Item;
|
||||
onSuccess?: () => void;
|
||||
onCancel?: () => void;
|
||||
onColorChange?: (itemId: string, color: string) => void;
|
||||
currentPosition?: number;
|
||||
totalItems?: number;
|
||||
onPositionChange?: (newPosition: number) => void;
|
||||
wishlistColor?: string | null;
|
||||
wishlistTheme?: string | null;
|
||||
}
|
||||
|
||||
let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange, wishlistColor = null, wishlistTheme = null }: Props = $props();
|
||||
let {
|
||||
item,
|
||||
onSuccess,
|
||||
onCancel,
|
||||
onColorChange,
|
||||
currentPosition = 1,
|
||||
totalItems = 1,
|
||||
onPositionChange,
|
||||
wishlistColor = null,
|
||||
wishlistTheme = null
|
||||
}: Props = $props();
|
||||
|
||||
const cardStyle = $derived(getCardStyle(wishlistColor, null));
|
||||
const cardStyle = $derived(getCardStyle(wishlistColor, null));
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
|
||||
const currencies = ['DKK', 'EUR', 'USD', 'SEK', 'NOK', 'GBP'];
|
||||
|
||||
let linkUrl = $state(item.link || '');
|
||||
let imageUrl = $state(item.imageUrl || '');
|
||||
let color = $state<string | null>(item.color);
|
||||
let scrapedImages = $state<string[]>([]);
|
||||
let isLoadingImages = $state(false);
|
||||
let linkUrl = $state(item.link || '');
|
||||
let imageUrl = $state(item.imageUrl || '');
|
||||
let color = $state<string | null>(item.color);
|
||||
let scrapedImages = $state<string[]>([]);
|
||||
let isLoadingImages = $state(false);
|
||||
|
||||
async function handleLinkChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
linkUrl = input.value;
|
||||
async function handleLinkChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
linkUrl = input.value;
|
||||
|
||||
if (linkUrl && linkUrl.startsWith('http')) {
|
||||
isLoadingImages = true;
|
||||
scrapedImages = [];
|
||||
if (linkUrl && linkUrl.startsWith('http')) {
|
||||
isLoadingImages = true;
|
||||
scrapedImages = [];
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/scrape-images', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: linkUrl })
|
||||
});
|
||||
try {
|
||||
const response = await fetch('/api/scrape-images', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: linkUrl })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
scrapedImages = data.images || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to scrape images:', error);
|
||||
} finally {
|
||||
isLoadingImages = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
scrapedImages = data.images || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to scrape images:', error);
|
||||
} finally {
|
||||
isLoadingImages = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card style={cardStyle} class="relative overflow-hidden">
|
||||
<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
|
||||
<CardHeader class="relative z-10">
|
||||
<CardTitle>{t.wishlist.editWish}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="relative z-10">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/updateItem"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
onSuccess?.();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
|
||||
<CardHeader class="relative z-10">
|
||||
<CardTitle>{t.wishlist.editWish}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="relative z-10">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/updateItem"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
onSuccess?.();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="title">{t.form.wishName} ({t.form.required})</Label>
|
||||
<Input id="title" name="title" required value={item.title} placeholder="e.g., Blue Headphones" />
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="title">{t.form.wishName} ({t.form.required})</Label>
|
||||
<Input
|
||||
id="title"
|
||||
name="title"
|
||||
required
|
||||
value={item.title}
|
||||
placeholder="e.g., Blue Headphones"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="description">{t.form.description}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={item.description || ''}
|
||||
placeholder="Add details about the item..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="description">{t.form.description}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={item.description || ''}
|
||||
placeholder="Add details about the item..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="link">{t.form.link}</Label>
|
||||
<Input
|
||||
id="link"
|
||||
name="link"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={linkUrl}
|
||||
oninput={handleLinkChange}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="link">{t.form.link}</Label>
|
||||
<Input
|
||||
id="link"
|
||||
name="link"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={linkUrl}
|
||||
oninput={handleLinkChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="imageUrl">{t.form.imageUrl}</Label>
|
||||
<Input
|
||||
id="imageUrl"
|
||||
name="imageUrl"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={imageUrl}
|
||||
/>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="imageUrl">{t.form.imageUrl}</Label>
|
||||
<Input
|
||||
id="imageUrl"
|
||||
name="imageUrl"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
bind:value={imageUrl}
|
||||
/>
|
||||
|
||||
<ImageSelector images={scrapedImages} bind:selectedImage={imageUrl} isLoading={isLoadingImages} />
|
||||
</div>
|
||||
<ImageSelector
|
||||
images={scrapedImages}
|
||||
bind:selectedImage={imageUrl}
|
||||
isLoading={isLoadingImages}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="price">{t.form.price}</Label>
|
||||
<Input id="price" name="price" type="number" step="0.01" value={item.price || ''} placeholder="0.00" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="price">{t.form.price}</Label>
|
||||
<Input
|
||||
id="price"
|
||||
name="price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={item.price || ''}
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="currency">{t.form.currency}</Label>
|
||||
<select
|
||||
id="currency"
|
||||
name="currency"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
{#each currencies as curr}
|
||||
<option value={curr} selected={item.currency === curr}>{curr}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="currency">{t.form.currency}</Label>
|
||||
<select
|
||||
id="currency"
|
||||
name="currency"
|
||||
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
{#each currencies as curr}
|
||||
<option value={curr} selected={item.currency === curr}>{curr}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="color">{t.form.cardColor}</Label>
|
||||
<ColorPicker bind:color={color} onchange={() => onColorChange?.(item.id, color || '')} />
|
||||
</div>
|
||||
<input type="hidden" name="color" value={color || ''} />
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="color">{t.form.cardColor}</Label>
|
||||
<ColorPicker bind:color onchange={() => onColorChange?.(item.id, color || '')} />
|
||||
</div>
|
||||
<input type="hidden" name="color" value={color || ''} />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="position">{t.form.position}</Label>
|
||||
<Input
|
||||
id="position"
|
||||
type="number"
|
||||
min="1"
|
||||
max={totalItems}
|
||||
value={currentPosition}
|
||||
onchange={(e) => {
|
||||
const newPos = parseInt((e.target as HTMLInputElement).value);
|
||||
if (newPos >= 1 && newPos <= totalItems) {
|
||||
onPositionChange?.(newPos);
|
||||
}
|
||||
}}
|
||||
placeholder="1"
|
||||
/>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Choose where this item appears in your wishlist (1 = top, {totalItems} = bottom)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<Label for="position">{t.form.position}</Label>
|
||||
<Input
|
||||
id="position"
|
||||
type="number"
|
||||
min="1"
|
||||
max={totalItems}
|
||||
value={currentPosition}
|
||||
onchange={(e) => {
|
||||
const newPos = parseInt((e.target as HTMLInputElement).value);
|
||||
if (newPos >= 1 && newPos <= totalItems) {
|
||||
onPositionChange?.(newPos);
|
||||
}
|
||||
}}
|
||||
placeholder="1"
|
||||
/>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Choose where this item appears in your wishlist (1 = top, {totalItems} = bottom)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button type="submit" class="flex-1 md:flex-none">{t.form.saveChanges}</Button>
|
||||
{#if onCancel}
|
||||
<Button type="button" variant="outline" class="flex-1 md:flex-none" onclick={onCancel}>{t.form.cancel}</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<div class="flex gap-2">
|
||||
<Button type="submit" class="flex-1 md:flex-none">{t.form.saveChanges}</Button>
|
||||
{#if onCancel}
|
||||
<Button type="button" variant="outline" class="flex-1 md:flex-none" onclick={onCancel}
|
||||
>{t.form.cancel}</Button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,83 +1,69 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import WishlistItem from "$lib/components/wishlist/WishlistItem.svelte";
|
||||
import EmptyState from "$lib/components/layout/EmptyState.svelte";
|
||||
import type { Item } from "$lib/server/schema";
|
||||
import { enhance } from "$app/forms";
|
||||
import { flip } from "svelte/animate";
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from "$lib/components/themes/ThemeCard.svelte";
|
||||
import { getCardStyle } from "$lib/utils/colors";
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Card, CardContent } from '$lib/components/ui/card';
|
||||
import WishlistItem from '$lib/components/wishlist/WishlistItem.svelte';
|
||||
import EmptyState from '$lib/components/layout/EmptyState.svelte';
|
||||
import type { Item } from '$lib/server/schema';
|
||||
import { enhance } from '$app/forms';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
|
||||
let {
|
||||
items = $bindable([]),
|
||||
rearranging,
|
||||
onStartEditing,
|
||||
onReorder,
|
||||
theme = null,
|
||||
wishlistColor = null
|
||||
}: {
|
||||
items: Item[];
|
||||
rearranging: boolean;
|
||||
onStartEditing: (item: Item) => void;
|
||||
onReorder: (items: Item[]) => Promise<void>;
|
||||
theme?: string | null;
|
||||
wishlistColor?: string | null;
|
||||
} = $props();
|
||||
let {
|
||||
items = $bindable([]),
|
||||
rearranging,
|
||||
onStartEditing,
|
||||
onReorder,
|
||||
theme = null,
|
||||
wishlistColor = null
|
||||
}: {
|
||||
items: Item[];
|
||||
rearranging: boolean;
|
||||
onStartEditing: (item: Item) => void;
|
||||
onReorder: (items: Item[]) => Promise<void>;
|
||||
theme?: string | null;
|
||||
wishlistColor?: string | null;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const cardStyle = $derived(getCardStyle(wishlistColor));
|
||||
const t = $derived(languageStore.t);
|
||||
const cardStyle = $derived(getCardStyle(wishlistColor));
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
{#if items && items.length > 0}
|
||||
<div class="space-y-4">
|
||||
{#each items as item (item.id)}
|
||||
<div animate:flip={{ duration: 300 }}>
|
||||
<WishlistItem {item} {theme} {wishlistColor} showDragHandle={false}>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => onStartEditing(item)}
|
||||
>
|
||||
{t.wishlist.edit}
|
||||
</Button>
|
||||
{#if rearranging}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteItem"
|
||||
use:enhance
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="itemId"
|
||||
value={item.id}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
>
|
||||
{t.form.delete}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</WishlistItem>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<Card style={cardStyle} class="relative overflow-hidden">
|
||||
<ThemeCard themeName={theme} color={wishlistColor} showPattern={false} />
|
||||
<CardContent class="p-12 relative z-10">
|
||||
<EmptyState
|
||||
message={t.wishlist.noWishes + ". " + t.wishlist.addFirstWish + "!"}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
{#if items && items.length > 0}
|
||||
<div class="space-y-4">
|
||||
{#each items as item (item.id)}
|
||||
<div animate:flip={{ duration: 300 }}>
|
||||
<WishlistItem {item} {theme} {wishlistColor} showDragHandle={false}>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => onStartEditing(item)}
|
||||
>
|
||||
{t.wishlist.edit}
|
||||
</Button>
|
||||
{#if rearranging}
|
||||
<form method="POST" action="?/deleteItem" use:enhance>
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<Button type="submit" variant="destructive" size="sm">
|
||||
{t.form.delete}
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</WishlistItem>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<Card style={cardStyle} class="relative overflow-hidden">
|
||||
<ThemeCard themeName={theme} color={wishlistColor} showPattern={false} />
|
||||
<CardContent class="p-12 relative z-10">
|
||||
<EmptyState message={t.wishlist.noWishes + '. ' + t.wishlist.addFirstWish + '!'} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
|
||||
let {
|
||||
images,
|
||||
selectedImage = $bindable(''),
|
||||
isLoading = false
|
||||
}: {
|
||||
images: string[];
|
||||
selectedImage?: string;
|
||||
isLoading?: boolean;
|
||||
} = $props();
|
||||
let {
|
||||
images,
|
||||
selectedImage = $bindable(''),
|
||||
isLoading = false
|
||||
}: {
|
||||
images: string[];
|
||||
selectedImage?: string;
|
||||
isLoading?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<p class="text-sm text-muted-foreground">Loading images...</p>
|
||||
<p class="text-sm text-muted-foreground">Loading images...</p>
|
||||
{:else if images.length > 0}
|
||||
<div class="mt-2">
|
||||
<Label class="text-sm">Or select from scraped images:</Label>
|
||||
<div class="grid grid-cols-3 md:grid-cols-5 gap-2 mt-2">
|
||||
{#each images as imgUrl}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (selectedImage = imgUrl)}
|
||||
class="relative aspect-square rounded-md overflow-hidden border-2 hover:border-primary transition-colors"
|
||||
class:border-primary={selectedImage === imgUrl}
|
||||
>
|
||||
<img src={imgUrl} alt="" class="w-full h-full object-cover" />
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<Label class="text-sm">Or select from scraped images:</Label>
|
||||
<div class="grid grid-cols-3 md:grid-cols-5 gap-2 mt-2">
|
||||
{#each images as imgUrl}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (selectedImage = imgUrl)}
|
||||
class="relative aspect-square rounded-md overflow-hidden border-2 hover:border-primary transition-colors"
|
||||
class:border-primary={selectedImage === imgUrl}
|
||||
>
|
||||
<img src={imgUrl} alt="" class="w-full h-full object-cover" />
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,123 +1,121 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { enhance } from '$app/forms';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
interface Props {
|
||||
itemId: string;
|
||||
isReserved: boolean;
|
||||
reserverName?: string | null;
|
||||
reservationUserId?: string | null;
|
||||
currentUserId?: string | null;
|
||||
}
|
||||
interface Props {
|
||||
itemId: string;
|
||||
isReserved: boolean;
|
||||
reserverName?: string | null;
|
||||
reservationUserId?: string | null;
|
||||
currentUserId?: string | null;
|
||||
}
|
||||
|
||||
let { itemId, isReserved, reserverName, reservationUserId, currentUserId }: Props = $props();
|
||||
let { itemId, isReserved, reserverName, reservationUserId, currentUserId }: Props = $props();
|
||||
|
||||
let showReserveForm = $state(false);
|
||||
let name = $state('');
|
||||
let showCancelConfirmation = $state(false);
|
||||
let showReserveForm = $state(false);
|
||||
let name = $state('');
|
||||
let showCancelConfirmation = $state(false);
|
||||
|
||||
const canCancel = $derived(() => {
|
||||
if (!isReserved) return false;
|
||||
if (reservationUserId) {
|
||||
return currentUserId === reservationUserId;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const canCancel = $derived(() => {
|
||||
if (!isReserved) return false;
|
||||
if (reservationUserId) {
|
||||
return currentUserId === reservationUserId;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const isAnonymousReservation = $derived(!reservationUserId);
|
||||
const isAnonymousReservation = $derived(!reservationUserId);
|
||||
</script>
|
||||
|
||||
{#if isReserved}
|
||||
<div class="flex flex-col items-start gap-2">
|
||||
<div class="text-sm text-green-600 font-medium">
|
||||
✓ Reserved
|
||||
{#if reserverName}
|
||||
by {reserverName}
|
||||
{/if}
|
||||
</div>
|
||||
{#if canCancel()}
|
||||
{#if showCancelConfirmation}
|
||||
<div class="flex flex-col gap-2 items-start">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Cancel this reservation?
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<form method="POST" action="?/unreserve" use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
showCancelConfirmation = false;
|
||||
await update();
|
||||
};
|
||||
}}>
|
||||
<input type="hidden" name="itemId" value={itemId} />
|
||||
<Button type="submit" variant="destructive" size="sm">
|
||||
Yes, Cancel
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (showCancelConfirmation = false)}
|
||||
>
|
||||
No, Keep It
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if isAnonymousReservation}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (showCancelConfirmation = true)}
|
||||
>
|
||||
Cancel Reservation
|
||||
</Button>
|
||||
{:else}
|
||||
<form method="POST" action="?/unreserve" use:enhance>
|
||||
<input type="hidden" name="itemId" value={itemId} />
|
||||
<Button type="submit" variant="outline" size="sm">
|
||||
Cancel Reservation
|
||||
</Button>
|
||||
</form>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-col items-start gap-2">
|
||||
<div class="text-sm text-green-600 font-medium">
|
||||
✓ Reserved
|
||||
{#if reserverName}
|
||||
by {reserverName}
|
||||
{/if}
|
||||
</div>
|
||||
{#if canCancel()}
|
||||
{#if showCancelConfirmation}
|
||||
<div class="flex flex-col gap-2 items-start">
|
||||
<p class="text-sm text-muted-foreground">Cancel this reservation?</p>
|
||||
<div class="flex gap-2">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/unreserve"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
showCancelConfirmation = false;
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="itemId" value={itemId} />
|
||||
<Button type="submit" variant="destructive" size="sm">Yes, Cancel</Button>
|
||||
</form>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (showCancelConfirmation = false)}
|
||||
>
|
||||
No, Keep It
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if isAnonymousReservation}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (showCancelConfirmation = true)}
|
||||
>
|
||||
Cancel Reservation
|
||||
</Button>
|
||||
{:else}
|
||||
<form method="POST" action="?/unreserve" use:enhance>
|
||||
<input type="hidden" name="itemId" value={itemId} />
|
||||
<Button type="submit" variant="outline" size="sm">Cancel Reservation</Button>
|
||||
</form>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{:else if showReserveForm}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/reserve"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
showReserveForm = false;
|
||||
name = '';
|
||||
};
|
||||
}}
|
||||
class="flex flex-col gap-2 w-full md:w-auto"
|
||||
>
|
||||
<input type="hidden" name="itemId" value={itemId} />
|
||||
<Input
|
||||
name="reserverName"
|
||||
placeholder="Your name (optional)"
|
||||
bind:value={name}
|
||||
class="w-full md:w-48"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<Button type="submit" size="sm" class="flex-1">Confirm</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (showReserveForm = false)}
|
||||
class="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/reserve"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
showReserveForm = false;
|
||||
name = '';
|
||||
};
|
||||
}}
|
||||
class="flex flex-col gap-2 w-full md:w-auto"
|
||||
>
|
||||
<input type="hidden" name="itemId" value={itemId} />
|
||||
<Input
|
||||
name="reserverName"
|
||||
placeholder="Your name (optional)"
|
||||
bind:value={name}
|
||||
class="w-full md:w-48"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<Button type="submit" size="sm" class="flex-1">Confirm</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (showReserveForm = false)}
|
||||
class="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<Button onclick={() => (showReserveForm = true)} size="sm" class="w-full md:w-auto">
|
||||
Reserve This
|
||||
</Button>
|
||||
<Button onclick={() => (showReserveForm = true)} size="sm" class="w-full md:w-auto">
|
||||
Reserve This
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
@@ -1,64 +1,66 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Card, CardContent } from '$lib/components/ui/card';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Card, CardContent } from '$lib/components/ui/card';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
|
||||
interface Props {
|
||||
publicUrl: string;
|
||||
ownerUrl?: string;
|
||||
wishlistColor?: string | null;
|
||||
}
|
||||
interface Props {
|
||||
publicUrl: string;
|
||||
ownerUrl?: string;
|
||||
wishlistColor?: string | null;
|
||||
}
|
||||
|
||||
let { publicUrl, ownerUrl, wishlistColor = null }: Props = $props();
|
||||
let { publicUrl, ownerUrl, wishlistColor = null }: Props = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const cardStyle = $derived(getCardStyle(null, wishlistColor));
|
||||
const t = $derived(languageStore.t);
|
||||
const cardStyle = $derived(getCardStyle(null, wishlistColor));
|
||||
|
||||
let copiedPublic = $state(false);
|
||||
let copiedOwner = $state(false);
|
||||
let copiedPublic = $state(false);
|
||||
let copiedOwner = $state(false);
|
||||
|
||||
const publicLink = $derived(
|
||||
typeof window !== 'undefined' ? `${window.location.origin}${publicUrl}` : ''
|
||||
);
|
||||
const ownerLink = $derived(ownerUrl && typeof window !== 'undefined' ? `${window.location.origin}${ownerUrl}` : '');
|
||||
const publicLink = $derived(
|
||||
typeof window !== 'undefined' ? `${window.location.origin}${publicUrl}` : ''
|
||||
);
|
||||
const ownerLink = $derived(
|
||||
ownerUrl && typeof window !== 'undefined' ? `${window.location.origin}${ownerUrl}` : ''
|
||||
);
|
||||
|
||||
async function copyToClipboard(text: string, type: 'public' | 'owner') {
|
||||
await navigator.clipboard.writeText(text);
|
||||
if (type === 'public') {
|
||||
copiedPublic = true;
|
||||
setTimeout(() => (copiedPublic = false), 2000);
|
||||
} else {
|
||||
copiedOwner = true;
|
||||
setTimeout(() => (copiedOwner = false), 2000);
|
||||
}
|
||||
}
|
||||
async function copyToClipboard(text: string, type: 'public' | 'owner') {
|
||||
await navigator.clipboard.writeText(text);
|
||||
if (type === 'public') {
|
||||
copiedPublic = true;
|
||||
setTimeout(() => (copiedPublic = false), 2000);
|
||||
} else {
|
||||
copiedOwner = true;
|
||||
setTimeout(() => (copiedOwner = false), 2000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card style={cardStyle}>
|
||||
<CardContent class="space-y-4 pt-6">
|
||||
<div class="space-y-2">
|
||||
<Label>{t.wishlist.shareViewOnly}</Label>
|
||||
<div class="flex gap-2">
|
||||
<Input readonly value={publicLink} class="font-mono text-sm" />
|
||||
<Button variant="outline" onclick={() => copyToClipboard(publicLink, 'public')}>
|
||||
{copiedPublic ? t.wishlist.copied : t.wishlist.copy}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent class="space-y-4 pt-6">
|
||||
<div class="space-y-2">
|
||||
<Label>{t.wishlist.shareViewOnly}</Label>
|
||||
<div class="flex gap-2">
|
||||
<Input readonly value={publicLink} class="font-mono text-sm" />
|
||||
<Button variant="outline" onclick={() => copyToClipboard(publicLink, 'public')}>
|
||||
{copiedPublic ? t.wishlist.copied : t.wishlist.copy}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if ownerLink}
|
||||
<div class="space-y-2">
|
||||
<Label>{t.wishlist.shareEditLink}</Label>
|
||||
<div class="flex gap-2">
|
||||
<Input readonly value={ownerLink} class="font-mono text-sm" />
|
||||
<Button variant="outline" onclick={() => copyToClipboard(ownerLink, 'owner')}>
|
||||
{copiedOwner ? t.wishlist.copied : t.wishlist.copy}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
{#if ownerLink}
|
||||
<div class="space-y-2">
|
||||
<Label>{t.wishlist.shareEditLink}</Label>
|
||||
<div class="flex gap-2">
|
||||
<Input readonly value={ownerLink} class="font-mono text-sm" />
|
||||
<Button variant="outline" onclick={() => copyToClipboard(ownerLink, 'owner')}>
|
||||
{copiedOwner ? t.wishlist.copied : t.wishlist.copy}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
|
||||
let {
|
||||
rearranging = $bindable(false),
|
||||
showAddForm = false,
|
||||
onToggleAddForm
|
||||
}: {
|
||||
rearranging: boolean;
|
||||
showAddForm?: boolean;
|
||||
onToggleAddForm: () => void;
|
||||
} = $props();
|
||||
let {
|
||||
rearranging = $bindable(false),
|
||||
showAddForm = false,
|
||||
onToggleAddForm
|
||||
}: {
|
||||
rearranging: boolean;
|
||||
showAddForm?: boolean;
|
||||
onToggleAddForm: () => void;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<Button
|
||||
onclick={onToggleAddForm}
|
||||
class="w-full md:w-auto"
|
||||
>
|
||||
{showAddForm ? t.form.cancel : t.wishlist.addWish}
|
||||
</Button>
|
||||
<Button onclick={onToggleAddForm} class="w-full md:w-auto">
|
||||
{showAddForm ? t.form.cancel : t.wishlist.addWish}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,212 +1,212 @@
|
||||
<script lang="ts">
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import { Textarea } from "$lib/components/ui/textarea";
|
||||
import { Pencil, Check, X } from "@lucide/svelte";
|
||||
import ColorPicker from "$lib/components/ui/ColorPicker.svelte";
|
||||
import ThemePicker from "$lib/components/ui/theme-picker.svelte";
|
||||
import IconButton from "$lib/components/ui/IconButton.svelte";
|
||||
import type { Wishlist } from "$lib/db/schema";
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import { Card, CardContent } from '$lib/components/ui/card';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import { Pencil, Check, X } from '@lucide/svelte';
|
||||
import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
|
||||
import ThemePicker from '$lib/components/ui/theme-picker.svelte';
|
||||
import IconButton from '$lib/components/ui/IconButton.svelte';
|
||||
import type { Wishlist } from '$lib/db/schema';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
|
||||
let {
|
||||
wishlist,
|
||||
onTitleUpdate,
|
||||
onDescriptionUpdate,
|
||||
onColorUpdate,
|
||||
onEndDateUpdate,
|
||||
onThemeUpdate
|
||||
}: {
|
||||
wishlist: Wishlist;
|
||||
onTitleUpdate: (title: string) => Promise<boolean>;
|
||||
onDescriptionUpdate: (description: string | null) => Promise<boolean>;
|
||||
onColorUpdate: (color: string | null) => void;
|
||||
onEndDateUpdate: (endDate: string | null) => void;
|
||||
onThemeUpdate: (theme: string | null) => void;
|
||||
} = $props();
|
||||
let {
|
||||
wishlist,
|
||||
onTitleUpdate,
|
||||
onDescriptionUpdate,
|
||||
onColorUpdate,
|
||||
onEndDateUpdate,
|
||||
onThemeUpdate
|
||||
}: {
|
||||
wishlist: Wishlist;
|
||||
onTitleUpdate: (title: string) => Promise<boolean>;
|
||||
onDescriptionUpdate: (description: string | null) => Promise<boolean>;
|
||||
onColorUpdate: (color: string | null) => void;
|
||||
onEndDateUpdate: (endDate: string | null) => void;
|
||||
onThemeUpdate: (theme: string | null) => void;
|
||||
} = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
let editingTitle = $state(false);
|
||||
let editingDescription = $state(false);
|
||||
let wishlistTitle = $state(wishlist.title);
|
||||
let wishlistDescription = $state(wishlist.description || "");
|
||||
let wishlistColor = $state<string | null>(wishlist.color);
|
||||
let wishlistTheme = $state<string>(wishlist.theme || 'none');
|
||||
let wishlistEndDate = $state<string | null>(
|
||||
wishlist.endDate
|
||||
? new Date(wishlist.endDate).toISOString().split("T")[0]
|
||||
: null,
|
||||
);
|
||||
let editingTitle = $state(false);
|
||||
let editingDescription = $state(false);
|
||||
let wishlistTitle = $state(wishlist.title);
|
||||
let wishlistDescription = $state(wishlist.description || '');
|
||||
let wishlistColor = $state<string | null>(wishlist.color);
|
||||
let wishlistTheme = $state<string>(wishlist.theme || 'none');
|
||||
let wishlistEndDate = $state<string | null>(
|
||||
wishlist.endDate ? new Date(wishlist.endDate).toISOString().split('T')[0] : null
|
||||
);
|
||||
|
||||
const cardStyle = $derived(getCardStyle(null, wishlistColor));
|
||||
const cardStyle = $derived(getCardStyle(null, wishlistColor));
|
||||
|
||||
async function saveTitle() {
|
||||
if (!wishlistTitle.trim()) {
|
||||
wishlistTitle = wishlist.title;
|
||||
editingTitle = false;
|
||||
return;
|
||||
}
|
||||
async function saveTitle() {
|
||||
if (!wishlistTitle.trim()) {
|
||||
wishlistTitle = wishlist.title;
|
||||
editingTitle = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await onTitleUpdate(wishlistTitle.trim());
|
||||
if (success) {
|
||||
editingTitle = false;
|
||||
} else {
|
||||
wishlistTitle = wishlist.title;
|
||||
editingTitle = false;
|
||||
}
|
||||
}
|
||||
const success = await onTitleUpdate(wishlistTitle.trim());
|
||||
if (success) {
|
||||
editingTitle = false;
|
||||
} else {
|
||||
wishlistTitle = wishlist.title;
|
||||
editingTitle = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveDescription() {
|
||||
const success = await onDescriptionUpdate(wishlistDescription.trim() || null);
|
||||
if (success) {
|
||||
editingDescription = false;
|
||||
} else {
|
||||
wishlistDescription = wishlist.description || "";
|
||||
editingDescription = false;
|
||||
}
|
||||
}
|
||||
async function saveDescription() {
|
||||
const success = await onDescriptionUpdate(wishlistDescription.trim() || null);
|
||||
if (success) {
|
||||
editingDescription = false;
|
||||
} else {
|
||||
wishlistDescription = wishlist.description || '';
|
||||
editingDescription = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleEndDateChange(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
wishlistEndDate = input.value || null;
|
||||
onEndDateUpdate(wishlistEndDate);
|
||||
}
|
||||
function handleEndDateChange(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
wishlistEndDate = input.value || null;
|
||||
onEndDateUpdate(wishlistEndDate);
|
||||
}
|
||||
|
||||
function clearEndDate() {
|
||||
wishlistEndDate = null;
|
||||
onEndDateUpdate(null);
|
||||
}
|
||||
function clearEndDate() {
|
||||
wishlistEndDate = null;
|
||||
onEndDateUpdate(null);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-between gap-4 mb-6">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||||
{#if editingTitle}
|
||||
<Input
|
||||
bind:value={wishlistTitle}
|
||||
class="text-3xl font-bold h-auto py-0 leading-[2.25rem]"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
saveTitle();
|
||||
} else if (e.key === "Escape") {
|
||||
wishlistTitle = wishlist.title;
|
||||
editingTitle = false;
|
||||
}
|
||||
}}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<h1 class="text-3xl font-bold leading-[2.25rem]">{wishlistTitle}</h1>
|
||||
{/if}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
if (editingTitle) {
|
||||
saveTitle();
|
||||
} else {
|
||||
editingTitle = true;
|
||||
}
|
||||
}}
|
||||
color={wishlistColor}
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
aria-label={editingTitle ? "Save title" : "Edit title"}
|
||||
>
|
||||
{#if editingTitle}
|
||||
<Check class="w-4 h-4" />
|
||||
{:else}
|
||||
<Pencil class="w-4 h-4" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<ThemePicker
|
||||
value={wishlistTheme}
|
||||
onValueChange={async (theme) => {
|
||||
wishlistTheme = theme;
|
||||
onThemeUpdate(theme);
|
||||
// Force reactivity by updating the wishlist object
|
||||
wishlist.theme = theme;
|
||||
}}
|
||||
color={wishlistColor}
|
||||
/>
|
||||
<ColorPicker
|
||||
bind:color={wishlistColor}
|
||||
onchange={() => onColorUpdate(wishlistColor)}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||||
{#if editingTitle}
|
||||
<Input
|
||||
bind:value={wishlistTitle}
|
||||
class="text-3xl font-bold h-auto py-0 leading-[2.25rem]"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
saveTitle();
|
||||
} else if (e.key === 'Escape') {
|
||||
wishlistTitle = wishlist.title;
|
||||
editingTitle = false;
|
||||
}
|
||||
}}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<h1 class="text-3xl font-bold leading-[2.25rem]">{wishlistTitle}</h1>
|
||||
{/if}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
if (editingTitle) {
|
||||
saveTitle();
|
||||
} else {
|
||||
editingTitle = true;
|
||||
}
|
||||
}}
|
||||
color={wishlistColor}
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
aria-label={editingTitle ? 'Save title' : 'Edit title'}
|
||||
>
|
||||
{#if editingTitle}
|
||||
<Check class="w-4 h-4" />
|
||||
{:else}
|
||||
<Pencil class="w-4 h-4" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<ThemePicker
|
||||
value={wishlistTheme}
|
||||
onValueChange={async (theme) => {
|
||||
wishlistTheme = theme;
|
||||
onThemeUpdate(theme);
|
||||
// Force reactivity by updating the wishlist object
|
||||
wishlist.theme = theme;
|
||||
}}
|
||||
color={wishlistColor}
|
||||
/>
|
||||
<ColorPicker
|
||||
bind:color={wishlistColor}
|
||||
onchange={() => onColorUpdate(wishlistColor)}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card style={cardStyle}>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<Label for="wishlist-description">{t.form.descriptionOptional}</Label>
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
if (editingDescription) {
|
||||
saveDescription();
|
||||
} else {
|
||||
editingDescription = true;
|
||||
}
|
||||
}}
|
||||
color={wishlistColor}
|
||||
size="sm"
|
||||
class="flex-shrink-0"
|
||||
aria-label={editingDescription ? "Save description" : "Edit description"}
|
||||
>
|
||||
{#if editingDescription}
|
||||
<Check class="w-4 h-4" />
|
||||
{:else}
|
||||
<Pencil class="w-4 h-4" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</div>
|
||||
{#if editingDescription}
|
||||
<Textarea
|
||||
id="wishlist-description"
|
||||
bind:value={wishlistDescription}
|
||||
class="w-full"
|
||||
rows={3}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
wishlistDescription = wishlist.description || "";
|
||||
editingDescription = false;
|
||||
}
|
||||
}}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<div class="w-full py-2 px-3 rounded-md border border-input bg-transparent text-sm min-h-[80px]">
|
||||
{wishlistDescription || t.form.noDescription}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<CardContent class="pt-6 space-y-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<Label for="wishlist-description">{t.form.descriptionOptional}</Label>
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
if (editingDescription) {
|
||||
saveDescription();
|
||||
} else {
|
||||
editingDescription = true;
|
||||
}
|
||||
}}
|
||||
color={wishlistColor}
|
||||
size="sm"
|
||||
class="flex-shrink-0"
|
||||
aria-label={editingDescription ? 'Save description' : 'Edit description'}
|
||||
>
|
||||
{#if editingDescription}
|
||||
<Check class="w-4 h-4" />
|
||||
{:else}
|
||||
<Pencil class="w-4 h-4" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
</div>
|
||||
{#if editingDescription}
|
||||
<Textarea
|
||||
id="wishlist-description"
|
||||
bind:value={wishlistDescription}
|
||||
class="w-full"
|
||||
rows={3}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Escape') {
|
||||
wishlistDescription = wishlist.description || '';
|
||||
editingDescription = false;
|
||||
}
|
||||
}}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="w-full py-2 px-3 rounded-md border border-input bg-transparent text-sm min-h-[80px]"
|
||||
>
|
||||
{wishlistDescription || t.form.noDescription}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
|
||||
<Label for="wishlist-end-date">{t.form.endDateOptional}</Label>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if wishlistEndDate}
|
||||
<IconButton
|
||||
onclick={clearEndDate}
|
||||
color={wishlistColor}
|
||||
size="sm"
|
||||
class="flex-shrink-0"
|
||||
aria-label="Clear end date"
|
||||
>
|
||||
<X class="w-4 h-4" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
<Input
|
||||
id="wishlist-end-date"
|
||||
type="date"
|
||||
value={wishlistEndDate || ""}
|
||||
onchange={handleEndDateChange}
|
||||
class="w-full sm:w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
|
||||
<Label for="wishlist-end-date">{t.form.endDateOptional}</Label>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if wishlistEndDate}
|
||||
<IconButton
|
||||
onclick={clearEndDate}
|
||||
color={wishlistColor}
|
||||
size="sm"
|
||||
class="flex-shrink-0"
|
||||
aria-label="Clear end date"
|
||||
>
|
||||
<X class="w-4 h-4" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
<Input
|
||||
id="wishlist-end-date"
|
||||
type="date"
|
||||
value={wishlistEndDate || ''}
|
||||
onchange={handleEndDateChange}
|
||||
class="w-full sm:w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,125 +1,125 @@
|
||||
<script lang="ts">
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import type { Item } from "$lib/db/schema";
|
||||
import { GripVertical, ExternalLink } from "@lucide/svelte";
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
import { Card, CardContent } from '$lib/components/ui/card';
|
||||
import type { Item } from '$lib/db/schema';
|
||||
import { GripVertical, ExternalLink } from '@lucide/svelte';
|
||||
import { getCardStyle } from '$lib/utils/colors';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { languageStore } from '$lib/stores/language.svelte';
|
||||
import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
|
||||
|
||||
interface Props {
|
||||
item: Item;
|
||||
showImage?: boolean;
|
||||
children?: any;
|
||||
showDragHandle?: boolean;
|
||||
theme?: string | null;
|
||||
wishlistColor?: string | null;
|
||||
}
|
||||
interface Props {
|
||||
item: Item;
|
||||
showImage?: boolean;
|
||||
children?: any;
|
||||
showDragHandle?: boolean;
|
||||
theme?: string | null;
|
||||
wishlistColor?: string | null;
|
||||
}
|
||||
|
||||
let {
|
||||
item,
|
||||
showImage = true,
|
||||
children,
|
||||
showDragHandle = false,
|
||||
theme = null,
|
||||
wishlistColor = null
|
||||
}: Props = $props();
|
||||
let {
|
||||
item,
|
||||
showImage = true,
|
||||
children,
|
||||
showDragHandle = false,
|
||||
theme = null,
|
||||
wishlistColor = null
|
||||
}: Props = $props();
|
||||
|
||||
const t = $derived(languageStore.t);
|
||||
const t = $derived(languageStore.t);
|
||||
|
||||
const currencySymbols: Record<string, string> = {
|
||||
DKK: "kr",
|
||||
EUR: "€",
|
||||
USD: "$",
|
||||
SEK: "kr",
|
||||
NOK: "kr",
|
||||
GBP: "£",
|
||||
};
|
||||
const currencySymbols: Record<string, string> = {
|
||||
DKK: 'kr',
|
||||
EUR: '€',
|
||||
USD: '$',
|
||||
SEK: 'kr',
|
||||
NOK: 'kr',
|
||||
GBP: '£'
|
||||
};
|
||||
|
||||
function formatPrice(
|
||||
price: string | null,
|
||||
currency: string | null,
|
||||
): string {
|
||||
if (!price) return "";
|
||||
const symbol = currency ? currencySymbols[currency] || currency : "kr";
|
||||
const amount = parseFloat(price).toFixed(2);
|
||||
function formatPrice(price: string | null, currency: string | null): string {
|
||||
if (!price) return '';
|
||||
const symbol = currency ? currencySymbols[currency] || currency : 'kr';
|
||||
const amount = parseFloat(price).toFixed(2);
|
||||
|
||||
// For Danish, Swedish, Norwegian kroner, put symbol after the amount
|
||||
if (currency && ["DKK", "SEK", "NOK"].includes(currency)) {
|
||||
return `${amount} ${symbol}`;
|
||||
}
|
||||
// For Danish, Swedish, Norwegian kroner, put symbol after the amount
|
||||
if (currency && ['DKK', 'SEK', 'NOK'].includes(currency)) {
|
||||
return `${amount} ${symbol}`;
|
||||
}
|
||||
|
||||
// For other currencies, put symbol before
|
||||
return `${symbol}${amount}`;
|
||||
}
|
||||
// For other currencies, put symbol before
|
||||
return `${symbol}${amount}`;
|
||||
}
|
||||
|
||||
const cardStyle = $derived(getCardStyle(item.color, wishlistColor));
|
||||
const cardStyle = $derived(getCardStyle(item.color, wishlistColor));
|
||||
</script>
|
||||
|
||||
<Card style={cardStyle} class="relative overflow-hidden">
|
||||
<ThemeCard themeName={theme} color={item.color} showPattern={false} />
|
||||
<CardContent class="p-6 relative z-10">
|
||||
<div class="flex gap-4">
|
||||
{#if showDragHandle}
|
||||
<div
|
||||
class="cursor-grab active:cursor-grabbing hover:bg-accent rounded-md transition-colors self-center shrink-0 p-2 touch-none"
|
||||
aria-label="Drag to reorder"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
style="touch-action: none;"
|
||||
>
|
||||
<GripVertical class="w-6 h-6 text-muted-foreground" />
|
||||
</div>
|
||||
{/if}
|
||||
<ThemeCard themeName={theme} color={item.color} showPattern={false} />
|
||||
<CardContent class="p-6 relative z-10">
|
||||
<div class="flex gap-4">
|
||||
{#if showDragHandle}
|
||||
<div
|
||||
class="cursor-grab active:cursor-grabbing hover:bg-accent rounded-md transition-colors self-center shrink-0 p-2 touch-none"
|
||||
aria-label="Drag to reorder"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
style="touch-action: none;"
|
||||
>
|
||||
<GripVertical class="w-6 h-6 text-muted-foreground" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 flex-1">
|
||||
{#if showImage && item.imageUrl}
|
||||
<img
|
||||
src="/api/image-proxy?url={encodeURIComponent(item.imageUrl)}"
|
||||
alt={item.title}
|
||||
class="w-full md:w-32 h-32 object-cover rounded-lg"
|
||||
onerror={(e) => e.currentTarget.src = item.imageUrl}
|
||||
/>
|
||||
{/if}
|
||||
<div class="flex flex-col md:flex-row gap-4 flex-1">
|
||||
{#if showImage && item.imageUrl}
|
||||
<img
|
||||
src="/api/image-proxy?url={encodeURIComponent(item.imageUrl)}"
|
||||
alt={item.title}
|
||||
class="w-full md:w-32 h-32 object-cover rounded-lg"
|
||||
onerror={(e) => (e.currentTarget.src = item.imageUrl)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1 items-center min-w-0">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg break-words">{item.title}</h3>
|
||||
</div>
|
||||
<div class="flex-1 items-center min-w-0">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg break-words">{item.title}</h3>
|
||||
</div>
|
||||
|
||||
{#if item.description}
|
||||
<p class="text-muted-foreground break-words whitespace-pre-wrap" style="overflow-wrap: anywhere;">{item.description}</p>
|
||||
{/if}
|
||||
{#if item.description}
|
||||
<p
|
||||
class="text-muted-foreground break-words whitespace-pre-wrap"
|
||||
style="overflow-wrap: anywhere;"
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap gap-2 items-center text-sm mt-2">
|
||||
{#if item.price}
|
||||
<span class="font-medium"
|
||||
>{formatPrice(item.price, item.currency)}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 items-center text-sm mt-2">
|
||||
{#if item.price}
|
||||
<span class="font-medium">{formatPrice(item.price, item.currency)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 items-center mt-3">
|
||||
{#if item.link}
|
||||
<Button
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="gap-1.5"
|
||||
>
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
{t.wishlist.viewProduct}
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="flex flex-wrap gap-2 items-center mt-3">
|
||||
{#if item.link}
|
||||
<Button
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="gap-1.5"
|
||||
>
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
{t.wishlist.viewProduct}
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user