feeds-fun 1.17.1 → 1.18.1

package/src/main.ts

@@ -38,6 +38,7 @@ import PageHeaderExternalLinks from "./components/page_header/ExternalLinks.vue"
 import NotificationsApiKey from "./components/notifications/ApiKey.vue";
 import NotificationsCreateRuleHelp from "./components/notifications/CreateRuleHelp.vue";
 import Notifications from "./components/notifications/Block.vue";
+import NotificationsLoadedOldNews from "./components/notifications/LoadedOldNews.vue";
 
 import CollectionsNotification from "./components/collections/Notification.vue";
 import CollectionsWarning from "./components/collections/Warning.vue";
@@ -46,6 +47,8 @@ import CollectionsBlockItem from "./components/collections/BlockItem.vue";
 import CollectionsDetailedItem from "./components/collections/DetailedItem.vue";
 import CollectionsSubscribingProgress from "./components/collections/SubscribingProgress.vue";
 import CollectionsFeedItem from "./components/collections/FeedItem.vue";
+import CollectionsPublicSelector from "./components/collections/PublicSelector.vue";
+import CollectionsPublicIntro from "./components/collections/PublicIntro.vue";
 
 import ScoreSelector from "./inputs/ScoreSelector.vue";
 
@@ -64,6 +67,8 @@ import MainNewsTitle from "./components/main/NewsTitle.vue";
 import MainHeaderLine from "./components/main/HeaderLine.vue";
 import MainBlock from "./components/main/Block.vue";
 
+import SidePanelCollapseButton from "./components/side_pannel/CollapseButton.vue";
+
 import WideLayout from "./layouts/WideLayout.vue";
 import SidePanelLayout from "./layouts/SidePanelLayout.vue";
 
@@ -105,6 +110,7 @@ app.component("PageHeaderExternalLinks", PageHeaderExternalLinks);
 app.component("NotificationsApiKey", NotificationsApiKey);
 app.component("NotificationsCreateRuleHelp", NotificationsCreateRuleHelp);
 app.component("Notifications", Notifications);
+app.component("NotificationsLoadedOldNews", NotificationsLoadedOldNews);
 
 app.component("CollectionsNotification", CollectionsNotification);
 app.component("CollectionsWarning", CollectionsWarning);
@@ -113,6 +119,8 @@ app.component("CollectionsBlockItem", CollectionsBlockItem);
 app.component("CollectionsDetailedItem", CollectionsDetailedItem);
 app.component("CollectionsSubscribingProgress", CollectionsSubscribingProgress);
 app.component("CollectionsFeedItem", CollectionsFeedItem);
+app.component("CollectionsPublicSelector", CollectionsPublicSelector);
+app.component("CollectionsPublicIntro", CollectionsPublicIntro);
 
 app.component("ScoreSelector", ScoreSelector);
 
@@ -131,6 +139,8 @@ app.component("MainNewsTitle", MainNewsTitle);
 app.component("MainHeaderLine", MainHeaderLine);
 app.component("MainBlock", MainBlock);
 
+app.component("SidePanelCollapseButton", SidePanelCollapseButton);
+
 app.component("WideLayout", WideLayout);
 app.component("SidePanelLayout", SidePanelLayout);
 

package/src/router/index.ts

@@ -7,6 +7,7 @@ import RulesView from "../views/RulesView.vue";
 import DiscoveryView from "../views/DiscoveryView.vue";
 import CollectionsView from "../views/CollectionsView.vue";
 import SettingsView from "../views/SettingsView.vue";
+import PublicCollectionView from "../views/PublicCollectionView.vue";
 import * as e from "@/logic/enums";
 
 // lazy view loading does not work with router.push function
@@ -31,12 +32,12 @@ const router = createRouter({
       component: FeedsView
     },
     {
-      path: "/news",
+      path: "/news/:tags*",
       name: e.MainPanelMode.Entries,
       component: NewsView
     },
     {
-      path: "/rules",
+      path: "/rules/:tags*",
       name: e.MainPanelMode.Rules,
       component: RulesView
     },
@@ -54,8 +55,20 @@ const router = createRouter({
       path: "/settings",
       name: e.MainPanelMode.Settings,
       component: SettingsView
+    },
+    {
+      path: "/show/:collectionSlug/:tags*",
+      name: "public-collection",
+      component: PublicCollectionView
+    },
+    {
+      path: "/:pathMatch(.*)*",
+      redirect: "/"
     }
-  ]
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    return {top: 0};
+  }
 });
 
 export default router;

package/src/stores/collections.ts

@@ -33,6 +33,10 @@ export const useCollectionsStore = defineStore("collectionsStore", () => {
     return order;
   });
 
