[Closes #1] [Closes !5] Migrated from PrimeVue to shadcn

2025-12-22 16:20:35 +01:00 · 2025-12-22 16:20:35 +01:00 · 0cec9f5afd
commit 0cec9f5afd
parent 7b34c27290
123 changed files with 4685 additions and 3607 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -18,5 +18,6 @@
    "typescript",
    "typescriptreact",
    "vue"
-  ]
+  ],
+  "css.lint.unknownAtRules": "ignore"
 }
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@ -1 +1,127 @@
@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: 'Inter Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.60 0.10 185);
+  --primary-foreground: oklch(0.98 0.01 181);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.85 0.13 181);
+  --chart-2: oklch(0.78 0.13 182);
+  --chart-3: oklch(0.70 0.12 183);
+  --chart-4: oklch(0.60 0.10 185);
+  --chart-5: oklch(0.51 0.09 186);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.60 0.10 185);
+  --sidebar-primary-foreground: oklch(0.98 0.01 181);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.70 0.12 183);
+  --primary-foreground: oklch(0.28 0.04 193);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.85 0.13 181);
+  --chart-2: oklch(0.78 0.13 182);
+  --chart-3: oklch(0.70 0.12 183);
+  --chart-4: oklch(0.60 0.10 185);
+  --chart-5: oklch(0.51 0.09 186);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.78 0.13 182);
+  --sidebar-primary-foreground: oklch(0.28 0.04 193);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
--- a/app/assets/scss/layout/_core.scss
+++ b/app/assets/scss/layout/_core.scss
@ -1,24 +0,0 @@
-html {
-  height: 100%;
-  font-size: 14px;
-  line-height: 1.2;
-}
-
-body {
-  font-family: Ubuntu, Arial, Helvetica, sans-serif;
-  color: var(--text-color);
-  background-color: var(--surface-ground);
-  margin: 0;
-  padding: 0;
-  min-height: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  text-decoration: none;
-}
-
-.layout-wrapper {
-  min-height: 100vh;
-}
--- a/app/assets/scss/layout/_footer.scss
+++ b/app/assets/scss/layout/_footer.scss
@ -1,8 +0,0 @@
-.layout-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 0 1rem 0;
-  gap: 0.5rem;
-  border-top: 1px solid var(--surface-border);
-}
--- a/app/assets/scss/layout/_main.scss
+++ b/app/assets/scss/layout/_main.scss
@ -1,14 +0,0 @@
-.layout-main-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  justify-content: space-between;
-  padding: 6rem 2rem 0 2rem;
-  background-color: var(--surface-ground);
-  transition: margin-left var(--layout-section-transition-duration);
-}
-
-.layout-main {
-  flex: 1 1 auto;
-  padding-bottom: 2rem;
-}
--- a/app/assets/scss/layout/_menu.scss
+++ b/app/assets/scss/layout/_menu.scss
@ -1,160 +0,0 @@
-@use "mixins" as *;
-
-.layout-sidebar {
-  position: fixed;
-  width: 20rem;
-  height: calc(100vh - 8rem);
-  z-index: 999;
-  overflow-y: auto;
-  user-select: none;
-  top: 6rem;
-  left: 2rem;
-  transition:
-    transform var(--layout-section-transition-duration),
-    left var(--layout-section-transition-duration);
-  background-color: var(--surface-overlay);
-  border-radius: var(--content-border-radius);
-  padding: 0.5rem 1.5rem;
-}
-
-.layout-menu {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  .layout-root-menuitem {
-    > .layout-menuitem-root-text {
-      font-size: 0.857rem;
-      text-transform: uppercase;
-      font-weight: 700;
-      color: var(--text-color);
-      margin: 0.75rem 0;
-    }
-
-    > a {
-      display: none;
-    }
-  }
-
-  a {
-    user-select: none;
-
-    &.active-menuitem {
-      > .layout-submenu-toggler {
-        transform: rotate(-180deg);
-      }
-    }
-  }
-
-  li.active-menuitem {
-    > a {
-      .layout-submenu-toggler {
-        transform: rotate(-180deg);
-      }
-    }
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    a {
-      display: flex;
-      align-items: center;
-      position: relative;
-      outline: 0 none;
-      color: var(--text-color);
-      cursor: pointer;
-      padding: 0.75rem 1rem;
-      border-radius: var(--content-border-radius);
-      transition:
-        background-color var(--element-transition-duration),
-        box-shadow var(--element-transition-duration);
-
-      .layout-menuitem-icon {
-        margin-right: 0.5rem;
-      }
-
-      .layout-submenu-toggler {
-        font-size: 75%;
-        margin-left: auto;
-        transition: transform var(--element-transition-duration);
-      }
-
-      &.active-route {
-        font-weight: 700;
-        color: var(--primary-color);
-      }
-
-      &:hover {
-        background-color: var(--surface-hover);
-      }
-
-      &:focus {
-        @include focused-inset();
-      }
-    }
-
-    ul {
-      overflow: hidden;
-      border-radius: var(--content-border-radius);
-
-      li {
-        a {
-          margin-left: 1rem;
-        }
-
-        li {
-          a {
-            margin-left: 2rem;
-          }
-
-          li {
-            a {
-              margin-left: 2.5rem;
-            }
-
-            li {
-              a {
-                margin-left: 3rem;
-              }
-
-              li {
-                a {
-                  margin-left: 3.5rem;
-                }
-
-                li {
-                  a {
-                    margin-left: 4rem;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.layout-submenu-enter-from,
-.layout-submenu-leave-to {
-  max-height: 0;
-}
-
-.layout-submenu-enter-to,
-.layout-submenu-leave-from {
-  max-height: 1000px;
-}
-
-.layout-submenu-leave-active {
-  overflow: hidden;
-  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.layout-submenu-enter-active {
-  overflow: hidden;
-  transition: max-height 1s ease-in-out;
-}
--- a/app/assets/scss/layout/_mixins.scss
+++ b/app/assets/scss/layout/_mixins.scss
@ -1,15 +0,0 @@
-@mixin focused() {
-  outline-width: var(--focus-ring-width);
-  outline-style: var(--focus-ring-style);
-  outline-color: var(--focus-ring-color);
-  outline-offset: var(--focus-ring-offset);
-  box-shadow: var(--focus-ring-shadow);
-  transition:
-    box-shadow var(--transition-duration),
-    outline-color var(--transition-duration);
-}
-
-@mixin focused-inset() {
-  outline-offset: -1px;
-  box-shadow: inset var(--focus-ring-shadow);
-}
--- a/app/assets/scss/layout/_preloading.scss
+++ b/app/assets/scss/layout/_preloading.scss
@ -1,48 +0,0 @@
-.preloader {
-  position: fixed;
-  z-index: 999999;
-  background: #edf1f5;
-  width: 100%;
-  height: 100%;
-}
-.preloader-content {
-  border: 0 solid transparent;
-  border-radius: 50%;
-  width: 150px;
-  height: 150px;
-  position: absolute;
-  top: calc(50vh - 75px);
-  left: calc(50vw - 75px);
-}
-
-.preloader-content:before,
-.preloader-content:after {
-  content: "";
-  border: 1em solid var(--primary-color);
-  border-radius: 50%;
-  width: inherit;
-  height: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-  animation: loader 2s linear infinite;
-  opacity: 0;
-}
-
-.preloader-content:before {
-  animation-delay: 0.5s;
-}
-
-@keyframes loader {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
--- a/app/assets/scss/layout/_responsive.scss
+++ b/app/assets/scss/layout/_responsive.scss
@ -1,110 +0,0 @@
-@media screen and (min-width: 1960px) {
-  .layout-main,
-  .landing-wrapper {
-    width: 1504px;
-    margin-left: auto !important;
-    margin-right: auto !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .layout-wrapper {
-    &.layout-overlay {
-      .layout-main-container {
-        margin-left: 0;
-        padding-left: 2rem;
-      }
-
-      .layout-sidebar {
-        transform: translateX(-100%);
-        left: 0;
-        top: 0;
-        height: 100vh;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-right: 1px solid var(--surface-border);
-        transition:
-          transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
-          left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
-        box-shadow:
-          0px 3px 5px rgba(0, 0, 0, 0.02),
-          0px 0px 2px rgba(0, 0, 0, 0.05),
-          0px 1px 4px rgba(0, 0, 0, 0.08);
-      }
-
-      &.layout-overlay-active {
-        .layout-sidebar {
-          transform: translateX(0);
-        }
-      }
-    }
-
-    &.layout-static {
-      .layout-main-container {
-        margin-left: 22rem;
-      }
-
-      &.layout-static-inactive {
-        .layout-sidebar {
-          transform: translateX(-100%);
-          left: 0;
-        }
-
-        .layout-main-container {
-          margin-left: 0;
-          padding-left: 2rem;
-        }
-      }
-    }
-
-    .layout-mask {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 991px) {
-  .blocked-scroll {
-    overflow: hidden;
-  }
-
-  .layout-wrapper {
-    .layout-main-container {
-      margin-left: 0;
-      padding-left: 2rem;
-    }
-
-    .layout-sidebar {
-      transform: translateX(-100%);
-      left: 0;
-      top: 0;
-      height: 100vh;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      transition:
-        transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
-        left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
-    }
-
-    .layout-mask {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 998;
-      width: 100%;
-      height: 100%;
-      background-color: var(--maskbg);
-    }
-
-    &.layout-mobile-active {
-      .layout-sidebar {
-        transform: translateX(0);
-      }
-
-      .layout-mask {
-        display: block;
-      }
-    }
-  }
-}
--- a/app/assets/scss/layout/_topbar.scss
+++ b/app/assets/scss/layout/_topbar.scss
@ -1,201 +0,0 @@
-@use "mixins" as *;
-
-.layout-topbar {
-  position: fixed;
-  height: 4rem;
-  z-index: 997;
-  left: 0;
-  top: 0;
-  width: 100%;
-  padding: 0 2rem;
-  background-color: var(--surface-card);
-  transition: left var(--layout-section-transition-duration);
-  display: flex;
-  align-items: center;
-
-  .layout-topbar-logo-container {
-    width: 20rem;
-    display: flex;
-    align-items: center;
-  }
-
-  .layout-topbar-logo {
-    display: inline-flex;
-    align-items: center;
-    font-size: 1.5rem;
-    border-radius: var(--content-border-radius);
-    color: var(--text-color);
-    font-weight: 500;
-    gap: 0.5rem;
-
-    img {
-      width: 3rem;
-    }
-
-    &:focus-visible {
-      @include focused();
-    }
-  }
-
-  .layout-topbar-action {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    width: 2.5rem;
-    height: 2.5rem;
-    color: var(--text-color);
-    transition: background-color var(--element-transition-duration);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--surface-hover);
-    }
-
-    &:focus-visible {
-      @include focused();
-    }
-
-    i {
-      font-size: 1.25rem;
-    }
-
-    span {
-      font-size: 1rem;
-      display: none;
-    }
-
-    &.layout-topbar-action-highlight {
-      background-color: var(--primary-color);
-      color: var(--primary-contrast-color);
-    }
-  }
-
-  .layout-menu-button {
-    margin-right: 0.5rem;
-  }
-
-  .layout-topbar-menu-button {
-    display: none;
-  }
-
-  .layout-topbar-actions {
-    margin-left: auto;
-    display: flex;
-    gap: 1rem;
-  }
-
-  .layout-topbar-menu-content {
-    display: flex;
-    gap: 1rem;
-  }
-
-  .layout-config-menu {
-    display: flex;
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 991px) {
-  .layout-topbar {
-    padding: 0 2rem;
-
-    .layout-topbar-logo-container {
-      width: auto;
-    }
-
-    .layout-menu-button {
-      margin-left: 0;
-      margin-right: 0.5rem;
-    }
-
-    .layout-topbar-menu-button {
-      display: inline-flex;
-    }
-
-    .layout-topbar-menu {
-      position: absolute;
-      background-color: var(--surface-overlay);
-      transform-origin: top;
-      box-shadow:
-        0px 3px 5px rgba(0, 0, 0, 0.02),
-        0px 0px 2px rgba(0, 0, 0, 0.05),
-        0px 1px 4px rgba(0, 0, 0, 0.08);
-      border-radius: var(--content-border-radius);
-      padding: 1rem;
-      right: 2rem;
-      top: 4rem;
-      min-width: 15rem;
-      border: 1px solid var(--surface-border);
-
-      .layout-topbar-menu-content {
-        gap: 0.5rem;
-      }
-
-      .layout-topbar-action {
-        display: flex;
-        width: 100%;
-        height: auto;
-        justify-content: flex-start;
-        border-radius: var(--content-border-radius);
-        padding: 0.5rem 1rem;
-
-        i {
-          font-size: 1rem;
-          margin-right: 0.5rem;
-        }
-
-        span {
-          font-weight: medium;
-          display: block;
-        }
-      }
-    }
-
-    .layout-topbar-menu-content {
-      flex-direction: column;
-    }
-  }
-}
-
-.config-panel {
-  .config-panel-label {
-    font-size: 0.875rem;
-    color: var(--text-secondary-color);
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  .config-panel-colors {
-    > div {
-      padding-top: 0.5rem;
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      justify-content: space-between;
-
-      button {
-        border: none;
-        width: 1.25rem;
-        height: 1.25rem;
-        border-radius: 50%;
-        padding: 0;
-        cursor: pointer;
-        outline-color: transparent;
-        outline-width: 2px;
-        outline-style: solid;
-        outline-offset: 1px;
-
-        &.active-color {
-          outline-color: var(--primary-color);
-        }
-      }
-    }
-  }
-
-  .config-panel-settings {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-}
--- a/app/assets/scss/layout/_typography.scss
+++ b/app/assets/scss/layout/_typography.scss
@ -1,68 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 1.5rem 0 1rem 0;
-  font-family: inherit;
-  font-weight: 700;
-  line-height: 1.5;
-  color: var(--text-color);
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-h1 {
-  font-size: 2.5rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.75rem;
-}
-
-h4 {
-  font-size: 1.5rem;
-}
-
-h5 {
-  font-size: 1.25rem;
-}
-
-h6 {
-  font-size: 1rem;
-}
-
-mark {
-  background: #fff8e1;
-  padding: 0.25rem 0.4rem;
-  border-radius: var(--content-border-radius);
-  font-family: monospace;
-}
-
-blockquote {
-  margin: 1rem 0;
-  padding: 0 2rem;
-  border-left: 4px solid #90a4ae;
-}
-
-hr {
-  border-top: solid var(--surface-border);
-  border-width: 1px 0 0 0;
-  margin: 1rem 0;
-}
-
-p {
-  margin: 0 0 1rem 0;
-  line-height: 1.5;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
--- a/app/assets/scss/layout/_utils.scss
+++ b/app/assets/scss/layout/_utils.scss
@ -1,25 +0,0 @@
-/* Utils */
-.clearfix:after {
-  content: " ";
-  display: block;
-  clear: both;
-}
-
-.card {
-  background: var(--surface-card);
-  padding: 2rem;
-  margin-bottom: 2rem;
-  border-radius: var(--content-border-radius);
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.p-toast {
-  &.p-toast-top-right,
-  &.p-toast-top-left,
-  &.p-toast-top-center {
-    top: 100px;
-  }
-}
--- a/app/assets/scss/layout/layout.scss
+++ b/app/assets/scss/layout/layout.scss
@ -1,11 +0,0 @@
-@use "./variables/_common";
-@use "./_mixins";
-@use "./_preloading";
-@use "./_core";
-@use "./_main";
-@use "./_topbar";
-@use "./_menu";
-@use "./_footer";
-@use "./_responsive";
-@use "./_utils";
-@use "./_typography";
--- a/app/assets/scss/layout/variables/_common.scss
+++ b/app/assets/scss/layout/variables/_common.scss
@ -1,26 +0,0 @@
-:root {
-  --primary-color: var(--p-primary-color);
-  --primary-contrast-color: var(--p-primary-contrast-color);
-  --text-color: var(--p-text-color);
-  --text-color-secondary: var(--p-text-muted-color);
-  --surface-ground: var(--p-surface-100);
-  --surface-border: var(--p-content-border-color);
-  --surface-card: var(--p-content-background);
-  --surface-hover: var(--p-content-hover-background);
-  --surface-overlay: var(--p-overlay-popover-background);
-  --transition-duration: var(--p-transition-duration);
-  --maskbg: var(--p-mask-background);
-  --content-border-radius: var(--p-content-border-radius);
-  --layout-section-transition-duration: 0.2s;
-  --element-transition-duration: var(--p-transition-duration);
-  --focus-ring-width: var(--p-focus-ring-width);
-  --focus-ring-style: var(--p-focus-ring-style);
-  --focus-ring-color: var(--p-focus-ring-color);
-  --focus-ring-offset: var(--p-focus-ring-offset);
-  --focus-ring-shadow: var(--p-focus-ring-shadow);
-}
-
-:root[class="app-dark"] {
-  --p-text-color: #ffffff;
-  --surface-ground: var(--p-surface-950);
-}
--- a/app/assets/scss/styles.scss
+++ b/app/assets/scss/styles.scss
@ -1,3 +1 @@
-@use "primeicons/primeicons.css";
-@use "~/assets/css/tailwind.css";
-@use "~/assets/scss/layout/layout.scss";
+// Nothing here. For now.
--- a/app/components/ui/avatar/Avatar.vue
+++ b/app/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>
--- a/app/components/ui/avatar/AvatarFallback.vue
+++ b/app/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>
--- a/app/components/ui/avatar/AvatarImage.vue
+++ b/app/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>
--- a/app/components/ui/avatar/index.ts
+++ b/app/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";
--- a/app/components/ui/breadcrumb/Breadcrumb.vue
+++ b/app/components/ui/breadcrumb/Breadcrumb.vue
@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
--- a/app/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { MoreHorizontal } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
--- a/app/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbItem.vue
@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+    <slot />
+  </li>
+</template>
--- a/app/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbLink.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbList.vue
@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
--- a/app/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbPage.vue
@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>
--- a/app/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/app/components/ui/breadcrumb/BreadcrumbSeparator.vue
@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
--- a/app/components/ui/breadcrumb/index.ts
+++ b/app/components/ui/breadcrumb/index.ts
@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue";
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
+export { default as BreadcrumbList } from "./BreadcrumbList.vue";
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue";
--- a/app/components/ui/button/Button.vue
+++ b/app/components/ui/button/Button.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from ".";
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"];
+  size?: ButtonVariants["size"];
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+});
+</script>
+
+<template>
+  <Primitive data-slot="button" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/button/index.ts
+++ b/app/components/ui/button/index.ts
@ -0,0 +1,35 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
--- a/app/components/ui/collapsible/Collapsible.vue
+++ b/app/components/ui/collapsible/Collapsible.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui";
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </CollapsibleRoot>
+</template>
--- a/app/components/ui/collapsible/CollapsibleContent.vue
+++ b/app/components/ui/collapsible/CollapsibleContent.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from "reka-ui";
+import { CollapsibleContent } from "reka-ui";
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+  <CollapsibleContent data-slot="collapsible-content" v-bind="props">
+    <slot />
+  </CollapsibleContent>
+</template>
--- a/app/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/app/components/ui/collapsible/CollapsibleTrigger.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from "reka-ui";
+import { CollapsibleTrigger } from "reka-ui";
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<template>
+  <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
--- a/app/components/ui/collapsible/index.ts
+++ b/app/components/ui/collapsible/index.ts
@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue";
+export { default as CollapsibleContent } from "./CollapsibleContent.vue";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
--- a/app/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenu.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui";
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+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 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+      )
+    "
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuContent.vue
@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui";
+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 & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+});
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground 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 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuGroup.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui";
+import { DropdownMenuGroup } from "reka-ui";
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuItem.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      variant?: "default" | "destructive";
+    }
+  >(),
+  {
+    variant: "default",
+  }
+);
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuLabel.vue
@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuLabel, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui";
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Circle } from "lucide-vue-next";
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+      )
+    "
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span data-slot="dropdown-menu-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+    <slot />
+  </span>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSub.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui";
+import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"]; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
+</template>
--- a/app/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui";
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui";
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
--- a/app/components/ui/dropdown-menu/index.ts
+++ b/app/components/ui/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 "reka-ui";
--- a/app/components/ui/input/Input.vue
+++ b/app/components/ui/input/Input.vue
@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  defaultValue?: string | number;
+  modelValue?: string | number;
+  class?: HTMLAttributes["class"];
+}>();
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class
+      )
+    "
+  />
+</template>
--- a/app/components/ui/input/index.ts
+++ b/app/components/ui/input/index.ts
@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";
--- a/app/components/ui/separator/Separator.vue
+++ b/app/components/ui/separator/Separator.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "horizontal",
+  decorative: true,
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class
+      )
+    "
+  />
+</template>
--- a/app/components/ui/separator/index.ts
+++ b/app/components/ui/separator/index.ts
@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";
--- a/app/components/ui/sheet/Sheet.vue
+++ b/app/components/ui/sheet/Sheet.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
--- a/app/components/ui/sheet/SheetClose.vue
+++ b/app/components/ui/sheet/SheetClose.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui";
+import { DialogClose } from "reka-ui";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
--- a/app/components/ui/sheet/SheetContent.vue
+++ b/app/components/ui/sheet/SheetContent.vue
@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import SheetOverlay from "./SheetOverlay.vue";
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"];
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: "right",
+});
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class", "side");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          props.class
+        )
+      "
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
--- a/app/components/ui/sheet/SheetDescription.vue
+++ b/app/components/ui/sheet/SheetDescription.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogDescription } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
--- a/app/components/ui/sheet/SheetFooter.vue
+++ b/app/components/ui/sheet/SheetFooter.vue
@ -0,0 +1,12 @@
+<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="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sheet/SheetHeader.vue
+++ b/app/components/ui/sheet/SheetHeader.vue
@ -0,0 +1,12 @@
+<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="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sheet/SheetOverlay.vue
+++ b/app/components/ui/sheet/SheetOverlay.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogOverlay } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        props.class
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
--- a/app/components/ui/sheet/SheetTitle.vue
+++ b/app/components/ui/sheet/SheetTitle.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogTitle } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
+    <slot />
+  </DialogTitle>
+</template>
--- a/app/components/ui/sheet/SheetTrigger.vue
+++ b/app/components/ui/sheet/SheetTrigger.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui";
+import { DialogTrigger } from "reka-ui";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
--- a/app/components/ui/sheet/index.ts
+++ b/app/components/ui/sheet/index.ts
@ -0,0 +1,8 @@
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";
--- a/app/components/ui/sidebar/Sidebar.vue
+++ b/app/components/ui/sidebar/Sidebar.vue
@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { SidebarProps } from ".";
+import { cn } from "@/lib/utils";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import SheetDescription from "@/components/ui/sheet/SheetDescription.vue";
+import SheetHeader from "@/components/ui/sheet/SheetHeader.vue";
+import SheetTitle from "@/components/ui/sheet/SheetTitle.vue";
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+        )
+      "
+    />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class
+        )
+      "
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarContent.vue
+++ b/app/components/ui/sidebar/SidebarContent.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
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarFooter.vue
+++ b/app/components/ui/sidebar/SidebarFooter.vue
@ -0,0 +1,14 @@
+<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="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarGroup.vue
+++ b/app/components/ui/sidebar/SidebarGroup.vue
@ -0,0 +1,14 @@
+<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="sidebar-group" data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarGroupAction.vue
+++ b/app/components/ui/sidebar/SidebarGroupAction.vue
@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/sidebar/SidebarGroupContent.vue
+++ b/app/components/ui/sidebar/SidebarGroupContent.vue
@ -0,0 +1,14 @@
+<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="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/app/components/ui/sidebar/SidebarGroupLabel.vue
@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/sidebar/SidebarHeader.vue
+++ b/app/components/ui/sidebar/SidebarHeader.vue
@ -0,0 +1,14 @@
+<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="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarInput.vue
+++ b/app/components/ui/sidebar/SidebarInput.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Input data-slot="sidebar-input" data-sidebar="input" :class="cn('bg-background h-8 w-full shadow-none', props.class)">
+    <slot />
+  </Input>
+</template>
--- a/app/components/ui/sidebar/SidebarInset.vue
+++ b/app/components/ui/sidebar/SidebarInset.vue
@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="
+      cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </main>
+</template>
--- a/app/components/ui/sidebar/SidebarMenu.vue
+++ b/app/components/ui/sidebar/SidebarMenu.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+    <slot />
+  </ul>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuAction.vue
+++ b/app/components/ui/sidebar/SidebarMenuAction.vue
@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean;
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    as: "button",
+  }
+);
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class
+      )
+    "
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/app/components/ui/sidebar/SidebarMenuBadge.vue
@ -0,0 +1,28 @@
+<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="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuButton.vue
+++ b/app/components/ui/sidebar/SidebarMenuButton.vue
@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue";
+import { useSidebar } from "./utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component;
+    }
+  >(),
+  {
+    as: "button",
+    variant: "default",
+    size: "default",
+  }
+);
+
+const { isMobile, state } = useSidebar();
+
+const delegatedProps = reactiveOmit(props, "tooltip");
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/app/components/ui/sidebar/SidebarMenuButtonChild.vue
@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { SidebarMenuButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { sidebarMenuButtonVariants } from ".";
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants["variant"];
+  size?: SidebarMenuButtonVariants["size"];
+  isActive?: boolean;
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: "button",
+  variant: "default",
+  size: "default",
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuItem.vue
+++ b/app/components/ui/sidebar/SidebarMenuItem.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
+    <slot />
+  </li>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/app/components/ui/sidebar/SidebarMenuSkeleton.vue
@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const props = defineProps<{
+  showIcon?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuSub.vue
+++ b/app/components/ui/sidebar/SidebarMenuSub.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ul>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/app/components/ui/sidebar/SidebarMenuSubButton.vue
@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: "sm" | "md";
+      isActive?: boolean;
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    as: "a",
+    size: "md",
+  }
+);
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/app/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/app/components/ui/sidebar/SidebarMenuSubItem.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+    <slot />
+  </li>
+</template>
--- a/app/components/ui/sidebar/SidebarProvider.vue
+++ b/app/components/ui/sidebar/SidebarProvider.vue
@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from "vue";
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { TooltipProvider } from "reka-ui";
+import { computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from "./utils";
+
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean;
+    open?: boolean;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    open: undefined,
+  }
+);
+
+const emits = defineEmits<{
+  "update:open": [open: boolean];
+}>();
+
+const isMobile = useMediaQuery("(max-width: 768px)");
+const openMobile = ref(false);
+
+const open = useVModel(props, "open", emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+  open.value = value; // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value;
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+
+useEventListener("keydown", (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+    toggleSidebar();
+  }
+});
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? "expanded" : "collapsed"));
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+});
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
--- a/app/components/ui/sidebar/SidebarRail.vue
+++ b/app/components/ui/sidebar/SidebarRail.vue
@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { useSidebar } from "./utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="
+      cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class
+      )
+    "
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
--- a/app/components/ui/sidebar/SidebarSeparator.vue
+++ b/app/components/ui/sidebar/SidebarSeparator.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+    <slot />
+  </Separator>
+</template>
--- a/app/components/ui/sidebar/SidebarTrigger.vue
+++ b/app/components/ui/sidebar/SidebarTrigger.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { PanelLeft } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "./utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
--- a/app/components/ui/sidebar/index.ts
+++ b/app/components/ui/sidebar/index.ts
@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+import { cva } from "class-variance-authority";
+
+export interface SidebarProps {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  class?: HTMLAttributes["class"];
+}
+
+export { default as Sidebar } from "./Sidebar.vue";
+export { default as SidebarContent } from "./SidebarContent.vue";
+export { default as SidebarFooter } from "./SidebarFooter.vue";
+export { default as SidebarGroup } from "./SidebarGroup.vue";
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
+export { default as SidebarHeader } from "./SidebarHeader.vue";
+export { default as SidebarInput } from "./SidebarInput.vue";
+export { default as SidebarInset } from "./SidebarInset.vue";
+export { default as SidebarMenu } from "./SidebarMenu.vue";
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
+export { default as SidebarProvider } from "./SidebarProvider.vue";
+export { default as SidebarRail } from "./SidebarRail.vue";
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";
+
+export { useSidebar } from "./utils";
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;
--- a/app/components/ui/sidebar/utils.ts
+++ b/app/components/ui/sidebar/utils.ts
@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from "vue";
+import { createContext } from "reka-ui";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<"expanded" | "collapsed">;
+  open: Ref<boolean>;
+  setOpen: (value: boolean) => void;
+  isMobile: Ref<boolean>;
+  openMobile: Ref<boolean>;
+  setOpenMobile: (value: boolean) => void;
+  toggleSidebar: () => void;
+}>("Sidebar");
--- a/app/components/ui/skeleton/Skeleton.vue
+++ b/app/components/ui/skeleton/Skeleton.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+  <div data-slot="skeleton" :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
+</template>
--- a/app/components/ui/skeleton/index.ts
+++ b/app/components/ui/skeleton/index.ts
@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue";
--- a/app/components/ui/tooltip/Tooltip.vue
+++ b/app/components/ui/tooltip/Tooltip.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui";
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>
--- a/app/components/ui/tooltip/TooltipContent.vue
+++ b/app/components/ui/tooltip/TooltipContent.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+});
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+          props.class
+        )
+      "
+    >
+      <slot />
+
+      <TooltipArrow
+        class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+      />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
--- a/app/components/ui/tooltip/TooltipProvider.vue
+++ b/app/components/ui/tooltip/TooltipProvider.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui";
+import { TooltipProvider } from "reka-ui";
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+});
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
--- a/app/components/ui/tooltip/TooltipTrigger.vue
+++ b/app/components/ui/tooltip/TooltipTrigger.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui";
+import { TooltipTrigger } from "reka-ui";
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
--- a/app/components/ui/tooltip/index.ts
+++ b/app/components/ui/tooltip/index.ts
@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
--- a/app/layouts/Default.vue
+++ b/app/layouts/Default.vue
@ -1,21 +1,48 @@
-<template>
-  <div class="layout-wrapper layout-static">
-    <default-topbar />
-    <default-sidebar />
-    <div class="layout-main-container">
-      <div class="layout-main">
-        <slot />
-      </div>
-      <default-footer />
-    </div>
-    <div class="layout-mask animate-fadein"></div>
-  </div>
-  <Toast />
-</template>
-
 <script setup lang="ts">
