Seseri 4.0 — "Sinyal" redesign

CHANGELOG.md

@@ -1,5 +1,106 @@
 # Changelog
 
+## 4.0.0 — 2026-07-12
+
+### "Sinyal" — new visual identity
+- Complete restyle: warm charcoal surfaces, amber "radio dial glow" default
+  accent (`#f2a33c`, was violet `#8b7cf6`), and a new type system —
+  Bricolage Grotesque (display) / Schibsted Grotesk (UI) / Spline Sans Mono
+  (numerals/labels).
+- Signature **frequency-line** waveform motif: the hero scrubber in the new
+  Now Playing sheet, and an animated line on the mini player while playing.
+- The 4 themes (Auto / Dark / Light / OLED Black) are kept, restyled to the
+  new palette. Dark ("Kor") and OLED ("Gece") text ramps are tuned for
+  readability — secondary text ~10:1 and tertiary/mono labels ~5.7–6.4:1 on
+  the background; navigation labels use the secondary tier. The accent picker
+  now offers **7** Sinyal swatches (Amber, Copper, Signal Red, Moss, Teal,
+  Sky, Lilac); **previously saved accents are remapped to their nearest new
+  swatch** on the fly (`ui/theme.ts` → `normalizeAccent`) — the stored
+  setting itself is left untouched, so rolling back is non-destructive.
+- **New brand mark**: the "sinyal" crest — five round-capped frequency bars —
+  replaces the S monogram everywhere (in-app logo, favicon, PWA/launcher
+  icons, monochrome themed icon). The in-app mark breathes gently and the
+  "Seseri" wordmark carries a soft signal sheen; both are static under
+  `prefers-reduced-motion`.
+- YouTube artwork now loads from the official `i.ytimg.com` CDN (derived
+  from the video id) instead of Piped/Invidious instance proxies, which
+  frequently go dark; search-result artwork also falls back to a calm
+  placeholder tile when an image fails to load.
+- **Mini player → mini transport**: skip back/forward and play/pause live
+  directly in the dock, and the progress hairline is a tap/drag seek slider —
+  no need to open the full player for everyday control. On wider screens the
+  transport (prev / skip / play / skip / next) sits centred, with the sleep
+  timer and speed selector grouped at the end (both kept in sync with the
+  sheet's controls). The expand chevron or the title area still opens the
+  Now Playing sheet (scrubber, queue, YouTube video frame).
+- **YouTube embed → audio background rescue**: when a track has to start on
+  the iframe fallback (which a locked phone pauses), the app keeps retrying
+  audio resolution in the background and hot-swaps to the `<audio>` element
+  at the same position the moment a stream resolves — restoring lock-screen
+  playback and Media Session controls without interrupting the listener.
+- **Language menu with real flags**: a custom accessible listbox
+  (`ui/lang-menu.ts`) with hand-drawn inline SVG flags (`ui/flags.ts`) —
+  Windows renders no emoji flags, and native `<option>` can't show images.
+  It now lives on the Home header too, not only in Settings.
+
+### Information architecture — full redesign
+- New primary navigation: a bottom tab bar on mobile / left sidebar on
+  desktop — **Home / Search / Library / Settings**.
+- **Home**: a "continue listening" rail built from cached progress +
+  subscriptions data, plus a subscriptions grid.
+- **Search**: iTunes search and RSS/YouTube paste share one screen, with
+  progressive dual-source results.
+- **Library**: Subscriptions and Downloads tabs with a storage-usage
+  summary; replaces the old home-screen favorites rows.
+- **Podcast detail**: episode list with sort/filter (unchanged data, new
+  frame).
+- **Now Playing**: a full-screen sheet on mobile / floating panel on
+  desktop, with transport, sleep timer, speed, and queue access — the mini
+  player now opens this sheet instead of navigating back into the feed.
+- **Queue**: promoted from a sort-bar dropdown to its own page view.
+- **Settings**: promoted from a modal `<dialog>` to its own page view (same
+  sections and stored options).
+
+### Routing
+- New `?view=search|library|queue|settings` deep links alongside the
+  existing `?podcast=` / `?rss=` / `?yt=` params, which are unchanged.
+- Back-button contract: one step from any feed/view always returns home
+  (`ui/router.ts` replaces rather than pushes between non-home states).
+- PWA manifest: `theme_color`/`background_color` updated to `#171310`; the
+  "Search" shortcut now opens `?view=search` instead of the bare start URL.
+
+### Architecture
+- UI split into a headless **playback-controller**
+  (`src/ui/playback-controller.ts`) plus per-view modules under
+  `src/ui/views/` (`home`, `search`, `library`, `podcast`, `queue`,
+  `settings`, `now-playing`) registered through a small view registry
+  (`src/ui/views.ts`) and a shared nav controller (`src/ui/nav.ts`). The
+  old `src/ui/screens/` (`player.ts`, `settings.ts`) and
+  `src/ui/queue-panel.ts` are retired; their logic moved into the new view
+  modules.
+- Styles split by concern — `tokens` / `themes` / `base` / `layout` /
+  `controls` / `overlays` / `signal-line`, plus one CSS file per view under
+  `src/styles/views/` — assembled through `src/styles/index.css`;
+  `components.css` is retired.
+- The runtime layer (`player/`, `feeds/`, `storage/`, `state/`, worker,
+  service worker) is untouched by the rewrite.
+- `src/ui/router.test.ts` grown to cover the new `?view=` routes (29 tests).
+
+### i18n
+- 18 new keys across all 8 languages for the new nav/home/library/queue/
+  now-playing UI (`nav_*`, `home_*`, `lib_*`, `np_open`, `np_close`).
+
+### Kept / compatible
+- All legacy deep links (`?podcast=`, `?rss=`, `?yt=`) still work unchanged.
+- Stored data keys (`pp_prog`, `pp_favs`, `pp_last_*`, settings) are
+  untouched — no migration needed, no data loss on upgrade.
+- Offline downloads, OPML import/export, sleep timer, media-session
+  integration, keyboard shortcuts (Space/arrows while a feed or the Now
+  Playing sheet is open), RTL (Arabic), `prefers-reduced-motion`, and focus
+  management all carry over as-is.
+- **116+ unit tests green** (client); worker suite untouched by this
+  redesign.
+
 ## 3.1.0 — 2026-07-08
 
 ### Added

README.md

@@ -11,6 +11,13 @@ YouTube link — stream, resume, queue and download episodes for offline
 listening. Vite + strict TypeScript frontend, optional Cloudflare Worker
 backend, installable as a PWA / Microsoft Store / Google Play app.
 
+**"Sinyal" design** — warm charcoal surfaces, an amber "radio dial glow"
+accent, and a signature frequency-line waveform motif. Navigation is a bottom
+tab bar (mobile) / left sidebar (desktop) across four sections — **Home**
+(continue-listening + subscriptions), **Search**, **Library**
+(subscriptions/downloads) and **Settings** — with a full-screen **Now
+Playing** sheet for transport, sleep timer, speed and queue access.
+
 **▶ Live:** https://iacbi.github.io/seseri/ ·
 **🪟 Windows app:** [download the installer](https://github.com/IACBI/seseri/releases/latest)
 
@@ -29,24 +36,27 @@ backend, installable as a PWA / Microsoft Store / Google Play app.
 | 🔍 **Podcast search** | by name, Apple Podcasts link, or a direct RSS feed URL |
 | ▶️ **YouTube shows** | search by name (channels/playlists/videos appear in results) or paste a link; audio streams through the Worker (Innertube + range-aware proxy → background/lock-screen playback) or public Piped instances, with an official `youtube-nocookie` embed fallback |
 | 📥 **Offline episodes** | downloads live in the Cache API and play (and seek) with no connection; feeds are cached in IndexedDB and refresh in the background (stale-while-revalidate) |
-| 🧾 **Play queue** | queue any episode as "up next" — the queue wins over list order |
-| 🎧 **Mini player** | leaving a feed keeps playing; a floating transport on the home screen takes you back |
-| 🌊 **Waveform scrubber** | per-episode waveform with drag-to-seek, live playhead and time tooltip |
-| 🎛 **Full player** | play/pause, prev/next, skip, speed 0.5×–2.5×, sleep timer, resume position |
-| 🖥 **Desktop layout** | ≥900px shows a library rail beside the episode pane |
-| ⭐ **Subscriptions** | star podcasts; OPML import/export + JSON backup |
-| 🎨 **Themes** | Auto (system), Dark, Light, OLED Black; 7 accent colors |
+| 🧾 **Play queue** | queue any episode as "up next" — the queue wins over list order; own page under **Queue** |
+| 🎧 **Mini transport** | leaving a feed keeps playing; the persistent dock carries skip/play controls (plus prev/next & speed on wide screens) and a seekable progress line — the chevron expands the full **Now Playing** sheet |
+| 🌊 **Frequency-line scrubber** | signature waveform motif — drag-to-seek hero scrubber in Now Playing, animated line on the mini player while playing |
+| 🎛 **Now Playing sheet** | full-screen (mobile) / floating panel (desktop): play/pause, prev/next, skip, speed 0.5×–2.5×, sleep timer, resume position |
+| 🖥 **Desktop layout** | ≥900px swaps the tab bar for a persistent left sidebar (Home/Search/Library/Settings) |
+| ⭐ **Subscriptions** | star podcasts; live in **Library**; OPML import/export + JSON backup |
+| 🎨 **Themes** | Auto (system), Dark, Light, OLED Black; 7 accent colors (amber "dial glow" default) |
 | 🌍 **Multilingual** | TR / EN / DE / FR / ES / AR / JA / RU (incl. RTL) |
 | 📲 **Installable** | PWA with maskable/monochrome icons, shortcuts, store screenshots |
-| ♿ **Accessible** | native `<dialog>` settings, aria-live status, keyboard-operable, `prefers-reduced-motion` |
+| ♿ **Accessible** | keyboard-operable views, aria-live status/busy states, focus management on navigation, `prefers-reduced-motion` |
 
 #### Keyboard shortcuts
 
+Active while a podcast feed or the Now Playing sheet is open (not while typing in a field):
+
 | Key | Action |
 |-----|--------|
 | `Space` | Play / pause |
 | `←` / `→` | Seek back / forward |
 | `↑` / `↓` | Previous / next episode |
+| `Esc` | Close the Now Playing sheet |
 
 ### 🚀 Getting started
 
@@ -89,9 +99,20 @@ and falls back to public CORS proxies automatically when it is unreachable.
 │   ├── player/            # audio engine, media session, sleep timer, offline downloads
 │   ├── state/             # signals: settings, queue, now-playing
 │   ├── storage/           # localStorage (legacy keys), IndexedDB, OPML
-│   ├── ui/                # shell, router, screens, mini player, theme, toast, waveform
+│   ├── ui/
+│   │   ├── playback-controller.ts  # headless playback session, shared by every view
+│   │   ├── views/          # home, search, library, podcast, queue, settings, now-playing
+│   │   ├── views.ts        # view registry (show/hide, focus hand-off)
+│   │   ├── nav.ts          # tab bar / sidebar controller
+│   │   ├── router.ts       # ?podcast= / ?rss= / ?yt= / ?view= ↔ history
+│   │   └── shell.ts, theme.ts, mini-player.ts, toast.ts, waveform.ts, confirm.ts, …
 │   ├── i18n/              # 8 languages, compile-time key completeness
-│   ├── styles/            # tokens / themes / base / components
+│   ├── styles/
+│   │   ├── tokens.css, themes.css, base.css, layout.css, controls.css,
+│   │   │   overlays.css, signal-line.css   # design-system layers
+│   │   ├── views/          # one stylesheet per view (home, search, library, podcast,
+│   │   │                   # queue, settings, now-playing)
+│   │   └── index.css       # barrel import
 │   └── sw.ts              # service worker (injectManifest)
 ├── worker/                # Cloudflare Worker API (Hono): /v1/feed /v1/itunes /v1/yt/*
 ├── public/                # manifest, icons (incl. maskable/monochrome), screenshots,
@@ -142,6 +163,14 @@ linki yapıştır — çal, kaldığın yerden devam et, kuyruğa ekle, bölüml
 Cloudflare Worker arka ucu; PWA / Microsoft Store / Google Play uygulaması
 olarak kurulabilir.
 
+**"Sinyal" tasarımı** — sıcak antrasit yüzeyler, kehribar "radyo kadranı"
+vurgusu ve imza niteliğindeki frekans-çizgisi dalga-form motifi. Gezinme;
+alttan sekme çubuğu (mobil) / soldan kenar çubuğu (masaüstü) olmak üzere dört
+bölümden oluşur — **Ana Sayfa** (kaldığın yerden devam et + abonelikler),
+**Ara**, **Kütüphane** (abonelikler/indirilenler) ve **Ayarlar** — ayrıca
+oynatma, uyku zamanlayıcısı, hız ve kuyruğa erişim için tam ekran **Şimdi
+Çalıyor** paneli.
+
 **▶ Canlı:** https://iacbi.github.io/seseri/ ·
 **🪟 Windows uygulaması:** [kurulumu indir](https://github.com/IACBI/seseri/releases/latest)
 
@@ -152,16 +181,16 @@ olarak kurulabilir.
 | 🔍 **Podcast arama** | isim, Apple Podcasts linki veya doğrudan RSS URL'si |
 | ▶️ **YouTube yayınları** | **isimle ara** (kanal/playlist/videolar sonuçlarda listelenir) veya link yapıştır; ses Worker üzerinden akar (Innertube + range destekli proxy → arka plan/kilit ekranı çalma) ya da Piped'e, o da olmazsa resmi `youtube-nocookie` embed'e düşer |
 | 📥 **Çevrimdışı bölümler** | indirilenler Cache API'de yaşar, bağlantısız çalar ve sarar; feed'ler IndexedDB'de önbelleklenir, arka planda tazelenir |
-| 🧾 **Kuyruk** | bölümü "sıradaki" olarak işaretle — kuyruk, liste sırasından önce gelir |
-| 🎧 **Mini oynatıcı** | feed'den çıkınca çalma sürer; ana ekrandaki yüzen bar seni geri götürür |
-| 🌊 **Dalga-form çubuğu** | bölüme özel, sürüklenebilir dalga-form; canlı oynatma başı |
-| 🎛 **Tam oynatıcı** | oynat/duraklat, önceki/sonraki, atlama, 0.5×–2.5× hız, uyku zamanlayıcısı |
-| 🖥 **Masaüstü düzeni** | ≥900px'te solda kütüphane rayı, sağda bölüm paneli |
-| ⭐ **Abonelikler** | yıldızla; OPML içe/dışa aktarma + JSON yedek |
-| 🎨 **Temalar** | Otomatik (sistem), Koyu, Açık, OLED Siyah; 7 vurgu rengi |
+| 🧾 **Kuyruk** | bölümü "sıradaki" olarak işaretle — kuyruk, liste sırasından önce gelir; kendi sayfası **Kuyruk** görünümünde |
+| 🎧 **Mini transport** | feed'den çıkınca çalma sürer; kalıcı dock üzerinde atlama/oynat kontrolleri (geniş ekranda önceki/sonraki ve hız) ve dokunarak sarılabilir ilerleme çizgisi — ok simgesi tam **Şimdi Çalıyor** panelini açar |
+| 🌊 **Frekans-çizgisi dalga-form** | imza motif — Şimdi Çalıyor panelinde sürüklenebilir kahraman dalga-form, çalarken mini oynatıcıda animasyonlu çizgi |
+| 🎛 **Şimdi Çalıyor paneli** | tam ekran (mobil) / yüzen panel (masaüstü): oynat/duraklat, önceki/sonraki, atlama, 0.5×–2.5× hız, uyku zamanlayıcısı |
+| 🖥 **Masaüstü düzeni** | ≥900px'te sekme çubuğu yerini kalıcı soldan kenar çubuğuna bırakır (Ana Sayfa/Ara/Kütüphane/Ayarlar) |
+| ⭐ **Abonelikler** | yıldızla; **Kütüphane**'de yaşar; OPML içe/dışa aktarma + JSON yedek |
+| 🎨 **Temalar** | Otomatik (sistem), Koyu, Açık, OLED Siyah; 7 vurgu rengi (varsayılan kehribar "kadran ışıltısı") |
 | 🌍 **Çok dilli** | TR / EN / DE / FR / ES / AR / JA / RU (RTL dahil) |
 | 📲 **Kurulabilir** | maskable/monochrome ikonlu PWA, kısayollar, mağaza görselleri |
-| ♿ **Erişilebilir** | native `<dialog>` ayarlar, aria-live durum, klavye, `prefers-reduced-motion` |
+| ♿ **Erişilebilir** | klavyeyle kullanılabilir görünümler, aria-live durum/busy, gezinmede odak yönetimi, `prefers-reduced-motion` |
 
 ### 🚀 Hızlı başlangıç
 

desktop/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Seseri",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "identifier": "io.github.iacbi.seseri",
   "build": {
     "frontendDist": "https://iacbi.github.io/seseri/",

docs/STORE.md

@@ -73,14 +73,14 @@ npm install          # bir kez
 npx tauri build      # ilk seferde Rust bağımlılıklarını derler (5-15 dk)
 ```
 
-Çıktı: `desktop/src-tauri/target/release/bundle/nsis/Seseri_3.0.0_x64-setup.exe`
+Çıktı: `desktop/src-tauri/target/release/bundle/nsis/Seseri_4.0.0_x64-setup.exe`
 
 ### Dağıtma (GitHub Releases)
 
 ```bash
-gh release create v3.0.0 \
-  "desktop/src-tauri/target/release/bundle/nsis/Seseri_3.0.0_x64-setup.exe" \
-  --repo IACBI/seseri --title "Seseri 3.0.0" \
+gh release create v4.0.0 \
+  "desktop/src-tauri/target/release/bundle/nsis/Seseri_4.0.0_x64-setup.exe" \
+  --repo IACBI/seseri --title "Seseri 4.0.0" \
   --notes "Windows kurulumu — indir, çalıştır, kur."
 ```
 
@@ -97,8 +97,11 @@ gh release create v3.0.0 \
 - **Sürüm güncelleme:** uygulama içeriği web'den geldiği için yeni installer
   yalnızca ikon/pencere gibi kabuk değişikliklerinde gerekir
   (`tauri.conf.json` → `version` artır, yeniden `tauri build`, yeni release).
-- İkonlar `npx tauri icon ../public/icons/icon-512.png` ile S-monogramından
-  yeniden üretilir.
+- İkonlar `npx tauri icon ../public/icons/icon-512.png` ile "sinyal"
+  markasından (beş çubuklu frekans işareti) yeniden üretilir; kaynak PNG'ler
+  `node scripts/icons.cjs` ile `public/icons/seseri.svg`'den çıkar. Not:
+  4.0'ta marka S-monogramından sinyal işaretine geçti — bir sonraki masaüstü
+  sürümünde `tauri icon` adımı yeniden koşulmalı.
 
 ---
 
@@ -127,7 +130,13 @@ gh release create v3.0.0 \
    kontrolleri, URL çubuğunun görünmediği doğrulanır.
 7. **Grow → Store presence → Main store listing:** açıklama, 512 ikon,
    1024×500 feature graphic, telefon ekran görüntüleri
-   (`public/screenshots/narrow-*.png` kullanılabilir).
+   (`public/screenshots/narrow-*.png` kullanılabilir — 4.0 ile birlikte
+   "Sinyal" kimliğini ve yeni gezinmeyi (Ana Sayfa/Ara/Kütüphane/Ayarlar +
+   Şimdi Çalıyor paneli) yansıtacak şekilde yeniden üretilecek).
+   Açıklama metni artık sıcak antrasit/kehribar "Sinyal" kimliğini ve
+   alttan sekme çubuğu / soldan kenar çubuğu ile Ana Sayfa, Ara, Kütüphane,
+   Ayarlar ekranlarını anlatmalı — eski iki ekranlı (arama + oynatıcı) ve
+   menekşe renkli sürüm açıklaması artık geçerli değil.
 8. **Policy → App content:** gizlilik politikası URL'i, Data safety formu
    (veri toplanmıyor; tüm veriler cihazda), IARC anketi.
 9. **Production → Create release** → aynı `.aab` → **Submit for review**
@@ -178,7 +187,7 @@ Bu adımlar tamamlanana kadar iOS desteği "Safari PWA" olarak belgelenir.
 
 ## Sürüm kontrol listesi
 
-- [ ] `npm run verify` yeşil (lint, tsc, 102+26 test, build)
+- [ ] `npm run verify` yeşil (lint, tsc, 121 istemci + 26 worker birim testi, build)
 - [ ] `v*` tag'i push edilince `.github/workflows/desktop.yml` NSIS
       kurulumunu taslak Release olarak üretir (imzasız — SmartScreen uyarısı)
 - [ ] `node scripts/smoke-p3-offline.cjs` ve `smoke-p5-mini.cjs` yeşil