feat(pages): home page base

packages/app/src/modules/app/components/app-footer.vue

@@ -0,0 +1,113 @@
+<script setup>
+const localePath = useLocalePath();
+
+const sections = computed(() => [
+  {
+    title: 'Lorem',
+    items: [
+      { label: 'Foo', to: '/foo' },
+      { label: 'Bar', to: '/bar' },
+      { label: 'Baz', to: '/baz' },
+    ],
+  },
+  {
+    title: 'Ipsum',
+    items: [
+      { label: 'Foo', to: '/foo' },
+      { label: 'Bar', to: '/bar' },
+      { label: 'Baz', to: '/baz' },
+    ],
+  },
+  {
+    title: 'Dolor',
+    items: [
+      { label: 'Foo', to: '/foo' },
+      { label: 'Bar', to: '/bar' },
+      { label: 'Baz', to: '/baz' },
+    ],
+  },
+
+]);
+
+const socialLinks = [
+  {
+    icon: 'i-tabler-brand-github',
+    href: 'https://github.com/CorentinTh/it-tools',
+    label: 'GitHub',
+  },
+  {
+    icon: 'i-tabler-brand-x',
+    href: 'https://x.com/ittoolsdottech',
+    label: 'X',
+  },
+  {
+    icon: 'i-tabler-coffee',
+    href: 'https://buymeacoffee.com/cthmsst',
+    label: 'Support the project',
+  },
+];
+</script>
+
+<template>
+  <footer class="bg-card border-t border-border">
+    <div class="py-12 px-6 max-w-screen-xl mx-auto ">
+      <div class="flex items-start justify-between flex-col md:flex-row gap-12">
+        <div>
+          <div class="flex items-center gap-2">
+            <NuxtLink :to="localePath('/')" class="text-2xl font-semibold border-b border-transparent hover:no-underline h-auto py-0 px-1 ml--1 rounded-none !transition-border-color-250 group text-muted-foreground flex items-center gap-1">
+              <span class="font-bold group-hover:text-foreground transition">IT</span>
+              <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 pt-0.5 ml-1 group-hover:text-primary transition">TOOLS</span>
+            </NuxtLink>
+          </div>
+
+          <div class="flex items-center gap-2 mt-4">
+            <!-- {socialLinks.map(({ icon, href, label }) => (
+            <a href="{href}" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" aria-label="{label}">
+              <div class="{icon}" />
+            </a>
+            ))} -->
+            <a
+              v-for="socialLink in socialLinks" :key="socialLink.label" :href="socialLink.href" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" :aria-label="socialLink.label"
+            >
+              <Icon :name="socialLink.icon" />
+            </a>
+          </div>
+
+          <div class="text-muted-foreground mt-2">
+            Crafted on Earth by
+            <a href="https://corentin.tech" target="_blank" rel="noopener" class="hover:text-primary transition">
+              Corentin Thomasset
+            </a>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-12">
+          <div v-for="section in sections" :key="section.title">
+            <h4 class="font-semibold text-foreground">
+              {{ section.title }}
+            </h4>
+            <ul class="mt-4">
+              <li v-for="item in section.items" :key="item.label" class="mt-1">
+                <NuxtLink v-if="item.to" :to="localePath(item.to)" class="text-muted-foreground hover:text-primary transition">
+                  {{ item.label }}
+                </NuxtLink>
+                <a v-else :href="item.href" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition">
+                  {{ item.label }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-muted-foreground border-t border-border pt-4 mt-12">
+        <span>
+          &copy;
+          {{ new Date().getFullYear() }}
+          Corentin Thomasset
+        </span>
+      </div>
+      <div class="text-xs text-foreground opacity-80%" />
+    </div>
+  </footer>
+</template>

packages/app/src/modules/app/components/app-header.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
+
+const colorMode = useColorMode();
+</script>
+
+<template>
+  <div class="w-full border-b">
+    <div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6">
+      <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
+        <span class="font-bold text-foreground">IT</span>
+        <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
+      </NuxtLink>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost" size="icon">
+            <Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
+            <Icon name="i-tabler-sun" class="mr-2 size-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
+            <Icon name="i-tabler-moon" class="mr-2 size-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
+            <Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </div>
+</template>

packages/app/src/modules/app/components/grid-background.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ fadeBottom?: boolean; faderClass?: string }>(), { fadeBottom: true });
+</script>
+
+<template>
+  <div class="w-full bg-[linear-gradient(to_right,#80808010_1px,transparent_1px),linear-gradient(to_bottom,#80808010_1px,transparent_1px)] bg-[size:48px_48px] pt-20">
+    <slot />
+
+    <div v-if="props.fadeBottom" class="bg-gradient-to-t from-background to-transparent h-24 mt-24" :class="props.faderClass" />
+  </div>
+</template>

