feat: add export/import buttons and logic to watchlist UI

api/watchlist/service.go

@@ -7,6 +7,7 @@ import (
 	"errors"
 	"fmt"
 	"io"
+	"log"
 	"strconv"
 	"strings"
 
@@ -191,6 +192,12 @@ func (s *Service) DeleteContinueWatching(ctx context.Context, userID string, ani
 }
 
 func (s *Service) ImportWatchlist(ctx context.Context, userID string, r io.Reader) error {
+	txQueries, tx, err := db.BeginTx(ctx, s.sqlDB)
+	if err != nil {
+		return fmt.Errorf("failed to begin transaction: %w", err)
+	}
+	defer tx.Rollback()
+
 	reader := csv.NewReader(r)
 	// Read header
 	if _, err := reader.Read(); err != nil {
@@ -204,12 +211,13 @@ func (s *Service) ImportWatchlist(ctx context.Context, userID string, r io.Reade
 
 	for i, record := range records {
 		if len(record) < 4 {
-			continue // Skip malformed rows
+			log.Printf("skipping row %d: insufficient columns", i+2) // i+2 because i is 0-indexed record after header
+			continue
 		}
 
 		animeID, err := strconv.ParseInt(record[0], 10, 64)
 		if err != nil {
-			return fmt.Errorf("row %d: invalid anime id: %w", i+1, err)
+			return fmt.Errorf("row %d: invalid anime id: %w", i+2, err)
 		}
 
 		status := record[1]
@@ -221,10 +229,10 @@ func (s *Service) ImportWatchlist(ctx context.Context, userID string, r io.Reade
 		currentTimeSeconds, _ := strconv.ParseFloat(record[3], 64)
 
 		if err := s.ensureAnimeExists(ctx, animeID); err != nil {
-			return fmt.Errorf("row %d: failed to ensure anime: %w", i+1, err)
+			return fmt.Errorf("row %d: failed to ensure anime: %w", i+2, err)
 		}
 
-		_, err = s.db.UpsertWatchListEntry(ctx, db.UpsertWatchListEntryParams{
+		_, err = txQueries.UpsertWatchListEntry(ctx, db.UpsertWatchListEntryParams{
 			ID:                 uuid.New().String(),
 			UserID:             userID,
 			AnimeID:            animeID,
@@ -233,9 +241,9 @@ func (s *Service) ImportWatchlist(ctx context.Context, userID string, r io.Reade
 			CurrentTimeSeconds: currentTimeSeconds,
 		})
 		if err != nil {
-			return fmt.Errorf("row %d: failed to upsert entry: %w", i+1, err)
+			return fmt.Errorf("row %d: failed to upsert entry: %w", i+2, err)
 		}
 	}
 
-	return nil
+	return tx.Commit()
 }

api/watchlist/service_test.go

@@ -2,10 +2,14 @@ package watchlist
 
 import (
 	"context"
+	"database/sql"
+	"os"
 	"strings"
 	"testing"
 
 	"mal/internal/db"
+
+	_ "github.com/mattn/go-sqlite3"
 )
 
 type fakeQuerier struct {
@@ -73,29 +77,84 @@ func TestAddEntry_RejectsInvalidStatus(t *testing.T) {
 }
 
 func TestImportWatchlist(t *testing.T) {
-	t.Parallel()
+	dbFile := "test_watchlist.db"
+	defer os.Remove(dbFile)
 
-	q := &fakeQuerier{}
+	sqlDB, err := sql.Open("sqlite3", dbFile)
-	svc := NewService(q, nil, nil)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer sqlDB.Close()
+
+	// Minimal schema for testing
+	_, err = sqlDB.Exec(`
+		CREATE TABLE anime (
+			id INTEGER PRIMARY KEY,
+			title_original TEXT NOT NULL,
+			image_url TEXT NOT NULL,
+			created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+			title_english TEXT,
+			title_japanese TEXT,
+			airing BOOLEAN,
+			status TEXT,
+			relations_synced_at DATETIME,
+			duration_seconds REAL
+		);
+		CREATE TABLE watch_list_entry (
+			id TEXT PRIMARY KEY,
+			user_id TEXT NOT NULL,
+			anime_id INTEGER NOT NULL REFERENCES anime(id),
+			status TEXT NOT NULL,
+			created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+			updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+			current_episode INTEGER DEFAULT 0,
+			last_episode_at DATETIME,
+			current_time_seconds REAL NOT NULL DEFAULT 0,
+			UNIQUE(user_id, anime_id)
+		);
+	`)
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	queries := db.New(sqlDB)
+	svc := NewService(queries, sqlDB, nil)
+
+	// Pre-insert anime so ensureAnimeExists succeeds
+	_, err = sqlDB.Exec(`INSERT INTO anime (id, title_original, image_url) VALUES (1, 'Test 1', '');`)
+	if err != nil {
+		t.Fatal(err)
+	}
+	_, err = sqlDB.Exec(`INSERT INTO anime (id, title_original, image_url) VALUES (2, 'Test 2', '');`)
+	if err != nil {
+		t.Fatal(err)
+	}
 
 	csvData := `anime_id,status,current_episode,current_time_seconds
 1,watching,5,120.5
 2,invalid,10,0
 `
-	err := svc.ImportWatchlist(context.Background(), "user-1", strings.NewReader(csvData))
+	err = svc.ImportWatchlist(context.Background(), "user-1", strings.NewReader(csvData))
 	if err != nil {
 		t.Fatalf("ImportWatchlist failed: %v", err)
 	}
 
-	if !q.upsertEntryCalled {
+	// Verify entries
-		t.Fatal("expected entries to be upserted")
+	var count int
+	err = sqlDB.QueryRow("SELECT COUNT(*) FROM watch_list_entry WHERE user_id = 'user-1'").Scan(&count)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if count != 2 {
+		t.Errorf("expected 2 entries, got %d", count)
 	}
 
-	// Verify the second record with invalid status was defaulted
+	var status string
-	// Note: We need a way to track all calls if we want to check the second record specifically,
+	err = sqlDB.QueryRow("SELECT status FROM watch_list_entry WHERE anime_id = 2").Scan(&status)
-	// but the current fake only tracks the last call.
+	if err != nil {
-	// For now, let's just check the last call which was record 2.
+		t.Fatal(err)
-	if q.upsertEntryParams.Status != "plan_to_watch" {
+	}
-		t.Errorf("expected status to be defaulted to plan_to_watch, got %s", q.upsertEntryParams.Status)
+	if status != "plan_to_watch" {
+		t.Errorf("expected status to be defaulted to plan_to_watch, got %s", status)
 	}
 }

templates/watchlist.gohtml

@@ -32,6 +32,19 @@
       <button type="button" id="sort-order-btn" class="text-neutral-400 transition-colors hover:text-white" onclick="toggleSortOrder(this)">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
       </button>
+
+      <div class="flex bg-white/5 p-1 rounded-md border border-white/10">
+        <button type="button" class="px-3 py-1 text-xs hover:bg-white/10 transition-colors flex items-center gap-2 text-neutral-400 hover:text-white" onclick="exportWatchlistCSV()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          Export
+        </button>
+        <div class="w-px h-4 bg-white/10 self-center"></div>
+        <button type="button" class="px-3 py-1 text-xs hover:bg-white/10 transition-colors flex items-center gap-2 text-neutral-400 hover:text-white" onclick="document.getElementById('import-input').click()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          Import
+        </button>
+        <input type="file" id="import-input" class="hidden" accept=".csv" onchange="importWatchlistCSV(this)">
+      </div>
     </div>
   </div>
 
@@ -125,6 +138,57 @@
     sortItems()
   }
 
+  function exportWatchlistCSV() {
+    const entries = {{json .AllEntries}};
+    if (!entries || entries.length === 0) {
+      alert('Watchlist is empty');
+      return;
+    }
+
+    let csv = 'anime_id,status,current_episode,current_time_seconds\n';
+    entries.forEach(e => {
+      csv += `${e.AnimeID},${e.Status},${e.CurrentEpisode.Int64},${e.CurrentTimeSeconds}\n`;
+    });
+
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.setAttribute('hidden', '');
+    a.setAttribute('href', url);
+    a.setAttribute('download', 'watchlist.csv');
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  async function importWatchlistCSV(input) {
+    if (!input.files || input.files.length === 0) return;
+    
+    const formData = new FormData();
+    formData.append('file', input.files[0]);
+
+    try {
+      const resp = await fetch('/api/watchlist/import', {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'HX-Request': 'true'
+        }
+      });
+
+      if (resp.ok) {
+        const redirect = resp.headers.get('HX-Redirect');
+        if (redirect) window.location.href = redirect;
+        else window.location.reload();
+      } else {
+        const text = await resp.text();
+        alert('Import failed: ' + text);
+      }
+    } catch (err) {
+      alert('Import error: ' + err);
+    }
+  }
+
   function sortItems() {
     const grid = document.getElementById('watchlist-items')
     const items = Array.from(grid.querySelectorAll('.watchlist-item'))

templates/watchlist_partial.gohtml

@@ -31,6 +31,19 @@
       <button type="button" id="sort-order-btn" class="text-neutral-400 transition-colors hover:text-white" onclick="toggleSortOrder(this)">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
       </button>
+
+      <div class="flex bg-white/5 p-1 rounded-md border border-white/10">
+        <button type="button" class="px-3 py-1 text-xs hover:bg-white/10 transition-colors flex items-center gap-2 text-neutral-400 hover:text-white" onclick="exportWatchlistCSV()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          Export
+        </button>
+        <div class="w-px h-4 bg-white/10 self-center"></div>
+        <button type="button" class="px-3 py-1 text-xs hover:bg-white/10 transition-colors flex items-center gap-2 text-neutral-400 hover:text-white" onclick="document.getElementById('import-input').click()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          Import
+        </button>
+        <input type="file" id="import-input" class="hidden" accept=".csv" onchange="importWatchlistCSV(this)">
+      </div>
     </div>
   </div>
 
@@ -127,6 +140,57 @@
     sortItems()
   }
 
+  function exportWatchlistCSV() {
+    const entries = {{json .AllEntries}};
+    if (!entries || entries.length === 0) {
+      alert('Watchlist is empty');
+      return;
+    }
+
+    let csv = 'anime_id,status,current_episode,current_time_seconds\n';
+    entries.forEach(e => {
+      csv += `${e.AnimeID},${e.Status},${e.CurrentEpisode.Int64},${e.CurrentTimeSeconds}\n`;
+    });
+
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.setAttribute('hidden', '');
+    a.setAttribute('href', url);
+    a.setAttribute('download', 'watchlist.csv');
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  async function importWatchlistCSV(input) {
+    if (!input.files || input.files.length === 0) return;
+    
+    const formData = new FormData();
+    formData.append('file', input.files[0]);
+
+    try {
+      const resp = await fetch('/api/watchlist/import', {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'HX-Request': 'true'
+        }
+      });
+
+      if (resp.ok) {
+        const redirect = resp.headers.get('HX-Redirect');
+        if (redirect) window.location.href = redirect;
+        else window.location.reload();
+      } else {
+        const text = await resp.text();
+        alert('Import failed: ' + text);
+      }
+    } catch (err) {
+      alert('Import error: ' + err);
+    }
+  }
+
   function sortItems() {
     document.querySelectorAll('.watchlist-section').forEach(function(section) {
       const grid = section.querySelector('.grid')