feat: v1.27.0 — In-App Auto-Update, Configurable Home, Icon Consistency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/AlbumDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { invoke } from '@tauri-apps/api/core';
 import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, coverArtCacheKey, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
@@ -231,10 +231,13 @@ const handleEnqueueAll = () => {
     deleteAlbum(album.album.id, serverId);
   };
 
-  // Hooks must be called unconditionally — derive from nullable album state
-  const coverUrl = album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '';
-  const coverKey = album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '';
-  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey, false);
+  // Hooks must be called unconditionally — derive from nullable album state.
+  // useMemo is required: buildCoverArtUrl generates a new salt on every call, so without
+  // memoization every re-render (e.g. currentTrack change) produces a new fetchUrl,
+  // which cancels and restarts the useCachedUrl effect → background never resolves.
+  const coverUrl = useMemo(() => album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '', [album?.album.coverArt]);
+  const coverKey = useMemo(() => album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '', [album?.album.coverArt]);
+  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
 
   if (loading) return <div className="loading-center"><div className="spinner" /></div>;
   if (!album) return <div className="empty-state">{t('albumDetail.notFound')}</div>;

src/pages/ArtistDetail.tsx

@@ -4,7 +4,7 @@ import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, search, Subson
 import AlbumCard from '../components/AlbumCard';
 import CachedImage from '../components/CachedImage';
 import CoverLightbox from '../components/CoverLightbox';
