feat: IndexedDB image caching, initial-avatars, and discovery improvements (v1.0.5)

2026-07-21 22:15:40 +00:00 · 2026-03-12 22:28:25 +01:00
parent 7e0cffc892
commit f8c45efd2b
24 changed files with 1076 additions and 397 deletions
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play } from 'lucide-react';
-import { SubsonicAlbum, buildCoverArtUrl } from '../api/subsonic';
+import { SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
+import CachedImage from './CachedImage';

 interface AlbumCardProps {
  album: SubsonicAlbum;
@@ -37,7 +38,7 @@ export default function AlbumCard({ album }: AlbumCardProps) {
    >
      <div className="album-card-cover">
        {coverUrl ? (
-          <img src={coverUrl} alt={`${album.name} Cover`} loading="lazy" />
+          <CachedImage src={coverUrl} cacheKey={coverArtCacheKey(album.coverArt!, 300)} alt={`${album.name} Cover`} loading="lazy" />
        ) : (
          <div className="album-card-cover-placeholder">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import { getCachedUrl } from '../utils/imageCache';
+
+interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  cacheKey: string;
+}
+
+export function useCachedUrl(fetchUrl: string, cacheKey: string): string {
+  const [resolved, setResolved] = useState('');
+  useEffect(() => {
+    if (!fetchUrl) { setResolved(''); return; }
+    getCachedUrl(fetchUrl, cacheKey).then(setResolved);
+  }, [fetchUrl, cacheKey]);
+  return resolved || fetchUrl;
+}
+
+export default function CachedImage({ src, cacheKey, ...props }: CachedImageProps) {
+  const resolvedSrc = useCachedUrl(src, cacheKey);
+  return <img src={resolvedSrc} {...props} />;
+}
@@ -4,7 +4,8 @@ import {
  ChevronDown, Repeat, Repeat1, Square, Music
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl } from '../api/subsonic';
+import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import CachedImage, { useCachedUrl } from './CachedImage';
 import { useTranslation } from 'react-i18next';

 function formatTime(seconds: number): string {
@@ -63,20 +64,18 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)), [seek]);

  return (
-    <div className="fs-bottom">
-      <div className="fs-progress-wrap">
-        <span className="fs-time">{formatTime(currentTime)}</span>
-        <div className="fs-progress-bar">
-          <input
-            type="range" min={0} max={1} step={0.001}
-            value={progress}
-            onChange={handleSeek}
-            style={{ '--pct': `${progress * 100}%` } as React.CSSProperties}
-            aria-label="progress"
-          />
-        </div>
-        <span className="fs-time">{formatTime(duration)}</span>
+    <div className="fs-progress-wrap">
+      <span className="fs-time">{formatTime(currentTime)}</span>
+      <div className="fs-progress-bar">
+        <input
+          type="range" min={0} max={1} step={0.001}
+          value={progress}
+          onChange={handleSeek}
+          style={{ '--pct': `${progress * 100}%` } as React.CSSProperties}
+          aria-label="progress"
+        />
      </div>
+      <span className="fs-time">{formatTime(duration)}</span>
    </div>
  );
 });
@@ -112,9 +111,11 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  const toggleRepeat = usePlayerStore(s => s.toggleRepeat);
  const playTrack    = usePlayerStore(s => s.playTrack);

