From 5e20066c3c119b6586d5b2d7f63658e96adf6719 Mon Sep 17 00:00:00 2001
From: Leo <lb123@magenta.de>
Date: Tue, 25 Mar 2025 14:27:12 +0100
Subject: [PATCH] Update Node.js version to 23 in shell.nix; modify App
 component styles; add 'tree' command to Terminal with corresponding handler;
 enhance filesystem data with updated skills and tools.

---
 shell.nix                   |  2 +-
 src/App.jsx                 |  4 ++--
 src/components/Terminal.jsx | 44 ++++++++++++++++++++++++++++++++++++-
 src/data/filesystem.js      |  4 ++--
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/shell.nix b/shell.nix
index 6225975..88a77a3 100644
--- a/shell.nix
+++ b/shell.nix
@@ -3,7 +3,7 @@
 pkgs.mkShell {
   buildInputs = with pkgs; [
     # Node.js and package managers
-    nodejs_20
+    nodejs_23
     nodePackages.npm
     nodePackages.yarn
     
diff --git a/src/App.jsx b/src/App.jsx
index d1c6482..8c2f5bd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -179,13 +179,13 @@ function App() {
             <div className="h-3 w-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors"></div>
             <div className="h-3 w-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors"></div>
           </div>
-          <span className="mx-auto text-sm text-gray-300 gothic-text text-2xl">
+          <span className="mx-auto text-gray-300 gothic-text text-xl">
             terminal@npc-about-me
           </span>
         </div>
 
         {/* Terminal component with better background */}
-        <div className="bg-terminal-bg w-full h-[calc(100%-2.5rem)] overflow-hidden bg-[#0d1117]">
+        <div className="bg-terminal-bg w-full h-[calc(100%-2.5rem)] overflow-hidden">
           <Terminal />
         </div>
 
diff --git a/src/components/Terminal.jsx b/src/components/Terminal.jsx
index d2acbb8..a0993dc 100644
--- a/src/components/Terminal.jsx
+++ b/src/components/Terminal.jsx
@@ -141,6 +141,7 @@ export default function Terminal() {
         "help",
         "clear",
         "view",
+        "tree",
       ];
       const matchingCommands = commands.filter((cmd) =>
         cmd.startsWith(command)
@@ -153,7 +154,7 @@ export default function Terminal() {
     }
 
     // If completing a path/file/directory
-    if (["cd", "cat", "ls", "view"].includes(command)) {
+    if (["cd", "cat", "ls", "view", "tree"].includes(command)) {
       const partialPath = parts[parts.length - 1];
       const suggestions = getPathSuggestions(partialPath);
 
@@ -237,6 +238,7 @@ export default function Terminal() {
           "  view [image] - Display image files\n" +
           "  pwd - Print working directory\n" +
           "  clear - Clear the terminal\n" +
+          "  tree [directory] - Display directory structure\n" +
           "  help - Display this help message\n\n" +
           "Shortcuts:\n" +
           "  Tab - Autocomplete commands and paths\n" +
@@ -246,6 +248,9 @@ export default function Terminal() {
         clearTerminal();
         setInputValue("");
         return;
+      case "tree":
+        output = handleTree(args);
+        break;
       default:
         output = `Command not found: ${command}`;
     }
@@ -456,6 +461,43 @@ Sort entries alphabetically.
     </div>`;
   };
 
+  // Add tree command handler
+  const handleTree = (args) => {
+    const path = args[0] || currentPath;
+    const resolvedPath = resolvePath(path);
+    const item = getItemAtPath(resolvedPath);
+
+    if (!item) {
+      return `tree: ${path}: No such directory`;
+    }
+
+    if (item.type !== "directory") {
+      return `tree: ${path}: Not a directory`;
+    }
+
+    const output = [];
+    const printTree = (node, name, prefix = "", isLast = true) => {
+      const isDir = node.type === "directory";
+      const icon = isDir ? "📁" : "📄";
+
+      output.push(`${prefix}${isLast ? "└── " : "├── "}${icon} ${name}`);
+
+      if (isDir && node.children) {
+        const entries = Object.entries(node.children);
+        entries.forEach(([key, value], index) => {
+          const isLastEntry = index === entries.length - 1;
+          const newPrefix = prefix + (isLast ? "    " : "│   ");
+          printTree(value, key, newPrefix, isLastEntry);
+        });
+      }
+    };
+
+    // Start with the root directory name
+    const rootName = resolvedPath.split("/").pop() || "/";
+    printTree(item, rootName);
+    return output.join("\n");
+  };
+
   // Function to navigate command history
   const navigateHistory = (direction) => {
     if (commandHistory.length === 0) return;
diff --git a/src/data/filesystem.js b/src/data/filesystem.js
index 636cffa..8a84c70 100644
--- a/src/data/filesystem.js
+++ b/src/data/filesystem.js
@@ -49,12 +49,12 @@ export const fileSystem = {
                   "frontend.txt": {
                     type: "file",
                     content:
-                      "Frontend Skills\n--------------\n\n- HTML5, CSS3, JavaScript\n- React, Vue.js\n- Tailwind CSS, SASS\n- TypeScript\n- Responsive Design\n- Webpack, Vite",
+                      "Frontend Skills\n--------------\n\n- HTML5, CSS, JavaScript, TypeScript\n- React, Vue.js\n- Tailwind CSS, Bootstrap\n- Responsive Design\n- Vite",
                   },
                   "backend.txt": {
                     type: "file",
                     content:
-                      "Backend Skills\n-------------\n\n- Node.js\n- Python\n- Flask APIs\n- ChartJS\n- MariaDB, PostgreSQL",
+                      "Backend Skills\n-------------\n\n- Node.js\n- Python\n- Flask APIs\n- ChartJS\n- MariaDB, PostgreSQL\n- Docker, Proxmox",
                   },
                   "tools.txt": {
                     type: "file",