feeds-fun 1.27.1 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [
@@ -36,6 +36,7 @@
     "@tabler/icons-vue": "^3.31.0",
     "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
+    "chart.js": "^4.5.1",
     "dompurify": "^3.1.7",
     "lodash": "^4.17.21",
     "neverthrow": "^8.2.0",
@@ -43,6 +44,7 @@
     "set-interval-async": "^3.0.3",
     "vanilla-cookieconsent": "^3.1.0",
     "vue": "^3.5.12",
+    "vue-chartjs": "^5.3.3",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {

package/src/components/FeedForList.vue

@@ -1,92 +1,231 @@
 <template>
   <div
-    v-if="feed !== null"
-    class="flex text-lg">
-    <div class="ffun-body-list-icon-column">
-      <a
-        href="#"
-        class="text-red-500 hover:text-red-600"
-        title="Unsubscribe"
-        @click.prevent="feedsStore.unsubscribe(feed.id)">
-        <icon icon="x" />
-      </a>
-    </div>
-
-    <body-list-reverse-time-column
-      title="How long ago the feed was last checked for news"
-      :time="feed.loadedAt" />
-
-    <body-list-reverse-time-column
-      title="How long ago the feed was added"
-      :time="feed.linkedAt" />
-
-    <div class="ffun-body-list-icon-column ml-3">
-      <icon
-        v-if="feed.isOk"
-        title="everything is ok"
-        icon="face-smile"
-        class="text-green-700" />
-      <icon
-        v-else
-        :title="feed.lastError || 'unknown error'"
-        icon="face-sad"
-        class="text-red-700" />
-    </div>
-
-    <body-list-favicon-column :url="feed.url" />
-
-    <div class="flex-grow">
-      <external-url
-        class="ffun-normal-link"
-        :url="feed.url"
-        :text="purifiedTitle" />
-
-      <template v-if="feed.collectionIds.length > 0">
-        <span v-for="(collectionId, index) in feed.collectionIds">
-          <template v-if="collectionId in collections.collections">
-            <br />
-            Collections:
-            <span class="text-green-700 font-bold">{{ collections.collections[collectionId].name }}</span
-            ><span v-if="index < feed.collectionIds.length - 1">, </span>
-          </template>
+    ref="feedTop"
+    v-if="feed !== null">
+    <feed-list-columns class="text-lg">
+      <template #action>
+        <a
+          href="#"
+          class="text-red-500 hover:text-red-600"
+          title="Unsubscribe"
+          @click.prevent="feedsStore.unsubscribe(feed.id)">
+          <icon icon="x" />
+        </a>
+      </template>
+
+      <template #checked>
+        <span
+          :class="checkedClass"
+          :title="checkedTitle">
+          {{ checkedText }}
         </span>
       </template>
-    </div>
+
+      <template #added>
+        <span title="Added: how long ago you added this feed">
+          <value-date-time
+            :value="feed.linkedAt"
+            :reversed="true" />
+        </span>
+      </template>
+
+      <template #rate>
+        <span
+          :class="entriesPerDayClass"
+          :title="entriesPerDayTitle">
+          {{ feed.entriesPerDay }}/day
+        </span>
+      </template>
+
+      <template #favicon>
+        <favicon-element
+          :url="feed.url"
+          class="w-5 h-5 mx-1 inline align-text-bottom" />
+      </template>
+
+      <template #main>
+        <div
+          class="flex min-w-0 cursor-pointer items-baseline gap-2"
+          @click="onTitleClick">
+          <span
+            class="flex-shrink-0 min-w-fit line-clamp-1 mb-0"
+            v-html="purifiedTitle" />
+
+          <span
+            v-if="purifiedDescriptionPreview"
+            class="min-w-0 flex-1 line-clamp-1 text-sm text-gray-600">
+            {{ purifiedDescriptionPreview }}
+          </span>
+        </div>
+
+        <div
+          v-if="feed.collectionIds.length > 0"
+          class="mt-1 flex min-w-0 flex-wrap gap-1">
+          <template
+            v-for="collectionId in feed.collectionIds"
+            :key="collectionId">
+            <span
+              v-if="collectionId in collections.collections"
+              :title="`This feed is part of the collection: ${collections.collections[collectionId].name}`"
+              class="cursor-default rounded border border-green-200 bg-green-50 px-1.5 py-0.5 text-sm font-semibold text-green-700">
+              {{ collections.collections[collectionId].name }}
+            </span>
+          </template>
+        </div>
+      </template>
+    </feed-list-columns>
   </div>
 
   <body-list-entry-body
-    v-if="globalSettings.showFeedsDescriptions"
-    class="ml-56"
-    :url="null"
-    :title="null"
-    :loading="false"
-    :references="[]"
-    :text="purifiedDescription" />
+    v-if="showDescription"
+    class="justify-center"
+    :url="bodyTitleUrl"
+    :title="purifiedTitle"
+    :loading="feed.entriesLoadedDetails === null"
+    :references="feedReferences"
+    :text="purifiedDescription">
+    <template
+      v-if="feed.entriesLoadedDetails !== null"
+      #body-prefix>
+      <feed-entries-per-day-chart :entries-loaded-details="feed.entriesLoadedDetails" />
+    </template>
+  </body-list-entry-body>
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref} from "vue";
-  import type * as t from "@/logic/types";
+  import {computed, useTemplateRef} from "vue";
   import * as e from "@/logic/enums";
-  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
   import * as utils from "@/logic/utils";
-  import {computedAsync} from "@vueuse/core";
-  import DOMPurify from "dompurify";
-  import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useFeedsStore} from "@/stores/feeds";
   import {useCollectionsStore} from "@/stores/collections";