-  const duration  = currentTrack?.duration ?? 0;
-  const coverUrl  = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
-  const upcoming  = queue.slice(queueIndex + 1, queueIndex + 15);
+  const duration    = currentTrack?.duration ?? 0;
+  const coverUrl    = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
+  const coverKey    = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
+  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
+  const upcoming    = queue.slice(queueIndex + 1, queueIndex + 15);

  // Close on Escape
  useEffect(() => {
@@ -126,26 +127,59 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  return (
    <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>
      {/* Crossfading blurred background */}
-      <FsBg url={coverUrl} />
+      <FsBg url={resolvedCoverUrl} />
      <div className="fs-bg-overlay" aria-hidden="true" />

      {/* Close button */}
-      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')} data-tooltip={t('player.closeTooltip')}>
+      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')} data-tooltip={t('player.closeTooltip')} data-tooltip-pos="bottom">
        <ChevronDown size={28} />
      </button>

-      {/* Main layout: cover left, upcoming right */}
+      {/* Two-column layout: left = cover + info + controls, right = playlist */}
      <div className="fs-layout">

-        {/* Left column: cover only */}
+        {/* Left column */}
        <div className="fs-left">
          <div className="fs-cover-wrap">
            {coverUrl ? (
-              <img src={coverUrl} alt={`${currentTrack?.album} Cover`} className="fs-cover" />
+              <CachedImage src={coverUrl} cacheKey={coverKey} alt={`${currentTrack?.album} Cover`} className="fs-cover" />
            ) : (
              <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
            )}
          </div>
+
+          <div className="fs-track-info">
+            <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
+            <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
+            <p className="fs-album">{currentTrack?.album ?? '—'}{currentTrack?.year ? ` · ${currentTrack.year}` : ''}</p>
+            {(currentTrack?.bitRate || currentTrack?.suffix) && (
+              <span className="fs-codec">
+                {[currentTrack.suffix?.toUpperCase(), currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
+              </span>
+            )}
+          </div>
+
+          <FsProgress duration={duration} />
+
+          <div className="fs-controls">
+            <button className="fs-btn fs-btn-sm" onClick={stop} data-tooltip="Stop">
+              <Square size={20} fill="currentColor" />
+            </button>
+            <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
+              <SkipBack size={28} />
+            </button>
+            <FsPlayBtn />
+            <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
+              <SkipForward size={28} />
+            </button>
+            <button
+              className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
+              onClick={toggleRepeat}
+              data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
+            >
+              {repeatMode === 'one' ? <Repeat1 size={20} /> : <Repeat size={20} />}
+            </button>
+          </div>
        </div>

        {/* Right column: upcoming tracks */}
@@ -160,7 +194,7 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
                  onClick={() => playTrack(track, queue)}
                >
                  {track.coverArt ? (
-                    <img src={buildCoverArtUrl(track.coverArt, 80)} alt="" className="fs-upcoming-art" />
+                    <CachedImage src={buildCoverArtUrl(track.coverArt, 80)} cacheKey={coverArtCacheKey(track.coverArt, 80)} alt="" className="fs-upcoming-art" />
                  ) : (
                    <div className="fs-upcoming-art fs-upcoming-placeholder"><Music size={14} /></div>
                  )}
@@ -175,46 +209,6 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
          </div>
        )}
      </div>
-
-      {/* Bottom: meta + progress + controls — centered across full width */}
-      <div className="fs-footer">
-        <div className="fs-footer-main">
-          <div className="fs-track-info">
-            <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
-            <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
-            <p className="fs-album">{currentTrack?.album ?? '—'}{currentTrack?.year ? ` · ${currentTrack.year}` : ''}</p>
-            {(currentTrack?.bitRate || currentTrack?.suffix) && (
-              <span className="fs-codec">
-                {[currentTrack.suffix?.toUpperCase(), currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
-              </span>
-            )}
-          </div>
-
-          {/* Progress bar — isolated sub-component */}
-          <FsProgress duration={duration} />
-        </div>
-
-        {/* Transport controls */}
-        <div className="fs-controls">
-          <button className="fs-btn fs-btn-sm" onClick={stop} data-tooltip="Stop">
-            <Square size={20} fill="currentColor" />
-          </button>
-          <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
-            <SkipBack size={28} />
-          </button>
-          <FsPlayBtn />
-          <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
-            <SkipForward size={28} />
-          </button>
-          <button
-            className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
-            onClick={toggleRepeat}
-            data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
-          >
-            {repeatMode === 'one' ? <Repeat1 size={20} /> : <Repeat size={20} />}
-          </button>
-        </div>
-      </div>
    </div>
  );
 }
@@ -1,26 +1,89 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play, ListPlus } from 'lucide-react';
-import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, getAlbum } from '../api/subsonic';
+import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey, getAlbum } from '../api/subsonic';
+import CachedImage, { useCachedUrl } from './CachedImage';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';

-export default function Hero() {
-  const { t } = useTranslation();
-  const [album, setAlbum] = useState<SubsonicAlbum | null>(null);
-  const navigate = useNavigate();
+const INTERVAL_MS = 10000;
+
+// Crossfading background — same layer pattern as FullscreenPlayer
+function HeroBg({ url }: { url: string }) {
+  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
+    url ? [{ url, id: 0, visible: true }] : []
+  );
+  const counter = useRef(1);

  useEffect(() => {
-    let cancelled = false;
-    getRandomAlbums(1).then(albums => {
-      if (!cancelled && albums[0]) setAlbum(albums[0]);
-    }).catch(() => {});
-    return () => { cancelled = true; };
+    if (!url) return;
+    const id = counter.current++;
+    setLayers(prev => [...prev, { url, id, visible: false }]);
+    const t1 = setTimeout(() => setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id }))), 20);
+    const t2 = setTimeout(() => setLayers(prev => prev.filter(l => l.id === id)), 900);
+    return () => { clearTimeout(t1); clearTimeout(t2); };
+  }, [url]);
+
+  return (
+    <>
+      {layers.map(layer => (
+        <div
+          key={layer.id}
+          className="hero-bg"
+          style={{
+            backgroundImage: `url(${layer.url})`,
+            opacity: layer.visible ? 1 : 0,
+            filter: layer.visible ? 'blur(0px)' : 'blur(18px)',
+          }}
+          aria-hidden="true"
+        />
+      ))}
+    </>
+  );
+}
+
+export default function Hero() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    getRandomAlbums(8).then(a => { if (a.length) setAlbums(a); }).catch(() => {});
  }, []);

