diff --git a/frontendNew/pnpm-lock.yaml b/frontendNew/pnpm-lock.yaml
index 91bd5516..fa663277 100644
--- a/frontendNew/pnpm-lock.yaml
+++ b/frontendNew/pnpm-lock.yaml
@@ -474,48 +474,56 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-arm64-musl@0.45.0':
     resolution: {integrity: sha512-XQKXZIKYJC3GQJ8FnD3iMntpw69Wd9kDDK/Xt79p6xnFYlGGxSNv2vIBvRTDg5CKByWFWWZLCRDOXoP/m6YN4g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxfmt/binding-linux-ppc64-gnu@0.45.0':
     resolution: {integrity: sha512-+g5RiG+xOkdrCWkKodv407nTvMq4vYM18Uox2MhZBm/YoqFxxJpWKsloskFFG5NU13HGPw1wzYjjOVcyd9moCA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-gnu@0.45.0':
     resolution: {integrity: sha512-V7dXKoSyEbWAkkSF4JJNtF+NJZDmJoSarSoP30WCsB3X636Rehd3CvxBj49FIJxEBFWhvcUjGSHVeU8Erck1bQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-musl@0.45.0':
     resolution: {integrity: sha512-Vdelft1sAEYojVGgcODEFXSWYQYlIvoyIGWebKCuUibd1tvS1TjTx413xG2ZLuHpYj45CkN/ztMLMX6jrgqpgg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@oxfmt/binding-linux-s390x-gnu@0.45.0':
     resolution: {integrity: sha512-RR7xKgNpqwENnK0aYCGYg0JycY2n93J0reNjHyes+I9Gq52dH95x+CBlnlAQHCPfz6FGnKA9HirgUl14WO6o7w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-gnu@0.45.0':
     resolution: {integrity: sha512-U/QQ0+BQNSHxjuXR/utvXnQ50Vu5kUuqEomZvQ1/3mhgbBiMc2WU9q5kZ5WwLp3gnFIx9ibkveoRSe2EZubkqg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-musl@0.45.0':
     resolution: {integrity: sha512-o5TLOUCF0RWQjsIS06yVC+kFgp092/yLe6qBGSUvtnmTVw9gxjpdQSXc3VN5Cnive4K11HNstEZF8ROKHfDFSw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxfmt/binding-openharmony-arm64@0.45.0':
     resolution: {integrity: sha512-RnGcV3HgPuOjsGx/k9oyRNKmOp+NBLGzZTdPDYbc19r7NGeYPplnUU/BfU35bX2Y/O4ejvHxcfkvW2WoYL/gsg==}
@@ -588,48 +596,56 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-arm64-musl@1.60.0':
     resolution: {integrity: sha512-eDYDXZGhQAXyn6GwtwiX/qcLS0HlOLPJ/+iiIY8RYr+3P8oKBmgKxADLlniL6FtWfE7pPk7IGN9/xvDEvDvFeg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-linux-ppc64-gnu@1.60.0':
     resolution: {integrity: sha512-nxehly5XYBHUWI9VJX1bqCf9j/B43DaK/aS/T1fcxCpX3PA4Rm9BB54nPD1CKayT8xg6REN1ao+01hSRNgy8OA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-gnu@1.60.0':
     resolution: {integrity: sha512-j1qf/NaUfOWQutjeoooNG1Q0zsK0XGmSu1uDLq3cctquRF3j7t9Hxqf/76ehCc5GEUAanth2W4Fa+XT1RFg/nw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-musl@1.60.0':
     resolution: {integrity: sha512-YELKPRefQ/q/h3RUmeRfPCUhh2wBvgV1RyZ/F9M9u8cDyXsQW2ojv1DeWQTt466yczDITjZnIOg/s05pk7Ve2A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-linux-s390x-gnu@1.60.0':
     resolution: {integrity: sha512-JkO3C6Gki7Y6h/MiIkFKvHFOz98/YWvQ4WYbK9DLXACMP2rjULzkeGyAzorJE5S1dzLQGFgeqvN779kSFwoV1g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-x64-gnu@1.60.0':
     resolution: {integrity: sha512-XjKHdFVCpZZZSWBCKyyqCq65s2AKXykMXkjLoKYODrD+f5toLhlwsMESscu8FbgnJQ4Y/dpR/zdazsahmgBJIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-x64-musl@1.60.0':
     resolution: {integrity: sha512-js29ZWIuPhNWzY8NC7KoffEMEeWG105vbmm+8EOJsC+T/jHBiKIJEUF78+F/IrgEWMMP9N0kRND4Pp75+xAhKg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-openharmony-arm64@1.60.0':
     resolution: {integrity: sha512-H+PUITKHk04stFpWj3x3Kg08Afp/bcXSBi0EhasR5a0Vw7StXHTzdl655PUI0fB4qdh2Wsu6Dsi+3ACxPoyQnA==}
@@ -693,36 +709,42 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
     resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
     resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
     resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
     resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
     resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
     resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==}
@@ -797,24 +819,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
     resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
     resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.4':
     resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.4':
     resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==}
@@ -2025,24 +2051,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
diff --git a/frontendNew/src/components/ui/empty/Empty.vue b/frontendNew/src/components/ui/empty/Empty.vue
new file mode 100644
index 00000000..f418cdf3
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/Empty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty"
+    :class="cn(
+      'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/empty/EmptyContent.vue b/frontendNew/src/components/ui/empty/EmptyContent.vue
new file mode 100644
index 00000000..f957e986
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/EmptyContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-content"
+    :class="cn(
+      'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/empty/EmptyDescription.vue b/frontendNew/src/components/ui/empty/EmptyDescription.vue
new file mode 100644
index 00000000..fadd444f
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/EmptyDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontendNew/src/components/ui/empty/EmptyHeader.vue b/frontendNew/src/components/ui/empty/EmptyHeader.vue
new file mode 100644
index 00000000..dd72ec75
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/EmptyHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'gap-2 flex max-w-sm flex-col items-center',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/empty/EmptyMedia.vue b/frontendNew/src/components/ui/empty/EmptyMedia.vue
new file mode 100644
index 00000000..473d57d4
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/EmptyMedia.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { EmptyMediaVariants } from '.'
+import { cn } from '@/lib/utils'
+import { emptyMediaVariants } from '.'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: EmptyMediaVariants['variant']
+}>(), {
+  variant: 'default',
+})
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/empty/EmptyTitle.vue b/frontendNew/src/components/ui/empty/EmptyTitle.vue
new file mode 100644
index 00000000..881be51d
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/EmptyTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-title"
+    :class="cn('text-sm font-medium tracking-tight cn-font-heading', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/empty/index.ts b/frontendNew/src/components/ui/empty/index.ts
new file mode 100644
index 00000000..ba03beef
--- /dev/null
+++ b/frontendNew/src/components/ui/empty/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Empty } from './Empty.vue'
+export { default as EmptyContent } from './EmptyContent.vue'
+export { default as EmptyDescription } from './EmptyDescription.vue'
+export { default as EmptyHeader } from './EmptyHeader.vue'
+export { default as EmptyMedia } from './EmptyMedia.vue'
+export { default as EmptyTitle } from './EmptyTitle.vue'
+
+export const emptyMediaVariants = cva(
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: 'bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*=size-])]:size-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>
diff --git a/frontendNew/src/components/ui/item/Item.vue b/frontendNew/src/components/ui/item/Item.vue
new file mode 100644
index 00000000..2029e086
--- /dev/null
+++ b/frontendNew/src/components/ui/item/Item.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ItemVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { itemVariants } from '.'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+  variant?: ItemVariants['variant']
+  size?: ItemVariants['size']
+}>(), {
+  as: 'div',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="item"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(itemVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemActions.vue b/frontendNew/src/components/ui/item/ItemActions.vue
new file mode 100644
index 00000000..6d387dc4
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemActions.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-actions"
+    :class="cn('gap-2 flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemContent.vue b/frontendNew/src/components/ui/item/ItemContent.vue
new file mode 100644
index 00000000..699f1ac7
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-content"
+    :class="cn('gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemDescription.vue b/frontendNew/src/components/ui/item/ItemDescription.vue
new file mode 100644
index 00000000..137baef9
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="item-description"
+    :class="cn(
+      'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+      props.class,
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemFooter.vue b/frontendNew/src/components/ui/item/ItemFooter.vue
new file mode 100644
index 00000000..0a9381d0
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-footer"
+    :class="cn('gap-2 flex basis-full items-center justify-between', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemGroup.vue b/frontendNew/src/components/ui/item/ItemGroup.vue
new file mode 100644
index 00000000..4eb481e8
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    role="list"
+    data-slot="item-group"
+    :class="cn('gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemHeader.vue b/frontendNew/src/components/ui/item/ItemHeader.vue
new file mode 100644
index 00000000..98c106f4
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-header"
+    :class="cn('gap-2 flex basis-full items-center justify-between', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemMedia.vue b/frontendNew/src/components/ui/item/ItemMedia.vue
new file mode 100644
index 00000000..47cce2ac
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemMedia.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { ItemMediaVariants } from '.'
+import { cn } from '@/lib/utils'
+import { itemMediaVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: ItemMediaVariants['variant']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-media"
+    :data-variant="props.variant"
+    :class="cn(itemMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemSeparator.vue b/frontendNew/src/components/ui/item/ItemSeparator.vue
new file mode 100644
index 00000000..06e634d9
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <Separator
+    data-slot="item-separator"
+    orientation="horizontal"
+    :class="cn('my-2', props.class)"
+  />
+</template>
diff --git a/frontendNew/src/components/ui/item/ItemTitle.vue b/frontendNew/src/components/ui/item/ItemTitle.vue
new file mode 100644
index 00000000..786d49aa
--- /dev/null
+++ b/frontendNew/src/components/ui/item/ItemTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-title"
+    :class="cn('gap-2 text-sm leading-snug font-medium underline-offset-4 cn-font-heading line-clamp-1 flex w-fit items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontendNew/src/components/ui/item/index.ts b/frontendNew/src/components/ui/item/index.ts
new file mode 100644
index 00000000..8c5c7168
--- /dev/null
+++ b/frontendNew/src/components/ui/item/index.ts
@@ -0,0 +1,54 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Item } from './Item.vue'
+export { default as ItemActions } from './ItemActions.vue'
+export { default as ItemContent } from './ItemContent.vue'
+export { default as ItemDescription } from './ItemDescription.vue'
+export { default as ItemFooter } from './ItemFooter.vue'
+export { default as ItemGroup } from './ItemGroup.vue'
+export { default as ItemHeader } from './ItemHeader.vue'
+export { default as ItemMedia } from './ItemMedia.vue'
+export { default as ItemSeparator } from './ItemSeparator.vue'
+export { default as ItemTitle } from './ItemTitle.vue'
+
+export const itemVariants = cva(
+  '[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50 border-transparent',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export const itemMediaVariants = cva(
+  'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: '[&_svg:not([class*=size-])]:size-4',
+        image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type ItemVariants = VariantProps<typeof itemVariants>
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>
diff --git a/frontendNew/src/components/ui/progress/Progress.vue b/frontendNew/src/components/ui/progress/Progress.vue
new file mode 100644
index 00000000..3257026e
--- /dev/null
+++ b/frontendNew/src/components/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary size-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/frontendNew/src/components/ui/progress/index.ts b/frontendNew/src/components/ui/progress/index.ts
new file mode 100644
index 00000000..eace9893
--- /dev/null
+++ b/frontendNew/src/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'
diff --git a/frontendNew/src/components/ui/spinner/Spinner.vue b/frontendNew/src/components/ui/spinner/Spinner.vue
new file mode 100644
index 00000000..e97ce0f4
--- /dev/null
+++ b/frontendNew/src/components/ui/spinner/Spinner.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+import { Loader2Icon } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Loader2Icon role="status" aria-label="Loading" :class="cn('size-4 animate-spin', props.class)" />
+</template>
diff --git a/frontendNew/src/components/ui/spinner/index.ts b/frontendNew/src/components/ui/spinner/index.ts
new file mode 100644
index 00000000..712ee0e4
--- /dev/null
+++ b/frontendNew/src/components/ui/spinner/index.ts
@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.vue'
diff --git a/frontendNew/src/pages/Dcalc/DnfHelper/list.vue b/frontendNew/src/pages/Dcalc/DnfHelper/list.vue
index 2926289f..b8b4fcc8 100644
--- a/frontendNew/src/pages/Dcalc/DnfHelper/list.vue
+++ b/frontendNew/src/pages/Dcalc/DnfHelper/list.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import Button from "@/components/ui/button/Button.vue";
 import {
   Card,
   CardContent,
-  CardDescription,
+  // CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { RefreshCcw } from "lucide-vue-next";
 
 const props = defineProps<{
   list: {
@@ -22,6 +24,17 @@ const { list } = toRefs(props);
 </script>
 
 <template>
+  <header
+    class="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4 justify-between"
+  >
+    <div>
+      <h1 class="text-lg font-semibold">角色列表</h1>
+      <p class="text-sm text-muted-foreground">共 {{ list.length }} 个角色</p>
+    </div>
+    <Button variant="outline" size="icon" aria-label="Submit">
+      <RefreshCcw />
+    </Button>
+  </header>
   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 p-5 box-border">
     <template v-for="item in list" :key="item.roleId">
       <Card class="w-full">
@@ -29,7 +42,7 @@ const { list } = toRefs(props);
           <CardTitle>{{ item.roleJob }}</CardTitle>
         </CardHeader>
         <CardContent class="flex items-center justify-center h-sm">
-          <img :src="item.avatarLink" alt="avatar" class="w-auto h-sm rounded-full object-cover" />
+          <!-- <img :src="item.avatarLink" alt="avatar" class="w-auto h-sm rounded-full object-cover" /> -->
         </CardContent>
         <CardFooter class="flex justify-between">
           <span>{{ item.roleName }}</span>
diff --git a/frontendNew/src/pages/Dcalc/DnfHelper/processing.vue b/frontendNew/src/pages/Dcalc/DnfHelper/processing.vue
new file mode 100644
index 00000000..1e5487af
--- /dev/null
+++ b/frontendNew/src/pages/Dcalc/DnfHelper/processing.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Spinner } from "@/components/ui/spinner";
+</script>
+<template>
+  <Empty class="w-full">
+    <EmptyHeader>
+      <EmptyMedia variant="icon">
+        <Spinner />
+      </EmptyMedia>
+      <EmptyTitle>同步数据中</EmptyTitle>
+      <EmptyDescription> 请稍候，正在处理从助手识别数据。请勿刷新页面。 </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <Button variant="outline" size="sm"> 取消 </Button>
+    </EmptyContent>
+  </Empty>
+</template>
diff --git a/package.json b/package.json
index 0f7b0199..bdb91bb7 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
   "scripts": {
     "dev:image": "node scripts/image.js",
     "dev:frontend": "cd frontend && vite",
+    "dev:frontendNew": "cd frontendNew && vite",
     "dev:backend": "cd backend && uv run main.py"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
+}
\ No newline at end of file