+  const collectionsOrdered = computed(() => {
+    return collectionsOrder.value.map((id) => collections.value[id]);
+  });
+
   async function getFeeds({collectionId}: {collectionId: t.CollectionId}) {
     if (collectionId in feeds.value) {
       return feeds.value[collectionId];
@@ -45,9 +49,21 @@ export const useCollectionsStore = defineStore("collectionsStore", () => {
     return feeds.value[collectionId];
   }
 
+  function getCollectionBySlug({slug}: {slug: t.CollectionSlug}) {
+    for (const collection of Object.values(collections.value)) {
+      if (collection.slug === slug) {
+        return collection;
+      }
+    }
+
+    return null;
+  }
+
   return {
     collections,
     collectionsOrder,
-    getFeeds
+    collectionsOrdered,
+    getFeeds,
+    getCollectionBySlug
   };
 });

package/src/stores/entries.ts

@@ -5,13 +5,21 @@ import _ from "lodash";
 import * as t from "@/logic/types";
 import * as e from "@/logic/enums";
 import * as api from "@/logic/api";
+import * as utils from "@/logic/utils";
 import {Timer} from "@/logic/timer";
 import {computedAsync} from "@vueuse/core";
 import {useGlobalSettingsStore} from "@/stores/globalSettings";
 import * as events from "@/logic/events";
+import {useGlobalState} from "@/stores/globalState";
+
+enum Mode {
+  News = "news",
+  PublicCollection = "public-collection"
+}
 
 export const useEntriesStore = defineStore("entriesStore", () => {
   const globalSettings = useGlobalSettingsStore();
+  const globalState = useGlobalState();
 
   const entries = ref<{[key: t.EntryId]: t.Entry}>({});
   const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
@@ -20,17 +28,74 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
   const canUndoMarkRead = computed(() => readHistory.value.length > 0);
 
-  function registerEntry(entry: t.Entry) {
-    if (entry.id in entries.value) {
-      if (entry.body === null && entries.value[entry.id].body !== null) {
-        entry.body = entries.value[entry.id].body;
+  const mode = ref<Mode | null>(null);
+  const modePublicCollectionSlug = ref<t.CollectionSlug | null>(null);
+
+  function setNewsMode() {
+    if (mode.value == Mode.News) {
+      return;
+    }
+
+    mode.value = Mode.News;
+
+    globalSettings.updateDataVersion();
+  }
+
+  function setPublicCollectionMode(collectionSlug: t.CollectionSlug) {
+    if (mode.value == Mode.PublicCollection && modePublicCollectionSlug.value === collectionSlug) {
+      return;
+    }
+
+    mode.value = Mode.PublicCollection;
+    modePublicCollectionSlug.value = collectionSlug;
+
+    globalSettings.updateDataVersion();
+  }
+
+  // Public collections uses fixed sorting order
+  // News uses dynamic sorting order and should keep it between switching views
+  // So, if we set globalSettings.entriesOrderProperties in PublicCollection view
+  // we'll break News view sorting and confuse users
+  // => we hardcode specific order properties for PublicCollection mode
+  const activeOrderProperties = computed(() => {
+    if (mode.value === null) {
+      // Return most general order for the case when mode is not set yet
+      return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
+    }
+
+    if (mode.value == Mode.News) {
+      // use saved order mode for News view
+      return globalSettings.entriesOrderProperties as unknown as e.EntriesOrderProperty;
+    }
+
+    if (mode.value == Mode.PublicCollection) {
+      // use fixed Published order for Public Collection view
+      return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
+    }
+
+    console.error(`Unknown mode ${mode.value}`);
+
+    return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
+  });
+
+  // We bulk update entries to avoid performance degradation
+  // on triggering multiple reactivity updates for each entry
+  function registerEntries(newEntries: t.Entry[]) {
+    let delta: {[key: t.EntryId]: t.Entry} = {};
+
+    for (const entry of newEntries) {
+      if (entry.id in entries.value) {
+        if (entry.body === null && entries.value[entry.id].body !== null) {
+          entry.body = entries.value[entry.id].body;
+        }
       }
+      delta[entry.id] = entry;
     }
 
-    entries.value[entry.id] = entry;
+    entries.value = {...entries.value, ...delta};
   }
 
-  const loadedEntriesReport = computedAsync(async () => {
+  async function loadEntriesAccordingToMode() {
     const periodProperties = e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod);
 
     if (periodProperties === undefined) {
@@ -39,23 +104,74 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
     const period = periodProperties.seconds;
 
+    if (mode.value === Mode.News) {
+      return await api.getLastEntries({
+        period: period
+      });
+    }
+
+    if (mode.value === Mode.PublicCollection) {
+      return await api.getLastCollectionEntries({
+        period: period,
+        collectionSlug: modePublicCollectionSlug.value
+      });
+    }
+
+    throw new Error(`Unknown mode ${mode.value}`);
+  }
+
+  const loadedEntriesReport = computedAsync(async () => {
     // force refresh
     globalSettings.dataVersion;
 
-    const loadedEntries = await api.getLastEntries({
-      period: period
-    });
+    if (mode.value === null) {
+      // Do nothing until the mode is set
+      return null;
+    }
+
+    const loadedEntries = await loadEntriesAccordingToMode();
 
     const report = [];
 
+    registerEntries(loadedEntries);
+
     for (const entry of loadedEntries) {
-      registerEntry(entry);
       report.push(entry.id);
     }
 
     return report;
   }, null);
 
+  const _sortedEntries = computed(() => {
+    if (loadedEntriesReport.value === null) {
+      return [];
+    }
+
+    const field = activeOrderProperties.value.orderField;
+    const direction = activeOrderProperties.value.direction;
+
+    const report = utils.sortIdsList({ids: loadedEntriesReport.value, storage: entries.value, field, direction});
+
+    return report;
+  });
+
+  const visibleEntries = computed(() => {
+    let report = _sortedEntries.value.slice();
+
+    if (!globalSettings.showRead) {
+      report = report.filter((entryId) => {
+        if (displayedEntryId.value == entryId) {
+          // always show read entries with open body
+          // otherwise, they will hide right after opening it
+          return true;
+        }
+        return !entries.value[entryId].hasMarker(e.Marker.Read);
+      });
+    }
+
+    return report;
+  });
+
   function requestFullEntry({entryId}: {entryId: t.EntryId}) {
     if (entryId in entries.value && entries.value[entryId].body !== null) {
       return;
@@ -71,11 +187,9 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       return;
     }
 
-    const entries = await api.getEntriesByIds({ids: ids});
+    const loadedEntries = await api.getEntriesByIds({ids: ids});
 
-    for (const entry of entries) {
-      registerEntry(entry);
-    }
+    registerEntries(loadedEntries);
 
     requestedEntries.value = {};
   }
@@ -96,7 +210,11 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       entries.value[entryId].setMarker(marker);
     }
 
-    await api.setMarker({entryId: entryId, marker: marker});
+    // This method may be called from public access pages, like public collections
+    // In such case user may be not logged in and we should not send API requests
+    if (globalState.isLoggedIn) {
+      await api.setMarker({entryId: entryId, marker: marker});
+    }
   }
 
   async function removeMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
@@ -111,10 +229,14 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       entries.value[entryId].removeMarker(marker);
     }
 
-    await api.removeMarker({entryId: entryId, marker: marker});
+    // This method may be called from public access pages, like public collections
+    // In such case user may be not logged in and we should not send API requests
+    if (globalState.isLoggedIn) {
+      await api.removeMarker({entryId: entryId, marker: marker});
+    }
   }
 
-  async function displayEntry({entryId}: {entryId: t.EntryId}) {
+  async function displayEntry({entryId, view}: {entryId: t.EntryId; view: events.EventsViewName}) {
     displayedEntryId.value = entryId;
 
     requestFullEntry({entryId: entryId});
@@ -126,7 +248,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       });
     }
 
-    await events.newsBodyOpened({entryId: entryId});
+    await events.newsBodyOpened({entryId: entryId, view: view});
   }
 
   function hideEntry({entryId}: {entryId: t.EntryId}) {
@@ -145,6 +267,14 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     removeMarker({entryId: entryId, marker: e.Marker.Read});
   }
 
+  // TODO: Refactor for better loading tracking in the front code and in the GUI.
+  //       Currently, this property is working only for the first load.
+  //       => It should always be refactored to work correctly.
+  // ATTENTION: check every usage of this property while refactoring
+  const loading = computed(() => {
+    return loadedEntriesReport.value === null;
+  });
+
   return {
     entries,
     requestFullEntry,
@@ -155,6 +285,11 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     displayEntry,
     hideEntry,
     undoMarkRead,
-    canUndoMarkRead
+    canUndoMarkRead,
+    setNewsMode,
+    setPublicCollectionMode,
+    loading,
+    visibleEntries,
+    activeOrderProperties
   };
 });

