feeds-fun 1.11.0 → 1.12.0

package/src/views/CollectionsView.vue

@@ -2,9 +2,20 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Collections </template>
 
-    <p> Try to subscribe for the feeds collections that we are preparing for you! </p>
+    <div class="ffun-info-attention">
+      <p
+        >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>
+    </div>
 
-    <feeds-collections />
+    <div
+      v-for="collectionId in collections.collectionsOrder"
+      :key="collectionId"
+      class="collection-block pb-4">
+      <collections-detailed-item :collectionId="collectionId" />
+    </div>
   </side-panel-layout>
 </template>
 
@@ -15,11 +26,17 @@
   import * as t from "@/logic/types";
   import * as e from "@/logic/enums";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
-  import {useEntriesStore} from "@/stores/entries";
+  import {useCollectionsStore} from "@/stores/collections";
 
   const globalSettings = useGlobalSettingsStore();
 
+  const collections = useCollectionsStore();
+
   globalSettings.mainPanelMode = e.MainPanelMode.Collections;
 </script>
 
-<style></style>
+<style scoped>
+  .collection-block:not(:last-child) {
+    border-bottom-width: 1px;
+  }
+</style>

package/src/views/DiscoveryView.vue

@@ -2,6 +2,12 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Discovery </template>
 
+    <notifications
+      :create-rule-help="false"
+      :api-key="false"
+      :collections-notification_="false"
+      :collections-warning_="true" />
+
     <h2>Lood feeds from an OPML file</h2>
 
     <opml-upload />

package/src/views/FeedsView.vue

@@ -32,8 +32,10 @@
 
     <notifications
       v-if="sortedFeeds !== null"
-      :openai-api-key="false"
-      :collections="sortedFeeds === null || sortedFeeds.length == 0" />
+      :create-rule-help="false"
+      :api-key="false"
+      :collections-notification_="sortedFeeds === null || sortedFeeds.length == 0"
+      :collections-warning_="true" />
 
     <feeds-list
       v-if="sortedFeeds"
@@ -48,26 +50,23 @@
   import {computed, ref, onUnmounted, watch} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useFeedsStore} from "@/stores/feeds";
   import * as api from "@/logic/api";
   import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
 
   const globalSettings = useGlobalSettingsStore();
 
-  globalSettings.mainPanelMode = e.MainPanelMode.Feeds;
+  const feedsStore = useFeedsStore();
 
