Add native file dialog fs for tauri build

package.json

@@ -36,6 +36,8 @@
     "@angular/router": "^21.2.6",
     "@angular/service-worker": "^21.2.6",
     "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
+    "@tauri-apps/plugin-fs": "^2.4.5",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

src-tauri/Cargo.toml

@@ -23,3 +23,5 @@ serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
 tauri = { version = "2.10.3", features = [] }
 tauri-plugin-log = "2"
+tauri-plugin-dialog = "2.6.0"
+tauri-plugin-fs = "2.4.5"

src-tauri/capabilities/default.json

@@ -6,6 +6,10 @@
     "main"
   ],
   "permissions": [
-    "core:default"
+    "core:default",
+    "dialog:default",
+    "fs:default",
+    "fs:allow-app-read-recursive",
+    "fs:allow-app-write-recursive"
   ]
 }

src-tauri/src/lib.rs

@@ -1,6 +1,8 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
   tauri::Builder::default()
+    .plugin(tauri_plugin_dialog::init())
+    .plugin(tauri_plugin_fs::init())
     .setup(|app| {
       if cfg!(debug_assertions) {
         app.handle().plugin(

src/app/app.config.ts

@@ -4,11 +4,19 @@ import { provideServiceWorker } from '@angular/service-worker';
 
 import { routes } from './app.routes';
 import { environment } from '../environments/environment';
+import { StorageService } from './services/storage.service';
+import { STORAGE_ADAPTER, IStorageAdapter } from './services/storage.adapter';
+import { IMPORT_EXPORT_ADAPTER, IImportExportAdapter } from './services/import-export.adapter';
+
+const storageAdapter: IStorageAdapter = new environment.storageAdapter();
+const importExportAdapter: IImportExportAdapter = new environment.importExportAdapter();
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes),
+    { provide: STORAGE_ADAPTER, useValue: storageAdapter },
+    { provide: IMPORT_EXPORT_ADAPTER, useValue: importExportAdapter },
     ...(environment.enableServiceWorker
       ? [
           provideServiceWorker('ngsw-worker.js', {
@@ -18,4 +26,4 @@ export const appConfig: ApplicationConfig = {
         ]
       : [])
   ]
-};
+};

src/app/components/add-item/add-item.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit, signal } from '@angular/core';
+import { Component, OnInit, signal, inject, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { WatchListService } from '../../services/watch-list.service';
 import { GroupService } from '../../services/group.service';
+import { StorageService } from '../../services/storage.service';
 import { ItemType } from '../../models/item.model';
 import { Group } from '../../models/group.model';
+import { createAsyncAction, withAsyncAction } from '../../utils/async-action';
 
 @Component({
   selector: 'app-add-item',
@@ -14,6 +16,10 @@ import { Group } from '../../models/group.model';
     <div class="add-item-container">
       <h1>Add New Item</h1>
 
+      <div *ngIf="state.message()" class="message" [class.error-message]="state.message()?.type === 'error'" [class.success-message]="state.message()?.type === 'success'">
+        {{ state.message()?.text }}
+      </div>
+
       <form (ngSubmit)="onSubmit()" class="add-item-form">
         <div class="form-group">
           <label for="title">Title *</label>
@@ -97,7 +103,7 @@ import { Group } from '../../models/group.model';
         </div>
 
         <div class="form-actions">
-          <button type="submit" class="submit-btn">Add Item</button>
+          <button type="submit" class="submit-btn" [disabled]="state.busy()">Add Item</button>
           <button type="button" (click)="cancel()" class="cancel-btn">Cancel</button>
         </div>
       </form>
@@ -190,9 +196,33 @@ import { Group } from '../../models/group.model';
     .cancel-btn:hover {
       background: var(--accent-secondary-hover);
     }
+
+    .message {
+      padding: 1rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+    }
+
+    .error-message {
+      background: light-dark(#f8d7da, #721c24);
+      color: light-dark(#721c24, #f8d7da);
+      border: 1px solid light-dark(#f5c6cb, #721c24);
+    }
+
+    .success-message {
+      background: light-dark(#d4edda, #155724);
+      color: light-dark(#155724, #d4edda);
+      border: 1px solid light-dark(#c3e6cb, #155724);
+    }
   `]
 })
 export class AddItemComponent implements OnInit {
+  private readonly storageService = inject(StorageService);
+  private readonly watchListService = inject(WatchListService);
+  private readonly groupService = inject(GroupService);
+  private readonly router = inject(Router);
+
+  state = createAsyncAction();
   groups = signal<Group[]>([]);
 
   title = '';
@@ -202,21 +232,21 @@ export class AddItemComponent implements OnInit {
   episode = 1;
   totalEpisodes: number | undefined;
 
-  constructor(
-    private watchListService: WatchListService,
-    private groupService: GroupService,
-    private router: Router
-  ) {}
-
-  ngOnInit(): void {
-    this.groups.set(this.groupService.getAllGroups());
-    // Ensure ungrouped is selected by default
-    if (this.groups().length > 0 && !this.groupId) {
-      const ungrouped = this.groups().find(g => g.id === 'ungrouped');
-      this.groupId = ungrouped ? ungrouped.id : this.groups()[0].id;
-    }
+  constructor() {
+    effect(() => {
+      const data = this.storageService.data();
+      if (data) {
+        this.groups.set(this.groupService.getAllGroups());
+        if (this.groups().length > 0 && !this.groupId) {
+          const ungrouped = this.groups().find(g => g.id === 'ungrouped');
+          this.groupId = ungrouped ? ungrouped.id : this.groups()[0].id;
+        }
+      }
+    });
   }
 
+  ngOnInit(): void {}
+
   onTypeChange(): void {
     if (this.type === 'movie') {
       this.season = 1;
@@ -225,25 +255,28 @@ export class AddItemComponent implements OnInit {
     }
   }
 
-  onSubmit(): void {
-    if (!this.title.trim()) {
-      return;
-    }
-
-    this.watchListService.addItem({
-      title: this.title.trim(),
-      type: this.type,
-      groupId: this.groupId,
-      status: 'not-started',
-      progress: this.type === 'series' ? {
-        season: this.season,
-        episode: this.episode,
-        totalEpisodes: this.totalEpisodes
-      } : undefined
-    });
+  onSubmit = withAsyncAction(
+    async () => {
+      if (!this.title.trim()) {
+        return;
+      }
 
-    this.router.navigate(['/items']);
-  }
+      await this.watchListService.addItem({
+        title: this.title.trim(),
+        type: this.type,
+        groupId: this.groupId,
+        status: 'not-started',
+        progress: this.type === 'series' ? {
+          season: this.season,
+          episode: this.episode,
+          totalEpisodes: this.totalEpisodes
+        } : undefined
+      });
+
+      this.router.navigate(['/items']);
+    },
+    this.state
+  );
 
   cancel(): void {
     this.router.navigate(['/items']);