update saladeaul.adigitaltw

2025-11-10 15:33:23 -03:00
parent c3f370e86c
commit 9ff11c997c
46 changed files with 302 additions and 1941 deletions
--- a/apps/id.saladeaula.digital/worker-configuration.d.ts
+++ b/apps/id.saladeaula.digital/worker-configuration.d.ts
@@ -1,12 +1,12 @@
 /* eslint-disable */
-// Generated by Wrangler by running `wrangler types` (hash: 564589b5fae9d7cbc52b477d517d8e7f)
+// Generated by Wrangler by running `wrangler types` (hash: 20d12d2cb42a565d117b277533ca85a9)
 // Runtime types generated with workerd@1.20251011.0 2025-04-04 
 declare namespace Cloudflare {
 	interface GlobalProps {
 		mainModule: typeof import("./workers/app");
 	}
 	interface Env {
-		ISSUER_URL: "https://duiolq49qn25e.cloudfront.net";
+		ISSUER_URL: "https://58tkjsb308.execute-api.sa-east-1.amazonaws.com";
 	}
 }
 interface Env extends Cloudflare.Env {}
--- a/apps/saladeaula.digital/app/routes/certs.tsx
+++ b/apps/saladeaula.digital/app/routes/certs.tsx
@@ -0,0 +1,44 @@
+import type { Route } from './+types'
+
+import { Link } from 'react-router'
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@repo/ui/components/ui/breadcrumb'
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Certificados' }]
+}
+
+export default function Component() {
+  return (
+    <div className="space-y-2.5">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="..">Meus cursos</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Certificados</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="space-y-0.5">
+        <h1 className="text-2xl font-bold tracking-tight">Certificados</h1>
+        <p className="text-muted-foreground">
+          Gerencie seus certificados com facilidade! Visualize suas conquistas e
+          acompanhe seus cursos concluídos.
+        </p>
+      </div>
+    </div>
+  )
+}
--- a/apps/saladeaula.digital/app/routes/layout.tsx
+++ b/apps/saladeaula.digital/app/routes/layout.tsx
@@ -1,18 +1,27 @@
 import type { Route } from './+types'

+import { useToggle } from 'ahooks'
+import { MenuIcon } from 'lucide-react'
 import { Link, NavLink, Outlet } from 'react-router'

 import { userContext } from '@repo/auth/context'
 import { authMiddleware } from '@repo/auth/middleware/auth'
+
 import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
 import { NavUser } from '@repo/ui/components/nav-user'
+import { Button } from '@repo/ui/components/ui/button'
 import {
  NavigationMenu,
-  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList
 } from '@repo/ui/components/ui/navigation-menu'
-import { useIsMobile } from '@repo/ui/hooks/use-mobile'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from '@repo/ui/components/ui/sheet'

 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]

@@ -21,9 +30,24 @@ export async function loader({ context }: Route.ActionArgs) {
  return Response.json({ user })
 }