-  if (!album) return <div className="hero-placeholder" />;
+  // Start / restart auto-advance timer
+  const startTimer = useCallback((len: number) => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    if (len <= 1) return;
+    timerRef.current = setInterval(() => {
+      setActiveIdx(prev => (prev + 1) % len);
+    }, INTERVAL_MS);
+  }, []);

-  const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
+  useEffect(() => {
+    startTimer(albums.length);
+    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+  }, [albums.length, startTimer]);
+
+  const goTo = useCallback((idx: number) => {
+    setActiveIdx(idx);
+    startTimer(albums.length);
+  }, [albums.length, startTimer]);
+
+  const album = albums[activeIdx] ?? null;
+
+  // Resolve background URL via cache
+  const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
+  const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
+  const resolvedBgUrl = useCachedUrl(bgRawUrl, bgCacheKey);
+
+  // Resolve cover thumbnail via cache
+  const coverRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
+  const coverCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 300) : '';
+
+  if (!album) return <div className="hero-placeholder" />;

  return (
    <div
@@ -30,17 +93,18 @@ export default function Hero() {
      onClick={() => navigate(`/album/${album.id}`)}
      style={{ cursor: 'pointer' }}
    >
-      {coverUrl && (
-        <div
-          className="hero-bg"
-          style={{ backgroundImage: `url(${coverUrl})` }}
-          aria-hidden="true"
-        />
-      )}
+      <HeroBg url={resolvedBgUrl} />
      <div className="hero-overlay" aria-hidden="true" />
-      <div className="hero-content animate-fade-in">
-        {coverUrl && (
-          <img className="hero-cover" src={coverUrl} alt={`${album.name} Cover`} />
+
+      {/* key causes re-mount → animate-fade-in triggers on each album change */}
+      <div className="hero-content animate-fade-in" key={album.id}>
+        {coverRawUrl && (
+          <CachedImage
+            className="hero-cover"
+            src={coverRawUrl}
+            cacheKey={coverCacheKey}
+            alt={`${album.name} Cover`}
+          />
        )}
        <div className="hero-text">
          <span className="hero-eyebrow">{t('hero.eyebrow')}</span>
@@ -73,7 +137,7 @@ export default function Hero() {
                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
                  }));
                  usePlayerStore.getState().enqueue(tracks);
-                } catch (err) { }
+                } catch (_) { }
              }}
              style={{ padding: '0 1.5rem', fontWeight: 600, fontSize: '0.95rem' }}
              data-tooltip={t('hero.enqueueTooltip')}
@@ -84,6 +148,20 @@ export default function Hero() {
          </div>
        </div>
      </div>
+
+      {/* Carousel dot indicators */}
+      {albums.length > 1 && (
+        <div className="hero-dots" onClick={e => e.stopPropagation()}>
+          {albums.map((_, i) => (
+            <button
+              key={i}
+              className={`hero-dot${i === activeIdx ? ' hero-dot-active' : ''}`}
+              onClick={() => goTo(i)}
+              aria-label={`Album ${i + 1}`}
+            />
+          ))}
+        </div>
+      )}
    </div>
  );
 }
@@ -1,12 +1,16 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { PlayCircle, User, Radio, RefreshCw } from 'lucide-react';
 import { getNowPlaying, SubsonicNowPlaying, buildCoverArtUrl } from '../api/subsonic';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';

 export default function NowPlayingDropdown() {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const [nowPlaying, setNowPlaying] = useState<SubsonicNowPlaying[]>([]);
+  const isPlaying = usePlayerStore(s => s.isPlaying);
+  const ownUsername = useAuthStore(s => s.getActiveServer()?.username ?? '');
  const [loading, setLoading] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

@@ -22,10 +26,16 @@ export default function NowPlayingDropdown() {
    }
  };

