feeds-fun 1.2.0 → 1.4.0

package/package.json

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

@@ -1,44 +1,53 @@
 <template>
   <div>
-    <input
-      type="text"
-      class="ffun-input mr-1"
-      v-model="search"
-      :disabled="loading"
-      placeholder="Search for feeds" />
-
-    <button
-      class="ffun-form-button"
-      :disabled="loading"
-      @click.prevent="searhedUrl = search">
-      Search
-    </button>
-
-    <hr />
-
-    <div v-if="!loading && foundFeeds.length === 0">No feeds found</div>
-
-    <div v-else-if="loading">Searching for feeds…</div>
-
-    <div v-else>
-      <div
-        v-for="feed in foundFeeds"
-        :key="feed.url">
-        <feed-info :feed="feed" />
-
-        <button
-          class="ffun-form-button"
-          v-if="!addedFeeds[feed.url]"
-          @click.prevent="addFeed(feed.url)">
-          Add
-        </button>
-
-        <p
-          v-else
-          class="ffun-info-good"
-          >Feed added</p
-        >
-      </div>
+    <form @submit.prevent="searhedUrl = search">
+      <input
+        type="text"
+        class="ffun-input mr-1"
+        v-model="search"
+        :disabled="disableInputs"
+        placeholder="Enter a site URL" />
+
+      <button
+        type="submit"
+        class="ffun-form-button"
+        :disabled="disableInputs">
+        Search
+      </button>
+    </form>
+
+    <p
+      v-if="searching"
+      class="ffun-info-attention"
+      >Searching for feeds…</p
+    >
+
+    <div v-else-if="foundFeeds === null"></div>
+
+    <p
+      v-else-if="foundFeeds.length === 0"
+      class="ffun-info-attention"
+      >No feeds found.</p
+    >
+
+    <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
+      >
     </div>
   </div>
 </template>
@@ -52,7 +61,11 @@
   import {useEntriesStore} from "@/stores/entries";
 
   const search = ref("");
-  const loading = ref(false);
+
+  const searching = ref(false);
+  const adding = ref(false);
+
+  const disableInputs = computed(() => searching.value || adding.value);
 
   const searhedUrl = ref("");
 
@@ -60,10 +73,10 @@
 
   const foundFeeds = computedAsync(async () => {
     if (searhedUrl.value === "") {
-      return [];
+      return null;
     }
 
-    loading.value = true;
+    searching.value = true;
 
     let feeds: t.FeedInfo[] = [];
 
@@ -73,15 +86,19 @@
       console.error(e);
     }
 
-    loading.value = false;
+    searching.value = false;
 
     return feeds;
-  }, []);
+  }, null);
 
   async function addFeed(url: string) {
-    addedFeeds.value[url] = true;
+    adding.value = true;
 
     await api.addFeed({url: url});
+
+    addedFeeds.value[url] = true;
+
+    adding.value = false;
   }
 </script>
 

package/src/components/EntryForList.vue

@@ -12,6 +12,15 @@
         class="w-4 h-4 align-text-bottom mx-1 inline" />
     </div>
 
+    <div class="flex-shrink-0 text-right">
+      <input-marker
+        class="w-7 mr-2"
+        :marker="e.Marker.Read"
+        :entry-id="entryId"
+        on-text="read"
+        off-text="new" />
+    </div>
+
     <div class="flex-grow">
       <a
         :href="entry.url"
@@ -30,13 +39,6 @@
     </div>
 
     <div class="flex flex-shrink-0">
-      <input-marker
-        class="w-7 mr-2"
-        :marker="e.Marker.Read"
-        :entry-id="entryId"
-        on-text="read"
-        off-text="new" />
-
       <div class="w-7">
         <value-date-time
           :value="timeFor"

package/src/components/FeedsCollections.vue

@@ -1,27 +1,47 @@
 <template>
   <div>
-    <ul class="mb-1">
-      <li v-for="item in collections">
-        <input
-          class="ffun-checkbox"
-          type="checkbox"
-          :id="item"
-          :name="item"
-          :value="item"
-          v-model="selectedCollections"
-          checked />
-        <label
-          class="ml-2"
-          :for="item"
-          >{{ item }}</label
-        >
-      </li>
-    </ul>
-
-    <button
-      @click="subscribe()"
-      class="ffun-form-button"
-      >Subscribe</button
+    <form @submit.prevent="subscribe">
+      <ul class="mb-1">
+        <li v-for="item in collections">
+          <input
+            class="ffun-checkbox"
+            type="checkbox"
+            :id="item"
+            :name="item"
+            :value="item"
+            v-model="selectedCollections"
+            checked />
+          <label
+            class="ml-2"
+            :for="item"
+            >{{ item }}</label
+          >
+        </li>
+      </ul>
+
+      <button
+        type="submit"
+        class="ffun-form-button"
+        >Subscribe</button
+      >
+    </form>
+
+    <p
+      v-if="loading"
+      class="ffun-info-attention"
+      >subscribing...</p
+    >
+
+    <p
+      v-if="loaded"
+      class="ffun-info-good"
+      >Feeds added!</p
+    >
+
+    <p
+      v-if="error"
+      class="ffun-info-bad"
+      >Unknown error occurred! Please, try later.</p
     >
   </div>
 </template>