+  import FeedListColumns from "@/components/feed_list/Columns.vue";
+  import FeedEntriesPerDayChart from "@/components/feed_list/FeedEntriesPerDayChart.vue";
 
-  const globalSettings = useGlobalSettingsStore();
   const feedsStore = useFeedsStore();
   const collections = useCollectionsStore();
+  const topElement = useTemplateRef("feedTop");
 
   const properties = defineProps<{feed: t.Feed}>();
 
+  const showDescription = computed(() => {
+    return properties.feed.id == feedsStore.displayedFeedId;
+  });
+
   const purifiedTitle = computed(() => {
     return utils.purifyTitle({raw: properties.feed.title, default_: properties.feed.url});
   });
 
+  const purifiedDescriptionPreview = computed(() => {
+    if (properties.feed.description === null) {
+      return "";
+    }
+
+    return utils.purifyTitle({raw: properties.feed.description, default_: ""});
+  });
+
   const purifiedDescription = computed(() => {
     return utils.purifyBody({raw: properties.feed.description, default_: "No description"});
   });
+
+  const bodyTitleUrl = computed(() => {
+    return properties.feed.siteUrl ?? properties.feed.url;
+  });
+
+  const feedReferences = computed(() => {
+    return [
+      new t.Reference({
+        kind: e.ReferenceKind.Page,
+        url: properties.feed.url,
+        title: "feed",
+        mimeType: null,
+        width: null,
+        height: null,
+        duration: null,
+        size: null,
+        extra: null
+      })
+    ];
+  });
+
+  const checkedText = computed(() => {
+    if (properties.feed.loadedAt === null) {
+      return "?";
+    }
+
+    return utils.timeSince(properties.feed.loadedAt);
+  });
+
+  const checkedClass = computed(() => {
+    if (properties.feed.loadedAt === null) {
+      return "text-yellow-700";
+    }
+
+    if (properties.feed.isOk) {
+      return "text-green-700";
+    }
+
+    return "text-red-700";
+  });
+
+  const checkedTitle = computed(() => {
+    if (properties.feed.loadedAt === null) {
+      const title = "Last load: unknown, the feed has no load timestamp.";
+
+      if (properties.feed.isOk) {
+        return `${title} Status: loaded, no recent feed errors.`;
+      }
+
+      return `${title} Status: feed is failing, ${properties.feed.lastError || "unknown error"}.`;
+    }
+
+    if (properties.feed.isOk) {
+      return "Last load: how long ago news was last loaded from the feed. Status: loaded, no recent feed errors.";
+    }
+
+    return `Last load: how long ago news was last loaded from the feed. Status: feed is failing, ${properties.feed.lastError || "unknown error"}.`;
+  });
+
+  const entriesPerDayTitle = computed(() => {
+    const title = "News/day: number of news loaded per day over the current statistics window.";
+
+    if (!properties.feed.young) {
+      return title;
+    }
+
+    return `${title} This feed is young, so statistics may be inaccurate.`;
+  });
+
+  const entriesPerDayClass = computed(() => {
+    return {
+      "text-yellow-700": properties.feed.young
+    };
+  });
+
+  function onTitleClick(event: MouseEvent) {
+    if (!event.ctrlKey) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (showDescription.value) {
+        feedsStore.hideFeed({feedId: properties.feed.id});
+      } else {
+        feedsStore.displayFeed({feedId: properties.feed.id});
+
+        if (topElement.value) {
+          const rect = topElement.value.getBoundingClientRect();
+
+          const isVisible =
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+          if (!isVisible) {
+            topElement.value.scrollIntoView({behavior: "instant"});
+          }
+        }
+      }
+    }
+  }
 </script>

package/src/components/FeedsList.vue

@@ -1,4 +1,26 @@
 <template>
+  <feed-list-columns class="mb-1 border-b pb-1 text-xs text-gray-500">
+    <template #checked>
+      <span title="Last load: how long ago news was last loaded from the feed; color shows current feed status">
+        Last load
+      </span>
+    </template>
+
+    <template #added>
+      <span title="Subscribed: how long ago you added this feed">Subscribed</span>
+    </template>
+
+    <template #rate>
+      <span title="News/day: number of news loaded per day">News/day</span>
+    </template>
+
+    <template #favicon>
+      <span title="Site icon" />
+    </template>
+
+    <template #main>Feed</template>
+  </feed-list-columns>
+
   <ul>
     <li
       v-for="feed in feeds"
