feat(albums): add multi-select to Albums, New Releases, and Random Albums

Select multiple albums to add them to the offline cache or download each as a separate ZIP. Action buttons appear inline in the topbar when at least one album is selected; title shows selection count. AlbumCard gains selectionMode/selected/onToggleSelect props with a checkmark overlay and selected outline. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-22 14:35:41 +00:00 · 2026-04-07 23:04:44 +02:00
parent c1624342d3
commit 5be7f7cabd
12 changed files with 564 additions and 88 deletions
@@ -1,16 +1,25 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
 import GenreFilterBar from '../components/GenreFilterBar';
-import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
+import { getAlbumList, getAlbumsByGenre, getAlbum, SubsonicAlbum, buildDownloadUrl } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
-import { X } from 'lucide-react';
+import { useOfflineStore } from '../store/offlineStore';
+import { useDownloadModalStore } from '../store/downloadModalStore';
+import { writeFile } from '@tauri-apps/plugin-fs';
+import { join } from '@tauri-apps/api/path';
+import { showToast } from '../utils/toast';
+import { X, CheckSquare2, Download, HardDriveDownload } from 'lucide-react';

 type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';

 const PAGE_SIZE = 30;
 const CURRENT_YEAR = new Date().getFullYear();

+function sanitizeFilename(name: string): string {
+  return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, '_').trim() || 'download';
+}
+
 async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
  const seen = new Set<string>();
