style: format entire codebase with prettier

This commit is contained in:
Rasmus Q
2026-03-15 21:02:57 +00:00
parent 47e02d81c3
commit f739288866
93 changed files with 5334 additions and 4976 deletions
+153 -149
View File
@@ -5,190 +5,194 @@ import { wishlists, savedWishlists, users } from '$lib/db/schema';
import { eq, and } from 'drizzle-orm';
export const load: PageServerLoad = async (event) => {
const session = await event.locals.auth();
const session = await event.locals.auth();
// Allow anonymous users to access dashboard for local wishlists
if (!session?.user?.id) {
return {
user: null,
wishlists: [],
savedWishlists: [],
isAuthenticated: false
};
}
// Allow anonymous users to access dashboard for local wishlists
if (!session?.user?.id) {
return {
user: null,
wishlists: [],
savedWishlists: [],
isAuthenticated: false
};
}
// Fetch user with theme
const user = await db.query.users.findFirst({
where: eq(users.id, session.user.id)
});
// Fetch user with theme
const user = await db.query.users.findFirst({
where: eq(users.id, session.user.id)
});
const userWishlists = await db.query.wishlists.findMany({
where: eq(wishlists.userId, session.user.id),
with: {
items: {
orderBy: (items, { asc }) => [asc(items.order)]
},
user: true
},
orderBy: (wishlists, { desc }) => [desc(wishlists.createdAt)]
});
const userWishlists = await db.query.wishlists.findMany({
where: eq(wishlists.userId, session.user.id),
with: {
items: {
orderBy: (items, { asc }) => [asc(items.order)]
},
user: true
},
orderBy: (wishlists, { desc }) => [desc(wishlists.createdAt)]
});
const saved = await db.query.savedWishlists.findMany({
where: eq(savedWishlists.userId, session.user.id),
with: {
wishlist: {
with: {
items: {
orderBy: (items, { asc }) => [asc(items.order)]
},
user: true
}
}
},
orderBy: (savedWishlists, { desc }) => [desc(savedWishlists.createdAt)]
});
const saved = await db.query.savedWishlists.findMany({
where: eq(savedWishlists.userId, session.user.id),
with: {
wishlist: {
with: {
items: {
orderBy: (items, { asc }) => [asc(items.order)]
},
user: true
}
}
},
orderBy: (savedWishlists, { desc }) => [desc(savedWishlists.createdAt)]
});
// Map saved wishlists to include ownerToken from savedWishlists table (not from wishlist)
// This ensures users only see ownerToken if they claimed via edit link
const savedWithAccess = saved.map(s => ({
...s,
wishlist: s.wishlist ? {
...s.wishlist,
// Override ownerToken: use the one stored in savedWishlists (which is null for public saves)
ownerToken: s.ownerToken,
// Keep publicToken as-is for viewing
publicToken: s.wishlist.publicToken
} : null
}));
// Map saved wishlists to include ownerToken from savedWishlists table (not from wishlist)
// This ensures users only see ownerToken if they claimed via edit link
const savedWithAccess = saved.map((s) => ({
...s,
wishlist: s.wishlist
? {
...s.wishlist,
// Override ownerToken: use the one stored in savedWishlists (which is null for public saves)
ownerToken: s.ownerToken,
// Keep publicToken as-is for viewing
publicToken: s.wishlist.publicToken
}
: null
}));
return {
user: user,
wishlists: userWishlists,
savedWishlists: savedWithAccess,
isAuthenticated: true
};
return {
user: user,
wishlists: userWishlists,
savedWishlists: savedWithAccess,
isAuthenticated: true
};
};
export const actions: Actions = {
toggleFavorite: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
toggleFavorite: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
const formData = await request.formData();
const wishlistId = formData.get('wishlistId') as string;
const isFavorite = formData.get('isFavorite') === 'true';
const formData = await request.formData();
const wishlistId = formData.get('wishlistId') as string;
const isFavorite = formData.get('isFavorite') === 'true';
if (!wishlistId) {
return { success: false, error: 'Wishlist ID is required' };
}
if (!wishlistId) {
return { success: false, error: 'Wishlist ID is required' };
}
await db.update(wishlists)
.set({ isFavorite: !isFavorite, updatedAt: new Date() })
.where(eq(wishlists.id, wishlistId));
await db
.update(wishlists)
.set({ isFavorite: !isFavorite, updatedAt: new Date() })
.where(eq(wishlists.id, wishlistId));
return { success: true };
},
return { success: true };
},
toggleSavedFavorite: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
toggleSavedFavorite: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
const formData = await request.formData();
const savedWishlistId = formData.get('savedWishlistId') as string;
const isFavorite = formData.get('isFavorite') === 'true';
const formData = await request.formData();
const savedWishlistId = formData.get('savedWishlistId') as string;
const isFavorite = formData.get('isFavorite') === 'true';
if (!savedWishlistId) {
return { success: false, error: 'Saved wishlist ID is required' };
}
if (!savedWishlistId) {
return { success: false, error: 'Saved wishlist ID is required' };
}
await db.update(savedWishlists)
.set({ isFavorite: !isFavorite })
.where(eq(savedWishlists.id, savedWishlistId));
await db
.update(savedWishlists)
.set({ isFavorite: !isFavorite })
.where(eq(savedWishlists.id, savedWishlistId));
return { success: true };
},
return { success: true };
},
unsaveWishlist: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
unsaveWishlist: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
const formData = await request.formData();
const savedWishlistId = formData.get('savedWishlistId') as string;
const formData = await request.formData();
const savedWishlistId = formData.get('savedWishlistId') as string;
if (!savedWishlistId) {
return { success: false, error: 'Saved wishlist ID is required' };
}
if (!savedWishlistId) {
return { success: false, error: 'Saved wishlist ID is required' };
}
await db.delete(savedWishlists)
.where(and(
eq(savedWishlists.id, savedWishlistId),
eq(savedWishlists.userId, session.user.id)
));
await db
.delete(savedWishlists)
.where(
and(eq(savedWishlists.id, savedWishlistId), eq(savedWishlists.userId, session.user.id))
);
return { success: true };
},
return { success: true };
},
deleteWishlist: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
deleteWishlist: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
const formData = await request.formData();
const wishlistId = formData.get('wishlistId') as string;
const formData = await request.formData();
const wishlistId = formData.get('wishlistId') as string;
if (!wishlistId) {
return { success: false, error: 'Wishlist ID is required' };
}
if (!wishlistId) {
return { success: false, error: 'Wishlist ID is required' };
}
await db.delete(wishlists)
.where(and(
eq(wishlists.id, wishlistId),
eq(wishlists.userId, session.user.id)
));
await db
.delete(wishlists)
.where(and(eq(wishlists.id, wishlistId), eq(wishlists.userId, session.user.id)));
return { success: true };
},
return { success: true };
},
updateDashboardTheme: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
updateDashboardTheme: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
const formData = await request.formData();
const theme = formData.get('theme') as string;
const formData = await request.formData();
const theme = formData.get('theme') as string;
if (!theme) {
return { success: false, error: 'Theme is required' };
}
if (!theme) {
return { success: false, error: 'Theme is required' };
}
await db.update(users)
.set({ dashboardTheme: theme, updatedAt: new Date() })
.where(eq(users.id, session.user.id));
await db
.update(users)
.set({ dashboardTheme: theme, updatedAt: new Date() })
.where(eq(users.id, session.user.id));
return { success: true };
},
return { success: true };
},
updateDashboardColor: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
updateDashboardColor: async ({ request, locals }) => {
const session = await locals.auth();
if (!session?.user?.id) {
throw redirect(303, '/signin');
}
const formData = await request.formData();
const color = formData.get('color') as string | null;
const formData = await request.formData();
const color = formData.get('color') as string | null;
await db.update(users)
.set({ dashboardColor: color, updatedAt: new Date() })
.where(eq(users.id, session.user.id));
await db
.update(users)
.set({ dashboardColor: color, updatedAt: new Date() })
.where(eq(users.id, session.user.id));
return { success: true };
}
return { success: true };
}
};
+258 -234
View File
@@ -1,255 +1,279 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import type { PageData } from './$types';
import PageContainer from '$lib/components/layout/PageContainer.svelte';
import DashboardHeader from '$lib/components/layout/DashboardHeader.svelte';
import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
import LocalWishlistsSection from '$lib/components/dashboard/LocalWishlistsSection.svelte';
import { enhance } from '$app/forms';
import { Star } from '@lucide/svelte';
import { languageStore } from '$lib/stores/language.svelte';
import { Button } from '$lib/components/ui/button';
import type { PageData } from './$types';
import PageContainer from '$lib/components/layout/PageContainer.svelte';
import DashboardHeader from '$lib/components/layout/DashboardHeader.svelte';
import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
import LocalWishlistsSection from '$lib/components/dashboard/LocalWishlistsSection.svelte';
import { enhance } from '$app/forms';
import { Star } from '@lucide/svelte';
import { languageStore } from '$lib/stores/language.svelte';
let { data }: { data: PageData } = $props();
let { data }: { data: PageData } = $props();
function getInitialTheme() {
if (data.isAuthenticated) {
return data.user?.dashboardTheme || 'none';
} else {
if (typeof window !== 'undefined') {
return localStorage.getItem('dashboardTheme') || 'none';
}
return 'none';
}
}
function getInitialTheme() {
if (data.isAuthenticated) {
return data.user?.dashboardTheme || 'none';
} else {
if (typeof window !== 'undefined') {
return localStorage.getItem('dashboardTheme') || 'none';
}
return 'none';
}
}
function getInitialColor() {
if (data.isAuthenticated) {
return data.user?.dashboardColor || null;
} else {
if (typeof window !== 'undefined') {
return localStorage.getItem('dashboardColor') || null;
}
return null;
}
}
function getInitialColor() {
if (data.isAuthenticated) {
return data.user?.dashboardColor || null;
} else {
if (typeof window !== 'undefined') {
return localStorage.getItem('dashboardColor') || null;
}
return null;
}
}
let currentTheme = $state(getInitialTheme());
let currentColor = $state(getInitialColor());
let currentTheme = $state(getInitialTheme());
let currentColor = $state(getInitialColor());
function handleThemeUpdate(theme: string | null) {
currentTheme = theme || 'none';
function handleThemeUpdate(theme: string | null) {
currentTheme = theme || 'none';
if (!data.isAuthenticated && typeof window !== 'undefined') {
localStorage.setItem('dashboardTheme', currentTheme);
}
}
if (!data.isAuthenticated && typeof window !== 'undefined') {
localStorage.setItem('dashboardTheme', currentTheme);
}
}
function handleColorUpdate(color: string | null) {
currentColor = color;
function handleColorUpdate(color: string | null) {
currentColor = color;
if (!data.isAuthenticated && typeof window !== 'undefined') {
if (color) {
localStorage.setItem('dashboardColor', color);
} else {
localStorage.removeItem('dashboardColor');
}
}
}
if (!data.isAuthenticated && typeof window !== 'undefined') {
if (color) {
localStorage.setItem('dashboardColor', color);
} else {
localStorage.removeItem('dashboardColor');
}
}
}
const t = $derived(languageStore.t);
const t = $derived(languageStore.t);
const myWishlists = $derived(() => data.wishlists || []);
const myWishlists = $derived(() => data.wishlists || []);
const claimedWishlists = $derived(() => {
return (data.savedWishlists || [])
.filter(saved => saved.wishlist?.ownerToken)
.map(saved => ({
...saved.wishlist,
isFavorite: saved.isFavorite,
isClaimed: true,
savedId: saved.id
}));
});
const claimedWishlists = $derived(() => {
return (data.savedWishlists || [])
.filter((saved) => saved.wishlist?.ownerToken)
.map((saved) => ({
...saved.wishlist,
isFavorite: saved.isFavorite,
isClaimed: true,
savedId: saved.id
}));
});
const savedWishlists = $derived(() => {
return (data.savedWishlists || []).filter(saved => !saved.wishlist?.ownerToken);
});
const savedWishlists = $derived(() => {
return (data.savedWishlists || []).filter((saved) => !saved.wishlist?.ownerToken);
});
</script>
<PageContainer theme={currentTheme} themeColor={currentColor}>
<DashboardHeader
userName={data.user?.name}
userEmail={data.user?.email}
dashboardTheme={currentTheme}
dashboardColor={currentColor}
isAuthenticated={data.isAuthenticated}
onThemeUpdate={handleThemeUpdate}
onColorUpdate={handleColorUpdate}
/>
<DashboardHeader
userName={data.user?.name}
userEmail={data.user?.email}
dashboardTheme={currentTheme}
dashboardColor={currentColor}
isAuthenticated={data.isAuthenticated}
onThemeUpdate={handleThemeUpdate}
onColorUpdate={handleColorUpdate}
/>
{#if data.isAuthenticated}
<WishlistSection
title={t.dashboard.myWishlists}
description={t.dashboard.myWishlistsDescription}
items={myWishlists()}
emptyMessage={t.dashboard.emptyWishlists}
emptyActionLabel={t.dashboard.emptyWishlistsAction}
emptyActionHref="/"
showCreateButton={true}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
>
{#snippet actions(wishlist, unlocked)}
<div class="flex gap-2 flex-wrap">
<form method="POST" action="?/toggleFavorite" use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}>
<input type="hidden" name="wishlistId" value={wishlist.id} />
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
<Button type="submit" size="sm" variant="outline">
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
</Button>
</form>
<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}
<form method="POST" action="?/deleteWishlist" use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}>
<input type="hidden" name="wishlistId" value={wishlist.id} />
<Button type="submit" size="sm" variant="destructive">
{t.dashboard.delete}
</Button>
</form>
{/if}
</div>
{/snippet}
</WishlistSection>
{#if data.isAuthenticated}
<WishlistSection
title={t.dashboard.myWishlists}
description={t.dashboard.myWishlistsDescription}
items={myWishlists()}
emptyMessage={t.dashboard.emptyWishlists}
emptyActionLabel={t.dashboard.emptyWishlistsAction}
emptyActionHref="/"
showCreateButton={true}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
>
{#snippet actions(wishlist, unlocked)}
<div class="flex gap-2 flex-wrap">
<form
method="POST"
action="?/toggleFavorite"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="wishlistId" value={wishlist.id} />
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
<Button type="submit" size="sm" variant="outline">
<Star class={wishlist.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
</Button>
</form>
<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}
<form
method="POST"
action="?/deleteWishlist"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="wishlistId" value={wishlist.id} />
<Button type="submit" size="sm" variant="destructive">
{t.dashboard.delete}
</Button>
</form>
{/if}
</div>
{/snippet}
</WishlistSection>
<LocalWishlistsSection
isAuthenticated={data.isAuthenticated}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
/>
<LocalWishlistsSection
isAuthenticated={data.isAuthenticated}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
/>
<WishlistSection
title={t.dashboard.claimedWishlists}
description={t.dashboard.claimedWishlistsDescription}
items={claimedWishlists()}
emptyMessage={t.dashboard.emptyClaimedWishlists}
emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
hideIfEmpty={true}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
>
{#snippet actions(wishlist, unlocked)}
<div class="flex gap-2 flex-wrap">
<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}>
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
<Button type="submit" size="sm" variant="outline">
<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
</Button>
</form>
<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}
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}>
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
<Button type="submit" size="sm" variant="destructive">
{t.dashboard.unclaim}
</Button>
</form>
{/if}
</div>
{/snippet}
</WishlistSection>
<WishlistSection
title={t.dashboard.claimedWishlists}
description={t.dashboard.claimedWishlistsDescription}
items={claimedWishlists()}
emptyMessage={t.dashboard.emptyClaimedWishlists}
emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
hideIfEmpty={true}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
>
{#snippet actions(wishlist, unlocked)}
<div class="flex gap-2 flex-wrap">
<form
method="POST"
action="?/toggleSavedFavorite"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
<Button type="submit" size="sm" variant="outline">
<Star class={wishlist.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
</Button>
</form>
<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}
<form
method="POST"
action="?/unsaveWishlist"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
<Button type="submit" size="sm" variant="destructive">
{t.dashboard.unclaim}
</Button>
</form>
{/if}
</div>
{/snippet}
</WishlistSection>
<WishlistSection
title={t.dashboard.savedWishlists}
description={t.dashboard.savedWishlistsDescription}
items={savedWishlists()}
emptyMessage={t.dashboard.emptySavedWishlists}
emptyDescription={t.dashboard.emptySavedWishlistsDescription}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
hideIfEmpty={true}
>
{#snippet actions(saved, unlocked)}
<div class="flex gap-2 flex-wrap">
<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}>
<input type="hidden" name="savedWishlistId" value={saved.id} />
<input type="hidden" name="isFavorite" value={saved.isFavorite} />
<Button type="submit" size="sm" variant="outline">
<Star class={saved.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
</Button>
</form>
<Button
size="sm"
onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
>
{t.dashboard.viewWishlist}
</Button>
{#if unlocked}
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}>
<input type="hidden" name="savedWishlistId" value={saved.id} />
<Button type="submit" size="sm" variant="destructive">
{t.dashboard.unsave}
</Button>
</form>
{/if}
</div>
{/snippet}
</WishlistSection>
{/if}
<WishlistSection
title={t.dashboard.savedWishlists}
description={t.dashboard.savedWishlistsDescription}
items={savedWishlists()}
emptyMessage={t.dashboard.emptySavedWishlists}
emptyDescription={t.dashboard.emptySavedWishlistsDescription}
fallbackColor={currentColor}
fallbackTheme={currentTheme}
hideIfEmpty={true}
>
{#snippet actions(saved, unlocked)}
<div class="flex gap-2 flex-wrap">
<form
method="POST"
action="?/toggleSavedFavorite"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="savedWishlistId" value={saved.id} />
<input type="hidden" name="isFavorite" value={saved.isFavorite} />
<Button type="submit" size="sm" variant="outline">
<Star class={saved.isFavorite ? 'fill-yellow-500 text-yellow-500' : ''} />
</Button>
</form>
<Button
size="sm"
onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
>
{t.dashboard.viewWishlist}
</Button>
{#if unlocked}
<form
method="POST"
action="?/unsaveWishlist"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="savedWishlistId" value={saved.id} />
<Button type="submit" size="sm" variant="destructive">
{t.dashboard.unsave}
</Button>
</form>
{/if}
</div>
{/snippet}
</WishlistSection>
{/if}
</PageContainer>