@@ -36,6 +56,10 @@
   import {useEntriesStore} from "@/stores/entries";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
 
+  const loading = ref(false);
+  const loaded = ref(false);
+  const error = ref(false);
+
   const selectedCollections = ref<t.FeedsCollectionId[]>([]);
 
   const globalSettings = useGlobalSettingsStore();
@@ -51,9 +75,26 @@
   });
 
   async function subscribe() {
-    await api.subscribeToFeedsCollections({
-      collectionsIds: selectedCollections.value
-    });
+    loading.value = true;
+    loaded.value = false;
+    error.value = false;
+
+    try {
+      await api.subscribeToFeedsCollections({
+        collectionsIds: selectedCollections.value
+      });
+
+      loading.value = false;
+      loaded.value = true;
+      error.value = false;
+    } catch (e) {
+      console.error(e);
+
+      loading.value = false;
+      loaded.value = false;
+      error.value = true;
+    }
+
     globalSettings.updateDataVersion();
   }
 </script>

package/src/components/NotificationCreateRuleHelp.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="ffun-info-attention">
+    <p> Make your first rule to experience the reader's full capabilities! </p>
+
+    <ul class="list-decimal list-inside">
+      <li>Click a tag under a news.</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>
+  </div>
+</template>

package/src/components/Notifications.vue

@@ -1,6 +1,7 @@
 <template>
   <notification-openai-api-key v-if="showOpenAIKeyNotification" />
   <notification-collections v-if="showCollectionsNotification" />
+  <notification-create-rule-help v-if="showCreateRuleHelpNotification" />
 </template>
 
 <script lang="ts" setup>
@@ -10,6 +11,7 @@
   const properties = defineProps<{
     openaiApiKey: boolean;
     collections: boolean;
+    createRuleHelp: boolean;
   }>();
 
   const globalSettings = useGlobalSettingsStore();
@@ -26,7 +28,16 @@
     return properties.collections;
   });
 
+  const showCreateRuleHelpNotification = computed(() => {
+    return !showCollectionsNotification.value && properties.createRuleHelp;
+  });
+
   const showOpenAIKeyNotification = computed(() => {
-    return !showCollectionsNotification.value && properties.openaiApiKey && showApiKeyMessage.value;
+    return (
+      !showCollectionsNotification.value &&
+      !showCreateRuleHelpNotification.value &&
+      properties.openaiApiKey &&
+      showApiKeyMessage.value
+    );
   });
 </script>

package/src/components/OPMLUpload.vue

@@ -1,15 +1,37 @@
 <template>
   <div>
-    <input
-      type="file"
-      class="ffun-file-button"
-      @change="uploadFile" />
-
-    <button
-      class="ffun-form-button"
-      type="submit"
-      @click.prevent="submit"
-      >Submit</button
+    <form @submit.prevent="submit">
+      <input
+        type="file"
+        class="ffun-file-button"
+        :disabled="loading"
+        @change="uploadFile" />
+
+      <button
+        class="ffun-form-button"
+        type="submit"
+        :disabled="loading"
+        @click.prevent="submit"
+        >Submit</button
+      >
+    </form>
+
+    <p
+      v-if="loading"
+      class="ffun-info-attention"
+      >Loading...</p
+    >
+
+    <p
+      v-if="loaded"
+      class="ffun-info-good"
+      >Feeds added!</p
+    >
+
+    <p
+      v-if="error"
+      class="ffun-info-bad"
+      >Error occurred! Maybe you chose a wrong file?</p
     >
   </div>
 </template>
@@ -24,8 +46,13 @@
 
   const opmlFile = ref<File | null>(null);
 
+  const loading = ref(false);
+  const loaded = ref(false);
+  const error = ref(false);
+
   function uploadFile(event: Event) {
     opmlFile.value = (event.target as HTMLInputElement).files?.[0] ?? null;
+    loaded.value = false;
   }
 
   async function submit() {
@@ -33,6 +60,10 @@
       return;
     }
 
