feeds-fun 1.17.1 → 1.18.1

package/src/views/NewsView.vue

@@ -9,6 +9,9 @@
 
     <template #side-menu-item-2>
       Sort by
+      <!-- Remember that we should use entriesStore.activeOrderProperties everywhere in the News view-->
+      <!-- Here, It should be in sync with this selector (and globalSettings.entriesOrder) on the NewsView, -->
+      <!-- so, it should work fine -->
       <config-selector
         :values="e.EntriesOrderProperties"
         v-model:property="globalSettings.entriesOrder" />
@@ -35,8 +38,7 @@
     <template #side-footer>
       <tags-filter
         :tags="tagsCount"
-        :show-create-rule="true"
-        change-source="news_tags_filter" />
+        :show-create-rule="true" />
     </template>
 
     <template #main-header>
@@ -53,10 +55,16 @@
       :collections-notification_="!hasEntries"
       :collections-warning_="false" />
 
+    <notifications-loaded-old-news
+      :entries="entriesStore.loadedEntriesReport || []"
+      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod)" />
+
     <entries-list
+      :loading="entriesStore.loading"
       :entriesIds="entriesReport"
-      :time-field="timeField"
+      :time-field="entriesStore.activeOrderProperties.timeField"
       :tags-count="tagsCount"
+      :show-score="true"
       :showFromStart="25"
       :showPerPage="25" />
   </side-panel-layout>
@@ -64,10 +72,12 @@
 
 <script lang="ts" setup>
   import {computed, ref, onUnmounted, watch, provide} from "vue";
+  import {useRoute, useRouter} from "vue-router";
   import {computedAsync} from "@vueuse/core";
   import * as api from "@/logic/api";
   import * as tagsFilterState from "@/logic/tagsFilterState";
   import * as e from "@/logic/enums";
+  import * as utils from "@/logic/utils";
   import type * as t from "@/logic/types";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useEntriesStore} from "@/stores/entries";
@@ -76,107 +86,42 @@
   const globalSettings = useGlobalSettingsStore();
   const entriesStore = useEntriesStore();
 