-import Toast from "primevue/toast";
-import DefaultTopbar from "~/layouts/default/Topbar.vue";
 import DefaultSidebar from "~/layouts/default/Sidebar.vue";
-import DefaultFooter from "~/layouts/default/Footer.vue";
+
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+
+import { Separator } from "~/components/ui/separator";
+
+const currentYear = new Date().getFullYear();
 </script>
+
+<template>
+  <SidebarProvider>
+    <DefaultSidebar />
+    <SidebarInset>
+      <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <main class="flex flex-1 flex-col gap-4 p-4">
+        <slot />
+      </main>
+      <footer class="flex h-12 shrink-0 items-center gap-2 border-b px-4" data-testid="footer">
+        <div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025</div>
+        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025 - {{ currentYear }}</div>
+      </footer>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
--- a/app/layouts/default/Footer.vue
+++ b/app/layouts/default/Footer.vue
@ -1,10 +0,0 @@
-<script setup lang="ts">
-const currentYear = new Date().getFullYear();
-</script>
-<template>
-  <footer class="layout-footer font-bold">
-    <div v-if="currentYear === 2025">Glowing Fiesta 2025</div>
-    <div v-else>Glowing Fiesta 2025 - {{ currentYear }}</div>
-    <div class="font-light text-emerald-500">(with auto-deploy)</div>
-  </footer>
-</template>
--- a/app/layouts/default/Sidebar.vue
+++ b/app/layouts/default/Sidebar.vue
@ -1,35 +1,245 @@
-<template>
-  <div class="layout-sidebar">
-    <ul class="layout-menu">
-      <li class="layout-root-menuitem">
-        <div class="layout-menuitem-root-text">Home</div>
-        <ul class="layout-submenu">
-          <li>
-            <nuxt-link to="/">
-              <i class="pi pi-home layout-menuitem-icon"></i>
-              <span class="layout-menuitem-text">Dashboard</span>
-            </nuxt-link>
-          </li>
-        </ul>
-      </li>
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  BadgeCheck,
+  Bell,
+  ChevronRight,
+  ChevronsUpDown,
+  CreditCard,
+  BookOpen,
+  HandCoins,
+  LogOut,
+  Settings2,
+  Sparkles,
+  SquareTerminal,
+} from "lucide-vue-next";

