feat: implement news source filtering and enhance UI components

Added a source picker to the News component, allowing users to filter news by source. Updated the HeadlineRow component to conditionally display the source name based on the selected filter. Enhanced the overall layout and styling of the news section, including improved handling of empty states and loading indicators. Updated translations for new UI elements and added a new type for news sources to streamline data handling.

Author: adarshaacharya

apps/desktop/src-tauri/src/commands/news.rs

@@ -2,7 +2,7 @@
 
 use chrono::Utc;
 use sajilo_api::load_state::LoadState;
-use sajilo_api::news::NewsDigest;
+use sajilo_api::news::{NewsDigest, NewsSourceInfo};
 use sajilo_providers::{HttpClient, rss};
 use tauri::{AppHandle, Manager, Wry};
 
@@ -45,3 +45,9 @@ pub async fn get_news(app: AppHandle<Wry>, refresh: Option<bool>) -> LoadState<N
         })
         .await
 }
+
+/// The source picker's options. Static — no network, no cache.
+#[tauri::command]
+pub fn news_sources() -> Vec<NewsSourceInfo> {
+    NewsSourceInfo::catalog()
+}

apps/desktop/src-tauri/src/lib.rs

@@ -142,6 +142,7 @@ pub fn run() {
             commands::weather::get_weather,
             commands::forex::get_forex,
             commands::news::get_news,
+            commands::news::news_sources,
             commands::calendar::today,
             commands::calendar::month_grid,
             commands::calendar::shift_month,

apps/desktop/src/features/calendar/_components/glance-cards.tsx

@@ -2,14 +2,15 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import { Icon } from "../../../shared/components/icon";
 import { Pressable } from "../../../shared/components/motion";
-import { Sparkline } from "../../../shared/components/sparkline";
 import { useSettings } from "../../../shared/context/settings-context";
-import { api, type Bazar } from "../../../shared/lib/ipc";
+import { api } from "../../../shared/lib/ipc";
 import { loadedValue } from "../../../shared/lib/load-state";
 import type { LoadState } from "../../../types/api/LoadState";
+import type { StockMarketSnapshot } from "../../../types/api/StockMarketSnapshot";
 import type { WeatherLocation } from "../../../types/api/WeatherLocation";
 import type { WeatherSnapshot } from "../../../types/api/WeatherSnapshot";
-import { headlineMetal, money0, priceChange } from "../../bazar/_lib/format";
+import { money } from "../../bazar/_lib/format";
+import { changeTone } from "../../bazar/_lib/stock-tone";
 import { conditionTitle, formatCelsius } from "../../weather/_lib/format";
 
 const CITY: Record<WeatherLocation, { en: string; ne: string }> = {
@@ -44,7 +45,7 @@ export function GlanceCards() {
   const { language, modules, t } = useSettings();
   const navigate = useNavigate();
   const [weather, setWeather] = useState<LoadState<WeatherSnapshot>>();
-  const [bazar, setBazar] = useState<Bazar>();
+  const [stocks, setStocks] = useState<LoadState<StockMarketSnapshot>>();
 
   useEffect(() => {
     if (!modules.weatherEnabled) return;
@@ -57,17 +58,16 @@ export function GlanceCards() {
   useEffect(() => {
     if (!modules.bazarEnabled) return;
     api
-      .getBazar()
-      .then(setBazar)
+      .getStocks()
+      .then(setStocks)
       .catch(() => {});
   }, [modules.bazarEnabled]);
 
   const weatherSnap = loadedValue(weather);
-  const metalsSnap = loadedValue(bazar?.metals);
-  const headline = metalsSnap && headlineMetal(metalsSnap);
-  const change = headline ? priceChange(headline.price, headline.previousPrice) : 0;
+  const stocksSnap = loadedValue(stocks);
+  const nepse = stocksSnap?.nepse ?? null;
   const freshness = relativeFreshness(
-    weatherSnap?.freshness.fetchedAt ?? metalsSnap?.freshness.fetchedAt,
+    weatherSnap?.freshness.fetchedAt ?? stocksSnap?.freshness.fetchedAt,
     t,
   );
 
@@ -107,33 +107,27 @@ export function GlanceCards() {
           <Pressable className="min-w-0 flex-1">
             <button
               type="button"
-              onClick={() => navigate("/bazar?tab=metals")}
-              className="surface-card glance-card glance-metal relative flex min-h-[72px] w-full flex-col p-2.5 text-left"
+              onClick={() => navigate("/bazar?tab=stocks")}
+              className="surface-card glance-card glance-market relative flex min-h-[72px] w-full flex-col p-2.5 text-left"
             >
               <div className="relative z-[1] flex items-center gap-1 text-text-muted">
-                <Icon name="gold" className="size-3 text-[color:var(--color-accent-mark)]" />
-                <span className="text-[10px]">{t("dashboard.gold")}</span>
+                <Icon name="interest" className="size-3 text-[color:var(--color-accent-mark)]" />
+                <span className="text-[10px]">{t("dashboard.nepse")}</span>
               </div>
               <p className="relative z-[1] mt-0.5 text-[18px] font-semibold leading-none tabular-nums">
-                {headline
-                  ? `${language === "ne" ? "रु" : "Rs"} ${money0.format(headline.price)}`
-                  : "…"}
+                {nepse ? money.format(nepse.value) : "…"}
               </p>
-              <p className="relative z-[1] mt-1 truncate text-[10px] text-text-muted">
-                {headline
-                  ? change === 0
-                    ? t("dashboard.gold-no-change")
-                    : `${change > 0 ? "↑" : "↓"} ${language === "ne" ? "रु" : "Rs"} ${money0.format(Math.abs(change))} ${t("dashboard.today")}`
+              <p
+                className={`relative z-[1] mt-1 truncate text-[10px] tabular-nums ${
+                  nepse && nepse.change !== 0 ? changeTone(nepse.change) : "text-text-muted"
+                }`}
+              >
+                {nepse
+                  ? nepse.change === 0
+                    ? t("dashboard.nepse-no-change")
+                    : `${nepse.change > 0 ? "↑" : "↓"} ${money.format(Math.abs(nepse.change))} · ${Math.abs(nepse.changePercent).toFixed(2)}%`
                   : "—"}
               </p>
-              {metalsSnap?.goldHistory && (
-                <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[1] px-1 pb-0.5">
-                  <Sparkline
-                    values={metalsSnap.goldHistory}
-                    className={change >= 0 ? "text-positive" : "text-holiday"}
-                  />
-                </div>
-              )}
             </button>
           </Pressable>
         )}

apps/desktop/src/features/news/_components/headline-row.tsx

@@ -18,7 +18,16 @@ function age(item: NewsItem): string {
   );
 }
 
-export function HeadlineRow({ item, onOpen }: { item: NewsItem; onOpen: () => void }) {
+export function HeadlineRow({
+  item,
+  showSource = true,
+  onOpen,
+}: {
+  item: NewsItem;
+  /** False when the list is already filtered to one publisher. */
+  showSource?: boolean;
+  onOpen: () => void;
+}) {
   return (
     <button
       type="button"
@@ -27,10 +36,14 @@ export function HeadlineRow({ item, onOpen }: { item: NewsItem; onOpen: () => vo
     >
       <p className="text-[13px] leading-snug">{item.title}</p>
       <div className="mt-1 flex items-center gap-1 text-[10px]">
-        <span className="font-medium text-[color:var(--color-accent-mark)]">{item.sourceName}</span>
+        {showSource && (
+          <span className="font-medium text-[color:var(--color-accent-mark)]">
+            {item.sourceName}
+          </span>
+        )}
         {item.published && (
           <>
-            <span className="text-text-muted">·</span>
+            {showSource && <span className="text-text-muted">·</span>}
             <span className="text-text-secondary">{age(item)}</span>
           </>
         )}

apps/desktop/src/features/news/news.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 import { useHeaderSlot } from "../../shared/components/header-slot";
 import { Icon } from "../../shared/components/icon";
 import { FadeUp, Stagger } from "../../shared/components/motion";
+import { Select } from "../../shared/components/select";
 import { StateBanner } from "../../shared/components/state-banner";
 import { useSettings } from "../../shared/context/settings-context";
 import { openExternalLink } from "../../shared/lib/external-link";
@@ -13,14 +14,23 @@ import {
   loadBanner,
   loadedValue,
 } from "../../shared/lib/load-state";
+import { usePersistedString } from "../../shared/lib/persisted";
 import type { NewsDigest } from "../../types/api/NewsDigest";
+import type { NewsSourceInfo } from "../../types/api/NewsSourceInfo";
 import { HeadlineRow } from "./_components/headline-row";
 
 const PAGE = 20;
 
+/** The picker's "no filter" value. Not a `NewsSource`, so it cannot collide. */
+const ALL = "all";
+
+const SOURCE_KEY = "news.source";
+
 export function News() {
   const { t } = useSettings();
   const [visible, setVisible] = useState(PAGE);
+  const [sources, setSources] = useState<NewsSourceInfo[]>([]);
+  const [saved, setSaved] = usePersistedString(SOURCE_KEY);
   const {
     data: state,
     isValidating,
@@ -36,8 +46,30 @@ export function News() {
     [mutate],
   );
 
+  useEffect(() => {
+    api
+      .newsSources()
+      .then(setSources)
+      .catch(() => setSources([]));
+  }, []);
+
   const loading = isValidating;
 
+  // A source saved before it was renamed or dropped must not leave the list
+  // permanently empty, so an unknown key reads as no filter at all. Until the
+  // catalogue arrives nothing is known yet, and the saved key is trusted —
+  // dropping it for that moment would flash the unfiltered list.
+  const known = sources.length === 0 || sources.some((source) => source.id === saved);
+  const selected = saved && known ? saved : ALL;
+
+  const pick = useCallback(
+    (next: string) => {
+      setSaved(next === ALL ? null : next);
+      setVisible(PAGE);
+    },
+    [setSaved],
+  );
+
   const refreshButton = useMemo(
     () => (
       <button
@@ -56,41 +88,82 @@ export function News() {
   useHeaderSlot(refreshButton);
 
   const digest = loadedValue(state);
-  const items = digest?.items.slice(0, visible) ?? [];
+  const filtered =
+    selected === ALL
+      ? (digest?.items ?? [])
+      : (digest?.items ?? []).filter((item) => item.source === selected);
+  const items = filtered.slice(0, visible);
   const banner = loadBanner(state, fetchedAtLabel(digest?.freshness));
   const freshness = digest ? fetchedAtLabel(digest.freshness) : null;
 
+  // Filtered to one source, the row's own label repeats the picker.
+  const showSource = selected === ALL;
+
+  // Filtered, the only failure worth reporting is the chosen source's own —
+  // otherwise an empty list is explained by papers the reader is not reading.
+  const selectedName = sources.find((source) => source.id === selected)?.name;
+  const failed = (digest?.failedSources ?? []).filter(
+    (name) => selected === ALL || name === selectedName,
+  );
+
+  const emptyMessage = selected === ALL ? t("state.not-yet") : t("news.none-from-source");
+
   return (
     <StateBanner state={banner} onRetry={() => load(true)}>
+      <div className="mb-2">
+        <Select
+          ariaLabel={t("news.source")}
+          value={selected}
+          onChange={pick}
+          options={[{ id: ALL, label: t("news.all-sources") }]}
+          groups={[
+            {
+              label: t("news.group-nepali"),
+              options: sources
+                .filter((source) => !source.english)
+                .map((source) => ({ id: source.id as string, label: source.name })),
+            },
+            {
+              label: t("news.group-english"),
+              options: sources
+                .filter((source) => source.english)
+                .map((source) => ({ id: source.id as string, label: source.name })),
+            },
+          ]}
+        />
+      </div>
+
       {items.length === 0 && !loading ? (
         <div className="flex flex-col items-center justify-center gap-2 py-10 text-center">
           <Icon name="news" className="size-8 text-text-muted" />
-          <p className="text-text-secondary">{t("state.not-yet")}</p>
+          <p className="text-text-secondary">{emptyMessage}</p>
         </div>
       ) : (
         <Stagger className="space-y-1">
           {items.map((item) => (
             <FadeUp key={`${item.source}-${item.link}`}>
-              <HeadlineRow item={item} onOpen={() => openExternalLink(item.link)} />
+              <HeadlineRow
+                item={item}
+                showSource={showSource}
+                onOpen={() => openExternalLink(item.link)}
+              />
             </FadeUp>
           ))}
         </Stagger>
       )}
 
-      {digest && visible < digest.items.length && (
+      {visible < filtered.length && (
         <button
           type="button"
           onClick={() => setVisible((count) => count + PAGE)}
           className="mt-2 w-full py-1.5 text-center text-[11px] text-text-muted hover:text-text-secondary"
         >
-          {digest.items.length - visible} more
+          {filtered.length - visible} more
         </button>
       )}
 
-      {digest && digest.failedSources.length > 0 && (
-        <p className="mt-2 text-[10px] text-text-muted">
-          Could not reach {digest.failedSources.join(", ")}.
-        </p>
+      {failed.length > 0 && (
+        <p className="mt-2 text-[10px] text-text-muted">Could not reach {failed.join(", ")}.</p>
       )}
 
       {freshness && items.length > 0 && (

apps/desktop/src/i18n/en.json

@@ -58,11 +58,10 @@
   "bazar.watchlist": "Watchlist",
   "bazar.wholesale-note": "Wholesale rates at Kalimati. Shop prices are usually higher.",
   "bazar.worth": "Worth",
-  "dashboard.gold": "Fine Gold · per tola",
-  "dashboard.gold-no-change": "No change today",
   "dashboard.high": "H",
   "dashboard.low": "L",
-  "dashboard.today": "today",
+  "dashboard.nepse": "NEPSE index",
+  "dashboard.nepse-no-change": "Unchanged today",
   "dashboard.update-available": "Update available",
   "dashboard.update-installed": "Update installed",
   "dashboard.update-install": "Install",
@@ -237,6 +236,11 @@
   "screen.date-converter": "Date Converter",
   "screen.date-details": "Date Details",
   "screen.exchange-rates": "Exchange Rates",
+  "news.source": "Source",
+  "news.all-sources": "All sources",
+  "news.group-nepali": "Nepali",
+  "news.group-english": "English",
+  "news.none-from-source": "No headlines from this source right now.",
   "screen.news": "News",
   "screen.radio": "Radio",
   "screen.rashifal": "Rashifal",

apps/desktop/src/i18n/ne.json

@@ -58,11 +58,10 @@
   "bazar.watchlist": "वाचलिस्ट",
   "bazar.wholesale-note": "कालीमाटीको थोक मूल्य। पसलको मूल्य प्रायः बढी हुन्छ।",
   "bazar.worth": "मूल्य",
-  "dashboard.gold": "छापावाल सुन · तोला",
-  "dashboard.gold-no-change": "आज परिवर्तन छैन",
   "dashboard.high": "अधिकतम",
   "dashboard.low": "न्यूनतम",
-  "dashboard.today": "आज",
+  "dashboard.nepse": "नेप्से सूचकाङ्क",
+  "dashboard.nepse-no-change": "आज परिवर्तन छैन",
   "dashboard.update-available": "अद्यावधिक उपलब्ध छ",
   "dashboard.update-installed": "अद्यावधिक स्थापना भयो",
   "dashboard.update-install": "स्थापना",
@@ -237,6 +236,11 @@
   "screen.date-converter": "मिति रूपान्तरण",
   "screen.date-details": "मिति विवरण",
   "screen.exchange-rates": "विनिमय दर",
+  "news.source": "स्रोत",
+  "news.all-sources": "सबै स्रोत",
+  "news.group-nepali": "नेपाली",
+  "news.group-english": "अंग्रेजी",
+  "news.none-from-source": "यो स्रोतबाट अहिले कुनै समाचार छैन।",
   "screen.news": "समाचार",
   "screen.radio": "रेडियो",
   "screen.rashifal": "राशिफल",

apps/desktop/src/index.css

@@ -645,7 +645,7 @@ html[data-theme="light"][data-window-material="opaque"] .app-window::before {
   pointer-events: none;
 }
 
-.glance-metal::before {
+.glance-market::before {
   background: linear-gradient(
     145deg,
     color-mix(in srgb, var(--color-accent-mark) 20%, transparent) 0%,