feeds-fun 1.15.0 → 1.16.1

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

@@ -36,7 +36,7 @@
         v-if="reloadButton"
         href="#"
         @click="globalSettings.updateDataVersion()"
-        >Reload</a
+        >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;
 }

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];
+    });
+  }
 }

package/src/logic/types.ts

@@ -231,7 +231,9 @@ export function entryFromJSON(
 
 export type Rule = {
   readonly id: RuleId;
-  readonly tags: string[];
+  readonly requiredTags: string[];
+  readonly excludedTags: string[];
+  readonly allTags: string[];
   readonly score: number;
   readonly createdAt: Date;
   readonly updatedAt: Date;
@@ -239,22 +241,27 @@ export type Rule = {
 
 export function ruleFromJSON({
   id,
-  tags,
+  requiredTags,
+  excludedTags,
   score,
   createdAt,
   updatedAt
 }: {
   id: string;
-  tags: string[];
+  requiredTags: string[];
+  excludedTags: string[];
   score: number;
   createdAt: string;
   updatedAt: string;
 }): Rule {
-  tags = tags.sort();
+  requiredTags = requiredTags.sort();
+  excludedTags = excludedTags.sort();
 
   return {
     id: toRuleId(id),
-    tags: tags,
+    requiredTags: requiredTags,
+    excludedTags: excludedTags,
+    allTags: requiredTags.concat(excludedTags),
     score: score,
     createdAt: new Date(createdAt),
     updatedAt: new Date(updatedAt)

package/src/stores/entries.ts

@@ -8,12 +8,14 @@ import * as api from "@/logic/api";
 import {Timer} from "@/logic/timer";
 import {computedAsync} from "@vueuse/core";
 import {useGlobalSettingsStore} from "@/stores/globalSettings";
+import * as events from "@/logic/events";
 
 export const useEntriesStore = defineStore("entriesStore", () => {
   const globalSettings = useGlobalSettingsStore();
 
   const entries = ref<{[key: t.EntryId]: t.Entry}>({});
   const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
+  const displayedEntryId = ref<t.EntryId | null>(null);
 
   function registerEntry(entry: t.Entry) {
     if (entry.id in entries.value) {
@@ -95,11 +97,35 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     }
   }
 
+  async function displayEntry({entryId}: {entryId: t.EntryId}) {
+    displayedEntryId.value = entryId;
+
+    requestFullEntry({entryId: entryId});
+
+    if (!entries.value[entryId].hasMarker(e.Marker.Read)) {
+      await setMarker({
+        entryId: entryId,
+        marker: e.Marker.Read
+      });
+    }
+
+    await events.newsBodyOpened({entryId: entryId});
+  }
+
+  function hideEntry({entryId}: {entryId: t.EntryId}) {
+    if (displayedEntryId.value === entryId) {
+      displayedEntryId.value = null;
+    }
+  }
+
   return {
     entries,
     requestFullEntry,
     setMarker,
     removeMarker,
-    loadedEntriesReport
+    loadedEntriesReport,
+    displayedEntryId,
+    displayEntry,
+    hideEntry
   };
 });

package/src/stores/globalSettings.ts

@@ -18,7 +18,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // Entries
   const lastEntriesPeriod = ref(e.LastEntriesPeriod.Day3);
   const entriesOrder = ref(e.EntriesOrder.Score);
-  const showEntriesTags = ref(true);
   const showRead = ref(true);
 
   // Feeds
@@ -64,7 +63,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     mainPanelMode,
     lastEntriesPeriod,
     entriesOrder,
-    showEntriesTags,
     showRead,
     dataVersion,
     updateDataVersion,

package/src/values/Score.vue

@@ -30,7 +30,7 @@
     for (const rule of rules) {
       const tags = [];
 
-      for (const tagId of rule.tags) {
+      for (const tagId of rule.requiredTags) {
         const tagInfo = tagsStore.tags[tagId];
         if (tagInfo) {
           tags.push(tagInfo.name);
@@ -39,7 +39,16 @@
         }
       }
 
-      strings.push(rule.score.toString().padStart(2, " ") + " — " + tags.join(", "));
+      for (const tagId of rule.excludedTags) {
+        const tagInfo = tagsStore.tags[tagId];
+        if (tagInfo) {
+          tags.push("NOT " + tagInfo.name);
+        } else {
+          tags.push("NOT " + tagId);
+        }
+      }
+
+      strings.push(rule.score.toString().padStart(2, " ") + " — " + tags.join(" AND "));
     }
 
     alert(strings.join("\n"));

package/src/views/FeedsView.vue

@@ -25,6 +25,15 @@
         off-text="last" />
     </template>
 
+    <template #side-menu-item-4>
+      <a
+        class="ffun-form-button p-1 my-1 block w-full text-center"
+        href="/api/get-opml"
+        target="_blank"
+        >Download OPML</a
+      >
+    </template>
+
     <template #main-header>
       Feeds
       <span v-if="sortedFeeds"> [{{ sortedFeeds.length }}] </span>