feeds-fun 1.16.6 → 1.17.1

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,204 @@
 <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 v-if="collections.collectionsOrder.length > 0">
+      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/inputs/Marker.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <template v-if="hasMarker">
-      <a
-        href="#"
-        @click.prevent="unmark()">
-        <slot name="marked" />
-      </a>
-    </template>
-
-    <template v-else>
-      <a
-        href="#"
-        @click.prevent="mark()">
-        <slot name="unmarked" />
-      </a>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import {computed, ref} from "vue";
-  import * as api from "@/logic/api";
-  import * as e from "@/logic/enums";
-  import type * as t from "@/logic/types";
-  import {useEntriesStore} from "@/stores/entries";
-
-  const entriesStore = useEntriesStore();
-
-  const properties = defineProps<{
-    marker: e.Marker;
-    entryId: t.EntryId;
-  }>();
-
-  const hasMarker = computed(() => {
-    return entriesStore.entries[properties.entryId].hasMarker(properties.marker);
-  });
-
-  async function mark() {
-    await entriesStore.setMarker({
-      entryId: properties.entryId,
-      marker: properties.marker
-    });
-  }
-
-  async function unmark() {
-    await entriesStore.removeMarker({
-      entryId: properties.entryId,
-      marker: properties.marker
-    });
-  }
-</script>
-
-<style scoped></style>