package/src/stores/globalSettings.ts

@@ -1,5 +1,4 @@
-import {ref, watch} from "vue";
-import {useRouter} from "vue-router";
+import {ref, computed} from "vue";
 import {defineStore} from "pinia";
 import {computedAsync} from "@vueuse/core";
 import {useGlobalState} from "@/stores/globalState";
@@ -8,18 +7,23 @@ import * as e from "@/logic/enums";
 import * as api from "@/logic/api";
 
 export const useGlobalSettingsStore = defineStore("globalSettings", () => {
-  const router = useRouter();
   const globalState = useGlobalState();
 
   // General
   const mainPanelMode = ref(e.MainPanelMode.Entries);
   const dataVersion = ref(0);
+  const showSidebar = ref(true);
+  const showSidebarPoint = ref(false);
 
   // Entries
   const lastEntriesPeriod = ref(e.LastEntriesPeriod.Day3);
   const entriesOrder = ref(e.EntriesOrder.Score);
   const showRead = ref(true);
 
+  const entriesOrderProperties = computed(() => {
+    return e.EntriesOrderProperties.get(entriesOrder.value);
+  });
+
   // Feeds
   const showFeedsDescriptions = ref(true);
   const feedsOrder = ref(e.FeedsOrder.Title);
@@ -28,10 +32,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // Rules
   const rulesOrder = ref(e.RulesOrder.Tags);
 
-  watch(mainPanelMode, (newValue, oldValue) => {
-    router.push({name: mainPanelMode.value, params: {}});
-  });
-
   function updateDataVersion() {
     dataVersion.value++;
   }
@@ -64,6 +64,7 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     lastEntriesPeriod,
     entriesOrder,
     showRead,
+    entriesOrderProperties,
     dataVersion,
     updateDataVersion,
     showFeedsDescriptions,
@@ -71,6 +72,8 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     info,
     feedsOrder,
     failedFeedsFirst,
-    rulesOrder
+    rulesOrder,
+    showSidebar,
+    showSidebarPoint
   };
 });

