Added ability to switch tabs

app/features/rightPanel/RightPanel.tsx

@@ -1,11 +1,66 @@
+import useAuxiliaryStore from "@/lib/hooks/stores/useAuxiliaryStore";
 import CourseInfoDisplay from "./courseInfoDisplay/CourseInfoDisplay";
 
-export default function LeftPanel() {
+type Tab = "info" | "core" | "settings";
+
+interface TabButtonProps {
+  isActive: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+function TabButton({ isActive, onClick, children }: TabButtonProps) {
   return (
-    <div
-      className="w-1/4 h-full bg-red-100"
+    <button
+      onClick={onClick}
+      className={`flex-1 py-2 px-4 text-sm font-medium ${isActive
+        ? "border-b-2 border-blue-500 text-blue-600"
+        : "text-gray-500 hover:text-gray-700"
+        }`}
     >
-      <CourseInfoDisplay />
+      {children}
+    </button>
+  );
+}
+
+export default function RightPanel() {
+  const activeTab = useAuxiliaryStore((state) => state.activeTab);
+  const setActiveTab = useAuxiliaryStore((state) => state.setActiveTab);
+
+  return (
+    <div className="w-1/4 h-full bg-white border-l border-gray-200">
+      {/* Tab Headers */}
+      <div className="flex border-b border-gray-200">
+        <TabButton
+          isActive={activeTab === "info"}
+          onClick={() => setActiveTab("info")}
+        >
+          Course Info
+        </TabButton>
+        <TabButton
+          isActive={activeTab === "core"}
+          onClick={() => setActiveTab("core")}
+        >
+          Core
+        </TabButton>
+        <TabButton
+          isActive={activeTab === "settings"}
+          onClick={() => setActiveTab("settings")}
+        >
+          Settings
+        </TabButton>
+      </div>
+
+      {/* Tab Content */}
+      <div className="h-[calc(100%-41px)] overflow-y-auto">
+        {activeTab === "info" && <CourseInfoDisplay />}
+        {activeTab === "core" && (
+          <div className="p-4 text-gray-500">Core management coming soon...</div>
+        )}
+        {activeTab === "settings" && (
+          <div className="p-4 text-gray-500">Settings panel coming soon...</div>
+        )}
+      </div>
     </div>
   );
 }

lib/hooks/stores/useAuxiliaryStore.ts

@@ -6,9 +6,11 @@ type AuxiliaryStore = {
   recentlyMovedToNewContainer: RefObject<boolean> | null;
   activeID: SemesterID;
   currentInfoCourseID: CourseID;
+  activeTab: 'info' | 'core' | 'settings';
   setRecentlyMovedToNewContainer: (flag: RefObject<boolean>) => void;
   setActiveID: (id: SemesterID) => void;
   setCurrentInfoCourseID: (id: CourseID) => void;
+  setActiveTab: (tab: 'info' | 'core' | 'settings') => void;
 };
 
 /**
@@ -18,13 +20,20 @@ const useAuxiliaryStore = create<AuxiliaryStore>()((set) => ({
   recentlyMovedToNewContainer: null,
   activeID: "",
   currentInfoCourseID: "",
+  activeTab: "info",
   setRecentlyMovedToNewContainer: (flag: RefObject<boolean>) =>
     set({ recentlyMovedToNewContainer: flag }),
   setActiveID: (id: SemesterID) => {
     console.log('new active id', id);
     set({ activeID: id })
   },
-  setCurrentInfoCourseID: (id: CourseID) => set({ currentInfoCourseID: id })
+  setCurrentInfoCourseID: (id: CourseID) => {
+    set({
+      currentInfoCourseID: id,
+      activeTab: "info" // Switch to info tab when course changes
+    })
+  },
+  setActiveTab: (tab: 'info' | 'core' | 'settings') => set({ activeTab: tab })
 }));
 
 export default useAuxiliaryStore;

lib/hooks/stores/useScheduleStore.ts

@@ -86,6 +86,34 @@ export const useScheduleStore = create<ScheduleStore>()(
     }),
     {
       name: 'schedule-storage',
+      storage: {
+        getItem: (name) => {
+          const str = localStorage.getItem(name) || '';
+          try {
+            const parsed = JSON.parse(str);
+            return {
+              ...parsed,
+              state: {
+                ...parsed.state,
+                globalCores: new Set(parsed.state.globalCores || [])
+              }
+            };
+          } catch {
+            return str;
+          }
+        },
+        setItem: (name, value) => {
+          const toStore = {
+            ...value,
+            state: {
+              ...value.state,
+              globalCores: Array.from(value.state.globalCores)
+            }
+          };
+          localStorage.setItem(name, JSON.stringify(toStore));
+        },
+        removeItem: (name) => localStorage.removeItem(name)
+      }
     }
   )
 );