Fix read-article handling across feed filter switches in article view

Article view marks the displayed article read in place (feed.read =
true) without removing it, so currentIndex stays valid while paging.
leaveArticleView() already dropped those afterward, but switching the
feed filter while still in article view never did — so an
already-read article could resurface (re-selecting its feed
re-projected it from allItems as if still unread). Extracted the drop
into a shared dropReadArticles() and call it from setFeedFilter() too.

Also, switching the filter while in article view immediately displays
the new feed's article in full, which is a genuine view — same as
paging or toggling into article view — but nothing marked it read, so
a single-article feed could never be marked read that way at all. This
was deliberately excluded (see commit 169c294) after a generic watch
proved too broad; setFeedFilter() now marks it explicitly, scoped to
article view only, so list view's scroll-driven read-marking is
unaffected.

Cargo.lock

@@ -251,14 +251,13 @@ checksum = "683d7910e743518b0e34f1186f92494becacb047c7b6bf616c96772180fef923"
 
 [[package]]
 name = "ammonia"
-version = "4.1.2"
+version = "4.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17e913097e1a2124b46746c980134e8c954bc17a6a59bb3fde96f088d126dde6"
+checksum = "dc6d763210e2eb7670d1a5183a08bebefa3f97db2a738a684f2ce00bd49f681d"
 dependencies = [
- "cssparser 0.35.0",
+ "cssparser",
- "html5ever 0.35.0",
+ "html5ever",
  "maplit",
- "tendril 0.4.3",
  "url",
 ]
 
@@ -323,15 +322,15 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.102"
+version = "1.0.104"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
+checksum = "330a5ed07fa54e4702c9d6c4174f74427fc0ef6e214bbd677ae50a5099946470"
 
 [[package]]
 name = "atom_syndication"