+const navMain = [
+  {
+    title: 'Meus cursos',
+    url: '/'
+  },
+  {
+    title: 'Certificados',
+    url: '/certs'
+  },
+  {
+    title: 'Histórico de compras',
+    url: '/payments'
+  }
+]
+
 export default function Component({ loaderData }: Route.ComponentProps) {
-  const isMobile = useIsMobile()
  const { user } = loaderData
+  const [isOpen, { toggle }] = useToggle()

  return (
    <div className="relative flex flex-col flex-1 min-w-0">
@@ -32,26 +56,61 @@ export default function Component({ loaderData }: Route.ComponentProps) {
                   px-4 py-2 lg:py-4 sticky top-0 z-5"
      >
        <div className="container mx-auto flex items-center">
-          <div className="flex gap-5">
+          {/* Desktop Menu */}
+          <div className="hidden lg:flex gap-8">
            <Link to="/">
              <ThemedImage />
            </Link>

-            <NavigationMenu viewport={isMobile}>
+            <NavigationMenu>
              <NavigationMenuList>
-                <NavigationMenuItem>
-                  <NavMenuLink to="/">Meus cursos</NavMenuLink>
-                </NavigationMenuItem>
-                <NavigationMenuItem>
-                  <NavMenuLink to="/certs">Certificados</NavMenuLink>
-                </NavigationMenuItem>
-                <NavigationMenuItem>
-                  <NavMenuLink to="/payments">Histórico de compras</NavMenuLink>
-                </NavigationMenuItem>
+                {navMain.map(({ url, title }, key) => (
+                  <NavigationMenuLink
+                    key={key}
+                    className="font-medium aria-[current=page]:bg-muted"
+                    asChild
+                  >
+                    <NavLink to={url}>{title}</NavLink>
+                  </NavigationMenuLink>
+                ))}
              </NavigationMenuList>
            </NavigationMenu>
          </div>

+          {/* Mobile Menu */}
+          <div className="lg:hidden">
+            <Sheet open={isOpen} onOpenChange={toggle}>
+              <SheetTrigger asChild>
+                <Button variant="outline" size="icon" className="">
+                  <MenuIcon />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-64 overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>
+                    <Link to="/">
+                      <ThemedImage />
+                    </Link>
+                  </SheetTitle>
+                </SheetHeader>
+
+                <ul className="px-2">
+                  {navMain.map(({ url, title }, key) => (
+                    <li key={key}>
+                      <NavLink
+                        to={url}
+                        className="px-2 py-0.5 block"
+                        onClick={toggle}
+                      >
+                        {title}
+                      </NavLink>
+                    </li>
+                  ))}
+                </ul>
+              </SheetContent>
+            </Sheet>
+          </div>
+
          <div className="ml-auto flex gap-2.5 items-center">
            <ModeToggle />
            <NavUser user={user} />
@@ -67,14 +126,3 @@ export default function Component({ loaderData }: Route.ComponentProps) {
    </div>
  )
 }
-
-function NavMenuLink({ children, ...props }) {
-  return (
-    <NavigationMenuLink
-      className="font-medium aria-[current=page]:bg-muted"
-      asChild
-    >
-      <NavLink {...props}>{children}</NavLink>
-    </NavigationMenuLink>
-  )
-}
--- a/apps/studio.saladeaula.digital/app/app.css
+++ b/apps/studio.saladeaula.digital/app/app.css
@@ -1,133 +1,11 @@
-@import 'tailwindcss' source('.');
-@import 'tw-animate-css';
+@import 'tailwindcss';
+@import '@repo/ui/globals.css';

-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --font-sans:
-    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
-html,
-body {
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --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.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+/**
+ * This is necessary to load the @repo/ui package when moving from
+ * @tailwindcss/vite v4.0.7 to v4.0.8.
+ *
+ * For more details, see:
+ * https://github.com/tailwindlabs/tailwindcss/issues/16733
+ */
+@source '../../../packages/ui';
--- a/apps/studio.saladeaula.digital/app/components/logo.svg
+++ b/apps/studio.saladeaula.digital/app/components/logo.svg
@@ -1,43 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1072.73 329.6" width="111" height="36" title="EDUSEG">
-  <g>
-    <g>
-      <path
-        fill="#8cd366"
-        d="M152.18,217.62l-68.61-30.91c-1.88-1.2-4.28-1.2-6.16,0l-68.61,30.91c-3.81,2.43-8.8-.3-8.8-4.82V8.98C0,5.82,2.56,3.26,5.72,3.26h149.54c3.16,0,5.72,2.56,5.72,5.72v203.81c0,4.52-5,7.26-8.8,4.82Z"
-      ></path>
-      <path fill="#2e3524" d="M93.97,74.01H26.61v20.16h67.36v-20.16Z"></path>
-      <path fill="#2e3524" d="M107.44,111.16H26.61v26.8h80.83v-26.8Z"></path>
-      <path fill="#2e3524" d="M107.44,30.27H26.61v26.8h80.83v-26.8Z"></path>
-      <path
-        fill="#2e3524"
-        d="M134.38,131.23c0-3.72-3.02-6.73-6.73-6.73s-6.73,3.02-6.73,6.73,3.02,6.73,6.73,6.73,6.73-3.02,6.73-6.73Z"
-      ></path>
-    </g>
-    <g>
-      <path fill="#f9f7e8" d="M244.7,3.24h92.33v44.43h-44.15v88.85h39.38v39.62h-39.38v105.77h44.15v44.42h-92.33V3.24Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M362.72,3.24h57.79c10.71,0,20.47,2.35,29.29,7.06,8.83,4.7,15.79,11.18,20.87,19.39,5.08,8.21,7.63,17.45,7.63,27.67v214.88c0,10.22-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.83,4.7-18.73,7.08-29.7,7.08h-57.79V3.24ZM427.55,283.88c1.74-1.87,2.6-4.18,2.6-6.86V52.56c-.26-2.69-1.34-4.97-3.22-6.86-1.88-1.87-4.15-2.83-6.82-2.83h-14v243.85h14.41c2.93,0,5.27-.94,7.01-2.83h.02Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M531.5,322.49c-8.71-4.7-15.6-11.16-20.68-19.39-5.08-8.21-7.63-17.42-7.63-27.67V3.24h48.15v279.41c0,2.69.93,4.99,2.82,6.86,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.86V3.24h48.16v272.21c0,10.25-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.85,4.7-18.73,7.08-29.7,7.08s-20.8-2.35-29.5-7.08l.05-.02Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M672.79,322.49c-8.7-4.7-15.6-11.16-20.68-19.39-5.08-8.21-7.63-17.42-7.63-27.67v-78.75h48.16v85.95c0,2.69.93,4.99,2.82,6.87,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.87v-77.88c0-5.66-2.22-10.3-6.63-13.94-4.41-3.62-11.57-8.02-21.47-13.13-8.3-4.3-15.05-8.14-20.27-11.52-5.22-3.36-9.71-7.87-13.45-13.54-3.75-5.66-5.63-12.24-5.63-19.8V54.12c0-10.22,2.53-19.44,7.63-27.67,5.08-8.21,11.97-14.66,20.68-19.39,8.68-4.7,18.53-7.06,29.5-7.06s20.87,2.35,29.69,7.06c8.83,4.7,15.72,11.18,20.68,19.39,4.96,8.21,7.42,17.45,7.42,27.67v71.09h-48.16V46.92c0-2.69-.88-4.97-2.6-6.86-1.74-1.87-4.08-2.83-7.01-2.83-2.67,0-4.96.94-6.82,2.83-1.89,1.9-2.82,4.18-2.82,6.86v69.79c0,6.19,2.34,11.26,7.04,15.14,4.67,3.91,12.24,8.83,22.68,14.74,8.04,4.32,14.57,8.09,19.68,11.3,5.08,3.24,9.37,7.46,12.83,12.72,3.48,5.26,5.22,11.26,5.22,17.98v86.83c0,10.25-2.48,19.46-7.42,27.67-4.96,8.21-11.83,14.69-20.68,19.39-8.85,4.71-18.72,7.08-29.7,7.08s-20.8-2.35-29.5-7.08Z"
-      ></path>
-      <path fill="#f9f7e8" d="M784.56,3.24h92.33v44.43h-44.15v88.85h39.38v39.62h-39.38v105.77h44.15v44.42h-92.33V3.24Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M920.63,322.49c-5.63-4.18-10.11-10.1-13.45-17.76-3.34-7.68-5.01-16.49-5.01-26.45V53.71c0-9.96,2.53-19.06,7.63-27.26,5.08-8.21,12.05-14.66,20.87-19.39,8.83-4.7,18.6-7.06,29.32-7.06s20.54,2.35,29.5,7.06c8.97,4.7,15.91,11.18,20.87,19.39,4.96,8.21,7.42,17.3,7.42,27.26v94.51h-48.16V46.92c0-2.69-.88-4.97-2.6-6.86-1.74-1.87-4.08-2.83-7.01-2.83-2.67,0-4.96.94-6.82,2.83-1.89,1.9-2.82,4.18-2.82,6.86v231.36c0,2.69.93,4.99,2.82,6.87,1.86,1.9,4.15,2.83,6.82,2.83,2.93,0,5.27-.94,7.01-2.83,1.74-1.87,2.6-4.18,2.6-6.87v-46.03h-11.64v-51.29h59.8v145.4h-48.16v-14.14c-2.96,5.4-6.82,9.48-11.64,12.31-4.82,2.83-10.83,4.25-18.06,4.25s-13.64-2.09-19.27-6.26l-.02-.02Z"
-      ></path>
-      <path
-        fill="#f9f7e8"
-        d="M1053.27,25.05h-6.13l-.06-3.69h5.48c.83-.02,1.61-.15,2.33-.4.72-.27,1.3-.64,1.73-1.14.44-.51.65-1.14.65-1.87,0-.93-.16-1.67-.48-2.22-.3-.55-.83-.94-1.59-1.16-.74-.25-1.74-.37-3.01-.37h-3.78v20.42h-4.12V10.54h7.9c1.87,0,3.49.27,4.86.82,1.38.53,2.44,1.34,3.18,2.44.76,1.08,1.14,2.43,1.14,4.06,0,1.02-.24,1.93-.71,2.73-.47.8-1.17,1.49-2.1,2.07-.91.57-2.03,1.03-3.35,1.39-.06,0-.12.07-.2.2-.06.13-.11.2-.17.2-.32.19-.53.33-.63.43-.08.08-.16.12-.25.14-.08.02-.31.03-.68.03ZM1052.99,25.05l.6-2.81c2.95,0,4.97.64,6.05,1.93,1.08,1.27,1.62,2.89,1.62,4.86v1.53c0,.7.03,1.37.08,2.02.08.62.21,1.15.4,1.59v.45h-4.23c-.19-.49-.3-1.19-.34-2.1-.02-.91-.03-1.57-.03-1.99v-1.48c0-1.38-.31-2.39-.94-3.04s-1.69-.97-3.21-.97ZM1035.75,22.92c0,2.52.43,4.87,1.28,7.04.87,2.16,2.08,4.05,3.64,5.68,1.55,1.61,3.34,2.87,5.37,3.78,2.05.89,4.22,1.33,6.53,1.33s4.51-.44,6.53-1.33c2.03-.91,3.8-2.17,5.34-3.78,1.53-1.63,2.74-3.52,3.61-5.68.87-2.18,1.31-4.52,1.31-7.04s-.44-4.86-1.31-7.01c-.87-2.16-2.07-4.04-3.61-5.65-1.53-1.61-3.31-2.86-5.34-3.75-2.03-.91-4.2-1.36-6.53-1.36s-4.49.45-6.53,1.36c-2.03.89-3.81,2.14-5.37,3.75-1.55,1.61-2.77,3.49-3.64,5.65-.85,2.16-1.28,4.5-1.28,7.01ZM1032.4,22.92c0-3.01.52-5.8,1.56-8.38,1.04-2.57,2.49-4.82,4.34-6.73,1.86-1.93,4-3.43,6.42-4.49,2.44-1.08,5.06-1.62,7.84-1.62s5.39.54,7.81,1.62c2.44,1.06,4.58,2.56,6.42,4.49,1.86,1.91,3.31,4.16,4.35,6.73,1.06,2.57,1.59,5.37,1.59,8.38s-.53,5.8-1.59,8.38c-1.04,2.57-2.49,4.84-4.35,6.79-1.83,1.93-3.97,3.44-6.42,4.52-2.42,1.08-5.03,1.62-7.81,1.62s-5.39-.54-7.84-1.62c-2.42-1.08-4.56-2.58-6.42-4.52-1.85-1.95-3.3-4.21-4.34-6.79-1.04-2.57-1.56-5.37-1.56-8.38Z"
-      ></path>
-    </g>
-  </g>
-</svg>
--- a/apps/studio.saladeaula.digital/app/components/nav-user.tsx
+++ b/apps/studio.saladeaula.digital/app/components/nav-user.tsx
@@ -1,140 +0,0 @@
-'use client'
-
-import {
-  DollarSignIcon,
-  GraduationCapIcon,
-  LayoutDashboardIcon,
-  LogOutIcon,
-  UserIcon
-} from 'lucide-react'
-import { Link } from 'react-router'
-
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { initials } from '@/lib/utils'
-
-export function NavUser({
-  user
-}: {
-  user: {
-    name: string
-    email: string
-    scope: string
-  }
-}) {
-  const scopes = user.scope.split(' ')
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="cursor-pointer" asChild>
-        <Avatar className="size-10">
-          <AvatarFallback>{initials(user.name)}</AvatarFallback>
-        </Avatar>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-        side="bottom"
-        align="end"
-        sideOffset={4}
-      >
-        <DropdownMenuLabel className="p-0 font-normal">
-          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <Avatar className="size-10">
-              <AvatarFallback>{initials(user.name)}</AvatarFallback>
-            </Avatar>
-            <div className="grid flex-1 text-left text-sm leading-tight">
-              <span className="truncate font-medium">{user.name}</span>
-              <span className="truncate text-xs text-muted-foreground">
-                {user.email}
-              </span>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-
-        <DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Link
-              to="//scorm.eduseg.workers.dev/settings"
-              className="cursor-pointer"
-            >
-              <UserIcon />
-              Minha conta
-            </Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link
-              to="//scorm.eduseg.workers.dev/payments"
-              className="cursor-pointer"
-            >
-              <DollarSignIcon />
-              Histórico de compras
-            </Link>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-
-        <DropdownMenuGroup>
-          {grantIfHas(['apps:admin', 'apps:studio'], scopes, 'any') && (
-            <>
-              <DropdownMenuSeparator />
-              <DropdownMenuLabel className="text-white/50 text-sm">
-                Aplicações
-              </DropdownMenuLabel>
-            </>
-          )}
-
-          <DropdownMenuItem asChild>
-            <Link to="//scorm.eduseg.workers.dev" className="cursor-pointer">
-              <GraduationCapIcon />
-              Sala de aula
-            </Link>
-          </DropdownMenuItem>
-
-          {grantIfHas(['apps:admin'], scopes) && (
-            <>
-              <DropdownMenuItem asChild>
-                <Link
-                  to="//admin.saladeaula.digital"
-                  className="cursor-pointer"
-                >
-                  <LayoutDashboardIcon />
-                  Administrador
-                </Link>
-              </DropdownMenuItem>
-            </>
-          )}
-        </DropdownMenuGroup>
-
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link to="/logout" className="cursor-pointer" reloadDocument>
-            <LogOutIcon />
-            Sair
-          </Link>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function grantIfHas(
-  required: string[],
-  granted: string[],
-  mode: 'all' | 'any' = 'all'
-): boolean {
-  const grantedSet: Set<string> = new Set(granted)
-
-  if (mode === 'all') {
-    return required.every((scope) => grantedSet.has(scope))
-  }
-
-  return required.some((scope) => grantedSet.has(scope))
-}
--- a/apps/studio.saladeaula.digital/app/components/search-form.tsx
+++ b/apps/studio.saladeaula.digital/app/components/search-form.tsx
@@ -1,47 +0,0 @@
-import { debounce } from 'lodash'
-import { SearchIcon } from 'lucide-react'
-import { useRef } from 'react'
-
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput
-} from '@/components/ui/input-group'
-
-import { useKeyPress } from '@/hooks/use-keypress'
-import { cn } from '@/lib/utils'
-
-export function SearchForm({
-  placeholder,
-  className,
-  onChange,
-  ...props
-}: {
-  placeholder?: React.ReactNode
-  className?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-} & React.HTMLAttributes<HTMLDivElement>) {
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useKeyPress('/', () => {
-    inputRef.current?.focus()
-  })
-
-  return (
-    <InputGroup className="group">
-      <InputGroupInput
-        className={cn('peer', className)}
-        placeholder=" "
-        ref={inputRef}
-        onChange={debounce(onChange, 200)}
-        {...props}
-      />
-      <InputGroupAddon>
-        <SearchIcon />
-      </InputGroupAddon>
-      <InputGroupAddon className="font-normal hidden peer-focus-within:hidden peer-placeholder-shown:block">
-        {placeholder}
-      </InputGroupAddon>
-    </InputGroup>
-  )
-}
--- a/apps/studio.saladeaula.digital/app/components/skeleton.tsx
+++ b/apps/studio.saladeaula.digital/app/components/skeleton.tsx
@@ -1,19 +0,0 @@
-import { Skeleton as XSkeleton } from '@/components/ui/skeleton'
-
-export function Skeleton() {
-  return (
-    <div className="lg:max-w-2xl mx-auto flex flex-col space-y-3">
-      <div className="space-y-2">
-        <XSkeleton className="h-4 w-2/6" />
-        <XSkeleton className="h-4 w-4/6" />
-        <XSkeleton className="h-4 w-5/6" />
-        <XSkeleton className="h-4 w-6/6" />
-        <XSkeleton className="h-4 w-6/6" />
-        <XSkeleton className="h-4 w-3/6" />
-        <XSkeleton className="h-4 w-5/6" />
-        <XSkeleton className="h-4 w-4/6" />
-        <XSkeleton className="h-4 w-4/6" />
-      </div>
-    </div>
-  )
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/avatar.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/avatar.tsx
@@ -1,51 +0,0 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }
--- a/apps/studio.saladeaula.digital/app/components/ui/breadcrumb.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/breadcrumb.tsx
@@ -1,109 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("text-foreground font-normal", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
-  )
-}
-
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  )
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/button.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/button.tsx
@@ -1,60 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-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",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
--- a/apps/studio.saladeaula.digital/app/components/ui/card.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/card.tsx
@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/checkbox.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/checkbox.tsx
@@ -1,30 +0,0 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }
--- a/apps/studio.saladeaula.digital/app/components/ui/dropdown-menu.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/dropdown-menu.tsx
@@ -1,255 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={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-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={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",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={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",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={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-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/empty.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/empty.tsx
@@ -1,104 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty"
-      className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-header"
-      className={cn(
-        "flex max-w-sm flex-col items-center gap-2 text-center",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const emptyMediaVariants = cva(
-  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function EmptyMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
-  return (
-    <div
-      data-slot="empty-icon"
-      data-variant={variant}
-      className={cn(emptyMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-title"
-      className={cn("text-lg font-medium tracking-tight", className)}
-      {...props}
-    />
-  )
-}
-
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <div
-      data-slot="empty-description"
-      className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-content"
-      className={cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/form.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/form.tsx
@@ -1,167 +0,0 @@
-'use client'
-
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import * as React from 'react'
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues
-} from 'react-hook-form'
-
-import { Label } from '@/components/ui/label'
-import { cn } from '@/lib/utils'
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn('grid gap-2', className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn('data-[error=true]:text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? '') : props.children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn('text-destructive text-sm', className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-}
-
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useFormField
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/input-group.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/input-group.tsx
@@ -1,168 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
-        "h-9 min-w-0 has-[>textarea]:h-auto",
-
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
-
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-)
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
-      }}
-      {...props}
-    />
-  )
-}
-
-const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  )
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}
--- a/apps/studio.saladeaula.digital/app/components/ui/input.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/input.tsx
@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
--- a/apps/studio.saladeaula.digital/app/components/ui/kbd.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/kbd.tsx
@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }
--- a/apps/studio.saladeaula.digital/app/components/ui/label.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/label.tsx
@@ -1,22 +0,0 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
--- a/apps/studio.saladeaula.digital/app/components/ui/separator.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/separator.tsx
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
--- a/apps/studio.saladeaula.digital/app/components/ui/skeleton.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/skeleton.tsx
@@ -1,13 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
--- a/apps/studio.saladeaula.digital/app/components/ui/spinner.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/spinner.tsx
@@ -1,16 +0,0 @@
-import { Loader2Icon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  )
-}
-
-export { Spinner }
--- a/apps/studio.saladeaula.digital/app/components/ui/textarea.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/textarea.tsx
@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }
--- a/apps/studio.saladeaula.digital/app/components/ui/tooltip.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/tooltip.tsx
@@ -1,59 +0,0 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={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 origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/apps/studio.saladeaula.digital/app/hooks/use-keypress.tsx
+++ b/apps/studio.saladeaula.digital/app/hooks/use-keypress.tsx
@@ -1,22 +0,0 @@
-import { throttle } from 'lodash'
-import { useEffect } from 'react'
-
-export function useKeyPress(targetKey, callback) {
-  useEffect(() => {
-    const onKeyDown = throttle((event) => {
-      if (event.key === targetKey) {
-        event.preventDefault()
-        callback(event)
-      }
-    }, 300)
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-      onKeyDown.cancel?.()
-    }
-  }, [targetKey, callback])
-
-  return null
-}
--- a/apps/studio.saladeaula.digital/app/lib/auth.ts
+++ b/apps/studio.saladeaula.digital/app/lib/auth.ts
@@ -1,43 +0,0 @@
-import type { OAuth2Tokens } from 'arctic'
-import { decodeJwt } from 'jose'
-import { Authenticator } from 'remix-auth'
-import { CodeChallengeMethod, OAuth2Strategy } from 'remix-auth-oauth2'
-
-export type User = {
-  sub: string
-  email: string
-  name: string
-  scope: string
-  email_verified: boolean
-  accessToken: string
-  refreshToken: string
-}
-
-export function createAuth(env: Env) {
-  const authenticator = new Authenticator()
-  const strategy = new OAuth2Strategy(
-    {
-      clientId: env.CLIENT_ID,
-      clientSecret: env.CLIENT_SECRET,
-      redirectURI: env.REDIRECT_URI,
-      authorizationEndpoint: `${env.ISSUER_URL}/authorize`,
-      tokenEndpoint: `${env.ISSUER_URL}/token`,
-      tokenRevocationEndpoint: `${env.ISSUER_URL}/revoke`,
-      scopes: env.SCOPE.split(' '),
-      codeChallengeMethod: CodeChallengeMethod.S256
-    },
-    async ({ tokens }: { tokens: OAuth2Tokens }) => {
-      const user = decodeJwt(tokens.idToken())
-
-      return {
-        ...user,
-        accessToken: tokens.accessToken(),
-        refreshToken: tokens.hasRefreshToken() ? tokens.refreshToken() : null
-      }
-    }
-  )
-
-  authenticator.use(strategy, 'oidc')
-
-  return authenticator
-}
--- a/apps/studio.saladeaula.digital/app/lib/request.ts
+++ b/apps/studio.saladeaula.digital/app/lib/request.ts
@@ -1,7 +1,8 @@
-import { userContext } from '@/context'
-import type { User } from '@/lib/auth'
 import type { LoaderFunctionArgs } from 'react-router'

