feat: ✨ Implement rich text note composer

components/ui/command/Command.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
+import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = withDefaults(
+    defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        open: true,
+        modelValue: "",
+    },
+);
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

components/ui/command/CommandDialog.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "radix-vue";
+import { useForwardPropsEmits } from "radix-vue";
+import { Dialog, DialogContent } from "~/components/ui/dialog";
+import Command from "./Command.vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

components/ui/command/CommandEmpty.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { ComboboxEmptyProps } from "radix-vue";
+import { ComboboxEmpty } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    ComboboxEmptyProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>

components/ui/command/CommandGroup.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { ComboboxGroupProps } from "radix-vue";
+import { ComboboxGroup, ComboboxLabel } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    ComboboxGroupProps & {
+        class?: HTMLAttributes["class"];
+        heading?: string;
+    }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

components/ui/command/CommandInput.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Search } from "lucide-vue-next";
+import {
+    ComboboxInput,
+    type ComboboxInputProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<
+    ComboboxInputProps & {
+        class?: HTMLAttributes["class"];
+    }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>

components/ui/command/CommandItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";
+import { ComboboxItem, useForwardPropsEmits } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    ComboboxItemProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>

components/ui/command/CommandList.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";
+import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = withDefaults(
+    defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        dismissable: false,
+    },
+);
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>

components/ui/command/CommandSeparator.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { ComboboxSeparatorProps } from "radix-vue";
+import { ComboboxSeparator } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>

components/ui/command/CommandShortcut.vue

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

components/ui/command/index.ts

@@ -0,0 +1,9 @@
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";