-  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
-
-  provide("tagsStates", tagsStates);
-
-  globalSettings.mainPanelMode = e.MainPanelMode.Entries;
-
-  globalSettings.updateDataVersion();
-
-  const entriesWithOpenedBody = ref<{[key: t.EntryId]: boolean}>({});
-
-  const _sortedEntries = computed(() => {
-    if (entriesStore.loadedEntriesReport === null) {
-      return [];
-    }
-
-    const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
-
-    if (orderProperties === undefined) {
-      throw new Error(`Unknown order ${globalSettings.entriesOrder}`);
-    }
-
-    const field = orderProperties.orderField;
-    const direction = orderProperties.direction;
-
-    // let report = entriesStore.loadedEntriesReport.slice();
-
-    // Pre-map to avoid repeated lookups in the comparator
-    const mapped = entriesStore.loadedEntriesReport.map((entryId) => {
-      // @ts-ignore
-      return {entryId, value: entriesStore.entries[entryId][field]};
-    });
+  const route = useRoute();
+  const router = useRouter();
 
-    mapped.sort((a: {entryId: t.EntryId; value: any}, b: {entryId: t.EntryId; value: any}) => {
-      if (a.value === null && b.value === null) {
-        return 0;
-      }
-
-      if (a.value === null) {
-        return 1;
-      }
+  entriesStore.setNewsMode();
 
-      if (b.value === null) {
-        return -1;
-      }
-
-      if (a.value < b.value) {
-        return direction;
-      }
-
-      if (a.value > b.value) {
-        return -direction;
-      }
+  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
 
-      return 0;
-    });
+  provide("tagsStates", tagsStates);
+  provide("eventsViewName", "news");
 
-    const report = mapped.map((x) => x.entryId);
+  tagsFilterState.setSyncingTagsWithRoute({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    route,
+    router
+  });
 
-    return report;
+  tagsFilterState.setSyncingTagsSidebarPoint({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    globalSettings
   });
 
-  const _visibleEntries = computed(() => {
-    let report = _sortedEntries.value.slice();
-
-    if (!globalSettings.showRead) {
-      report = report.filter((entryId) => {
-        if (entriesStore.displayedEntryId == entryId) {
-          // always show read entries with open body
-          // otherwise, they will hide right after opening it
-          return true;
-        }
-        return !entriesStore.entries[entryId].hasMarker(e.Marker.Read);
-      });
-    }
+  globalSettings.mainPanelMode = e.MainPanelMode.Entries;
 
-    return report;
-  });
+  globalSettings.updateDataVersion();
 
   const entriesReport = computed(() => {
-    let report = _visibleEntries.value.slice();
+    let report = entriesStore.visibleEntries.slice();
 
     report = tagsStates.value.filterByTags(report, (entryId) => entriesStore.entries[entryId].tags);
     return report;
   });
 
   const tagsCount = computed(() => {
-    const tagsCount: {[key: string]: number} = {};
-
-    for (const entryId of entriesReport.value) {
-      const entry = entriesStore.entries[entryId];
+    const entriesToProcess = entriesReport.value.map((entryId) => entriesStore.entries[entryId]);
 
-      for (const tag of entry.tags) {
-        if (tag in tagsCount) {
-          tagsCount[tag] += 1;
-        } else {
-          tagsCount[tag] = 1;
-        }
-      }
-    }
-
-    return tagsCount;
+    return utils.countTags(entriesToProcess);
   });
 
   const entriesNumber = computed(() => {
@@ -188,6 +133,10 @@
   });
 
   const hasRules = computed(() => {
+    if (entriesStore.loading) {
+      return false;
+    }
+
     if (entriesStore.loadedEntriesReport === null) {
       return false;
     }
@@ -201,16 +150,6 @@
     }
     return false;
   });
-
-  const timeField = computed(() => {
-    const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
-
-    if (orderProperties === undefined) {
-      throw new Error(`Unknown entries order: ${globalSettings.entriesOrder}`);
-    }
-
-    return orderProperties.timeField;
-  });
 </script>
 
 <style></style>

package/src/views/PublicCollectionView.vue

@@ -0,0 +1,237 @@
+<template>
+  <side-panel-layout
+    :reloadButton="false"
+    :login-required="false"
+    :home-button="true">
+    <template #side-menu-item-1>
+      <collections-public-selector
+        class="min-w-full"
+        v-if="collection"
+        :collection-id="collection.id" />
+
+      <p
+        v-if="collection"
+        class="ffun-info-common my-2"
+        >{{ collection.description }}</p
+      >
+    </template>
+    <template #side-menu-item-2>
+      For
+      <config-selector
+        :values="e.LastEntriesPeriodProperties"
+        v-model:property="globalSettings.lastEntriesPeriod" />
+    </template>
+
+    <template #side-menu-item-3>
+      Show read
+
+      <config-flag
+        style="min-width: 2.5rem"
+        v-model:flag="globalSettings.showRead"
+        on-text="no"
+        off-text="yes" />
+
+      <button
+        class="ffun-form-button py-0 ml-1"
+        title='Undo last "mark read" operation'
+        :disabled="!entriesStore.canUndoMarkRead"
+        @click="entriesStore.undoMarkRead()">
+        ↶
+      </button>
+    </template>
+
+    <template #side-footer>
+      <tags-filter
+        :tags="tagsCount"
+        :show-create-rule="false"
+        :show-registration-invitation="true" />
+    </template>
+
+    <template #main-header>
+      News
+      <span v-if="entriesNumber > 0">[{{ entriesNumber }}]</span>
+    </template>
+
+    <template #main-footer> </template>
+
+    <!-- currently we have a "nuance" with tags user experience in this block -->
+    <!-- The tags work as expected till the user selects their own tags from other places -->
+    <!-- after that we can get a situation, when, after clicking on a tag in the block, there will be no news displayed -->
+    <!-- because the user previously selected tags that have no common news with the tags in the block -->
+    <!-- That effect is possible only if the user has already interacted with the ags filter => should not be a problem -->
+    <collections-public-intro
+      v-if="collection && !globalState.isLoggedIn"
+      :collectionId="collection.id"
+      :tag1Uid="medianTag1"
+      :tag1Count="tagsCount[medianTag1] || 0"
+      :tag2Uid="medianTag2"
+      :tag2Count="tagsCount[medianTag2] || 0" />
+
+    <div
+      v-if="collection && globalState.isLoggedIn"
+      class="ffun-info-good">
+      <p
+        >Welcome to curated <strong>{{ collection.name }}</strong> news collection!</p
+      >
+
+      <p>Collection news is always shown in the order of publication.</p>
+    </div>
+
+    <notifications-loaded-old-news
+      :entries="entriesStore.loadedEntriesReport || []"
+      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod)" />
+
+    <entries-list
+      :loading="entriesStore.loading"
+      :entriesIds="entriesReport"
+      :time-field="entriesStore.activeOrderProperties.timeField"
+      :tags-count="tagsCount"
+      :show-score="false"
+      :showFromStart="25"
+      :showPerPage="25" />
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
+  import type {ComputedRef} from "vue";
+  import {useRoute, useRouter} from "vue-router";
+  import {computedAsync} from "@vueuse/core";
+  import * as api from "@/logic/api";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as e from "@/logic/enums";
+  import * as utils from "@/logic/utils";
+  import type * as t from "@/logic/types";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useCollectionsStore} from "@/stores/collections";
+  import {useGlobalState} from "@/stores/globalState";
+  import _ from "lodash";
+  import * as asserts from "@/logic/asserts";
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const globalState = useGlobalState();
+  const globalSettings = useGlobalSettingsStore();
+  const entriesStore = useEntriesStore();
+  const collections = useCollectionsStore();
+
+  const collectionSlug = computed(() => route.params.collectionSlug as t.CollectionSlug);
+
+  const collection = computed(() => {
+    if (!collectionSlug.value) {
+      return null;
+    }
+
+    const result = collections.getCollectionBySlug({slug: collectionSlug.value});
+
+    if (Object.keys(collections.collections).length > 0 && !result) {
+      // TODO: implement better behaviour for broken slugs
+      router.push({name: "main"});
+    }
+
+    return result;
+  });
+
+  const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
+
+  globalSettings.mainPanelMode = e.MainPanelMode.PublicCollection;
+
+  // Required to separate real collection change (and reset tags filter) from the collection initialization
+  const lastDefinedCollectionId = ref<t.CollectionId | null>(null);
+
+  watch(
+    collection,
+    () => {
+      if (!collection.value) {
+        return;
+      }
+
+      entriesStore.setPublicCollectionMode(collection.value.slug);
+
+      if (lastDefinedCollectionId.value !== null && lastDefinedCollectionId.value !== collection.value.id) {
+        tagsStates.value.clear();
+      }
+
+      if (lastDefinedCollectionId.value !== collection.value.id) {
+        lastDefinedCollectionId.value = collection.value.id;
+      }
+    },
+    {immediate: true}
+  );
+
+  provide("tagsStates", tagsStates);
+  provide("eventsViewName", "public_collections");
+
+  tagsFilterState.setSyncingTagsWithRoute({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    route,
+    router
+  });
+
+  globalSettings.updateDataVersion();
+
+  const entriesReport = computed(() => {
+    let report = entriesStore.visibleEntries.slice();
+
+    report = tagsStates.value.filterByTags(report, (entryId) => entriesStore.entries[entryId].tags);
+    return report;
+  });
+
+  const tagsCount = computed(() => {
+    const entriesToProcess = entriesReport.value.map((entryId) => entriesStore.entries[entryId]);
+
+    return utils.countTags(entriesToProcess);
+  });
+
+  const entriesNumber = computed(() => {
+    return entriesReport.value.length;
+  });
+
+  const medianTag1: ComputedRef<string> = computed(() => {
+    // do not change tag when the filter changed
+    if (tagsStates.value.hasSelectedTags) {
+      return medianTag1.value;
+    }
+
+    const entriesNumber = entriesReport.value.length;
+
+    const result = utils.chooseTagByUsage({tagsCount: tagsCount.value, border: 0.5 * entriesNumber, exclude: []});
+
+    if (result === null) {
+      return "";
+    }
+
+    return result;
+  });
+
+  const medianTag2: ComputedRef<string> = computed(() => {
+    // do not change tag when the filter changed
+    if (tagsStates.value.hasSelectedTags) {
+      return medianTag2.value;
+    }
+
+    const entriesToProcess = entriesReport.value
+      .map((entryId) => entriesStore.entries[entryId])
+      .filter((entry) => entry.tags.includes(medianTag1.value));
+
+    const entriesNumber = entriesToProcess.length;
+
+    const counts = utils.countTags(entriesToProcess);
+
+    const result = utils.chooseTagByUsage({
+      tagsCount: counts,
+      border: 0.5 * entriesNumber,
+      exclude: [medianTag1.value]
+    });
+
+    if (result === null) {
+      return "";
+    }
+
+    return result;
+  });
+</script>
+
+<style></style>