+import type { User } from '@repo/auth/auth'
+import { userContext } from '@repo/auth/context'
+
 export enum HttpMethod {
  GET = 'GET',
  POST = 'POST',
--- a/apps/studio.saladeaula.digital/app/lib/session.ts
+++ b/apps/studio.saladeaula.digital/app/lib/session.ts
@@ -1,15 +0,0 @@
-import { createCookieSessionStorage } from 'react-router'
-
-export function createSessionStorage(env: Env) {
-  const sessionStorage = createCookieSessionStorage({
-    cookie: {
-      name: '__session',
-      httpOnly: true,
-      secure: false,
-      secrets: [env.SESSION_SECRET],
-      sameSite: 'lax',
-      maxAge: 86400 * 7 // 7 days
-    }
-  })
-  return sessionStorage
-}
--- a/apps/studio.saladeaula.digital/app/middleware/auth.ts
+++ b/apps/studio.saladeaula.digital/app/middleware/auth.ts
@@ -1,69 +0,0 @@
-import { userContext } from '@/context'
-import { createSessionStorage } from '@/lib/session'
-
-import { createAuth, type User } from '@/lib/auth'
-import { decodeJwt } from 'jose'
-import { redirect, type LoaderFunctionArgs } from 'react-router'
-import type { OAuth2Strategy } from 'remix-auth-oauth2'
-
-export const authMiddleware = async (
-  { request, context }: LoaderFunctionArgs,
-  next
-): Promise<Response> => {
-  const sessionStorage = createSessionStorage(context.cloudflare.env)
-  const authenticator = createAuth(context.cloudflare.env)
-  const strategy = authenticator.get<OAuth2Strategy<User>>('oidc')
-  const session = await sessionStorage.getSession(request.headers.get('cookie'))
-  let user = session.get('user') as User | null
-
-  session.set('returnTo', new URL(request.url).toString())
-
-  if (!user) {
-    console.log('There is no user logged in')
-
-    return redirect('/login', {
-      headers: new Headers({
-        'Set-Cookie': await sessionStorage.commitSession(session)
-      })
-    })
-  }
-
-  try {
-    const accessToken = decodeJwt(user.accessToken) as { exp: number }
-    const exp = accessToken.exp * 1000
-    const leeway = 30 * 1000
-
-    if (Date.now() > exp - leeway) {
-      // @ts-ignore
-      const tokens = await strategy.refreshToken(user.refreshToken)
-
-      user = {
-        ...user,
-        accessToken: tokens.accessToken(),
-        refreshToken: tokens.refreshToken()
-      }
-
-      session.set('user', user)
-    }
-  } catch (error) {
-    console.error(error)
-    // If refreshing the token fails, remove the user from the current session
-    // so the user is forced to sign in again
-    session.unset('user')
-
-    return redirect('/', {
-      headers: new Headers({
-        'Set-Cookie': await sessionStorage.commitSession(session)
-      })
-    })
-  }
-
-  context.set(userContext, user)
-
-  const response = await next()
-  response.headers.set(
-    'Set-Cookie',
-    await sessionStorage.commitSession(session)
-  )
-  return response
-}
--- a/apps/studio.saladeaula.digital/app/root.tsx
+++ b/apps/studio.saladeaula.digital/app/root.tsx
@@ -1,3 +1,5 @@
+import type { Route } from './+types/root'
+
 import {
  isRouteErrorResponse,
  Links,
@@ -7,14 +9,16 @@ import {
  ScrollRestoration
 } from 'react-router'

-import type { Route } from './+types/root'
+import { loggingMiddleware } from '@repo/auth/middleware/logging'
+import { ThemeProvider } from '@repo/ui/components/theme-provider'
+import { Toaster } from '@repo/ui/components/ui/sonner'
 import './app.css'

-export const links: Route.LinksFunction = () => []
+export const middleware: Route.MiddlewareFunction[] = [loggingMiddleware]

 export function Layout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="pt-br" className="dark">
+    <html lang="pt-br" suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -24,9 +28,17 @@ export function Layout({ children }: { children: React.ReactNode }) {
        <Links />
      </head>
      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <Toaster position="top-center" richColors />
+          <ScrollRestoration />
+          <Scripts />
+        </ThemeProvider>
      </body>
    </html>
  )
--- a/apps/studio.saladeaula.digital/app/routes/api.ts
+++ b/apps/studio.saladeaula.digital/app/routes/api.ts
@@ -1,7 +1,7 @@
 import type { Route } from './+types'

-import { userContext } from '@/context'
-import type { User } from '@/lib/auth'
+import type { User } from '@repo/auth/auth'
+import { userContext } from '@repo/auth/context'

 export const loader = proxy
 export const action = proxy
--- a/apps/studio.saladeaula.digital/app/routes/auth/login.ts
+++ b/apps/studio.saladeaula.digital/app/routes/auth/login.ts
@@ -2,8 +2,8 @@ import type { Route } from './+types'

 import { redirect } from 'react-router'

-import { createAuth, type User } from '@/lib/auth'
-import { createSessionStorage } from '@/lib/session'
+import { createAuth, type User } from '@repo/auth/auth'
+import { createSessionStorage } from '@repo/auth/session'

 export async function loader({ request, context }: Route.ActionArgs) {
  const sessionStorage = createSessionStorage(context.cloudflare.env)
--- a/apps/studio.saladeaula.digital/app/routes/auth/logout.ts
+++ b/apps/studio.saladeaula.digital/app/routes/auth/logout.ts
@@ -1,7 +1,7 @@
 import type { Route } from './+types'

-import { createAuth, type User } from '@/lib/auth'
-import { createSessionStorage } from '@/lib/session'
+import { createAuth, type User } from '@repo/auth/auth'
+import { createSessionStorage } from '@repo/auth/session'
 import { redirect } from 'react-router'
 import type { OAuth2Strategy } from 'remix-auth-oauth2'

--- a/apps/studio.saladeaula.digital/app/routes/edit.tsx
+++ b/apps/studio.saladeaula.digital/app/routes/edit.tsx
@@ -10,10 +10,20 @@ import {
 import { Suspense, useState, type ReactNode } from 'react'
 import { useForm } from 'react-hook-form'
 import { Await, useAsyncValue, useFetcher } from 'react-router'
+import { toast } from 'sonner'
 import { z } from 'zod'

-import { Skeleton } from '@/components/skeleton'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { HttpMethod, request as req } from '@/lib/request'
+
+import type { User } from '@repo/auth/auth'
+import { userContext } from '@repo/auth/context'
+
+import { Skeleton } from '@repo/ui/components/skeleton'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from '@repo/ui/components/ui/alert'
 import {
  Breadcrumb,
  BreadcrumbItem,
@@ -21,22 +31,22 @@ import {
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
-} from '@/components/ui/breadcrumb'
-import { Button } from '@/components/ui/button'
+} from '@repo/ui/components/ui/breadcrumb'
+import { Button } from '@repo/ui/components/ui/button'
 import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
-} from '@/components/ui/card'
-import { Checkbox } from '@/components/ui/checkbox'
+} from '@repo/ui/components/ui/card'
+import { Checkbox } from '@repo/ui/components/ui/checkbox'
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+} from '@repo/ui/components/ui/dropdown-menu'
 import {
  Form,
  FormControl,
@@ -45,19 +55,16 @@ import {
  FormItem,
  FormLabel,
  FormMessage
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+} from '@repo/ui/components/ui/form'
+import { Input } from '@repo/ui/components/ui/input'
 import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput
-} from '@/components/ui/input-group'
-import { Spinner } from '@/components/ui/spinner'
-import { Switch } from '@/components/ui/switch'
-import { userContext } from '@/context'
-import type { User } from '@/lib/auth'
-import { HttpMethod, request as req } from '@/lib/request'
+} from '@repo/ui/components/ui/input-group'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { Switch } from '@repo/ui/components/ui/switch'

 const schema = z
  .object({
@@ -207,22 +214,13 @@ function Editing() {
      method: 'post',
      encType: 'multipart/form-data'
    })
+
+    toast.success('O curso foi atualizado')
  }

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-        {formState.isSubmitSuccessful ? (
-          <Alert variant="default">
-            <CircleCheckIcon />
-            <AlertTitle>Curso atualizado!</AlertTitle>
-            <AlertDescription>
-              Tudo pronto! As mudanças foram salvas e seu curso já está
-              atualizado.
-            </AlertDescription>
-          </Alert>
-        ) : null}
-
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Editar curso</CardTitle>
@@ -413,7 +411,7 @@ function Editing() {
        <div className="flex justify-end">
          <Button
            type="submit"
-            className="bg-lime-400 cursor-pointer"
+            className="cursor-pointer"
            disabled={formState.isSubmitting}
          >
            {formState.isSubmitting && <Spinner />}
--- a/apps/studio.saladeaula.digital/app/routes/index.tsx
+++ b/apps/studio.saladeaula.digital/app/routes/index.tsx
@@ -6,24 +6,31 @@ import { Suspense, useMemo } from 'react'
 import { Await, NavLink, useSearchParams } from 'react-router'

 import placeholder from '@/assets/placeholder.webp'
-import { SearchForm } from '@/components/search-form'
-import { Skeleton } from '@/components/skeleton'
-import { Card, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+import { createSearch } from '@/lib/meili'
+
+import { SearchForm } from '@repo/ui/components/search-form'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import {
+  Card,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
 import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle
-} from '@/components/ui/empty'
-import { Kbd } from '@/components/ui/kbd'
-import { Spinner } from '@/components/ui/spinner'
+} from '@repo/ui/components/ui/empty'
+import { Kbd } from '@repo/ui/components/ui/kbd'
+import { Spinner } from '@repo/ui/components/ui/spinner'
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger
-} from '@/components/ui/tooltip'
-import { createSearch } from '@/lib/meili'
+} from '@repo/ui/components/ui/tooltip'
 import type { Course } from './edit'

 export function meta({}: Route.MetaArgs) {
@@ -62,8 +69,8 @@ export default function Component({ loaderData: { data } }) {
              </>
            }
            defaultValue={term}
-            onChange={(e) => {
-              setSearchParams({ term: e.target.value })
+            onChange={(term) => {
+              setSearchParams({ term })
            }}
          />
        </div>
--- a/apps/studio.saladeaula.digital/app/routes/layout.tsx
+++ b/apps/studio.saladeaula.digital/app/routes/layout.tsx
@@ -2,10 +2,10 @@ import type { Route } from './+types'

 import { Link, Outlet } from 'react-router'

-import logo from '@/components/logo.svg'
-import { NavUser } from '@/components/nav-user'
-import { userContext } from '@/context'
-import { authMiddleware } from '@/middleware/auth'
+import { userContext } from '@repo/auth/context'
+import { authMiddleware } from '@repo/auth/middleware/auth'
+import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
+import { NavUser } from '@repo/ui/components/nav-user'

 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]

@@ -24,12 +24,14 @@ export default function Component({ loaderData }: Route.ComponentProps) {
                   px-4 py-2 lg:py-4 sticky top-0 z-5"
      >
        <div className="container mx-auto flex items-center">
-          <Link to="/" className="flex items-start gap-1">
-            <img src={logo} className="h-6 lg:h-8" />
-            <span className="text-muted-foreground text-xs">Estúdio</span>
+          <Link to="/">
+            <ThemedImage className="flex gap-1">
+              <span className="text-muted-foreground text-xs">Estúdio</span>
+            </ThemedImage>
          </Link>

-          <div className="ml-auto">
+          <div className="ml-auto flex gap-2.5 items-center">
+            <ModeToggle />
            <NavUser user={user} />
          </div>
        </div>
--- a/apps/studio.saladeaula.digital/package.json
+++ b/apps/studio.saladeaula.digital/package.json
@@ -12,18 +12,8 @@
    "typecheck": "npm run cf-typegen && react-router typegen && tsc --noEmit"
  },
  "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@remix-run/form-data-parser": "^0.12.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
+    "@repo/auth": "*",
+    "@repo/ui": "*",
    "fuse.js": "^7.1.0",
    "isbot": "^5.1.31",
    "jose": "^6.1.0",
@@ -31,12 +21,7 @@
    "lucide-react": "^0.548.0",
    "meilisearch": "^0.54.0",
    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.65.0",
-    "react-router": "^7.9.5",
-    "remix-auth-oauth2": "^3.4.1",
-    "tailwind-merge": "^3.3.1",
-    "zod": "^4.1.12"
+    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@cloudflare/vite-plugin": "^1.13.17",
--- a/apps/studio.saladeaula.digital/worker-configuration.d.ts
+++ b/apps/studio.saladeaula.digital/worker-configuration.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// Generated by Wrangler by running `wrangler types` (hash: 9130e11c7e4fa48b035ffe269cd5babc)
+// Generated by Wrangler by running `wrangler types` (hash: 94bfdc7e16675b26364c038a94ff21b3)
 // Runtime types generated with workerd@1.20251011.0 2025-04-04 
 declare namespace Cloudflare {
 	interface GlobalProps {
@@ -7,11 +7,14 @@ declare namespace Cloudflare {
 	}
 	interface Env {
 		CLIENT_ID: "78a0819e-1f9b-4da1-b05f-40ec0eaed0c8";
-		REDIRECT_URI: "https://studio.saladeaula.digital/login";
 		SCOPE: "openid profile email offline_access apps:studio";
 		API_URL: "https://bcs7fgb9og.execute-api.sa-east-1.amazonaws.com";
 		ISSUER_URL: "https://id.saladeaula.digital";
 		MEILI_HOST: "https://search.saladeaula.digital";
+		CLIENT_SECRET: string;
+		REDIRECT_URI: string;
+		SESSION_SECRET: string;
+		MEILI_API_KEY: string;
 	}
 }
 interface Env extends Cloudflare.Env {}
--- a/package-lock.json
+++ b/package-lock.json
@@ -203,18 +203,8 @@
    "apps/studio.saladeaula.digital": {
      "hasInstallScript": true,
      "dependencies": {
-        "@hookform/resolvers": "^5.2.2",
-        "@radix-ui/react-avatar": "^1.1.10",
-        "@radix-ui/react-checkbox": "^1.3.3",
-        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-label": "^2.1.7",
-        "@radix-ui/react-separator": "^1.1.7",
-        "@radix-ui/react-slot": "^1.2.3",
-        "@radix-ui/react-switch": "^1.2.6",
-        "@radix-ui/react-tooltip": "^1.2.8",
-        "@remix-run/form-data-parser": "^0.12.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
+        "@repo/auth": "*",
+        "@repo/ui": "*",
        "fuse.js": "^7.1.0",
        "isbot": "^5.1.31",
        "jose": "^6.1.0",
@@ -222,12 +212,7 @@
        "lucide-react": "^0.548.0",
        "meilisearch": "^0.54.0",
        "react": "^19.2.0",
-        "react-dom": "^19.2.0",
-        "react-hook-form": "^7.65.0",
-        "react-router": "^7.9.5",
-        "remix-auth-oauth2": "^3.4.1",
-        "tailwind-merge": "^3.3.1",
-        "zod": "^4.1.12"
+        "react-dom": "^19.2.0"
      },
      "devDependencies": {
        "@cloudflare/vite-plugin": "^1.13.17",
@@ -4002,30 +3987,6 @@
        }
      }
    },
-    "node_modules/@remix-run/form-data-parser": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/form-data-parser/-/form-data-parser-0.12.0.tgz",
-      "integrity": "sha512-PSeHTVp1nDAA1yr8HUiU0dNkQ3jD4TlW6Crw0oV406YC0JskkJ9TyHC8BYKQzi8URFX12fHJD70W3RtvofKqvw==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/multipart-parser": "^0.12.0"
-      }
-    },
-    "node_modules/@remix-run/headers": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/headers/-/headers-0.14.0.tgz",
-      "integrity": "sha512-IibY6iTkBhzHXacQkJDENlzJPe3G5RDJgzV2utftnJl/sg2qKnxtepypQmfXA6d+BI5BkzrtAd+mx7QSVY1NRQ==",
-      "license": "MIT"
-    },
-    "node_modules/@remix-run/multipart-parser": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/multipart-parser/-/multipart-parser-0.12.0.tgz",
-      "integrity": "sha512-u/o4lKmIy/KuZGuQYMGhmr+BN7VKAt3G0ny8a1SBVlBXIBAtTOmDiI2WMZtyAv0VPbaIpT3OBTrRrKIfdDAE6w==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/headers": "^0.14.0"
-      }
-    },
    "node_modules/@remix-run/node-fetch-server": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/@remix-run/node-fetch-server/-/node-fetch-server-0.8.1.tgz",
