idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add 'apps' page and update navigation with new icon

Browse Source
This commit is contained in:
Jaime Idolpx 2026-04-14 00:29:15 -04:00
parent 5e329a7f39
commit 4c2ce166e8
1 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/App.tsx
View File

@ -1,5 +1,5 @@
import { useState } from 'react'; 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 { Toaster } from 'sonner';
import StatusPage from './components/StatusPage'; import StatusPage from './components/StatusPage';
import DevicesPage from './components/DevicesPage'; import DevicesPage from './components/DevicesPage';
@ -12,7 +12,7 @@ import SearchOverlay from './components/SearchOverlay';
import logoSvg from '../imports/logo.svg'; import logoSvg from '../imports/logo.svg';
import configData from '../imports/config.json'; 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() { export default function App() {
const [currentPage, setCurrentPage] = useState<Page>('status'); const [currentPage, setCurrentPage] = useState<Page>('status');
@ -21,13 +21,14 @@ export default function App() {
const [showProfileMenu, setShowProfileMenu] = useState(false); const [showProfileMenu, setShowProfileMenu] = useState(false);
const pages = { const pages = {
status: <StatusPage config={config} setConfig={setConfig} />, status: <StatusPage config={config} setConfig={setConfig} />,
devices: <DevicesPage config={config} setConfig={setConfig} />, devices: <DevicesPage config={config} setConfig={setConfig} />,
iec: <IECPage config={config} setConfig={setConfig} />, iec: <IECPage config={config} setConfig={setConfig} />,
network: <NetworkPage config={config} setConfig={setConfig} />, network: <NetworkPage config={config} setConfig={setConfig} />,
other: <OtherPage config={config} setConfig={setConfig} />, other: <OtherPage config={config} setConfig={setConfig} />,
general: <GeneralPage config={config} setConfig={setConfig} />, general: <GeneralPage config={config} setConfig={setConfig} />,
tools: <ToolsPage 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 ( return (
@ -46,10 +47,11 @@ export default function App() {
<Search className="w-5 h-5 text-white" /> <Search className="w-5 h-5 text-white" />
</button> </button>
<button <button
onClick={() => setCurrentPage('tools')} onClick={() => setCurrentPage('apps')}
className="p-2 hover:bg-[#5e5e5e] rounded-lg" 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> </button>
<div className="relative"> <div className="relative">
<button <button
@ -70,6 +72,16 @@ export default function App() {
<Settings className="w-4 h-4 text-[#4d4d4d]" /> <Settings className="w-4 h-4 text-[#4d4d4d]" />
Settings Settings
</button> </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 <button
onClick={() => setShowProfileMenu(false)} onClick={() => setShowProfileMenu(false)}
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2" 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" /> <MoreHorizontal className="w-5 h-5 text-white" />
<span className="text-xs text-white">More</span> <span className="text-xs text-white">More</span>
</button> </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> </div>
</nav> </nav>