package/src/views/RulesView.vue

@@ -2,7 +2,7 @@
   <side-panel-layout :reload-button="true">
     <template #main-header>
       Rules
-      <span v-if="rules">[{{ rules.length }}]</span>
+      <span v-if="rules">[{{ rulesNumber }}]</span>
     </template>
 
     <template #side-menu-item-2>
@@ -15,8 +15,7 @@
     <template #side-footer>
       <tags-filter
         :tags="tagsCount"
-        :show-create-rule="false"
-        change-source="rules_tags_filter" />
+        :show-create-rule="false" />
     </template>
 
     <div class="ffun-info-common mb-2">
@@ -32,14 +31,14 @@
     </div>
 
     <rules-list
-      v-if="rules"
+      :loading="loading"
       :rules="sortedRules" />
   </side-panel-layout>
 </template>
 
 <script lang="ts" setup>
   import {computed, ref, onUnmounted, watch, provide} from "vue";
-  import {useRouter} from "vue-router";
+  import {useRoute, useRouter} from "vue-router";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import _ from "lodash";
@@ -49,46 +48,41 @@
   import * as e from "@/logic/enums";
   import * as tagsFilterState from "@/logic/tagsFilterState";
 
+  const route = useRoute();
   const router = useRouter();
 
   const tagsStates = ref<tagsFilterState.Storage>(new tagsFilterState.Storage());
 
   provide("tagsStates", tagsStates);
