feeds-fun 1.14.2 → 1.16.0

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>

package/src/components/TagsList.vue

@@ -1,72 +1,53 @@
 <template>
   <div>
-    <div class="text-sm">
+    <div class="text-base">
       <ffun-tag
         v-for="tag of displayedTags"
         :key="tag"
         :uid="tag"
-        :mode="tagMode(tag)"
         :count="tagsCount[tag]"
-        count-mode="tooltip"
-        @tag:clicked="onTagClicked" />
+        :secondary-mode="tagMode(tag)"
+        count-mode="tooltip" />
 
       <a
-        class="ffun-normal-link"
+        class=""
+        title="Click on the news title to open it and see all tags"
         href="#"
-        v-if="canShowAll"
-        @click.prevent="showAll = true"
-        >{{ tagsNumber - showLimit }} more</a
-      >
-
-      <a
-        class="ffun-normal-link"
-        href="#"
-        v-if="canHide"
-        @click.prevent="showAll = false"
-        >hide</a
+        @click.prevent="emit('request-to-show-all')"
+        v-if="!showAll && tagsNumber - showLimit > 0"
+        >[{{ tagsNumber - showLimit }} more]</a
       >
     </div>
-
-    <rule-constructor
-      v-if="selectedTagsList.length > 0"
-      :tags="selectedTagsList"
-      @rule-constructor:created="onRuleCreated" />
   </div>
 </template>
 
 <script lang="ts" setup>
   import {computed, ref} from "vue";
 
-  const showAll = ref(false);
-  const showLimit = ref(5);
-
-  const selectedTags = ref<{[key: string]: boolean}>({});
+  const showLimit = 5;
 
   const properties = defineProps<{
     tags: string[];
     contributions: {[key: string]: number};
     tagsCount: {[key: string]: number};
+    showAll: boolean;
   }>();
 
+  const emit = defineEmits(["request-to-show-all"]);
+
   const tagsNumber = computed(() => {
     return properties.tags.length;
   });
 
   const displayedTags = computed(() => {
-    if (showAll.value) {
+    if (properties.showAll) {
       return preparedTags.value;
     }
 
-    return preparedTags.value.slice(0, showLimit.value);
+    return preparedTags.value.slice(0, showLimit);
   });
 
   function tagMode(tag: string) {
-    if (!!selectedTags.value[tag]) {
-      return "selected";
-    }
-
-    // return null;
-
     if (!properties.contributions) {
       return null;
     }
@@ -129,37 +110,4 @@
 
     return values;
   });
-
-  const canShowAll = computed(() => {
-    return !showAll.value && showLimit.value < preparedTags.value.length;
-  });
-
-  const canHide = computed(() => {
-    return showAll.value && showLimit.value < preparedTags.value.length;
-  });
-
-  function onTagClicked(tag: string) {
-    if (!!selectedTags.value[tag]) {
-      delete selectedTags.value[tag];
-    } else {
-      selectedTags.value[tag] = true;
-      showAll.value = true;
-    }
-  }
-
-  const selectedTagsList = computed(() => {
-    const values = [];
-
-    for (const tag in selectedTags.value) {
-      values.push(tag);
-    }
-
-    values.sort();
-
-    return values;
-  });
-
-  function onRuleCreated() {
-    selectedTags.value = {};
-  }
 </script>

package/src/components/notifications/Block.vue

