work on the frontend for the movies

web/src/lib/components/ui/menubar/index.ts

@@ -0,0 +1,51 @@
+import {Menubar as MenubarPrimitive} from "bits-ui";
+import Root from "./menubar.svelte";
+import CheckboxItem from "./menubar-checkbox-item.svelte";
+import Content from "./menubar-content.svelte";
+import Item from "./menubar-item.svelte";
+import GroupHeading from "./menubar-group-heading.svelte";
+import RadioItem from "./menubar-radio-item.svelte";
+import Separator from "./menubar-separator.svelte";
+import Shortcut from "./menubar-shortcut.svelte";
+import SubContent from "./menubar-sub-content.svelte";
+import SubTrigger from "./menubar-sub-trigger.svelte";
+import Trigger from "./menubar-trigger.svelte";
+
+const Menu = MenubarPrimitive.Menu;
+const Group = MenubarPrimitive.Group;
+const Sub = MenubarPrimitive.Sub;
+const RadioGroup = MenubarPrimitive.RadioGroup;
+
+export {
+    Root,
+    CheckboxItem,
+    Content,
+    Item,
+    GroupHeading,
+    RadioItem,
+    Separator,
+    Shortcut,
+    SubContent,
+    SubTrigger,
+    Trigger,
+    Menu,
+    Group,
+    Sub,
+    RadioGroup,
+    //
+    Root as Menubar,
+    CheckboxItem as MenubarCheckboxItem,
+    Content as MenubarContent,
+    Item as MenubarItem,
+    GroupHeading as MenubarGroupHeading,
+    RadioItem as MenubarRadioItem,
+    Separator as MenubarSeparator,
+    Shortcut as MenubarShortcut,
+    SubContent as MenubarSubContent,
+    SubTrigger as MenubarSubTrigger,
+    Trigger as MenubarTrigger,
+    Menu as MenubarMenu,
+    Group as MenubarGroup,
+    Sub as MenubarSub,
+    RadioGroup as MenubarRadioGroup,
+};

web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import {Menubar as MenubarPrimitive, type WithoutChildrenOrChild} from "bits-ui";
+    import Check from "@lucide/svelte/icons/check";
+    import Minus from "@lucide/svelte/icons/minus";
+    import {cn} from "$lib/utils.js";
+    import type {Snippet} from "svelte";
+
+    let {
+        ref = $bindable(null),
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        class: className,
+        children: childrenProp,
+        ...restProps
+    }: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+        children?: Snippet;
+    } = $props();
+</script>
+
+<MenubarPrimitive.CheckboxItem
+        {...restProps}
+        bind:checked
+        bind:indeterminate
+        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
+	)}
+>
+    {#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}
+</MenubarPrimitive.CheckboxItem>

web/src/lib/components/ui/menubar/menubar-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import {Menubar as MenubarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        sideOffset = 8,
+        alignOffset = -4,
+        align = "start",
+        side = "bottom",
+        portalProps,
+        ...restProps
+    }: MenubarPrimitive.ContentProps & {
+        portalProps?: MenubarPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<MenubarPrimitive.Portal {...portalProps}>
+    <MenubarPrimitive.Content
+            {...restProps}
+            {align}
+            {alignOffset}
+            bind:ref
+            class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
+			className
+		)}
+            {side}
+            {sideOffset}
+    />
+</MenubarPrimitive.Portal>

web/src/lib/components/ui/menubar/menubar-group-heading.svelte

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

web/src/lib/components/ui/menubar/menubar-item.svelte

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

web/src/lib/components/ui/menubar/menubar-radio-item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import {Menubar as MenubarPrimitive, type WithoutChild} from "bits-ui";
+    import Circle from "@lucide/svelte/icons/circle";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children: childrenProp,
+        ...restProps
+    }: WithoutChild<MenubarPrimitive.RadioItemProps> = $props();
+</script>
+
+<MenubarPrimitive.RadioItem
+        {...restProps}
+        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
+	)}
+>
+    {#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}
+</MenubarPrimitive.RadioItem>

web/src/lib/components/ui/menubar/menubar-separator.svelte

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

web/src/lib/components/ui/menubar/menubar-shortcut.svelte

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

web/src/lib/components/ui/menubar/menubar-sub-content.svelte

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

web/src/lib/components/ui/menubar/menubar-sub-trigger.svelte

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

web/src/lib/components/ui/menubar/menubar-trigger.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {Menubar as MenubarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: MenubarPrimitive.TriggerProps = $props();
+</script>
+
+<MenubarPrimitive.Trigger
+        {...restProps}
+        bind:ref
+        class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
+		className
+	)}
+/>

web/src/lib/components/ui/menubar/menubar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {Menubar as MenubarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: MenubarPrimitive.RootProps = $props();
+</script>
+
+<MenubarPrimitive.Root
+        {...restProps}
+        bind:ref
+        class={cn(
+		"bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm",
+		className
+	)}
+/>