use server in /ui

apps/web/src/app/ui/page.tsx

@@ -1,14 +1,17 @@
-"use client";
-import Main from "@/components/Main";
-import Sidebar from "@/components/Sidebar/index";
-import { useState } from "react";
+import Main from '@/components/Main';
+import Sidebar from '@/components/Sidebar/index';
+import { cookies } from 'next/headers';
 
 export default function Home() {
-  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const selectedItem = cookies().get('selectedItem')?.value;
+  const setSelectedItem = async (selectedItem: string | null) => {
+    'use server';
+    cookies().set('selectedItem', selectedItem!);
+  };
 
   return (
     <div className="flex w-screen">
-      <Sidebar onSelectChange={setSelectedItem} />
+      <Sidebar selectChange={setSelectedItem} />
       <Main sidebarOpen={selectedItem !== null} />
     </div>
   );

apps/web/src/components/Sidebar/index.tsx

@@ -1,11 +1,11 @@
-"use client";
-import { StoredContent } from "@/server/db/schema";
-import { MemoryIcon } from "../../assets/Memories";
-import { Trash2, User2 } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { MemoriesBar } from "./MemoriesBar";
-import { AnimatePresence, motion } from "framer-motion";
-import { Bin } from "@/assets/Bin";
+'use client';
+import { StoredContent } from '@/server/db/schema';
+import { MemoryIcon } from '../../assets/Memories';
+import { Trash2, User2 } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { MemoriesBar } from './MemoriesBar';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Bin } from '@/assets/Bin';
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -16,7 +16,7 @@ export type MenuItem = {
 const menuItemsTop: Array<MenuItem> = [
   {
     icon: <MemoryIcon className="h-10 w-10" />,
-    label: "Memories",
+    label: 'Memories',
     content: MemoriesBar,
   },
 ];
@@ -24,18 +24,18 @@ const menuItemsTop: Array<MenuItem> = [
 const menuItemsBottom: Array<MenuItem> = [
   {
     icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
-    label: "Trash",
+    label: 'Trash',
   },
   {
     icon: <User2 strokeWidth={1.3} className="h-6 w-6" />,
-    label: "Profile",
+    label: 'Profile',
   },
 ];
 
 export default function Sidebar({
-  onSelectChange,
+  selectChange,
 }: {
-  onSelectChange?: (selectedItem: string | null) => void;
+  selectChange?: (selectedItem: string | null) => Promise<void>;
 }) {
   const menuItems = [...menuItemsTop, ...menuItemsBottom];
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
@@ -44,7 +44,7 @@ export default function Sidebar({
     menuItems.find((i) => i.label === selectedItem)?.content ?? (() => <></>);
 
   useEffect(() => {
-    onSelectChange?.(selectedItem);
+    void selectChange?.(selectedItem);
   }, [selectedItem]);
 
   return (
@@ -53,7 +53,7 @@ export default function Sidebar({
         <div className="bg-rgray-2 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
           <MenuItem
             item={{
-              label: "Memories",
+              label: 'Memories',
               icon: <MemoryIcon className="h-10 w-10" />,
               content: MemoriesBar,
             }}
@@ -65,16 +65,16 @@ export default function Sidebar({
 
           <MenuItem
             item={{
-              label: "Trash",
+              label: 'Trash',
               icon: <Bin id="trash" className="z-[300] h-7 w-7" />,
             }}
             selectedItem={selectedItem}
-            id='trash-button'
+            id="trash-button"
             setSelectedItem={setSelectedItem}
           />
           <MenuItem
             item={{
-              label: "Profile",
+              label: 'Profile',
               icon: <User2 strokeWidth={1.3} className="h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -117,11 +117,11 @@ const MenuItem = ({
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
     <motion.div
-      initial={{ opacity: 0, x: "-100%" }}
+      initial={{ opacity: 0, x: '-100%' }}
       animate={{ opacity: 1, x: 0 }}
       exit={{
         opacity: 0,
-        x: "-100%",
+        x: '-100%',
         transition: { delay: 0.2 },
       }}
       transition={{