+    loading.value = true;
+    loaded.value = false;
+    error.value = false;
+
     const reader = new FileReader();
 
     reader.readAsText(opmlFile.value);
@@ -42,7 +73,18 @@
       };
     });
 
-    await api.addOPML({content: content});
+    try {
+      await api.addOPML({content: content});
+
+      loading.value = false;
+      loaded.value = true;
+      error.value = false;
+    } catch (e) {
+      console.error(e);
+      loading.value = false;
+      loaded.value = false;
+      error.value = true;
+    }
   }
 </script>
 

package/src/components/RuleConstructor.vue

@@ -11,6 +11,8 @@
       @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>
 </template>
 

package/src/components/RuleForList.vue

@@ -1,29 +1,42 @@
 <template>
-  <div
-    v-if="rule !== null"
-    class="flex mb-1">
-    <div class="flex-shrink-0 min-w-fit mr-2">
-      <a
-        href="#"
-        class="ffun-normal-link"
-        @click.prevent="deleteRule()">
-        remove
-      </a>
-    </div>
+  <div>
+    <div
+      v-if="rule !== null"
+      class="flex mb-1">
+      <div class="flex-shrink-0 min-w-fit mr-2">
+        <a
+          href="#"
+          class="ffun-normal-link"
+          @click.prevent="deleteRule()">
+          remove
+        </a>
+      </div>
+
+      <score-selector
+        class="flex-shrink-0 mr-2"
+        :modelValue="rule.score"
+        @input="updateSelected" />
 
-    <rule-score-updater
-      class="flex-shrink-0 mr-2"
-      :score="rule.score"
-      :rule-id="rule.id"
-      :tags="rule.tags" />
-
-    <div class="flex-grow">
-      <template
-        v-for="tag of rule.tags"
-        :key="tag">
-        <ffun-tag :uid="tag" />&nbsp;
-      </template>
+      <div class="flex-grow">
+        <template
+          v-for="tag of rule.tags"
+          :key="tag">
+          <ffun-tag :uid="tag" />&nbsp;
+        </template>
+      </div>
     </div>
+
+    <p
+      v-if="scoreChanged"
+      class="ffun-info-good">
+      Score updated
+      <a
+        href="#"
+        class="ffun-form-button"
+        @click.prevent="scoreChanged = false"
+        >close</a
+      >
+    </p>
   </div>
 </template>
 
@@ -40,8 +53,25 @@
 
   const properties = defineProps<{rule: t.Rule}>();
 
+  const scoreChanged = ref(false);
+
   async function deleteRule() {
     await api.deleteRule({id: properties.rule.id});
     globalSettings.updateDataVersion();
   }
+
+  async function updateSelected(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newScore = Number(target.value);
+
+    await api.updateRule({
+      id: properties.rule.id,
+      score: newScore,
+      tags: properties.rule.tags
+    });
+
+    scoreChanged.value = true;
+
+    globalSettings.updateDataVersion();
+  }
 </script>

package/src/inputs/Marker.vue

@@ -61,6 +61,6 @@
   }
 
   .unmarked {
-    @apply text-purple-700 font-bold no-underline;
+    @apply text-orange-700 font-bold no-underline;
   }
 </style>

package/src/layouts/SidePanelLayout.vue

@@ -62,7 +62,7 @@
               :key="mode">
               <a
                 v-if="globalSettings.mainPanelMode !== mode"
-                :href="mode"
+                :href="router.resolve({name: mode, params: {}}).href"
                 class="ffun-header-link"
                 @click.prevent="router.push({name: mode, params: {}})">
                 {{ props.text }}

package/src/logic/enums.ts