-import { ArrowLeft, Users, ExternalLink, Star, Play, Shuffle, Radio } from 'lucide-react';
+import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-shell';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
@@ -283,7 +283,7 @@ export default function ArtistDetail() {
               data-tooltip={isStarred ? t('artistDetail.favoriteRemove') : t('artistDetail.favoriteAdd')}
               style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
             >
-              <Star size={14} fill={isStarred ? "currentColor" : "none"} />
+              <Heart size={14} fill={isStarred ? "currentColor" : "none"} />
               {t('artistDetail.favorite')}
             </button>
           </div>

src/pages/Home.tsx

@@ -4,8 +4,12 @@ import AlbumRow from '../components/AlbumRow';
 import { getAlbumList, getArtists, SubsonicAlbum, SubsonicArtist } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useHomeStore } from '../store/homeStore';
 
 export default function Home() {
+  const homeSections = useHomeStore(s => s.sections);
+  const isVisible = (id: string) => homeSections.find(s => s.id === id)?.visible ?? true;
+
   const [starred, setStarred] = useState<SubsonicAlbum[]>([]);
   const [recent, setRecent] = useState<SubsonicAlbum[]>([]);
   const [random, setRandom] = useState<SubsonicAlbum[]>([]);
@@ -22,7 +26,7 @@ export default function Home() {
       getAlbumList('random', 20).catch(() => []),
       getAlbumList('frequent', 12).catch(() => []),
       getAlbumList('recent', 12).catch(() => []),
-      getArtists().catch(() => []),
+      isVisible('discoverArtists') ? getArtists().catch(() => []) : Promise.resolve<SubsonicArtist[]>([]),
     ]).then(([s, n, r, f, rp, artists]) => {
       setStarred(s);
       setRecent(n);
@@ -60,7 +64,7 @@ export default function Home() {
 
   return (
     <div className="animate-fade-in">
-      <Hero albums={heroAlbums} />
+      {isVisible('hero') && <Hero albums={heroAlbums} />}
 
       <div className="content-body" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
         {loading ? (
@@ -69,19 +73,23 @@ export default function Home() {
           </div>
         ) : (
           <>
-            <AlbumRow
-              title={t('home.recent')}
-              albums={recent}
-              onLoadMore={() => loadMore('newest', recent, setRecent)}
-              moreText={t('home.loadMore')}
-            />
-            <AlbumRow
-              title={t('home.discover')}
-              albums={random}
-              onLoadMore={() => loadMore('random', random, setRandom)}
-              moreText={t('home.discoverMore')}
-            />
-            {randomArtists.length > 0 && (
+            {isVisible('recent') && (
+              <AlbumRow
+                title={t('home.recent')}
+                albums={recent}
+                onLoadMore={() => loadMore('newest', recent, setRecent)}
+                moreText={t('home.loadMore')}
+              />
+            )}
+            {isVisible('discover') && (
+              <AlbumRow
+                title={t('home.discover')}
+                albums={random}
+                onLoadMore={() => loadMore('random', random, setRandom)}
+                moreText={t('home.discoverMore')}
+              />
+            )}
+            {isVisible('discoverArtists') && randomArtists.length > 0 && (
               <section className="album-row-section">
                 <div className="album-row-header">
                   <h2 className="section-title" style={{ marginBottom: 0 }}>{t('home.discoverArtists')}</h2>
@@ -99,7 +107,7 @@ export default function Home() {
                 </div>
               </section>
             )}
-            {recentlyPlayed.length > 0 && (
+            {isVisible('recentlyPlayed') && recentlyPlayed.length > 0 && (
               <AlbumRow
                 title={t('home.recentlyPlayed')}
                 albums={recentlyPlayed}
@@ -107,7 +115,7 @@ export default function Home() {
                 moreText={t('home.loadMore')}
               />
             )}
-            {starred.length > 0 && (
+            {isVisible('starred') && starred.length > 0 && (
               <AlbumRow
                 title={t('home.starred')}
                 albums={starred}
@@ -115,12 +123,14 @@ export default function Home() {
                 moreText={t('home.loadMore')}
               />
             )}
-            <AlbumRow
-              title={t('home.mostPlayed')}
-              albums={mostPlayed}
-              onLoadMore={() => loadMore('frequent', mostPlayed, setMostPlayed)}
-              moreText={t('home.loadMore')}
-            />
+            {isVisible('mostPlayed') && (
+              <AlbumRow
+                title={t('home.mostPlayed')}
+                albums={mostPlayed}
+                onLoadMore={() => loadMore('frequent', mostPlayed, setMostPlayed)}
+                moreText={t('home.loadMore')}
+              />
+            )}
           </>
         )}
       </div>

src/pages/PlaylistDetail.tsx

@@ -136,7 +136,7 @@ export default function PlaylistDetail() {
 
   const bgFetchUrl = useMemo(() => buildCoverArtUrl(coverQuad[0] ?? '', 300), [coverQuad]);
   const bgCacheKey = useMemo(() => coverArtCacheKey(coverQuad[0] ?? '', 300), [coverQuad]);
-  const resolvedBgUrl = useCachedUrl(bgFetchUrl, bgCacheKey, false);
+  const resolvedBgUrl = useCachedUrl(bgFetchUrl, bgCacheKey);
 
   // Song search
   const [searchOpen, setSearchOpen] = useState(false);

src/pages/Settings.tsx

@@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import {
   Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen,
   Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard, ChevronDown,
-  GripVertical, PanelLeft, RotateCcw
+  GripVertical, PanelLeft, RotateCcw, LayoutGrid
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
@@ -21,6 +21,7 @@ import { useFontStore, FontId } from '../store/fontStore';
 import { useKeybindingsStore, KeyAction, formatKeyCode, DEFAULT_BINDINGS } from '../store/keybindingsStore';
 import { useGlobalShortcutsStore, GlobalAction, buildGlobalShortcut, formatGlobalShortcut } from '../store/globalShortcutsStore';
 import { useSidebarStore, DEFAULT_SIDEBAR_ITEMS, SidebarItemConfig } from '../store/sidebarStore';
+import { useHomeStore, HomeSectionId } from '../store/homeStore';
 import { useDragDrop, useDragSource } from '../contexts/DragDropContext';
 import { ALL_NAV_ITEMS } from '../components/Sidebar';
 import { pingWithCredentials } from '../api/subsonic';
@@ -562,6 +563,8 @@ export default function Settings() {
               </div>
             </div>
           </section>
+
+          <HomeCustomizer />
         </>
       )}
 
@@ -1149,6 +1152,49 @@ function renderInline(text: string): React.ReactNode[] {
   });
 }
 
+function HomeCustomizer() {
+  const { t } = useTranslation();
+  const { sections, toggleSection, reset } = useHomeStore();
+
+  const SECTION_LABELS: Record<HomeSectionId, string> = {
+    hero:            t('home.hero'),
+    recent:          t('home.recent'),
+    discover:        t('home.discover'),
+    discoverArtists: t('home.discoverArtists'),
+    recentlyPlayed:  t('home.recentlyPlayed'),
+    starred:         t('home.starred'),
+    mostPlayed:      t('home.mostPlayed'),
+  };
+
+  return (
+    <section className="settings-section">
+      <div className="settings-section-header">
+        <LayoutGrid size={18} />
+        <h2>{t('settings.homeCustomizerTitle')}</h2>
+        <button
+          className="btn btn-ghost"
+          style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--text-muted)' }}
+          onClick={reset}
+          data-tooltip={t('settings.sidebarReset')}
+        >
+          <RotateCcw size={14} />
+        </button>
+      </div>
+      <div className="settings-card" style={{ padding: '4px 0' }}>
+        {sections.map(sec => (
+          <div key={sec.id} className="settings-toggle-row" style={{ padding: '8px 16px' }}>
+            <span style={{ fontSize: 14 }}>{SECTION_LABELS[sec.id]}</span>
+            <label className="toggle-switch" aria-label={SECTION_LABELS[sec.id]}>
+              <input type="checkbox" checked={sec.visible} onChange={() => toggleSection(sec.id)} />
+              <span className="toggle-track" />
+            </label>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 function SidebarGripHandle({ idx, section, label }: { idx: number; section: 'library' | 'system'; label: string }) {
   const { t } = useTranslation();
   const { onMouseDown } = useDragSource(() => ({