refactor: upgrade shadcn-vue components to use reka-ui primitives and add @vueuse/core

- Add @vueuse/core v14.3.0 dependency to marketing app
- Upgrade reka-ui from v2.9.6 to v2.9.8 in marketing app
- Refactor Input component to use useVModel composable instead of manual event handling
- Refactor Switch component to use SwitchRoot/SwitchThumb from reka-ui with proper props forwarding
- Update DropdownMenu components to use data attributes, improved styling, and proper slot forwarding
- Add destructive variant support to DropdownMenuItem
- Add size prop ('sm' |

Author: gustavotoyota

new-deepnotes/apps/marketing/package-lock.json

@@ -12,10 +12,11 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.2.4",
+    "@vueuse/core": "^14.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "marked": "^18.0.4",
-    "reka-ui": "^2.9.6",
+    "reka-ui": "^2.9.8",
     "shadcn-vue": "^2.6.2",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",

new-deepnotes/apps/marketing/package.json

@@ -1,33 +1,31 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  modelValue?: string | number;
-  defaultValue?: string | number;
-  class?: HTMLAttributes["class"];
-}>();
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
 
-const emit = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void;
-}>();
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
 
-function onInput(event: Event) {
-  const target = event.target as HTMLInputElement;
-  emit("update:modelValue", target.value);
-}
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
 </script>
 
 <template>
   <input
-    :value="modelValue ?? defaultValue"
+    v-model="modelValue"
     data-slot="input"
-    :class="
-      cn(
-        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        props.class,
-      )
-    "
-    @input="onInput"
-  />
+    :class="cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
 </template>

new-deepnotes/apps/marketing/src/components/ui/input/Input.vue

@@ -1 +1 @@
-export { default as Input } from "./Input.vue";
+export { default as Input } from './Input.vue'

new-deepnotes/apps/marketing/src/components/ui/input/index.ts

@@ -1,41 +1,44 @@
 <script setup lang="ts">
-import { cn } from "@/lib/utils";
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  modelValue?: boolean;
-  class?: string;
-}>();
+const props = withDefaults(defineProps<SwitchRootProps & {
+  class?: HTMLAttributes['class']
+  size?: 'sm' | 'default'
+}>(), {
+  size: 'default',
+})
 
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-}>();
+const emits = defineEmits<SwitchRootEmits>()
 
-function toggle() {
-  emit("update:modelValue", !props.modelValue);
-}
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <button
-    type="button"
-    role="switch"
-    :aria-checked="modelValue"
-    :class="
-      cn(
-        'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-        modelValue ? 'bg-primary' : 'bg-muted',
-        props.class,
-      )
-    "
-    @click="toggle"
+  <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
+    :data-size="size"
+    v-bind="forwarded"
+    :class="cn(
+      'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+      props.class,
+    )"
   >
-    <span
-      :class="
-        cn(
-          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow ring-0 transition duration-200 ease-in-out',
-          modelValue ? 'translate-x-5' : 'translate-x-0',
-        )
-      "
-    />
-  </button>
+    <SwitchThumb
+      data-slot="switch-thumb"
+      class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+    >
+      <slot name="thumb" v-bind="slotProps" />
+    </SwitchThumb>
+  </SwitchRoot>
 </template>

new-deepnotes/apps/marketing/src/components/ui/switch/Switch.vue

@@ -1 +1 @@
-export { default as Switch } from "./Switch.vue";
+export { default as Switch } from './Switch.vue'

new-deepnotes/apps/marketing/src/components/ui/switch/index.ts

@@ -2,8 +2,8 @@
 import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 
 import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
 import { CheckIcon } from '@lucide/vue'
+import { reactiveOmit } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '@/lib/utils'
 

new-deepnotes/apps/web/src/components/ui/checkbox/Checkbox.vue

@@ -9,7 +9,11 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DropdownMenuRoot v-bind="forwarded">
-    <slot />
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
   </DropdownMenuRoot>
 </template>

new-deepnotes/apps/web/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { CheckIcon } from '@lucide/vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-checkbox-item-indicator"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <CheckIcon />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

new-deepnotes/apps/web/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,28 +1,39 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
-import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
-import { computed, useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
-  sideOffset: 4,
+defineOptions({
+  inheritAttrs: false,
 })
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'start',
+    sideOffset: 4,
+  },
+)
 const emits = defineEmits<DropdownMenuContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
-const attrs = useAttrs()
+const delegatedProps = reactiveOmit(props, 'class')
 
-const contentClass = computed(() => {
-  const base = "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"
-  const extraClass = typeof attrs.class === 'string' ? attrs.class : ''
-  return extraClass ? `${base} ${extraClass}` : base
-})
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DropdownMenuPortal>
-    <DropdownMenuContent v-bind="forwarded" :class="contentClass" :style="attrs.style as any">
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-translucent z-50 max-h-(--reka-dropdown-menu-content-available-height) w-(--reka-dropdown-menu-trigger-width) origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden', props.class)"
+    >
       <slot />
     </DropdownMenuContent>
   </DropdownMenuPortal>