ceef5c7bb9
* feat: Add Web UI IP:Port tracking and access functionality - Add web_ui_ip and web_ui_port columns to installed_scripts table with migration - Update database CRUD methods to handle new Web UI fields - Add terminal output parsing to auto-detect Web UI URLs during installation - Create autoDetectWebUI mutation that runs hostname -I in containers via SSH - Add Web UI column to desktop table with editable IP and port fields - Add Open UI button that opens http://ip:port in new tab - Add Re-detect button for manual IP detection using script metadata - Update mobile card view with Web UI fields and buttons - Fix nested button hydration error in ContextualHelpIcon - Prioritize script metadata interface_port over existing database values - Use pct exec instead of pct enter for container command execution - Add comprehensive error handling and user feedback - Style auto-detect button with muted colors and Re-detect text Features: - Automatic Web UI detection during script installation - Manual IP detection with port lookup from script metadata - Editable IP and port fields in both desktop and mobile views - Clickable Web UI links that open in new tabs - Support for both local and SSH script executions - Proper port detection from script JSON metadata (e.g., actualbudget:5006) - Clean UI with subtle button styling and clear text labels * feat: Disable Open UI button when container is stopped - Add disabled state to Open UI button in desktop table when container is stopped - Update mobile card Open UI button to be disabled when container is stopped - Apply consistent styling with Shell and Update buttons - Prevent users from accessing Web UI when container is not running - Add cursor-not-allowed styling for disabled clickable IP links * feat: Align Re-detect buttons consistently in Web UI column - Change flex layout from space-x-2 to justify-between for consistent button alignment - Add flex-shrink-0 to prevent IP:port text and buttons from shrinking - Add ml-2 margin to Re-detect button for proper spacing - Apply changes to both desktop table and mobile card views - Buttons now align vertically regardless of IP:port text length * feat: Add actions dropdown menu with conditional Start/Stop colors and update help - Create dropdown-menu.tsx component using Radix UI primitives - Move all action buttons except Edit into dropdown menu - Keep Edit and Save/Cancel buttons always visible - Add conditional styling: Start (green), Stop (red) - Apply changes to both desktop table and mobile card views - Add smart visibility - dropdown only shows when actions available - Auto-close dropdown after clicking any action - Style dropdown to match existing button theme - Fix syntax error in dropdown-menu.tsx component - Update help section with Web UI Access and Actions Dropdown documentation - Add detailed explanations of auto-detection, IP/port tracking, and color coding * Fix TypeScript build error in server.js - Updated parseWebUIUrl JSDoc return type from Object|null to {ip: string, port: number}|null - This fixes the TypeScript error where 'ip' property was not recognized on type 'Object' - Build now completes successfully without errors
44 lines
1017 B
TypeScript
44 lines
1017 B
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { HelpModal } from './HelpModal';
|
|
import { HelpCircle } from 'lucide-react';
|
|
|
|
interface ContextualHelpIconProps {
|
|
section: string;
|
|
className?: string;
|
|
size?: 'sm' | 'default';
|
|
tooltip?: string;
|
|
}
|
|
|
|
export function ContextualHelpIcon({
|
|
section,
|
|
className = '',
|
|
size = 'sm',
|
|
tooltip = 'Help'
|
|
}: ContextualHelpIconProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const sizeClasses = size === 'sm'
|
|
? 'h-7 w-7 p-1.5'
|
|
: 'h-9 w-9 p-2';
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
onClick={() => setIsOpen(true)}
|
|
className={`${sizeClasses} text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer inline-flex items-center justify-center rounded-md transition-colors ${className}`}
|
|
title={tooltip}
|
|
>
|
|
<HelpCircle className="w-4 h-4" />
|
|
</div>
|
|
|
|
<HelpModal
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
initialSection={section}
|
|
/>
|
|
</>
|
|
);
|
|
}
|