Move 'Filters are being saved automatically' message to bottom left

- Relocated message from top center to bottom left next to script count - Positioned alongside 'Clear all filters' button for better layout - Maintains green checkmark icon and styling consistency
Move status banner down in ScriptDetailModal
2025-10-16 14:27:59 +02:00 · 2025-10-16 14:26:41 +02:00 · 2025-10-14 21:40:06 +02:00 · 2025-10-14 21:39:47 +02:00 · 2025-10-14 19:29:32 +00:00 · 2025-10-14 16:26:34 +02:00
8 changed files with 388 additions and 145 deletions
--- a/README.md
+++ b/README.md
@@ -210,6 +210,249 @@ The application uses SQLite for storing server configurations:
 - **Backup**: Copy `data/settings.db` to backup your server configurations
 - **Reset**: Delete `data/settings.db` to reset all server configurations

+## 📖 Feature Guide
+
+This section provides detailed information about the application's key features and how to use them effectively.
+
+### Server Settings
+
+Manage your Proxmox VE servers and configure connection settings.
+
+**Adding PVE Servers:**
+- **Server Name**: A friendly name to identify your server
+- **IP Address**: The IP address or hostname of your PVE server
+- **Username**: PVE user account (usually root or a dedicated user)
+- **SSH Port**: Default is 22, change if your server uses a different port
+
+**Authentication Types:**
+- **Password**: Use username and password authentication
+- **SSH Key**: Use SSH key pair for secure authentication
+- **Both**: Try SSH key first, fallback to password if needed
+
+**Server Color Coding:**
+Assign colors to servers for visual distinction throughout the application. This helps identify which server you're working with when managing scripts. This needs to be enabled in the General Settings.
+
+### General Settings
+
+Configure application preferences and behavior.
+
+**Save Filters:**
+When enabled, your script filter preferences (search terms, categories, sorting) will be automatically saved and restored when you return to the application:
+- Search queries are preserved
+- Selected script types are remembered
+- Sort preferences are maintained
+- Category selections are saved
+
+**Server Color Coding:**
+Enable visual color coding for servers throughout the application. This makes it easier to identify which server you're working with.
+
+**GitHub Integration:**
+Add a GitHub Personal Access Token to increase API rate limits and improve performance:
+- Bypasses GitHub's rate limiting for unauthenticated requests
+- Improves script loading and syncing performance
+- Token is stored securely and only used for API calls
+
+**Authentication:**
+Secure your application with username and password authentication:
+- Set up username and password for app access
+- Enable/disable authentication as needed
+- Credentials are stored securely
+
+### Sync Button
+
+Synchronize script metadata from the ProxmoxVE GitHub repository.
+
+**What Does Syncing Do?**
+- **Updates Script Metadata**: Downloads the latest script information (JSON files)
+- **Refreshes Available Scripts**: Updates the list of scripts you can download
+- **Updates Categories**: Refreshes script categories and organization
+- **Checks for Updates**: Identifies which downloaded scripts have newer versions
+
+**Important Notes:**
+- **Metadata Only**: Syncing only updates script information, not the actual script files
+- **No Downloads**: Script files are downloaded separately when you choose to install them
+- **Last Sync Time**: Shows when the last successful sync occurred
+- **Rate Limits**: GitHub API limits may apply without a personal access token
+
+**When to Sync:**
+- When you want to see the latest available scripts
+- To check for updates to your downloaded scripts
+- If you notice scripts are missing or outdated
+- After the ProxmoxVE repository has been updated
+
+### Available Scripts
+
+Browse and discover scripts from the ProxmoxVE repository.
+
+**Browsing Scripts:**
+- **Category Sidebar**: Filter scripts by category (Storage, Network, Security, etc.)
+- **Search**: Find scripts by name or description
+- **View Modes**: Switch between card and list view
+- **Sorting**: Sort by name or creation date
+
+**Filtering Options:**
+- **Script Types**: Filter by CT (Container) or other script types
+- **Update Status**: Show only scripts with available updates
+- **Search Query**: Search within script names and descriptions
+- **Categories**: Filter by specific script categories
+
+**Script Actions:**
+- **View Details**: Click on a script to see full information and documentation
+- **Download**: Download script files to your local system
+- **Install**: Run scripts directly on your PVE servers
+- **Preview**: View script content before downloading
+
+### Downloaded Scripts
+
+Manage scripts that have been downloaded to your local system.
+
+**What Are Downloaded Scripts?**
+These are scripts that you've downloaded from the repository and are stored locally on your system:
+- Script files are stored in your local scripts directory
+- You can run these scripts on your PVE servers
+- Scripts can be updated when newer versions are available
+
+**Update Detection:**
+The system automatically checks if newer versions of your downloaded scripts are available:
+- Scripts with updates available are marked with an update indicator
+- You can filter to show only scripts with available updates
+- Update detection happens when you sync with the repository
+
+**Managing Downloaded Scripts:**
+- **Update Scripts**: Download the latest version of a script
+- **View Details**: See script information and documentation
+- **Install/Run**: Execute scripts on your PVE servers
+- **Filter & Search**: Use the same filtering options as Available Scripts
+
+### Installed Scripts
+
+Track and manage scripts that are installed on your PVE servers.
+
+**Auto-Detection (Primary Feature):**
+The system can automatically detect LXC containers that have community-script tags on your PVE servers:
+- **Automatic Discovery**: Scans your PVE servers for containers with community-script tags
+- **Container Detection**: Identifies LXC containers running Proxmox helper scripts
+- **Server Association**: Links detected scripts to the specific PVE server
+- **Bulk Import**: Automatically creates records for all detected scripts
+
+**How Auto-Detection Works:**
+1. Connects to your configured PVE servers
+2. Scans LXC container configurations
+3. Looks for containers with community-script tags
+4. Creates installed script records automatically
+
+**Manual Script Management:**
+- **Add Scripts Manually**: Create records for scripts not auto-detected
+- **Edit Script Details**: Update script names and container IDs
+- **Delete Scripts**: Remove scripts from tracking
+- **Bulk Operations**: Clean up old or invalid script records
+
+**Script Tracking Features:**
+- **Installation Status**: Track success, failure, or in-progress installations
+- **Server Association**: Know which server each script is installed on
+- **Container ID**: Link scripts to specific LXC containers
+- **Web UI Access**: Track and access Web UI IP addresses and ports
+- **Execution Logs**: View output and logs from script installations
+- **Filtering**: Filter by server, status, or search terms
+
+**Managing Installed Scripts:**
+- **View All Scripts**: See all tracked scripts across all servers
+- **Filter by Server**: Show scripts for a specific PVE server
+- **Filter by Status**: Show successful, failed, or in-progress installations
+- **Sort Options**: Sort by name, container ID, server, status, or date
+- **Update Scripts**: Re-run or update existing script installations
+
+**Web UI Access:**
+Automatically detect and access Web UI interfaces for your installed scripts:
+- **Auto-Detection**: Automatically detects Web UI URLs from script installation output
+- **IP & Port Tracking**: Stores and displays Web UI IP addresses and ports
+- **One-Click Access**: Click IP:port to open Web UI in new tab
+- **Manual Detection**: Re-detect IP using `hostname -I` inside container
+- **Port Detection**: Uses script metadata to get correct port (e.g., actualbudget:5006)
+- **Editable Fields**: Manually edit IP and port values as needed
+
+**Actions Dropdown:**
+Clean interface with all actions organized in a dropdown menu:
+- **Edit Button**: Always visible for quick script editing
+- **Actions Dropdown**: Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete
+- **Smart Visibility**: Dropdown only appears when actions are available
+- **Auto-Close**: Dropdown closes after clicking any action
+- **Disabled States**: Actions are disabled when container is stopped
+
+**Container Control:**
+Directly control LXC containers from the installed scripts page via SSH:
+- **Start/Stop Button**: Control container state with `pct start/stop <ID>`
+- **Container Status**: Real-time status indicator (running/stopped/unknown)
+- **Destroy Button**: Permanently remove LXC container with `pct destroy <ID>`
+- **Confirmation Modals**: Simple OK/Cancel for start/stop, type container ID to confirm destroy
+- **SSH Execution**: All commands executed remotely via configured SSH connections
+
+**Safety Features:**
+- Start/Stop actions require simple confirmation
+- Destroy action requires typing the container ID to confirm
+- All actions show loading states and error handling
+- Only works with SSH scripts that have valid container IDs
+
+### Update System
+
+Keep your PVE Scripts Management application up to date with the latest features and improvements.
+
+**What Does Updating Do?**
+- **Downloads Latest Version**: Fetches the newest release from the GitHub repository
+- **Updates Application Files**: Replaces current files with the latest version
+- **Installs Dependencies**: Updates Node.js packages and dependencies
+- **Rebuilds Application**: Compiles the application with latest changes
+- **Restarts Server**: Automatically restarts the application server
+
+**How to Update:**
+
+**Automatic Update (Recommended):**
+- Click the "Update Now" button when an update is available
+- The system will handle everything automatically
+- You'll see a progress overlay with update logs
+- The page will reload automatically when complete
+
+**Manual Update (Advanced):**
+If automatic update fails, you can update manually:
+```bash
+# Navigate to the application directory
+cd $PVESCRIPTLOCAL_DIR
+
+# Pull latest changes
+git pull
+
+# Install dependencies
+npm install
+
+# Build the application
+npm run build
+
+# Start the application
+npm start
+```
+
+**Update Process:**
+1. **Check for Updates**: System automatically checks GitHub for new releases
+2. **Download Update**: Downloads the latest release files
+3. **Backup Current Version**: Creates backup of current installation
+4. **Install New Version**: Replaces files and updates dependencies
+5. **Build Application**: Compiles the updated code
+6. **Restart Server**: Stops old server and starts new version
+7. **Reload Page**: Automatically refreshes the browser
+
+**Release Notes:**
+Click the external link icon next to the update button to view detailed release notes on GitHub:
+- See what's new in each version
+- Read about bug fixes and improvements
+- Check for any breaking changes
+- View installation requirements
+
+**Important Notes:**
+- **Backup**: Your data and settings are preserved during updates
+- **Downtime**: Brief downtime occurs during the update process
+- **Compatibility**: Updates maintain backward compatibility with your data
+- **Rollback**: If issues occur, you can manually revert to previous version
+
 ## 📁 Project Structure

 ```
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,11 +58,11 @@
        "@vitest/coverage-v8": "^3.2.4",
        "@vitest/ui": "^3.2.4",
        "eslint": "^9.23.0",
-        "eslint-config-next": "^15.5.4",
+        "eslint-config-next": "^15.5.5",
        "jsdom": "^27.0.0",
        "postcss": "^8.5.3",
        "prettier": "^3.5.3",
-        "prettier-plugin-tailwindcss": "^0.6.11",
+        "prettier-plugin-tailwindcss": "^0.7.0",
        "tailwindcss": "^4.1.14",
        "typescript": "^5.8.2",
        "typescript-eslint": "^8.46.1",
@@ -1845,9 +1845,9 @@
      "license": "MIT"
    },
    "node_modules/@next/eslint-plugin-next": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.4.tgz",
-      "integrity": "sha512-SR1vhXNNg16T4zffhJ4TS7Xn7eq4NfKfcOsRwea7RIAHrjRpI9ALYbamqIJqkAhowLlERffiwk0FMvTLNdnVtw==",
+      "version": "15.5.5",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.5.tgz",
+      "integrity": "sha512-FMzm412l9oFB8zdRD+K6HQ1VzlS+sNNsdg0MfvTg0i8lfCyTgP/RFxiu/pGJqZ/IQnzn9xSiLkjOVI7Iv4nbdQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -6028,13 +6028,13 @@
      }
    },
    "node_modules/eslint-config-next": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.4.tgz",
-      "integrity": "sha512-BzgVVuT3kfJes8i2GHenC1SRJ+W3BTML11lAOYFOOPzrk2xp66jBOAGEFRw+3LkYCln5UzvFsLhojrshb5Zfaw==",
+      "version": "15.5.5",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.5.tgz",
+      "integrity": "sha512-f8lRSSelp6cqrYjxEMjJ5En3WV913gTu/w9goYShnIujwDSQlKt4x9MwSDiduE9R5mmFETK44+qlQDxeSA0rUA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@next/eslint-plugin-next": "15.5.4",
+        "@next/eslint-plugin-next": "15.5.5",
        "@rushstack/eslint-patch": "^1.10.3",
        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
@@ -10125,13 +10125,13 @@
      }
    },
    "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.6.14",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
-      "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.0.tgz",
+      "integrity": "sha512-zpRZhkfwq1cNmbKhmKzXKuKFdkgXZXlf6p+KttD75v6pGz1FxmcKMc4RKdw97GYBKBbout4113HSLaBJAomFDw==",
      "dev": true,
      "license": "MIT",
      "engines": {
-        "node": ">=14.21.3"
+        "node": ">=20.19"
      },
      "peerDependencies": {
        "@ianvs/prettier-plugin-sort-imports": "*",
@@ -10144,14 +10144,12 @@
        "prettier": "^3.0",
        "prettier-plugin-astro": "*",
        "prettier-plugin-css-order": "*",
-        "prettier-plugin-import-sort": "*",
        "prettier-plugin-jsdoc": "*",
        "prettier-plugin-marko": "*",
        "prettier-plugin-multiline-arrays": "*",
        "prettier-plugin-organize-attributes": "*",
        "prettier-plugin-organize-imports": "*",
        "prettier-plugin-sort-imports": "*",
-        "prettier-plugin-style-order": "*",
        "prettier-plugin-svelte": "*"
      },
      "peerDependenciesMeta": {
@@ -10182,9 +10180,6 @@
        "prettier-plugin-css-order": {
          "optional": true
        },
-        "prettier-plugin-import-sort": {
-          "optional": true
-        },
        "prettier-plugin-jsdoc": {
          "optional": true
        },
@@ -10203,9 +10198,6 @@
        "prettier-plugin-sort-imports": {
          "optional": true
        },
-        "prettier-plugin-style-order": {
-          "optional": true
-        },
        "prettier-plugin-svelte": {
          "optional": true
        }
--- a/package.json
+++ b/package.json
@@ -72,11 +72,11 @@
    "@vitest/coverage-v8": "^3.2.4",
    "@vitest/ui": "^3.2.4",
    "eslint": "^9.23.0",
-    "eslint-config-next": "^15.5.4",
+    "eslint-config-next": "^15.5.5",
    "jsdom": "^27.0.0",
    "postcss": "^8.5.3",
    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.7.0",
    "tailwindcss": "^4.1.14",
    "typescript": "^5.8.2",
    "typescript-eslint": "^8.46.1",
--- a/src/app/_components/FilterBar.tsx
+++ b/src/app/_components/FilterBar.tsx
@@ -93,17 +93,6 @@ export function FilterBar({
        </div>
      )}

-      {/* Filter Persistence Status */}
-      {!isLoadingFilters && saveFiltersEnabled && (
-        <div className="mb-4 flex items-center justify-center py-1">
-          <div className="flex items-center space-x-2 text-xs text-green-600">
-            <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-            </svg>
-            <span>Filters are being saved automatically</span>
-          </div>
-        </div>
-      )}

      {/* Filter Header */}
      {!isLoadingFilters && (
@@ -391,18 +380,30 @@ export function FilterBar({

      {/* Filter Summary and Clear All */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
-        <div className="text-sm text-muted-foreground">
-          {filteredCount === totalScripts ? (
-            <span>Showing all {totalScripts} scripts</span>
-          ) : (
-            <span>
-              {filteredCount} of {totalScripts} scripts{" "}
-              {hasActiveFilters && (
-                <span className="font-medium text-blue-600">
-                  (filtered)
-                </span>
-              )}
-            </span>
+        <div className="flex items-center gap-4">
+          <div className="text-sm text-muted-foreground">
+            {filteredCount === totalScripts ? (
+              <span>Showing all {totalScripts} scripts</span>
+            ) : (
+              <span>
+                {filteredCount} of {totalScripts} scripts{" "}
+                {hasActiveFilters && (
+                  <span className="font-medium text-blue-600">
+                    (filtered)
+                  </span>
+                )}
+              </span>
+            )}
+          </div>
+          
+          {/* Filter Persistence Status */}
+          {!isLoadingFilters && saveFiltersEnabled && (
+            <div className="flex items-center space-x-1 text-xs text-green-600">
+              <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              <span>Filters are being saved automatically</span>
+            </div>
          )}
        </div>

--- a/src/app/_components/InstalledScriptsTab.tsx
+++ b/src/app/_components/InstalledScriptsTab.tsx
@@ -377,7 +377,7 @@ export function InstalledScriptsTab() {
        containerStatusMutation.mutate({ serverIds });
      }
    }, 500);
-  }, [containerStatusMutation]);
+  }, []);

  // Run cleanup when component mounts and scripts are loaded (only once)
  useEffect(() => {
@@ -1365,21 +1365,17 @@ export function InstalledScriptsTab() {
                          </div>
                        ) : (
                          script.web_ui_ip ? (
-                            <div className="flex items-center justify-between w-full">
-                              <button
-                                onClick={() => handleOpenWebUI(script)}
-                                className="text-sm font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline flex-shrink-0"
-                              >
+                            <div className="flex items-center space-x-3">
+                              <span className="text-sm text-foreground">
                                {script.web_ui_ip}:{script.web_ui_port ?? 80}
-                              </button>
-                              {script.container_id && script.execution_mode === 'ssh' && (
+                              </span>
+                              {containerStatuses.get(script.id) === 'running' && (
                                <button
-                                  onClick={() => handleAutoDetectWebUI(script)}
-                                  disabled={autoDetectWebUIMutation.isPending}
-                                  className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors flex-shrink-0 ml-2"
-                                  title="Re-detect IP and port"
+                                  onClick={() => handleOpenWebUI(script)}
+                                  className="text-xs px-2 py-1 bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md rounded disabled:opacity-50 flex-shrink-0"
+                                  title="Open Web UI"
                                >
-                                  {autoDetectWebUIMutation.isPending ? '...' : 'Re-detect'}
+                                  Open UI
                                </button>
                              )}
                            </div>
@@ -1487,6 +1483,15 @@ export function InstalledScriptsTab() {
                                        Open UI
                                      </DropdownMenuItem>
                                    )}
+                                    {script.container_id && script.execution_mode === 'ssh' && script.web_ui_ip && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleAutoDetectWebUI(script)}
+                                        disabled={autoDetectWebUIMutation.isPending || containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                                      >
+                                        {autoDetectWebUIMutation.isPending ? 'Re-detect...' : 'Re-detect IP/Port'}
+                                      </DropdownMenuItem>
+                                    )}
                                    {script.container_id && script.execution_mode === 'ssh' && (
                                      <>
                                        <DropdownMenuSeparator className="bg-gray-700" />
--- a/src/app/_components/ScriptDetailModal.tsx
+++ b/src/app/_components/ScriptDetailModal.tsx
@@ -359,91 +359,91 @@ export function ScriptDetailModal({
            })()}
        </div>

-        {/* Load Message */}
-        {loadMessage && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            {loadMessage}
-          </div>
-        )}
-
-        {/* Script Files Status */}
-        {(scriptFilesLoading || comparisonLoading) && (
-          <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
-            <div className="flex items-center space-x-2">
-              <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
-              <span>Loading script status...</span>
-            </div>
-          </div>
-        )}
-
-        {scriptFilesData?.success &&
-          !scriptFilesLoading &&
-          (() => {
-            // Determine script type from the first install method
-            const firstScript = script?.install_methods?.[0]?.script;
-            let scriptType = "Script";
-            if (firstScript?.startsWith("ct/")) {
-              scriptType = "CT Script";
-            } else if (firstScript?.startsWith("tools/")) {
-              scriptType = "Tools Script";
-            } else if (firstScript?.startsWith("vm/")) {
-              scriptType = "VM Script";
-            } else if (firstScript?.startsWith("vw/")) {
-              scriptType = "VW Script";
-            }
-
-            return (
-              <div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
-                <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
-                    ></div>
-                    <span>
-                      {scriptType}:{" "}
-                      {scriptFilesData.ctExists ? "Available" : "Not loaded"}
-                    </span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
-                    ></div>
-                    <span>
-                      Install Script:{" "}
-                      {scriptFilesData.installExists
-                        ? "Available"
-                        : "Not loaded"}
-                    </span>
-                  </div>
-                  {scriptFilesData?.success &&
-                    (scriptFilesData.ctExists ||
-                      scriptFilesData.installExists) &&
-                    comparisonData?.success &&
-                    !comparisonLoading && (
-                      <div className="flex items-center space-x-2">
-                        <div
-                          className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
-                        ></div>
-                        <span>
-                          Status:{" "}
-                          {comparisonData.hasDifferences
-                            ? "Update available"
-                            : "Up to date"}
-                        </span>
-                      </div>
-                    )}
-                </div>
-                {scriptFilesData.files.length > 0 && (
-                  <div className="mt-2 text-xs text-muted-foreground break-words">
-                    Files: {scriptFilesData.files.join(", ")}
-                  </div>
-                )}
-              </div>
-            );
-          })()}
-
        {/* Content */}
        <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
+          {/* Script Files Status */}
+          {(scriptFilesLoading || comparisonLoading) && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              <div className="flex items-center space-x-2">
+                <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <span>Loading script status...</span>
+              </div>
+            </div>
+          )}
+
+          {scriptFilesData?.success &&
+            !scriptFilesLoading &&
+            (() => {
+              // Determine script type from the first install method
+              const firstScript = script?.install_methods?.[0]?.script;
+              let scriptType = "Script";
+              if (firstScript?.startsWith("ct/")) {
+                scriptType = "CT Script";
+              } else if (firstScript?.startsWith("tools/")) {
+                scriptType = "Tools Script";
+              } else if (firstScript?.startsWith("vm/")) {
+                scriptType = "VM Script";
+              } else if (firstScript?.startsWith("vw/")) {
+                scriptType = "VW Script";
+              }
+
+              return (
+                <div className="mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
+                  <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                    <div className="flex items-center space-x-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
+                      ></div>
+                      <span>
+                        {scriptType}:{" "}
+                        {scriptFilesData.ctExists ? "Available" : "Not loaded"}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
+                      ></div>
+                      <span>
+                        Install Script:{" "}
+                        {scriptFilesData.installExists
+                          ? "Available"
+                          : "Not loaded"}
+                      </span>
+                    </div>
+                    {scriptFilesData?.success &&
+                      (scriptFilesData.ctExists ||
+                        scriptFilesData.installExists) &&
+                      comparisonData?.success &&
+                      !comparisonLoading && (
+                        <div className="flex items-center space-x-2">
+                          <div
+                            className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
+                          ></div>
+                          <span>
+                            Status:{" "}
+                            {comparisonData.hasDifferences
+                              ? "Update available"
+                              : "Up to date"}
+                          </span>
+                        </div>
+                      )}
+                  </div>
+                  {scriptFilesData.files.length > 0 && (
+                    <div className="mt-2 text-xs text-muted-foreground break-words">
+                      Files: {scriptFilesData.files.join(", ")}
+                    </div>
+                  )}
+                </div>
+              );
+            })()}
+
+          {/* Load Message */}
+          {loadMessage && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
+              {loadMessage}
+            </div>
+          )}
+
          {/* Description */}
          <div>
            <h3 className="mb-2 text-base sm:text-lg font-semibold text-foreground">
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -147,7 +147,7 @@ export default function Home() {
        {/* Header */}
        <div className="text-center mb-6 sm:mb-8">
          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground mb-2 flex items-center justify-center gap-2 sm:gap-3">
-            <Rocket className="h-6 w-6 sm:h-8 w-8 lg:h-9 lg:w-9" />
+            
            <span className="break-words">PVE Scripts Management</span>
          </h1>
          <p className="text-sm sm:text-base text-muted-foreground mb-4 px-2">
--- a/src/server/api/routers/installedScripts.ts
+++ b/src/server/api/routers/installedScripts.ts
@@ -1137,9 +1137,11 @@ export const installedScriptsRouter = createTRPCRouter({
        console.log('✅ Successfully updated database');
        return {
          success: true,
-          message: `Successfully detected IP: ${detectedIp}:${detectedPort}`,
+          message: `Successfully detected IP: ${detectedIp}:${detectedPort} for LXC ${scriptData.container_id} on ${(server as any).name}`,
          detectedIp,
-          detectedPort: detectedPort
+          detectedPort: detectedPort,
+          containerId: scriptData.container_id,
+          serverName: (server as any).name
        };
      } catch (error) {
        console.error('Error in autoDetectWebUI:', error);
Author	SHA1	Message	Date
Michel Roegl-Brunner	fa2cb457fa	Move 'Filters are being saved automatically' message to bottom left - Relocated message from top center to bottom left next to script count - Positioned alongside 'Clear all filters' button for better layout - Maintains green checkmark icon and styling consistency	2025-10-16 14:27:59 +02:00
Michel Roegl-Brunner	02680aed29	Move status banner down in ScriptDetailModal - Repositioned status banner from after action buttons to within content section - Creates better visual separation and spacing as shown in design - Maintains all functionality while improving layout hierarchy	2025-10-16 14:26:41 +02:00
Michel Roegl-Brunner	63459a650d	Merge pull request #156 from community-scripts/dependabot/npm_and_yarn/eslint-config-next-15.5.5	2025-10-14 21:40:06 +02:00
dependabot[bot]	343989474d	build(deps-dev): Bump prettier-plugin-tailwindcss from 0.6.14 to 0.7.0 Bumps [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) from 0.6.14 to 0.7.0. - [Release notes](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/compare/v0.6.14...v0.7.0) --- updated-dependencies: - dependency-name: prettier-plugin-tailwindcss dependency-version: 0.7.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2025-10-14 21:39:47 +02:00
dependabot[bot]	a0a6a11838	build(deps-dev): Bump eslint-config-next from 15.5.4 to 15.5.5 Bumps [eslint-config-next](https://github.com/vercel/next.js/tree/HEAD/packages/eslint-config-next) from 15.5.4 to 15.5.5. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](https://github.com/vercel/next.js/commits/v15.5.5/packages/eslint-config-next) --- updated-dependencies: - dependency-name: eslint-config-next dependency-version: 15.5.5 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2025-10-14 19:29:32 +00:00
Michel Roegl-Brunner	695232c711	Amend readme	2025-10-14 16:26:34 +02:00
Michel Roegl-Brunner	5b11a6bad8	refactor: optimize UI button layout and fix dependency loop (#149 ) - Add Open UI button next to IP:Port in installed scripts table - Move Re-detect button to Actions dropdown for better space usage - Fix dependency array loop in fetchContainerStatuses useCallback - Hide buttons for stopped containers to prevent invalid actions - Enhance auto-detect success message with LXC ID and hostname - Improve font consistency by removing monospace from IP:Port text - Optimize screen real estate with cleaner, more scannable layout	2025-10-14 16:22:38 +02:00