feeds-fun 1.16.5 → 1.17.0

package/src/values/{URL.vue → ExternalUrl.vue}

@@ -1,24 +1,25 @@
 <template>
   <a
-    :href="value"
+    :href="url"
     target="_blank"
-    rel="noopener noreferrer"
-    >{{ renderedText }}</a
-  >
+    rel="noopener noreferrer">
+    {{ renderedText }}
+    <i class="ti ti-external-link" />
+  </a>
 </template>
 
 <script lang="ts" setup>
   import {computed} from "vue";
   import type * as t from "@/logic/types";
 
-  const properties = defineProps<{value: t.URL; text?: string | null}>();
+  const properties = defineProps<{url: t.URL; text?: string | null}>();
 
   const renderedText = computed(() => {
     if (properties.text) {
       return properties.text;
     }
 
-    return properties.value;
+    return properties.url;
   });
 </script>
 

package/src/views/CollectionsView.vue

@@ -2,12 +2,9 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Collections </template>
 
-    <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 class="ffun-info-common">
+      <p>We've prepared thematic collections just for you.</p>
+      <p>News from collections are always tagged, ensuring you get the full power of Feeds Fun!</p>
     </div>
 
     <div

package/src/views/DiscoveryView.vue

@@ -8,27 +8,25 @@
       :collections-notification_="false"
       :collections-warning_="true" />
 
-    <h2>Load feeds from an OPML file</h2>
+    <h3>Load feeds from an OPML file</h3>
 
-    <div class="ffun-info-good">
+    <div class="ffun-info-common">
       <p>
-        <a
-          href="https://en.wikipedia.org/wiki/OPML"
-          target="_blank"
-          >OPML</a
-        >
+        <external-url
+          url="https://en.wikipedia.org/wiki/OPML"
+          text="OPML" />
         is a widely-used format for transferring news feed lists between platforms.
       </p>
 
       <p
-        >Export your feeds from your old reader in OPML format and import them into our reader to seamlessly
-        transition!</p
+        >Export your feeds from your old reader in OPML format and import them into Feeds Fun to seamlessly
+        transition.</p
       >
     </div>
 
-    <opml-upload />
+    <opml-upload class="mt-4" />
 
-    <h2>Search for a feed</h2>
+    <h3>Search for a feed</h3>
 
     <discovery-form />
   </side-panel-layout>

package/src/views/FeedsView.vue

@@ -1,7 +1,7 @@
 <template>
   <side-panel-layout>
     <template #side-menu-item-1>
-      Show descriptions:
+      Show descriptions
       <config-flag
         style="min-width: 2.5rem"
         v-model:flag="globalSettings.showFeedsDescriptions"
@@ -30,6 +30,7 @@
         class="ffun-form-button p-1 my-1 block w-full text-center"
         href="/api/get-opml"
         target="_blank"
+        title="Download OPML file with all your feeds"
         >Download OPML</a
       >
     </template>
@@ -44,7 +45,7 @@
       :create-rule-help="false"
       :api-key="false"
       :collections-notification_="sortedFeeds === null || sortedFeeds.length == 0"
-      :collections-warning_="true" />
+      :collections-warning_="false" />
 
     <feeds-list
       v-if="sortedFeeds"

package/src/views/MainView.vue

@@ -1,57 +1,202 @@
 <template>
   <wide-layout>
-    <template #header>
-      Feeds Fun
-      <small class="block text-lg font-normal">Personalized news for professionals</small>
-    </template>
+    <div class="ffun-page-header">
+      <div class="ffun-page-header-center-block">
+        <page-header-external-links :show-api="false" />
+      </div>
+    </div>
+
+    <hr />
+
+    <main-block>
+      <h1 class="m-0 text-5xl">Feeds Fun</h1>
+      <p class="mt-2 text-2xl">Transparent Personalized News</p>
+    </main-block>
+
+    <main-header-line>
+      <!-- TODO: uncomment this claim after we have some statistics on long-term users -->
+      <!-- Save over <strong class="text-green-700">80%</strong> of news-browsing time by focusing on what truly matters to you -->
+      Save news-browsing time by focusing on what truly matters
+    </main-header-line>
 