packages/app/src/modules/app/layouts/default.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="w-full min-h-screen text-sm relative font-sans flex flex-col">
+    <app-header />
+
+    <div class="flex-1 pb-6">
+      <slot />
+    </div>
+
+    <app-footer />
+  </div>
+</template>

packages/app/src/modules/app/pages/[...404].vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Button } from '@/src/modules/ui/components/button';
+
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <div class="flex justify-center text-center">
+    <div>
+      <h1 class="text-3xl font-light text-muted-foreground">
+        404
+      </h1>
+      <h2 class="font-semibold text-lg my-2">
+        Page not found
+      </h2>
+
+      <p class="text-muted-foreground">
+        The page you are looking for does not seem to exist.
+      </p>
+
+      <p class="text-muted-foreground">
+        Please check the URL and try again.
+      </p>
+
+      <Button as-child variant="secondary" class="mt-4">
+        <NuxtLink :to="localePath('/')">
+          <Icon name="i-tabler-arrow-left" class="mr-2 size-4" />
+
+          Go back home
+        </NuxtLink>
+      </Button>
+    </div>
+  </div>
+</template>

packages/app/src/modules/app/pages/index.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { Badge } from '@/src/modules/ui/components/badge';
+import { Button } from '@/src/modules/ui/components/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
+</script>
+
+<template>
+  <grid-background>
+    <div class="flex gap-24 mx-auto justify-center pb-8 mt-8 items-center px-6">
+      <div class="max-w-xl">
+        <div class="flex gap-2">
+          <Badge class="text-primary bg-primary/10 hover:bg-primary/10">
+            <!-- {{ $t('landing.hero.badges.open-source') }} -->
+            Open Source
+          </Badge>
+          <Badge class="text-primary bg-primary/10 hover:bg-primary/10">
+            <!-- {{ $t('landing.hero.badges.free') }} -->
+            Free
+          </Badge>
+          <Badge class="text-primary bg-primary/10 hover:bg-primary/10">
+            <!-- {{ $t('landing.hero.badges.self-hostable') }} -->
+            Self-hostable
+          </Badge>
+        </div>
+
+        <h1 class="text-5xl font-semibold border-b border-transparent hover:no-underline h-auto py-0 px-1 ml--1 rounded-none !transition-border-color-250 my-6">
+          <span class="font-bold ">IT</span>
+          <span class="text-[90%] text-primary font-extrabold border-[5px] leading-none border-current rounded-xl px-2 py-0.5 ml-3">TOOLS</span>
+        </h1>
+
+        <p class="text-xl text-gray-400 mb-4">
+          <!-- {{ $t('app.description') }} -->
+          The open-source collection of handy online tools to help developers in their daily life.
+        </p>
+
+        <div class="flex gap-4">
+          <Button>
+            <!-- {{ $t('landing.hero.all-the-tools') }} -->
+            All the tools
+            <Icon name="i-tabler-arrow-right" class="ml-2 size-4" />
+          </Button>
+
+          <Button variant="outline">
+            <!-- {{ $t('landing.hero.search-tools') }} -->
+            <Icon name="i-tabler-search" class="mr-2 size-4" />
+            Search tools
+          </Button>
+        </div>
+      </div>
+
+      <div class="relative hidden sm:block">
+        <div class="absolute top-4 left-0 w-full h-full flex items-center justify-center blur-2xl rounded-full opacity-20 bg-gradient-to-br from-primary to-transparent" />
+        <Icon name="i-tabler-terminal" class="text-9xl text-primary m-8" />
+      </div>
+    </div>
+  </grid-background>
+</template>

packages/app/src/modules/shared/style/cn.ts

@@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));

packages/app/src/modules/ui/components/badge/Badge.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn'
+import { type BadgeVariants, badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/badge/index.ts

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

packages/app/src/modules/ui/components/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { type ButtonVariants, buttonVariants } from '.';
+
+type Props = {
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
+  class?: HTMLAttributes['class'];
+} & PrimitiveProps;
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

packages/app/src/modules/ui/components/button/index.ts

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Button } from './Button.vue';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn'
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+         <Icon name="i-tabler-check" class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn'
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Icon name="i-tabler-point-filled" class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn'
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <Icon name="i-tabler-chevron-right" class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'radix-vue'