refactor(frontend): Use zustand for state management exclusively

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>

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(() => {

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>
   );
 }

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;

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>,

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',

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,

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',

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>,

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<

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,

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 {

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;
 

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;
 

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;

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> {}

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'

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;
 

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;
 

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>,

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;
 

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';
 

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,

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 };

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';

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}>

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 {

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';

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;