-    <div class="max-w-lg mx-auto">
-      <div class="ffun-info-good">
+    <main-block>
+      <div class="max-w-xl md:mx-auto ffun-info-good text-center mx-2">
         <supertokens-login />
       </div>
+    </main-block>
 
-      <h2>News reader with tags</h2>
-
-      <ul class="list-disc list-inside text-left">
-        <li>Reader automatically assigns tags to news.</li>
-        <li>You create rules to score news by tags.</li>
-        <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">
-        <li
-          ><a
-            class="ffun-normal-link"
-            :href="settings.githubRepo"
-            target="_blank"
-            >Open source</a
-          >, self-hosted.</li
-        >
-        <li>No black box recommendation algorithms.</li>
-        <li>No "smart" reordering.</li>
-        <li>No ads.</li>
-        <li>No selling of your data.</li>
-      </ul>
-
-      <h2>How it looks like</h2>
-    </div>
+    <main-header-line> Smarter way to read news </main-header-line>
+
+    <main-block>
+      <main-description icon="ti-number-1">
+        <template #caption> Subscribe to sites </template>
+
+        <template #description>
+          <p class="text-lg font-medium">Give us the site URL and we do the rest.</p>
+        </template>
+      </main-description>
+
+      <main-description icon="ti-number-2">
+        <template #caption> Get automatic tagging </template>
+
+        <template #description>
+          <div>
+            <main-news-title
+              class=""
+              title="UFO crashes in Central Park"
+              :score="null" />
+
+            <fake-tag
+              uid="ufo"
+              name="ufo"
+              :link="null"
+              css-modifier="positive" />
+
+            <fake-tag
+              uid="news-dot-fake"
+              name="news.fake"
+              link="http://example.com"
+              css-modifier="negative" />
+
+            <fake-tag
+              uid="new-york"
+              name="new-york"
+              :link="null"
+              css-modifier="positive" />
+
+            <fake-tag
+              uid="space-exploration"
+              name="space-exploration"
+              :link="null"
+              css-modifier="positive" />
+          </div>
+        </template>
+      </main-description>
+
+      <main-description icon="ti-number-3">
+        <template #caption> Create scoring rules </template>
+
+        <template #description>
+          <div class="grid grid-cols-2 justify-items-start">
+            <div class="">
+              <fake-tag
+                uid="sci-fi"
+                name="sci-fi"
+                :link="null"
+                css-modifier="positive" />
+
+              <i class="ti ti-arrow-right"></i>
+
+              <span class="cursor-default text-purple-700 text-lg md:text-xl">+5</span>
+            </div>
+
+            <div class="">
+              <fake-tag
+                uid="news-dot-fake"
+                name="news.fake"
+                link="http://example.com"
+                css-modifier="negative" />
+
+              <i class="ti ti-arrow-right"></i>
 