package/src/views/AuthView.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch, provide, onBeforeMount} from "vue";
   import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useSupertokens} from "@/stores/supertokens";
   import {useGlobalState} from "@/stores/globalState";
   import {computedAsync} from "@vueuse/core";
-  import {computed, ref, onBeforeMount} from "vue";
   import * as settings from "@/logic/settings";
 
   const globalSettings = useGlobalSettingsStore();
@@ -26,6 +26,8 @@
 
   const router = useRouter();
 
+  provide("eventsViewName", "auth");
+
   const linkProcessed = ref(false);
 
   function goToWorkspace() {

package/src/views/CollectionsView.vue

@@ -2,11 +2,20 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Collections </template>
 
-    <div class="ffun-info-common">
+    <div
+      v-if="collections.collectionsOrder.length > 0"
+      class="ffun-info-common">
       <p>We've prepared thematic collections just for you.</p>
       <p>News from collections are always tagged, ensuring you get the full power of Feeds Fun!</p>
     </div>
 
+    <div
+      v-else
+      class="ffun-info-common">
+      <p>There are no collections.</p>
+      <p>Ask the server administrator to create some.</p>
+    </div>
+
     <div
       v-for="collectionId in collections.collectionsOrder"
       :key="collectionId"
@@ -17,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import * as api from "@/logic/api";
   import * as t from "@/logic/types";
@@ -29,6 +38,8 @@
 
   const collections = useCollectionsStore();
 
+  provide("eventsViewName", "collections");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Collections;
 </script>
 

package/src/views/DiscoveryView.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import * as api from "@/logic/api";
@@ -42,6 +42,8 @@
 
   const globalSettings = useGlobalSettingsStore();
 
+  provide("eventsViewName", "discovery");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Discovery;
 </script>
 

package/src/views/FeedsView.vue

@@ -57,7 +57,7 @@
 
 <script lang="ts" setup>
   import _ from "lodash";
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useFeedsStore} from "@/stores/feeds";
@@ -69,6 +69,8 @@
 
   const feedsStore = useFeedsStore();
 
+  provide("eventsViewName", "feeds");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Feeds;
 
   const sortedFeeds = computed(() => {

package/src/views/MainView.vue

@@ -179,7 +179,14 @@
             </template>
 
             <template #description>
-              {{ collections.collections[collectionId].description }}
+              <div>{{ collections.collections[collectionId].description }}</div>
+              <div class="mt-2">
+                <a
+                  :href="publicCollectionHref(collections.collections[collectionId].slug)"
+                  class="ffun-normal-link pt-4">
+                  Read the news
+                </a>
+              </div>
             </template>
           </main-item>
         </template>
@@ -197,8 +204,18 @@
 </template>
 
 <script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
   import * as settings from "@/logic/settings";
+  import {useRouter, RouterLink, RouterView} from "vue-router";
   import {useCollectionsStore} from "@/stores/collections";
+  import * as t from "@/logic/types";
 
+  const router = useRouter();
   const collections = useCollectionsStore();
+
+  provide("eventsViewName", "main");
+
+  function publicCollectionHref(collectionSlug: t.CollectionSlug) {
+    return router.resolve({name: "public-collection", params: {collectionSlug: collectionSlug}}).href;
+  }
 </script>