feat(ui): add async navbar with corresponding API

Author: tolstovrob

src/features/User/api.ts

@@ -0,0 +1,14 @@
+import { createQuery } from '@tanstack/svelte-query';
+import { backend, type QueryResponse } from '$shared/api';
+import type { IUserCredentials } from './types';
+
+export const session = (): QueryResponse<IUserCredentials> => {
+	return createQuery({
+		queryKey: ['user', 'session'],
+		queryFn: async () => {
+			return await fetch(backend('/session')).then(
+				(data) => data.json() as unknown as IUserCredentials,
+			);
+		},
+	});
+};

src/features/User/index.ts

@@ -0,0 +1,2 @@
+export * from './api';
+export * from './types';

src/features/User/types.ts

@@ -0,0 +1,9 @@
+export interface IUserCredentials {
+	id: number;
+	email: string;
+	firstName: string;
+	lastName: string;
+	avatarURL: string;
+}
+
+export interface IUser extends IUserCredentials {}

src/routes/+layout.svelte

@@ -2,14 +2,16 @@
 	import { queryClient } from '$shared/api';
 	import { QueryClientProvider } from '@tanstack/svelte-query';
 	import { ModeWatcher } from 'mode-watcher';
+	import { Navbar } from '$widgets/Navbar';
 	import '../app.css';
 
 	let { children } = $props();
 </script>
 
 <ModeWatcher />
 <QueryClientProvider client={queryClient}>
-	<main class="container my-8">
+	<Navbar />
+	<main class="container py-8 border-x-[1px] border-border">
 		{@render children()}
 	</main>
 </QueryClientProvider>

src/shared/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	class={cn('bg-muted flex size-full items-center justify-center', className)}
+	{...restProps} />

src/shared/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	class={cn('aspect-square size-full', className)}
+	{...restProps} />

src/shared/components/ui/avatar/avatar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	class={cn('relative flex size-10 shrink-0 overflow-hidden rounded-full', className)}
+	{...restProps} />

src/shared/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};

src/shared/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
+	import { cn } from '$shared/utils.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	class={cn(
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		className,
+	)}
+	{...restProps}>
+	{#snippet children({ checked, indeterminate })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-4" />
+			{:else}
+				<Check class={cn('size-4', !checked && 'text-transparent')} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

src/shared/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from '$shared/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none',
+			className,
+		)}
+		{...restProps} />
+</DropdownMenuPrimitive.Portal>

src/shared/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: DropdownMenuPrimitive.GroupHeadingProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	{...restProps} />

src/shared/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from '$shared/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	class={cn(
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		inset && 'pl-8',
+		className,
+	)}
+	{...restProps} />

src/shared/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from '$shared/utils.js';
+	import { type WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

src/shared/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
+	import Circle from '@lucide/svelte/icons/circle';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	class={cn(
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		className,
+	)}
+	{...restProps}>
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>

src/shared/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	class={cn('bg-muted -mx-1 my-1 h-px', className)}
+	{...restProps} />

src/shared/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type WithElementRef } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+	{...restProps}>
+	{@render children?.()}
+</span>

src/shared/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	class={cn(
+		'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none',
+		className,
+	)}
+	{...restProps} />

src/shared/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '$shared/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	class={cn(
+		'data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		inset && 'pl-8',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+	<ChevronRight class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>