-      <li class="layout-root-menuitem">
-        <div class="layout-menuitem-root-text">Configuration</div>
-        <ul class="layout-submenu">
-          <li>
-            <nuxt-link to="/config/account">
-              <i class="pi pi-user layout-menuitem-icon"></i>
-              <span class="layout-menuitem-text">Account</span>
-            </nuxt-link>
-          </li>
-          <li>
-            <nuxt-link to="/config/settings">
-              <i class="pi pi-cog layout-menuitem-icon"></i>
-              <span class="layout-menuitem-text">Settings</span>
-            </nuxt-link>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+  type SidebarProps,
+} from "~/components/ui/sidebar";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+
+const data = {
+  user: {
+    name: "Liviu",
+    email: "x.liviu@gmail.com",
+    avatar: "https://git.burcusel.nl/avatars/bcc51c59d08174c798ba7db59631df6cb820e042679af9098cc03ef68330f486?size=200",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        { title: "History", url: "#" },
+        { title: "Starred", url: "#" },
+        { title: "Settings", url: "#" },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      isActive: true,
+      items: [
+        { title: "Introduction", url: "#" },
+        { title: "Get Started", url: "#" },
+        { title: "Tutorials", url: "#" },
+        { title: "Changelog", url: "#" },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      isActive: true,
+      items: [
+        { title: "General", url: "#" },
+        { title: "Billing", url: "#" },
+        { title: "Limits", url: "#" },
+      ],
+    },
+  ],
+};
+
+interface NavItem {
+  title: string;
+  url: string;
+  icon?: any;
+  isActive?: boolean;
+  items?: { title: string; url: string }[];
+}
+
+interface SidebarLayoutProps extends /* @vue-ignore */ SidebarProps {
+  navItems?: NavItem[];
+}
+
+const props = withDefaults(defineProps<SidebarLayoutProps>(), {
+  collapsible: "icon",
+});
+
+const navMain = computed(() => props.navItems || data.navMain);
+
+const { isMobile } = useSidebar();
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <NuxtLink to="/">
+              <div
+                class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+              >
+                <HandCoins class="size-4" />
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-bold text-primary">Glowing Fiesta</span>
+                <span>v1.0.0</span>
+              </div>
+            </NuxtLink>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu>
+          <Collapsible
+            v-for="item in navMain"
+            :key="item.title"
+            as-child
+            :default-open="item.isActive"
+            class="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger as-child>
+                <SidebarMenuButton :tooltip="item.title">
+                  <component :is="item.icon" v-if="item.icon" class="text-primary" />
+                  <span class="font-bold text-primary">{{ item.title }}</span>
+                  <ChevronRight
+                    class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 text-primary"
+                  />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                    <SidebarMenuSubButton as-child>
+                      <NuxtLink :to="subItem.url">
+                        <span>{{ subItem.title }}</span>
+                      </NuxtLink>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <SidebarMenuButton
+                size="lg"
+                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <Avatar class="h-8 w-8 rounded-lg">
+                  <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
+                  <AvatarFallback class="rounded-lg"> LB </AvatarFallback>
+                </Avatar>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-medium">{{ data.user.name }}</span>
+                  <span class="truncate text-xs">{{ data.user.email }}</span>
+                </div>
+                <ChevronsUpDown class="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+              :side="isMobile ? 'bottom' : 'right'"
+              align="end"
+              :side-offset="4"
+            >
+              <DropdownMenuLabel class="p-0 font-normal">
+                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar class="h-8 w-8 rounded-lg">
+                    <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
+                    <AvatarFallback class="rounded-lg">LB</AvatarFallback>
+                  </Avatar>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">{{ data.user.name }}</span>
+                    <span class="truncate text-xs">{{ data.user.email }}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <Sparkles />
+                  Upgrade to Pro
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <BadgeCheck />
+                  Account
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CreditCard />
+                  Billing
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Bell />
+                  Notifications
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <LogOut />
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+
+    <SidebarRail></SidebarRail>
+  </Sidebar>
 </template>
