feeds-fun 1.11.1 → 1.12.0

package/package.json

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

@@ -59,6 +59,9 @@
   import * as api from "@/logic/api";
   import {computedAsync} from "@vueuse/core";
   import {useEntriesStore} from "@/stores/entries";
+  import {useFeedsStore} from "@/stores/feeds";
+
+  const feedsStore = useFeedsStore();
 
   const search = ref("");
 
@@ -91,10 +94,10 @@
     return feeds;
   }, null);
 
-  async function addFeed(url: string) {
+  async function addFeed(url: t.URL) {
     adding.value = true;
 
-    await api.addFeed({url: url});
+    await feedsStore.subscribe(url);
 
     addedFeeds.value[url] = true;
 

package/src/components/FeedForList.vue

@@ -6,7 +6,7 @@
       <a
         href="#"
         class="ffun-normal-link"
-        @click.prevent="unsubscribe()">
+        @click.prevent="feedsStore.unsubscribe(feed.id)">
         remove
       </a>
     </div>
@@ -53,9 +53,22 @@
         class="ffun-normal-link"
         :value="feed.url"
         :text="purifiedTitle" />
+
+      <template v-if="feed.collectionIds.length > 0">
+        <span v-for="(collectionId, index) in feed.collectionIds">
+          <template v-if="collectionId in collections.collections">
+            <br />
+            Collections:
+            <span class="text-green-700 font-bold">{{ collections.collections[collectionId].name }}</span
+            ><span v-if="index < feed.collectionIds.length - 1">, </span>
+          </template>
+        </span>
+      </template>
       <template v-if="globalSettings.showFeedsDescriptions">
         <br />
-        <div v-html="purifiedDescription" />
+        <div class="max-w-3xl flex-1 bg-slate-50 border-2 rounded p-4">
+          <div v-html="purifiedDescription" />
+        </div>
       </template>
     </div>
   </div>
@@ -69,8 +82,12 @@
   import {computedAsync} from "@vueuse/core";
   import DOMPurify from "dompurify";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useFeedsStore} from "@/stores/feeds";
+  import {useCollectionsStore} from "@/stores/collections";
 
   const globalSettings = useGlobalSettingsStore();
+  const feedsStore = useFeedsStore();
+  const collections = useCollectionsStore();
 
   const properties = defineProps<{feed: t.Feed}>();
 
@@ -94,9 +111,4 @@
     }
     return DOMPurify.sanitize(properties.feed.description);
   });
-
-  async function unsubscribe() {
-    await api.unsubscribe({feedId: properties.feed.id});
-    globalSettings.updateDataVersion();
-  }
 </script>

package/src/components/{OpenaiTokensUsage.vue → TokensCost.vue}

@@ -1,9 +1,9 @@
 <template>
   <tr>
     <td>{{ period }}</td>
-    <td style="text-align: right">{{ usage.used }}</td>
-    <td style="text-align: right">{{ usage.reserved }}</td>
-    <td style="text-align: right">{{ usage.total() }}</td>
+    <td style="text-align: right">{{ cost_used }}</td>
+    <td style="text-align: right">{{ cost_reserved }}</td>
+    <td style="text-align: right">{{ cost_total }}</td>
     <td style="text-align: right">{{ percents }}%</td>
   </tr>
 </template>
@@ -24,20 +24,18 @@
 
   globalSettings.mainPanelMode = e.MainPanelMode.Settings;
 
-  const openAIUsage = computedAsync(async () => {
-    return await api.getResourceHistory({kind: "openai_tokens"});
-  }, null);
-
   const period = computed(() => {
     return properties.usage.intervalStartedAt.toLocaleString("default", {month: "long", year: "numeric"});
   });
 
+  const k = 2;
+
   const percents = computed(() => {
     if (globalSettings.userSettings == null) {
       return "—";
     }
 
-    const setting = globalSettings.userSettings["openai_max_tokens_in_month"];
+    const setting = globalSettings.userSettings["max_tokens_cost_in_month"];
 
     if (!setting) {
       return "—";
@@ -54,7 +52,19 @@
       return "—";
     }
 
-    return ((total / limit) * 100).toFixed(5);
+    return ((total / limit) * 100).toFixed(k);
+  });
+
+  const cost_used = computed(() => {
+    return properties.usage.used.toFixed(k);
+  });
+
+  const cost_reserved = computed(() => {
+    return properties.usage.reserved.toFixed(k);
+  });
+
+  const cost_total = computed(() => {
+    return properties.usage.total().toFixed(k);
   });
 </script>
 

package/src/components/UserSettingForNotification.vue

@@ -2,7 +2,7 @@
   <button
     v-if="setting"
     @click.prevent="updateFlag(true)"
-    class="ffun-form-button"
+    class="ffun-normal-link"
     >{{ text }}</button
   >
 </template>