@@ -20,6 +29,11 @@ async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
 export default function Albums() {
  const { t } = useTranslation();
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
+  const auth = useAuthStore();
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const { downloadAlbum } = useOfflineStore();
+  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
+
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [sort, setSort] = useState<SortType>('alphabeticalByName');
  const [loading, setLoading] = useState(true);
@@ -30,6 +44,73 @@ export default function Albums() {
  const [yearTo, setYearTo] = useState('');
  const observerTarget = useRef<HTMLDivElement>(null);

+  // ── Multi-selection ──────────────────────────────────────────────────────
+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const toggleSelectionMode = () => {
+    setSelectionMode(v => !v);
+    setSelectedIds(new Set());
+  };
+
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const clearSelection = () => {
+    setSelectionMode(false);
+    setSelectedIds(new Set());
+  };
+
+  const selectedAlbums = albums.filter(a => selectedIds.has(a.id));
+
+  const handleDownloadZips = async () => {
+    if (selectedAlbums.length === 0) return;
+    const folder = auth.downloadFolder || await requestDownloadFolder();
+    if (!folder) return;
+
+    let done = 0;
+    for (const album of selectedAlbums) {
+      showToast(t('albums.downloadingZip', { current: done + 1, total: selectedAlbums.length, name: album.name }), 8000, 'info');
+      try {
+        const url = buildDownloadUrl(album.id);
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const blob = await response.blob();
+        const buffer = await blob.arrayBuffer();
+        const path = await join(folder, `${sanitizeFilename(album.name)}.zip`);
+        await writeFile(path, new Uint8Array(buffer));
+        done++;
+      } catch (e) {
+        console.error('ZIP download failed for', album.name, e);
+        showToast(t('albums.downloadZipFailed', { name: album.name }), 4000, 'error');
+      }
+    }
+    showToast(t('albums.downloadZipDone', { count: done }), 4000, 'info');
+    clearSelection();
+  };
+
+  const handleAddOffline = async () => {
+    if (selectedAlbums.length === 0) return;
+    let queued = 0;
+    for (const album of selectedAlbums) {
+      try {
+        const detail = await getAlbum(album.id);
+        downloadAlbum(album.id, album.name, album.artist, album.coverArt, album.year, detail.songs, serverId);
+        queued++;
+      } catch {
+        showToast(t('albums.offlineFailed', { name: album.name }), 3000, 'error');
+      }
+    }
+    if (queued > 0) showToast(t('albums.offlineQueuing', { count: queued }), 3000, 'info');
+    clearSelection();
+  };
+
+  // ── Data loading ─────────────────────────────────────────────────────────
  const genreFiltered = selectedGenres.length > 0;
  const fromNum = parseInt(yearFrom, 10);
  const toNum = parseInt(yearTo, 10);
@@ -108,58 +189,87 @@ export default function Albums() {
  return (
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
-        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('albums.title')}</h1>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>
+          {selectionMode && selectedIds.size > 0
+            ? t('albums.selectionCount', { count: selectedIds.size })
+            : t('albums.title')}
+        </h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
-          {!yearActive && sortOptions.map(o => (
-            <button
-              key={o.value}
-              className={`btn btn-surface ${sort === o.value ? 'btn-sort-active' : ''}`}
-              onClick={() => setSort(o.value)}
-              style={sort === o.value ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
-            >
-              {o.label}
-            </button>
-          ))}
-
-          {/* Year range filter */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-            <span style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
-              {t('albums.yearFilterLabel')}
-            </span>
-            <input
-              className="input"
-              type="number"
-              min={1900}
-              max={CURRENT_YEAR}
-              placeholder={t('albums.yearFrom')}
-              value={yearFrom}
-              onChange={e => setYearFrom(e.target.value)}
-              style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
-            />
-            <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>–</span>
-            <input
-              className="input"
-              type="number"
-              min={1900}
-              max={CURRENT_YEAR}
-              placeholder={t('albums.yearTo')}
-              value={yearTo}
-              onChange={e => setYearTo(e.target.value)}
-              style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
-            />
-            {yearActive && (
-              <button
-                className="btn btn-ghost"
-                onClick={clearYear}
-                data-tooltip={t('albums.yearFilterClear')}
-                style={{ padding: '4px 6px' }}
-              >
-                <X size={13} />
+          {selectionMode && selectedIds.size > 0 ? (
+            <>
+              <button className="btn btn-surface albums-selection-action-btn" onClick={handleAddOffline}>
+                <HardDriveDownload size={15} />
+                {t('albums.addOffline')}
              </button>
-            )}
-          </div>
+              <button className="btn btn-surface albums-selection-action-btn" onClick={handleDownloadZips}>
+                <Download size={15} />
+                {t('albums.downloadZips')}
+              </button>
+            </>
+          ) : (
+            <>
+              {!yearActive && sortOptions.map(o => (
+                <button
+                  key={o.value}
+                  className={`btn btn-surface ${sort === o.value ? 'btn-sort-active' : ''}`}
+                  onClick={() => setSort(o.value)}
+                  style={sort === o.value ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
+                >
+                  {o.label}
+                </button>
+              ))}

-          <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                <span style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
+                  {t('albums.yearFilterLabel')}
+                </span>
+                <input
+                  className="input"
+                  type="number"
+                  min={1900}
+                  max={CURRENT_YEAR}
+                  placeholder={t('albums.yearFrom')}
+                  value={yearFrom}
+                  onChange={e => setYearFrom(e.target.value)}
+                  style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
+                />
+                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>–</span>
+                <input
+                  className="input"
+                  type="number"
+                  min={1900}
+                  max={CURRENT_YEAR}
+                  placeholder={t('albums.yearTo')}
+                  value={yearTo}
+                  onChange={e => setYearTo(e.target.value)}
+                  style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
+                />
+                {yearActive && (
+                  <button
+                    className="btn btn-ghost"
+                    onClick={clearYear}
+                    data-tooltip={t('albums.yearFilterClear')}
+                    style={{ padding: '4px 6px' }}
+                  >
+                    <X size={13} />
+                  </button>
+                )}
+              </div>
+
+              <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+            </>
+          )}
+
+          <button
+            className={`btn btn-surface${selectionMode ? ' btn-sort-active' : ''}`}
+            onClick={toggleSelectionMode}
+            data-tooltip={selectionMode ? t('albums.cancelSelect') : t('albums.startSelect')}
+            data-tooltip-pos="bottom"
+            style={selectionMode ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
+          >
+            <CheckSquare2 size={15} />
+            {selectionMode ? t('albums.cancelSelect') : t('albums.select')}
+          </button>
        </div>
      </div>

@@ -170,7 +280,15 @@ export default function Albums() {
      ) : (
        <>
          <div className="album-grid-wrap">
-            {albums.map(a => <AlbumCard key={a.id} album={a} />)}
+            {albums.map(a => (
+              <AlbumCard
+                key={a.id}
+                album={a}
+                selectionMode={selectionMode}
+                selected={selectedIds.has(a.id)}
+                onToggleSelect={toggleSelect}
+              />
+            ))}
          </div>
          {!genreFiltered && (
            <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
@@ -179,6 +297,7 @@ export default function Albums() {
          )}
        </>
      )}
+
    </div>
  );
 }
@@ -1,12 +1,22 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { CheckSquare2, Download, HardDriveDownload } from 'lucide-react';
 import AlbumCard from '../components/AlbumCard';
 import GenreFilterBar from '../components/GenreFilterBar';
-import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
+import { getAlbumList, getAlbumsByGenre, getAlbum, SubsonicAlbum, buildDownloadUrl } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
+import { useOfflineStore } from '../store/offlineStore';
+import { useDownloadModalStore } from '../store/downloadModalStore';
+import { writeFile } from '@tauri-apps/plugin-fs';
+import { join } from '@tauri-apps/api/path';
+import { showToast } from '../utils/toast';

 const PAGE_SIZE = 30;

+function sanitizeFilename(name: string): string {
+  return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, '_').trim() || 'download';
+}
+
 async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
  const seen = new Set<string>();
@@ -17,6 +27,11 @@ async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
 export default function NewReleases() {
  const { t } = useTranslation();
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
+  const auth = useAuthStore();
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const { downloadAlbum } = useOfflineStore();
+  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
+
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(0);
@@ -25,6 +40,53 @@ export default function NewReleases() {
  const observerTarget = useRef<HTMLDivElement>(null);
  const filtered = selectedGenres.length > 0;

+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const toggleSelectionMode = () => { setSelectionMode(v => !v); setSelectedIds(new Set()); };
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; });
+  }, []);
+  const clearSelection = () => { setSelectionMode(false); setSelectedIds(new Set()); };
+  const selectedAlbums = albums.filter(a => selectedIds.has(a.id));
+
+  const handleDownloadZips = async () => {
+    if (selectedAlbums.length === 0) return;
+    const folder = auth.downloadFolder || await requestDownloadFolder();
+    if (!folder) return;
+    let done = 0;
+    for (const album of selectedAlbums) {
+      showToast(t('albums.downloadingZip', { current: done + 1, total: selectedAlbums.length, name: album.name }), 8000, 'info');
+      try {
+        const blob = await fetch(buildDownloadUrl(album.id)).then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.blob(); });
+        const path = await join(folder, `${sanitizeFilename(album.name)}.zip`);
+        await writeFile(path, new Uint8Array(await blob.arrayBuffer()));
+        done++;
+      } catch (e) {
+        console.error('ZIP download failed for', album.name, e);
+        showToast(t('albums.downloadZipFailed', { name: album.name }), 4000, 'error');
+      }
+    }
+    showToast(t('albums.downloadZipDone', { count: done }), 4000, 'info');
+    clearSelection();
+  };
+
+  const handleAddOffline = async () => {
+    if (selectedAlbums.length === 0) return;
+    let queued = 0;
+    for (const album of selectedAlbums) {
+      try {
+        const detail = await getAlbum(album.id);
+        downloadAlbum(album.id, album.name, album.artist, album.coverArt, album.year, detail.songs, serverId);
+        queued++;
+      } catch {
+        showToast(t('albums.offlineFailed', { name: album.name }), 3000, 'error');
+      }
+    }
+    if (queued > 0) showToast(t('albums.offlineQueuing', { count: queued }), 3000, 'info');
+    clearSelection();
+  };
+
  const load = useCallback(async (offset: number, append = false) => {
    setLoading(true);
    try {
@@ -71,8 +133,37 @@ export default function NewReleases() {
  return (
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
-        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('sidebar.newReleases')}</h1>
-        <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+        <h1 className="page-title" style={{ marginBottom: 0 }}>
+          {selectionMode && selectedIds.size > 0
+            ? t('albums.selectionCount', { count: selectedIds.size })
+            : t('sidebar.newReleases')}
+        </h1>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+          {selectionMode && selectedIds.size > 0 ? (
+            <>
+              <button className="btn btn-surface albums-selection-action-btn" onClick={handleAddOffline}>
+                <HardDriveDownload size={15} />
+                {t('albums.addOffline')}
+              </button>
+              <button className="btn btn-surface albums-selection-action-btn" onClick={handleDownloadZips}>
+                <Download size={15} />
+                {t('albums.downloadZips')}
+              </button>
+            </>
+          ) : (
+            <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+          )}
+          <button
+            className={`btn btn-surface${selectionMode ? ' btn-sort-active' : ''}`}
+            onClick={toggleSelectionMode}
+            data-tooltip={selectionMode ? t('albums.cancelSelect') : t('albums.startSelect')}
+            data-tooltip-pos="bottom"
+            style={selectionMode ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
+          >
+            <CheckSquare2 size={15} />
+            {selectionMode ? t('albums.cancelSelect') : t('albums.select')}
+          </button>
+        </div>
      </div>

      {loading && albums.length === 0 ? (
@@ -82,7 +173,15 @@ export default function NewReleases() {
      ) : (
        <>
          <div className="album-grid-wrap">
-            {albums.map(a => <AlbumCard key={a.id} album={a} />)}
+            {albums.map(a => (
+              <AlbumCard
+                key={a.id}
+                album={a}
+                selectionMode={selectionMode}
+                selected={selectedIds.has(a.id)}
+                onToggleSelect={toggleSelect}
+              />
+            ))}
          </div>
          {!filtered && (
            <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
@@ -1,18 +1,26 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { RefreshCw } from 'lucide-react';
-import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
+import { RefreshCw, CheckSquare2, Download, HardDriveDownload } from 'lucide-react';
+import { getAlbumList, getAlbumsByGenre, getAlbum, SubsonicAlbum, buildDownloadUrl } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
 import GenreFilterBar from '../components/GenreFilterBar';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
+import { useOfflineStore } from '../store/offlineStore';
+import { useDownloadModalStore } from '../store/downloadModalStore';
+import { writeFile } from '@tauri-apps/plugin-fs';
+import { join } from '@tauri-apps/api/path';
+import { showToast } from '../utils/toast';

 const ALBUM_COUNT = 30;

+function sanitizeFilename(name: string): string {
+  return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, '_').trim() || 'download';
+}
+
 async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
  const seen = new Set<string>();
  const union = results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
-  // Fisher-Yates shuffle
  for (let i = union.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [union[i], union[j]] = [union[j], union[i]];
@@ -23,20 +31,70 @@ async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
 export default function RandomAlbums() {
  const { t } = useTranslation();
  const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
+  const auth = useAuthStore();
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const { downloadAlbum } = useOfflineStore();
+  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
+
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
  const loadingRef = useRef(false);
  const filtered = selectedGenres.length > 0;

+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const toggleSelectionMode = () => { setSelectionMode(v => !v); setSelectedIds(new Set()); };
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; });
+  }, []);
+  const clearSelection = () => { setSelectionMode(false); setSelectedIds(new Set()); };
+  const selectedAlbums = albums.filter(a => selectedIds.has(a.id));
+
+  const handleDownloadZips = async () => {
+    if (selectedAlbums.length === 0) return;
+    const folder = auth.downloadFolder || await requestDownloadFolder();
+    if (!folder) return;
+    let done = 0;
+    for (const album of selectedAlbums) {
+      showToast(t('albums.downloadingZip', { current: done + 1, total: selectedAlbums.length, name: album.name }), 8000, 'info');
+      try {
+        const blob = await fetch(buildDownloadUrl(album.id)).then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.blob(); });
+        const path = await join(folder, `${sanitizeFilename(album.name)}.zip`);
+        await writeFile(path, new Uint8Array(await blob.arrayBuffer()));
+        done++;
+      } catch (e) {
+        console.error('ZIP download failed for', album.name, e);
+        showToast(t('albums.downloadZipFailed', { name: album.name }), 4000, 'error');
+      }
+    }
+    showToast(t('albums.downloadZipDone', { count: done }), 4000, 'info');
+    clearSelection();
+  };
+
+  const handleAddOffline = async () => {
+    if (selectedAlbums.length === 0) return;
+    let queued = 0;
+    for (const album of selectedAlbums) {
+      try {
+        const detail = await getAlbum(album.id);
+        downloadAlbum(album.id, album.name, album.artist, album.coverArt, album.year, detail.songs, serverId);
+        queued++;
+      } catch {
+        showToast(t('albums.offlineFailed', { name: album.name }), 3000, 'error');
+      }
+    }
+    if (queued > 0) showToast(t('albums.offlineQueuing', { count: queued }), 3000, 'info');
+    clearSelection();
+  };
+
  const load = useCallback(async (genres: string[]) => {
    if (loadingRef.current) return;
    loadingRef.current = true;
    setLoading(true);
    try {
-      const data = genres.length > 0
-        ? await fetchByGenres(genres)
-        : await getAlbumList('random', ALBUM_COUNT);
+      const data = genres.length > 0 ? await fetchByGenres(genres) : await getAlbumList('random', ALBUM_COUNT);
      setAlbums(data);
    } catch (e) {
      console.error(e);
@@ -51,17 +109,46 @@ export default function RandomAlbums() {
  return (
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
-        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('randomAlbums.title')}</h1>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>
+          {selectionMode && selectedIds.size > 0
+            ? t('albums.selectionCount', { count: selectedIds.size })
+            : t('randomAlbums.title')}
+        </h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
-          <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+          {selectionMode && selectedIds.size > 0 ? (
+            <>
+              <button className="btn btn-surface albums-selection-action-btn" onClick={handleAddOffline}>
+                <HardDriveDownload size={15} />
+                {t('albums.addOffline')}
+              </button>
+              <button className="btn btn-surface albums-selection-action-btn" onClick={handleDownloadZips}>
+                <Download size={15} />
+                {t('albums.downloadZips')}
+              </button>
+            </>
+          ) : (
+            <>
+              <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+              <button
+                className="btn btn-surface"
+                onClick={() => load(selectedGenres)}
+                disabled={loading}
+                data-tooltip={t('randomAlbums.refresh')}
+              >
+                <RefreshCw size={15} className={loading ? 'animate-spin' : ''} />
+                {t('randomAlbums.refresh')}
+              </button>
+            </>
+          )}
          <button
-            className="btn btn-ghost"
-            onClick={() => load(selectedGenres)}
-            disabled={loading}
-            data-tooltip={t('randomAlbums.refresh')}
+            className={`btn btn-surface${selectionMode ? ' btn-sort-active' : ''}`}
+            onClick={toggleSelectionMode}
+            data-tooltip={selectionMode ? t('albums.cancelSelect') : t('albums.startSelect')}
+            data-tooltip-pos="bottom"
+            style={selectionMode ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
          >
-            <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
-            {t('randomAlbums.refresh')}
+            <CheckSquare2 size={15} />
+            {selectionMode ? t('albums.cancelSelect') : t('albums.select')}
          </button>
        </div>
      </div>
@@ -72,7 +159,15 @@ export default function RandomAlbums() {
        </div>
      ) : (
        <div className="album-grid-wrap">
-          {albums.map(a => <AlbumCard key={a.id} album={a} />)}
+          {albums.map(a => (
+            <AlbumCard
+              key={a.id}
+              album={a}
+              selectionMode={selectionMode}
+              selected={selectedIds.has(a.id)}
+              onToggleSelect={toggleSelect}
+            />
+          ))}
        </div>
      )}
    </div>