--- a/app/layouts/default/Topbar.vue
+++ b/app/layouts/default/Topbar.vue
@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const isDarkTheme = ref(false);
-
-const toggleDarkMode = () => {
-  isDarkTheme.value = !isDarkTheme.value;
-  document.documentElement.classList.toggle("app-dark");
-};
-
-const toggleMenu = () => {
-  document.getElementsByClassName("layout-wrapper")[0]?.classList.toggle("layout-static-inactive");
-};
-</script>
-
-<template>
-  <nav class="layout-topbar">
-    <div class="layout-topbar-logo-container">
-      <button class="layout-menu-button layout-topbar-action" @click="toggleMenu">
-        <i class="pi pi-bars"></i>
-      </button>
-
-      <nuxt-link to="/" class="layout-topbar-logo">
-        <img src="@/assets/images/logo.svg" alt="Git like tree using red, white-ish and blue colours." />
-        <span>Glowing Fiesta</span>
-      </nuxt-link>
-    </div>
-
-    <div class="layout-topbar-actions">
-      <div class="layout-config-menu">
-        <button type="button" class="layout-topbar-action layout-topbar-action-highlight" @click="toggleDarkMode">
-          <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
-        </button>
-      </div>
-
-      <Divider layout="vertical" />
-
-      <div class="layout-topbar-menu hidden lg:block">
-        <div class="layout-topbar-menu-content">
-          <button type="button" class="layout-topbar-action">
-            <i class="pi pi-calendar"></i>
-            <span>Calendar</span>
-          </button>
-          <button type="button" class="layout-topbar-action">
-            <i class="pi pi-inbox"></i>
-            <span>Messages</span>
-          </button>
-          <button type="button" class="layout-topbar-action">
-            <i class="pi pi-user"></i>
-            <span>Profile</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				`export { default as Input } from "./Input.vue";`
				`@ -0,0 +1 @@`
				`export { default as Separator } from "./Separator.vue";`
				`@ -0,0 +1 @@`
				`export { default as Skeleton } from "./Skeleton.vue";`