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

Author: michelroegl-brunner

scripts/ct/debian.sh

@@ -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">

scripts/install/debian-install.sh

@@ -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">