package/src/components/collections/Block.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <form @submit.prevent="subscribe">
+      <collections-block-item
+        v-for="collectionId in collections.collectionsOrder"
+        v-model="selectedCollections"
+        :collectionId="collectionId"
+        :selectedCollections="selectedCollections" />
+
+      <button
+        type="submit"
+        class="ffun-form-button"
+        >Subscribe</button
+      >
+
+      <button
+        type="button"
+        class="ffun-form-button ml-2"
+        @click.prevent="router.push({name: e.MainPanelMode.Collections, params: {}})"
+        >Explore Feeds Library
+      </button>
+
+      <user-setting-for-notification
+        class="ml-2"
+        kind="hide_message_about_adding_collections"
+        button-text="Hide this message" />
+    </form>
+
+    <collections-subscribing-progress
+      :loading="loading"
+      :loaded="loaded"
+      :error="error" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {useRouter, RouterLink, RouterView} from "vue-router";
+  import {computed, ref, watch} from "vue";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import * as api from "@/logic/api";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const router = useRouter();
+
+  const loading = ref(false);
+  const loaded = ref(false);
+  const error = ref(false);
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const collections = useCollectionsStore();
+
+  const selectedCollections = ref<t.CollectionId[]>([]);
+
+  // fill selectedCollections in case collections are already loaded
+  selectedCollections.value.push(...collections.collectionsOrder);
+
+  // fill selectedCollections in case collections are not loaded yet
+  watch(
+    () => collections.collectionsOrder,
+    (newOrder) => {
+      selectedCollections.value.push(...newOrder);
+    },
+    {once: true}
+  );
+
+  async function subscribe() {
+    loading.value = true;
+    loaded.value = false;
+    error.value = false;
+
+    try {
+      await api.subscribeToCollections({
+        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>
+
+<style scoped></style>

package/src/components/collections/BlockItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <input
+      class="ffun-checkbox align-top m-1"
+      type="checkbox"
+      :id="collection.id"
+      :name="collection.name"
+      :value="collection.id"
+      v-model="model"
+      checked />
+    <label
+      class="ml-2"
+      :for="collection.id">
+      <div class="inline-block">
+        <span class="text-green-700 font-bold">{{ collection.name }}</span> [feeds: {{ collection.feedsNumber }}]
+        <p class="">{{ collection.description }}</p>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import * as api from "@/logic/api";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const properties = defineProps<{
+    collectionId: t.CollectionId;
+    selectedCollections: t.CollectionId[];
+  }>();
+
+  const model = defineModel();
+
+  const collections = useCollectionsStore();
+
+  const collection = computed(() => collections.collections[properties.collectionId]);
+</script>
+
+<style scoped></style>

package/src/components/collections/DetailedItem.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <h3>{{ collection.name }}</h3>
+    <p class="">{{ collection.description }}</p>
+
+    <div v-if="showFeeds">
+      <div
+        v-for="feed in feeds"
+        :key="feed.url"
+        class="mb-2 pb-2 collection-feed-block">
+        <collections-feed-item :feed="feed" />
+      </div>
+    </div>
+
+    <button
+      @click.prevent="subscribe"
+      class="ffun-form-button mr-2">
+      <template v-if="collection.feedsNumber === 1"> Subscribe to 1 feed </template>
+
+      <template v-else> Subscribe to all {{ collection.feedsNumber }} feeds </template>
+    </button>
+
+    <button
+      v-if="!showFeeds"
+      @click.prevent="show"
+      class="ffun-form-button"
+      >Show feeds</button
+    >
+
+    <button
+      v-if="showFeeds"
+      @click.prevent="hide"
+      class="ffun-form-button"
+      >Hide feeds</button
+    >
+
+    <collections-subscribing-progress
+      :loading="loading"
+      :loaded="loaded"
+      :error="error" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import * as api from "@/logic/api";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const properties = defineProps<{
+    collectionId: t.CollectionId;
+  }>();
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const collections = useCollectionsStore();
+
+  const collection = computed(() => collections.collections[properties.collectionId]);
+
+  const loading = ref(false);
+  const loaded = ref(false);
+  const error = ref(false);
+  const showFeeds = ref(false);
+
+  async function subscribe() {
+    loading.value = true;
+    loaded.value = false;
+    error.value = false;
+
+    try {
+      await api.subscribeToCollections({
+        collectionsIds: [properties.collectionId]
+      });
+
+      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();
+  }
+
+  function show() {
+    showFeeds.value = true;
+  }
+
+  function hide() {
+    showFeeds.value = false;
+  }
+
+  const feeds = computedAsync(
+    async () => {
+      return await collections.getFeeds({collectionId: properties.collectionId});
+    },
+    [],
+    {lazy: true}
+  );
+</script>
+
+<style scoped>
+  .collection-feed-block:not(:last-child) {
+    border-bottom-width: 1px;
+  }
+</style>

package/src/components/collections/FeedItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex">
+    <div class="flex-shrink-0 w-16 text-right pr-1">
+      <a
+        href="#"
+        v-if="!subscribed"
+        @click.prevent.stop="feedsStore.subscribe(feed.url)"
+        class="text-blue-700"
+        >subscribe</a
+      >
+
+      <span
+        v-else
+        class="text-green-700 cursor-default"
+        >subscribed</span
+      >
+    </div>
+
+    <div class="flex-shrink-0 w-8 text-right pr-1">
+      <favicon-element
+        :url="feed.url"
+        class="w-4 h-4 align-text-bottom mx-1 inline" />
+    </div>
+
+    <div class="flex-grow">
+      <strong>{{ feed.title }}</strong>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div class="flex-shrink-0 w-16 pr-1"> </div>
+
+    <div class="max-w-3xl flex-1 bg-slate-50 border-2 rounded p-4">
+      <p>{{ feed.description }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import * as api from "@/logic/api";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useCollectionsStore} from "@/stores/collections";
+  import {useFeedsStore} from "@/stores/feeds";
+
+  const feedsStore = useFeedsStore();
+
+  const properties = defineProps<{
+    feed: t.CollectionFeedInfo;
+  }>();
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const subscribed = computed(() => properties.feed.id in feedsStore.feeds);
+</script>
+
+<style scoped></style>

package/src/components/collections/Notification.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ffun-info-attention">
+    <h3>It looks like there's nothing to read!</h3>
+    <p
+      >But don't worry — we've prepared some ready-to-use thematic collections just for you. All the feeds in them are
+      fully tagged free of charge.</p
+    >
+    <p>Subscribe to some and enjoy the full power of Feeds Fun!</p>
+    <collections-block />
+  </div>
+</template>

package/src/components/collections/SubscribingProgress.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <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>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import * as api from "@/logic/api";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const properties = defineProps<{
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+  }>();
+</script>
+
+<style scoped></style>

package/src/components/collections/Warning.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="ffun-info-attention">
+    <h3>Check your feed URLs</h3>
+
+    <p
+      >Websites like
+      <a
+        href="https://reddit.com"
+        target="_blank"
+        >Reddit</a
+      >
+      or
+      <a
+        href="https://arxiv.org"
+        target="_blank"
+        >arXiv</a
+      >
+      provide multiple feeds by:</p
+    >
+
+    <ul>
+      <li
+        >Customizing news categories lists in URL (like
+        <code class="inline-block">https://site.com/feed/rss?category1+category2</code>) instead of using separate
+        URLs.</li
+      >
+      <li
+        >Supporting different feed formats (like <code class="inline-block">https://site.com/feed/rss</code> and
+        <code class="inline-block">https://site.com/feed/atom</code>).</li
+      >
+    </ul>
+
+    <p
+      >This can lead to the same news item appearing in multiple feeds, not being recognized as news from collections,
+      and being processed with your API key. We do our best to detect such news, but there are always exceptions.</p
+    >
+
+    <p><strong>To get the most from free tagging in collections:</strong></p>
+
+    <ul>
+      <li>Use specific, granular feed URLs.</li>
+      <li
+        >Add feeds directly from
+        <a
+          class="ffun-normal-link"
+          href="#"
+          @click.prevent="goToCollections()"
+          >collections</a
+        >
+        instead of using URLs from sites.</li
+      >
+    </ul>
+
+    <user-setting-for-notification
+      class=""
+      kind="hide_message_check_your_feed_urls"
+      button-text="Hide this message" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {useRouter} from "vue-router";
+  import * as e from "@/logic/enums";
+
+  const router = useRouter();
+
+  function goToCollections() {
+    router.push({name: e.MainPanelMode.Collections, params: {}});
+  }
+</script>

package/src/components/notifications/ApiKey.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ffun-info-attention">
+    <p>
+      Please
+      <a
+        href="#"
+        @click.prevent="goToSettings()"
+        >set up</a
+      >
+      your own OpenAI and/or Gemini API keys to tag your personal feeds.
+    </p>
+
+    <p>
+      Remember, Feeds Fun provides tags for feeds from
+      <a
+        href="#"
+        @click.prevent="goToCollections()"
+        >collections</a
+      >
+      for free. You do not need to set up your own API keys to have tags in news from collections.
+    </p>
+
+    <user-setting-for-notification
+      kind="hide_message_about_setting_up_key"
+      button-text="Hide this message" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {useRouter} from "vue-router";
+  import * as e from "@/logic/enums";
+
+  const router = useRouter();
+
+  function goToCollections() {
+    router.push({name: e.MainPanelMode.Collections, params: {}});
+  }
+
+  function goToSettings() {
+    router.push({name: e.MainPanelMode.Settings, params: {}});
+  }
+</script>