Fix validations and increased strikes limits (#212)

.github/workflows/build-executable.yml

@@ -134,22 +134,4 @@ jobs:
             ./artifacts/*.zip
           retention-days: 30
 
-      - name: Release
-        if: startsWith(github.ref, 'refs/tags/')
-        id: release
-        uses: softprops/action-gh-release@v2
-        with:
-          name: ${{ env.releaseVersion }}
-          tag_name: ${{ env.releaseVersion }}
-          repository: ${{ env.githubRepository }}
-          token: ${{ env.REPO_READONLY_PAT }}
-          make_latest: true
-          fail_on_unmatched_files: true
-          target_commitish: main
-          generate_release_notes: true
-          files: |
-            ./artifacts/${{ env.githubRepositoryName }}-${{ env.appVersion }}-win-amd64.zip
-            ./artifacts/${{ env.githubRepositoryName }}-${{ env.appVersion }}-linux-amd64.zip
-            ./artifacts/${{ env.githubRepositoryName }}-${{ env.appVersion }}-linux-arm64.zip
-            ./artifacts/${{ env.githubRepositoryName }}-${{ env.appVersion }}-osx-amd64.zip
-            ./artifacts/${{ env.githubRepositoryName }}-${{ env.appVersion }}-osx-arm64.zip
+      # Removed individual release step - handled by main release workflow

.github/workflows/build-macos-arm-installer.yml

@@ -363,14 +363,4 @@ jobs:
           path: '${{ env.pkgName }}'
           retention-days: 30
 
-      - name: Release
-        if: startsWith(github.ref, 'refs/tags/')
-        uses: softprops/action-gh-release@v2
-        with:
-          name: ${{ env.releaseVersion }}
-          tag_name: ${{ env.releaseVersion }}
-          repository: ${{ env.githubRepository }}
-          token: ${{ env.REPO_READONLY_PAT }}
-          make_latest: true
-          files: |
-            ${{ env.pkgName }} 
+      # Removed individual release step - handled by main release workflow 

.github/workflows/build-macos-intel-installer.yml

@@ -363,14 +363,4 @@ jobs:
           path: '${{ env.pkgName }}'
           retention-days: 30
 
-      - name: Release
-        if: startsWith(github.ref, 'refs/tags/')
-        uses: softprops/action-gh-release@v2
-        with:
-          name: ${{ env.releaseVersion }}
-          tag_name: ${{ env.releaseVersion }}
-          repository: ${{ env.githubRepository }}
-          token: ${{ env.REPO_READONLY_PAT }}
-          make_latest: true
-          files: |
-            ${{ env.pkgName }} 
+      # Removed individual release step - handled by main release workflow 

.github/workflows/build-windows-installer.yml

@@ -88,19 +88,6 @@ jobs:
         run: |
           dotnet publish code/backend/${{ env.executableName }}/${{ env.executableName }}.csproj -c Release --runtime win-x64 --self-contained -o dist /p:PublishSingleFile=true /p:Version=${{ env.appVersion }} /p:DebugType=None /p:DebugSymbols=false
 
-      - name: Create sample configuration
-        shell: pwsh
-        run: |
-          # Create config directory
-          New-Item -ItemType Directory -Force -Path "config"
-          
-          $config = @{
-            "HTTP_PORTS" = 11011
-            "BASE_PATH" = "/"
-          }
-          
-          $config | ConvertTo-Json | Out-File -FilePath "config/cleanuparr.json" -Encoding UTF8
-
       - name: Setup Inno Setup
         shell: pwsh
         run: |
@@ -158,14 +145,4 @@ jobs:
           path: installer/${{ env.installerName }}
           retention-days: 30
 
-      - name: Release
-        if: startsWith(github.ref, 'refs/tags/')
-        uses: softprops/action-gh-release@v2
-        with:
-          name: ${{ env.releaseVersion }}
-          tag_name: ${{ env.releaseVersion }}
-          repository: ${{ env.githubRepository }}
-          token: ${{ env.REPO_READONLY_PAT }}
-          make_latest: true
-          files: |
-            installer/${{ env.installerName }} 
+      # Removed individual release step - handled by main release workflow 

code/Dockerfile

@@ -45,6 +45,7 @@ FROM mcr.microsoft.com/dotnet/aspnet:9.0-bookworm-slim
 
 # Install required packages for user management and timezone support
 RUN apt-get update && apt-get install -y \
+    curl \
     tzdata \
     gosu \
     && rm -rf /var/lib/apt/lists/*

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/Deluge/DelugeServiceCB.cs

@@ -21,7 +21,7 @@ public partial class DelugeService
         
         if (download?.Hash is null)
         {
-            _logger.LogDebug("failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent {hash} in the {name} download client", hash, _downloadClientConfig.Name);
             return result;
         }
         
@@ -52,7 +52,7 @@ public partial class DelugeService
         }
         catch (Exception exception)
         {
-            _logger.LogDebug(exception, "failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug(exception, "failed to find files in the download client | {name}", download.Name);
         }
 
         if (contents is null)

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/Deluge/DelugeServiceQC.cs

@@ -25,7 +25,7 @@ public partial class DelugeService
         
         if (download?.Hash is null)
         {
-            _logger.LogDebug("failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent {hash} in the {name} download client", hash, _downloadClientConfig.Name);
             return result;
         }
         
@@ -44,7 +44,7 @@ public partial class DelugeService
         }
         catch (Exception exception)
         {
-            _logger.LogDebug(exception, "failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug(exception, "failed to find files in the download client | {name}", download.Name);
         }
         
 

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/QBittorrent/QBitServiceCB.cs

@@ -20,7 +20,7 @@ public partial class QBitService
 
         if (download is null)
         {
-            _logger.LogDebug("failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent {hash} in the {name} download client", hash, _downloadClientConfig.Name);
             return result;
         }
 
@@ -39,7 +39,7 @@ public partial class QBitService
 
         if (torrentProperties is null)
         {
-            _logger.LogDebug("failed to find torrent properties {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent properties {name}", download.Name);
             return result;
         }
 

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/QBittorrent/QBitServiceDC.cs

@@ -97,7 +97,7 @@ public partial class QBitService
 
                 if (torrentProperties is null)
                 {
-                    _logger.LogDebug("failed to find torrent properties in the download client | {name}", download.Name);
+                    _logger.LogDebug("failed to find torrent properties | {name}", download.Name);
                     return;
                 }
 

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/QBittorrent/QBitServiceQC.cs

@@ -19,7 +19,7 @@ public partial class QBitService
 
         if (download is null)
         {
-            _logger.LogDebug("failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent {hash} in the {name} download client", hash, _downloadClientConfig.Name);
             return result;
         }
 
@@ -38,7 +38,7 @@ public partial class QBitService
 
         if (torrentProperties is null)
         {
-            _logger.LogDebug("failed to find torrent properties {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent properties {hash}", download.Name);
             return result;
         }
 

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/Transmission/TransmissionServiceCB.cs

@@ -19,7 +19,7 @@ public partial class TransmissionService
 
         if (download?.FileStats is null || download.FileStats.Length == 0)
         {
-            _logger.LogDebug("failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent {hash} in the {name} download client", hash, _downloadClientConfig.Name);
             return result;
         }
         

code/backend/Cleanuparr.Infrastructure/Features/DownloadClient/Transmission/TransmissionServiceQC.cs

@@ -22,7 +22,7 @@ public partial class TransmissionService
 
         if (download is null)
         {
-            _logger.LogDebug("failed to find torrent {hash} in the download client", hash);
+            _logger.LogDebug("failed to find torrent {hash} in the {name} download client", hash, _downloadClientConfig.Name);
             return result;
         }
         

code/frontend/src/app/core/services/configuration.service.ts

@@ -64,7 +64,10 @@ export class ConfigurationService {
    * Update queue cleaner configuration
    */
   updateQueueCleanerConfig(config: QueueCleanerConfig): Observable<QueueCleanerConfig> {
-    config.cronExpression = this.convertJobScheduleToCron(config.jobSchedule!);
+    // Generate cron expression if using basic scheduling
+    if (!config.useAdvancedScheduling && config.jobSchedule) {
+      config.cronExpression = this.convertJobScheduleToCron(config.jobSchedule);
+    }
     return this.http.put<QueueCleanerConfig>(this.ApplicationPathService.buildApiUrl('/configuration/queue_cleaner'), config).pipe(
       catchError((error) => {
         console.error("Error updating queue cleaner config:", error);
@@ -113,32 +116,32 @@ export class ConfigurationService {
    */
   private tryExtractJobScheduleFromCron(cronExpression: string): JobSchedule | undefined {
     // Patterns we support:
-    // Seconds: */n * * ? * * *
-    // Minutes: 0 */n * ? * * *
-    // Hours: 0 0 */n ? * * *
+    // Seconds: */n * * ? * * * or 0/n * * ? * * * (Quartz.NET format)
+    // Minutes: 0 */n * ? * * * or 0 0/n * ? * * * (Quartz.NET format)
+    // Hours: 0 0 */n ? * * * or 0 0 0/n ? * * * (Quartz.NET format)
     try {
       const parts = cronExpression.split(" ");
 
       if (parts.length !== 7) return undefined;
 
-      // Every n seconds
-      if (parts[0].startsWith("*/") && parts[1] === "*") {
+      // Every n seconds - handle both */n and 0/n formats
+      if ((parts[0].startsWith("*/") || parts[0].startsWith("0/")) && parts[1] === "*") {
         const seconds = parseInt(parts[0].substring(2));
         if (!isNaN(seconds) && seconds > 0 && seconds < 60) {
           return { every: seconds, type: ScheduleUnit.Seconds };
         }
       }
 
-      // Every n minutes
-      if (parts[0] === "0" && parts[1].startsWith("*/")) {
+      // Every n minutes - handle both */n and 0/n formats
+      if (parts[0] === "0" && (parts[1].startsWith("*/") || parts[1].startsWith("0/"))) {
         const minutes = parseInt(parts[1].substring(2));
         if (!isNaN(minutes) && minutes > 0 && minutes < 60) {
           return { every: minutes, type: ScheduleUnit.Minutes };
         }
       }
 
-      // Every n hours
-      if (parts[0] === "0" && parts[1] === "0" && parts[2].startsWith("*/")) {
+      // Every n hours - handle both */n and 0/n formats
+      if (parts[0] === "0" && parts[1] === "0" && (parts[2].startsWith("*/") || parts[2].startsWith("0/"))) {
         const hours = parseInt(parts[2].substring(2));
         if (!isNaN(hours) && hours > 0 && hours < 24) {
           return { every: hours, type: ScheduleUnit.Hours };
@@ -156,31 +159,31 @@ export class ConfigurationService {
    */
   private convertJobScheduleToCron(schedule: JobSchedule): string {
     if (!schedule || schedule.every <= 0) {
-      return "0 0/5 * * * ?"; // Default: every 5 minutes
+      return "0 0/5 * * * ?"; // Default: every 5 minutes (Quartz.NET format)
     }
 
     switch (schedule.type) {
       case ScheduleUnit.Seconds:
         if (schedule.every < 60) {
-          return `*/${schedule.every} * * ? * * *`;
+          return `0/${schedule.every} * * ? * * *`; // Quartz.NET format
         }
         break;
 
       case ScheduleUnit.Minutes:
         if (schedule.every < 60) {
-          return `0 */${schedule.every} * ? * * *`;
+          return `0 0/${schedule.every} * ? * * *`; // Quartz.NET format
         }
         break;
 
       case ScheduleUnit.Hours:
         if (schedule.every < 24) {
-          return `0 0 */${schedule.every} ? * * *`;
+          return `0 0 0/${schedule.every} ? * * *`; // Quartz.NET format
         }
         break;
     }
 
     // Fallback to default
-    return "0 0/5 * * * ?";
+    return "0 0/5 * * * ?"; // Default: every 5 minutes (Quartz.NET format)
   }
 
   /**
@@ -189,32 +192,32 @@ export class ConfigurationService {
    */
   private tryExtractContentBlockerJobScheduleFromCron(cronExpression: string): ContentBlockerJobSchedule | undefined {
     // Patterns we support:
-    // Seconds: */n * * ? * * *
-    // Minutes: 0 */n * ? * * *
-    // Hours: 0 0 */n ? * * *
+    // Seconds: */n * * ? * * * or 0/n * * ? * * * (Quartz.NET format)
+    // Minutes: 0 */n * ? * * * or 0 0/n * ? * * * (Quartz.NET format)
+    // Hours: 0 0 */n ? * * * or 0 0 0/n ? * * * (Quartz.NET format)
     try {
       const parts = cronExpression.split(" ");
 
       if (parts.length !== 7) return undefined;
 
-      // Every n seconds
-      if (parts[0].startsWith("*/") && parts[1] === "*") {
+      // Every n seconds - handle both */n and 0/n formats
+      if ((parts[0].startsWith("*/") || parts[0].startsWith("0/")) && parts[1] === "*") {
         const seconds = parseInt(parts[0].substring(2));
         if (!isNaN(seconds) && seconds > 0 && seconds < 60) {
           return { every: seconds, type: ContentBlockerScheduleUnit.Seconds };
         }
       }
 
-      // Every n minutes
-      if (parts[0] === "0" && parts[1].startsWith("*/")) {
+      // Every n minutes - handle both */n and 0/n formats
+      if (parts[0] === "0" && (parts[1].startsWith("*/") || parts[1].startsWith("0/"))) {
         const minutes = parseInt(parts[1].substring(2));
         if (!isNaN(minutes) && minutes > 0 && minutes < 60) {
           return { every: minutes, type: ContentBlockerScheduleUnit.Minutes };
         }
       }
 
-      // Every n hours
-      if (parts[0] === "0" && parts[1] === "0" && parts[2].startsWith("*/")) {
+      // Every n hours - handle both */n and 0/n formats
+      if (parts[0] === "0" && parts[1] === "0" && (parts[2].startsWith("*/") || parts[2].startsWith("0/"))) {
         const hours = parseInt(parts[2].substring(2));
         if (!isNaN(hours) && hours > 0 && hours < 24) {
           return { every: hours, type: ContentBlockerScheduleUnit.Hours };
@@ -232,31 +235,31 @@ export class ConfigurationService {
    */
   private convertContentBlockerJobScheduleToCron(schedule: ContentBlockerJobSchedule): string {
     if (!schedule || schedule.every <= 0) {
-      return "0 0/5 * * * ?"; // Default: every 5 minutes
+      return "0/5 * * * * ?"; // Default: every 5 seconds (Quartz.NET format)
     }
 
     switch (schedule.type) {
       case ContentBlockerScheduleUnit.Seconds:
         if (schedule.every < 60) {
-          return `*/${schedule.every} * * ? * * *`;
+          return `0/${schedule.every} * * ? * * *`; // Quartz.NET format
         }
         break;
 
       case ContentBlockerScheduleUnit.Minutes:
         if (schedule.every < 60) {
-          return `0 */${schedule.every} * ? * * *`;
+          return `0 0/${schedule.every} * ? * * *`; // Quartz.NET format
         }
         break;
 
       case ContentBlockerScheduleUnit.Hours:
         if (schedule.every < 24) {
-          return `0 0 */${schedule.every} ? * * *`;
+          return `0 0 0/${schedule.every} ? * * *`; // Quartz.NET format
         }
         break;
     }
 
     // Fallback to default
-    return "0 0/5 * * * ?";
+    return "0/5 * * * * ?"; // Default: every 5 seconds (Quartz.NET format)
   }
 
   /**

code/frontend/src/app/dashboard/dashboard-page/dashboard-page.component.html

@@ -46,7 +46,7 @@
                     <p-tag [severity]="getLogSeverity(log.level)" [value]="log.level"></p-tag>
                     <span class="text-xs text-color-secondary" *ngIf="log.category">{{log.category}}</span>
                   </div>
-                  <span class="text-xs text-color-secondary">{{log.timestamp | date:'HH:mm:ss'}}</span>
+                  <span class="text-xs text-color-secondary">{{ log.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
                 </div>
                 <div class="timeline-message" 
                      [pTooltip]="log.message" 
@@ -112,7 +112,7 @@
                     <p-tag [severity]="getEventSeverity(event.severity)" [value]="event.severity"></p-tag>
                     <span class="text-xs text-color-secondary">{{formatEventType(event.eventType)}}</span>
                   </div>
-                  <span class="text-xs text-color-secondary">{{event.timestamp | date:'HH:mm:ss'}}</span>
+                  <span class="text-xs text-color-secondary">{{event.timestamp | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
                 </div>
                 <div class="timeline-message" 
                      [pTooltip]="event.message" 

code/frontend/src/app/settings/content-blocker/content-blocker-config.store.ts

@@ -122,22 +122,22 @@ export class ContentBlockerConfigStore extends signalStore(
      */
     generateCronExpression(schedule: JobSchedule): string {
       if (!schedule) {
-        return "0/5 * * * * ?"; // Default: every 5 seconds
+        return "0/5 * * * * ?"; // Default: every 5 seconds (Quartz.NET format)
       }
       
       // Cron format: Seconds Minutes Hours Day-of-month Month Day-of-week Year
       switch (schedule.type) {
         case ScheduleUnit.Seconds:
-          return `0/${schedule.every} * * ? * * *`; // Every n seconds
+          return `0/${schedule.every} * * ? * * *`; // Every n seconds (Quartz.NET format)
         
         case ScheduleUnit.Minutes:
-          return `0 0/${schedule.every} * ? * * *`; // Every n minutes
+          return `0 0/${schedule.every} * ? * * *`; // Every n minutes (Quartz.NET format)
         
         case ScheduleUnit.Hours:
-          return `0 0 0/${schedule.every} ? * * *`; // Every n hours
+          return `0 0 0/${schedule.every} ? * * *`; // Every n hours (Quartz.NET format)
         
         default:
-          return "0/5 * * * * ?"; // Default: every 5 seconds
+          return "0/5 * * * * ?"; // Default: every 5 seconds (Quartz.NET format)
       }
     }
   })),

code/frontend/src/app/settings/content-blocker/content-blocker-settings.component.html

@@ -101,7 +101,7 @@
           <div class="field-input">
             <input type="text" pInputText formControlName="cronExpression" placeholder="0 0/5 * ? * * *" />
           </div>
-          <small *ngIf="contentBlockerForm.get('cronExpression')?.hasError('required') && contentBlockerForm.get('cronExpression')?.touched" class="p-error">Cron expression is required</small>
+          <small *ngIf="hasError('cronExpression', 'required')" class="p-error">Cron expression is required</small>
           <small class="form-helper-text">Enter a valid Quartz cron expression (e.g., "0 0/5 * ? * * *" runs every 5 minutes)</small>
         </div>
       </div>

code/frontend/src/app/settings/content-blocker/content-blocker-settings.component.ts

@@ -127,7 +127,7 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
       cronExpression: [{ value: '', disabled: true }, [Validators.required]],
       jobSchedule: this.formBuilder.group({
         every: [{ value: 5, disabled: true }, [Validators.required, Validators.min(1)]],
-        type: [{ value: ScheduleUnit.Minutes, disabled: true }],
+        type: [{ value: ScheduleUnit.Seconds, disabled: true }],
       }),
 
       ignorePrivate: [{ value: false, disabled: true }],
@@ -167,7 +167,7 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
           cronExpression: config.cronExpression,
           jobSchedule: config.jobSchedule || {
             every: 5,
-            type: ScheduleUnit.Minutes
+            type: ScheduleUnit.Seconds
           },
           ignorePrivate: config.ignorePrivate,
           deletePrivate: config.deletePrivate,
@@ -569,6 +569,11 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
         blocklistPath: "",
         blocklistType: BlocklistType.Blacklist,
       },
+      readarr: {
+        enabled: false,
+        blocklistPath: "",
+        blocklistType: BlocklistType.Blacklist,
+      },
     });
 
     // Manually update control states after reset
@@ -576,6 +581,7 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
     this.updateBlocklistDependentControls('sonarr', false);
     this.updateBlocklistDependentControls('radarr', false);
     this.updateBlocklistDependentControls('lidarr', false);
+    this.updateBlocklistDependentControls('readarr', false);
     
     // Mark form as dirty so the save button is enabled after reset
     this.contentBlockerForm.markAsDirty();
@@ -599,7 +605,7 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
    */
   hasError(controlName: string, errorName: string): boolean {
     const control = this.contentBlockerForm.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
   
   /**
@@ -614,7 +620,7 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
     } else if (scheduleType === ScheduleUnit.Hours) {
       return this.scheduleValueOptions[ScheduleUnit.Hours];
     }
-    return this.scheduleValueOptions[ScheduleUnit.Minutes]; // Default to minutes
+    return this.scheduleValueOptions[ScheduleUnit.Seconds]; // Default to seconds
   }
 
   /**
@@ -627,7 +633,7 @@ export class ContentBlockerSettingsComponent implements OnDestroy, CanComponentD
     }
 
     const control = parentControl.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
   
 

code/frontend/src/app/settings/download-cleaner/download-cleaner-settings.component.html

@@ -101,7 +101,7 @@
           <div class="field-input">
             <input type="text" pInputText formControlName="cronExpression" placeholder="0 0/5 * ? * * *" />
           </div>
-          <small *ngIf="downloadCleanerForm.get('cronExpression')?.hasError('required') && downloadCleanerForm.get('cronExpression')?.touched" class="p-error">Cron expression is required</small>
+          <small *ngIf="hasError('cronExpression', 'required')" class="p-error">Cron expression is required</small>
           <small class="form-helper-text">Enter a valid Quartz cron expression (e.g., "0 0/5 * ? * * *" runs every 5 minutes)</small>
         </div>
       </div>
@@ -317,6 +317,13 @@
               </label>
               <div>
                 <div class="field-input">
+                  <!-- Mobile-friendly autocomplete -->
+                  <app-mobile-autocomplete
+                    formControlName="unlinkedCategories"
+                    placeholder="Add category"
+                  ></app-mobile-autocomplete>
+                  
+                  <!-- Desktop autocomplete -->
                   <p-autocomplete
                     formControlName="unlinkedCategories"
                     multiple
@@ -325,6 +332,7 @@
                     [suggestions]="unlinkedCategoriesSuggestions"
                     (completeMethod)="onUnlinkedCategoriesComplete($event)"
                     placeholder="Add category and press Enter"
+                    class="desktop-only"
                   >
                   </p-autocomplete>
                 </div>

code/frontend/src/app/settings/download-cleaner/download-cleaner-settings.component.ts

@@ -11,6 +11,7 @@ import {
   createDefaultCategory
 } from "../../shared/models/download-cleaner-config.model";
 import { ScheduleUnit, ScheduleOptions } from "../../shared/models/queue-cleaner-config.model";
+import { MobileAutocompleteComponent } from "../../shared/components/mobile-autocomplete/mobile-autocomplete.component";
 
 // PrimeNG Components
 import { CardModule } from "primeng/card";
@@ -54,7 +55,8 @@ import { DocumentationService } from "../../core/services/documentation.service"
     TableModule,
     LoadingErrorStateComponent,
     ConfirmDialogModule,
-    NgIf
+    NgIf,
+    MobileAutocompleteComponent,
   ],
   providers: [ConfirmationService],
   templateUrl: "./download-cleaner-settings.component.html",
@@ -360,21 +362,27 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
         .pipe(takeUntil(this.destroy$))
         .subscribe(useAdvanced => {
           const enabled = this.downloadCleanerForm.get('enabled')?.value || false;
-          if (enabled) {
-            const cronExpressionControl = this.downloadCleanerForm.get('cronExpression');
-            const jobScheduleGroup = this.downloadCleanerForm.get('jobSchedule') as FormGroup;
-            const everyControl = jobScheduleGroup?.get('every');
-            const typeControl = jobScheduleGroup?.get('type');
-            
-            if (useAdvanced) {
-              if (cronExpressionControl) cronExpressionControl.enable();
-              if (everyControl) everyControl.disable();
-              if (typeControl) typeControl.disable();
-            } else {
-              if (cronExpressionControl) cronExpressionControl.disable();
-              if (everyControl) everyControl.enable();
-              if (typeControl) typeControl.enable();
-            }
+          const cronExpressionControl = this.downloadCleanerForm.get('cronExpression');
+          const jobScheduleGroup = this.downloadCleanerForm.get('jobSchedule') as FormGroup;
+          const everyControl = jobScheduleGroup?.get('every');
+          const typeControl = jobScheduleGroup?.get('type');
+          
+          // Update scheduling controls based on mode, regardless of enabled state
+          if (useAdvanced) {
+            if (cronExpressionControl) cronExpressionControl.enable();
+            if (everyControl) everyControl.disable();
+            if (typeControl) typeControl.disable();
+          } else {
+            if (cronExpressionControl) cronExpressionControl.disable();
+            if (everyControl) everyControl.enable();
+            if (typeControl) typeControl.enable();
+          }
+          
+          // Then respect the main enabled state - if disabled, disable all scheduling controls
+          if (!enabled) {
+            cronExpressionControl?.disable();
+            everyControl?.disable();
+            typeControl?.disable();
           }
         });
     }
@@ -461,19 +469,14 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
    * Update form control disabled states based on the configuration
    */
   private updateFormControlDisabledStates(config: DownloadCleanerConfig): void {
-    // Update main controls based on enabled state
+    // Update main form controls based on the 'enabled' state
     this.updateMainControlsState(config.enabled);
     
-    // Update schedule controls based on advanced scheduling
-    const cronControl = this.downloadCleanerForm.get('cronExpression');
-    const jobScheduleControl = this.downloadCleanerForm.get('jobSchedule');
-
-    if (config.useAdvancedScheduling) {
-      jobScheduleControl?.disable({ emitEvent: false });
-      cronControl?.enable({ emitEvent: false });
-    } else {
-      cronControl?.disable({ emitEvent: false });
-      jobScheduleControl?.enable({ emitEvent: false });
+    // Update other dependent controls only if the main feature is enabled
+    if (config.enabled) {
+      // Update unlinked controls based on current unlinkedEnabled value
+      const unlinkedEnabled = config.unlinkedEnabled || false;
+      this.updateUnlinkedControlsState(unlinkedEnabled);
     }
   }
   
@@ -550,14 +553,17 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
       // Get form values including disabled controls
       const formValues = this.downloadCleanerForm.getRawValue();
 
+      // Determine the correct cron expression to use
+      const cronExpression: string = formValues.useAdvancedScheduling ?
+        formValues.cronExpression :
+        // If in basic mode, generate cron expression from the schedule
+        this.downloadCleanerStore.generateCronExpression(formValues.jobSchedule);
+
       // Create config object from form values
       const config: DownloadCleanerConfig = {
         enabled: formValues.enabled,
         useAdvancedScheduling: formValues.useAdvancedScheduling,
-        cronExpression: formValues.useAdvancedScheduling ? 
-          formValues.cronExpression : 
-          // If in basic mode, generate cron expression from the schedule
-          this.downloadCleanerStore.generateCronExpression(formValues.jobSchedule),
+        cronExpression: cronExpression,
         jobSchedule: formValues.jobSchedule,
         categories: formValues.categories,
         deletePrivate: formValues.deletePrivate,
@@ -654,14 +660,14 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
    */
   hasError(controlName: string, errorName: string): boolean {
     const control = this.downloadCleanerForm.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
   
   /**
    * Check if the form has the unlinked categories validation error
    */
   hasUnlinkedCategoriesError(): boolean {
-    return this.downloadCleanerForm.touched && this.downloadCleanerForm.hasError('unlinkedCategoriesRequired');
+    return this.downloadCleanerForm.dirty && this.downloadCleanerForm.hasError('unlinkedCategoriesRequired');
   }
   
   /**
@@ -689,7 +695,7 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
     }
 
     const control = parentControl.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**
@@ -700,7 +706,7 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
     if (!categoryGroup) return false;
     
     const control = categoryGroup.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**
@@ -709,7 +715,7 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
   hasCategoryControlError(categoryIndex: number, controlName: string, errorName: string): boolean {
     const categoryGroup = this.categoriesFormArray.at(categoryIndex);
     const control = categoryGroup.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
   
   /**
@@ -717,7 +723,7 @@ export class DownloadCleanerSettingsComponent implements OnDestroy, CanComponent
    */
   hasCategoryGroupError(categoryIndex: number, errorName: string): boolean {
     const categoryGroup = this.categoriesFormArray.at(categoryIndex);
-    return categoryGroup ? categoryGroup.touched && categoryGroup.hasError(errorName) : false;
+    return categoryGroup ? categoryGroup.dirty && categoryGroup.hasError(errorName) : false;
   }
 
   /**

code/frontend/src/app/settings/download-client/download-client-settings.component.ts

@@ -156,7 +156,7 @@ export class DownloadClientSettingsComponent implements OnDestroy, CanComponentD
    */
   hasError(form: FormGroup, controlName: string, errorName: string): boolean {
     const control = form.get(controlName);
-    return control !== null && control.hasError(errorName) && control.touched;
+    return control !== null && control.hasError(errorName) && control.dirty;
   }
 
   /**

code/frontend/src/app/settings/general-settings/general-settings.component.html

@@ -27,7 +27,7 @@
           <label class="field-label">
             <i class="pi pi-info-circle field-info-icon" 
                (click)="openFieldDocs('displaySupportBanner')"
-               title="View documentation for support banner display">
+               title="Click for documentation">
             </i>
             Display Support Banner
           </label>
@@ -42,7 +42,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('dryRun')"
-             title="View documentation for dry run mode">
+             title="Click for documentation">
           </i>
           Dry Run
         </label>
@@ -57,7 +57,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('httpMaxRetries')"
-             title="View documentation for HTTP retry configuration">
+             title="Click for documentation">
           </i>
           Maximum HTTP Retries
         </label>
@@ -81,7 +81,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('httpTimeout')"
-             title="View documentation for HTTP timeout configuration">
+             title="Click for documentation">
           </i>
           HTTP Timeout (seconds)
         </label>
@@ -105,7 +105,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('httpCertificateValidation')"
-             title="View documentation for certificate validation options">
+             title="Click for documentation">
           </i>
           Certificate Validation
         </label>
@@ -126,7 +126,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('searchEnabled')"
-             title="View documentation for automatic search functionality">
+             title="Click for documentation">
           </i>
           Enable Search
         </label>
@@ -140,7 +140,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('searchDelay')"
-             title="View documentation for search delay configuration">
+             title="Click for documentation">
           </i>
           Search Delay (seconds)
         </label>
@@ -165,7 +165,7 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('logLevel')"
-             title="View documentation for log level configuration">
+             title="Click for documentation">
           </i>
           Log Level
         </label>
@@ -186,11 +186,18 @@
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
              (click)="openFieldDocs('ignoredDownloads')"
-             title="View documentation for download ignore patterns">
+             title="Click for documentation">
           </i>
           Ignored Downloads
         </label>
         <div class="field-input">
+          <!-- Mobile-friendly autocomplete -->
+          <app-mobile-autocomplete
+            formControlName="ignoredDownloads"
+            placeholder="Add download pattern"
+          ></app-mobile-autocomplete>
+          
+          <!-- Desktop autocomplete -->
           <p-autocomplete
             formControlName="ignoredDownloads"
             inputId="ignoredDownloads"
@@ -198,6 +205,7 @@
             fluid
             [typeahead]="false"
             placeholder="Add download pattern and press enter"
+            class="desktop-only"
           ></p-autocomplete>
           <small class="form-helper-text">Downloads matching these patterns will be ignored (e.g. hash, tag, category, label, tracker)</small>
         </div>

code/frontend/src/app/settings/general-settings/general-settings.component.ts

@@ -19,10 +19,12 @@ import { NotificationService } from '../../core/services/notification.service';
 import { DocumentationService } from '../../core/services/documentation.service';
 import { SelectModule } from "primeng/select";
 import { ChipsModule } from "primeng/chips";
+import { ChipModule } from "primeng/chip";
 import { AutoCompleteModule } from "primeng/autocomplete";
 import { LoadingErrorStateComponent } from "../../shared/components/loading-error-state/loading-error-state.component";
 import { ConfirmDialogModule } from "primeng/confirmdialog";
 import { ConfirmationService } from "primeng/api";
+import { MobileAutocompleteComponent } from "../../shared/components/mobile-autocomplete/mobile-autocomplete.component";
 
 @Component({
   selector: "app-general-settings",
@@ -36,11 +38,13 @@ import { ConfirmationService } from "primeng/api";
     ButtonModule,
     InputNumberModule,
     ChipsModule,
+    ChipModule,
     ToastModule,
     SelectModule,
     AutoCompleteModule,
     LoadingErrorStateComponent,
     ConfirmDialogModule,
+    MobileAutocompleteComponent,
   ],
   providers: [GeneralConfigStore, ConfirmationService],
   templateUrl: "./general-settings.component.html",
@@ -351,7 +355,7 @@ export class GeneralSettingsComponent implements OnDestroy, CanComponentDeactiva
    */
   hasError(controlName: string, errorName: string): boolean {
     const control = this.generalForm.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**

code/frontend/src/app/settings/lidarr/lidarr-settings.component.html

@@ -42,6 +42,9 @@
                 decrementButtonIcon="pi pi-minus"
               ></p-inputNumber>
             </div>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'required')" class="p-error">This field is required</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'min')" class="p-error">Value cannot be less than -1</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
             <small class="form-helper-text">Maximum number of strikes before removing a failed import (-1 to use global setting; 0 to disable)</small>
           </div>
         </div>

code/frontend/src/app/settings/lidarr/lidarr-settings.component.ts

@@ -82,7 +82,7 @@ export class LidarrSettingsComponent implements OnDestroy, CanComponentDeactivat
   constructor() {
     // Initialize forms
     this.globalForm = this.formBuilder.group({
-      failedImportMaxStrikes: [-1],
+      failedImportMaxStrikes: [-1, [Validators.required, Validators.min(-1), Validators.max(5000)]],
     });
 
     this.instanceForm = this.formBuilder.group({
@@ -211,11 +211,31 @@ export class LidarrSettingsComponent implements OnDestroy, CanComponentDeactivat
   }
 
   /**
-   * Check if a form control has an error
+   * Check if a form control has an error after it's been touched
    */
-  hasError(form: FormGroup, controlName: string, errorName: string): boolean {
-    const control = form.get(controlName);
-    return control !== null && control.hasError(errorName) && control.touched;
+  hasError(formOrControlName: FormGroup | string, controlNameOrErrorName: string, errorName?: string): boolean {
+    if (formOrControlName instanceof FormGroup) {
+      // For instance form
+      const control = formOrControlName.get(controlNameOrErrorName);
+      return control !== null && control.hasError(errorName!) && control.dirty;
+    } else {
+      // For global form
+      const control = this.globalForm.get(formOrControlName);
+      return control ? control.dirty && control.hasError(controlNameOrErrorName) : false;
+    }
+  }
+
+  /**
+   * Get nested form control errors
+   */
+  hasNestedError(parentName: string, controlName: string, errorName: string): boolean {
+    const parentControl = this.globalForm.get(parentName);
+    if (!parentControl || !(parentControl instanceof FormGroup)) {
+      return false;
+    }
+
+    const control = parentControl.get(controlName);
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**
@@ -406,8 +426,6 @@ export class LidarrSettingsComponent implements OnDestroy, CanComponentDeactivat
     });
   }
 
-
-
   /**
    * Get modal title based on mode
    */

code/frontend/src/app/settings/notification-settings/notification-settings.component.html

@@ -35,7 +35,7 @@
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('notifiarr.apiKey')"
-                   title="View documentation for Notifiarr API key setup">
+                   title="Click for documentation">
                 </i>
                 API Key
               </label>
@@ -50,12 +50,12 @@
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('notifiarr.channelId')"
-                   title="View documentation for Discord channel ID setup">
+                   title="Click for documentation">
                 </i>
                 Channel ID
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('notifiarr.channelId')"
-                   title="View documentation for Discord channel ID setup">
+                   title="Click for documentation">
                 </i>
               </label>
               <div class="field-input">
@@ -69,7 +69,7 @@
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('eventTriggers')"
-                   title="View documentation for notification event types">
+                   title="Click for documentation">
                 </i>
                 Event Triggers
               </label>
@@ -115,7 +115,7 @@
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('apprise.url')"
-                   title="View documentation for Apprise server URL setup">
+                   title="Click for documentation">
                 </i>
                 URL
               </label>
@@ -130,7 +130,7 @@
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('apprise.key')"
-                   title="View documentation for Apprise configuration key">
+                   title="Click for documentation">
                 </i>
                 Key
               </label>
@@ -145,7 +145,7 @@
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
                    (click)="openFieldDocs('eventTriggers')"
-                   title="View documentation for notification event types">
+                   title="Click for documentation">
                 </i>
                 Event Triggers
               </label>

code/frontend/src/app/settings/notification-settings/notification-settings.component.ts

@@ -311,7 +311,7 @@ export class NotificationSettingsComponent implements OnDestroy, CanComponentDea
    */
   hasError(controlName: string, errorName: string): boolean {
     const control = this.notificationForm.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**
@@ -319,7 +319,7 @@ export class NotificationSettingsComponent implements OnDestroy, CanComponentDea
    */
   hasNestedError(groupName: string, controlName: string, errorName: string): boolean {
     const control = this.notificationForm.get(`${groupName}.${controlName}`);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**

code/frontend/src/app/settings/queue-cleaner/queue-cleaner-settings.component.html

@@ -26,9 +26,8 @@
       <div class="field-row">
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
-             (click)="openFieldDocs('enabled')"
-             title="View documentation for this setting">
-          </i>
+             (click)="openFieldDocs('enabled')" 
+             title="Click for documentation"></i>
           Enable Queue Cleaner
         </label>
         <div class="field-input">
@@ -41,9 +40,8 @@
       <div class="field-row">
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
-             (click)="openFieldDocs('useAdvancedScheduling')"
-             title="View documentation for scheduling modes">
-          </i>
+             (click)="openFieldDocs('useAdvancedScheduling')" 
+             title="Click for documentation"></i>
           Scheduling Mode
         </label>
         <div class="field-input">
@@ -95,16 +93,15 @@
       <div class="field-row" *ngIf="queueCleanerForm.get('useAdvancedScheduling')?.value">
         <label class="field-label">
           <i class="pi pi-info-circle field-info-icon" 
-             (click)="openFieldDocs('cronExpression')"
-             title="View cron expression documentation and examples">
-          </i>
+             (click)="openFieldDocs('cronExpression')" 
+             title="Click for documentation"></i>
           Cron Expression
         </label>
         <div>
           <div class="field-input">
             <input type="text" pInputText formControlName="cronExpression" placeholder="0 0/5 * ? * * *" />
           </div>
-          <small *ngIf="queueCleanerForm.get('cronExpression')?.hasError('required') && queueCleanerForm.get('cronExpression')?.touched" class="p-error">Cron expression is required</small>
+          <small *ngIf="hasError('cronExpression', 'required')" class="p-error">Cron expression is required</small>
           <small class="form-helper-text">Enter a valid Quartz cron expression (e.g., "0 0/5 * ? * * *" runs every 5 minutes)</small>
         </div>
       </div>
@@ -127,20 +124,22 @@
             <div class="field-row" formGroupName="failedImport">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('failedImport.maxStrikes')"
-                   title="View documentation for failed import strike system">
-                </i>
+                   (click)="openFieldDocs('failedImport.maxStrikes')" 
+                   title="Click for documentation"></i>
                 Max Strikes
               </label>
-              <div class="field-input">
-                <p-inputNumber
-                  formControlName="maxStrikes"
-                  [showButtons]="true"
-                  [min]="0"
-                  [max]="10"
-                  buttonLayout="horizontal"
-                >
-                </p-inputNumber>
+              <div>
+                <div class="field-input">
+                  <p-inputNumber
+                    formControlName="maxStrikes"
+                    [showButtons]="true"
+                    [min]="0"
+                    buttonLayout="horizontal"
+                  >
+                  </p-inputNumber>
+                </div>
+                <small *ngIf="hasNestedError('failedImport', 'maxStrikes', 'required')" class="p-error">This field is required</small>
+                <small *ngIf="hasNestedError('failedImport', 'maxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
                 <small class="form-helper-text"
                   >Number of strikes before action is taken (0 to disable, min 3 to enable)</small
                 >
@@ -150,9 +149,8 @@
             <div class="field-row" formGroupName="failedImport">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('failedImport.ignorePrivate')"
-                   title="View documentation for private torrent handling">
-                </i>
+                   (click)="openFieldDocs('failedImport.ignorePrivate')" 
+                   title="Click for documentation"></i>
                 Ignore Private
               </label>
               <div class="field-input">
@@ -164,9 +162,8 @@
             <div class="field-row" formGroupName="failedImport">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('failedImport.deletePrivate')"
-                   title="View documentation for private torrent deletion">
-                </i>
+                   (click)="openFieldDocs('failedImport.deletePrivate')" 
+                   title="Click for documentation"></i>
                 Delete Private
               </label>
               <div class="field-input">
@@ -178,18 +175,25 @@
             <div class="field-row" formGroupName="failedImport">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('failedImport.ignoredPatterns')"
-                   title="View documentation for pattern matching and examples">
-                </i>
+                   (click)="openFieldDocs('failedImport.ignoredPatterns')" 
+                   title="Click for documentation"></i>
                 Ignored Patterns
               </label>
               <div class="field-input">
+                <!-- Mobile-friendly autocomplete -->
+                <app-mobile-autocomplete
+                  formControlName="ignoredPatterns"
+                  placeholder="Add pattern"
+                ></app-mobile-autocomplete>
+                
+                <!-- Desktop autocomplete -->
                 <p-autocomplete
                   formControlName="ignoredPatterns"
                   multiple
                   fluid
                   [typeahead]="false"
                   placeholder="Add pattern and press Enter"
+                  class="desktop-only"
                 >
                 </p-autocomplete>
                 <small class="form-helper-text"
@@ -216,9 +220,8 @@
             <div class="field-row" formGroupName="stalled">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('stalled.maxStrikes')"
-                   title="View documentation for stalled download strike system">
-                </i>
+                   (click)="openFieldDocs('stalled.maxStrikes')" 
+                   title="Click for documentation"></i>
                 Max Strikes
               </label>
               <div>
@@ -232,7 +235,7 @@
                   </p-inputNumber>
                 </div>
                 <small *ngIf="hasNestedError('stalled', 'maxStrikes', 'required')" class="p-error">This field is required</small>
-                <small *ngIf="hasNestedError('stalled', 'maxStrikes', 'max')" class="p-error">Value cannot exceed 100</small>
+                <small *ngIf="hasNestedError('stalled', 'maxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
                 <small class="form-helper-text"
                   >Number of strikes before action is taken (0 to disable, min 3 to enable)</small
                 >
@@ -242,9 +245,8 @@
             <div class="field-row" formGroupName="stalled">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('stalled.resetStrikesOnProgress')"
-                   title="View documentation for strike reset behavior">
-                </i>
+                   (click)="openFieldDocs('stalled.resetStrikesOnProgress')" 
+                   title="Click for documentation"></i>
                 Reset Strikes On Progress
               </label>
               <div class="field-input">
@@ -256,9 +258,8 @@
             <div class="field-row" formGroupName="stalled">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('stalled.ignorePrivate')"
-                   title="View documentation for private torrent handling">
-                </i>
+                   (click)="openFieldDocs('stalled.ignorePrivate')" 
+                   title="Click for documentation"></i>
                 Ignore Private
               </label>
               <div class="field-input">
@@ -270,9 +271,8 @@
             <div class="field-row" formGroupName="stalled">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('stalled.deletePrivate')"
-                   title="View documentation for private torrent deletion">
-                </i>
+                   (click)="openFieldDocs('stalled.deletePrivate')" 
+                   title="Click for documentation"></i>
                 Delete Private
               </label>
               <div class="field-input">
@@ -299,9 +299,8 @@
             <div class="field-row" formGroupName="stalled">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('stalled.downloadingMetadataMaxStrikes')"
-                   title="View documentation for metadata download handling">
-                </i>
+                   (click)="openFieldDocs('stalled.downloadingMetadataMaxStrikes')" 
+                   title="Click for documentation"></i>
                 Max Strikes for Downloading Metadata
               </label>
               <div>
@@ -315,7 +314,7 @@
                   </p-inputNumber>
                 </div>
                 <small *ngIf="hasNestedError('stalled', 'downloadingMetadataMaxStrikes', 'required')" class="p-error">This field is required</small>
-                <small *ngIf="hasNestedError('stalled', 'downloadingMetadataMaxStrikes', 'max')" class="p-error">Value cannot exceed 100</small>
+                <small *ngIf="hasNestedError('stalled', 'downloadingMetadataMaxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
                 <small class="form-helper-text"
                   >Number of strikes before action is taken (0 to disable, min 3 to enable)</small
                 >
@@ -340,9 +339,8 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.maxStrikes')"
-                   title="View documentation for slow download strike system">
-                </i>
+                   (click)="openFieldDocs('slow.maxStrikes')" 
+                   title="Click for documentation"></i>
                 Max Strikes
               </label>
               <div>
@@ -356,7 +354,7 @@
                   </p-inputNumber>
                 </div>
                 <small *ngIf="hasNestedError('slow', 'maxStrikes', 'required')" class="p-error">This field is required</small>
-                <small *ngIf="hasNestedError('slow', 'maxStrikes', 'max')" class="p-error">Value cannot exceed 100</small>
+                <small *ngIf="hasNestedError('slow', 'maxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
                 <small class="form-helper-text"
                   >Number of strikes before action is taken (0 to disable, min 3 to enable)</small
                 >
@@ -366,9 +364,8 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.resetStrikesOnProgress')"
-                   title="View documentation for strike reset behavior">
-                </i>
+                   (click)="openFieldDocs('slow.resetStrikesOnProgress')" 
+                   title="Click for documentation"></i>
                 Reset Strikes On Progress
               </label>
               <div class="field-input">
@@ -380,9 +377,8 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.ignorePrivate')"
-                   title="View documentation for private torrent handling">
-                </i>
+                   (click)="openFieldDocs('slow.ignorePrivate')" 
+                   title="Click for documentation"></i>
                 Ignore Private
               </label>
               <div class="field-input">
@@ -394,9 +390,8 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.deletePrivate')"
-                   title="View documentation for private torrent deletion">
-                </i>
+                   (click)="openFieldDocs('slow.deletePrivate')" 
+                   title="Click for documentation"></i>
                 Delete Private
               </label>
               <div class="field-input">
@@ -408,9 +403,8 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.minSpeed')"
-                   title="View speed threshold guidelines and recommendations">
-                </i>
+                   (click)="openFieldDocs('slow.minSpeed')" 
+                   title="Click for documentation"></i>
                 Minimum Speed
               </label>
               <div class="field-input">
@@ -427,21 +421,22 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.maxTime')"
-                   title="View documentation for maximum slow download time">
-                </i>
+                   (click)="openFieldDocs('slow.maxTime')" 
+                   title="Click for documentation"></i>
                 Maximum Time (hours)
               </label>
-              <div class="field-input">
-                <p-inputNumber
-                  formControlName="maxTime"
-                  [showButtons]="true"
-                  [min]="0"
-                  buttonLayout="horizontal"
-                >
-                </p-inputNumber>
+              <div>
+                <div class="field-input">
+                  <p-inputNumber
+                    formControlName="maxTime"
+                    [showButtons]="true"
+                    [min]="0"
+                    buttonLayout="horizontal"
+                  >
+                  </p-inputNumber>
+                </div>
                 <small *ngIf="hasNestedError('slow', 'maxTime', 'required')" class="p-error">This field is required</small>
-                <small *ngIf="hasNestedError('slow', 'maxTime', 'max')" class="p-error">Value cannot exceed 168</small>
+                <small *ngIf="hasNestedError('slow', 'maxTime', 'max')" class="p-error">Value cannot exceed 1000</small>
                 <small class="form-helper-text">Maximum time allowed for slow downloads (0 means disabled)</small>
               </div>
             </div>
@@ -449,9 +444,8 @@
             <div class="field-row" formGroupName="slow">
               <label class="field-label">
                 <i class="pi pi-info-circle field-info-icon" 
-                   (click)="openFieldDocs('slow.ignoreAboveSize')"
-                   title="View size exemption strategy and recommended thresholds">
-                </i>
+                   (click)="openFieldDocs('slow.ignoreAboveSize')" 
+                   title="Click for documentation"></i>
                 Ignore Above Size
               </label>
               <div class="field-input">

code/frontend/src/app/settings/queue-cleaner/queue-cleaner-settings.component.ts

@@ -14,6 +14,7 @@ import {
 } from "../../shared/models/queue-cleaner-config.model";
 import { SettingsCardComponent } from "../components/settings-card/settings-card.component";
 import { ByteSizeInputComponent } from "../../shared/components/byte-size-input/byte-size-input.component";
+import { MobileAutocompleteComponent } from "../../shared/components/mobile-autocomplete/mobile-autocomplete.component";
 
 // PrimeNG Components
 import { CardModule } from "primeng/card";
@@ -54,6 +55,7 @@ import { ErrorHandlerUtil } from "../../core/utils/error-handler.util";
     AutoCompleteModule,
     DropdownModule,
     LoadingErrorStateComponent,
+    MobileAutocompleteComponent,
   ],
   providers: [QueueCleanerConfigStore],
   templateUrl: "./queue-cleaner-settings.component.html",
@@ -140,7 +142,7 @@ export class QueueCleanerSettingsComponent implements OnDestroy, CanComponentDea
 
       // Failed Import settings - nested group
       failedImport: this.formBuilder.group({
-        maxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(100)]],
+        maxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(5000)]],
         ignorePrivate: [{ value: false, disabled: true }],
         deletePrivate: [{ value: false, disabled: true }],
         ignoredPatterns: [{ value: [], disabled: true }],
@@ -148,21 +150,21 @@ export class QueueCleanerSettingsComponent implements OnDestroy, CanComponentDea
 
       // Stalled settings - nested group
       stalled: this.formBuilder.group({
-        maxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(100)]],
+        maxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(5000)]],
         resetStrikesOnProgress: [{ value: false, disabled: true }],
         ignorePrivate: [{ value: false, disabled: true }],
         deletePrivate: [{ value: false, disabled: true }],
-        downloadingMetadataMaxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(100)]],
+        downloadingMetadataMaxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(5000)]],
       }),
 
       // Slow Download settings - nested group
       slow: this.formBuilder.group({
-        maxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(100)]],
+        maxStrikes: [0, [Validators.required, Validators.min(0), Validators.max(5000)]],
         resetStrikesOnProgress: [{ value: false, disabled: true }],
         ignorePrivate: [{ value: false, disabled: true }],
         deletePrivate: [{ value: false, disabled: true }],
         minSpeed: [{ value: "", disabled: true }],
-        maxTime: [{ value: 0, disabled: true }, [Validators.required, Validators.min(0), Validators.max(168)]],
+        maxTime: [{ value: 0, disabled: true }, [Validators.required, Validators.min(0), Validators.max(1000)]],
         ignoreAboveSize: [{ value: "", disabled: true }],
       }),
 
@@ -260,21 +262,27 @@ export class QueueCleanerSettingsComponent implements OnDestroy, CanComponentDea
       advancedControl.valueChanges.pipe(takeUntil(this.destroy$))
         .subscribe((useAdvanced: boolean) => {
           const enabled = this.queueCleanerForm.get('enabled')?.value || false;
-          if (enabled) {
-            const cronExpressionControl = this.queueCleanerForm.get('cronExpression');
-            const jobScheduleGroup = this.queueCleanerForm.get('jobSchedule') as FormGroup;
-            const everyControl = jobScheduleGroup?.get('every');
-            const typeControl = jobScheduleGroup?.get('type');
-            
-            if (useAdvanced) {
-              if (cronExpressionControl) cronExpressionControl.enable();
-              if (everyControl) everyControl.disable();
-              if (typeControl) typeControl.disable();
-            } else {
-              if (cronExpressionControl) cronExpressionControl.disable();
-              if (everyControl) everyControl.enable();
-              if (typeControl) typeControl.enable();
-            }
+          const cronExpressionControl = this.queueCleanerForm.get('cronExpression');
+          const jobScheduleGroup = this.queueCleanerForm.get('jobSchedule') as FormGroup;
+          const everyControl = jobScheduleGroup?.get('every');
+          const typeControl = jobScheduleGroup?.get('type');
+          
+          // Update scheduling controls based on mode, regardless of enabled state
+          if (useAdvanced) {
+            if (cronExpressionControl) cronExpressionControl.enable();
+            if (everyControl) everyControl.disable();
+            if (typeControl) typeControl.disable();
+          } else {
+            if (cronExpressionControl) cronExpressionControl.disable();
+            if (everyControl) everyControl.enable();
+            if (typeControl) typeControl.enable();
+          }
+          
+          // Then respect the main enabled state - if disabled, disable all scheduling controls
+          if (!enabled) {
+            cronExpressionControl?.disable();
+            everyControl?.disable();
+            typeControl?.disable();
           }
         });
     }
@@ -519,14 +527,17 @@ export class QueueCleanerSettingsComponent implements OnDestroy, CanComponentDea
       // Make a copy of the form values
       const formValue = this.queueCleanerForm.getRawValue();
       
+      // Determine the correct cron expression to use
+      const cronExpression: string = formValue.useAdvancedScheduling ? 
+        formValue.cronExpression : 
+        // If in basic mode, generate cron expression from the schedule
+        this.queueCleanerStore.generateCronExpression(formValue.jobSchedule);
+      
       // Create the config object to be saved
       const queueCleanerConfig: QueueCleanerConfig = {
         enabled: formValue.enabled,
         useAdvancedScheduling: formValue.useAdvancedScheduling,
-        cronExpression: formValue.useAdvancedScheduling ? 
-          formValue.cronExpression : 
-          // If in basic mode, generate cron expression from the schedule
-          this.queueCleanerStore.generateCronExpression(formValue.jobSchedule),
+        cronExpression: cronExpression,
         jobSchedule: formValue.jobSchedule,
         failedImport: {
           maxStrikes: formValue.failedImport?.maxStrikes || 0,
@@ -664,7 +675,7 @@ export class QueueCleanerSettingsComponent implements OnDestroy, CanComponentDea
    */
   hasError(controlName: string, errorName: string): boolean {
     const control = this.queueCleanerForm.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
   
   /**
@@ -692,7 +703,7 @@ export class QueueCleanerSettingsComponent implements OnDestroy, CanComponentDea
     }
 
     const control = parentControl.get(controlName);
-    return control ? control.touched && control.hasError(errorName) : false;
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
   
 

code/frontend/src/app/settings/radarr/radarr-settings.component.html

@@ -42,6 +42,9 @@
                 decrementButtonIcon="pi pi-minus"
               ></p-inputNumber>
             </div>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'required')" class="p-error">This field is required</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'min')" class="p-error">Value cannot be less than -1</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
             <small class="form-helper-text">Maximum number of strikes before removing a failed import (-1 to use global setting; 0 to disable)</small>
           </div>
         </div>

code/frontend/src/app/settings/radarr/radarr-settings.component.ts

@@ -82,7 +82,7 @@ export class RadarrSettingsComponent implements OnDestroy, CanComponentDeactivat
   constructor() {
     // Initialize forms
     this.globalForm = this.formBuilder.group({
-      failedImportMaxStrikes: [-1],
+      failedImportMaxStrikes: [-1, [Validators.required, Validators.min(-1), Validators.max(5000)]],
     });
 
     this.instanceForm = this.formBuilder.group({
@@ -211,11 +211,31 @@ export class RadarrSettingsComponent implements OnDestroy, CanComponentDeactivat
   }
 
   /**
-   * Check if a form control has an error
+   * Check if a form control has an error after it's been touched
    */
-  hasError(form: FormGroup, controlName: string, errorName: string): boolean {
-    const control = form.get(controlName);
-    return control !== null && control.hasError(errorName) && control.touched;
+  hasError(formOrControlName: FormGroup | string, controlNameOrErrorName: string, errorName?: string): boolean {
+    if (formOrControlName instanceof FormGroup) {
+      // For instance form
+      const control = formOrControlName.get(controlNameOrErrorName);
+      return control !== null && control.hasError(errorName!) && control.dirty;
+    } else {
+      // For global form
+      const control = this.globalForm.get(formOrControlName);
+      return control ? control.dirty && control.hasError(controlNameOrErrorName) : false;
+    }
+  }
+
+  /**
+   * Get nested form control errors
+   */
+  hasNestedError(parentName: string, controlName: string, errorName: string): boolean {
+    const parentControl = this.globalForm.get(parentName);
+    if (!parentControl || !(parentControl instanceof FormGroup)) {
+      return false;
+    }
+
+    const control = parentControl.get(controlName);
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**
@@ -406,8 +426,6 @@ export class RadarrSettingsComponent implements OnDestroy, CanComponentDeactivat
     });
   }
 
-
-
   /**
    * Get modal title based on mode
    */

code/frontend/src/app/settings/readarr/readarr-settings.component.html

@@ -42,6 +42,9 @@
                 decrementButtonIcon="pi pi-minus"
               ></p-inputNumber>
             </div>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'required')" class="p-error">This field is required</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'min')" class="p-error">Value cannot be less than -1</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
             <small class="form-helper-text">Maximum number of strikes before removing a failed import (-1 to use global setting; 0 to disable)</small>
           </div>
         </div>

code/frontend/src/app/settings/readarr/readarr-settings.component.ts

@@ -82,7 +82,7 @@ export class ReadarrSettingsComponent implements OnDestroy, CanComponentDeactiva
   constructor() {
     // Initialize forms
     this.globalForm = this.formBuilder.group({
-      failedImportMaxStrikes: [-1],
+      failedImportMaxStrikes: [-1, [Validators.required, Validators.min(-1), Validators.max(5000)]],
     });
 
     this.instanceForm = this.formBuilder.group({
@@ -211,11 +211,18 @@ export class ReadarrSettingsComponent implements OnDestroy, CanComponentDeactiva
   }
 
   /**
-   * Check if a form control has an error
+   * Check if a form control has an error after it's been touched
    */
-  hasError(form: FormGroup, controlName: string, errorName: string): boolean {
-    const control = form.get(controlName);
-    return control !== null && control.hasError(errorName) && control.touched;
+  hasError(formOrControlName: FormGroup | string, controlNameOrErrorName: string, errorName?: string): boolean {
+    if (formOrControlName instanceof FormGroup) {
+      // For instance form
+      const control = formOrControlName.get(controlNameOrErrorName);
+      return control !== null && control.hasError(errorName!) && control.dirty;
+    } else {
+      // For global form
+      const control = this.globalForm.get(formOrControlName);
+      return control ? control.dirty && control.hasError(controlNameOrErrorName) : false;
+    }
   }
 
   /**
@@ -412,4 +419,17 @@ export class ReadarrSettingsComponent implements OnDestroy, CanComponentDeactiva
   get modalTitle(): string {
     return this.modalMode === 'add' ? 'Add Readarr Instance' : 'Edit Readarr Instance';
   }
+
+  /**
+   * Get nested form control errors
+   */
+  hasNestedError(parentName: string, controlName: string, errorName: string): boolean {
+    const parentControl = this.globalForm.get(parentName);
+    if (!parentControl || !(parentControl instanceof FormGroup)) {
+      return false;
+    }
+
+    const control = parentControl.get(controlName);
+    return control ? control.dirty && control.hasError(errorName) : false;
+  }
 } 

code/frontend/src/app/settings/sonarr/sonarr-settings.component.html

@@ -42,6 +42,9 @@
                 decrementButtonIcon="pi pi-minus"
               ></p-inputNumber>
             </div>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'required')" class="p-error">This field is required</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'min')" class="p-error">Value cannot be less than -1</small>
+            <small *ngIf="hasError('failedImportMaxStrikes', 'max')" class="p-error">Value cannot exceed 5000</small>
             <small class="form-helper-text">Maximum number of strikes before removing a failed import (-1 to use global setting; 0 to disable)</small>
           </div>
         </div>

code/frontend/src/app/settings/sonarr/sonarr-settings.component.ts

@@ -82,7 +82,7 @@ export class SonarrSettingsComponent implements OnDestroy, CanComponentDeactivat
   constructor() {
     // Initialize forms
     this.globalForm = this.formBuilder.group({
-      failedImportMaxStrikes: [-1],
+      failedImportMaxStrikes: [-1, [Validators.required, Validators.min(-1), Validators.max(5000)]],
     });
 
     this.instanceForm = this.formBuilder.group({
@@ -211,11 +211,31 @@ export class SonarrSettingsComponent implements OnDestroy, CanComponentDeactivat
   }
 
   /**
-   * Check if a form control has an error
+   * Check if a form control has an error after it's been touched
    */
-  hasError(form: FormGroup, controlName: string, errorName: string): boolean {
-    const control = form.get(controlName);
-    return control !== null && control.hasError(errorName) && control.touched;
+  hasError(formOrControlName: FormGroup | string, controlNameOrErrorName: string, errorName?: string): boolean {
+    if (formOrControlName instanceof FormGroup) {
+      // For instance form
+      const control = formOrControlName.get(controlNameOrErrorName);
+      return control !== null && control.hasError(errorName!) && control.dirty;
+    } else {
+      // For global form
+      const control = this.globalForm.get(formOrControlName);
+      return control ? control.dirty && control.hasError(controlNameOrErrorName) : false;
+    }
+  }
+
+  /**
+   * Get nested form control errors
+   */
+  hasNestedError(parentName: string, controlName: string, errorName: string): boolean {
+    const parentControl = this.globalForm.get(parentName);
+    if (!parentControl || !(parentControl instanceof FormGroup)) {
+      return false;
+    }
+
+    const control = parentControl.get(controlName);
+    return control ? control.dirty && control.hasError(errorName) : false;
   }
 
   /**
@@ -406,8 +426,6 @@ export class SonarrSettingsComponent implements OnDestroy, CanComponentDeactivat
     });
   }
 
-
-
   /**
    * Get modal title based on mode
    */

code/frontend/src/app/settings/styles/settings-shared.scss

@@ -1,3 +1,9 @@
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+}
+
 // Documentation info icon styles
 .field-info-icon {
   margin-right: 0.5rem;

code/frontend/src/app/shared/components/mobile-autocomplete/mobile-autocomplete.component.scss

@@ -0,0 +1,41 @@
+/* Mobile-friendly autocomplete styles */
+.mobile-autocomplete-container {
+  .input-with-button {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .mobile-input {
+      flex: 1;
+      min-height: 40px;
+    }
+
+    .add-button {
+      flex-shrink: 0;
+      min-width: 40px;
+      height: 40px;
+    }
+  }
+
+  .chips-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+}
+
+/* Responsive design - show mobile component on mobile devices */
+@media (max-width: 768px) {
+  :host {
+    display: block;
+  }
+}
+
+/* Hide mobile component on larger screens */
+@media (min-width: 769px) {
+  :host {
+    display: none;
+  }
+} 

code/frontend/src/app/shared/components/mobile-autocomplete/mobile-autocomplete.component.ts

@@ -0,0 +1,107 @@
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
+
+@Component({
+  selector: 'app-mobile-autocomplete',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    InputTextModule,
+    ButtonModule,
+    ChipModule
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MobileAutocompleteComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="mobile-autocomplete-container">
+      <div class="input-with-button">
+        <input 
+          type="text" 
+          pInputText 
+          #inputField
+          [placeholder]="placeholder"
+          (keyup.enter)="addItem(inputField.value); inputField.value = ''"
+          class="mobile-input"
+        />
+        <button 
+          pButton 
+          type="button" 
+          icon="pi pi-plus" 
+          class="p-button-sm add-button"
+          (click)="addItem(inputField.value); inputField.value = ''"
+          [title]="'Add ' + placeholder"
+        ></button>
+      </div>
+      <div class="chips-container" *ngIf="value && value.length > 0">
+        <p-chip 
+          *ngFor="let item of value; let i = index" 
+          [label]="item" 
+          [removable]="true"
+          (onRemove)="removeItem(i)"
+          class="mb-2 mr-2"
+        ></p-chip>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./mobile-autocomplete.component.scss']
+})
+export class MobileAutocompleteComponent implements ControlValueAccessor {
+  @Input() placeholder: string = 'Add item and press Enter';
+  @Input() multiple: boolean = true;
+  
+  value: string[] = [];
+  disabled: boolean = false;
+
+  // ControlValueAccessor implementation
+  private onChange = (value: string[]) => {};
+  private onTouched = () => {};
+
+  writeValue(value: string[]): void {
+    this.value = value || [];
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  addItem(item: string): void {
+    if (item && item.trim() && !this.disabled) {
+      const trimmedItem = item.trim();
+      
+      // Check if item already exists
+      if (!this.value.includes(trimmedItem)) {
+        const newValue = [...this.value, trimmedItem];
+        this.value = newValue;
+        this.onChange(this.value);
+        this.onTouched();
+      }
+    }
+  }
+
+  removeItem(index: number): void {
+    if (!this.disabled) {
+      const newValue = this.value.filter((_, i) => i !== index);
+      this.value = newValue;
+      this.onChange(this.value);
+      this.onTouched();
+    }
+  }
+}