feeds-fun 1.14.2 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.14.2",
+  "version": "1.16.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/DiscoveryForm.vue

@@ -24,30 +24,44 @@
 
     <div v-else-if="foundFeeds === null"></div>
 
-    <p
+    <div
       v-else-if="foundFeeds.length === 0"
-      class="ffun-info-attention"
-      >No feeds found.</p
-    >
+      class="ffun-info-attention">
+      <p
+        class="ffun-info-error"
+        v-for="message in messages">
+        {{ message.message }}
+      </p>
+
+      <p v-if="messages.length === 0"> No feeds found. </p>
+    </div>
 
     <div
       v-for="feed in foundFeeds"
       :key="feed.url">
       <feed-info :feed="feed" />
 
-      <button
-        class="ffun-form-button"
-        v-if="!addedFeeds[feed.url]"
-        :disabled="disableInputs"
-        @click.prevent="addFeed(feed.url)">
-        Add
-      </button>
-
       <p
-        v-else
-        class="ffun-info-good"
-        >Feed added</p
-      >
+        v-if="feed.isLinked"
+        class="ffun-info-good">
+        You are already subscribed to this feed.
+      </p>
+
+      <template v-else>
+        <button
+          class="ffun-form-button"
+          v-if="!addedFeeds[feed.url]"
+          :disabled="disableInputs"
+          @click.prevent="addFeed(feed.url)">
+          Add
+        </button>
+
+        <p
+          v-else
+          class="ffun-info-good"
+          >Feed added</p
+        >
+      </template>
     </div>
   </div>
 </template>
@@ -74,17 +88,22 @@
 
   const addedFeeds = ref<{[key: string]: boolean}>({});
 
+  let messages = ref<t.ApiMessage[]>([]);
+
   const foundFeeds = computedAsync(async () => {
     if (searhedUrl.value === "") {
       return null;
     }
 
     searching.value = true;
+    messages.value = [];
 
     let feeds: t.FeedInfo[] = [];
 
     try {
-      feeds = await api.discoverFeeds({url: searhedUrl.value});
+      const answer = await api.discoverFeeds({url: searhedUrl.value});
+      feeds = answer.feeds;
+      messages.value = answer.messages;
     } catch (e) {
       console.error(e);
     }

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/OPMLUpload.vue

@@ -43,6 +43,9 @@
   import * as api from "@/logic/api";
   import {computedAsync} from "@vueuse/core";
   import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const globalSettings = useGlobalSettingsStore();
 
   const opmlFile = ref<File | null>(null);
 
@@ -76,6 +79,10 @@
     try {
       await api.addOPML({content: content});
 
+      // loading an OPML file is pretty rare and significantly changes the list of feeds
+      // => we can force data to be reloaded
+      globalSettings.updateDataVersion();
+
       loading.value = false;
       loaded.value = true;
       error.value = false;

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;