feeds-fun 1.15.0 → 1.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "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

@@ -9,9 +9,7 @@
           <entry-for-list
             :entryId="entryId"
             :time-field="timeField"
-            :show-tags="showTags"
-            :tags-count="tagsCount"
-            @entry:bodyVisibilityChanged="onBodyVisibilityChanged" />
+            :tags-count="tagsCount" />
         </li>
       </ul>
 
@@ -35,14 +33,11 @@
   const properties = defineProps<{
     entriesIds: Array<t.EntryId>;
     timeField: string;
-    showTags: boolean;
     showFromStart: number;
     showPerPage: number;
     tagsCount: {[key: string]: number};
   }>();
 
-  const emit = defineEmits(["entry:bodyVisibilityChanged"]);
-
   const showEntries = ref(properties.showFromStart);
 
   const entriesToShow = computed(() => {
@@ -51,14 +46,14 @@
     }
     return properties.entriesIds.slice(0, showEntries.value);
   });
-
-  function onBodyVisibilityChanged({entryId, visible}: {entryId: t.EntryId; visible: boolean}) {
-    emit("entry:bodyVisibilityChanged", {entryId, visible});
-  }
 </script>
 
 <style scoped>
+  .entry-block {
+  }
+
   .entry-block:not(:last-child) {
     border-bottom-width: 1px;
+    @apply py-1;
   }
 </style>

package/src/components/EntryForList.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex">
+  <div
+    ref="entryTop"
+    class="flex text-lg">
     <div class="flex-shrink-0 w-8 text-right pr-1">
       <value-score
         :value="entry.score"
@@ -9,7 +11,7 @@
     <div class="flex-shrink-0 w-8 text-right pr-1">
       <favicon-element
         :url="entry.url"
-        class="w-4 h-4 align-text-bottom mx-1 inline" />
+        class="w-5 h-5 align-text-bottom mx-1 inline" />
     </div>
 
     <div class="flex-shrink-0 text-right">
@@ -25,16 +27,17 @@
       <a
         :href="entry.url"
         target="_blank"
-        :class="[{'font-bold': isRead}, 'flex-grow', 'min-w-fit', 'line-clamp-1', 'pr-4', 'mb-0']"
+        :class="[{'font-bold': !isRead}, 'flex-grow', 'min-w-fit', 'line-clamp-1', 'pr-4', 'mb-0']"
         @click="onTitleClick">
         {{ purifiedTitle }}
       </a>
 
       <tags-list
-        v-if="showTags"
         class="mt-0 pt-0"
         :tags="entry.tags"
         :tags-count="tagsCount"
+        :show-all="showBody"
+        @request-to-show-all="entriesStore.displayEntry({entryId: entry.id})"
         :contributions="entry.scoreContributions" />
     </div>
 
@@ -70,7 +73,7 @@
 
 <script lang="ts" setup>
   import _ from "lodash";
-  import {computed, ref} from "vue";
+  import {computed, ref, useTemplateRef} from "vue";
   import type * as t from "@/logic/types";
   import * as events from "@/logic/events";
   import * as e from "@/logic/enums";
@@ -80,15 +83,14 @@
 
   const entriesStore = useEntriesStore();
 
+  const topElement = useTemplateRef("entryTop");
+
   const properties = defineProps<{
     entryId: t.EntryId;
     timeField: string;
-    showTags: boolean;
     tagsCount: {[key: string]: number};
   }>();
 