-    <img
-      class="border-2 rounded border-slate-300"
-      src="/news-filtering-example.png"
-      alt="News filtering example" />
+              <span class="cursor-default text-purple-700 text-lg md:text-xl">-55</span>
+            </div>
+
+            <div class="">
+              <fake-tag
+                uid="ufo"
+                name="ufo"
+                :link="null"
+                css-modifier="positive" />
+
+              <i class="ti ti-plus"></i>
+
+              <fake-tag
+                uid="new-york"
+                name="new-york"
+                :link="null"
+                css-modifier="positive" />
+
+              <i class="ti ti-arrow-right"></i>
+
+              <span class="cursor-default-purple-700 text-lg md:text-xl">+8</span>
+            </div>
+
+            <div class="">
+              <fake-tag
+                uid="space-exploration"
+                name="space-exploration"
+                :link="null"
+                css-modifier="positive" />
+
+              <i class="ti ti-arrow-right"></i>
+
+              <span class="cursor-default text-purple-700 text-lg md:text-xl">+21</span>
+            </div>
+          </div>
+        </template>
+      </main-description>
+
+      <main-description icon="ti-number-4">
+        <template #caption> Read what matters </template>
+
+        <template #description>
+          <div class="justify-items-start">
+            <main-news-title
+              title="New mission on Mars"
+              :score="21" />
+
+            <main-news-title
+              class="opacity-75"
+              title="Sci-fi novel about UFO in New Yourk"
+              :score="13" />
+
+            <i class="opacity-65 block ti ti-dots justify-self-center"></i>
+
+            <main-news-title
+              class="opacity-55"
+              title="UFO crashes in Central Park"
+              :score="-26" />
+          </div>
+        </template>
+      </main-description>
+    </main-block>
+
+    <main-header-line> Curated news collections <br class="md:hidden" />for easy start </main-header-line>
+
+    <main-block>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <template
+          v-for="collectionId in collections.collectionsOrder"
+          :key="collectionId">
+          <main-item
+            v-if="collections.collections[collectionId].showOnMain"
+            icon="ti-arrow-narrow-right">
+            <template #caption>
+              {{ collections.collections[collectionId].name }}
+            </template>
+
+            <template #description>
+              {{ collections.collections[collectionId].description }}
+            </template>
+          </main-item>
+        </template>
+      </div>
+    </main-block>
+
+    <main-header-line> Here, take a peek </main-header-line>
+    <div class="text-center p-5">
+      <img
+        class="border-2 rounded border-slate-300 mx-auto"
+        src="/news-filtering-example.png"
+        alt="News filtering example" />
+    </div>
   </wide-layout>
 </template>
 
 <script lang="ts" setup>
   import * as settings from "@/logic/settings";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const collections = useCollectionsStore();
 </script>

package/src/views/NewsView.vue

@@ -35,7 +35,8 @@
     <template #side-footer>
       <tags-filter
         :tags="tagsCount"
-        :show-create-rule="true" />
+        :show-create-rule="true"
+        change-source="news_tags_filter" />
     </template>
 
     <template #main-header>

package/src/views/RulesView.vue

@@ -13,10 +13,13 @@
     </template>
 
     <template #side-footer>
-      <tags-filter :tags="tagsCount" />
+      <tags-filter
+        :tags="tagsCount"
+        :show-create-rule="false"
+        change-source="rules_tags_filter" />
     </template>
 
-    <div class="ffun-info-good">
+    <div class="ffun-info-common mb-2">
       <p
         >You can create new rules on the
         <a
@@ -93,7 +96,7 @@
 
     let sorted = rules.value.slice();
 
-    sorted = tagsStates.value.filterByTags(sorted, (rule) => rule.requiredTags.concat(rule.excludedTags));
+    sorted = tagsStates.value.filterByTags(sorted, (rule) => rule.allTags);
 
     const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder);
 

package/src/views/SettingsView.vue

@@ -2,35 +2,91 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Settings </template>
 