+  provide("eventsViewName", "rules");
 
   const globalSettings = useGlobalSettingsStore();
 
+  tagsFilterState.setSyncingTagsWithRoute({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    route,
+    router
+  });
+
+  tagsFilterState.setSyncingTagsSidebarPoint({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    globalSettings
+  });
+
   globalSettings.mainPanelMode = e.MainPanelMode.Rules;
 
   function goToNews() {
     router.push({name: e.MainPanelMode.Entries, params: {}});
   }
 
+  const loading = computed(() => rules.value === null);
+
   const rules = computedAsync(async () => {
     // force refresh
     globalSettings.dataVersion;
     return await api.getRules();
   }, null);
 
-  const tagsCount = computed(() => {
-    if (!rules.value) {
-      return {};
-    }
-
-    const tags: {[key: string]: number} = {};
-
-    for (const rule of rules.value) {
-      for (const tag of rule.requiredTags) {
-        tags[tag] = (tags[tag] || 0) + 1;
-      }
-
-      for (const tag of rule.excludedTags) {
-        tags[tag] = (tags[tag] || 0) + 1;
-      }
-    }
-
-    return tags;
-  });
-
   const sortedRules = computed(() => {
     if (!rules.value) {
       return null;
@@ -96,7 +90,7 @@
 
     let sorted = rules.value.slice();
 
-    sorted = tagsStates.value.filterByTags(sorted, (rule) => rule.allTags);
+    sorted = tagsStates.value.filterByTags(sorted, (rule) => rule.tags);
 
     const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder);
 
@@ -113,14 +107,14 @@
 
     sorted = sorted.sort((a: t.Rule, b: t.Rule) => {
       if (globalSettings.rulesOrder === e.RulesOrder.Tags) {
-        return utils.compareLexicographically(a.allTags, b.allTags);
+        return utils.compareLexicographically(a.tags, b.tags);
       }
 
       const valueA = _.get(a, orderField, null);
       const valueB = _.get(b, orderField, null);
 
       if (valueA === null && valueB === null) {
-        return utils.compareLexicographically(a.allTags, b.allTags);
+        return utils.compareLexicographically(a.tags, b.tags);
       }
 
       if (valueA === null) {
@@ -139,9 +133,17 @@
         return -1 * direction;
       }
 
-      return utils.compareLexicographically(a.allTags, b.allTags);
+      return utils.compareLexicographically(a.tags, b.tags);
     });
 
     return sorted;
   });
+
+  const rulesNumber = computed(() => {
+    return sortedRules.value ? sortedRules.value.length : 0;
+  });
+
+  const tagsCount = computed(() => {
+    return utils.countTags(sortedRules.value);
+  });
 </script>

package/src/views/SettingsView.vue

@@ -120,7 +120,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";
@@ -130,6 +130,8 @@
 
   const globalSettings = useGlobalSettingsStore();
 
+  provide("eventsViewName", "settings");
+
   globalSettings.mainPanelMode = e.MainPanelMode.Settings;
 
   const tokensCostData = computedAsync(async () => {