-  const feeds = computedAsync(async () => {
-    // force refresh
-    globalSettings.dataVersion;
-    return await api.getFeeds();
-  }, null);
+  globalSettings.mainPanelMode = e.MainPanelMode.Feeds;
 
   const sortedFeeds = computed(() => {
-    if (!feeds.value) {
-      return null;
-    }
+    let sorted = Object.values(feedsStore.feeds);
 
-    let sorted = feeds.value.slice();
+    if (sorted.length === 0) {
+      return [];
+    }
 
     const orderProperties = e.FeedsOrderProperties.get(globalSettings.feedsOrder);
 

package/src/views/MainView.vue

@@ -18,6 +18,13 @@
         <li>Filter and sort news how you want ⇒ read only what you want.</li>
       </ul>
 
+      <h2>Curated collections of feeds</h2>
+
+      <ul class="list-disc list-inside text-left">
+        <li>We handpick the most interesting feeds into thematic collections.</li>
+        <li>Feeds in the collections are tagged for free.</li>
+      </ul>
+
       <h2>You are in control</h2>
 
       <ul class="list-disc list-inside text-left">

package/src/views/NewsView.vue

@@ -48,8 +48,9 @@
     <notifications
       v-if="entriesStore.loadedEntriesReport !== null"
       :create-rule-help="hasEntries && !hasRules"
-      :openai-api-key="true"
-      :collections="!hasEntries" />
+      :api-key="true"
+      :collections-notification_="!hasEntries"
+      :collections-warning_="false" />
 
     <entries-list
       :entriesIds="entriesReport"

package/src/views/SettingsView.vue

@@ -14,47 +14,44 @@
 
     <hr />
 
-    <template v-for="(value, kind) of globalSettings.userSettings">
+    <template v-for="kind of settingsOrder">
       <user-setting :kind="kind" />
       <hr />
     </template>
 
-    <h2>OpenAI usage</h2>
+    <h3>API usage</h3>
 
-    <p>Token usage for your OpenAI key per month.</p>
+    <p>Estimated tokens cost for your API keys usage per month.</p>
 
     <ul class="list-disc list-inside">
-      <li> <strong>Used tokens</strong> — the number of tokens in processed requests. </li>
+      <li> <strong>Estimated Used USD</strong> — the estimated cost of tokens in processed requests. </li>
       <li>
-        <strong>Reserved tokens</strong> — the number of tokens reserved for requests that currently are processing or
-        were not processed correctly.
-      </li>
-      <li>
-        <strong>Total tokens</strong> — the total number of tokens used in the month. Should be not less than the
-        actual used tokens, but can be bigger because we reserve more tokens than actually use.
+        <strong>Estimated Reserved USD</strong> — the estimated cost of tokens reserved for requests that currently are
+        processing or were not processed correctly.
       </li>
+      <li> <strong>Estimated Total USD</strong> — the estimated total cost of tokens used in the month. </li>
     </ul>
 
-    <p v-if="openAIUsage == null">Loading...</p>
+    <p v-if="tokensCostData == null">Loading...</p>
 
     <table
       v-else
       class="border border-gray-300 rounded-lg">
       <thead class="bg-slate-200">
         <tr>
-          <th class="p-2">Period</th>
-          <th class="p-2">Used tokens</th>
-          <th class="p-2">Reserved tokens</th>
-          <th class="p-2">Total tokens</th>
-          <th class="p-2">% from current maximum</th>
+          <th class="w-32">Period</th>
+          <th class="w-48">Estimated Used USD </th>
+          <th class="w-48">Estimated Reserved USD</th>
+          <th class="w-48">Estimated Total USD</th>
+          <th class="w-48">% From Maximum</th>
         </tr>
       </thead>
       <tbody>
-        <openai-tokens-usage
+        <tokens-cost
           :usage="usage"
-          v-for="usage of openAIUsage" />
+          v-for="usage of tokensCostData" />
 
-        <tr v-if="openAIUsage.length == 0">
+        <tr v-if="tokensCostData.length == 0">
           <td class="text-center">—</td>
           <td class="text-center">—</td>
           <td class="text-center">—</td>
@@ -78,8 +75,8 @@
 
   globalSettings.mainPanelMode = e.MainPanelMode.Settings;
 
-  const openAIUsage = computedAsync(async () => {
-    return await api.getResourceHistory({kind: "openai_tokens"});
+  const tokensCostData = computedAsync(async () => {
+    return await api.getResourceHistory({kind: "tokens_cost"});
   }, null);
 
   const userId = computed(() => {
@@ -89,6 +86,17 @@
 
     return globalSettings.info.userId;
   });
+
+  // TODO: refactor, this is the temporary code to display settings in the right order
+  const settingsOrder = [
+    "openai_api_key",
+    "gemini_api_key",
+    "max_tokens_cost_in_month",
+    "process_entries_not_older_than",
+    "hide_message_about_setting_up_key",
+    "hide_message_about_adding_collections",
+    "hide_message_check_your_feed_urls"
+  ];
 </script>
 
 <style></style>

package/src/components/FeedsCollections.vue

@@ -1,102 +0,0 @@
-<template>
-  <div>
-    <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>
-
-<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";
-
-  const loading = ref(false);
-  const loaded = ref(false);
-  const error = ref(false);
-
-  const selectedCollections = ref<t.FeedsCollectionId[]>([]);
-
-  const globalSettings = useGlobalSettingsStore();
-
-  const collections = computedAsync(async () => {
-    const collections = await api.getFeedsCollections();
-
-    for (const collectionId of collections) {
-      selectedCollections.value.push(collectionId);
-    }
-
-    return collections;
-  });
-
-  async function subscribe() {
-    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>
-
-<style scoped></style>

package/src/components/NotificationCollections.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="ffun-info-attention">
-    <p>It looks like you have no news to read.</p>
-    <p> Try to subscribe for the feeds collections that we are preparing for you! </p>
-    <feeds-collections />
-  </div>
-</template>

package/src/components/NotificationOpenaiApiKey.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="ffun-info-attention">
-    <p>
-      Because, for now, our service is free to use and OpenAI API costs money, we politely ask you to set up your own
-      OpenAI API key.
-    </p>
-    <p>
-      You can do this on the
-      <a
-        href="#"
-        @click.prevent="router.push({name: e.MainPanelMode.Settings, params: {}})"
-        >settings</a
-      >
-      page.
-    </p>
-
-    <user-setting-for-notification
-      kind="openai_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();
-</script>

package/src/components/Notifications.vue

@@ -1,43 +0,0 @@
-<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>
-  import {computed, ref, onUnmounted, watch} from "vue";
-  import {useGlobalSettingsStore} from "@/stores/globalSettings";
-
-  const properties = defineProps<{
-    openaiApiKey: boolean;
-    collections: boolean;
-    createRuleHelp: boolean;
-  }>();
-
-  const globalSettings = useGlobalSettingsStore();
-
-  const showApiKeyMessage = computed(() => {
-    return (
-      globalSettings.userSettings &&
-      !globalSettings.userSettings.openai_api_key.value &&
-      !globalSettings.userSettings.openai_hide_message_about_setting_up_key.value
-    );
-  });
-
-  const showCollectionsNotification = computed(() => {
-    return properties.collections;
-  });
-
-  const showCreateRuleHelpNotification = computed(() => {
-    return !showCollectionsNotification.value && properties.createRuleHelp;
-  });
-
-  const showOpenAIKeyNotification = computed(() => {
-    return (
-      !showCollectionsNotification.value &&
-      !showCreateRuleHelpNotification.value &&
-      properties.openaiApiKey &&
-      showApiKeyMessage.value
-    );
-  });
-</script>