-  const emit = defineEmits(["entry:bodyVisibilityChanged"]);
-
   const entry = computed(() => {
     if (properties.entryId in entriesStore.entries) {
       return entriesStore.entries[properties.entryId];
@@ -98,10 +100,12 @@
   });
 
   const isRead = computed(() => {
-    return !entriesStore.entries[entry.value.id].hasMarker(e.Marker.Read);
+    return entriesStore.entries[entry.value.id].hasMarker(e.Marker.Read);
   });
 
-  const showBody = ref(false);
+  const showBody = computed(() => {
+    return entry.value.id == entriesStore.displayedEntryId;
+  });
 
   const timeFor = computed(() => {
     if (entry.value === null) {
@@ -111,25 +115,6 @@
     return _.get(entry.value, properties.timeField, null);
   });
 
-  async function displayBody() {
-    showBody.value = true;
-
-    emit("entry:bodyVisibilityChanged", {entryId: properties.entryId, visible: true});
-
-    if (entry.value === null) {
-      throw new Error("entry is null");
-    }
-
-    entriesStore.requestFullEntry({entryId: entry.value.id});
-
-    await events.newsBodyOpened({entryId: entry.value.id});
-  }
-
-  function hideBody() {
-    showBody.value = false;
-    emit("entry:bodyVisibilityChanged", {entryId: properties.entryId, visible: false});
-  }
-
   const purifiedTitle = computed(() => {
     if (entry.value === null) {
       return "";
@@ -166,20 +151,16 @@
       event.stopPropagation();
 
       if (showBody.value) {
-        hideBody();
+        entriesStore.hideEntry({entryId: entry.value.id});
       } else {
-        displayBody();
+        await entriesStore.displayEntry({entryId: entry.value.id});
+
+        if (topElement.value) {
+          topElement.value.scrollIntoView({behavior: "instant"});
+        }
       }
     } else {
       await newsLinkOpenedEvent();
     }
-
-    // TODO: is it will be too slow?
-    if (showBody.value) {
-      await entriesStore.setMarker({
-        entryId: properties.entryId,
-        marker: e.Marker.Read
-      });
-    }
   }
 </script>

package/src/components/FfunTag.vue

@@ -1,35 +1,52 @@
 <template>
-  <div
-    :class="classes"
-    :title="tooltip"
-    @click.prevent="onClick()">
-    <span v-if="countMode == 'prefix'">[{{ count }}]</span>
-
-    {{ tagInfo.name }}
-
+  <div class="inline-block">
     <a
-      v-if="tagInfo.link"
-      :href="tagInfo.link"
-      target="_blank"
-      @click.stop=""
-      rel="noopener noreferrer">
-      &#8599;
-    </a>
+      href="#"
+      v-if="showSwitch"
+      class="pr-1"
+      @click.prevent="onRevers()"
+      >⇄</a
+    >
+    <div
+      :class="classes"
+      :title="tooltip"
+      @click.prevent="onClick()">
+      <span v-if="countMode == 'prefix'">[{{ count }}]</span>
+
+      {{ tagInfo.name }}
+
+      <a
+        v-if="tagInfo.link"
+        :href="tagInfo.link"
+        target="_blank"
+        @click.stop=""
+        rel="noopener noreferrer">
+        &#8599;
+      </a>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   import * as t from "@/logic/types";
-  import {computed, ref} from "vue";
+  import {computed, ref, inject} from "vue";
+  import type {Ref} from "vue";
   import {useTagsStore} from "@/stores/tags";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
 
   const tagsStore = useTagsStore();
 
+  const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+
+  asserts.defined(tagsStates);
+
   const properties = defineProps<{
     uid: string;
     count?: number | null;
     countMode?: string | null;
-    mode?: string | null;
+    secondaryMode?: string | null;
+    showSwitch?: boolean | null;
   }>();
 
   const tagInfo = computed(() => {
@@ -44,27 +61,39 @@
     return t.noInfoTag(properties.uid);
   });
 
-  const emit = defineEmits(["tag:clicked"]);
-
   const classes = computed(() => {
     const result: {[key: string]: boolean} = {
       tag: true
     };
 
-    if (properties.mode) {
-      result[properties.mode] = true;
+    if (tagsStates.value.requiredTags[properties.uid]) {
+      result["required"] = true;
+    }
+
+    if (tagsStates.value.excludedTags[properties.uid]) {
+      result["excluded"] = true;
+    }
+
+    if (properties.secondaryMode) {
+      result[properties.secondaryMode] = true;
     }
 
     return result;
   });
 
   function onClick() {
-    emit("tag:clicked", properties.uid);
+    asserts.defined(tagsStates);
+    tagsStates.value.onTagClicked({tag: properties.uid});
+  }
+
+  function onRevers() {
+    asserts.defined(tagsStates);
+    tagsStates.value.onTagReversed({tag: properties.uid});
   }
 
   const tooltip = computed(() => {
     if (properties.countMode == "tooltip" && properties.count) {
-      return `articles with the tag: ${properties.count} (${properties.uid})`;
+      return `articles with this tag: ${properties.count}`;
     }
     return "";
   });
@@ -72,19 +101,15 @@
 
 <style scoped>
   .tag {
-    @apply inline-block cursor-pointer p-0 mr-2 whitespace-nowrap;
-  }
-
-  .tag.selected {
-    @apply font-bold text-purple-700;
+    @apply inline-block cursor-pointer p-0 mr-2 whitespace-nowrap hover:bg-green-100 px-1 hover:rounded-lg;
   }
 
   .tag.required {
-    @apply text-green-700;
+    @apply text-green-700 font-bold;
   }
 
   .tag.excluded {
-    @apply text-red-700;
+    @apply text-red-700 font-bold;
   }
 
   .tag.positive {

package/src/components/RuleConstructor.vue

@@ -1,42 +1,73 @@
 <template>
-  <div class="">
-    <score-selector
-      class="inline-block mr-2"
-      v-model="currentScore" />
-
-    <a
-      class="ffun-form-button"
-      href="#"
-      v-if="canCreateRule"
-      @click.prevent="createOrUpdateRule()"
-      >create rule</a
-    >
-
-    <p class="ffun-info-attention"> The news list will be updated right after you create a rule. </p>
+  <div>
+    <div
+      v-if="tagsStates.hasSelectedTags"
+      class="flex items-center">
+      <div class="flex-none">
+        <score-selector
+          class="inline-block mr-2 my-auto"
+          v-model="currentScore" />
+      </div>
+
+      <a
+        class="ffun-form-button p-1 my-1 block text-center inline-block flex-grow"
+        href="#"
+        @click.prevent="createOrUpdateRule()"
+        >Create Rule</a
+      >
+    </div>
+
+    <p
+      class="ffun-info-good"
+      v-else>
+      <template v-if="showSuccess"> Rule created. </template>
+      <template v-else> Select tags to create a rule. </template>
+    </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref} from "vue";
-  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {computed, ref, inject, watch} from "vue";
+  import type {Ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+  import type * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
   import * as api from "@/logic/api";
-  const properties = defineProps<{tags: string[]}>();
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const tagsStore = useTagsStore();
 
   const globalSettings = useGlobalSettingsStore();
 
-  const emit = defineEmits(["rule-constructor:created"]);
+  const currentScore = ref(1);
 
-  // fibonacci numbers
-  const scores = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];
+  const showSuccess = ref(false);
 
-  const currentScore = ref(1);
+  const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+  asserts.defined(tagsStates);
 
-  const canCreateRule = computed(() => {
-    return properties.tags.length > 0;
-  });
+  watch(
+    () => tagsStates.value.hasSelectedTags,
+    () => {
+      // This condition is needed to prevent immediate reset of the success message
+      // right after the rule is created in createOrUpdateRule
+      if (tagsStates.value.hasSelectedTags) {
+        showSuccess.value = false;
+      }
+    }
+  );
 
   async function createOrUpdateRule() {
-    await api.createOrUpdateRule({tags: properties.tags, score: currentScore.value});
+    asserts.defined(tagsStates);
+    await api.createOrUpdateRule({
+      requiredTags: Object.keys(tagsStates.value.requiredTags),
+      excludedTags: Object.keys(tagsStates.value.excludedTags),
+      score: currentScore.value
+    });
+
+    tagsStates.value.clear();
+
+    showSuccess.value = true;
 
     // this line leads to the reloading of news and any other data
     // not an elegant solution, but it works with the current API implementation
@@ -44,7 +75,5 @@
     //       - without reloading
     //       - maybe, without reordering too
     globalSettings.updateDataVersion();
-
-    emit("rule-constructor:created");
   }
 </script>

package/src/components/RuleForList.vue

@@ -19,9 +19,19 @@
 
       <div class="flex-grow">
         <template
-          v-for="tag of rule.tags"
+          v-for="tag of rule.requiredTags"
           :key="tag">
-          <ffun-tag :uid="tag" />&nbsp;
+          <ffun-tag
+            :uid="tag"
+            secondary-mode="positive" />&nbsp;
+        </template>
+
+        <template
+          v-for="tag of rule.excludedTags"
+          :key="tag">
+          <ffun-tag
+            :uid="tag"
+            secondary-mode="negative" />&nbsp;
         </template>
       </div>
     </div>
@@ -67,7 +77,8 @@
     await api.updateRule({
       id: properties.rule.id,
       score: newScore,
-      tags: properties.rule.tags
+      requiredTags: properties.rule.requiredTags,
+      excludedTags: properties.rule.excludedTags
     });
 
     scoreChanged.value = true;

package/src/components/TagsFilter.vue

@@ -7,26 +7,21 @@
         v-for="tag of displayedSelectedTags"
         :key="tag"
         class="whitespace-nowrap line-clamp-1">
-        <a
-          href="#"
-          @click.prevent="deselect(tag)"
-          >[X]</a
-        >
         <ffun-tag
           class="ml-1"
           :uid="tag"
           :count="tags[tag] ?? 0"
-          count-mode="no"
-          :mode="tagStates[tag]"
-          @tag:clicked="onTagClicked">
-        </ffun-tag>
+          :showSwitch="true"
+          count-mode="no" />
       </li>
     </ul>
 
+    <rule-constructor v-if="showCreateRule" />
+
     <input
       class="ffun-input w-full"
       type="text"
-      placeholder="Input part of tag..."
+      placeholder="Input part of a tag…"
       v-model="tagNameFilter" />
 
     <ul
@@ -39,9 +34,7 @@
         <ffun-tag
           :uid="tag"
           :count="tags[tag]"
-          count-mode="prefix"
-          :mode="null"
-          @tag:clicked="onTagClicked" />
+          count-mode="prefix" />
       </li>
     </ul>
 
@@ -57,18 +50,24 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref} from "vue";
+  import {computed, ref, inject} from "vue";
+  import type {Ref} from "vue";
   import {useTagsStore} from "@/stores/tags";
   import type * as tagsFilterState from "@/logic/tagsFilterState";
+  import * as asserts from "@/logic/asserts";
+  import * as api from "@/logic/api";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
   const tagsStore = useTagsStore();
 
-  const selectedTags = ref<{[key: string]: boolean}>({});
+  const globalSettings = useGlobalSettingsStore();
 
-  const tagStates = ref<{[key: string]: tagsFilterState.State}>({});
+  const currentScore = ref(1);
 
-  const emit = defineEmits(["tag:stateChanged"]);
+  const tagsStates = inject<Ref<tagsFilterState.Storage>>("tagsStates");
+  asserts.defined(tagsStates);
 
-  const properties = defineProps<{tags: {[key: string]: number}}>();
+  const properties = defineProps<{tags: {[key: string]: number}; showCreateRule?: boolean}>();
 
   const showFromStart = ref(25);
 
@@ -76,37 +75,40 @@
 
   const tagNameFilter = ref("");
 
-  function tagComparator(a: string, b: string) {
-    const aCount = properties.tags[a];
-    const bCount = properties.tags[b];
+  function createTagComparator() {
+    const counts = properties.tags;
 
-    if (aCount > bCount) {
-      return -1;
-    }
+    function tagComparator(a: string, b: string) {
+      const aCount = counts[a];
+      const bCount = counts[b];
 
-    if (aCount < bCount) {
-      return 1;
-    }
+      if (aCount > bCount) {
+        return -1;
+      }
 
-    if (a > b) {
-      return 1;
-    }
+      if (aCount < bCount) {
+        return 1;
+      }
 
-    if (a < b) {
-      return -1;
+      if (a > b) {
+        return 1;
+      }
+
+      if (a < b) {
+        return -1;
+      }
+
+      return 0;
     }
 
-    return 0;
+    return tagComparator;
   }
 
   const displayedSelectedTags = computed(() => {
-    let values = Object.keys(selectedTags.value);
+    let values = Object.keys(tagsStates.value.selectedTags);
 
-    values = values.filter((tag) => {
-      return selectedTags.value[tag] === true;
-    });
-
-    values.sort(tagComparator);
+    const comparator = createTagComparator();
+    values.sort(comparator);
 
     return values;
   });
@@ -114,22 +116,38 @@
   const totalTags = computed(() => {
     // TODO: this is not correct, because selected tags are treated differently
     //       depending on their status: required or excluded.
+    //       I.e. by excluding tag `x` you exclude concreate entries => you can exclude more tags,
+    //       if they only belong to the excluded entries)
     //       => value is not accurate, but it is ok for now
-    return Object.keys(properties.tags).length + Object.keys(selectedTags.value).length;
+    return Object.keys(properties.tags).length + Object.keys(tagsStates.value.selectedTags).length;
   });
 
-  const displayedTags = computed(() => {
+  const _sortedTags = computed(() => {
     let values = Object.keys(properties.tags);
 
-    if (values.length === 0) {
-      return [];
-    }
+    const comparator = createTagComparator();
 
-    values = values.filter((tag) => {
-      return selectedTags.value[tag] !== true;
-    });
+    values.sort(comparator);
+
+    return values;
+  });
+
+  const _visibleTags = computed(() => {
+    let values = _sortedTags.value.slice();
+
+    const textFilter = tagNameFilter.value.trim().toLowerCase();
+
+    const selectedTags = Object.keys(tagsStates.value.selectedTags);
 
     values = values.filter((tag) => {
+      if (selectedTags.includes(tag)) {
+        return false;
+      }
+
+      if (!textFilter) {
+        return true;
+      }
+
       const tagInfo = tagsStore.tags[tag];
 
       if (tagInfo === undefined || tagInfo.name === null) {
@@ -139,36 +157,10 @@
       return tagInfo.name.includes(tagNameFilter.value);
     });
 
-    values.sort(tagComparator);
-
-    values = values.slice(0, showEntries.value);
-
     return values;
   });
 
-  function onTagClicked(tag: string) {
-    const state = tagStates.value[tag] || "none";
-
-    if (state === "none") {
-      tagStates.value[tag] = "required";
-      selectedTags.value[tag] = true;
-    } else if (state === "required") {
-      tagStates.value[tag] = "excluded";
-      selectedTags.value[tag] = true;
-    } else if (state === "excluded") {
-      tagStates.value[tag] = "required";
-      selectedTags.value[tag] = true;
-    } else {
-      throw new Error(`Unknown tag state: ${state}`);
-    }
-
-    emit("tag:stateChanged", {tag: tag, state: tagStates.value[tag]});
-  }
-
-  function deselect(tag: string) {
-    selectedTags.value[tag] = false;
-    tagStates.value[tag] = "none";
-
-    emit("tag:stateChanged", {tag: tag, state: tagStates.value[tag]});
-  }
+  const displayedTags = computed(() => {
+    return _visibleTags.value.slice(0, showEntries.value);
+  });
 </script>