+  // Poll in background so the badge stays current without opening the dropdown
  useEffect(() => {
-    if (isOpen) {
-      fetchNowPlaying();
-    }
+    fetchNowPlaying();
+    const id = setInterval(fetchNowPlaying, 10000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Refresh immediately when dropdown is opened
+  useEffect(() => {
+    if (isOpen) fetchNowPlaying();
  }, [isOpen]);

  // Click outside to close
@@ -39,6 +49,12 @@ export default function NowPlayingDropdown() {
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

+  // For the current user, trust the local player state — the server keeps stale
+  // "now playing" entries for minutes after playback stops.
+  const visible = nowPlaying.filter(entry =>
+    entry.username === ownUsername ? isPlaying : true
+  );
+
  return (
    <div className="now-playing-dropdown" ref={dropdownRef} style={{ position: 'relative' }}>
      <button
@@ -48,9 +64,9 @@ export default function NowPlayingDropdown() {
        data-tooltip-pos="bottom"
        style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem' }}
      >
-        <Radio size={18} className={nowPlaying.length > 0 ? 'animate-pulse' : ''} style={{ color: nowPlaying.length > 0 ? 'var(--accent)' : 'inherit' }} />
+        <Radio size={18} className={visible.length > 0 ? 'animate-pulse' : ''} style={{ color: visible.length > 0 ? 'var(--accent)' : 'inherit' }} />
        <span>Live</span>
-        {nowPlaying.length > 0 && (
+        {visible.length > 0 && (
          <span style={{
            background: 'var(--accent)',
            color: 'var(--ctp-crust)',
@@ -59,7 +75,7 @@ export default function NowPlayingDropdown() {
            padding: '2px 6px',
            borderRadius: '10px'
          }}>
-            {nowPlaying.length}
+            {visible.length}
          </span>
        )}
      </button>
@@ -94,17 +110,17 @@ export default function NowPlayingDropdown() {
            </button>
          </div>

-          {loading && nowPlaying.length === 0 ? (
+          {loading && visible.length === 0 ? (
            <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
              {t('nowPlaying.loading')}
            </div>
-          ) : nowPlaying.length === 0 ? (
+          ) : visible.length === 0 ? (
            <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
              {t('nowPlaying.nobody')}
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-              {nowPlaying.map((stream, idx) => (
+              {visible.map((stream, idx) => (
                <div key={`${stream.id}-${idx}`} style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', background: 'var(--bg-hover)', padding: '0.5rem', borderRadius: '8px' }}>
                  <div style={{ width: '48px', height: '48px', flexShrink: 0, borderRadius: '6px', overflow: 'hidden', background: 'var(--bg-surface)' }}>
                    {stream.coverArt ? (
@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music, List, Square, Repeat, Repeat1, Maximize2
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl } from '../api/subsonic';
+import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import CachedImage from './CachedImage';
 import { useTranslation } from 'react-i18next';

 function formatTime(seconds: number): string {
@@ -18,6 +19,8 @@ export default function PlayerBar() {
  const { currentTrack, isPlaying, progress, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();

  const duration = currentTrack?.duration ?? 0;
+  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
+  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';

  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    seek(parseFloat(e.target.value));
@@ -45,11 +48,11 @@ export default function PlayerBar() {
          data-tooltip={currentTrack ? t('player.openFullscreen') : undefined}
        >
          {currentTrack?.coverArt ? (
-            <img
+            <CachedImage
              className="player-album-art"
-              src={buildCoverArtUrl(currentTrack.coverArt, 128)}
+              src={coverSrc}
+              cacheKey={coverKey}
              alt={`${currentTrack.album} Cover`}
-              loading="lazy"
            />
          ) : (
            <div className="player-album-art-placeholder">
@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle, ListMusic,
-  PanelLeftClose, PanelLeft
+  PanelLeftClose, PanelLeft, HelpCircle, Dices
 } from 'lucide-react';

 const PsysonicLogo = () => (
@@ -13,7 +13,8 @@ const PsysonicLogo = () => (
 const navItems = [
  { icon: Disc3, labelKey: 'sidebar.mainstage', to: '/' },
  { icon: Radio, labelKey: 'sidebar.newReleases', to: '/new-releases' },
-  { icon: Music4, labelKey: 'sidebar.allAlbums', to: '/albums' },
+  { icon: Music4,  labelKey: 'sidebar.allAlbums',    to: '/albums' },
+  { icon: Dices,   labelKey: 'sidebar.randomAlbums', to: '/random-albums' },
  { icon: Users, labelKey: 'sidebar.artists', to: '/artists' },
  { icon: ListMusic, labelKey: 'sidebar.playlists', to: '/playlists' },
  { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
@@ -69,6 +70,14 @@ export default function Sidebar({
          <BarChart3 size={isCollapsed ? 22 : 18} />
          {!isCollapsed && <span>{t('sidebar.statistics')}</span>}
        </NavLink>
+        <NavLink
+          to="/help"
+          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+          title={isCollapsed ? t('sidebar.help') : undefined}
+        >
+          <HelpCircle size={isCollapsed ? 22 : 18} />
+          {!isCollapsed && <span>{t('sidebar.help')}</span>}
+        </NavLink>
        <NavLink
          to="/settings"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}