feeds-fun 1.17.1 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/EntriesList.vue

@@ -7,6 +7,7 @@
           :key="entryId"
           class="ffun-body-list-entry">
           <entry-for-list
+            :show-score="showScore"
             :entryId="entryId"
             :time-field="timeField"
             :tags-count="tagsCount" />
@@ -22,6 +23,14 @@
         :counterOnNewLine="false"
         v-model:showEntries="showEntries" />
     </template>
+
+    <template v-else>
+      <div
+        v-if="!loading"
+        class="ffun-info-common">
+        No news to show.
+      </div>
+    </template>
   </div>
 </template>
 
@@ -31,10 +40,12 @@
   import {computedAsync} from "@vueuse/core";
 
   const properties = defineProps<{
+    loading: boolean;
     entriesIds: Array<t.EntryId>;
     timeField: string;
     showFromStart: number;
     showPerPage: number;
+    showScore: boolean;
     tagsCount: {[key: string]: number};
   }>();
 

package/src/components/EntryForList.vue

@@ -18,7 +18,9 @@
         class="text-orange-700 ti ti-chevrons-right" />
     </div>
 
-    <div class="flex-shrink-0 w-8 text-center pr-1">
+    <div
+      v-if="showScore"
+      class="flex-shrink-0 w-8 text-center pr-1">
       <value-score
         :value="entry.score"
         :entry-id="entry.id" />
@@ -40,8 +42,8 @@
         :tags="entry.tags"
         :tags-count="tagsCount"
         :show-all="showBody"
-        @request-to-show-all="entriesStore.displayEntry({entryId: entry.id})"
-        :contributions="entry.scoreContributions" />
+        @request-to-show-all="entriesStore.displayEntry({entryId: entry.id, view: eventsView})"
+        :contributions="showScore ? entry.scoreContributions : {}" />
     </div>
 
     <body-list-reverse-time-column
@@ -61,23 +63,29 @@
 
 <script lang="ts" setup>
   import _ from "lodash";
-  import {computed, ref, useTemplateRef, onMounted} from "vue";
+  import {computed, ref, useTemplateRef, onMounted, inject} from "vue";
   import type * as t from "@/logic/types";
   import * as events from "@/logic/events";
   import * as e from "@/logic/enums";
   import * as utils from "@/logic/utils";