@@ -6796,6 +6757,16 @@
        "is-arrayish": "^0.3.1"
      }
    },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8187,6 +8158,7 @@
        "@radix-ui/react-select": "^2.2.6",
        "@radix-ui/react-separator": "^1.1.8",
        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
        "@radix-ui/react-tabs": "^1.1.13",
        "@radix-ui/react-tooltip": "^1.2.8",
        "@tailwindcss/postcss": "^4.1.16",
@@ -8203,6 +8175,7 @@
        "react-day-picker": "^9.11.1",
        "react-hook-form": "^7.66.0",
        "react-number-format": "^5.4.4",
+        "sonner": "^2.0.7",
        "tailwind-merge": "^3.3.1",
        "tailwindcss": "^4.1.16",
        "tw-animate-css": "^1.4.0",
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -26,6 +26,7 @@
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-separator": "^1.1.8",
    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-tooltip": "^1.2.8",
    "@tailwindcss/postcss": "^4.1.16",
@@ -42,6 +43,7 @@
    "react-day-picker": "^9.11.1",
    "react-hook-form": "^7.66.0",
    "react-number-format": "^5.4.4",
+    "sonner": "^2.0.7",
    "tailwind-merge": "^3.3.1",
    "tailwindcss": "^4.1.16",
    "tw-animate-css": "^1.4.0",
