From 4c2ce166e8e4068b7a8c67044c4e7f5fafe96326 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 14 Apr 2026 00:29:15 -0400
Subject: [PATCH] feat: add 'apps' page and update navigation with new icon

---
 src/app/App.tsx | 43 ++++++++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 44da720..5219242 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText } from 'lucide-react';
+import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText, AppWindow } from 'lucide-react';
 import { Toaster } from 'sonner';
 import StatusPage from './components/StatusPage';
 import DevicesPage from './components/DevicesPage';
@@ -12,7 +12,7 @@ import SearchOverlay from './components/SearchOverlay';
 import logoSvg from '../imports/logo.svg';
 import configData from '../imports/config.json';
 
-type Page = 'status' | 'devices' | 'iec' | 'network' | 'other' | 'general' | 'tools';
+type Page = 'status' | 'devices' | 'iec' | 'network' | 'other' | 'general' | 'tools' | 'apps';
 
 export default function App() {
   const [currentPage, setCurrentPage] = useState<Page>('status');
@@ -21,13 +21,14 @@ export default function App() {
   const [showProfileMenu, setShowProfileMenu] = useState(false);
 
   const pages = {
-    status: <StatusPage config={config} setConfig={setConfig} />,
-    devices: <DevicesPage config={config} setConfig={setConfig} />,
-    iec: <IECPage config={config} setConfig={setConfig} />,
-    network: <NetworkPage config={config} setConfig={setConfig} />,
-    other: <OtherPage config={config} setConfig={setConfig} />,
-    general: <GeneralPage config={config} setConfig={setConfig} />,
-    tools: <ToolsPage config={config} setConfig={setConfig} />
+    status: <StatusPage config={config} setConfig={setConfig} />, 
+    devices: <DevicesPage config={config} setConfig={setConfig} />, 
+    iec: <IECPage config={config} setConfig={setConfig} />, 
+    network: <NetworkPage config={config} setConfig={setConfig} />, 
+    other: <OtherPage config={config} setConfig={setConfig} />, 
+    general: <GeneralPage config={config} setConfig={setConfig} />, 
+    tools: <ToolsPage config={config} setConfig={setConfig} />, 
+    apps: <div className="p-8 text-center text-neutral-500">Apps page coming soon...</div>
   };
 
   return (
@@ -46,10 +47,11 @@ export default function App() {
               <Search className="w-5 h-5 text-white" />
             </button>
             <button
-              onClick={() => setCurrentPage('tools')}
-              className="p-2 hover:bg-[#5e5e5e] rounded-lg"
+              onClick={() => setCurrentPage('apps')}
+              className={`p-2 hover:bg-[#5e5e5e] rounded-lg${currentPage === 'apps' ? ' bg-[#5e5e5e]' : ''}`}
+              aria-label="Apps"
             >
-              <Wrench className="w-5 h-5 text-white" />
+              <AppWindow className="w-5 h-5 text-white" />
             </button>
             <div className="relative">
               <button
@@ -70,6 +72,16 @@ export default function App() {
                     <Settings className="w-4 h-4 text-[#4d4d4d]" />
                     Settings
                   </button>
+                  <button
+                    onClick={() => {
+                      setShowProfileMenu(false);
+                      setCurrentPage('tools');
+                    }}
+                    className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
+                  >
+                    <Wrench className="w-4 h-4 text-[#4d4d4d]" />
+                    Tools
+                  </button>
                   <button
                     onClick={() => setShowProfileMenu(false)}
                     className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
@@ -140,13 +152,6 @@ export default function App() {
             <MoreHorizontal className="w-5 h-5 text-white" />
             <span className="text-xs text-white">More</span>
           </button>
-          <button
-            onClick={() => setCurrentPage('general')}
-            className="flex-1 flex flex-col items-center gap-1 py-2"
-          >
-            <Settings className="w-5 h-5 text-white" />
-            <span className="text-xs text-white">General</span>
-          </button>
         </div>
       </nav>