+  import * as asserts from "@/logic/asserts";
   import {computedAsync} from "@vueuse/core";
   import DOMPurify from "dompurify";
   import {useEntriesStore} from "@/stores/entries";
 
   const entriesStore = useEntriesStore();
 
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
+
+  asserts.defined(eventsView);
+
   const topElement = useTemplateRef("entryTop");
 
   const properties = defineProps<{
     entryId: t.EntryId;
     timeField: string;
     tagsCount: {[key: string]: number};
+    showScore: boolean;
   }>();
 
   const entry = computed(() => {
@@ -129,10 +137,13 @@
   });
 
   async function newsLinkOpenedEvent() {
-    await events.newsLinkOpened({entryId: entry.value.id});
+    asserts.defined(eventsView);
+    await events.newsLinkOpened({entryId: entry.value.id, view: eventsView});
   }
 
   async function onTitleClick(event: MouseEvent) {
+    asserts.defined(eventsView);
+
     if (!event.ctrlKey) {
       event.preventDefault();
       event.stopPropagation();
@@ -140,7 +151,7 @@
       if (showBody.value) {
         entriesStore.hideEntry({entryId: entry.value.id});
       } else {
-        await entriesStore.displayEntry({entryId: entry.value.id});
+        await entriesStore.displayEntry({entryId: entry.value.id, view: eventsView});
 
         if (topElement.value) {
           const rect = topElement.value.getBoundingClientRect();

package/src/components/RuleForList.vue

@@ -20,7 +20,7 @@
 
       <div class="flex-grow">
         <rule-tag
-          v-for="tag of rule.allTags"
+          v-for="tag of rule.tags"
           :key="tag"
           :uid="tag"
           :css-modifier="cssModifiers[tag]" />
@@ -79,7 +79,7 @@
 
   const cssModifiers: {[key: string]: string} = {};
 
-  for (const tag of properties.rule.allTags) {
+  for (const tag of properties.rule.tags) {
     if (properties.rule.excludedTags.includes(tag)) {
       cssModifiers[tag] = "negative";
       continue;

package/src/components/RulesList.vue

@@ -1,12 +1,21 @@
 <template>
-  <ul>
-    <li
-      v-for="rule in rules"
-      :key="rule.id"
-      class="ffun-body-list-entry">
-      <rule-for-list :rule="rule" />
-    </li>
-  </ul>
+  <template v-if="rules && rules.length > 0">
+    <ul>
+      <li
+        v-for="rule in rules"
+        :key="rule.id"
+        class="ffun-body-list-entry">
+        <rule-for-list :rule="rule" />
+      </li>
+    </ul>
+  </template>
+  <template v-else>
+    <p
+      v-if="!loading"
+      class="ffun-info-common"
+      >No rules to show.</p
+    >
+  </template>
 </template>
 
 <script lang="ts" setup>
@@ -15,5 +24,5 @@
   import * as e from "@/logic/enums";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
 
-  defineProps<{rules: Array<t.Rule>}>();
+  defineProps<{rules: Array<t.Rule> | null; loading: boolean}>();
 </script>

package/src/components/TokensCost.vue

@@ -22,8 +22,6 @@
 
   const globalSettings = useGlobalSettingsStore();
 
-  globalSettings.mainPanelMode = e.MainPanelMode.Settings;
-
   const period = computed(() => {
     return properties.usage.intervalStartedAt.toLocaleString("default", {month: "long", year: "numeric"});
   });

package/src/components/collections/DetailedItem.vue

@@ -34,6 +34,12 @@
       >Hide feeds</button
     >
 
+    <a
+      :href="router.resolve({name: 'public-collection', params: {collectionSlug: collection.slug}}).href"
+      class="ffun-normal-link ml-2"
+      >Read news in the collection</a
+    >
+
     <collections-subscribing-progress
       :loading="loading"
       :loaded="loaded"
@@ -43,6 +49,7 @@
 
 <script lang="ts" setup>
   import {computed, ref} from "vue";
+  import {useRouter} from "vue-router";
   import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
   import * as api from "@/logic/api";
@@ -52,6 +59,8 @@
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useCollectionsStore} from "@/stores/collections";
 
+  const router = useRouter();
+
   const properties = defineProps<{
     collectionId: t.CollectionId;
   }>();

package/src/components/collections/PublicIntro.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="ffun-info-good">
+    <h4>Hi there!</h4>
+
+    <p>
+      Welcome to <strong>Feeds Fun</strong> and our curated <strong>{{ collection.name }}</strong> news collection!
+    </p>
+
+    <p>
+      <strong>Feeds Fun</strong> ranks news based on tags, so you always see what matters most. We offer public
+      collections to showcase our tagging system in action. Hope you'll enjoy it!
+    </p>
+
+    <p v-if="tag1Uid && tag2Uid">
+      Try out the tag filters on the left, for example, filter news by tag
+      <entry-tag
+        :uid="tag1Uid"
+        css-modifier="neutral"
+        :count="tag1Count" />
+
+      or even by a more specific tag
+
+      <entry-tag
+        :uid="tag2Uid"
+        css-modifier="neutral"
+        :count="tag2Count" />
+    </p>
+
+    <p>
+      If you like the results, <a :href="router.resolve({name: 'main'}).href">register</a> to create your own scoring
+      rules and automatically prioritize the news you’re most interested in.
+    </p>
+
+    <p> You can find more about scoring rules on the <a :href="router.resolve({name: 'main'}).href">main page</a>. </p>
+
+    <p><strong>All news in this collection is always up-to-date and tagged.</strong> </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed} from "vue";
+  import {useRouter} from "vue-router";
+  import type * as t from "@/logic/types";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const properties = defineProps<{
+    tag1Uid: string | null;
+    tag1Count: number;
+    tag2Uid: string | null;
+    tag2Count: number;
+    collectionId: t.CollectionId;
+  }>();
+
+  const router = useRouter();
+
+  const collections = useCollectionsStore();
+
+  const collection = computed(() => {
+    return collections.collections[properties.collectionId];
+  });
+</script>
+
+<style></style>

package/src/components/collections/PublicSelector.vue

@@ -0,0 +1,43 @@
+<template>
+  <select
+    class="ffun-input"
+    @change="updateCollection($event)">
+    <option
+      v-for="collection of collections.collectionsOrdered"
+      :value="collection.id"
+      :selected="collection.id === collectionId">
+      {{ collection.name }}
+    </option>
+  </select>
+</template>
+
+<script lang="ts" setup>
+  import * as e from "@/logic/enums";
+  import type * as t from "@/logic/types";
+  import {computed, ref, onUnmounted, watch, provide} from "vue";
+  import {useRoute, useRouter} from "vue-router";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const collections = useCollectionsStore();
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const properties = defineProps<{collectionId: t.CollectionId}>();
+
+  const collection = computed(() => collections.collections[properties.collectionId]);
+
+  function updateCollection(event: Event) {
+    const target = event.target as HTMLSelectElement;
+
+    const targetCollection = collections.collections[target.value as t.CollectionId];
+
+    router.push({
+      replace: true,
+      name: route.name,
+      params: {collectionSlug: targetCollection.slug, tags: []}
+    });
+  }
+</script>
+
+<style></style>

package/src/components/main/Block.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center max-w-3xl mx-auto my-3 md:my-5 space-y-3 md:space-y-5">
+  <div class="text-center max-w-3xl mx-auto my-5 space-y-5">
     <slot></slot>
   </div>
 </template>

package/src/components/main/Item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-stretch rounded-xl overflow-hidden min-h-28 max-h-28 mx-2">
+  <div class="flex flex-col items-stretch rounded-xl overflow-hidden min-h-32 max-h-32 mx-2">
     <div class="bg-blue-100 py-1 items-center text-xl font-medium">
       <slot name="caption" />
     </div>

package/src/components/notifications/LoadedOldNews.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- TODO: Hide when loading new news from the server -->
+  <!-- Currently, after changing the period, this message does not disappear -->
+  <!-- until the backend returns a new response -->
+  <!-- It confuses users because the period size is changing in the text at the beginning of the request. -->
+  <div
+    v-if="allEntriesAreOlderThanPeriod"
+    class="ffun-info-common">
+    <p> We have not found any news that is newer than {{ period.text }}, so we loaded some older ones. </p>
+  </div>
+</template>
+
+<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";
+  import _ from "lodash";
+
+  const entriesStore = useEntriesStore();
+
+  const properties = defineProps<{
+    entries: t.EntryId[];
+    period: e.LastEntriesPeriodProperty;
+  }>();
+
+  const allEntriesAreOlderThanPeriod = computed(() => {
+    if (entriesStore.loading) {
+      return false;
+    }
+
+    if (properties.entries.length == 0) {
+      return false;
+    }
+
+    return properties.entries.every((entryId) => {
+      const entry = entriesStore.entries[entryId];
+      return entry.publishedAt.getTime() < Date.now() - properties.period.seconds * 1000;
+    });
+  });
+</script>

package/src/components/page_header/ExternalLinks.vue

@@ -4,7 +4,7 @@
     href="/api/docs"
     target="_blank"
     class="ffun-page-header-link"
-    @click="events.socialLinkClicked({linkType: 'api'})"
+    @click="events.socialLinkClicked({linkType: 'api', view: eventsView})"
     >API</a
   >
 
@@ -13,7 +13,7 @@
     :href="settings.blog"
     target="_blank"
     class="ffun-page-header-link"
-    @click="events.socialLinkClicked({linkType: 'blog'})"
+    @click="events.socialLinkClicked({linkType: 'blog', view: eventsView})"
     >Blog</a
   >
 
@@ -23,7 +23,7 @@
     target="_blank"
     class="ffun-page-header-link text-xl align-middle"
     title="Reddit"
-    @click="events.socialLinkClicked({linkType: 'reddit'})"
+    @click="events.socialLinkClicked({linkType: 'reddit', view: eventsView})"
     ><i class="ti ti-brand-reddit"></i
   ></a>
 
@@ -33,7 +33,7 @@
     target="_blank"
     class="ffun-page-header-link text-xl align-middle"
     title="Discord"
-    @click="events.socialLinkClicked({linkType: 'discord'})"
+    @click="events.socialLinkClicked({linkType: 'discord', view: eventsView})"
     ><i class="ti ti-brand-discord"></i
   ></a>
 
@@ -43,16 +43,21 @@
     target="_blank"
     class="ffun-page-header-link text-xl align-middle"
     title="GitHub"
-    @click="events.socialLinkClicked({linkType: 'github'})">
+    @click="events.socialLinkClicked({linkType: 'github', view: eventsView})">
     <i class="ti ti-brand-github"></i
   ></a>
 </template>
 
 <script lang="ts" setup>
-  import {ref, computed, useSlots, onMounted, watch, watchEffect} from "vue";
+  import {inject} from "vue";
 
   import * as events from "@/logic/events";
   import * as settings from "@/logic/settings";
+  import * as asserts from "@/logic/asserts";
 
   const properties = defineProps<{showApi: boolean}>();
+
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
+
+  asserts.defined(eventsView);
 </script>

package/src/components/tags/EntryTag.vue

@@ -19,8 +19,10 @@
   const tagsStore = useTagsStore();
 
   const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
 
   asserts.defined(tagsStates);
+  asserts.defined(eventsView);
 
   const properties = defineProps<{
     uid: string;
@@ -57,14 +59,13 @@
     return result;
   });
 
-  const changeSource = "entry_record";
-
   async function onClick() {
     asserts.defined(tagsStates);
+    asserts.defined(eventsView);
 
     let changeInfo = tagsStates.value.onTagClicked({tag: properties.uid});
 
-    await events.tagStateChanged({tag: properties.uid, source: changeSource, ...changeInfo});
+    await events.tagStateChanged({tag: properties.uid, view: eventsView, source: "entry_record", ...changeInfo});
   }
 
   const tooltip = computed(() => {

package/src/components/tags/FilterTag.vue

@@ -35,15 +35,16 @@
   const tagsStore = useTagsStore();
 
   const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
 
   asserts.defined(tagsStates);
+  asserts.defined(eventsView);
 
   const properties = defineProps<{
     uid: string;
     count?: number | null;
     showCount: boolean;
     showSwitch: boolean;
-    changeSource: "news_tags_filter" | "rules_tags_filter";
   }>();
 
   const tagInfo = computed(() => {
@@ -78,18 +79,20 @@
 
   async function onClick() {
     asserts.defined(tagsStates);
+    asserts.defined(eventsView);
 
     let changeInfo = tagsStates.value.onTagClicked({tag: properties.uid});
 
-    await events.tagStateChanged({tag: properties.uid, source: properties.changeSource, ...changeInfo});
+    await events.tagStateChanged({tag: properties.uid, view: eventsView, source: "tags_filter", ...changeInfo});
   }
 
   async function onRevers() {
     asserts.defined(tagsStates);
+    asserts.defined(eventsView);
 
     let changeInfo = tagsStates.value.onTagReversed({tag: properties.uid});
 
-    await events.tagStateChanged({tag: properties.uid, source: properties.changeSource, ...changeInfo});
+    await events.tagStateChanged({tag: properties.uid, view: eventsView, source: "tags_filter", ...changeInfo});
   }
 
   const switchTooltip = computed(() => {

package/src/components/tags/RuleTag.vue

@@ -18,8 +18,10 @@
   const tagsStore = useTagsStore();
 
   const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
 
   asserts.defined(tagsStates);
+  asserts.defined(eventsView);
 
   const properties = defineProps<{
     uid: string;
@@ -55,13 +57,12 @@
     return result;
   });
 
-  const changeSource = "rule_record";
-
   async function onClick() {
     asserts.defined(tagsStates);
+    asserts.defined(eventsView);
 
     let changeInfo = tagsStates.value.onTagClicked({tag: properties.uid});
 
-    await events.tagStateChanged({tag: properties.uid, source: changeSource, ...changeInfo});
+    await events.tagStateChanged({tag: properties.uid, view: eventsView, source: "rule_record", ...changeInfo});
   }
 </script>

package/src/components/tags/TagsFilter.vue

@@ -11,13 +11,23 @@
           :uid="tag"
           :count="tags[tag] ?? 0"
           :show-switch="true"
-          :show-count="false"
-          :change-source="changeSource" />
+          :show-count="false" />
       </li>
     </ul>
 
     <rule-constructor v-if="showCreateRule" />
 
+    <p
+      v-if="showRegistrationInvitation"
+      class="ffun-info-common">
+      <a
+        href="#"
+        @click.prevent="router.push({name: 'main'})"
+        >Register</a
+      >
+      to score news by tags!
+    </p>
+
     <input
       class="ffun-input w-full"
       type="text"
@@ -35,8 +45,7 @@
           :uid="tag"
           :count="tags[tag]"
           :show-switch="false"
-          :show-count="true"
-          :change-source="changeSource" />
+          :show-count="true" />
       </li>
     </ul>
 
@@ -53,6 +62,7 @@
 
 <script lang="ts" setup>
   import {computed, ref, inject} from "vue";
+  import {useRoute, useRouter} from "vue-router";
   import type {Ref} from "vue";
   import {useTagsStore} from "@/stores/tags";
   import type * as tagsFilterState from "@/logic/tagsFilterState";
@@ -60,6 +70,8 @@
   import * as api from "@/logic/api";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
 
+  const router = useRouter();
+
   const tagsStore = useTagsStore();
 
   const globalSettings = useGlobalSettingsStore();
@@ -72,7 +84,7 @@
   const properties = defineProps<{
     tags: {[key: string]: number};
     showCreateRule?: boolean;
-    changeSource: "news_tags_filter" | "rules_tags_filter";
+    showRegistrationInvitation?: boolean;
   }>();
 
   const showFromStart = ref(25);

package/src/css/panels.css

@@ -24,7 +24,7 @@
   }
 
   .ffun-x-info {
-    @apply ffun-x-panel border p-4 rounded-md;
+    @apply ffun-x-panel border p-4 rounded-md my-2;
   }
 
   .ffun-info-settings {
@@ -32,18 +32,18 @@
   }
 
   .ffun-info-common {
-    @apply ffun-x-info bg-blue-50 border-blue-200 text-blue-800;
+    @apply ffun-x-info bg-blue-50 border-blue-200 text-blue-900;
   }
 
   .ffun-info-good {
-    @apply ffun-x-info bg-green-50 border-green-200 text-green-800;
+    @apply ffun-x-info bg-green-50 border-green-200 text-green-900;
   }
 
   .ffun-info-bad {
-    @apply ffun-x-info bg-red-50 border-red-200 text-red-800;
+    @apply ffun-x-info bg-red-50 border-red-200 text-red-900;
   }
 
   .ffun-info-waiting {
-    @apply ffun-x-info bg-yellow-50 border-yellow-200 text-yellow-800;
+    @apply ffun-x-info bg-yellow-50 border-yellow-200 text-yellow-900;
   }
 }