-    <ul>
-      <li>
-        <strong class="mr-1">User id</strong>
-        <input
-          class="ffun-input w-72"
-          disabled
-          :value="userId" />
-      </li>
-    </ul>
-
-    <hr />
-
-    <template v-for="kind of settingsOrder">
-      <user-setting :kind="kind" />
-      <hr />
-    </template>
+    <h3>General</h3>
+
+    <label class="mr-1">User id</label>
+    <input
+      class="ffun-input w-72 cursor-pointer"
+      disabled
+      :value="userId" />
+
+    <h3>Messages</h3>
+
+    <user-setting
+      v-for="kind of messagesSettings"
+      key="kind"
+      :kind="kind" />
+
+    <h3>Tagging</h3>
+
+    <div class="ffun-info-common">
+      <p>
+        All feeds from
+        <a
+          href="#"
+          @click.prevent="goToCollections()"
+          >collections</a
+        >
+        are tagged for free.
+      </p>
+
+      <p>
+        If you want to tag your own feeds, we kindly ask you to provide an
+        <external-url
+          url="https://platform.openai.com/docs/api-reference/introduction"
+          text="OpenAI" />
+        or
+        <external-url
+          url="https://ai.google.dev/gemini-api/docs/api-key"
+          text="Gemini" />
+        API key.
+      </p>
+
+      <p><strong>Here is how we use your API key:</strong></p>
+
+      <ul>
+        <li>We use your key only for your feeds that are not part of predefined collections.</li>
+        <li>We stop using your key when its usage exceeds the monthly limit you set.</li>
+        <li
+          >If a feed has multiple subscribers with API keys, we'll use a key with the lowest usage in the current
+          month.</li
+        >
+        <li>We do not process old news until you tell us to.</li>
+      </ul>
+
+      <p><strong>The more users set up an API key, the cheaper Feeds Fun becomes for everyone.</strong></p>
+
+      <p>API key usage statistics are available on this page.</p>
+    </div>
+
+    <user-setting
+      kind="openai_api_key"
+      class="mt-4" />
+    <user-setting kind="gemini_api_key" />
+    <user-setting kind="max_tokens_cost_in_month" />
+
+    <user-setting kind="process_entries_not_older_than" />
+
+    <div class="ffun-info-common mb-4">
+      <p>
+        The age of a news item is calculated based on the time it was published (according to the data in the feed).
+      </p>
+    </div>
 
     <h3>API usage</h3>
 
-    <p>Estimated tokens cost for your API keys usage per month.</p>
+    <div class="ffun-info-common mb-4">
+      <p>Estimated tokens cost for your API keys usage per month.</p>
 
-    <ul class="list-disc list-inside">
-      <li> <strong>Estimated Used USD</strong> — the estimated cost of tokens in processed requests. </li>
-      <li>
-        <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>
+      <ul class="list-disc list-inside">
+        <li> <strong>Estimated Used USD</strong> — the estimated cost of tokens in processed requests. </li>
+        <li>
+          <strong>Estimated Reserved USD</strong> — the estimated cost of tokens reserved for requests that are
+          currently 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>
+    </div>
 
     <p v-if="tokensCostData == null">Loading...</p>
 
@@ -69,6 +125,7 @@
   import * as api from "@/logic/api";
   import * as t from "@/logic/types";
   import * as e from "@/logic/enums";
+  import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
 
   const globalSettings = useGlobalSettingsStore();
@@ -87,16 +144,18 @@
     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",
+  const messagesSettings = [
     "hide_message_about_setting_up_key",
     "hide_message_about_adding_collections",
     "hide_message_check_your_feed_urls"
   ];
-</script>
 
-<style></style>
+  const router = useRouter();
+
+  function goToCollections() {
+    router.push({name: e.MainPanelMode.Collections, params: {}});
+  }
+
+  // TODO: check api keys on setup
+  // TODO: basic integer checks
+</script>

package/src/components/FfunTag.vue

@@ -1,122 +0,0 @@
-<template>
-  <div class="inline-block">
-    <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, 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;
-    secondaryMode?: string | null;
-    showSwitch?: boolean | null;
-  }>();
-
-  const tagInfo = computed(() => {
-    const tagInfo = tagsStore.tags[properties.uid];
-
-    if (tagInfo) {
-      return tagInfo;
-    }
-
-    tagsStore.requestTagInfo({tagUid: properties.uid});
-
-    return t.noInfoTag(properties.uid);
-  });
-
-  const classes = computed(() => {
-    const result: {[key: string]: boolean} = {
-      tag: 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() {
-    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 this tag: ${properties.count}`;
-    }
-    return "";
-  });
-</script>
-
-<style scoped>
-  .tag {
-    @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 font-bold;
-  }
-
-  .tag.excluded {
-    @apply text-red-700 font-bold;
-  }
-
-  .tag.positive {
-    @apply text-green-700;
-  }
-
-  .tag.negative {
-    @apply text-red-700;
-  }
-</style>