feat(front): implement Accordion component and its subcomponents for enhanced UI interactivity and organization

front/assets/css/main.css

@@ -41,6 +41,24 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  @keyframes accordion-down {
+  from {
+    height: 0;
+    }
+  to {
+    height: var(--reka-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+    }
+  to {
+    height: 0;
+    }
+  }
 }
 
 :root {

front/components/ui/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <AccordionRoot data-slot="accordion" v-bind="forwarded">
+        <slot />
+    </AccordionRoot>
+</template>

front/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AccordionContent
+        data-slot="accordion-content"
+        v-bind="delegatedProps"
+        class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    >
+        <div :class="cn('pt-0 pb-4', props.class)">
+            <slot />
+        </div>
+    </AccordionContent>
+</template>

front/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionItem, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <AccordionItem data-slot="accordion-item" v-bind="forwardedProps" :class="cn('border-b last:border-b-0', props.class)">
+        <slot />
+    </AccordionItem>
+</template>

front/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AccordionHeader class="flex">
+        <AccordionTrigger
+            data-slot="accordion-trigger"
+            v-bind="delegatedProps"
+            :class="
+                cn(
+                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+                    props.class
+                )
+            "
+        >
+            <slot />
+            <slot name="icon">
+                <ChevronDown class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+            </slot>
+        </AccordionTrigger>
+    </AccordionHeader>
+</template>

front/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

front/components/ui/avatar/Avatar.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <AvatarRoot data-slot="avatar" :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)">
+        <slot />
+    </AvatarRoot>
+</template>

front/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AvatarFallback } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <AvatarFallback
+        data-slot="avatar-fallback"
+        v-bind="delegatedProps"
+        :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+    >
+        <slot />
+    </AvatarFallback>
+</template>

front/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+    <AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
+        <slot />
+    </AvatarImage>
+</template>

front/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'