@@ -10,8 +32,8 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref, onUnmounted, watch} from "vue";
   import type * as t from "@/logic/types";
+  import FeedListColumns from "@/components/feed_list/Columns.vue";
 
-  const properties = defineProps<{feeds: Array<t.Feed>}>();
+  defineProps<{feeds: Array<t.Feed>}>();
 </script>

package/src/components/body_list/EntryBody.vue

@@ -17,6 +17,8 @@
         v-if="references.length > 0"
         :references="references" />
 
+      <slot name="body-prefix" />
+
       <p
         v-if="loading"
         class="mt-4"

package/src/components/feed_list/Columns.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex">
+    <div class="flex-shrink-0 w-4 mr-2 cursor-default">
+      <slot name="action" />
+    </div>
+
+    <div class="flex-shrink-0 w-20 cursor-default whitespace-nowrap text-right pr-2">
+      <slot name="checked" />
+    </div>
+
+    <div class="flex-shrink-0 w-24 cursor-default whitespace-nowrap text-right pr-2">
+      <slot name="added" />
+    </div>
+
+    <div class="flex-shrink-0 w-24 cursor-default whitespace-nowrap text-right pr-2">
+      <slot name="rate" />
+    </div>
+
+    <div class="flex-shrink-0 w-8 cursor-default text-right pr-1">
+      <slot name="favicon" />
+    </div>
+
+    <div class="flex-grow min-w-0">
+      <slot name="main" />
+    </div>
+  </div>
+</template>

package/src/components/feed_list/FeedEntriesPerDayChart.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="w-full mb-1">
+    <div class="h-24">
+      <Bar
+        :data="chartData"
+        :options="chartOptions" />
+    </div>
+
+    <div class="mt-1 text-xs text-gray-500">{{ label }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import {
+    BarElement,
+    CategoryScale,
+    Chart as ChartJS,
+    LinearScale,
+    Tooltip,
+    type ChartData,
+    type ChartOptions,
+    type TooltipItem
+  } from "chart.js";
+  import {Bar} from "vue-chartjs";
+
+  ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip);
+
+  const properties = defineProps<{
+    entriesLoadedDetails: number[];
+  }>();
+
+  type ChartSlot = {
+    value: number;
+    padded: boolean;
+  };
+
+  const chartDays = 30;
+
+  const chartSlots = computed<ChartSlot[]>(() => {
+    const details = properties.entriesLoadedDetails.slice(-chartDays);
+    const missingDays = chartDays - details.length;
+
+    const paddedSlots = Array.from({length: missingDays}, () => {
+      return {value: 0, padded: true};
+    });
+
+    const loadedSlots = details.map((value) => {
+      return {value, padded: false};
+    });
+
+    return [...paddedSlots, ...loadedSlots];
+  });
+
+  const zeroBarHeight = computed(() => {
+    const maxValue = Math.max(...chartSlots.value.map((slot) => slot.value));
+
+    return Math.max(maxValue * 0.04, 0.15);
+  });
+
+  const barValues = computed(() => {
+    return chartSlots.value.map((slot) => {
+      if (slot.value > 0) {
+        return slot.value;
+      }
+
+      return zeroBarHeight.value;
+    });
+  });
+
+  const barColors = computed(() => {
+    return chartSlots.value.map((slot) => {
+      if (slot.padded) {
+        return "#e5e7eb";
+      }
+
+      if (slot.value === 0) {
+        return "#bfdbfe";
+      }
+
+      return "#93c5fd";
+    });
+  });
+
+  const suggestedMax = computed(() => {
+    return Math.max(1, ...chartSlots.value.map((slot) => slot.value));
+  });
+
+  function dateForEntry(index: number, entriesCount: number): Date {
+    const date = new Date();
+
+    date.setHours(0, 0, 0, 0);
+    date.setDate(date.getDate() - (entriesCount - index - 1));
+
+    return date;
+  }
+
+  function formattedDate(date: Date): string {
+    return [date.getDate(), date.getMonth() + 1, date.getFullYear()]
+      .map((value) => value.toString().padStart(2, "0"))
+      .join("-");
+  }
+
+  function entriesLabel(count: number, date: Date): string {
+    const entriesNoun = count === 1 ? "entry" : "entries";
+
+    return `${count} news ${entriesNoun} loaded on ${formattedDate(date)}`;
+  }
+
+  function tooltipLabel(slot: ChartSlot, date: Date): string {
+    if (slot.padded) {
+      return `No data for ${formattedDate(date)}`;
+    }
+
+    return entriesLabel(slot.value, date);
+  }
+
+  const dates = computed(() => {
+    return chartSlots.value.map((_slot, index) => {
+      return dateForEntry(index, chartSlots.value.length);
+    });
+  });
+
+  const labels = computed(() => {
+    return dates.value.map(() => "");
+  });
+
+  const label = computed(() => {
+    return `Daily news entries loaded over the last ${chartDays} days`;
+  });
+
+  const chartData = computed<ChartData<"bar", number[], string>>(() => {
+    return {
+      labels: labels.value,
+      datasets: [
+        {
+          data: barValues.value,
+          backgroundColor: barColors.value,
+          hoverBackgroundColor: barColors.value,
+          borderRadius: 2,
+          borderSkipped: false,
+          barPercentage: 0.55,
+          categoryPercentage: 0.75
+        }
+      ]
+    };
+  });
+
+  const chartOptions = computed<ChartOptions<"bar">>(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      layout: {
+        padding: {
+          bottom: 0,
+          right: 8
+        }
+      },
+      scales: {
+        x: {
+          offset: true,
+          border: {
+            display: true,
+            color: "#e5e7eb",
+            width: 1
+          },
+          grid: {
+            display: false
+          },
+          ticks: {
+            display: false,
+            color: "#4b5563",
+            font: {
+              size: 9
+            },
+            maxRotation: 0,
+            padding: 0,
+            autoSkip: false
+          }
+        },
+        y: {
+          beginAtZero: true,
+          suggestedMax: suggestedMax.value,
+          border: {
+            display: false
+          },
+          grid: {
+            display: false
+          },
+          ticks: {
+            display: false,
+            precision: 0
+          }
+        }
+      },
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          backgroundColor: "#111827",
+          borderColor: "#374151",
+          borderWidth: 1,
+          displayColors: false,
+          padding: 8,
+          callbacks: {
+            title: () => "",
+            label: (context: TooltipItem<"bar">) => {
+              const slot = chartSlots.value[context.dataIndex];
+
+              return tooltipLabel(slot, dates.value[context.dataIndex]);
+            }
+          }
+        }
+      }
+    };
+  });
+</script>

