style: format entire codebase with prettier
This commit is contained in:
Rasmus Q
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user