-version = "0.12.8"
+version = "0.12.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "39d8b8ef99e33deb2a51504888222225797f48bace2f0cab01975746a39c05bb"
+checksum = "d48d93a31c932d58b9fd68664a904ae5b74bea37f06c5f68d5bec92f0cdd106d"
 dependencies = [
  "chrono",
  "derive_builder",
@@ -386,12 +385,18 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
 [[package]]
-name = "bcrypt"
+name = "base64"
-version = "0.19.1"
+version = "0.23.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "24ae5479c93d3720e4c1dbd6b945b97457c50cb672781104768190371df1a905"
+checksum = "ac07cdecf99051d9a5238b80f35af32cdeba5b336e55d957b318b50137e18da5"
+
+[[package]]
+name = "bcrypt"
+version = "0.19.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a0cd0bd35a28836d528d2b58ad499bc3c5641d59379421b1be9eeb0c2f2b912a"
 dependencies = [
- "base64 0.22.1",
+ "base64 0.23.1",
  "blowfish",
  "getrandom 0.4.2",
  "subtle",
@@ -506,9 +511,9 @@ checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
 
 [[package]]
 name = "chacha20"
-version = "0.10.0"
+version = "0.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6f8d983286843e49675a4b7a2d174efe136dc93a18d69130dd18198a6c167601"
+checksum = "65c35e4b699c7e15ccbe7ee35c005e4fc0a278d22238a2857e6ce2dadeda1b06"
 dependencies = [
  "cfg-if",
  "cpufeatures 0.3.0",
@@ -668,42 +673,19 @@ dependencies = [
  "hybrid-array",
 ]
 
-[[package]]
-name = "cssparser"
-version = "0.35.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e901edd733a1472f944a45116df3f846f54d37e67e68640ac8bb69689aca2aa"
-dependencies = [
- "cssparser-macros 0.6.1",
- "dtoa-short",
- "itoa",
- "phf 0.11.3",
- "smallvec",
-]
-
 [[package]]
 name = "cssparser"
 version = "0.37.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8c9cdaae01d5ed7882b04d795e7f752f46ff52d2fa3b50a20d28c464510bba98"
 dependencies = [
- "cssparser-macros 0.7.0",
+ "cssparser-macros",
  "dtoa-short",
  "itoa",
- "phf 0.13.1",
+ "phf",
  "smallvec",
 ]
 
-[[package]]
-name = "cssparser-macros"
-version = "0.6.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
-dependencies = [
- "quote",
- "syn",
-]
-
 [[package]]
 name = "cssparser-macros"
 version = "0.7.0"
@@ -963,10 +945,10 @@ dependencies = [
 ]
 
 [[package]]
-name = "dotenv"
+name = "dotenvy"
-version = "0.15.0"
+version = "0.15.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77c90badedccf4105eca100756a0b1289e191f6fcbdadd3cee1d2f614f97da8f"
+checksum = "1aaf95b3e5c8f23aa320147307562d361db0ae0d51242340f558153b4eb2439b"
 
 [[package]]
 name = "downcast-rs"
@@ -1124,16 +1106,6 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "42703706b716c37f96a77aea830392ad231f44c9e9a67872fa5548707e11b11c"
 
-[[package]]
-name = "futf"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "df420e2e84819663797d1ec6544b13c5be84629e7bb00dc960d6917db2987843"
-dependencies = [
- "mac",
- "new_debug_unreachable",
-]
-
 [[package]]
 name = "futures"
 version = "0.3.32"
@@ -1281,11 +1253,13 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0de51e6874e94e7bf76d726fc5d13ba782deca734ff60d5bb2fb2607c7406555"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "r-efi 6.0.0",
  "rand_core 0.10.1",
  "wasip2",
  "wasip3",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1332,9 +1306,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.4.14"
+version = "0.4.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "171fefbc92fe4a4de27e0698d6a5b392d6a0e333506bc49133760b3bcf948733"
+checksum = "ef8e5e5a340588f4452631496976cf8636d4a7ecf600239fdc27615d2530bc16"
 dependencies = [
  "atomic-waker",
  "bytes",
@@ -1396,17 +1370,6 @@ dependencies = [
  "digest 0.10.7",
 ]
 
-[[package]]
-name = "html5ever"
-version = "0.35.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "55d958c2f74b664487a2035fe1dadb032c48718a03b63f3ab0b8537db8549ed4"
-dependencies = [
- "log",
- "markup5ever 0.35.0",
- "match_token",
-]
-
 [[package]]
 name = "html5ever"
 version = "0.39.0"
@@ -1414,7 +1377,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "46a1761807faccc9a19e86944bbf40610014066306f96edcdedc2fb714bcb7b8"
 dependencies = [
  "log",
- "markup5ever 0.39.0",
+ "markup5ever",
 ]
 
 [[package]]
@@ -1492,7 +1455,7 @@ dependencies = [
  "bytes",
  "futures-channel",
  "futures-core",
- "h2 0.4.14",
+ "h2 0.4.19",
  "http 1.4.1",
  "http-body",
  "httparse",
@@ -1899,29 +1862,12 @@ version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
 
-[[package]]
-name = "mac"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
-
 [[package]]
 name = "maplit"
 version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3e2e65a1a2e43cfcb47a895c4c8b10d1f4a61097f9f254f183aee60cad9c651d"
 
-[[package]]
-name = "markup5ever"
-version = "0.35.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "311fe69c934650f8f19652b3946075f0fc41ad8757dbb68f1ca14e7900ecc1c3"
-dependencies = [
- "log",
- "tendril 0.4.3",
- "web_atoms 0.1.3",
-]
-
 [[package]]
 name = "markup5ever"
 version = "0.39.0"
@@ -1929,19 +1875,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7122d987ec5f704ee56f6e5b41a7d93722e9aae27ae07cafa4036c4d3f9757de"
 dependencies = [
  "log",
- "tendril 0.5.0",
+ "tendril",
- "web_atoms 0.2.4",
+ "web_atoms",
-]
-
-[[package]]
-name = "match_token"
-version = "0.35.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac84fd3f360fcc43dc5f5d186f02a94192761a080e8bc58621ad4d12296a58cf"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
 ]
 
 [[package]]
@@ -2073,55 +2008,25 @@ version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
-[[package]]
-name = "phf"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078"
-dependencies = [
- "phf_macros 0.11.3",
- "phf_shared 0.11.3",
-]
-
 [[package]]
 name = "phf"
 version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c1562dc717473dbaa4c1f85a36410e03c047b2e7df7f45ee938fbef64ae7fadf"
 dependencies = [
- "phf_macros 0.13.1",
+ "phf_macros",
- "phf_shared 0.13.1",
+ "phf_shared",
  "serde",
 ]
 
-[[package]]
-name = "phf_codegen"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aef8048c789fa5e851558d709946d6d79a8ff88c0440c587967f8e94bfb1216a"
-dependencies = [
- "phf_generator 0.11.3",
- "phf_shared 0.11.3",
-]
-
 [[package]]
 name = "phf_codegen"
 version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "49aa7f9d80421bca176ca8dbfebe668cc7a2684708594ec9f3c0db0805d5d6e1"
 dependencies = [
- "phf_generator 0.13.1",
+ "phf_generator",
- "phf_shared 0.13.1",
+ "phf_shared",
-]
-
-[[package]]
-name = "phf_generator"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c80231409c20246a13fddb31776fb942c38553c51e871f8cbd687a4cfb5843d"
-dependencies = [
- "phf_shared 0.11.3",
- "rand 0.8.6",
 ]
 
 [[package]]
@@ -2131,20 +2036,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "135ace3a761e564ec88c03a77317a7c6b80bb7f7135ef2544dbe054243b89737"
 dependencies = [
  "fastrand",
- "phf_shared 0.13.1",
+ "phf_shared",
-]
-
-[[package]]
-name = "phf_macros"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f84ac04429c13a7ff43785d75ad27569f2951ce0ffd30a3321230db2fc727216"
-dependencies = [
- "phf_generator 0.11.3",
- "phf_shared 0.11.3",
- "proc-macro2",
- "quote",
- "syn",
 ]
 
 [[package]]
@@ -2153,22 +2045,13 @@ version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "812f032b54b1e759ccd5f8b6677695d5268c588701effba24601f6932f8269ef"
 dependencies = [
- "phf_generator 0.13.1",
+ "phf_generator",
- "phf_shared 0.13.1",
+ "phf_shared",
  "proc-macro2",
  "quote",
  "syn",
 ]
 
-[[package]]
-name = "phf_shared"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5"
-dependencies = [
- "siphasher",
-]
-
 [[package]]
 name = "phf_shared"
 version = "0.13.1"
@@ -2282,9 +2165,9 @@ dependencies = [
 
 [[package]]
 name = "quick-xml"
-version = "0.39.4"
+version = "0.41.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cdcc8dd4e2f670d309a5f0e83fe36dfdc05af317008fea29144da1a2ac858e5e"
+checksum = "e660451e55124f798a69a5af3f49ccfbefbd41910eefd25caf2393e1f3473ec1"
 dependencies = [
  "encoding_rs",
  "memchr",
@@ -2312,15 +2195,16 @@ dependencies = [
 
 [[package]]
 name = "quinn-proto"
-version = "0.11.14"
+version = "0.11.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "434b42fec591c96ef50e21e886936e66d3cc3f737104fdb9b737c40ffb94c098"
+checksum = "04759210543be93709136e28212294a659ef5001836ff4eab4d663e4529bba83"
 dependencies = [
  "aws-lc-rs",
  "bytes",
- "getrandom 0.3.4",
+ "getrandom 0.4.2",
  "lru-slab",
- "rand 0.9.4",
+ "rand 0.10.1",
+ "rand_pcg",
  "ring",
  "rustc-hash",
  "rustls",
@@ -2367,15 +2251,6 @@ version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8dcc9c7d52a811697d2151c701e0d08956f92b0e24136cf4cf27b57a6a0d9bf"
 
-[[package]]
-name = "rand"
-version = "0.8.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ca0ecfa931c29007047d1bc58e623ab12e5590e8c7cc53200d5202b69266d8a"
-dependencies = [
- "rand_core 0.6.4",
-]
-
 [[package]]
 name = "rand"
 version = "0.9.4"
@@ -2407,12 +2282,6 @@ dependencies = [
  "rand_core 0.9.5",
 ]
 
-[[package]]
-name = "rand_core"
-version = "0.6.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
-
 [[package]]
 name = "rand_core"
 version = "0.9.5"
@@ -2428,6 +2297,15 @@ version = "0.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "63b8176103e19a2643978565ca18b50549f6101881c443590420e4dc998a3c69"
 
+[[package]]
+name = "rand_pcg"
+version = "0.10.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "caa0f4137e1c0a72f4c651489402276c8e8e1cf081f3b0ba156d2cbeef09e86a"
+dependencies = [
+ "rand_core 0.10.1",
+]
+
 [[package]]
 name = "raw-cpuid"
 version = "11.6.0"
@@ -2493,7 +2371,7 @@ dependencies = [
  "futures-channel",
  "futures-core",
  "futures-util",
- "h2 0.4.14",
+ "h2 0.4.19",
  "http 1.4.1",
  "http-body",
  "http-body-util",
@@ -2539,9 +2417,9 @@ dependencies = [
 
 [[package]]
 name = "rss"
-version = "2.0.13"
+version = "2.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d0e38781082c53bdde56e6081698c06831f69a27eac2593ed6b6cb2511424ad5"
+checksum = "dc13570823abc675c60d7837f1fe7daaf18dd181a3cacb3c6ba7a062eef581c0"
 dependencies = [
  "atom_syndication",
  "derive_builder",
@@ -2550,7 +2428,7 @@ dependencies = [
 
 [[package]]
 name = "rss-reader"
-version = "0.1.0"
+version = "0.9.1"
 dependencies = [
  "actix-cors",
  "actix-governor",
@@ -2564,7 +2442,7 @@ dependencies = [
  "dateparser",
  "diesel",
  "diesel_migrations",
- "dotenv",
+ "dotenvy",
  "env_logger",
  "futures",
  "hmac",
@@ -2713,13 +2591,13 @@ version = "0.27.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bdd0be4d296f048bfb06dd01bbc80ef789ddd2e55583e8d2e6b804942abfabc2"
 dependencies = [
- "cssparser 0.37.0",
+ "cssparser",
  "ego-tree",
  "getopts",
- "html5ever 0.39.0",
+ "html5ever",
  "precomputed-hash",
  "selectors",
- "tendril 0.5.0",
+ "tendril",
 ]
 
 [[package]]
@@ -2752,12 +2630,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8adfa1c298912827b8a28b223b3b874357397ae706e6190acd9bf28cee99114d"
 dependencies = [
  "bitflags",
- "cssparser 0.37.0",
+ "cssparser",
  "derive_more",
  "log",
  "new_debug_unreachable",
- "phf 0.13.1",
+ "phf",
- "phf_codegen 0.13.1",
+ "phf_codegen",
  "precomputed-hash",
  "rustc-hash",
  "servo_arc",
@@ -2956,19 +2834,6 @@ version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
 
-[[package]]
-name = "string_cache"
-version = "0.8.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf776ba3fa74f83bf4b63c3dcbbf82173db2632ed8452cb2d891d33f459de70f"
-dependencies = [
- "new_debug_unreachable",
- "parking_lot",
- "phf_shared 0.11.3",
- "precomputed-hash",
- "serde",
-]
-
 [[package]]
 name = "string_cache"
 version = "0.9.0"
@@ -2977,30 +2842,18 @@ checksum = "a18596f8c785a729f2819c0f6a7eae6ebeebdfffbfe4214ae6b087f690e31901"
 dependencies = [
  "new_debug_unreachable",
  "parking_lot",
- "phf_shared 0.13.1",
+ "phf_shared",
  "precomputed-hash",
 ]
 
-[[package]]
-name = "string_cache_codegen"
-version = "0.5.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c711928715f1fe0fe509c53b43e993a9a557babc2d0a3567d0a3006f1ac931a0"
-dependencies = [
- "phf_generator 0.11.3",
- "phf_shared 0.11.3",
- "proc-macro2",
- "quote",
-]
-
 [[package]]
 name = "string_cache_codegen"
 version = "0.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "585635e46db231059f76c5849798146164652513eb9e8ab2685939dd90f29b69"
 dependencies = [
- "phf_generator 0.13.1",
+ "phf_generator",
- "phf_shared 0.13.1",
+ "phf_shared",
  "proc-macro2",
  "quote",
 ]
@@ -3069,17 +2922,6 @@ dependencies = [
  "libc",
 ]
 
-[[package]]
-name = "tendril"
-version = "0.4.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d24a120c5fc464a3458240ee02c299ebcb9d67b5249c8848b09d639dca8d7bb0"
-dependencies = [
- "futf",
- "mac",
- "utf-8",
-]
-
 [[package]]
 name = "tendril"
 version = "0.5.0"
@@ -3573,28 +3415,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
-[[package]]
-name = "web_atoms"
-version = "0.1.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "57ffde1dc01240bdf9992e3205668b235e59421fd085e8a317ed98da0178d414"
-dependencies = [
- "phf 0.11.3",
- "phf_codegen 0.11.3",
- "string_cache 0.8.9",
- "string_cache_codegen 0.5.4",
-]
-
 [[package]]
 name = "web_atoms"
 version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d7cff6eef815df1834fd250e3a2ff436044d82a9f1bc1980ca1dbdf07effc538"
 dependencies = [
- "phf 0.13.1",
+ "phf",
- "phf_codegen 0.13.1",
+ "phf_codegen",
- "string_cache 0.9.0",
+ "string_cache",
- "string_cache_codegen 0.6.1",
+ "string_cache_codegen",
 ]
 
 [[package]]

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "rss-reader"
-version = "0.1.0"
+version = "0.9.1"
 edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -18,7 +18,7 @@ serde_derive = "1.0.228"
 actix-service = "2.0.3"
 diesel = { version = "2.3", features = ["postgres", "chrono"] }
 diesel_migrations = "2.3"
-dotenv = "0.15.0"
+dotenvy = "0.15"
 bcrypt = "0.19"
 uuid = {version = "1.23", features=["serde", "v4"]}
 jwt = "0.16.0"

docker-compose.yml

@@ -2,6 +2,7 @@ services:
   postgres:
     container_name: "rss-postgres"
     image: "postgres:18"
+    restart: unless-stopped
     ports:
       - "5432:5432"
     environment:
@@ -16,6 +17,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+    restart: unless-stopped
     depends_on:
       - postgres
     environment:
@@ -31,6 +33,7 @@ services:
     build:
       context: ./vue
       dockerfile: Dockerfile
+    restart: unless-stopped
     depends_on:
       - backend
     ports:

migrations/2026-09-10-000000_add_unique_feed_item_url_per_feed/down.sql

@@ -0,0 +1,3 @@
+-- This file should undo anything in `up.sql`
+ALTER TABLE feed_item
+DROP CONSTRAINT feed_item_feed_id_url_unique;

migrations/2026-09-10-000000_add_unique_feed_item_url_per_feed/up.sql

@@ -0,0 +1,36 @@
+-- Your SQL goes here
+
+-- Concurrent syncs for the same feed could previously race past the
+-- application-level "does this article already exist" check and both
+-- insert, producing duplicate feed items. Before enforcing uniqueness,
+-- collapse any duplicates that already exist, keyed on the article's link
+-- (rather than its title) since that's the stable identity RSS items are
+-- built around — some feeds edit a headline after publishing while keeping
+-- the same link, which title-based matching would treat as a new article.
+
+-- If any duplicate in a group was already read, propagate that onto the
+-- surviving (lowest-id) row first, so this one-time cleanup can't make an
+-- already-read article look unread again.
+UPDATE feed_item AS keep
+SET read = true
+FROM feed_item AS dupe
+WHERE keep.feed_id = dupe.feed_id
+  AND keep.url = dupe.url
+  AND keep.id <> dupe.id
+  AND keep.id = (
+    SELECT MIN(candidate.id)
+    FROM feed_item AS candidate
+    WHERE candidate.feed_id = dupe.feed_id
+      AND candidate.url = dupe.url
+  )
+  AND dupe.read = true;
+
+-- Keep the oldest (lowest id) row of each duplicate set.
+DELETE FROM feed_item a
+USING feed_item b
+WHERE a.feed_id = b.feed_id
+  AND a.url = b.url
+  AND a.id > b.id;
+
+ALTER TABLE feed_item
+ADD CONSTRAINT feed_item_feed_id_url_unique UNIQUE (feed_id, url);

src/auth/jwt.rs

@@ -6,7 +6,7 @@ use std::env;
 
 use actix_web::HttpRequest;
 use chrono::{Duration, Utc};
-use dotenv::dotenv;
+use dotenvy::dotenv;
 use hmac::{Hmac, Mac};
 use jwt::{Header, SignWithKey, Token, VerifyWithKey};
 use serde::{Deserialize, Serialize};

src/database.rs

@@ -1,7 +1,7 @@
 use diesel::pg::PgConnection;
 use diesel::prelude::*;
 use diesel_migrations::{embed_migrations, EmbeddedMigrations, MigrationHarness};
-use dotenv::dotenv;
+use dotenvy::dotenv;
 use std::env;
 
 pub const MIGRATIONS: EmbeddedMigrations = embed_migrations!("migrations");

src/main.rs

@@ -1,10 +1,9 @@
 extern crate diesel;
-extern crate dotenv;
 
 use actix_cors::Cors;
 use actix_service::Service;
 use actix_web::{App, HttpMessage, HttpResponse, HttpServer};
-use dotenv::dotenv;
+use dotenvy::dotenv;
 use futures::future::{ok, Either};
 use std::env;
 mod auth;

src/reader/sync.rs

@@ -4,8 +4,7 @@ use crate::error::AppError;
 use crate::json_serialization::user::JsonUser;
 use crate::models::feed::rss_feed::Feed;
 use crate::models::feed_item::new_feed_item::NewFeedItem;
-use crate::models::feed_item::rss_feed_item::FeedItem;
+use crate::schema::feed_item::{feed_id, url};
-use crate::schema::feed_item::{feed_id, title};
 use crate::{
     database::establish_connection,
     schema::{
@@ -143,24 +142,29 @@ fn create_feed_item(item: Item, feed: &Feed, connection: &mut PgConnection) -> a
         }
     }
 
-    let existing_item: Vec<FeedItem> = feed_item::table
+    let new_feed_item = NewFeedItem::new(
-        .filter(feed_id.eq(feed.id))
+        feed.id,
-        .filter(title.eq(&item_title))
+        content.clone(),
-        .load(connection)?;
+        item_title.clone(),
+        item.link.expect("checked above"),
+        Some(time),
+    );
 
-    if existing_item.is_empty() {
+    // `on_conflict` on the (feed_id, url) unique constraint makes this
-        let new_feed_item = NewFeedItem::new(
+    // insert idempotent, so two syncs for the same feed running concurrently
-            feed.id,
+    // (e.g. a sync button press racing a page-reload sync) can't both pass a
-            content.clone(),
+    // check-then-insert race and create duplicate items. Keying on the
-            item_title.clone(),
+    // article's link rather than its title also handles feeds that edit a
-            item.link.expect("checked above"),
+    // headline after publishing while keeping the same link — the link is
-            Some(time),
+    // the stable identity.
-        );
+    let inserted_rows = diesel::insert_into(feed_item::table)
-        let insert_result = diesel::insert_into(feed_item::table)
+        .values(&new_feed_item)
-            .values(&new_feed_item)
+        .on_conflict((feed_id, url))
-            .execute(connection);
+        .do_nothing()
+        .execute(connection)?;
 
-        log::info!("Insert Result: {:?}", insert_result);
+    if inserted_rows > 0 {
+        log::info!("Inserted item: {}", item_title);
     } else {
         log::info!("Item {} already exists.", item_title);
     }
@@ -210,10 +214,11 @@ pub async fn sync(
 #[cfg(test)]
 mod tests {
     use crate::models::feed::new_feed::NewFeed;
+    use crate::models::feed_item::rss_feed_item::FeedItem;
     use crate::models::user::new_user::NewUser;
     use crate::models::user::rss_user::User;
     use crate::schema::users;
-    use crate::test_helpers::unique_suffix;
+    use crate::test_helpers::{delete_feed, delete_user, insert_feed, insert_user, unique_suffix};
     use chrono::Duration;
 
     use super::*;
@@ -440,6 +445,58 @@ mod tests {
             .ok();
     }
 
+    #[actix_web::test]
+    async fn create_feed_item_is_race_safe_under_concurrent_syncs() {
+        let mut connection = establish_connection();
+        let suffix = unique_suffix();
+
+        let user = insert_user(&mut connection, "secret");
+        let feed = insert_feed(&mut connection, user.id);
+
+        let mut item = Item::default();
+        item.set_title(Some(format!("Race test article {suffix}")));
+        item.set_link(Some(format!("https://example.test/race/{suffix}")));
+        item.set_content(Some("<p>Hello world</p>".to_string()));
+
+        // Simulate two concurrent syncs for the same feed (e.g. a sync
+        // button press racing a page-reload sync) — each on its own
+        // connection/thread, released together so they genuinely overlap —
+        // both inserting the same item.
+        let barrier = std::sync::Arc::new(std::sync::Barrier::new(2));
+        let handles: Vec<_> = (0..2)
+            .map(|_| {
+                let feed = feed.clone();
+                let item = item.clone();
+                let barrier = barrier.clone();
+                std::thread::spawn(move || {
+                    let mut connection = establish_connection();
+                    barrier.wait();
+                    create_feed_item(item, &feed, &mut connection)
+                })
+            })
+            .collect();
+
+        for handle in handles {
+            handle.join().unwrap().unwrap();
+        }
+
+        let items: Vec<FeedItem> = feed_item::table
+            .filter(feed_id.eq(feed.id))
+            .load(&mut connection)
+            .unwrap();
+        assert_eq!(
+            1,
+            items.len(),
+            "concurrent syncs must not create duplicate feed items"
+        );
+
+        diesel::delete(feed_item::table.filter(feed_id.eq(feed.id)))
+            .execute(&mut connection)
+            .ok();
+        delete_feed(&mut connection, feed.id);
+        delete_user(&mut connection, user.id);
+    }
+
     #[actix_web::test]
     async fn create_feed_item_strips_onerror_from_feed_image() {
         let mut connection = establish_connection();

vue/Dockerfile

@@ -1,5 +1,7 @@
 # --- builder ---
-FROM node:20-alpine AS builder
+# Node 24 (active LTS): Node 20 is past EOL (April 2026), and vue-router 5's
+# Babel 8 toolchain requires ^22.18.0 || >=24.11.0 (EBADENGINE on node 20).
+FROM node:24-alpine AS builder
 
 WORKDIR /app
 COPY package.json package-lock.json ./

vue/package-lock.json

@@ -1275,9 +1275,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
+      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
       "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -1427,9 +1427,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
+      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
       "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -1437,12 +1437,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2205,9 +2205,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2247,9 +2247,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.7",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
-      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true
     },
     "node_modules/follow-redirects": {
@@ -2300,15 +2300,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.5",
+      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
+        "hasown": "^2.0.4",
-        "mime-types": "^2.1.12"
+        "mime-types": "^2.1.35"
       },
       "engines": {
         "node": ">= 6"
@@ -2812,10 +2812,20 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -3224,9 +3234,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
+      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "dev": true
     },
     "node_modules/lodash.merge": {
@@ -3299,12 +3309,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -3343,9 +3353,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
+      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3673,9 +3683,9 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "engines": {
         "node": ">=8.6"
@@ -4450,9 +4460,9 @@
       "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA=="
     },
     "node_modules/undici": {
-      "version": "7.27.2",
+      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.27.2.tgz",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
-      "integrity": "sha512-uZsKNuzQxDMUY6M3pIMvy5tvlGmtq8XJ2oLAkfRKGNu+1VQAIvLy2xIVG5ATZl5wDXl/tddByAWCizRbOme+TA==",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
       "dev": true,
       "engines": {
         "node": ">=20.18.1"

vue/src/assets/base.css

@@ -27,6 +27,8 @@
   --content-font-family: Merriweather, Georgia, 'Times New Roman', Times, serif;
   --headline-font-size-scale: 1;
   --content-font-size-scale: 1;
+  --content-text-align: left;
+  --content-padding: 1rem;
 
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
@@ -79,6 +81,12 @@ body {
      wider than the visible content area (scrollbar) and would otherwise
      introduce a horizontal scrollbar. */
   overflow-x: hidden;
+  /* Without this, a horizontal touch drag on content with nothing left to
+     scroll (true here, given overflow-x: hidden above) is claimed by
+     Chrome-on-Android's native swipe-to-go-back/forward gesture before our
+     own touchend listener (article-view swipe navigation) ever sees it —
+     the gesture is silently swallowed with no error, no touchend fires. */
+  overscroll-behavior-x: contain;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;

vue/src/assets/main.css

@@ -86,7 +86,8 @@ a,
 .feed-content {
   font-family: var(--content-font-family);
   font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
-  padding: 0 1em 1em;
+  text-align: var(--content-text-align);
+  padding: 0 var(--content-padding) 1em;
   overflow-wrap: break-word;
 }
 

vue/src/components/AdminFeeds.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
+import Modal from './modal/AddUrl.vue'
 
+const showModal = ref(false)
 const feeds = ref([])
 const error = ref('')
 
@@ -40,6 +42,7 @@ onMounted(loadFeeds)
 <template>
   <div class="admin">
     <h1 class="admin__heading">Admin</h1>
+    <button class="admin__add" type="button" @click="showModal = true">Add RSS</button>
     <p v-if="error" class="admin__error">{{ error }}</p>
     <p v-else-if="feeds.length === 0" class="admin__empty">No feeds added yet.</p>
     <ul v-else class="admin__list">
@@ -51,6 +54,14 @@ onMounted(loadFeeds)
         <button class="admin__delete" type="button" @click="deleteFeed(feed.id)">Delete</button>
       </li>
     </ul>
+
+    <Teleport to="body">
+      <Modal :show="showModal" @close="showModal = false" @added="loadFeeds">
+        <template #header>
+          <h3>Add RSS Feed</h3>
+        </template>
+      </Modal>
+    </Teleport>
   </div>
 </template>
 
@@ -67,6 +78,24 @@ onMounted(loadFeeds)
   margin-bottom: 1.25rem;
 }
 
+.admin__add {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  margin-bottom: 1.25rem;
+  padding: 0.5rem 1.1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.admin__add:hover {
+  border-color: var(--color-border-hover);
+}
+
 .admin__error,
 .admin__empty {
   opacity: 0.6;

vue/src/components/AdminSettings.vue

@@ -14,6 +14,13 @@ const {
   setContentSize,
   setHeadlineFont,
   setContentFont,
+  textAlignKey,
+  contentPadding,
+  TEXT_ALIGN_OPTIONS,
+  PADDING_STEPS,
+  PADDING_LABELS,
+  setTextAlign,
+  setContentPadding,
 } = useSettings()
 </script>
 
@@ -78,6 +85,34 @@ const {
         >{{ opt.label }}</option>
       </select>
     </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Text Alignment</h2>
+      <div class="settings__strip">
+        <button
+          v-for="opt in TEXT_ALIGN_OPTIONS"
+          :key="opt.key"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': textAlignKey === opt.key }"
+          type="button"
+          @click="setTextAlign(opt.key)"
+        >{{ opt.label }}</button>
+      </div>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Content Padding</h2>
+      <div class="settings__strip">
+        <button
+          v-for="(step, i) in PADDING_STEPS"
+          :key="step"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': contentPadding === step }"
+          type="button"
+          @click="setContentPadding(step)"
+        >{{ PADDING_LABELS[i] }}</button>
+      </div>
+    </section>
   </div>
 </template>
 

vue/src/components/AppNav.vue

@@ -1,23 +1,111 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterLink, useRouter, useRoute } from 'vue-router'
 import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
-import Modal from './modal/AddUrl.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()
+const { sync, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, lastProgrammaticScroll } = useFeeds()
 
 const headerRef = ref(null)
 
+// Native <select>/<option> has no "is open" state — the closed box just shows
+// the selected option's text verbatim, so per-option unread counts can only be
+// toggled based on focus, since the popup is only ever shown while focused.
+// @focus ~ opening (shows counts); @change (picking an option closes the
+// popup but keeps focus, so no blur fires) and @blur (focus left without
+// picking) ~ closed (counts hidden, so the closed box just shows the name).
+const filterOpen = ref(false)
+
+function onFilterFocus() {
+  filterOpen.value = true
+  refreshUnreadDisplay()
+}
+
+function onFilterChange(event) {
+  setFeedFilter(event.target.value || null)
+  filterOpen.value = false
+}
+
+// Scroll-driven show/hide: the header slides out of view on scroll-down and
+// back in only on scroll-up — never merely by proximity to the top. This is
+// show/hide via `transform` (not the old resize behaviour) — the header is
+// position:fixed, so translating it never reflows content. The app's
+// programmatic scrolls resolve to sensible states without any top-of-page
+// special case: scrollTo(0, 0) (article paging, layout toggle) is itself a
+// large upward jump, so it crosses REVEAL_THRESHOLD like a real scroll-up and
+// reveals the header that way; the list-view read-correction scrollBy moves
+// only a few px → stays under the threshold and leaves a hidden header hidden.
+const hidden = ref(false)
+const REVEAL_THRESHOLD = 12 // px of accumulated travel before toggling
+// When the feed list mutates itself (read-correction scrollBy + array-splice
+// scroll anchoring) the page jumps *upward* without user intent. For this long
+// after such a jump we gate only the reveal direction, so the jump can't pop
+// the header back into view mid-read. Hiding stays allowed the whole time
+// (the jump never scrolls down), so scrolling down still hides normally even
+// while articles are being marked read. See lastProgrammaticScroll in useFeeds.
+const PROGRAMMATIC_SUPPRESS_MS = 300
+let lastY = 0
+let accumulated = 0
+
+function onScroll() {
+  const y = Math.max(0, window.scrollY)
+
+  // Keep the header visible while the menu is open (the dropdown is anchored
+  // to the header, so hiding it would slide the open menu off-screen).
+  if (menuOpen.value) {
+    hidden.value = false
+    accumulated = 0
+    lastY = y
+    return
+  }
+
+  const delta = y - lastY
+  lastY = y
+  // Reset the accumulator whenever direction flips, so the threshold is
+  // measured from the last turning point (not from page load).
+  if ((delta > 0) !== (accumulated > 0)) accumulated = 0
+  accumulated += delta
+
+  // Hiding (scroll-down) is always allowed. Revealing (scroll-up) is gated for
+  // a short window after a programmatic list update, whose induced jump is
+  // upward and would otherwise pop the header back into view mid-read. A
+  // genuine scroll-up reveals once the window has elapsed.
+  const afterProgrammatic = performance.now() - lastProgrammaticScroll.value < PROGRAMMATIC_SUPPRESS_MS
+  if (accumulated > REVEAL_THRESHOLD) hidden.value = true // scrolling down
+  else if (accumulated < -REVEAL_THRESHOLD && !afterProgrammatic) hidden.value = false // scrolling up
+}
+
+let ticking = false
+function onScrollRaf() {
+  if (ticking) return
+  ticking = true
+  requestAnimationFrame(() => {
+    onScroll()
+    ticking = false
+  })
+}
+
 onMounted(() => {
+  // Drives #app's padding-top / RssFeeds' scroll-margin-top so content below
+  // the fixed header isn't hidden behind it at scroll position 0. The header is
+  // a fixed size, so this is measured once on mount and never changes.
   const h = headerRef.value?.getBoundingClientRect().height ?? 0
   document.documentElement.style.setProperty('--app-nav-height', `${h}px`)
+
+  lastY = Math.max(0, window.scrollY)
+  window.addEventListener('scroll', onScrollRaf, { passive: true })
+  document.addEventListener('click', onDocumentClick)
+  refreshUnreadDisplay()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScrollRaf)
+  document.removeEventListener('click', onDocumentClick)
 })
 
 const onFeedsPage = computed(() => route.path === '/feeds')
 
-const unreadCount = computed(() => feeds.value.filter(f => !f.read).length)
 
 const menuOpen = ref(false)
 
@@ -29,6 +117,19 @@ function closeMenu() {
   menuOpen.value = false
 }
 
+// The open menu is a thin absolutely-positioned strip under the header, so its
+// `@click.self` only catches clicks on that strip — a click anywhere else on
+// the page never reaches it. This document-level listener closes the menu on
+// any outside click. The hamburger is excluded (it has its own toggle, so an
+// opening click mustn't immediately re-close), and clicks inside the menu are
+// left to the menu items' own handlers.
+function onDocumentClick(event) {
+  if (!menuOpen.value) return
+  const target = event.target
+  if (target.closest?.('.app-nav__hamburger') || target.closest?.('.app-nav__menu')) return
+  closeMenu()
+}
+
 async function logout() {
   await logoutSession()
   closeMenu()
@@ -45,11 +146,6 @@ function handleMarkAllRead() {
   closeMenu()
 }
 
-function openAddModal() {
-  showModal.value = true
-  closeMenu()
-}
-
 function handleToggleViewMode() {
   toggleViewMode()
   closeMenu()
@@ -62,9 +158,21 @@ function handleToggleLayout() {
 </script>
 
 <template>
-  <header ref="headerRef" class="app-nav">
+  <header ref="headerRef" class="app-nav" :class="{ 'app-nav--hidden': hidden }">
     <div class="app-nav__wrapper">
       <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
+      <select
+        v-if="onFeedsPage && feedTitles.length"
+        class="app-nav__filter"
+        :value="feedFilter ?? ''"
+        aria-label="Filter by feed"
+        @focus="onFilterFocus"
+        @change="onFilterChange"
+        @blur="filterOpen = false"
+      >
+        <option value="">All feeds</option>
+        <option v-for="title in feedTitles" :key="title" :value="title">{{ title }}<template v-if="filterOpen"> ({{ displayedFeedUnreadCounts[title] ?? 0 }})</template></option>
+      </select>
       <button
         class="app-nav__hamburger"
         type="button"
@@ -98,20 +206,11 @@ function handleToggleLayout() {
             <button class="app-nav__menu-item" type="button" @click="handleMarkAllRead">Mark all as read</button>
           </template>
           <button class="app-nav__menu-item" type="button" @click="handleSync">Sync</button>
-          <button class="app-nav__menu-item" type="button" @click="openAddModal">Add RSS</button>
           <RouterLink to="/admin" class="app-nav__menu-item" @click="closeMenu">Admin</RouterLink>
           <button class="app-nav__menu-item app-nav__logout" type="button" @click="logout">Logout</button>
         </div>
       </nav>
     </Transition>
-
-    <Teleport to="body">
-      <Modal :show="showModal" @close="showModal = false">
-        <template #header>
-          <h3>Add RSS Feed</h3>
-        </template>
-      </Modal>
-    </Teleport>
   </header>
 </template>
 
@@ -123,6 +222,13 @@ function handleToggleLayout() {
   right: 0;
   z-index: 20;
   background: var(--color-background);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  transition: transform 0.25s ease;
+  will-change: transform;
+}
+
+.app-nav--hidden {
+  transform: translateY(-100%);
 }
 
 .app-nav__wrapper {
@@ -131,12 +237,13 @@ function handleToggleLayout() {
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
+  padding: 0.375rem 1rem;
 }
 
 .app-nav__title {
+  margin-right: auto;
   font-weight: bold;
-  font-size: clamp(1.1rem, 4vw, 1.4rem);
+  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
 }
 
 .app-nav__unread {
@@ -144,6 +251,23 @@ function handleToggleLayout() {
   opacity: 0.6;
 }
 
+.app-nav__filter {
+  min-height: 44px;
+  max-width: clamp(120px, 40vw, 220px);
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+  text-overflow: ellipsis;
+}
+
+.app-nav__filter:hover {
+  border-color: var(--color-border-hover);
+}
+
 .app-nav__hamburger {
   display: inline-flex;
   align-items: center;
@@ -228,7 +352,7 @@ function handleToggleLayout() {
 
 @media (min-width: 768px) {
   .app-nav__wrapper {
-    padding: 1rem 2rem;
+    padding: 0.5rem 2rem;
   }
 }
 </style>

vue/src/components/RssFeeds.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, nextTick, watch } from 'vue';
+import { onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
 import { useFeeds } from '@/composables/useFeeds';
 
 const {
@@ -14,8 +14,10 @@ const {
   fetchData,
   sync,
   getReadable,
+  disconnectObserver,
   setInitialLoad,
   showMessageForXSeconds,
+  markCurrentArticleRead,
 } = useFeeds()
 
 const unreadCount = computed(() => feeds.value.filter(f => !f.read).length)
@@ -33,6 +35,45 @@ function scrollToNextArticle() {
   }
 }
 
+// Swipe-to-navigate in article view. Transient per-gesture state, not shared
+// app state, so it's kept as plain component-local variables rather than in
+// useFeeds() — nothing outside this component needs it.
+let touchStartX = null
+let touchStartY = null
+
+const SWIPE_THRESHOLD_X = 50 // min horizontal travel (px) to count as a swipe
+const SWIPE_RESTRAINT_Y = 75 // max vertical travel (px) before it's treated as a scroll, not a swipe
+
+function onArticleTouchStart(event) {
+  // Ignore multi-touch (pinch-zoom) and swipes starting inside a
+  // horizontally-scrollable code block (.article-feature__content :deep(pre))
+  // — those should scroll the block, not page the article.
+  if (event.touches.length !== 1 || event.target.closest('pre')) {
+    touchStartX = null
+    touchStartY = null
+    return
+  }
+  touchStartX = event.touches[0].clientX
+  touchStartY = event.touches[0].clientY
+}
+
+function onArticleTouchEnd(event) {
+  if (touchStartX === null) return
+  const touch = event.changedTouches[0]
+  const deltaX = touch.clientX - touchStartX
+  const deltaY = touch.clientY - touchStartY
+  touchStartX = null
+  touchStartY = null
+
+  if (Math.abs(deltaX) < SWIPE_THRESHOLD_X || Math.abs(deltaY) > SWIPE_RESTRAINT_Y) return
+
+  if (deltaX < 0) {
+    nextArticle()
+  } else {
+    prevArticle()
+  }
+}
+
 // Small images (icons, logos, ...) look bad stretched to the full-bleed
 // width used for readable article images — leave them at their natural size
 // instead. Intrinsic size is only known once the image has loaded, so check
@@ -74,9 +115,19 @@ async function shareUrl(url) {
   }
 }
 
+onBeforeUnmount(() => {
+  disconnectObserver()
+  setInitialLoad(false)
+})
+
 onMounted(async () => {
   setInitialLoad(false)
   await fetchData()
+  // viewMode persists across reloads (see useFeeds.js) — if we're booting
+  // straight into article view, the article now on screen needs the same
+  // immediate mark-read that toggleViewMode()/nextArticle()/prevArticle()
+  // give it when reached by in-session navigation.
+  if (viewMode.value === 'article') markCurrentArticleRead()
   sync(true)
   setTimeout(function () {
     setInitialLoad(true)
@@ -120,7 +171,7 @@ onMounted(async () => {
       >&darr;</button>
     </div>
 
-    <div v-else class="article-single">
+    <div v-else class="article-single" @touchstart.passive="onArticleTouchStart" @touchend.passive="onArticleTouchEnd">
       <div v-if="feeds.length == 0" class="empty-state">
         <svg class="empty-state__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <circle cx="12" cy="12" r="10"/>
@@ -128,18 +179,22 @@ onMounted(async () => {
         </svg>
         <p class="empty-state__label">All caught up</p>
       </div>
-      <template v-else>
+      <!-- Deliberately no enter/leave transition here: Vue's <Transition>
-        <article class="article-feature">
+           component forces a synchronous whole-document reflow
-          <p class="article-feature__source">{{ feeds[currentIndex].feedTitle }}</p>
+           (document.body.offsetHeight, in @vue/runtime-dom's forceReflow) on
-          <h2 @click="loadReadable(feeds[currentIndex], currentIndex)" class="article-feature__title">{{ feeds[currentIndex].title }}</h2>
+           every enter/leave, regardless of the app's own CSS — confirmed (via
-          <h3 class="article-feature__meta">{{ feeds[currentIndex].timestamp }}</h3>
+           a DevTools performance trace) to be what was corrupting the header's
-          <p class="feed-original-link">
+           native <select>/<button> rendering during article paging. -->
-            <a :href="feeds[currentIndex].url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
+      <article v-else class="article-feature" :key="currentIndex">
-            <button type="button" class="feed-share-btn" :title="shareLabel" @click="shareUrl(feeds[currentIndex].url)">{{ shareLabel }}</button>
+        <p class="article-feature__source">{{ feeds[currentIndex].feedTitle }}</p>
-          </p>
+        <h2 @click="loadReadable(feeds[currentIndex], currentIndex)" class="article-feature__title">{{ feeds[currentIndex].title }}</h2>
-          <p class="article-feature__content" :class="{ 'article-feature__content--readable': feeds[currentIndex].readable }" v-html="feeds[currentIndex].content"></p>
+        <h3 class="article-feature__meta">{{ feeds[currentIndex].timestamp }}</h3>
-        </article>
+        <p class="feed-original-link">
-      </template>
+          <a :href="feeds[currentIndex].url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
+          <button type="button" class="feed-share-btn" :title="shareLabel" @click="shareUrl(feeds[currentIndex].url)">{{ shareLabel }}</button>
+        </p>
+        <p class="article-feature__content" :class="{ 'article-feature__content--readable': feeds[currentIndex].readable }" v-html="feeds[currentIndex].content"></p>
+      </article>
 
       <div class="article-nav">
         <button
@@ -302,7 +357,15 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-top: 1em;
   padding-bottom: 5rem;
+  /* Fill the viewport below the fixed header even when the article content
+     is short, so swipe-to-navigate works anywhere on screen instead of only
+     over the (possibly small) content area. dvh is the accurate unit on
+     mobile, where this matters most; vh is the fallback for browsers
+     without dvh support. */
+  min-height: calc(100vh - var(--app-nav-height, 4.5rem));
+  min-height: calc(100dvh - var(--app-nav-height, 4.5rem));
 }
 
 .article-feature {
@@ -351,7 +414,8 @@ onMounted(async () => {
 }
 
 .article-feature__content {
-  padding: 0 1rem;
+  padding: 0 var(--content-padding);
+  text-align: var(--content-text-align);
   font-family: var(--content-font-family);
   font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
   line-height: 1.75;

vue/src/components/__tests__/AdminFeeds.spec.js

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import axios from 'axios'
+import AdminFeeds from '../AdminFeeds.vue'
+import AddUrl from '../modal/AddUrl.vue'
+
+vi.mock('axios')
+
+describe('AdminFeeds', () => {
+  beforeEach(() => {
+    localStorage.setItem('user-token', 'test-token')
+    localStorage.setItem('user-id', '7')
+    vi.clearAllMocks()
+  })
+
+  // Each mount renders the AddUrl modal via <Teleport to="body">, which
+  // survives outside the wrapper's own element — unmount every mounted
+  // instance so a leftover doesn't bleed into a later test's document.body.
+  let mountedWrappers = []
+  function mountAdmin() {
+    const wrapper = mount(AdminFeeds)
+    mountedWrappers.push(wrapper)
+    return wrapper
+  }
+
+  afterEach(() => {
+    for (const wrapper of mountedWrappers) {
+      try {
+        wrapper.unmount()
+      } catch {
+        // already unmounted by the test itself — fine
+      }
+    }
+    mountedWrappers = []
+  })
+
+  it('fetches and renders the feed list on mount', async () => {
+    axios.get.mockResolvedValueOnce({
+      data: { feeds: [{ id: 1, title: 'Feed A', url: 'https://example.test/a.xml' }] },
+    })
+
+    const wrapper = mountAdmin()
+    await flushPromises()
+
+    expect(axios.get).toHaveBeenCalledWith('/api/v1/article/feeds/7', expect.anything())
+    expect(wrapper.text()).toContain('Feed A')
+  })
+
+  it('shows the empty state when there are no feeds', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+
+    const wrapper = mountAdmin()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('No feeds added yet.')
+  })
+
+  it('shows an error message when the feed list fails to load', async () => {
+    axios.get.mockRejectedValueOnce(new Error('Network Error'))
+
+    const wrapper = mountAdmin()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Failed to load feeds.')
+  })
+
+  it('deletes a feed after confirmation', async () => {
+    axios.get.mockResolvedValueOnce({
+      data: { feeds: [{ id: 1, title: 'Feed A', url: 'https://example.test/a.xml' }] },
+    })
+    axios.delete.mockResolvedValueOnce({ status: 204 })
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+
+    const wrapper = mountAdmin()
+    await flushPromises()
+
+    await wrapper.find('.admin__delete').trigger('click')
+    await flushPromises()
+
+    expect(axios.delete).toHaveBeenCalledWith('/api/v1/article/feed/1', expect.anything())
+    expect(wrapper.text()).toContain('No feeds added yet.')
+
+    confirmSpy.mockRestore()
+  })
+
+  it('opens the add-feed modal from the Add RSS button', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+
+    const wrapper = mountAdmin()
+    await flushPromises()
+
+    await wrapper.find('.admin__add').trigger('click')
+
+    expect(wrapper.findComponent(AddUrl).props('show')).toBe(true)
+  })
+
+  it('reloads the feed list when the modal reports a feed was added', async () => {
+    axios.get
+      .mockResolvedValueOnce({ data: { feeds: [] } })
+      .mockResolvedValueOnce({ data: { feeds: [{ id: 2, title: 'Feed B', url: 'https://example.test/b.xml' }] } })
+
+    const wrapper = mountAdmin()
+    await flushPromises()
+    expect(wrapper.text()).toContain('No feeds added yet.')
+
+    await wrapper.findComponent(AddUrl).vm.$emit('added')
+    await flushPromises()
+
+    expect(axios.get).toHaveBeenCalledTimes(2)
+    expect(wrapper.text()).toContain('Feed B')
+  })
+})

vue/src/components/__tests__/AppNav.spec.js

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import axios from 'axios'
 import AppNav from '../AppNav.vue'
@@ -24,11 +25,15 @@ describe('AppNav', () => {
     localStorage.setItem('user-id', '7')
     vi.clearAllMocks()
 
-    const { feeds, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
+    const { feeds, allItems, feedFilter, lastProgrammaticScroll, showMessage, message, viewMode, currentIndex, layout } = useFeeds()
     feeds.value = []
+    allItems.value = []
+    feedFilter.value = null
+    // Module-singleton state: a prior test may have stamped this via a mocked
+    // performance.now(); reset it so the scroll-driven reveal gate starts clean.
+    lastProgrammaticScroll.value = 0
     showMessage.value = false
     message.value = ''
-    showModal.value = false
     viewMode.value = 'list'
     currentIndex.value = 0
     layout.value = 'list'
@@ -44,15 +49,35 @@ describe('AppNav', () => {
     await router.isReady()
   })
 
+  // Unmount every AppNav mounted via mountNav() after each test so mounted
+  // instances (and their router/menu listeners) don't pile up across the file.
+  let mountedWrappers = []
+  function mountNav(options = { global: { plugins: [router] } }) {
+    const wrapper = mount(AppNav, options)
+    mountedWrappers.push(wrapper)
+    return wrapper
+  }
+
+  afterEach(() => {
+    for (const wrapper of mountedWrappers) {
+      try {
+        wrapper.unmount()
+      } catch {
+        // already unmounted by the test itself — fine
+      }
+    }
+    mountedWrappers = []
+  })
+
   async function mountWithMenuOpen() {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await wrapper.find('.app-nav__hamburger').trigger('click')
     await flushPromises()
     return wrapper
   }
 
   it('toggles the menu open and closed via the hamburger button', async () => {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
 
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
 
@@ -63,6 +88,17 @@ describe('AppNav', () => {
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
   })
 
+  it('closes the menu on a click outside of it', async () => {
+    const wrapper = await mountWithMenuOpen()
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(true)
+
+    // A click anywhere outside the menu strip (e.g. on page content) closes it.
+    document.body.dispatchEvent(new Event('click', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
+  })
+
   it('clears stored credentials and redirects to login on logout', async () => {
     const wrapper = await mountWithMenuOpen()
 
@@ -93,16 +129,6 @@ describe('AppNav', () => {
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
   })
 
-  it('opens the add-feed modal from the menu', async () => {
-    const wrapper = await mountWithMenuOpen()
-    const { showModal } = useFeeds()
-
-    const addButton = wrapper.findAll('.app-nav__menu-item').find(el => el.text() === 'Add RSS')
-    await addButton.trigger('click')
-
-    expect(showModal.value).toBe(true)
-  })
-
   it('switches the view mode from the menu and closes it', async () => {
     const wrapper = await mountWithMenuOpen()
     const { viewMode } = useFeeds()
@@ -158,38 +184,262 @@ describe('AppNav', () => {
   })
 
   it('shows the unread count in the title when there are articles', async () => {
-    const { feeds } = useFeeds()
+    // The badge is the global unread total, sourced from the master list
-    feeds.value = [
+    // (allItems) so it stays correct regardless of any active feed filter.
+    const { allItems } = useFeeds()
+    allItems.value = [
       { id: 1, title: 'Article one', content: '', url: 'https://example.test/1', timestamp: '2026-01-01' },
       { id: 2, title: 'Article two', content: '', url: 'https://example.test/2', timestamp: '2026-01-02' },
     ]
 
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__title').text()).toContain('(2)')
   })
 
   it('excludes already-read articles from the counter while in article view', async () => {
-    const { feeds } = useFeeds()
+    const { allItems } = useFeeds()
-    feeds.value = [
+    allItems.value = [
       { id: 1, title: 'Article one', read: true,  content: '', url: 'https://example.test/1', timestamp: '2026-01-01' },
       { id: 2, title: 'Article two', read: false, content: '', url: 'https://example.test/2', timestamp: '2026-01-02' },
     ]
 
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__title').text()).toContain('(1)')
   })
 
   it('hides the unread count when there are no articles', async () => {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__unread').exists()).toBe(false)
   })
 
+  it('renders a feed filter with an "All feeds" option plus one per distinct feed', async () => {
+    const { allItems } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed B', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-02' },
+      { id: 2, feedTitle: 'Feed A', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-01' },
+      { id: 3, feedTitle: 'Feed A', title: 'c', url: 'https://example.test/3', timestamp: '2026-01-03' },
+    ]
+
+    const wrapper = mountNav()
+    await flushPromises()
+    const select = wrapper.find('.app-nav__filter')
+
+    // Counts only show while the dropdown is open (focused) — see AppNav.vue.
+    await select.trigger('focus')
+
+    const options = select.findAll('option').map(o => o.text())
+    // "All feeds" first, then distinct titles sorted alphabetically, each with
+    // its unread count.
+    expect(options).toEqual(['All feeds', 'Feed A (2)', 'Feed B (1)'])
+  })
+
+  it('hides the per-option unread count once the feed filter is closed', async () => {
+    const { allItems } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed A', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-01' },
+      { id: 2, feedTitle: 'Feed A', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-02' },
+    ]
+
+    const wrapper = mountNav()
+    await flushPromises()
+    const select = wrapper.find('.app-nav__filter')
+
+    await select.trigger('focus')
+    await select.setValue('Feed A') // fires change, which closes the popup but keeps focus
+    await flushPromises()
+
+    const feedAOption = select.findAll('option').find(o => o.element.value === 'Feed A')
+    expect(feedAOption.text()).toBe('Feed A')
+  })
+
+  it('does not render the feed filter when there are no feeds', async () => {
+    const wrapper = mountNav()
+    await flushPromises()
+
+    expect(wrapper.find('.app-nav__filter').exists()).toBe(false)
+  })
+
+  it('applies the selected feed to the displayed list, and "All feeds" restores it', async () => {
+    const { allItems, feeds, feedFilter } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed A', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-01' },
+      { id: 2, feedTitle: 'Feed B', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-02' },
+    ]
+
+    const wrapper = mountNav()
+    await flushPromises()
+
+    const select = wrapper.find('.app-nav__filter')
+    await select.setValue('Feed A')
+    await flushPromises()
+
+    expect(feedFilter.value).toBe('Feed A')
+    expect(feeds.value.map(f => f.id)).toEqual([1])
+
+    await select.setValue('')
+    await flushPromises()
+
+    expect(feedFilter.value).toBeNull()
+    expect(feeds.value.map(f => f.id)).toEqual([1, 2])
+  })
+
+  it('shows the selected feed\'s unread count in the title when a filter is active', async () => {
+    const { allItems } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed A', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-01' },
+      { id: 2, feedTitle: 'Feed A', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-02' },
+      { id: 3, feedTitle: 'Feed B', title: 'c', url: 'https://example.test/3', timestamp: '2026-01-03' },
+    ]
+
+    const wrapper = mountNav()
+    await flushPromises()
+
+    // No filter → global total (3).
+    expect(wrapper.find('.app-nav__title').text()).toContain('(3)')
+
+    await wrapper.find('.app-nav__filter').setValue('Feed A')
+    await flushPromises()
+
+    // Filtered → unread in Feed A only (2).
+    expect(wrapper.find('.app-nav__title').text()).toContain('(2)')
+  })
+
+  describe('scroll-driven show/hide', () => {
+    // The scroll handler is rAF-throttled; run rAF synchronously so a single
+    // dispatched scroll event resolves before we assert. Per the CLAUDE.md
+    // Vitest gotcha, avoid bare fake timers here — they'd clobber this stub.
+    beforeEach(() => {
+      // Reset scroll position so each mount's lastY baseline starts at 0.
+      Object.defineProperty(window, 'scrollY', { value: 0, configurable: true, writable: true })
+      vi.stubGlobal('requestAnimationFrame', (cb) => { cb(); return 0 })
+      // getBoundingClientRect() is all-zero in jsdom; give the header a real
+      // height so onMounted()'s one-time measurement (used for the
+      // --app-nav-height CSS var — see AppNav.vue) has a realistic value.
+      // This is a prototype-wide spy (scoped to this describe block only, restored in
+      // afterEach), so it returns a full DOMRect-shaped object rather than a
+      // partial one — no test here happens to call getBoundingClientRect() on
+      // anything but the header, but a bare `{ height: 50 }` would silently
+      // hand back `undefined` for top/left/width/etc. to any code that did.
+      vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+        height: 50, width: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0, toJSON() {},
+      })
+    })
+
+    afterEach(() => {
+      vi.unstubAllGlobals()
+      vi.restoreAllMocks()
+    })
+
+    function scrollTo(y) {
+      Object.defineProperty(window, 'scrollY', { value: y, configurable: true, writable: true })
+      window.dispatchEvent(new Event('scroll'))
+    }
+
+    it('hides the header when scrolling down past the threshold', async () => {
+      const wrapper = mountNav()
+      scrollTo(200)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+    })
+
+    it('reveals the header again when scrolling back up past the threshold', async () => {
+      const wrapper = mountNav()
+      scrollTo(200)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      scrollTo(150)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+
+    it('reveals the header on a large upward jump that lands near the top', async () => {
+      const wrapper = mountNav()
+      scrollTo(400)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // A jump this large (e.g. article paging's scrollTo(0, 0)) crosses
+      // REVEAL_THRESHOLD on its own — no top-of-page special case needed.
+      scrollTo(10)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+
+    it('does not reveal the header merely for landing near the top', async () => {
+      const wrapper = mountNav()
+      // Hide it with a jump just past the header's own height (50px, mocked
+      // above) plus the reveal threshold.
+      scrollTo(62)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // Move back to right at the header's own height — within the "near the
+      // top" zone the old code always revealed for — but the upward delta
+      // (12px) doesn't exceed REVEAL_THRESHOLD, so a hidden header stays
+      // hidden: proximity to the top is no longer sufficient on its own.
+      scrollTo(50)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+    })
+
+    it('does not let a programmatic upward jump reveal the header mid-read', async () => {
+      const { markProgrammaticScroll } = useFeeds()
+      const nowSpy = vi.spyOn(performance, 'now').mockReturnValue(1000)
+      const wrapper = mountNav()
+
+      // Hide it first via a normal scroll-down (no programmatic flag active).
+      scrollTo(400)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // A read-correction flags a programmatic scroll, then the page jumps
+      // upward. Within the window that upward jump must NOT reveal the header.
+      markProgrammaticScroll() // records lastProgrammaticScroll = 1000
+      nowSpy.mockReturnValue(1100) // 100ms later — inside the 300ms window
+      scrollTo(200)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // Still allows hiding on scroll-down even while the flag is active.
+      scrollTo(500)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // Once the window elapses, a genuine scroll-up reveals it again.
+      nowSpy.mockReturnValue(1500) // 500ms after the flag — outside the window
+      scrollTo(450)
+      await nextTick()
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+
+    it('does not toggle on sub-threshold jitter', async () => {
+      const wrapper = mountNav()
+      // Start well below the top so the "near the top" guard doesn't apply.
+      scrollTo(300)
+      await nextTick()
+      // Reveal first so we're testing that small moves don't hide it.
+      scrollTo(260)
+      await nextTick()
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+
+      scrollTo(268) // +8px, under the 12px threshold
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+  })
+
   it('does not mark articles as read when the confirmation is dismissed', async () => {
     const { feeds } = useFeeds()
     feeds.value = [
@@ -208,4 +458,5 @@ describe('AppNav', () => {
 
     confirmSpy.mockRestore()
   })
+
 })

vue/src/components/__tests__/RssFeeds.spec.js

@@ -15,6 +15,20 @@ class FakeIntersectionObserver {
 }
 vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
 
+// Shared by the swipe-navigation tests below, which all start from the same
+// two-article article view.
+function twoArticleFeed() {
+  return [
+    {
+      title: 'My Feed',
+      items: [
+        { id: 1, title: 'Article one', content: '<p>one</p>', url: 'https://example.test/1', timestamp: '2026-02-01 10:00:00' },
+        { id: 2, title: 'Article two', content: '<p>two</p>', url: 'https://example.test/2', timestamp: '2026-01-01 10:00:00' },
+      ],
+    },
+  ]
+}
+
 describe('RssFeeds', () => {
   beforeEach(() => {
     localStorage.setItem('user-token', 'test-token')
@@ -23,11 +37,10 @@ describe('RssFeeds', () => {
 
     // useFeeds() returns module-level singleton refs shared across the whole
     // app (and this spec file) — reset them so state doesn't leak between tests.
-    const { feeds, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
+    const { feeds, showMessage, message, viewMode, currentIndex, layout } = useFeeds()
     feeds.value = []
     showMessage.value = false
     message.value = ''
-    showModal.value = false
     viewMode.value = 'list'
     currentIndex.value = 0
     layout.value = 'list'
@@ -345,4 +358,179 @@ describe('RssFeeds', () => {
     const titles = wrapper.findAll('.feed-title').map(el => el.text())
     expect(titles).toEqual(['Article three'])
   })
+
+  it('swipes left to navigate to the next article', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 100 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article two')
+
+    wrapper.unmount()
+  })
+
+  it('swipes right to navigate to the previous article', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+    await wrapper.findAll('.article-nav__btn')[1].trigger('click')
+    await flushPromises()
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article two')
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', { touches: [{ clientX: 130, clientY: 100 }] })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 200, clientY: 100 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+    wrapper.unmount()
+  })
+
+  it('does not navigate on a swipe shorter than the horizontal threshold', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 180, clientY: 100 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+    wrapper.unmount()
+  })
+
+  it('does not navigate on a mostly-vertical drag', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 190, clientY: 250 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+    wrapper.unmount()
+  })
+
+  it('does not navigate on a diagonal drag that exceeds the vertical restraint, even with a qualifying horizontal delta', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 200 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+    wrapper.unmount()
+  })
+
+  it('ignores a multi-touch gesture (pinch-zoom)', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', {
+      touches: [{ clientX: 200, clientY: 100 }, { clientX: 50, clientY: 100 }],
+    })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 100 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+    wrapper.unmount()
+  })
+
+  it('does not navigate when a swipe starts inside a code block', async () => {
+    axios.get.mockResolvedValueOnce({
+      data: {
+        feeds: [
+          {
+            title: 'My Feed',
+            items: [
+              { id: 1, title: 'Article one', content: '<pre>some code</pre>', url: 'https://example.test/1', timestamp: '2026-02-01 10:00:00' },
+              { id: 2, title: 'Article two', content: '<p>two</p>', url: 'https://example.test/2', timestamp: '2026-01-01 10:00:00' },
+            ],
+          },
+        ],
+      },
+    })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    await wrapper.find('pre').trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+    await wrapper.find('.article-single').trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 100 }] })
+    await flushPromises()
+
+    expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+    wrapper.unmount()
+  })
+
+  it('does not throw when swiping with an empty feed list', async () => {
+    axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    useFeeds().toggleViewMode()
+    await flushPromises()
+
+    const article = wrapper.find('.article-single')
+    await article.trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+    await article.trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 100 }] })
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('All caught up')
+
+    wrapper.unmount()
+  })
 })

vue/src/components/modal/AddUrl.vue

@@ -2,9 +2,10 @@
 import '@/assets/modal.css';
 import { ref } from 'vue';
 import axios from 'axios';
-const props = defineProps({
+defineProps({
   show: Boolean
 })
+const emit = defineEmits(['close', 'added'])
 const submitted = ref(false)
 const url = ref('')
 const title = ref('')
@@ -30,6 +31,7 @@ async function save() {
 
     console.log(response)
     output.value = 'saved successfully'
+    emit('added')
   } catch (error) {
     console.error(error.message)
     output.value = error.message
@@ -57,7 +59,7 @@ async function save() {
           <div class="modal-footer">
             <slot name="footer">
               <button type="submit">Save</button>
-              <button class="modal-default-button" @click="$emit('close')">Close</button>
+              <button class="modal-default-button" type="button" @click="$emit('close')">Close</button>
             </slot>
           </div>
         </form>

vue/src/components/modal/__tests__/AddUrl.spec.js

@@ -27,6 +27,7 @@ describe('AddUrl', () => {
       expect.anything(),
     )
     expect(wrapper.text()).toContain('saved successfully')
+    expect(wrapper.emitted('added')).toHaveLength(1)
   })
 
   it('surfaces the error message when the request fails', async () => {
@@ -39,5 +40,17 @@ describe('AddUrl', () => {
     await flushPromises()
 
     expect(wrapper.text()).toContain('Network Error')
+    expect(wrapper.emitted('added')).toBeUndefined()
+  })
+
+  it('closes without submitting when Close is clicked, even with fields filled in', async () => {
+    const wrapper = mount(AddUrl, { props: { show: true } })
+    await wrapper.find('#url').setValue('https://example.test/feed.xml')
+    await wrapper.find('#title').setValue('Example feed')
+
+    await wrapper.find('.modal-default-button').trigger('click')
+
+    expect(axios.post).not.toHaveBeenCalled()
+    expect(wrapper.emitted('close')).toHaveLength(1)
   })
 })

vue/src/composables/__tests__/useFeeds.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import axios from 'axios'
 import { useFeeds } from '../useFeeds'
 
@@ -12,7 +12,7 @@ class FakeIntersectionObserver {
 vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
 
 describe('useFeeds', () => {
-  const { feeds, showMessage, message, showModal, fetchData, sync, getReadable, setInitialLoad, handleIntersection } = useFeeds()
+  const { feeds, allItems, feedFilter, feedTitles, feedUnreadCounts, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, setFeedFilter, showMessage, message, viewMode, fetchData, sync, getReadable, setInitialLoad, handleIntersection, markAllRead, markRead, markCurrentArticleRead, setupIntersectionObserver } = useFeeds()
 
   beforeEach(() => {
     localStorage.setItem('user-token', 'test-token')
@@ -20,9 +20,11 @@ describe('useFeeds', () => {
     vi.clearAllMocks()
 
     feeds.value = []
+    allItems.value = []
+    feedFilter.value = null
     showMessage.value = false
     message.value = ''
-    showModal.value = false
+    viewMode.value = 'list'
   })
 
   it('fetches and flattens articles for the current user', async () => {
@@ -116,6 +118,420 @@ describe('useFeeds', () => {
     setInitialLoad(false)
   })
 
+  it('refreshes the filter dropdown\'s displayed per-feed counts when list-view scrolling marks an article read', async () => {
+    // displayedFeedUnreadCounts is a frozen snapshot of feedUnreadCounts (see
+    // useFeeds.js) — AppNav's filter <select> renders it instead of the live
+    // computed so paging through article view doesn't force it to repaint.
+    // List-view scrolling is a different code path (handleIntersection) and
+    // should keep it live regardless.
+    allItems.value = [
+      { id: 301, feedTitle: 'Feed A', read: false },
+      { id: 302, feedTitle: 'Feed A', read: false },
+    ]
+    feeds.value = [...allItems.value]
+    refreshUnreadDisplay()
+    expect(displayedFeedUnreadCounts.value).toEqual({ 'Feed A': 2 })
+
+    setInitialLoad(true)
+    axios.put.mockResolvedValue({ status: 200 })
+
+    await handleIntersection([
+      { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+    ])
+
+    expect(displayedFeedUnreadCounts.value).toEqual({ 'Feed A': 1 })
+
+    setInitialLoad(false)
+  })
+
+  it('ignores the initial observer snapshot on connect so a scrolled-down reconnect cannot mass-mark', async () => {
+    feeds.value = [
+      { id: 201, title: 'First' },
+      { id: 202, title: 'Second' },
+    ]
+    setInitialLoad(true)
+    axios.put.mockResolvedValue({ status: 200 })
+
+    // A .observe node must exist for setupIntersectionObserver to arm the skip.
+    const node = document.createElement('div')
+    node.className = 'observe'
+    document.body.appendChild(node)
+    setupIntersectionObserver()
+
+    // First callback after connect is the initial snapshot — must be dropped
+    // even though both entries look "scrolled past" (above the topbar).
+    await handleIntersection([
+      { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+      { isIntersecting: false, boundingClientRect: { y: -5 }, target: { id: '1' } },
+    ])
+    expect(axios.put).not.toHaveBeenCalled()
+    expect(feeds.value).toHaveLength(2)
+
+    // A genuine later scroll-past still marks read.
+    await handleIntersection([
+      { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+    ])
+    expect(axios.put).toHaveBeenCalledWith('/api/v1/article/read/201', null, expect.anything())
+
+    document.body.removeChild(node)
+    setInitialLoad(false)
+  })
+
+  describe('markRead resilience', () => {
+    // Mirrors useFeeds.js's MARK_READ_RETRY_DELAYS_MS (not exported). Kept in
+    // sync via this comment: if that backoff changes, update this too — too
+    // small a value just makes the affected test's `await` hang until it
+    // times out, rather than pass incorrectly.
+    const RETRY_BACKOFF_SUM_MS = 300 + 1000
+
+    // A failed assertion before a test's own vi.useRealTimers() call would
+    // otherwise leak fake timers into every later test in this file.
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('retries a failed mark-read PUT before giving up, with a request timeout set', async () => {
+      vi.useFakeTimers()
+      axios.put
+        .mockRejectedValueOnce(new Error('network'))
+        .mockRejectedValueOnce(new Error('network'))
+        .mockResolvedValueOnce({ status: 200 })
+
+      const done = markRead(601)
+      await vi.runAllTimersAsync()
+
+      expect(await done).toBe(true)
+      expect(axios.put).toHaveBeenCalledTimes(3)
+      expect(axios.put).toHaveBeenCalledWith(
+        '/api/v1/article/read/601',
+        null,
+        expect.objectContaining({ timeout: expect.any(Number) }),
+      )
+      expect(showMessage.value).toBe(false)
+    })
+
+    it('reports failure once retries are exhausted, and stops withholding the item from a refetch', async () => {
+      vi.useFakeTimers()
+      axios.put.mockRejectedValue(new Error('network'))
+
+      const done = markRead(602)
+      // Advance past just the two retry backoffs — not runAllTimersAsync(),
+      // which would also fire showMessageForXSeconds's own 5s auto-hide timer
+      // and reset showMessage before the assertion below.
+      await vi.advanceTimersByTimeAsync(RETRY_BACKOFF_SUM_MS)
+
+      expect(await done).toBe(false)
+      expect(axios.put).toHaveBeenCalledTimes(3)
+      expect(showMessage.value).toBe(true)
+      expect(message.value).toMatch(/could not mark/i)
+
+      // The mark never committed, so the item genuinely is still unread
+      // server-side — a refetch must be free to show it again, not hide it
+      // forever as "pending".
+      axios.get.mockResolvedValueOnce({
+        data: {
+          feeds: [{
+            title: 'Feed A',
+            items: [{ id: 602, title: 'A1', content: '', url: 'https://example.test/a1', timestamp: '2026-01-01 10:00:00' }],
+          }],
+        },
+      })
+      await fetchData()
+      expect(feeds.value.map(f => f.id)).toEqual([602])
+    })
+
+    it('does not retry a non-retryable 4xx mark-read failure', async () => {
+      const error = new Error('Not Found')
+      error.response = { status: 404 }
+      axios.put.mockRejectedValueOnce(error)
+
+      const result = await markRead(605)
+
+      expect(result).toBe(false)
+      expect(axios.put).toHaveBeenCalledTimes(1)
+      expect(showMessage.value).toBe(true)
+    })
+
+    it('keeps a still-unconfirmed read article out of a concurrent background refetch', async () => {
+      let resolvePut
+      axios.put.mockReturnValueOnce(new Promise(resolve => { resolvePut = resolve }))
+
+      const done = markRead(603) // simulates a page-turn's fire-and-forget mark-read, still in flight
+
+      // A background sync's trailing fetchData() resolves while that PUT is
+      // still pending — the server hasn't committed the read yet, so it's
+      // still in the response.
+      axios.get.mockResolvedValueOnce({
+        data: {
+          feeds: [{
+            title: 'Feed A',
+            items: [{ id: 603, title: 'A1', content: '', url: 'https://example.test/a1', timestamp: '2026-01-01 10:00:00' }],
+          }],
+        },
+      })
+      await fetchData()
+
+      expect(feeds.value).toEqual([])
+
+      resolvePut({ status: 200 })
+      await done
+    })
+
+    it('excludes an item whose mark-read PUT settles between a refetch\'s request and its response', async () => {
+      // The PUT commits (and clears the pending id) while the GET below is
+      // still in flight — the GET's response nonetheless reflects the DB as
+      // of before that commit, still reporting the item unread. A snapshot
+      // taken only once the GET resolves would miss this; one taken before
+      // it's dispatched (unioned with the live state) catches it too.
+      axios.put.mockResolvedValueOnce({ status: 200 })
+      const markDone = markRead(604)
+
+      let resolveGet
+      axios.get.mockReturnValueOnce(new Promise(resolve => { resolveGet = resolve }))
+      const fetchPromise = fetchData()
+
+      await markDone // the PUT (and pending-id cleanup) settles first...
+
+      resolveGet({ // ...then the already-in-flight GET resolves, still unread.
+        data: {
+          feeds: [{
+            title: 'Feed A',
+            items: [{ id: 604, title: 'A1', content: '', url: 'https://example.test/a1', timestamp: '2026-01-01 10:00:00' }],
+          }],
+        },
+      })
+      await fetchPromise
+
+      expect(feeds.value).toEqual([])
+    })
+
+    it('keeps an item withheld until every overlapping markRead() call for it settles', async () => {
+      // nextArticle()/prevArticle() can both re-mark the same article (page
+      // forward, back, forward again) — two overlapping calls for one id.
+      let resolveFirst
+      let resolveSecond
+      axios.put
+        .mockReturnValueOnce(new Promise(resolve => { resolveFirst = resolve }))
+        .mockReturnValueOnce(new Promise(resolve => { resolveSecond = resolve }))
+
+      const first = markRead(606)
+      const second = markRead(606)
+
+      resolveSecond({ status: 200 }) // the second (later) call settles first
+      await second
+
+      // The first call is still in flight — a refetch must still withhold it.
+      axios.get.mockResolvedValueOnce({
+        data: {
+          feeds: [{
+            title: 'Feed A',
+            items: [{ id: 606, title: 'A1', content: '', url: 'https://example.test/a1', timestamp: '2026-01-01 10:00:00' }],
+          }],
+        },
+      })
+      await fetchData()
+      expect(feeds.value).toEqual([])
+
+      resolveFirst({ status: 200 })
+      await first
+    })
+  })
+
+  describe('markAllRead resilience', () => {
+    const RETRY_BACKOFF_SUM_MS = 300 + 1000
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('reports a partial failure instead of claiming full success', async () => {
+      feeds.value = [
+        { id: 701, title: 'First' },
+        { id: 702, title: 'Second' },
+      ]
+      vi.spyOn(window, 'confirm').mockReturnValue(true)
+      axios.put
+        .mockResolvedValueOnce({ status: 200 }) // 701 succeeds
+        .mockRejectedValue(new Error('network')) // 702 fails every attempt
+
+      vi.useFakeTimers()
+      const done = markAllRead()
+      await vi.advanceTimersByTimeAsync(RETRY_BACKOFF_SUM_MS)
+      await done
+
+      expect(message.value).toContain('1 of 2')
+      expect(message.value).not.toBe('All articles marked as read.')
+    })
+  })
+
+  describe('feed filter', () => {
+    const twoFeedsResponse = {
+      data: {
+        feeds: [
+          {
+            title: 'Feed A',
+            items: [
+              { id: 1, title: 'A1', content: '', url: 'https://example.test/a1', timestamp: '2026-01-01 10:00:00' },
+              { id: 3, title: 'A2', content: '', url: 'https://example.test/a2', timestamp: '2026-01-03 10:00:00' },
+            ],
+          },
+          {
+            title: 'Feed B',
+            items: [
+              { id: 2, title: 'B1', content: '', url: 'https://example.test/b1', timestamp: '2026-01-02 10:00:00' },
+            ],
+          },
+        ],
+      },
+    }
+
+    it('narrows the displayed list to a single feed and restores it on "All feeds"', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      // Options are the distinct feed titles, sorted.
+      expect(feedTitles.value).toEqual(['Feed A', 'Feed B'])
+      // Unfiltered: everything, newest first (Jan 3, Jan 2, Jan 1).
+      expect(feeds.value.map(f => f.id)).toEqual([3, 2, 1])
+
+      await setFeedFilter('Feed A')
+      expect(feeds.value.map(f => f.id)).toEqual([3, 1])
+
+      await setFeedFilter(null)
+      expect(feeds.value.map(f => f.id)).toEqual([3, 2, 1])
+    })
+
+    it('does not resurrect read articles when the filter is cleared', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      axios.put.mockResolvedValue({ status: 200 })
+      await fetchData()
+
+      await setFeedFilter('Feed A')
+      setInitialLoad(true)
+
+      // The first Feed A article scrolls above the viewport → marked read and
+      // dropped from both the filtered list and the master.
+      await handleIntersection([
+        { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+      ])
+      setInitialLoad(false)
+
+      expect(feeds.value.map(f => f.id)).toEqual([1])
+
+      await setFeedFilter(null)
+      // Article 3 stays gone; the still-unread articles remain, newest first.
+      expect(feeds.value.map(f => f.id)).toEqual([2, 1])
+    })
+
+    it('does not resurrect an article-view read-in-place article when re-selecting its feed', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      axios.put.mockResolvedValue({ status: 200 })
+      await fetchData()
+
+      await setFeedFilter('Feed B')
+      expect(feeds.value.map(f => f.id)).toEqual([2])
+
+      // Article view marks the displayed article read in place (feed.read =
+      // true) without removing it, so currentIndex stays valid while paging —
+      // see markCurrentArticleRead. It's still in the list at this point.
+      markCurrentArticleRead()
+      expect(feeds.value.map(f => f.id)).toEqual([2])
+
+      // Switching to another feed and back must not resurrect it as if it
+      // were still unread.
+      await setFeedFilter('Feed A')
+      await setFeedFilter('Feed B')
+
+      expect(feeds.value).toEqual([])
+    })
+
+    it('marks the newly displayed article read when the filter is switched while in article view', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      axios.put.mockResolvedValue({ status: 200 })
+      await fetchData()
+      viewMode.value = 'article'
+
+      // Switching into Feed B while in article view immediately displays its
+      // one article's full content — that counts as "viewed", so it's marked
+      // read the same way toggleViewMode()/nextArticle()/prevArticle() do.
+      await setFeedFilter('Feed B')
+
+      expect(axios.put).toHaveBeenCalledWith('/api/v1/article/read/2', null, expect.anything())
+      expect(feeds.value[0].read).toBe(true)
+
+      // It doesn't resurface either, once dropped on the next switch.
+      await setFeedFilter('Feed A')
+      await setFeedFilter('Feed B')
+      expect(feeds.value).toEqual([])
+    })
+
+    it('does not mark the newly displayed article read when the filter is switched in list view', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      // List view only shows titles — switching filters there must not mark
+      // anything read; that's still driven solely by scroll (handleIntersection).
+      await setFeedFilter('Feed B')
+
+      expect(axios.put).not.toHaveBeenCalled()
+      expect(feeds.value[0].read).toBeUndefined()
+    })
+
+    it('keeps an emptied filtered feed selected and selectable, showing "All caught up"', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      axios.put.mockResolvedValue({ status: 200 })
+      await fetchData()
+
+      await setFeedFilter('Feed B')
+      expect(feeds.value.map(f => f.id)).toEqual([2])
+
+      // Mark all (visible = just Feed B) read — Feed B has no unread items left.
+      vi.spyOn(window, 'confirm').mockReturnValue(true)
+      await markAllRead()
+
+      // The list empties, but the filter stays put and the feed remains a
+      // selectable option (so the <select> never dangles) even though it no
+      // longer has unread items.
+      expect(feeds.value).toEqual([])
+      expect(feedFilter.value).toBe('Feed B')
+      expect(feedTitles.value).toEqual(['Feed A', 'Feed B'])
+
+      // Switching away drops the now-empty feed from the options.
+      await setFeedFilter(null)
+      expect(feedTitles.value).toEqual(['Feed A'])
+      expect(feeds.value.map(f => f.id)).toEqual([3, 1])
+    })
+
+    it('counts unread items in the selected feed when a filter is active, else the global total', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      // No filter: global unread total across both feeds.
+      expect(unreadCount.value).toBe(3)
+
+      // Filtered: only the selected feed's unread items.
+      await setFeedFilter('Feed B')
+      expect(unreadCount.value).toBe(1)
+      await setFeedFilter('Feed A')
+      expect(unreadCount.value).toBe(2)
+
+      await setFeedFilter(null)
+      expect(unreadCount.value).toBe(3)
+    })
+
+    it('exposes per-feed unread counts, excluding items marked read in place', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      expect(feedUnreadCounts.value).toEqual({ 'Feed A': 2, 'Feed B': 1 })
+
+      // Article view marks items read in place (feed.read = true) without
+      // removing them from the master — the counts must not include those.
+      allItems.value.find(i => i.id === 3).read = true
+      expect(feedUnreadCounts.value).toEqual({ 'Feed A': 1, 'Feed B': 1 })
+    })
+  })
+
   it('strips leftover embedded-video placeholder headings', async () => {
     feeds.value = [{
       id: 1,

vue/src/composables/__tests__/viewModeBoot.spec.js

@@ -0,0 +1,76 @@
+// Reproduces the "reload the tab while in article view" boot sequence:
+// module-scope init must pick up the persisted viewMode, and RssFeeds'
+// mount flow (fetchData + sync) must not reset it back to 'list'.
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+vi.mock('axios')
+
+class FakeIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
+
+describe('viewMode boot persistence', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    localStorage.clear()
+    localStorage.setItem('user-token', 'test-token')
+    localStorage.setItem('user-id', '7')
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('boots into article view when localStorage says so, surviving the mount fetch/sync', async () => {
+    localStorage.setItem('viewMode', 'article')
+
+    const axios = (await import('axios')).default
+    axios.get.mockResolvedValue({
+      data: {
+        feeds: [
+          {
+            title: 'My Feed',
+            items: [
+              { id: 1, title: 'Article one', content: '<p>hi</p>', url: 'https://example.test/1', timestamp: '2026-01-01 10:00:00' },
+            ],
+          },
+        ],
+      },
+    })
+    axios.post.mockResolvedValue({ status: 200 })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    // Import AFTER setting storage — module-scope refs initialize at import.
+    const { useFeeds } = await import('../useFeeds')
+    const { viewMode } = useFeeds()
+    expect(viewMode.value).toBe('article')
+
+    const RssFeeds = (await import('../../components/RssFeeds.vue')).default
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    expect(viewMode.value).toBe('article')
+    expect(wrapper.find('.article-single').exists()).toBe(true)
+    expect(wrapper.find('#article').exists()).toBe(false)
+
+    // The article shown right after reload must be marked read immediately —
+    // not only once the user pages forward/back at least once.
+    expect(axios.put).toHaveBeenCalledWith('/api/v1/article/read/1', null, expect.anything())
+
+    wrapper.unmount()
+  })
+
+  it('boots into list view when the key is absent', async () => {
+    const axios = (await import('axios')).default
+    axios.get.mockResolvedValue({ data: { feeds: [] } })
+    axios.post.mockResolvedValue({ status: 200 })
+
+    const { useFeeds } = await import('../useFeeds')
+    const { viewMode } = useFeeds()
+    expect(viewMode.value).toBe('list')
+  })
+})

vue/src/composables/useFeeds.js

@@ -1,19 +1,89 @@
-import { ref, nextTick } from 'vue';
+import { ref, computed, nextTick } from 'vue';
 import axios from 'axios';
 import { Readability } from '@mozilla/readability';
 
 // Module-level state — declared outside useFeeds() so every caller shares the
 // same singleton refs (a Pinia-free "store" for the feed list and its UI state).
 const showMessage = ref(false)
+// `allItems` is the full flattened+sorted stream from the last fetch (the
+// master); `feeds` is the currently displayed projection of it (all items, or a
+// single feed when a filter is active). Every view/observer consumer operates on
+// `feeds` — the filter layer only ever swaps what `feeds` points at, so none of
+// the index-based observer / currentIndex logic has to know a filter exists.
+const allItems = ref([]);
 const feeds = ref([]);
+const feedFilter = ref(null) // selected feedTitle, or null = all feeds (not persisted)
+// Distinct feed titles present in the loaded (unread) items — the filter options.
+// The active filter is always kept in the list even once its feed runs out of
+// unread items, so the <select> never binds to a value that isn't an option
+// (it just shows "All caught up") and the feed stays re-selectable.
+const feedTitles = computed(() => {
+  const titles = new Set(allItems.value.map(i => i.feedTitle))
+  if (feedFilter.value) titles.add(feedFilter.value)
+  return [...titles].sort((a, b) => a.localeCompare(b))
+})
+// Unread count per feed title, shown next to each option in the filter
+// <select>. Derived from the master (allItems) so article view's
+// read-but-still-shown items are excluded. A title kept in feedTitles with no
+// unread items left has no key here — render it as 0.
+const feedUnreadCounts = computed(() => {
+  const counts = {}
+  for (const item of allItems.value) {
+    if (!item.read) counts[item.feedTitle] = (counts[item.feedTitle] ?? 0) + 1
+  }
+  return counts
+})
+// The header badge count: unread items in the selected feed when a filter is
+// active, otherwise the global unread total. Derived from the master (allItems)
+// rather than the displayed `feeds` so article view's read-but-still-shown
+// items are excluded and the count matches the filter regardless of view.
+const unreadCount = computed(() => {
+  const items = feedFilter.value
+    ? allItems.value.filter(i => i.feedTitle === feedFilter.value)
+    : allItems.value
+  return items.filter(i => !i.read).length
+})
+// AppNav renders this snapshot (refreshed via refreshUnreadDisplay, below)
+// for the filter <select>'s per-feed option counts, instead of binding
+// feedUnreadCounts directly — by design, this stays frozen while paging
+// through article view (markCurrentArticleRead marks one article read per
+// page turn, which would otherwise recompute it live on every single swipe).
+// The header's own unread badge stays bound to the live unreadCount (it
+// should update in real time regardless of view). Everywhere else that marks
+// articles read — list-view scrolling (handleIntersection), opening/changing
+// the filter, syncing, mark-all-read, leaving article view — refreshes this
+// snapshot immediately, so it only ever looks stale during article-view
+// paging itself.
+const displayedFeedUnreadCounts = ref({})
+function refreshUnreadDisplay() {
+  displayedFeedUnreadCounts.value = feedUnreadCounts.value
+}
 const message = ref('')
-const showModal = ref(false)
+const viewMode = ref(localStorage.getItem('viewMode') || 'list') // 'list' | 'article' — toggled from the hamburger menu, persisted per device
-const viewMode = ref('list') // 'list' | 'article' — toggled from the hamburger menu
 const currentIndex = ref(0)
 const layout = ref(localStorage.getItem('layout') || 'list') // 'list' | 'cards' — list-view display style, toggled from the hamburger menu
 
 let observer; // Declare observer outside the setup function
 let initialLoad = false
+// An IntersectionObserver always delivers an initial snapshot for every element
+// it starts observing. If the observer (re)connects while the page is scrolled
+// down — e.g. leaving a scrolled article view, an HMR module reload, or the
+// post-splice re-setup in handleIntersection — that snapshot reports every
+// article above the viewport as "not intersecting / scrolled past" and would
+// mark them all read at once. So each setupIntersectionObserver() sets this and
+// handleIntersection() drops exactly the first callback after a connect; only
+// genuine scroll-driven exits mark read after that.
+let skipNextObservation = false
+
+// Timestamp (performance.now()) of the most recent programmatic scroll / list
+// mutation that moves the page without user intent — currently the list-view
+// read-correction below. AppNav's auto-hide handler resyncs its scroll baseline
+// (instead of treating the induced jump as a user scroll) for a short window
+// after this, so removing read articles can't pop the header in/out mid-read.
+const lastProgrammaticScroll = ref(0)
+function markProgrammaticScroll() {
+  lastProgrammaticScroll.value = performance.now()
+}
 
 export function authHeaders() {
   return {
@@ -134,12 +204,16 @@ async function getReadable(feed, index) {
     })
     // taz "Mehr zum Thema" related-articles teaser section.
     doc.querySelectorAll('#articleTeaser').forEach(el => el.remove())
-    // taz subsidiary magazine promo blocks (e.g. taz FUTURZWEI): the promo
+    // taz subsidiary magazine promo blocks (e.g. taz FUTURZWEI): either the
-    // <article> carries an aria-label containing "Abo".
+    // <article> itself or its direct <a> child carries an aria-label containing "Abo".
     doc.querySelectorAll('article[aria-label*="Abo"]').forEach(el => {
       const container = el.closest('section') ?? el
       container.remove()
     })
+    doc.querySelectorAll('article > a[aria-label*="Abo"]').forEach(el => {
+      const container = el.closest('section') ?? el.closest('article')
+      if (container) container.remove()
+    })
     const article = new Readability(doc).parse();
     if (!article) {
       showMessageForXSeconds('Could not extract readable content.', 5)
@@ -153,27 +227,152 @@ async function getReadable(feed, index) {
   }
 }
 
-async function markRead(id) {
+// Ids with a mark-read PUT in flight (or being retried) — see markRead() and
-  try {
+// fetchData() below. A refcount rather than a plain Set: nextArticle()/
-    const response = await axios.put("/api/v1/article/read/" + id, null, authHeaders())
+// prevArticle() can both re-mark the same article (page forward, back,
-    console.log(response.status)
+// forward again), so two overlapping markRead() calls for one id must both
-  } catch (error) {
+// finish before fetchData() is allowed to trust the server's word on it —
-    console.log(error)
+// otherwise the first call to settle would clear the id out from under the
+// second, still-in-flight one.
+const pendingReadCounts = new Map()
+
+function addPendingRead(id) {
+  pendingReadCounts.set(id, (pendingReadCounts.get(id) ?? 0) + 1)
+}
+
+function removePendingRead(id) {
+  const count = pendingReadCounts.get(id) ?? 0
+  if (count <= 1) {
+    pendingReadCounts.delete(id)
+  } else {
+    pendingReadCounts.set(id, count - 1)
   }
 }
 
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+// Short backoff between retries of a failed mark-read PUT — each entry is the
+// wait before that retry attempt.
+const MARK_READ_RETRY_DELAYS_MS = [300, 1000]
+// Bounds how long a hung request (dead connection, captive portal — axios has
+// no default timeout) can keep an id "pending": without this, a request that
+// never settles would never leave pendingReadCounts, silently withholding
+// that article from every fetchData() for the rest of the session.
+const MARK_READ_TIMEOUT_MS = 10000
+
+// 4xx responses (expired token, item not found/not owned — see
+// src/reader/mark_read.rs) mean the request itself is wrong and won't
+// succeed on retry; only a missing response (network error, timeout) or a
+// server-side/rate-limit status is worth retrying.
+function isRetryableMarkReadError(error) {
+  const status = error.response?.status
+  return status === undefined || status >= 500 || status === 429
+}
+
+// Resolves to true once the article is confirmed read server-side, or false
+// once retries (if any) are exhausted / the error isn't retryable.
+async function markRead(id) {
+  addPendingRead(id)
+  try {
+    for (let attempt = 0; ; attempt++) {
+      try {
+        await axios.put("/api/v1/article/read/" + id, null, { ...authHeaders(), timeout: MARK_READ_TIMEOUT_MS })
+        return true
+      } catch (error) {
+        console.error('Error marking article read:', error)
+        if (attempt >= MARK_READ_RETRY_DELAYS_MS.length || !isRetryableMarkReadError(error)) {
+          // Out of retries, or a retry can't help — this mark never committed
+          // server-side, so the item genuinely is still unread there. Surface
+          // it rather than letting it silently vanish from the local list now
+          // only to mysteriously reappear as unread later.
+          showMessageForXSeconds('Could not mark an article as read. It may reappear as unread.', 5)
+          return false
+        }
+        await delay(MARK_READ_RETRY_DELAYS_MS[attempt])
+      }
+    }
+  } finally {
+    removePendingRead(id)
+  }
+}
+
+// Projects the master list onto `feeds` through the active filter. A filtered
+// feed with no remaining unread items projects to an empty list ("All caught
+// up") while staying selected — see feedTitles.
+function applyFilter() {
+  feeds.value = feedFilter.value
+    ? allItems.value.filter(i => i.feedTitle === feedFilter.value)
+    : allItems.value.slice()
+}
+
+// Article view marks an article read in place (feed.read = true) without
+// removing it — see markCurrentArticleRead — so currentIndex stays valid while
+// paging within that same list. Anything switches the list out from under
+// that index (leaving article view, or re-filtering while still in it) has to
+// drop those read-in-place articles from the master here, or they resurface:
+// re-selecting their feed would otherwise re-project them from allItems as if
+// still unread.
+function dropReadArticles() {
+  // The feeds.value filter here is redundant for the setFeedFilter() caller
+  // (applyFilter() overwrites feeds.value again right after) but is what
+  // leaveArticleView() actually needs — kept shared rather than split into two
+  // near-identical branches.
+  feeds.value = feeds.value.filter(feed => !feed.read)
+  allItems.value = allItems.value.filter(feed => !feed.read)
+}
+
+// Changes the active feed filter and re-projects. Mirrors toggleLayout's
+// observer/scroll-safe pattern: disconnect first, scroll to top, then re-point
+// the observer at the new .observe nodes after Vue has re-rendered. Works in
+// article view too — there are no .observe nodes there so the setup is a no-op,
+// and resetting currentIndex keeps paging valid against the new list.
+async function setFeedFilter(title) {
+  disconnectObserver()
+  window.scrollTo(0, 0)
+  dropReadArticles()
+  feedFilter.value = title // null for "All feeds"
+  currentIndex.value = 0
+  applyFilter()
+  // In article view the item at currentIndex is fully displayed, not just
+  // listed — unlike a plain currentIndex reset from paging, this one really is
+  // "shown" to the user, so mark it the same way toggleViewMode()/nextArticle()/
+  // prevArticle() do. List view only shows titles here; its own read-marking
+  // happens via scroll (handleIntersection), so this must not fire there.
+  if (viewMode.value === 'article') markCurrentArticleRead()
+  refreshUnreadDisplay()
+  await nextTick()
+  setupIntersectionObserver()
+}
+
 const fetchData = async () => {
   const user_id = localStorage.getItem("user-id")
   try {
+    // Snapshot ids pending *before* the GET goes out, not just when its
+    // response comes back. A markRead() PUT that commits while this GET is
+    // in flight is invisible to the check below (its id has already been
+    // cleared by the time the response arrives) even though the server read
+    // the DB before that commit and so still reported the item unread — this
+    // snapshot catches that case too.
+    const pendingBeforeFetch = new Set(pendingReadCounts.keys())
     const response = await axios.get("/api/v1/article/get/" + user_id, authHeaders());
     const items = [];
     response.data.feeds.forEach(feed => {
       feed.items.forEach(item => items.push({ ...item, feedTitle: feed.title }));
     });
+    // An item pending at either end of this request may not have committed
+    // server-side yet, so the server can still report it unread here. Drop it
+    // from this snapshot too — otherwise a concurrent background sync's
+    // refetch (see sync()) would resurrect it as unread out from under the
+    // user while markRead() is still confirming or retrying it.
+    const freshItems = items.filter(item => !pendingBeforeFetch.has(item.id) && !pendingReadCounts.has(item.id));
     // timestamps are zero-padded "YYYY-MM-DD HH:MM:SS" strings, so a plain
     // lexicographic comparison sorts them chronologically.
-    items.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+    freshItems.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-    feeds.value = items;
+    allItems.value = freshItems;
+    applyFilter();
+    refreshUnreadDisplay();
     await nextTick();
     setupIntersectionObserver();
   } catch (error) {
@@ -217,14 +416,25 @@ function setupIntersectionObserver() {
   });
 
   const observedDivs = document.querySelectorAll(".observe");
-  if (observedDivs.length > 0) {
+  // Arm the skip only when we actually observe nodes: an observe() batch fires
-    observedDivs.forEach(observedDiv => {
+  // an initial snapshot to drop (a connect while scrolled down would otherwise
-      observer.observe(observedDiv);
+  // mass-mark everything above the viewport), but with nothing observed there's
-    })
+  // no snapshot — and assigning unconditionally clears any stale flag from a
-  }
+  // prior no-op setup (e.g. one run in article view, which has no .observe nodes).
+  skipNextObservation = observedDivs.length > 0
+  observedDivs.forEach(observedDiv => {
+    observer.observe(observedDiv);
+  })
 }
 
 function handleIntersection(entries, topbarHeight = 0) {
+  // Drop the initial snapshot fired on (re)connect — see skipNextObservation.
+  // The old observer is disconnected before this new one observes, so only the
+  // latest observer's initial callback reaches here; one skip is enough.
+  if (skipNextObservation) {
+    skipNextObservation = false
+    return
+  }
   // Resolve all affected feeds before touching feeds.value — the target.id
   // indices are render-time positions that shift once we splice the array.
   const readFeeds = entries
@@ -243,8 +453,14 @@ function handleIntersection(entries, topbarHeight = 0) {
     observer = null
   }
 
+  // Both the array splice (via scroll anchoring) and the scrollBy correction
+  // below move the page — flag it so AppNav's header auto-hide ignores the jump.
+  markProgrammaticScroll()
   const readIds = new Set(readFeeds.map(feed => feed.id))
   feeds.value = feeds.value.filter(feed => !readIds.has(feed.id))
+  // Mirror into the master so cleared filters don't resurrect read articles.
+  allItems.value = allItems.value.filter(feed => !readIds.has(feed.id))
+  refreshUnreadDisplay()
 
   for (const feed of readFeeds) {
     markRead(feed.id)
@@ -261,6 +477,7 @@ function handleIntersection(entries, topbarHeight = 0) {
     if (first) {
       const top = first.getBoundingClientRect().top
       if (top < topbarHeight) {
+        markProgrammaticScroll()
         window.scrollBy(0, top - topbarHeight)
       }
     }
@@ -268,6 +485,13 @@ function handleIntersection(entries, topbarHeight = 0) {
   })
 }
 
+function disconnectObserver() {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+}
+
 function setInitialLoad(value) {
   initialLoad = value
 }
@@ -277,11 +501,25 @@ async function markAllRead() {
   if (!window.confirm('Mark all articles as read?')) return
 
   const ids = feeds.value.map(feed => feed.id)
+  const readIds = new Set(ids)
   feeds.value = []
+  // markAllRead operates on the visible subset (only the filtered feed, if one
+  // is active) — drop exactly those from the master too.
+  allItems.value = allItems.value.filter(feed => !readIds.has(feed.id))
   currentIndex.value = 0
-  // markRead swallows its own errors, so Promise.all can't reject here.
+  refreshUnreadDisplay()
-  await Promise.all(ids.map(id => markRead(id)))
+  // markRead() resolves to true/false rather than rejecting, so Promise.all
-  showMessageForXSeconds('All articles marked as read.', 5)
+  // can't reject here — but a false means that article is still unread
+  // server-side, which the message below must not contradict.
+  const results = await Promise.all(ids.map(id => markRead(id)))
+  const failedCount = results.filter(ok => !ok).length
+  if (failedCount === 0) {
+    showMessageForXSeconds('All articles marked as read.', 5)
+  } else {
+    // markRead() already surfaced each individual failure — this summarizes
+    // the batch outcome instead of claiming full success over it.
+    showMessageForXSeconds(`Marked ${ids.length - failedCount} of ${ids.length} as read; ${failedCount} failed and may reappear.`, 5)
+  }
 }
 
 function markCurrentArticleRead() {
@@ -299,9 +537,11 @@ async function leaveArticleView() {
   // Articles paged past in article view were marked read but deliberately kept
   // in place so currentIndex stayed valid — drop them now so they don't keep
   // showing up in the list view.
-  feeds.value = feeds.value.filter(feed => !feed.read)
+  dropReadArticles()
   currentIndex.value = 0
   viewMode.value = 'list'
+  localStorage.setItem('viewMode', viewMode.value)
+  refreshUnreadDisplay()
   // The v-if on the list container tears down and recreates all .observe DOM
   // nodes when switching views, so the intersection observer must be
   // re-pointed at the new elements after Vue has finished rendering.
@@ -321,6 +561,7 @@ function toggleViewMode() {
       observer = null
     }
     viewMode.value = 'article'
+    localStorage.setItem('viewMode', viewMode.value)
     currentIndex.value = 0
     markCurrentArticleRead()
   }
@@ -357,13 +598,21 @@ function prevArticle() {
 export function useFeeds() {
   return {
     feeds,
+    allItems,
+    feedFilter,
+    feedTitles,
+    feedUnreadCounts,
+    unreadCount,
+    displayedFeedUnreadCounts,
+    refreshUnreadDisplay,
+    setFeedFilter,
     showMessage,
     message,
-    showModal,
     viewMode,
     currentIndex,
     toggleViewMode,
     leaveArticleView,
+    markCurrentArticleRead,
     layout,
     toggleLayout,
     nextArticle,
@@ -375,7 +624,10 @@ export function useFeeds() {
     markAllRead,
     showMessageForXSeconds,
     setupIntersectionObserver,
+    disconnectObserver,
     setInitialLoad,
     handleIntersection,
+    lastProgrammaticScroll,
+    markProgrammaticScroll,
   }
 }

vue/src/composables/useSettings.js

@@ -19,10 +19,20 @@ const CONTENT_FONT_OPTIONS = [
 const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
 const SIZE_LABELS = ['S', 'M', 'L', 'XL']
 
+const TEXT_ALIGN_OPTIONS = [
+  { key: 'left',    label: 'Left' },
+  { key: 'justify', label: 'Justified' },
+]
+
+const PADDING_STEPS  = [1, 0.5, 0.15]
+const PADDING_LABELS = ['Default', 'Compact', 'Minimal']
+
 const headlineSizeScale = ref(parseFloat(localStorage.getItem('s-headline-size') ?? '1'))
 const contentSizeScale  = ref(parseFloat(localStorage.getItem('s-content-size')  ?? '1'))
 const headlineFontKey   = ref(localStorage.getItem('s-headline-font') ?? 'default')
 const contentFontKey    = ref(localStorage.getItem('s-content-font')  ?? 'default')
+const textAlignKey      = ref(localStorage.getItem('s-text-align')    ?? 'left')
+const contentPadding    = ref(parseFloat(localStorage.getItem('s-content-padding') ?? '1'))
 
 function fontValue(options, key) {
   return (options.find(o => o.key === key) ?? options[0]).value
@@ -34,6 +44,8 @@ function applySettings() {
   s.setProperty('--content-font-size-scale',  contentSizeScale.value)
   s.setProperty('--headline-font-family',     fontValue(HEADLINE_FONT_OPTIONS, headlineFontKey.value))
   s.setProperty('--content-font-family',      fontValue(CONTENT_FONT_OPTIONS,  contentFontKey.value))
+  s.setProperty('--content-text-align',      textAlignKey.value)
+  s.setProperty('--content-padding',         contentPadding.value + 'rem')
 }
 
 function setHeadlineSize(scale) {
@@ -60,6 +72,18 @@ function setContentFont(key) {
   applySettings()
 }
 
+function setTextAlign(key) {
+  textAlignKey.value = key
+  localStorage.setItem('s-text-align', key)
+  applySettings()
+}
+
+function setContentPadding(step) {
+  contentPadding.value = step
+  localStorage.setItem('s-content-padding', step)
+  applySettings()
+}
+
 export function useSettings() {
   return {
     headlineSizeScale,
@@ -70,10 +94,17 @@ export function useSettings() {
     SIZE_LABELS,
     HEADLINE_FONT_OPTIONS,
     CONTENT_FONT_OPTIONS,
+    TEXT_ALIGN_OPTIONS,
+    PADDING_STEPS,
+    PADDING_LABELS,
     applySettings,
     setHeadlineSize,
     setContentSize,
     setHeadlineFont,
     setContentFont,
+    setTextAlign,
+    setContentPadding,
+    textAlignKey,
+    contentPadding,
   }
 }

vue/src/router/index.js

@@ -31,23 +31,13 @@ const router = createRouter({
 
   ]
 })
-router.beforeEach((to, from, next) => {
+router.beforeEach((to) => {
-  if (to.meta.requiresAuth) {
+  const isAuthenticated = localStorage.getItem("user-token") != null;
-    let isAuthenticated = false;
+  // Redirect unauthenticated users hitting a protected route to login;
-    if (localStorage.getItem("user-token") != null){
+  // returning a value (instead of the deprecated next() callback) is the
-      isAuthenticated = true;
+  // modern vue-router guard API. Returning nothing lets navigation proceed.
-    }
+  if (to.meta.requiresAuth && !isAuthenticated) {
-
+    return '/login';
-    if (!isAuthenticated) {
-      // Redirect to the login page
-      next('/login');
-    } else {
-      // Proceed to the protected route
-      next();
-    }
-  } else {
-    // For routes that don't require authentication, proceed without checking
-    next();
   }
 });
 export default router