includio-cms 0.1.4 → 0.5.0

package/dist/admin/components/layout/nav-main.svelte

@@ -4,26 +4,23 @@
 	import { sidebarLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import CameraIcon from '@tabler/icons-svelte/icons/camera';
-	import DashboardIcon from '@tabler/icons-svelte/icons/dashboard';
+	import LayoutDashboardIcon from '@tabler/icons-svelte/icons/layout-dashboard';
 	import UsersIcon from '@tabler/icons-svelte/icons/users';
-	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
-	import { getRemotes } from '../../../sveltekit/index.js';
-	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
-	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { page } from '$app/state';
 	import { authClient } from '../../auth-client.js';
+	import { resolve } from '$app/paths';
+	import { cn } from '../../../utils.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
-	const remotes = getRemotes();
 	let session = authClient.useSession();
 
-	const isAdmin = $derived(($session.data?.user as any)?.role === 'admin');
+	const isAdmin = $derived($session.data?.user?.role === 'admin');
 
 	let items: { title: string; url: string; icon?: Icon }[] = $derived([
 		{
 			title: sidebarLang[interfaceLanguage.current].main.dashboard,
 			url: '/admin',
-			icon: DashboardIcon
+			icon: LayoutDashboardIcon
 		},
 		{
 			title: sidebarLang[interfaceLanguage.current].main.media,
@@ -47,61 +44,26 @@
 	}
 </script>
 
-<Sidebar.Group>
+<Sidebar.Group class="px-0 py-1">
 	<Sidebar.Menu>
 		{#each items as item (item.title)}
 			{@const active = isActive(item.url)}
 			<Sidebar.MenuItem>
-				<Sidebar.MenuButton
-					tooltipContent={item.title}
-					class="rounded-lg transition-colors {active
-						? 'bg-primary/10 text-primary font-medium'
-						: 'hover:bg-accent'}"
-				>
+				<Sidebar.MenuButton isActive={active} tooltipContent={item.title}>
 					{#snippet child({ props })}
-						<a {...props} href={item.url}>
+						<a class={cn(props.class)} {...props} href={item.url}>
 							{#if item.icon}
-								<item.icon class="size-4 {active ? 'text-primary' : 'text-muted-foreground'}" />
+								<item.icon
+									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+								/>
 							{/if}
-							<span>{item.title}</span>
+							<span class="{active ? 'text-primary' : 'text-muted-foreground'} flex-1 truncate"
+								>{item.title}</span
+							>
 						</a>
 					{/snippet}
 				</Sidebar.MenuButton>
 			</Sidebar.MenuItem>
 		{/each}
-		{#await remotes.getSingles()}
-			<div class="space-y-2 px-2">
-				<Skeleton class="h-4 w-[200px]" />
-				<Skeleton class="h-4 w-[160px]" />
-			</div>
-		{:then items}
-			{#each items as item (item)}
-				{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
-				{@const url = `/admin/entries/${item.slug}`}
-				{@const active = isActive(url)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton
-						class="rounded-lg transition-colors {active
-							? 'bg-primary/10 text-primary font-medium'
-							: 'hover:bg-accent'}"
-					>
-						{#snippet child({ props })}
-							<a {...props} href={url}>
-								{#if item.sidebarIcon}
-									<item.sidebarIcon
-										class="size-4 {active ? 'text-primary' : 'text-muted-foreground'}"
-									/>
-								{:else}
-									<SettingsIcon
-										class="size-4 {active ? 'text-primary' : 'text-muted-foreground'}"
-									/>
-								{/if}
-								<span>{name}</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		{/await}
 	</Sidebar.Menu>
 </Sidebar.Group>

package/dist/admin/components/layout/nav-search.svelte

@@ -45,14 +45,15 @@
 {#await getData() then { singles, collections, forms }}
 	<button
 		onclick={() => (open = true)}
-		class="text-muted-foreground mx-2 flex w-[calc(100%-1rem)] items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/10"
+		class="bg-muted text-text-light hover:border-sidebar-border hover:bg-lavender-lighter hover:text-muted-foreground focus-visible:outline-primary mx-2 mt-2 mb-1 flex min-h-9 cursor-pointer items-center gap-2 rounded-[8px] border border-transparent px-2.5 py-[7px] font-sans text-[13px] transition-all group-data-[collapsible=icon]:mx-1 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-[7px] focus-visible:outline-2 focus-visible:outline-offset-2"
+		aria-label={sidebarLang[interfaceLanguage.current].search.placeholder}
 	>
 		<SearchIcon class="size-4 shrink-0" />
-		<span class="flex-1 truncate text-left"
+		<span class="flex-1 truncate text-center group-data-[collapsible=icon]:hidden"
 			>{sidebarLang[interfaceLanguage.current].search.placeholder}</span
 		>
 		<kbd
-			class="bg-muted text-muted-foreground shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium"
+			class="border-sidebar-border text-text-light inline-flex shrink-0 items-center gap-0.5 rounded border bg-white px-[5px] py-0.5 font-sans text-[10px] leading-none font-semibold group-data-[collapsible=icon]:hidden"
 			>⌘K</kbd
 		>
 	</button>

package/dist/admin/components/layout/nav-singletons.svelte

@@ -1,24 +1,66 @@
 <script lang="ts">
 	import * as Sidebar from '../../../components/ui/sidebar/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { sidebarLang } from './lang.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
+	import { page } from '$app/state';
+	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 
-	let { items }: { items: { name: string; url: string }[] } = $props();
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	function isActive(url: string) {
+		return page.url.pathname.startsWith(url);
+	}
 </script>
 
-<Sidebar.Group>
-	<Sidebar.GroupLabel>Singles</Sidebar.GroupLabel>
-	<Sidebar.GroupContent class="flex flex-col gap-2">
+{#await remotes.getSingles()}
+	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+		<Sidebar.GroupLabel
+			>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel
+		>
 		<Sidebar.Menu>
-			{#each items as item (item.name)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton tooltipContent={item.name}>
-						{#snippet child({ props })}
-							<a {...props} href={item.url}>
-								<span>{item.name}</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
+			<div class="space-y-2 px-2">
+				<Skeleton class="h-4 w-[200px]" />
+				<Skeleton class="h-4 w-[160px]" />
+			</div>
 		</Sidebar.Menu>
-	</Sidebar.GroupContent>
-</Sidebar.Group>
+	</Sidebar.Group>
+{:then items}
+	{#if items.length > 0}
+		<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+			<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
+				>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel
+			>
+			<Sidebar.Menu>
+				{#each items as item (item)}
+					{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
+					{@const url = `/admin/entries/${item.slug}`}
+					{@const active = isActive(url)}
+					<Sidebar.MenuItem>
+						<Sidebar.MenuButton isActive={active} tooltipContent={name}>
+							{#snippet child({ props })}
+								<a {...props} href={url}>
+									{#if item.sidebarIcon}
+										<item.sidebarIcon
+											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+										/>
+									{:else}
+										<SettingsIcon
+											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+										/>
+									{/if}
+									<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
+										>{name}</span
+									>
+								</a>
+							{/snippet}
+						</Sidebar.MenuButton>
+					</Sidebar.MenuItem>
+				{/each}
+			</Sidebar.Menu>
+		</Sidebar.Group>
+	{/if}
+{/await}

package/dist/admin/components/layout/nav-singletons.svelte.d.ts

@@ -1,9 +1,18 @@
-type $$ComponentProps = {
-    items: {
-        name: string;
-        url: string;
-    }[];
-};
-declare const NavSingletons: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavSingletons = ReturnType<typeof NavSingletons>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NavSingletons: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavSingletons = InstanceType<typeof NavSingletons>;
 export default NavSingletons;

package/dist/admin/components/layout/site-header.svelte

@@ -1,37 +1,98 @@
 <script lang="ts">
 	import * as Sidebar from '../../../components/ui/sidebar/index.js';
+	import * as Avatar from '../../../components/ui/avatar/index.js';
+	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
 	import NavBreadcrumbs from './nav-breadcrumbs.svelte';
-	import HeaderActions from './header-actions.svelte';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import EyeIcon from '@tabler/icons-svelte/icons/eye';
+	import ExternalLinkIcon from '@tabler/icons-svelte/icons/external-link';
+	import LogoutIcon from '@tabler/icons-svelte/icons/logout';
+	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import Button from '../../../components/ui/button/button.svelte';
+	import { authClient } from '../../auth-client.js';
+	import { toast } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+	import { toastLang } from '../../toast-lang.js';
+	import { sidebarLang } from './lang.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
+	let session = authClient.useSession();
 
-	const lang: Record<InterfaceLanguage, { viewSite: string }> = {
+	const lang: Record<InterfaceLanguage, { openSite: string }> = {
 		pl: {
-			viewSite: 'Zobacz witrynę'
+			openSite: 'Otwórz stronę'
 		},
 		en: {
-			viewSite: 'View Site'
+			openSite: 'Open site'
 		}
 	};
+
+	async function onLogout() {
+		await authClient.signOut({
+			fetchOptions: {
+				onSuccess: async () => {
+					toast.success(toastLang[interfaceLanguage.current].logout.success);
+					goto('/admin/login');
+				}
+			}
+		});
+	}
 </script>
 
 <header
-	class="flex h-(--header-height) shrink-0 items-center gap-2 border-b border-sidebar-border bg-white/60 backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height) dark:bg-slate-900/60"
+	class="flex h-(--header-height) shrink-0 items-center gap-2 border-b border-sidebar-border bg-background/60 backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
 >
-	<div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-		<Sidebar.Trigger class="-ml-1" />
-		<NavBreadcrumbs />
+	<div class="flex w-full items-center px-5">
+		<div class="flex items-center gap-3">
+			<Sidebar.Trigger class="-ml-1" />
+			<NavBreadcrumbs />
+		</div>
 
 		<div class="ml-auto flex items-center gap-2">
-			<HeaderActions />
-			<Button href="/" variant="gradient" size="sm" target="_blank" rel="noopener noreferrer">
-				<EyeIcon class="size-4" />
-				<span class="hidden sm:inline">{lang[interfaceLanguage.current].viewSite}</span>
+			<Button
+				href="/"
+				variant="outline"
+				size="sm"
+				class="text-[13px] font-medium text-primary hover:bg-[var(--lavender-lighter)] hover:border-[var(--lavender)]"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<ExternalLinkIcon class="size-3.5" />
+				<span class="hidden sm:inline">{lang[interfaceLanguage.current].openSite}</span>
 			</Button>
+			{#if $session.data}
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger class="cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+						<Avatar.Root class="size-[30px]">
+							<Avatar.Image src={$session.data.user.image} alt={$session.data.user.name} />
+							<Avatar.Fallback class="bg-gradient-to-br from-[var(--lavender)] to-primary text-[12px] font-bold text-white">
+								{$session.data.user.name
+									.split(' ')
+									.map((n) => n[0])
+									.join('')
+									.toUpperCase()
+									.slice(0, 2)}
+							</Avatar.Fallback>
+						</Avatar.Root>
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content align="end" class="w-56">
+						<DropdownMenu.Label class="flex flex-col gap-0.5">
+							<span class="text-sm font-medium">{$session.data.user.name}</span>
+							<span class="text-xs font-normal text-muted-foreground">{$session.data.user.email}</span>
+						</DropdownMenu.Label>
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item onSelect={() => goto('/admin/account')}>
+							<SettingsIcon class="mr-2 size-4" />
+							{sidebarLang[interfaceLanguage.current].user.account}
+						</DropdownMenu.Item>
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item onSelect={onLogout} variant="destructive">
+							<LogoutIcon class="mr-2 size-4" />
+							{sidebarLang[interfaceLanguage.current].user.logout}
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			{/if}
 		</div>
 	</div>
 </header>

package/dist/admin/components/media/alt-input.svelte

@@ -54,6 +54,14 @@
 
 	let generating = $state(false);
 
+	let aiAvailable = $state(false);
+
+	$effect(() => {
+		remotes.isAIAvailable().then((available) => {
+			aiAvailable = available;
+		});
+	});
+
 	async function generateAltText() {
 		if (!input) return;
 
@@ -95,26 +103,28 @@
 		disabled={generating}>{lang[interfaceLanguage.current].saveLabel}</Button
 	>
 
-	<Tooltip.Provider>
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				{#snippet child({ props })}
-					<Button
-						{...props}
-						variant="outline"
-						class="shrink-0"
-						size="icon"
-						onclick={generateAltText}
-						disabled={generating}
-						aria-label={lang[interfaceLanguage.current].aiTooltip}
-					>
-						<Sparkles class={generating ? 'animate-bounce' : ''} />
-					</Button>
-				{/snippet}
-			</Tooltip.Trigger>
-			<Tooltip.Content>
-				<p>{lang[interfaceLanguage.current].aiTooltip}</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
-	</Tooltip.Provider>
+	{#if aiAvailable}
+		<Tooltip.Provider>
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="outline"
+							class="shrink-0"
+							size="icon"
+							onclick={generateAltText}
+							disabled={generating}
+							aria-label={lang[interfaceLanguage.current].aiTooltip}
+						>
+							<Sparkles class={generating ? 'animate-bounce' : ''} />
+						</Button>
+					{/snippet}
+				</Tooltip.Trigger>
+				<Tooltip.Content>
+					<p>{lang[interfaceLanguage.current].aiTooltip}</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	{/if}
 </div>