@@ -6,9 +6,11 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computed, ref, onUnmounted, watch, inject} from "vue";
+  import type {Ref} from "vue";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useCollectionsStore} from "@/stores/collections";
+  import * as tagsFilterState from "@/logic/tagsFilterState";
 
   const properties = defineProps<{
     apiKey: boolean;
@@ -20,6 +22,8 @@
   const collections = useCollectionsStore();
   const globalSettings = useGlobalSettingsStore();
 
+  const tagsStates = inject<Ref<tagsFilterState.Storage> | null>("tagsStates", null);
+
   const showApiKeyMessage = computed(() => {
     return (
       globalSettings.userSettings &&
@@ -33,7 +37,8 @@
     return (
       properties.collectionsNotification_ &&
       globalSettings.userSettings &&
-      !globalSettings.userSettings.hide_message_about_adding_collections.value
+      !globalSettings.userSettings.hide_message_about_adding_collections.value &&
+      !tagsStates?.value.hasSelectedTags
     );
   });
 

package/src/components/notifications/CreateRuleHelp.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="ffun-info-attention">
-    <p> Make your first rule to experience the full power of the Feeds Fun! </p>
-
-    <ul class="list-decimal list-inside">
-      <li>Click any tag under a news item.</li>
-      <li>Select more tags if needed.</li>
-      <li>Set a score for the rule.</li>
-      <li>Click "Create Rule".</li>
-      <li>See how the news gets organized based on your preferences!</li>
-    </ul>
+    <h3>Create your first news score rule</h3>
+    <p>Set up a rule to filter your news:</p>
+    <ol class="list-decimal list-inside">
+      <li><strong>Click</strong> any tag on a news item.</li>
+      <li>See how news is filtered by the chosen tag.</li>
+      <li>Locate the <strong>Create Rule</strong> panel in the left sidebar.</li>
+      <li>
+        Assign a numeric score for filtered news:
+        <ul>
+          <li>Use higher scores (above zero) for important or engaging content.</li>
+          <li>Use lower (below zero) scores for uninteresting or irrelevant content.</li>
+        </ul>
+      </li>
+      <li>Click <strong>Create Rule</strong>.</li>
+      <li>Watch the news reorganize based on your scores.</li>
+    </ol>
   </div>
 </template>

package/src/inputs/ScoreSelector.vue

@@ -7,7 +7,7 @@
       v-for="score of scores"
       :value="score"
       :selected="modelValue === score">
-      {{ score }}
+      {{ addSign(score) }}
     </option>
   </select>
 </template>
@@ -18,8 +18,7 @@
 
   const properties = withDefaults(defineProps<{scores?: number[]; modelValue: number}>(), {
     scores: () => [
-      1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, -1, -2, -3, -5, -8, -13, -21, -34, -55, -89, -144, -233,
-      -377, -610
+      1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, -1, -2, -3, -5, -8, -13, -21, -34, -55, -89, -144, -233
     ],
     modelValue: 1
   });
@@ -32,6 +31,14 @@
     const newScore = Number(target.value);
     emit("update:modelValue", newScore);
   }
+
+  function addSign(score: number) {
+    if (score > 0) {
+      return `+${score}`;
+    }
+
+    return score.toString();
+  }
 </script>
 
 <style scoped></style>

package/src/layouts/SidePanelLayout.vue

@@ -35,8 +35,8 @@
         class="ffun-form-button p-1 my-1 block w-full text-center"
         v-if="reloadButton"
         href="#"
-        @click="globalSettings.dataVersion += 1"
-        >Reload</a
+        @click="globalSettings.updateDataVersion()"
+        >Refresh</a
       >
 
       <hr v-if="hasSideFooter" />

package/src/logic/api.ts

@@ -99,10 +99,22 @@ export async function getEntriesByIds({ids}: {ids: t.EntryId[]}) {
   return entries;
 }
 
-export async function createOrUpdateRule({tags, score}: {tags: string[]; score: number}) {
+export async function createOrUpdateRule({
+  requiredTags,
+  excludedTags,
+  score
+}: {
+  requiredTags: string[];
+  excludedTags: string[];
+  score: number;
+}) {
   const response = await post({
     url: API_CREATE_OR_UPDATE_RULE,
-    data: {tags: tags, score: score}
+    data: {
+      requiredTags: requiredTags,
+      excludedTags: excludedTags,
+      score: score
+    }
   });
   return response;
 }
@@ -112,10 +124,20 @@ export async function deleteRule({id}: {id: t.RuleId}) {
   return response;
 }
 
-export async function updateRule({id, tags, score}: {id: t.RuleId; tags: string[]; score: number}) {
+export async function updateRule({
+  id,
+  requiredTags,
+  excludedTags,
+  score
+}: {
+  id: t.RuleId;
+  requiredTags: string[];
+  excludedTags: string[];
+  score: number;
+}) {
   const response = await post({
     url: API_UPDATE_RULE,
-    data: {id: id, tags: tags, score: score}
+    data: {id: id, score: score, requiredTags: requiredTags, excludedTags: excludedTags}
   });
   return response;
 }
@@ -167,13 +189,19 @@ export async function discoverFeeds({url}: {url: string}) {
   const response = await post({url: API_DISCOVER_FEEDS, data: {url: url}});
 
   const feeds = [];
+  const messages = [];
 
   for (let rawFeed of response.feeds) {
     const feed = t.feedInfoFromJSON(rawFeed);
     feeds.push(feed);
   }
 
-  return feeds;
+  for (let rawMessage of response.messages) {
+    const message = t.apiMessageFromJSON(rawMessage);
+    messages.push(message);
+  }
+
+  return {feeds, messages};
 }
 
 export async function addFeed({url}: {url: string}) {

package/src/logic/asserts.ts

@@ -0,0 +1,5 @@
+export function defined<T>(value: T | null | undefined, name?: string): asserts value is T {
+  if (value === null || value === undefined) {
+    throw new Error(`${name ?? "Value"} is null or undefined`);
+  }
+}

package/src/logic/tagsFilterState.ts

@@ -1,3 +1,6 @@
+import {ref, computed, reactive} from "vue";
+import type {ComputedRef} from "vue";
+
 export type State = "required" | "excluded" | "none";
 
 interface ReturnTagsForEntity {
@@ -7,48 +10,97 @@ interface ReturnTagsForEntity {
 export class Storage {
   requiredTags: {[key: string]: boolean};
   excludedTags: {[key: string]: boolean};
+  selectedTags: ComputedRef<{[key: string]: boolean}>;
+  hasSelectedTags: ComputedRef<boolean>;
 
   constructor() {
-    this.requiredTags = {};
-    this.excludedTags = {};
+    this.requiredTags = reactive({});
+    this.excludedTags = reactive({});
+
+    this.selectedTags = computed(() => {
+      return {...this.requiredTags, ...this.excludedTags};
+    });
+
+    this.hasSelectedTags = computed(() => {
+      return Object.keys(this.selectedTags.value).length > 0;
+    });
   }
 
   onTagStateChanged({tag, state}: {tag: string; state: State}) {
     if (state === "required") {
       this.requiredTags[tag] = true;
-      this.excludedTags[tag] = false;
+      if (this.excludedTags[tag]) {
+        delete this.excludedTags[tag];
+      }
     } else if (state === "excluded") {
       this.excludedTags[tag] = true;
-      this.requiredTags[tag] = false;
+      if (this.requiredTags[tag]) {
+        delete this.requiredTags[tag];
+      }
     } else if (state === "none") {
-      this.excludedTags[tag] = false;
-      this.requiredTags[tag] = false;
+      if (this.requiredTags[tag]) {
+        delete this.requiredTags[tag];
+      }
+
+      if (this.excludedTags[tag]) {
+        delete this.excludedTags[tag];
+      }
     } else {
       throw new Error(`Unknown tag state: ${state}`);
     }
   }
 
+  onTagReversed({tag}: {tag: string}) {
+    if (!(tag in this.selectedTags)) {
+      this.onTagStateChanged({tag: tag, state: "required"});
+    } else if (this.requiredTags[tag]) {
+      this.onTagStateChanged({tag: tag, state: "excluded"});
+    } else if (this.excludedTags[tag]) {
+      this.onTagStateChanged({tag: tag, state: "required"});
+    } else {
+      throw new Error(`Unknown tag state: ${tag}`);
+    }
+  }
+
+  onTagClicked({tag}: {tag: string}) {
+    if (tag in this.selectedTags) {
+      this.onTagStateChanged({tag: tag, state: "none"});
+    } else {
+      this.onTagStateChanged({tag: tag, state: "required"});
+    }
+  }
+
   filterByTags(entities: any[], getTags: ReturnTagsForEntity) {
     let report = entities.slice();
 
+    const requiredTags = Object.keys(this.requiredTags);
+
     report = report.filter((entity) => {
       for (const tag of getTags(entity)) {
         if (this.excludedTags[tag]) {
           return false;
         }
       }
-      return true;
-    });
 
-    report = report.filter((entity) => {
-      for (const tag of Object.keys(this.requiredTags)) {
-        if (this.requiredTags[tag] && !getTags(entity).includes(tag)) {
+      for (const tag of requiredTags) {
+        if (!getTags(entity).includes(tag)) {
           return false;
         }
       }
+
       return true;
     });
 
     return report;
   }
+
+  clear() {
+    Object.keys(this.requiredTags).forEach((key) => {
+      delete this.requiredTags[key];
+    });
+
+    Object.keys(this.excludedTags).forEach((key) => {
+      delete this.excludedTags[key];
+    });
+  }
 }