@@ -58,15 +58,20 @@ export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, {text: str
 export enum EntriesOrder {
   Score = "score",
   ScoreToZero = "score-to-zero",
+  ScoreBackward = "score-to-",
   Published = "published",
   Cataloged = "cataloged"
 }
 
-export const EntriesOrderProperties = new Map<EntriesOrder, {text: string; orderField: string; timeField: string}>([
-  [EntriesOrder.Score, {text: "score", orderField: "score", timeField: "catalogedAt"}],
-  [EntriesOrder.ScoreToZero, {text: "score ~ 0", orderField: "scoreToZero", timeField: "catalogedAt"}],
-  [EntriesOrder.Published, {text: "published", orderField: "publishedAt", timeField: "publishedAt"}],
-  [EntriesOrder.Cataloged, {text: "cataloged", orderField: "catalogedAt", timeField: "catalogedAt"}]
+export const EntriesOrderProperties = new Map<
+  EntriesOrder,
+  {text: string; orderField: string; timeField: string; direction: number}
+>([
+  [EntriesOrder.Score, {text: "score", orderField: "score", timeField: "catalogedAt", direction: 1}],
+  [EntriesOrder.ScoreToZero, {text: "score ~ 0", orderField: "scoreToZero", timeField: "catalogedAt", direction: 1}],
+  [EntriesOrder.ScoreBackward, {text: "score backward", orderField: "score", timeField: "catalogedAt", direction: -1}],
+  [EntriesOrder.Published, {text: "published", orderField: "publishedAt", timeField: "publishedAt", direction: 1}],
+  [EntriesOrder.Cataloged, {text: "cataloged", orderField: "catalogedAt", timeField: "catalogedAt", direction: 1}]
 ]);
 
 export enum Marker {

package/src/main.ts

@@ -14,7 +14,6 @@ import ConfigSelector from "./components/ConfigSelector.vue";
 import ConfigFlag from "./components/ConfigFlag.vue";
 import EntryForList from "./components/EntryForList.vue";
 import RuleConstructor from "./components/RuleConstructor.vue";
-import RuleScoreUpdater from "./components/RuleScoreUpdater.vue";
 import TagsFilter from "./components/TagsFilter.vue";
 import DiscoveryForm from "./components/DiscoveryForm.vue";
 import FeedInfo from "./components/FeedInfo.vue";
@@ -29,6 +28,7 @@ import OpenaiTokensUsage from "./components/OpenaiTokensUsage.vue";
 import FaviconElement from "./components/FaviconElement.vue";
 import NotificationCollections from "./components/NotificationCollections.vue";
 import NotificationOpenaiApiKey from "./components/NotificationOpenaiApiKey.vue";
+import NotificationCreateRuleHelp from "./components/NotificationCreateRuleHelp.vue";
 import Notifications from "./components/Notifications.vue";
 import RuleForList from "./components/RuleForList.vue";
 import UserSettingForNotification from "./components/UserSettingForNotification.vue";
@@ -58,7 +58,6 @@ app.component("ConfigSelector", ConfigSelector);
 app.component("ConfigFlag", ConfigFlag);
 app.component("EntryForList", EntryForList);
 app.component("RuleConstructor", RuleConstructor);
-app.component("RuleScoreUpdater", RuleScoreUpdater);
 app.component("TagsFilter", TagsFilter);
 app.component("DiscoveryForm", DiscoveryForm);
 app.component("FeedInfo", FeedInfo);
@@ -73,6 +72,7 @@ app.component("OpenaiTokensUsage", OpenaiTokensUsage);
 app.component("FaviconElement", FaviconElement);
 app.component("NotificationCollections", NotificationCollections);
 app.component("NotificationOpenaiApiKey", NotificationOpenaiApiKey);
+app.component("NotificationCreateRuleHelp", NotificationCreateRuleHelp);
 app.component("Notifications", Notifications);
 app.component("RuleForList", RuleForList);
 app.component("UserSettingForNotification", UserSettingForNotification);

package/src/views/NewsView.vue

@@ -47,6 +47,7 @@
 
     <notifications
       v-if="entriesStore.loadedEntriesReport !== null"
+      :create-rule-help="hasEntries && !hasRules"
       :openai-api-key="true"
       :collections="!hasEntries" />
 
@@ -128,11 +129,11 @@
       }
 
       if (valueA < valueB) {
-        return 1;
+        return orderProperties.direction;
       }
 
       if (valueA > valueB) {
-        return -1;
+        return -orderProperties.direction;
       }
 
       return 0;
@@ -167,6 +168,21 @@
     return entriesNumber.value > 0;
   });
 
+  const hasRules = computed(() => {
+    if (!hasEntries.value) {
+      return false;
+    }
+
+    // TODO: is is heuristics (score could be 0 even with rules)
+    //       must be refactored to something more stable
+    for (const entryId of entriesReport.value) {
+      if (entriesStore.entries[entryId].score != 0) {
+        return true;
+      }
+    }
+    return false;
+  });
+
   const timeField = computed(() => {
     const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
 

package/src/components/RuleScoreUpdater.vue

@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <score-selector
-      :modelValue="currentScore"
-      @input="updateSelected" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import {computed, ref} from "vue";
-  import * as api from "@/logic/api";
-  import type * as t from "@/logic/types";
-
-  const properties = defineProps<{
-    score: number;
-    ruleId: t.RuleId;
-    tags: string[];
-  }>();
-
-  const currentScore = ref(properties.score);
-
-  async function updateSelected(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const newScore = Number(target.value);
-    await api.updateRule({
-      id: properties.ruleId,
-      score: newScore,
-      tags: properties.tags
-    });
-  }
-</script>
-
-<style scoped></style>