feat: added portfolio window, moved window types from window componen…

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@gsap/react": "^2.1.2",
     "@tailwindcss/vite": "^4.1.18",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "gsap": "^3.14.2",
     "immer": "^11.1.4",

src/App.tsx

@@ -2,7 +2,7 @@ import gsap from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 
 import { Navbar, Welcome, Dock } from '#components';
-import { Terminal, Safari, Resume } from '#windows';
+import { Terminal, Safari, Resume, Finder } from '#windows';
 
 gsap.registerPlugin(Draggable);
 
@@ -16,6 +16,7 @@ const App = () => {
       <Terminal />
       <Safari />
       <Resume />
+      <Finder />
     </main>
   );
 };

src/store/location.ts

@@ -1,30 +1,23 @@
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { locations } from '#constants';
-
-// Extract the type of a single location (e.g., the 'work' or 'trash' object)
-type Location = (typeof locations)[keyof typeof locations];
+import { FinderItem } from '#types'; // Use your new alias/path
 
 interface LocationState {
-  activeLocation: Location; // Strictly typed to your constants
-  setActiveLocation: (location: Location | null) => void;
+  activeLocation: FinderItem;
+  setActiveLocation: (location: FinderItem | null) => void;
   resetActiveLocation: () => void;
 }
 
-const DEFAULT_LOCATION = locations.work;
+const DEFAULT_LOCATION = locations.work as FinderItem;
 
-// Global state management for file explorer/projects
 const useLocationStore = create<LocationState>()(
   immer((set) => ({
     activeLocation: DEFAULT_LOCATION,
-
-    setActiveLocation: (location = null) =>
+    setActiveLocation: (location) =>
       set((state) => {
-        if (location) {
-          state.activeLocation = location;
-        }
+        if (location) state.activeLocation = location as FinderItem;
       }),
-
     resetActiveLocation: () =>
       set((state) => {
         state.activeLocation = DEFAULT_LOCATION;

src/types/index.ts

@@ -0,0 +1,23 @@
+// TODO: move all types here
+export type WindowID =
+  | 'finder'
+  | 'contact'
+  | 'resume'
+  | 'safari'
+  | 'photos'
+  | 'terminal'
+  | 'txtfile'
+  | 'imgfile';
+
+export interface FinderItem {
+  id: number | string;
+  name: string;
+  icon: string;
+  kind: 'folder' | 'file';
+  type?: string;
+  fileType?: string;
+  position?: string;
+  imageUrl?: string;
+  href?: string;
+  children?: FinderItem[];
+}

src/windows/Finder.tsx

@@ -0,0 +1,84 @@
+import { WindowControls } from '#components';
+import { locations } from '#constants';
+import WindowWrapper from '#hoc/WindowWrapper';
+import useLocationStore from '#store/location';
+import useWindowStore from '#store/window';
+import { clsx } from 'clsx';
+import { Search } from 'lucide-react';
+import { FinderItem, WindowID } from '#types';
+
+const Finder = () => {
+  const { openWindow } = useWindowStore();
+  const { activeLocation, setActiveLocation } = useLocationStore();
+
+  const openItem = (item: FinderItem) => {
+    if (item.fileType === 'pdf') return openWindow('resume');
+    if (item.kind === 'folder') return setActiveLocation(item);
+    if (['fig', 'url'].includes(item.fileType ?? '') && item.href)
+      return window.open(item.href, '_blank');
+
+    const windowId = `${item.fileType}${item.kind}` as WindowID;
+    openWindow(windowId, item);
+  };
+
+  const renderList = (name: string, items: FinderItem[]) => (
+    <div>
+      <h3>{name}</h3>
+
+      <ul>
+        {items.map((item) => (
+          <li
+            key={item.id}
+            onClick={() => setActiveLocation(item)}
+            className={clsx(
+              item.id === activeLocation?.id ? 'active' : 'not-active',
+            )}
+          >
+            <img src={item.icon} className="w-4" alt={item.name} />
+            <p className="text-sm font-medium truncate">{item.name}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+
+  return (
+    <>
+      <div id="window-header">
+        <WindowControls target="finder" />
+        <Search className="icon" />
+      </div>{' '}
+      <div className="bg-white flex h-full">
+        <div className="sidebar">
+          <ul>
+            {renderList('Favorites', Object.values(locations) as FinderItem[])}
+          </ul>
+          <ul>
+            {renderList(
+              'Work',
+              (locations.work.children as FinderItem[]) || [],
+            )}
+          </ul>
+        </div>
+
+        <ul className="content">
+          {(activeLocation?.children ?? []).map((item) => (
+            <li
+              key={item.id}
+              className={item.position}
+              onClick={() => openItem(item)}
+            >
+              {' '}
+              <img src={item.icon} alt={item.name} />
+              <p> {item.name} </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+};
+
+const FinderWindow = WindowWrapper(Finder, 'finder');
+
+export default FinderWindow;

src/windows/index.ts

@@ -1,5 +1,6 @@
 import Terminal from '#windows/Terminal';
 import Safari from '#windows/Safari';
 import Resume from '#windows/Resume';
+import Finder from '#windows/Finder';
 
-export { Terminal, Safari, Resume };
+export { Terminal, Safari, Resume, Finder };