From c8375f5ebcecf5e0c4238283d406e28a8ffbf1f9 Mon Sep 17 00:00:00 2001
From: Maik <maik.basel@gmx.de>
Date: Sat, 18 May 2024 12:54:29 +0200
Subject: [PATCH] refactor(frontend): Use zustand for state management
 exclusively

---
 src/app/layout.tsx                            | 19 +++----
 src/app/page.test.tsx                         |  5 +-
 src/app/page.tsx                              | 13 ++---
 src/components/ui/alert-dialog.tsx            |  2 +-
 src/components/ui/avatar.tsx                  |  2 +-
 src/components/ui/badge.tsx                   |  2 +-
 src/components/ui/breadcrumb.tsx              |  2 +-
 src/components/ui/button.tsx                  |  2 +-
 src/components/ui/checkbox.tsx                |  2 +-
 src/components/ui/command.tsx                 |  2 +-
 .../ui/data-table-column-header.tsx           |  2 +-
 .../ui/data-table-faceted-filter.tsx          |  2 +-
 src/components/ui/dialog.tsx                  |  2 +-
 src/components/ui/dropdown-menu.tsx           |  2 +-
 src/components/ui/form.tsx                    |  2 +-
 src/components/ui/input.tsx                   |  2 +-
 src/components/ui/label.tsx                   |  2 +-
 src/components/ui/popover.tsx                 |  2 +-
 src/components/ui/select.tsx                  |  2 +-
 src/components/ui/separator.tsx               |  2 +-
 src/components/ui/sheet.tsx                   |  2 +-
 src/components/ui/stepper.tsx                 |  2 +-
 src/components/ui/table.tsx                   |  2 +-
 src/components/ui/tooltip.tsx                 | 22 ++++----
 src/lib/{utils.ts => css-utils.ts}            |  0
 src/{modules/common => lib}/string-utils.ts   |  0
 .../dashboard/components/header/header.tsx    |  2 +-
 .../components/header/profile-nav.tsx         | 28 +++++------
 .../dashboard/components/sidebar/side-nav.tsx |  2 +-
 .../dashboard/components/sidebar/sidebar.tsx  |  2 +-
 .../components/sidebar/subnav-accordion.tsx   |  2 +-
 .../dashboard/context/profile-context.tsx     | 50 -------------------
 ...se-profile.tsx => use-current-profile.tsx} |  4 +-
 .../dashboard/hooks/use-profile-set.ts        | 24 +++++++++
 .../dashboard/stores/profile-set-store.ts     | 16 ++++++
 .../components/profile-form-dialog.tsx        |  2 +-
 36 files changed, 107 insertions(+), 124 deletions(-)
 rename src/lib/{utils.ts => css-utils.ts} (100%)
 rename src/{modules/common => lib}/string-utils.ts (100%)
 delete mode 100644 src/sections/dashboard/context/profile-context.tsx
 rename src/sections/dashboard/hooks/{use-profile.tsx => use-current-profile.tsx} (63%)
 create mode 100644 src/sections/dashboard/hooks/use-profile-set.ts
 create mode 100644 src/sections/dashboard/stores/profile-set-store.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7db07da..0cf9038 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,8 +4,7 @@ import React, { ReactNode } from 'react';
 import Sidebar from '@/sections/dashboard/components/sidebar/sidebar';
 import Header from '@/sections/dashboard/components/header/header';
 import { ThemeProvider } from '@/sections/dashboard/components/header/theme-provider';
-import { ProfileProvider } from '@/sections/dashboard/context/profile-context';
-import { TooltipProvider } from "@/components/ui/tooltip";
+import { TooltipProvider } from '@/components/ui/tooltip';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -27,15 +26,13 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
           disableTransitionOnChange
         >
           <TooltipProvider>
-            <ProfileProvider>
-              <Header />
-              <div className='flex h-screen border-collapse overflow-hidden'>
-                <Sidebar />
-                <main className='flex-1 overflow-y-auto overflow-x-hidden bg-secondary/10 pb-1 pt-16'>
-                  {children}
-                </main>
-              </div>
-            </ProfileProvider>
+            <Header />
+            <div className='flex h-screen border-collapse overflow-hidden'>
+              <Sidebar />
+              <main className='flex-1 overflow-y-auto overflow-x-hidden bg-secondary/10 pb-1 pt-16'>
+                {children}
+              </main>
+            </div>
           </TooltipProvider>
         </ThemeProvider>
       </body>
diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx
index 7d45020..265372c 100644
--- a/src/app/page.test.tsx
+++ b/src/app/page.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import Profiles from './page';
-import { ProfileProvider } from '@/sections/dashboard/context/profile-context';
 import { clearMocks, mockIPC } from '@tauri-apps/api/mocks';
 import { SWRConfig } from 'swr';
 import React from 'react';
@@ -29,9 +28,7 @@ describe('Profiles', () => {
     });
     render(
       <SWRConfig value={{ provider: () => new Map() }}>
-        <ProfileProvider>
-          <Profiles />
-        </ProfileProvider>
+        <Profiles />
       </SWRConfig>
     );
     await waitFor(() => {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 14f14b3..15efa79 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,18 +1,17 @@
 'use client';
 
 import React from 'react';
-import { useProfileContext } from '@/sections/dashboard/context/profile-context';
 import { ProfileDataTable } from '@/sections/profiles/components/profile-data-table';
-import { ProfileSet, profileSetSchema } from '@/modules/profiles/domain';
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
 } from '@/components/ui/breadcrumb';
+import { useProfileSet } from '@/sections/dashboard/hooks/use-profile-set';
 
-export default function Profiles() {
-  const { data, error, isLoading } = useProfileContext();
+const ProfilesPage = () => {
+  const { profileSet, error, isLoading } = useProfileSet();
 
   if (isLoading) {
     return <div>Loading...</div>; // FIXME: Make more visually appealing
@@ -22,8 +21,10 @@ export default function Profiles() {
     throw new Error(error.message); // FIXME: Handle error
   }
 
-  const parsed: ProfileSet = profileSetSchema.parse(data);
+  return <ProfileDataTable data={profileSet!} />;
+};
 
+export default function App() {
   return (
     <div className='flex h-full flex-col space-y-4 p-4 pt-6'>
       <Breadcrumb>
@@ -34,7 +35,7 @@ export default function Profiles() {
         </BreadcrumbList>
       </Breadcrumb>
 
-      <ProfileDataTable data={parsed} />
+      <ProfilesPage />
     </div>
   );
 }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 5cba559..dbc46a1 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { buttonVariants } from '@/components/ui/button';
 
 const AlertDialog = AlertDialogPrimitive.Root;
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 1346957..57ff348 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 2eb790a..95c60c1 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index 8df6bda..91832dc 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 81e2e6e..b76e693 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -2,7 +2,7 @@ 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';
+import { cn } from '@/lib/css-utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 63f4ef3..dd688f5 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 92c4b20..20e647f 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -5,7 +5,7 @@ import { type DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 const Command = React.forwardRef<
diff --git a/src/components/ui/data-table-column-header.tsx b/src/components/ui/data-table-column-header.tsx
index 02a9afd..665c7bd 100644
--- a/src/components/ui/data-table-column-header.tsx
+++ b/src/components/ui/data-table-column-header.tsx
@@ -9,7 +9,7 @@ import {
 } from '@radix-ui/react-icons';
 import { Column } from '@tanstack/react-table';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/src/components/ui/data-table-faceted-filter.tsx b/src/components/ui/data-table-faceted-filter.tsx
index bcc3e5f..f3a8d64 100644
--- a/src/components/ui/data-table-faceted-filter.tsx
+++ b/src/components/ui/data-table-faceted-filter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
 import { Column } from '@tanstack/react-table';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
 import {
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index e4ed4af..480f12b 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Dialog = DialogPrimitive.Root;
 
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 3b58cc1..6265e8a 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index b948a8f..4fbb47c 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -10,7 +10,7 @@ import {
   useFormContext,
 } from 'react-hook-form';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { Label } from '@/components/ui/label';
 
 const Form = FormProvider;
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index d2008f0..ab1044f 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 1e24ec0..65c21a0 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index f224d5e..b6c74e7 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Popover = PopoverPrimitive.Root;
 
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 8cca31d..a13b634 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Select = SelectPrimitive.Root;
 
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index da04061..f7699b4 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 768dfe5..8d7d55b 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -5,7 +5,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Sheet = SheetPrimitive.Root;
 
diff --git a/src/components/ui/stepper.tsx b/src/components/ui/stepper.tsx
index 346f068..a6c7e93 100644
--- a/src/components/ui/stepper.tsx
+++ b/src/components/ui/stepper.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { CheckIcon, Loader2, LucideIcon, X } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 45c5cde..b9b1504 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 30fc44d..3470c03 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,15 +1,15 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/css-utils';
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -19,12 +19,12 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
       className
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/lib/utils.ts b/src/lib/css-utils.ts
similarity index 100%
rename from src/lib/utils.ts
rename to src/lib/css-utils.ts
diff --git a/src/modules/common/string-utils.ts b/src/lib/string-utils.ts
similarity index 100%
rename from src/modules/common/string-utils.ts
rename to src/lib/string-utils.ts
diff --git a/src/sections/dashboard/components/header/header.tsx b/src/sections/dashboard/components/header/header.tsx
index 2c1bcdb..31b5ebc 100644
--- a/src/sections/dashboard/components/header/header.tsx
+++ b/src/sections/dashboard/components/header/header.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { Boxes } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { ThemeToggle } from '@/sections/dashboard/components/header/theme-toggle';
 import { MobileSidebar } from '@/sections/dashboard/components/header/mobile-sidebar';
 import { ProfileNav } from '@/sections/dashboard/components/header/profile-nav';
diff --git a/src/sections/dashboard/components/header/profile-nav.tsx b/src/sections/dashboard/components/header/profile-nav.tsx
index 54e1477..1e126fc 100644
--- a/src/sections/dashboard/components/header/profile-nav.tsx
+++ b/src/sections/dashboard/components/header/profile-nav.tsx
@@ -9,15 +9,11 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useProfileContext } from '@/sections/dashboard/context/profile-context';
-import { useProfile } from '@/sections/dashboard/hooks/use-profile';
-import {
-  Profile,
-  ProfileSet,
-  profileSetSchema,
-} from '@/modules/profiles/domain';
+import { Profile } from '@/modules/profiles/domain';
+import { useCurrentProfile } from '@/sections/dashboard/hooks/use-current-profile';
+import { useProfileSet } from '@/sections/dashboard/hooks/use-profile-set';
 
 interface ProfileNavItemProps {
   profileName: string;
@@ -63,19 +59,21 @@ export const ProfileNavItem: React.FC<ProfileNavItemProps> = ({
 
 export function ProfileNav() {
   const [open, setOpen] = React.useState(false);
-  const { data, error, isLoading } = useProfileContext();
-  const { current, setCurrent } = useProfile();
-  const [profileSet, setProfileSet] = useState<ProfileSet>();
+  const { profileSet, error, isLoading } = useProfileSet();
+  const { current, setCurrent } = useCurrentProfile();
+  // const [profileSet, setProfileSet] = useState<ProfileSet>();
 
   useEffect(() => {
     if (!isLoading) {
-      const parsed: ProfileSet = profileSetSchema.parse(data);
-      setProfileSet(parsed);
+      // const parsed: ProfileSet = profileSetSchema.parse(data);
+      // setProfileSet(parsed);
 
-      const initialProfile: Profile = parsed.profiles[0];
+      // const initialProfile: Profile = parsed.profiles[0];
+      const initialProfile: Profile = profileSet!.profiles[0];
+      // setCurrent(initialProfile.name);
       setCurrent(initialProfile.name);
     }
-  }, [data, error, isLoading, setCurrent]);
+  }, [profileSet, error, isLoading, setCurrent]);
 
   return (
     <DropdownMenu onOpenChange={setOpen}>
diff --git a/src/sections/dashboard/components/sidebar/side-nav.tsx b/src/sections/dashboard/components/sidebar/side-nav.tsx
index 881ae47..60a54f7 100644
--- a/src/sections/dashboard/components/sidebar/side-nav.tsx
+++ b/src/sections/dashboard/components/sidebar/side-nav.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import * as React from 'react';
 import { usePathname } from 'next/navigation';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { buttonVariants } from '@/components/ui/button';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import {
diff --git a/src/sections/dashboard/components/sidebar/sidebar.tsx b/src/sections/dashboard/components/sidebar/sidebar.tsx
index 998e70d..8fb5bef 100644
--- a/src/sections/dashboard/components/sidebar/sidebar.tsx
+++ b/src/sections/dashboard/components/sidebar/sidebar.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
 import { ChevronRight, Settings } from 'lucide-react';
diff --git a/src/sections/dashboard/components/sidebar/subnav-accordion.tsx b/src/sections/dashboard/components/sidebar/subnav-accordion.tsx
index 70c8551..fb281cf 100644
--- a/src/sections/dashboard/components/sidebar/subnav-accordion.tsx
+++ b/src/sections/dashboard/components/sidebar/subnav-accordion.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/css-utils';
 
 const Accordion = AccordionPrimitive.Root;
 
diff --git a/src/sections/dashboard/context/profile-context.tsx b/src/sections/dashboard/context/profile-context.tsx
deleted file mode 100644
index 62450d3..0000000
--- a/src/sections/dashboard/context/profile-context.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import React, {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useMemo,
-} from 'react';
-import useSWR, { Fetcher } from 'swr';
-// see https://stackoverflow.com/a/77264549
-import { invoke } from '@tauri-apps/api/tauri';
-
-type ProfileContextType = {
-  data: Record<string, unknown> | undefined;
-  error: Error | undefined;
-  isLoading: boolean;
-};
-
-export const ProfileContext = createContext<ProfileContextType>({
-  data: undefined,
-  error: undefined,
-  isLoading: true,
-});
-
-export const ProfileProvider = ({ children }: PropsWithChildren) => {
-  const fetcher: Fetcher<Record<string, never>, string> = (cmd: string) =>
-    invoke<Record<string, never>>(cmd);
-  const { data, error, isLoading } = useSWR<Record<string, never>, Error>(
-    'get_profiles',
-    fetcher
-  );
-
-  const value = useMemo(
-    () => ({ data, error, isLoading }),
-    [data, error, isLoading]
-  );
-  return (
-    <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
-  );
-};
-
-export const useProfileContext = () => {
-  const context = useContext(ProfileContext);
-
-  if (!context) {
-    throw new Error('useThemeContext must be used inside the ThemeProvider');
-  }
-
-  return context;
-};
diff --git a/src/sections/dashboard/hooks/use-profile.tsx b/src/sections/dashboard/hooks/use-current-profile.tsx
similarity index 63%
rename from src/sections/dashboard/hooks/use-profile.tsx
rename to src/sections/dashboard/hooks/use-current-profile.tsx
index 57cfdbd..68ab39b 100644
--- a/src/sections/dashboard/hooks/use-profile.tsx
+++ b/src/sections/dashboard/hooks/use-current-profile.tsx
@@ -1,11 +1,11 @@
 import { create } from 'zustand';
 
-interface ProfileStore {
+interface CurrentProfileStore {
   current: string;
   setCurrent: (profile: string) => void;
 }
 
-export const useProfile = create<ProfileStore>((set) => ({
+export const useCurrentProfile = create<CurrentProfileStore>((set) => ({
   current: '',
   setCurrent: (profile) => set(() => ({ current: profile })),
 }));
diff --git a/src/sections/dashboard/hooks/use-profile-set.ts b/src/sections/dashboard/hooks/use-profile-set.ts
new file mode 100644
index 0000000..e47fa6b
--- /dev/null
+++ b/src/sections/dashboard/hooks/use-profile-set.ts
@@ -0,0 +1,24 @@
+'use client';
+
+import useSWR, { Fetcher } from 'swr';
+import { invoke } from '@tauri-apps/api/tauri';
+import { ProfileSet, profileSetSchema } from '@/modules/profiles/domain';
+
+const fetcher: Fetcher<ProfileSet, string> = async (cmd: string) => {
+  const data = await invoke<Record<string, never>>(cmd);
+
+  return profileSetSchema.parse(data);
+};
+
+export const useProfileSet = () => {
+  const { data, error, isLoading } = useSWR<ProfileSet, Error>(
+    'get_profiles',
+    fetcher
+  );
+
+  return {
+    profileSet: data,
+    error,
+    isLoading,
+  };
+};
diff --git a/src/sections/dashboard/stores/profile-set-store.ts b/src/sections/dashboard/stores/profile-set-store.ts
new file mode 100644
index 0000000..94749db
--- /dev/null
+++ b/src/sections/dashboard/stores/profile-set-store.ts
@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+import { ProfileSet } from '@/modules/profiles/domain';
+
+interface ProfileSetStore {
+  profileSet: ProfileSet;
+  setProfileSet: (profiles: ProfileSet) => void;
+  error?: Error;
+  setError: (error: Error) => void;
+}
+
+export const useProfileSetStore = create<ProfileSetStore>((set) => ({
+  profileSet: { profiles: [] },
+  setProfileSet: (profileSet) => set(() => ({ profileSet: profileSet })),
+  error: undefined,
+  setError: (error) => set(() => ({ error: error })),
+}));
diff --git a/src/sections/profiles/components/profile-form-dialog.tsx b/src/sections/profiles/components/profile-form-dialog.tsx
index 86c4e2c..6e9e64e 100644
--- a/src/sections/profiles/components/profile-form-dialog.tsx
+++ b/src/sections/profiles/components/profile-form-dialog.tsx
@@ -28,7 +28,7 @@ import { Step, StepItem, Stepper, useStepper } from '@/components/ui/stepper';
 import { create } from 'zustand';
 import { invoke } from '@tauri-apps/api/tauri';
 import { useSWRConfig } from 'swr';
-import { isNotBlank } from '@/modules/common/string-utils';
+import { isNotBlank } from '@/lib/string-utils';
 import {
   Select,
   SelectContent,