--- a/packages/ui/src/components/dark-mode.tsx
+++ b/packages/ui/src/components/dark-mode.tsx
@@ -44,11 +44,16 @@ export function ModeToggle() {
  )
 }

-export function ThemedImage({ ...props }) {
+type ThemedImageProps = {
+  children?: string
+}
+
+export function ThemedImage({ children, ...props }: ThemedImageProps) {
  return (
    <div {...props}>
      <img src={light} className="h-8" data-hide-on-theme="dark" />
      <img src={dark} className="h-8" data-hide-on-theme="light" />
+      {children}
    </div>
  )
 }
--- a/apps/studio.saladeaula.digital/app/components/ui/alert.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/alert.tsx
--- a/packages/ui/src/components/ui/navigation-menu.tsx
+++ b/packages/ui/src/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+import * as React from 'react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 function NavigationMenu({
  className,
@@ -18,7 +18,7 @@ function NavigationMenu({
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
        className
      )}
      {...props}
@@ -37,7 +37,7 @@ function NavigationMenuList({
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        'group flex flex-1 list-none items-center justify-center gap-1',
        className
      )}
      {...props}
@@ -52,14 +52,14 @@ function NavigationMenuItem({
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
+      className={cn('relative', className)}
      {...props}
    />
  )
 }

 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1'
 )

 function NavigationMenuTrigger({
@@ -70,10 +70,10 @@ function NavigationMenuTrigger({
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
      {...props}
    >
-      {children}{" "}
+      {children}{' '}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
@@ -90,8 +90,8 @@ function NavigationMenuContent({
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
        className
      )}
      {...props}
@@ -106,13 +106,13 @@ function NavigationMenuViewport({
  return (
    <div
      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
+        'absolute top-full left-0 isolate z-50 flex justify-center'
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
          className
        )}
        {...props}
@@ -145,7 +145,7 @@ function NavigationMenuIndicator({
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
        className
      )}
      {...props}
@@ -157,12 +157,12 @@ function NavigationMenuIndicator({

 export {
  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
  NavigationMenuIndicator,
-  NavigationMenuViewport,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
+  NavigationMenuViewport
 }
--- a/packages/ui/src/components/ui/sonner.tsx
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/apps/studio.saladeaula.digital/app/components/ui/switch.tsx
+++ b/apps/studio.saladeaula.digital/app/components/ui/switch.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"