package/src/logic/api.ts

@@ -331,6 +331,19 @@ export async function getFeeds() {
   return feeds;
 }
 
+export async function getFeedsByIds({ids}: {ids: t.FeedId[]}) {
+  const response = await postPrivate({url: "/get-feeds-by-ids", data: {ids: ids}});
+
+  const feeds = [];
+
+  for (let rawFeed of response.feeds) {
+    const feed = t.feedFromJSON(rawFeed);
+    feeds.push(feed);
+  }
+
+  return feeds;
+}
+
 export async function getLastEntries({period, minTagCount}: {period: number; minTagCount: number}) {
   const response = await postPrivate({
     url: "/get-last-entries",

package/src/logic/enums.ts

@@ -196,6 +196,7 @@ export const ReferenceKindProperties = new Map<ReferenceKind, ReferenceKindPrope
 export enum FeedsOrder {
   Title = "title",
   Url = "url",
+  EntriesPerDay = "entries-per-day",
   Loaded = "loaded",
   Linked = "linked"
 }
@@ -210,6 +211,7 @@ export type FeedsOrderProperty = {
 export const FeedsOrderProperties = new Map<FeedsOrder, FeedsOrderProperty>([
   [FeedsOrder.Title, {text: "title", orderField: "title", orderDirection: "asc", default: true}],
   [FeedsOrder.Url, {text: "url", orderField: "url", orderDirection: "asc"}],
+  [FeedsOrder.EntriesPerDay, {text: "news/day", orderField: "entriesPerDay", orderDirection: "desc"}],
   [FeedsOrder.Loaded, {text: "loaded", orderField: "loadedAt", orderDirection: "desc"}],
   [FeedsOrder.Linked, {text: "added", orderField: "linkedAt", orderDirection: "desc"}]
 ]);

package/src/logic/tests/types.test.ts

@@ -1,7 +1,21 @@
 import {describe, expect, it} from "vitest";
 
 import * as e from "@/logic/enums";
-import {entryFromJSON, type RawEntry} from "@/logic/types";
+import {entryFromJSON, feedFromJSON, type RawEntry, type RawFeed} from "@/logic/types";
+
+function rawFeed(overrides: Partial<RawFeed> = {}): RawFeed {
+  return {
+    id: "dca40ac1-73da-49dc-b7d8-40dac312ae40",
+    title: "Feed",
+    description: "Feed description",
+    url: "https://example.com/feed",
+    state: "loaded",
+    collectionIds: [],
+    young: true,
+    entriesPerDay: 7,
+    ...overrides
+  };
+}
 
 function rawEntry(markers: number[]): RawEntry {
   return {
@@ -17,6 +31,71 @@ function rawEntry(markers: number[]): RawEntry {
   };
 }
 
+describe("feedFromJSON", () => {
+  it("translates loaded feed response", () => {
+    const feed = feedFromJSON(
+      rawFeed({
+        loadedAt: "2026-05-10T12:00:00Z",
+        linkedAt: "2026-05-11T12:00:00Z",
+        siteUrl: "https://example.com",
+        lastError: "network_connection_timeout",
+        collectionIds: ["dca40ac1-73da-49dc-b7d8-40dac312ae41"],
+        young: false,
+        entriesPerDay: 3,
+        entriesLoadedDetails: [1, 0, 3]
+      })
+    );
+
+    expect(feed.id).toBe("dca40ac1-73da-49dc-b7d8-40dac312ae40");
+    expect(feed.url).toBe("https://example.com/feed");
+    expect(feed.siteUrl).toBe("https://example.com");
+    expect(feed.state).toBe("loaded");
+    expect(feed.lastError).toBe("network_connection_timeout");
+    expect(feed.loadedAt).toEqual(new Date("2026-05-10T12:00:00Z"));
+    expect(feed.linkedAt).toEqual(new Date("2026-05-11T12:00:00Z"));
+    expect(feed.isOk).toBe(true);
+    expect(feed.collectionIds).toEqual(["dca40ac1-73da-49dc-b7d8-40dac312ae41"]);
+    expect(feed.young).toBe(false);
+    expect(feed.entriesPerDay).toBe(3);
+    expect(feed.entriesLoadedDetails).toEqual([1, 0, 3]);
+  });
+
+  it("uses null defaults for missing optional response values", () => {
+    const feed = feedFromJSON(rawFeed());
+
+    expect(feed.lastError).toBeNull();
+    expect(feed.loadedAt).toBeNull();
+    expect(feed.linkedAt).toBeNull();
+    expect(feed.siteUrl).toBeNull();
+    expect(feed.entriesLoadedDetails).toBeNull();
+  });
+
+  it("keeps null optional response values as null", () => {
+    const feed = feedFromJSON(
+      rawFeed({
+        lastError: null,
+        loadedAt: null,
+        linkedAt: null,
+        siteUrl: null,
+        entriesLoadedDetails: null
+      })
+    );
+
+    expect(feed.lastError).toBeNull();
+    expect(feed.loadedAt).toBeNull();
+    expect(feed.linkedAt).toBeNull();
+    expect(feed.siteUrl).toBeNull();
+    expect(feed.entriesLoadedDetails).toBeNull();
+  });
+
+  it("marks non-loaded feed as not ok", () => {
+    const feed = feedFromJSON(rawFeed({state: "damaged"}));
+
+    expect(feed.state).toBe("damaged");
+    expect(feed.isOk).toBe(false);
+  });
+});
+
 describe("entryFromJSON", () => {
   it("translates integer markers to frontend enum values", () => {
     const entry = entryFromJSON(rawEntry([1, 2]), {});

package/src/logic/types.ts

@@ -41,46 +41,62 @@ export class Feed {
   readonly title: string | null;
   readonly description: string | null;
   readonly url: URL;
+  readonly siteUrl: URL | null;
   readonly state: string;
   readonly lastError: string | null;
   readonly loadedAt: Date | null;
-  readonly linkedAt: Date;
+  readonly linkedAt: Date | null;
   readonly isOk: boolean;
   readonly collectionIds: CollectionId[];
+  readonly young: boolean;
+  readonly entriesPerDay: number;
+  readonly entriesLoadedDetails: number[] | null;
 
   constructor({
     id,
     title,
     description,
     url,
+    siteUrl,
     state,
     lastError,
     loadedAt,
     linkedAt,
     isOk,
-    collectionIds
+    collectionIds,
+    young,
+    entriesPerDay,
+    entriesLoadedDetails
   }: {
     id: FeedId;
     title: string | null;
     description: string | null;
     url: URL;
+    siteUrl: URL | null;
     state: string;
     lastError: string | null;
     loadedAt: Date | null;
-    linkedAt: Date;
+    linkedAt: Date | null;
     isOk: boolean;
     collectionIds: CollectionId[];
+    young: boolean;
+    entriesPerDay: number;
+    entriesLoadedDetails: number[] | null;
   }) {
     this.id = id;
     this.title = title;
     this.description = description;
     this.url = url;
+    this.siteUrl = siteUrl;
     this.state = state;
     this.lastError = lastError;
     this.loadedAt = loadedAt;
     this.linkedAt = linkedAt;
     this.isOk = isOk;
     this.collectionIds = collectionIds;
+    this.young = young;
+    this.entriesPerDay = entriesPerDay;
+    this.entriesLoadedDetails = entriesLoadedDetails;
   }
 }
 
@@ -89,11 +105,15 @@ export type RawFeed = {
   title: string | null;
   description: string | null;
   url: string;
+  siteUrl?: string | null;
   state: string;
   lastError?: string | null;
   loadedAt?: string | null;
-  linkedAt: string;
+  linkedAt?: string | null;
   collectionIds: string[];
+  young: boolean;
+  entriesPerDay: number;
+  entriesLoadedDetails?: number[] | null;
 };
 
 export function feedFromJSON({
@@ -101,23 +121,31 @@ export function feedFromJSON({
   title,
   description,
   url,
+  siteUrl,
   state,
   lastError,
   loadedAt,
   linkedAt,
-  collectionIds
+  collectionIds,
+  young,
+  entriesPerDay,
+  entriesLoadedDetails
 }: RawFeed): Feed {
   return {
     id: toFeedId(id),
     title: title !== null ? title : null,
     description: description !== null ? description : null,
     url: toURL(url),
+    siteUrl: siteUrl !== undefined && siteUrl !== null ? toURL(siteUrl) : null,
     state: state,
     lastError: lastError !== undefined ? lastError : null,
     loadedAt: loadedAt !== undefined && loadedAt !== null ? new Date(loadedAt) : null,
-    linkedAt: new Date(linkedAt),
+    linkedAt: linkedAt !== undefined && linkedAt !== null ? new Date(linkedAt) : null,
     isOk: state === "loaded",
-    collectionIds: collectionIds.map(toCollectionId)
+    collectionIds: collectionIds.map(toCollectionId),
+    young: young,
+    entriesPerDay: entriesPerDay,
+    entriesLoadedDetails: entriesLoadedDetails !== undefined ? entriesLoadedDetails : null
   };
 }
 
@@ -389,6 +417,7 @@ export function entryInfoFromJSON({title, body, url, publishedAt}: RawEntryInfo)
 
 export type FeedInfo = {
   readonly url: URL;
+  readonly siteUrl: URL | null;
   readonly title: string;
   readonly description: string;
   readonly entries: EntryInfo[];
@@ -397,15 +426,17 @@ export type FeedInfo = {
 
 export type RawFeedInfo = {
   url: string;
+  siteUrl?: string | null;
   title: string;
   description: string;
   entries: RawEntryInfo[];
   isLinked: boolean;
 };
 
-export function feedInfoFromJSON({url, title, description, entries, isLinked}: RawFeedInfo): FeedInfo {
+export function feedInfoFromJSON({url, siteUrl, title, description, entries, isLinked}: RawFeedInfo): FeedInfo {
   return {
     url: toURL(url),
+    siteUrl: siteUrl !== undefined && siteUrl !== null ? toURL(siteUrl) : null,
     title,
     description,
     entries: entries.map(entryInfoFromJSON),

package/src/stores/feeds.ts

@@ -1,9 +1,7 @@
-import {computed, ref, watch, triggerRef} from "vue";
-import {useRouter} from "vue-router";
+import {ref} from "vue";
 import {defineStore} from "pinia";
 
-import type * as t from "@/logic/types";
-import * as e from "@/logic/enums";
+import * as t from "@/logic/types";
 import * as api from "@/logic/api";
 import {Timer} from "@/logic/timer";
 import {computedAsync} from "@vueuse/core";
@@ -12,20 +10,112 @@ import {useGlobalSettingsStore} from "@/stores/globalSettings";
 export const useFeedsStore = defineStore("feedsStore", () => {
   const globalSettings = useGlobalSettingsStore();
 
-  const feeds = computedAsync(async () => {
+  const feeds = ref<{[key: t.FeedId]: t.Feed}>({});
+  const requestedFeeds = ref<{[key: t.FeedId]: boolean}>({});
+  const displayedFeedId = ref<t.FeedId | null>(null);
+
+  function feedWithFullDataFromStorage(feed: t.Feed, preserveFullData: boolean) {
+    // Full feed details power derived UI, like activity charts. On full list
+    // refresh we must drop them so opened feed bodies reload fresh details.
+    if (!preserveFullData) {
+      return feed;
+    }
+
+    if (feed.id in feeds.value) {
+      const existingFeed = feeds.value[feed.id];
+
+      if (feed.entriesLoadedDetails === null && existingFeed.entriesLoadedDetails !== null) {
+        return {
+          ...feed,
+          entriesLoadedDetails: existingFeed.entriesLoadedDetails
+        };
+      }
+    }
+
+    return feed;
+  }
+
+  function registerFeeds({newFeeds, replace}: {newFeeds: t.Feed[]; replace: boolean}) {
+    const delta: {[key: t.FeedId]: t.Feed} = {};
+
+    for (const feed of newFeeds) {
+      delta[feed.id] = feedWithFullDataFromStorage(feed, !replace);
+    }
+
+    if (replace) {
+      feeds.value = delta;
+
+      if (displayedFeedId.value === null) {
+        return;
+      }
+
+      if (!(displayedFeedId.value in feeds.value)) {
+        displayedFeedId.value = null;
+        return;
+      }
+
+      requestFullFeed({feedId: displayedFeedId.value});
+
+      return;
+    }
+
+    feeds.value = {...feeds.value, ...delta};
+  }
+
+  const loadedFeedsReport = computedAsync(async () => {
     // force refresh
     globalSettings.dataVersion;
 
     const feedsList = await api.getFeeds();
 
-    const feedsDict: {[key: t.FeedId]: t.Feed} = {};
+    registerFeeds({
+      newFeeds: feedsList,
+      replace: true
+    });
+
+    return feedsList.map((feed) => feed.id);
+  }, null);
 
-    for (const feed of feedsList) {
-      feedsDict[feed.id] = feed;
+  function requestFullFeed({feedId}: {feedId: t.FeedId}) {
+    if (feedId in feeds.value && feeds.value[feedId].entriesLoadedDetails !== null) {
+      return;
     }
 
-    return feedsDict;
-  }, {});
+    requestedFeeds.value[feedId] = true;
+  }
+
+  function displayFeed({feedId}: {feedId: t.FeedId}) {
+    displayedFeedId.value = feedId;
+
+    requestFullFeed({feedId: feedId});
+  }
+
+  function hideFeed({feedId}: {feedId: t.FeedId}) {
+    if (displayedFeedId.value === feedId) {
+      displayedFeedId.value = null;
+    }
+  }
+
+  async function loadFullFeeds() {
+    const ids: t.FeedId[] = Object.keys(requestedFeeds.value).map((key) => t.toFeedId(key));
+
+    if (ids.length === 0) {
+      return;
+    }
+
+    const loadedFeeds = await api.getFeedsByIds({ids: ids});
+
+    registerFeeds({
+      newFeeds: loadedFeeds,
+      replace: false
+    });
+
+    requestedFeeds.value = {};
+  }
+
+  const requestedFeedsTimer = new Timer(loadFullFeeds, 1000);
+
+  requestedFeedsTimer.start();
 
   async function unsubscribe(feedId: t.FeedId) {
     await api.unsubscribe({feedId: feedId});
@@ -34,9 +124,9 @@ export const useFeedsStore = defineStore("feedsStore", () => {
     // it cause a lot of unnecessary requests to the server without any benefit
     // we just remove feed from frontend
 
-    delete feeds.value[feedId];
-
-    triggerRef(feeds);
+    const updatedFeeds = {...feeds.value};
+    delete updatedFeeds[feedId];
+    feeds.value = updatedFeeds;
   }
 
   async function subscribe(url: t.URL) {
@@ -46,13 +136,19 @@ export const useFeedsStore = defineStore("feedsStore", () => {
 
     // Attention, do not update globalSettings.updateDataVersion here (see above)
 
-    feeds.value[newFeed.id] = newFeed;
-
-    triggerRef(feeds);
+    registerFeeds({
+      newFeeds: [newFeed],
+      replace: false
+    });
   }
 
   return {
     feeds,
+    loadedFeedsReport,
+    displayedFeedId,
+    requestFullFeed,
+    displayFeed,
+    hideFeed,
     unsubscribe,
     subscribe
   };

package/src/stores/globalSettings.ts

@@ -177,7 +177,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // Feeds filter settings
   ////////////////////////
 
-  const showFeedsDescriptions = boolBackendSettings("view_feeds_show_feed_descriptions", true);
   const feedsOrder = enumBackendSettings("view_feeds_feed_order", e.FeedsOrderProperties);
   const failedFeedsFirst = boolBackendSettings("view_feeds_failed_feeds_first", false);
 
@@ -217,7 +216,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     entriesOrderProperties,
     dataVersion,
     updateDataVersion,
-    showFeedsDescriptions,
     userSettingsPresent,
     feedsOrder,
     failedFeedsFirst,

package/src/stores/tests/feeds.test.ts

@@ -0,0 +1,161 @@
+import {createPinia, setActivePinia} from "pinia";
+import {beforeEach, describe, expect, it, vi} from "vitest";
+
+import * as api from "@/logic/api";
+import * as t from "@/logic/types";
+import {useFeedsStore} from "@/stores/feeds";
+
+const timerInstances = vi.hoisted(() => [] as Array<{refresher: () => Promise<void>; delay: number}>);
+
+vi.mock("@/logic/timer", () => ({
+  Timer: vi.fn().mockImplementation((refresher, delay) => {
+    timerInstances.push({refresher, delay});
+
+    return {
+      start: vi.fn(),
+      stop: vi.fn()
+    };
+  })
+}));
+
+vi.mock("@/stores/globalSettings", () => ({
+  useGlobalSettingsStore: vi.fn(() => ({
+    dataVersion: 0
+  }))
+}));
+
+vi.mock("@/logic/api", () => ({
+  addFeed: vi.fn(),
+  getFeeds: vi.fn(),
+  getFeedsByIds: vi.fn(),
+  unsubscribe: vi.fn()
+}));
+
+function feed(overrides: Partial<t.RawFeed> = {}) {
+  return t.feedFromJSON({
+    id: "dca40ac1-73da-49dc-b7d8-40dac312ae40",
+    title: "Feed",
+    description: "Feed description",
+    url: "https://example.com/feed",
+    siteUrl: "https://example.com",
+    state: "loaded",
+    collectionIds: [],
+    young: false,
+    entriesPerDay: 3,
+    ...overrides
+  });
+}
+
+async function settleAsyncWork() {
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe("useFeedsStore", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    timerInstances.length = 0;
+    setActivePinia(createPinia());
+
+    vi.mocked(api.addFeed).mockResolvedValue(feed());
+    vi.mocked(api.getFeeds).mockResolvedValue([]);
+    vi.mocked(api.getFeedsByIds).mockResolvedValue([]);
+    vi.mocked(api.unsubscribe).mockResolvedValue(undefined);
+  });
+
+  it("loads feed list and preserves already loaded details from storage", async () => {
+    const feedId = t.toFeedId("dca40ac1-73da-49dc-b7d8-40dac312ae40");
+
+    vi.mocked(api.addFeed).mockResolvedValue(feed({entriesLoadedDetails: [1, 0, 3]}));
+    vi.mocked(api.getFeeds).mockResolvedValue([feed({entriesLoadedDetails: null})]);
+
+    const store = useFeedsStore();
+
+    await store.subscribe(t.toURL("https://example.com/feed"));
+
+    expect(store.feeds[feedId].entriesLoadedDetails).toEqual([1, 0, 3]);
+
+    store.loadedFeedsReport;
+    await settleAsyncWork();
+
+    expect(store.loadedFeedsReport).toEqual([feedId]);
+    expect(store.feeds[feedId].entriesLoadedDetails).toEqual([1, 0, 3]);
+  });
+
+  it("loads full feed data for displayed feed only once", async () => {
+    const feedId = t.toFeedId("dca40ac1-73da-49dc-b7d8-40dac312ae40");
+    const store = useFeedsStore();
+
+    await store.subscribe(t.toURL("https://example.com/feed"));
+
+    vi.mocked(api.getFeedsByIds).mockResolvedValue([feed({entriesLoadedDetails: [2, 4]})]);
+
+    store.displayFeed({feedId});
+
+    expect(store.displayedFeedId).toBe(feedId);
+
+    await timerInstances[0].refresher();
+
+    expect(api.getFeedsByIds).toHaveBeenCalledWith({ids: [feedId]});
+    expect(store.feeds[feedId].entriesLoadedDetails).toEqual([2, 4]);
+
+    vi.mocked(api.getFeedsByIds).mockClear();
+
+    store.requestFullFeed({feedId});
+
+    await timerInstances[0].refresher();
+
+    expect(api.getFeedsByIds).not.toHaveBeenCalled();
+  });
+
+  it("keeps full feed request queued when API loading fails", async () => {
+    const feedId = t.toFeedId("dca40ac1-73da-49dc-b7d8-40dac312ae40");
+    const store = useFeedsStore();
+
+    await store.subscribe(t.toURL("https://example.com/feed"));
+
+    vi.mocked(api.getFeedsByIds).mockRejectedValueOnce(new Error("load failed"));
+
+    store.requestFullFeed({feedId});
+
+    await expect(timerInstances[0].refresher()).rejects.toThrow("load failed");
+
+    vi.mocked(api.getFeedsByIds).mockResolvedValueOnce([feed({entriesLoadedDetails: [7]})]);
+
+    await timerInstances[0].refresher();
+
+    expect(api.getFeedsByIds).toHaveBeenLastCalledWith({ids: [feedId]});
+    expect(store.feeds[feedId].entriesLoadedDetails).toEqual([7]);
+  });
+
+  it("hides only the currently displayed feed", () => {
+    const feedId = t.toFeedId("dca40ac1-73da-49dc-b7d8-40dac312ae40");
+    const anotherFeedId = t.toFeedId("dca40ac1-73da-49dc-b7d8-40dac312ae41");
+    const store = useFeedsStore();
+
+    store.displayFeed({feedId});
+
+    store.hideFeed({feedId: anotherFeedId});
+
+    expect(store.displayedFeedId).toBe(feedId);
+
+    store.hideFeed({feedId});
+
+    expect(store.displayedFeedId).toBeNull();
+  });
+
+  it("removes unsubscribed feeds from storage", async () => {
+    const feedId = t.toFeedId("dca40ac1-73da-49dc-b7d8-40dac312ae40");
+    const store = useFeedsStore();
+
+    await store.subscribe(t.toURL("https://example.com/feed"));
+
+    expect(store.feeds[feedId]).toBeDefined();
+
+    await store.unsubscribe(feedId);
+
+    expect(api.unsubscribe).toHaveBeenCalledWith({feedId});
+    expect(store.feeds[feedId]).toBeUndefined();
+  });
+});

package/src/views/FeedsView.vue

@@ -1,22 +1,13 @@
 <template>
   <side-panel-layout>
     <template #side-menu-item-1>
-      Show descriptions
-      <config-flag
-        style="min-width: 2.5rem"
-        v-model:flag="globalSettings.showFeedsDescriptions"
-        on-text="yes"
-        off-text="no" />
-    </template>
-
-    <template #side-menu-item-2>
       Sorted by
       <config-selector
         :values="e.FeedsOrderProperties"
         v-model:property="globalSettings.feedsOrder" />
     </template>
 
-    <template #side-menu-item-3>
+    <template #side-menu-item-2>
       Show failed
       <config-flag
         v-model:flag="globalSettings.failedFeedsFirst"
@@ -25,7 +16,7 @@
         off-text="last" />
     </template>
 
-    <template #side-menu-item-4>
+    <template #side-menu-item-3>
       <a
         class="ffun-form-button p-1 my-1 block w-full text-center"
         :href="api.downloadOPMLUrl"