feat: Multi-select script download with progress tracking (#121)

* feat: Add multi-select script download with progress tracking

- Add checkbox selection to script cards (both card and list views)
- Implement individual script downloads with real-time progress
- Add progress bar with visual indicators (✓ success, ✗ failed, ⟳ in-progress)
- Add batch download buttons (Download Selected, Download All Filtered)
- Add user-friendly error messages with specific guidance
- Add persistent progress bar with manual dismiss option
- Clear selection when switching between card/list views
- Update card download status immediately after completion

Features:
- Multi-select with checkboxes on script cards
- Real-time progress tracking during downloads
- Detailed error reporting with actionable messages
- Visual progress indicators for each script
- Batch download functionality for selected or filtered scripts
- Persistent progress bar until manually dismissed
- Automatic card status updates after download completion

* fix: Resolve ESLint errors

- Replace logical OR operators (||) with nullish coalescing (??) for safer null/undefined handling
- Replace for loop with for-of loop for better iteration
- Remove unused variable 'results'
- Fix all TypeScript ESLint warnings and errors

* fix: Resolve TypeScript error in loadMultipleScripts

- Use type guard to check for 'error' property before accessing
- Fix 'Property error does not exist' TypeScript error
- Ensure safe access to error property in result object

scripts/ct/debian.sh

@@ -1,43 +0,0 @@
-#!/usr/bin/env bash
-SCRIPT_DIR="$(dirname "$0")" 
-source "$SCRIPT_DIR/../core/build.func"
-# Copyright (c) 2021-2025 tteck
-# Author: tteck (tteckster)
-# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Source: https://www.debian.org/
-
-APP="Debian"
-var_tags="${var_tags:-os}"
-var_cpu="${var_cpu:-1}"
-var_ram="${var_ram:-512}"
-var_disk="${var_disk:-2}"
-var_os="${var_os:-debian}"
-var_version="${var_version:-13}"
-var_unprivileged="${var_unprivileged:-1}"
-
-header_info "$APP"
-variables
-color
-catch_errors
-
-function update_script() {
-  header_info
-  check_container_storage
-  check_container_resources
-  if [[ ! -d /var ]]; then
-    msg_error "No ${APP} Installation Found!"
-    exit
-  fi
-  msg_info "Updating $APP LXC"
-  $STD apt update
-  $STD apt -y upgrade
-  msg_ok "Updated $APP LXC"
-  exit
-}
-
-start
-build_container
-description
-
-msg_ok "Completed Successfully!\n"
-echo -e "${CREATING}${GN}${APP} setup has been successfully initialized!${CL}"

scripts/install/debian-install.sh

@@ -1,24 +0,0 @@
-#!/usr/bin/env bash
-
-# Copyright (c) 2021-2025 tteck
-# Author: tteck (tteckster)
-# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Source: https://www.debian.org/
-
-source /dev/stdin <<<"$FUNCTIONS_FILE_PATH"
-color
-verb_ip6
-catch_errors
-setting_up_container
-network_check
-update_os
-
-motd_ssh
-customize
-
-msg_info "Cleaning up"
-$STD apt -y autoremove
-$STD apt -y autoclean
-$STD apt -y clean
-msg_ok "Cleaned"
-

src/app/_components/ScriptCard.tsx

@@ -8,20 +8,49 @@ import { TypeBadge, UpdateableBadge } from './Badge';
 interface ScriptCardProps {
   script: ScriptCard;
   onClick: (script: ScriptCard) => void;
+  isSelected?: boolean;
+  onToggleSelect?: (slug: string) => void;
 }
 
-export function ScriptCard({ script, onClick }: ScriptCardProps) {
+export function ScriptCard({ script, onClick, isSelected = false, onToggleSelect }: ScriptCardProps) {
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = () => {
     setImageError(true);
   };
 
+  const handleCheckboxClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onToggleSelect && script.slug) {
+      onToggleSelect(script.slug);
+    }
+  };
+
   return (
     <div
-      className="bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-border hover:border-primary h-full flex flex-col"
+      className="bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-border hover:border-primary h-full flex flex-col relative"
       onClick={() => onClick(script)}
     >
+      {/* Checkbox in top-left corner */}
+      {onToggleSelect && (
+        <div className="absolute top-2 left-2 z-10">
+          <div 
+            className={`w-4 h-4 border-2 rounded cursor-pointer transition-all duration-200 flex items-center justify-center ${
+              isSelected 
+                ? 'bg-primary border-primary text-primary-foreground' 
+                : 'bg-card border-border hover:border-primary/60 hover:bg-accent'
+            }`}
+            onClick={handleCheckboxClick}
+          >
+            {isSelected && (
+              <svg className="w-3 h-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>
+            )}
+          </div>
+        </div>
+      )}
+      
       <div className="p-6 flex-1 flex flex-col">
         {/* Header with logo and name */}
         <div className="flex items-start space-x-4 mb-4">

src/app/_components/ScriptCardList.tsx

@@ -8,15 +8,24 @@ import { TypeBadge, UpdateableBadge } from './Badge';
 interface ScriptCardListProps {
   script: ScriptCard;
   onClick: (script: ScriptCard) => void;
+  isSelected?: boolean;
+  onToggleSelect?: (slug: string) => void;
 }
 
-export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
+export function ScriptCardList({ script, onClick, isSelected = false, onToggleSelect }: ScriptCardListProps) {
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = () => {
     setImageError(true);
   };
 
+  const handleCheckboxClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onToggleSelect && script.slug) {
+      onToggleSelect(script.slug);
+    }
+  };
+
   const formatDate = (dateString?: string) => {
     if (!dateString) return 'Unknown';
     try {
@@ -37,10 +46,30 @@ export function ScriptCardList({ script, onClick }: ScriptCardListProps) {
 
   return (
     <div
-      className="bg-card rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer border border-border hover:border-primary"
+      className="bg-card rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer border border-border hover:border-primary relative"
       onClick={() => onClick(script)}
     >
-      <div className="p-6">
+      {/* Checkbox */}
+      {onToggleSelect && (
+        <div className="absolute top-4 left-4 z-10">
+          <div 
+            className={`w-4 h-4 border-2 rounded cursor-pointer transition-all duration-200 flex items-center justify-center ${
+              isSelected 
+                ? 'bg-primary border-primary text-primary-foreground' 
+                : 'bg-card border-border hover:border-primary/60 hover:bg-accent'
+            }`}
+            onClick={handleCheckboxClick}
+          >
+            {isSelected && (
+              <svg className="w-3 h-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>
+            )}
+          </div>
+        </div>
+      )}
+      
+      <div className={`p-6 ${onToggleSelect ? 'pl-12' : ''}`}>
         <div className="flex items-start space-x-4">
           {/* Logo */}
           <div className="flex-shrink-0">

src/app/_components/ScriptsGrid.tsx

@@ -22,6 +22,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'card' | 'list'>('card');
+  const [selectedSlugs, setSelectedSlugs] = useState<Set<string>>(new Set());
+  const [downloadProgress, setDownloadProgress] = useState<{ current: number; total: number; currentScript: string; failed: Array<{ slug: string; error: string }> } | null>(null);
   const [filters, setFilters] = useState<FilterState>({
     searchQuery: '',
     showUpdatable: null,
@@ -40,6 +42,9 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
     { enabled: !!selectedSlug }
   );
 
+  // Individual script download mutation
+  const loadSingleScriptMutation = api.scripts.loadScript.useMutation();
+
   // Load SAVE_FILTER setting, saved filters, and view mode on component mount
   useEffect(() => {
     const loadSettings = async () => {
@@ -328,6 +333,168 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
     setSearchQuery(newFilters.searchQuery);
   };
 
+  // Selection management functions
+  const toggleScriptSelection = (slug: string) => {
+    setSelectedSlugs(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(slug)) {
+        newSet.delete(slug);
+      } else {
+        newSet.add(slug);
+      }
+      return newSet;
+    });
+  };
+
+  const selectAllVisible = () => {
+    const visibleSlugs = new Set(filteredScripts.map(script => script.slug).filter(Boolean));
+    setSelectedSlugs(visibleSlugs);
+  };
+
+  const clearSelection = () => {
+    setSelectedSlugs(new Set());
+  };
+
+  const getFriendlyErrorMessage = (error: string, slug: string): string => {
+    const errorLower = error.toLowerCase();
+    
+    // Exact matches first (most specific)
+    if (error === 'Script not found') {
+      return `Script "${slug}" is not available for download. It may not exist in the repository or has been removed.`;
+    }
+    
+    if (error === 'Failed to load script') {
+      return `Unable to download script "${slug}". Please check your internet connection and try again.`;
+    }
+    
+    // Network/Connection errors
+    if (errorLower.includes('network') || errorLower.includes('connection') || errorLower.includes('timeout')) {
+      return 'Network connection failed. Please check your internet connection and try again.';
+    }
+    
+    // GitHub API errors
+    if (errorLower.includes('not found') || errorLower.includes('404')) {
+      return `Script "${slug}" not found in the repository. It may have been removed or renamed.`;
+    }
+    
+    if (errorLower.includes('rate limit') || errorLower.includes('403')) {
+      return 'GitHub API rate limit exceeded. Please wait a few minutes and try again.';
+    }
+    
+    if (errorLower.includes('unauthorized') || errorLower.includes('401')) {
+      return 'Access denied. The script may be private or require authentication.';
+    }
+    
+    // File system errors
+    if (errorLower.includes('permission') || errorLower.includes('eacces')) {
+      return 'Permission denied. Please check file system permissions.';
+    }
+    
+    if (errorLower.includes('no space') || errorLower.includes('enospc')) {
+      return 'Insufficient disk space. Please free up some space and try again.';
+    }
+    
+    if (errorLower.includes('read-only') || errorLower.includes('erofs')) {
+      return 'Cannot write to read-only file system. Please check your installation directory.';
+    }
+    
+    // Script-specific errors
+    if (errorLower.includes('script not found')) {
+      return `Script "${slug}" not found in the local scripts directory.`;
+    }
+    
+    if (errorLower.includes('invalid script') || errorLower.includes('malformed')) {
+      return `Script "${slug}" appears to be corrupted or invalid.`;
+    }
+    
+    if (errorLower.includes('already exists') || errorLower.includes('file exists')) {
+      return `Script "${slug}" already exists locally. Skipping download.`;
+    }
+    
+    // Generic fallbacks
+    if (errorLower.includes('timeout')) {
+      return 'Download timed out. The script may be too large or the connection is slow.';
+    }
+    
+    if (errorLower.includes('server error') || errorLower.includes('500')) {
+      return 'Server error occurred. Please try again later.';
+    }
+    
+    // If we can't categorize it, return a more helpful generic message
+    if (error.length > 100) {
+      return `Download failed: ${error.substring(0, 100)}...`;
+    }
+    
+    return `Download failed: ${error}`;
+  };
+
+  const downloadScriptsIndividually = async (slugsToDownload: string[]) => {
+    setDownloadProgress({ current: 0, total: slugsToDownload.length, currentScript: '', failed: [] });
+    
+    const successful: Array<{ slug: string; files: string[] }> = [];
+    const failed: Array<{ slug: string; error: string }> = [];
+    
+    for (let i = 0; i < slugsToDownload.length; i++) {
+      const slug = slugsToDownload[i];
+      
+      // Update progress with current script
+      setDownloadProgress(prev => prev ? {
+        ...prev,
+        current: i,
+        currentScript: slug ?? ''
+      } : null);
+      
+      try {
+        // Download individual script
+        const result = await loadSingleScriptMutation.mutateAsync({ slug: slug ?? '' });
+        
+        if (result.success) {
+          successful.push({ slug: slug ?? '', files: result.files ?? [] });
+        } else {
+          const error = 'error' in result ? result.error : 'Failed to load script';
+          console.log(`Script ${slug} failed with error:`, error, 'Full result:', result);
+          const userFriendlyError = getFriendlyErrorMessage(error, slug ?? '');
+          failed.push({ slug: slug ?? '', error: userFriendlyError });
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to load script';
+        const userFriendlyError = getFriendlyErrorMessage(errorMessage, slug ?? '');
+        failed.push({ 
+          slug: slug ?? '', 
+          error: userFriendlyError
+        });
+      }
+    }
+    
+    // Final progress update
+    setDownloadProgress(prev => prev ? {
+      ...prev,
+      current: slugsToDownload.length,
+      failed
+    } : null);
+    
+    // Clear selection and refetch to update card download status
+    setSelectedSlugs(new Set());
+    void refetch();
+    
+    // Keep progress bar visible until user navigates away or manually dismisses
+    // Progress bar will stay visible to show final results
+  };
+
+  const handleBatchDownload = () => {
+    const slugsToDownload = Array.from(selectedSlugs);
+    if (slugsToDownload.length > 0) {
+      void downloadScriptsIndividually(slugsToDownload);
+    }
+  };
+
+  const handleDownloadAllFiltered = () => {
+    const slugsToDownload = filteredScripts.map(script => script.slug).filter(Boolean);
+    if (slugsToDownload.length > 0) {
+      void downloadScriptsIndividually(slugsToDownload);
+    }
+  };
+
   // Handle category selection with auto-scroll
   const handleCategorySelect = (category: string | null) => {
     setSelectedCategory(category);
@@ -348,6 +515,18 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
     }
   }, [selectedCategory]);
 
+  // Clear selection when switching between card/list views
+  useEffect(() => {
+    setSelectedSlugs(new Set());
+  }, [viewMode]);
+
+  // Clear progress bar when component unmounts
+  useEffect(() => {
+    return () => {
+      setDownloadProgress(null);
+    };
+  }, []);
+
 
   const handleCardClick = (scriptCard: { slug: string }) => {
     // All scripts are GitHub scripts, open modal
@@ -441,6 +620,154 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
           onViewModeChange={setViewMode}
         />
 
+
+        {/* Action Buttons */}
+        <div className="flex flex-wrap gap-2 mb-4">
+          {selectedSlugs.size > 0 ? (
+            <Button
+              onClick={handleBatchDownload}
+              disabled={loadSingleScriptMutation.isPending}
+              className="bg-blue-600 hover:bg-blue-700 text-white"
+            >
+              {loadSingleScriptMutation.isPending ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  Downloading...
+                </>
+              ) : (
+                `Download Selected (${selectedSlugs.size})`
+              )}
+            </Button>
+          ) : (
+            <Button
+              onClick={handleDownloadAllFiltered}
+              disabled={filteredScripts.length === 0 || loadSingleScriptMutation.isPending}
+              variant="outline"
+            >
+              {loadSingleScriptMutation.isPending ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"></div>
+                  Downloading...
+                </>
+              ) : (
+                `Download All Filtered (${filteredScripts.length})`
+              )}
+            </Button>
+          )}
+
+          {selectedSlugs.size > 0 && (
+            <Button
+              onClick={clearSelection}
+              variant="ghost"
+              size="sm"
+            >
+              Clear Selection
+            </Button>
+          )}
+
+          {filteredScripts.length > 0 && (
+            <Button
+              onClick={selectAllVisible}
+              variant="ghost"
+              size="sm"
+            >
+              Select All Visible
+            </Button>
+          )}
+        </div>
+
+        {/* Progress Bar */}
+        {downloadProgress && (
+          <div className="mb-4 p-4 bg-card border border-border rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">
+                  {downloadProgress.current >= downloadProgress.total ? 'Download completed' : 'Downloading scripts'}... {downloadProgress.current} of {downloadProgress.total}
+                </span>
+                {downloadProgress.currentScript && downloadProgress.current < downloadProgress.total && (
+                  <span className="text-xs text-muted-foreground">
+                    Currently downloading: {downloadProgress.currentScript}
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">
+                  {Math.round((downloadProgress.current / downloadProgress.total) * 100)}%
+                </span>
+                {downloadProgress.current >= downloadProgress.total && (
+                  <button
+                    onClick={() => setDownloadProgress(null)}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                    title="Dismiss progress bar"
+                  >
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
+            
+            {/* Progress Bar */}
+            <div className="w-full bg-muted rounded-full h-2 mb-2">
+              <div 
+                className={`h-2 rounded-full transition-all duration-300 ease-out ${
+                  downloadProgress.failed.length > 0 ? 'bg-yellow-500' : 'bg-primary'
+                }`}
+                style={{ width: `${(downloadProgress.current / downloadProgress.total) * 100}%` }}
+              />
+            </div>
+            
+            {/* Progress Visualization */}
+            <div className="flex items-center text-xs text-muted-foreground mb-2">
+              <span className="mr-2">Progress:</span>
+              <div className="flex flex-wrap gap-1">
+                {Array.from({ length: downloadProgress.total }, (_, i) => {
+                  const isCompleted = i < downloadProgress.current;
+                  const isCurrent = i === downloadProgress.current;
+                  const isFailed = downloadProgress.failed.some(f => f.slug === downloadProgress.currentScript);
+                  
+                  return (
+                    <span 
+                      key={i} 
+                      className={`px-1 py-0.5 rounded text-xs ${
+                        isCompleted 
+                          ? isFailed ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+                          : isCurrent 
+                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 animate-pulse'
+                            : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {isCompleted ? (isFailed ? '✗' : '✓') : isCurrent ? '⟳' : '○'}
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+            
+            {/* Failed Scripts Details */}
+            {downloadProgress.failed.length > 0 && (
+              <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <div className="flex items-center mb-2">
+                  <svg className="w-4 h-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-sm font-medium text-red-800 dark:text-red-200">
+                    Failed Downloads ({downloadProgress.failed.length})
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  {downloadProgress.failed.map((failed, index) => (
+                    <div key={index} className="text-xs text-red-700 dark:text-red-300">
+                      <span className="font-medium">{failed.slug}:</span> {failed.error}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Legacy Search Bar (keeping for backward compatibility, but hidden) */}
         <div className="hidden mb-8">
           <div className="relative max-w-md mx-auto">
@@ -532,6 +859,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
                   key={uniqueKey}
                   script={script}
                   onClick={handleCardClick}
+                  isSelected={selectedSlugs.has(script.slug ?? '')}
+                  onToggleSelect={toggleScriptSelection}
                 />
               );
             })}
@@ -552,6 +881,8 @@ export function ScriptsGrid({ onInstallScript }: ScriptsGridProps) {
                   key={uniqueKey}
                   script={script}
                   onClick={handleCardClick}
+                  isSelected={selectedSlugs.has(script.slug ?? '')}
+                  onToggleSelect={toggleScriptSelection}
                 />
               );
             })}

src/server/api/routers/scripts.ts

@@ -254,6 +254,58 @@ export const scriptsRouter = createTRPCRouter({
       }
     }),
 
+  // Load multiple scripts from GitHub
+  loadMultipleScripts: publicProcedure
+    .input(z.object({ slugs: z.array(z.string()) }))
+    .mutation(async ({ input }) => {
+      try {
+        const successful = [];
+        const failed = [];
+
+        for (const slug of input.slugs) {
+          try {
+            // Get the script details
+            const script = await localScriptsService.getScriptBySlug(slug);
+            if (!script) {
+              failed.push({ slug, error: 'Script not found' });
+              continue;
+            }
+
+            // Load the script files
+            const result = await scriptDownloaderService.loadScript(script);
+            if (result.success) {
+              successful.push({ slug, files: result.files });
+            } else {
+              const error = 'error' in result ? result.error : 'Failed to load script';
+              failed.push({ slug, error });
+            }
+          } catch (error) {
+            failed.push({ 
+              slug, 
+              error: error instanceof Error ? error.message : 'Failed to load script' 
+            });
+          }
+        }
+
+        return {
+          success: true,
+          message: `Downloaded ${successful.length} scripts successfully, ${failed.length} failed`,
+          successful,
+          failed,
+          total: input.slugs.length
+        };
+      } catch (error) {
+        console.error('Error in loadMultipleScripts:', error);
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to load multiple scripts',
+          successful: [],
+          failed: [],
+          total: 0
+        };
+      }
+    }),
+
   // Check if script files exist locally
   checkScriptFiles: publicProcedure
     .input(z.object({ slug: z.string() }))