Merge pull request #13 from IgorD-lab/feat/text-viewer AI slop PR

feat: implemente text viewing funcitonality for portfolio/file-explorer

Author: IgorD-lab

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, Finder } from '#windows';
+import { Terminal, Safari, Resume, Finder, Text } from '#windows';
 
 gsap.registerPlugin(Draggable);
 
@@ -17,6 +17,7 @@ const App = () => {
       <Safari />
       <Resume />
       <Finder />
+      <Text />
     </main>
   );
 };

src/components/Dock.tsx

@@ -4,7 +4,8 @@ import { gsap } from 'gsap';
 
 import { DOCK_APPS } from '#constants';
 import { useGSAP } from '@gsap/react';
-import useWindowStore, { WindowKey } from '#store/window';
+import { WindowID } from '#types';
+import useWindowStore from '#store/window';
 
 interface AppToggleProps {
   id: string;
@@ -67,7 +68,7 @@ const Dock = () => {
   const toggleApp = (app: AppToggleProps) => {
     if (!app.canOpen) return;
 
-    const windowId = app.id as WindowKey;
+    const windowId = app.id as WindowID;
     const window = windows[windowId];
 
     if (!window) {

src/hoc/WindowWrapper.tsx

@@ -5,7 +5,7 @@ import React, {
   useLayoutEffect,
 } from 'react';
 // We use 'import type' to ensure these are erased at runtime
-import type { WindowKey } from '#store/window';
+import type { WindowID } from '#types';
 import useWindowStore from '#store/window';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
@@ -19,7 +19,7 @@ import { Draggable } from 'gsap/Draggable';
  */
 const WindowWrapper = <P extends object>(
   Component: ComponentType<P>,
-  windowKey: WindowKey,
+  windowKey: WindowID,
 ): ((props: P) => ReactElement | null) => {
   // This is the actual component that gets rendered
   const Wrapped = (props: P) => {

src/store/window.ts

@@ -1,71 +1,54 @@
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { INITIAL_Z_INDEX, WINDOW_CONFIG } from '#constants';
-
-/** * 1. THE BLUEPRINTS (Interfaces)
- * Think of these as the "Rules of the House."
- * They tell TypeScript exactly what a Window looks like.
- */
-interface WindowState {
-  isOpen: boolean;
-  zIndex: number;
-  data: unknown; // Changed from null to any/unknown so it can actually hold data
-}
-
-// WindowKey creates a list of allowed names (e.g., 'terminal' | 'browser')
-// based on your actual config file (constants/index.ts).
-export type WindowKey = keyof typeof WINDOW_CONFIG;
+import { WindowID, WindowState, FinderItem } from '#types';
 
 interface WindowStore {
-  windows: Record<WindowKey, WindowState>; // A map of all windows
-  nextZIndex: number; // The "depth" for the next focused window
-  openWindow: (windowKey: WindowKey, data?: unknown) => void;
-  closeWindow: (windowKey: WindowKey) => void;
-  focusWindow: (windowKey: WindowKey) => void;
+  windows: Record<WindowID, WindowState>;
+  nextZIndex: number;
+  openWindow: (windowKey: WindowID, data?: FinderItem) => void;
+  closeWindow: (windowKey: WindowID) => void;
+  focusWindow: (windowKey: WindowID) => void;
 }
 
-/**
- * 2. THE STORE
- * We use 'immer' middleware here. Normally, React state must be "immutable"
- * (you can't change it, you have to replace it).
- * Immer lets us write 'state.windows[key].isOpen = true' which is much easier to read!
- */
 const useWindowStore = create<WindowStore>()(
   immer((set) => ({
-    // Initial Data
-    windows: WINDOW_CONFIG,
+    // Initialize using the config from constants
+    windows: WINDOW_CONFIG as Record<WindowID, WindowState>,
     nextZIndex: INITIAL_Z_INDEX + 1,
 
-    // ACTION: Open a window
-    openWindow: (windowKey, data = null) =>
+    // Open a specific window and optionally pass file data (FinderItem)
+    openWindow: (windowKey, data) =>
       set((state) => {
         const win = state.windows[windowKey];
         if (!win) return;
 
         win.isOpen = true;
-        win.zIndex = state.nextZIndex; // Put it on top
-        win.data = data ?? win.data; // Attach any extra info (like a file path)
-        state.nextZIndex++; // Prepare the next Z-Index for the next window
+        win.zIndex = state.nextZIndex;
+        // Save the file object (Nike Project.txt, etc) into the window's data slot
+        if (data) {
+          state.windows[windowKey].data = data as FinderItem;
+        }
+        state.nextZIndex++;
       }),
 
-    // ACTION: Hide a window
+    // Close window and wipe its local data to keep it clean for next use
     closeWindow: (windowKey) =>
       set((state) => {
         const win = state.windows[windowKey];
         if (!win) return;
 
         win.isOpen = false;
-        win.zIndex = INITIAL_Z_INDEX; // Send it back to the bottom
+        win.zIndex = INITIAL_Z_INDEX;
         win.data = null;
       }),
 
-    // ACTION: Click to focus
+    // Bring window to front
     focusWindow: (windowKey) =>
       set((state) => {
         const win = state.windows[windowKey];
         if (!win) return;
 
-        // Every time you click, we give it a higher number than anyone else
         win.zIndex = state.nextZIndex;
         state.nextZIndex++;
       }),

src/types/index.ts

@@ -1,4 +1,3 @@
-// TODO: move all types here
 export type WindowID =
   | 'finder'
   | 'contact'
@@ -14,10 +13,24 @@ export interface FinderItem {
   name: string;
   icon: string;
   kind: 'folder' | 'file';
+  // Common properties
   type?: string;
   fileType?: string;
   position?: string;
-  imageUrl?: string;
+  windowPosition?: string;
+  // File specific properties
   href?: string;
+  imageUrl?: string;
+  // Text file specific (Flat, not nested)
+  image?: string;
+  subtitle?: string;
+  description?: string[];
+  // Folders
   children?: FinderItem[];
 }
+
+export interface WindowState {
+  isOpen: boolean;
+  zIndex: number;
+  data: FinderItem | null;
+}

src/windows/Text.tsx

@@ -0,0 +1,47 @@
+import { WindowControls } from '#components';
+import WindowWrapper from '#hoc/WindowWrapper';
+import useWindowStore from '#store/window';
+import { FinderItem } from '#types';
+
+const Text = () => {
+  const { windows } = useWindowStore();
+
+  // Directly access the data stored for this window
+  const data = windows.txtfile?.data as FinderItem | undefined;
+
+  if (!data) return null;
+
+  // These properties exist directly on FinderItem based on your constants
+  const { name, image, subtitle, description } = data;
+
+  return (
+    <>
+      <div id="window-header">
+        <WindowControls target="txtfile" />
+        <h2>{name}</h2>
+      </div>
+      <div className="p-5 space-y-6 bg-white">
+        {image ? (
+          <div className="w-full">
+            <img src={image} alt={name} className="w-full h-auto rounded" />
+          </div>
+        ) : null}
+
+        {subtitle ? (
+          <h3 className="text-lg font-semibold">{subtitle}</h3>
+        ) : null}
+
+        {Array.isArray(description) && description.length > 0 ? (
+          <div className="space-y-3 leading-relaxed text-base text-gray-800">
+            {description.map((para, idx) => (
+              <p key={idx}>{para}</p>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+};
+
+const TextWindow = WindowWrapper(Text, 'txtfile');
+export default TextWindow;

src/windows/index.ts

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