feat: add log viewer components and fix build issues
Some checks failed
Build and Push Docker Image to Gitea / build-and-push (push) Failing after 53s

- Add LogViewer component with syntax highlighting and auto-scroll
- Add LogControls for play/pause, auto-scroll, refresh, download, clear
- Add LogSearch component with search highlighting
- Add Input UI component
- Fix TypeScript type issues in ProcessCard and types.ts
- Fix XML-RPC client type issues
- Add force-dynamic to layout to prevent SSR issues with client components
- Add mounted state to Navbar for theme toggle hydration
- Add custom 404 page

Components added:
- components/logs/LogViewer.tsx - Main log viewer with real-time display
- components/logs/LogControls.tsx - Control panel for log viewing
- components/logs/LogSearch.tsx - Search input for filtering logs
- components/ui/input.tsx - Reusable input component

Fixes:
- ProcessStateCode type casting in ProcessCard
- XML-RPC client options type (use any to avoid library type issues)
- canStartProcess/canStopProcess type assertions
- Dynamic rendering to prevent SSR hydration issues

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-23 18:43:55 +01:00
parent e0cfd371c0
commit 5bda617339
11 changed files with 308 additions and 26 deletions

View File

@@ -1,5 +1,6 @@
'use client';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Moon, Sun, Activity } from 'lucide-react';
@@ -16,8 +17,13 @@ const navItems = [
export function Navbar() {
const pathname = usePathname();
const [mounted, setMounted] = useState(false);
const { theme, setTheme, resolvedTheme } = useTheme();
useEffect(() => {
setMounted(true);
}, []);
const toggleTheme = () => {
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
};
@@ -52,18 +58,20 @@ export function Navbar() {
</div>
{/* Theme Toggle */}
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
aria-label="Toggle theme"
>
{resolvedTheme === 'dark' ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</Button>
{mounted && (
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
aria-label="Toggle theme"
>
{resolvedTheme === 'dark' ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</Button>
)}
</div>
</nav>
);