feeds-fun 1.16.5 → 1.17.0

package/src/components/UserSettingForNotification.vue

@@ -1,9 +1,10 @@
 <template>
-  <button
+  <a
     v-if="setting"
+    href=""
     @click.prevent="updateFlag(true)"
-    class="ffun-normal-link"
-    >{{ text }}</button
+    class=""
+    >{{ text }}</a
   >
 </template>
 

package/src/components/body_list/EntryBody.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex my-1">
+    <div class="max-w-3xl flex-1 bg-white border rounded p-4">
+      <h2
+        v-if="url"
+        class="mt-0"
+        ><a
+          :href="url"
+          target="_blank"
+          @click="emit('body-title-clicked')"
+          >{{ title }}</a
+        ></h2
+      >
+      <p v-if="loading">loading…</p>
+      <div
+        v-if="text"
+        class="prose max-w-none"
+        v-html="text" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import _ from "lodash";
+  import {computed, ref, useTemplateRef, onMounted} from "vue";
+  import type * as t from "@/logic/types";
+  import * as events from "@/logic/events";
+  import * as e from "@/logic/enums";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const entriesStore = useEntriesStore();
+
+  const properties = defineProps<{
+    url: string | null;
+    title: string | null;
+    loading: boolean;
+    text: string | null;
+  }>();
+
+  const emit = defineEmits(["body-title-clicked"]);
+</script>

package/src/components/body_list/FaviconColumn.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex-shrink-0 w-8 text-right pr-1">
+    <favicon-element
+      :url="url"
+      class="w-5 h-5 mx-1 inline align-text-bottom" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import _ from "lodash";
+  import {computed, ref, useTemplateRef, onMounted} from "vue";
+  import type * as t from "@/logic/types";
+  import * as events from "@/logic/events";
+  import * as e from "@/logic/enums";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const entriesStore = useEntriesStore();
+
+  const properties = defineProps<{
+    url: string;
+  }>();
+</script>

package/src/components/body_list/ReverseTimeColumn.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="flex-shrink-0 w-16 cursor-default text-right"
+    :title="title">
+    <value-date-time
+      class=""
+      :value="time"
+      :reversed="true" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import _ from "lodash";
+  import {computed, ref, useTemplateRef, onMounted} from "vue";
+  import type * as t from "@/logic/types";
+  import * as events from "@/logic/events";
+  import * as e from "@/logic/enums";
+  import {computedAsync} from "@vueuse/core";
+  import DOMPurify from "dompurify";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const entriesStore = useEntriesStore();
+
+  const properties = defineProps<{
+    time: Date | null;
+    title: string;
+  }>();
+</script>

package/src/components/collections/Block.vue

@@ -9,7 +9,7 @@
 
       <button
         type="submit"
-        class="ffun-form-button"
+        class="ffun-form-button mt-4"
         >Subscribe</button
       >
 

package/src/components/collections/BlockItem.vue

@@ -9,11 +9,12 @@
       v-model="model"
       checked />
     <label
-      class="ml-2"
+      class="ml-2 inline-block"
       :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>
+        <span class="text-green-700 font-bold">{{ collection.name }}</span>
+        — {{ collection.feedsNumber }} feeds —
+        {{ collection.description }}
       </div>
     </label>
   </div>

package/src/components/collections/DetailedItem.vue

@@ -4,12 +4,12 @@
     <p class="">{{ collection.description }}</p>
 
     <div v-if="showFeeds">
-      <div
+      <ul
         v-for="feed in feeds"
         :key="feed.url"
-        class="mb-2 pb-2 collection-feed-block">
+        class="ffun-body-list-entry">
         <collections-feed-item :feed="feed" />
-      </div>
+      </ul>
     </div>
 
     <button
@@ -17,7 +17,7 @@
       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>
+      <template v-else> Subscribe to {{ collection.feedsNumber }} feeds </template>
     </button>
 
     <button
@@ -107,9 +107,3 @@
     {lazy: true}
   );
 </script>
-
-<style scoped>
-  .collection-feed-block:not(:last-child) {
-    border-bottom-width: 1px;
-  }
-</style>

package/src/components/collections/FeedItem.vue

@@ -1,39 +1,37 @@
 <template>
-  <div class="flex">
-    <div class="flex-shrink-0 w-16 text-right pr-1">
+  <div class="flex text-lg">
+    <div class="ffun-body-list-icon-column">
       <a
+        v-if="subscribed"
         href="#"
-        v-if="!subscribed"
-        @click.prevent.stop="feedsStore.subscribe(feed.url)"
-        class="text-blue-700"
-        >subscribe</a
-      >
+        @click.prevent="feedsStore.unsubscribe(feed.id)"
+        title="Unsubscribe from this feed"
+        class="text-red-500 hover:text-red-600 ti ti-x" />
 
-      <span
+      <a
         v-else
-        class="text-green-700 cursor-default"
-        >subscribed</span
-      >
+        href="#"
+        @click.prevent="feedsStore.subscribe(feed.url)"
+        title="Subscribe to this feed"
+        class="text-green-600 hover:text-green-700 ti ti-plus" />
     </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>
+    <body-list-favicon-column :url="feed.url" />
 
     <div class="flex-grow">
-      <strong>{{ feed.title }}</strong>
+      <external-url
+        class="ffun-normal-link"
+        :url="feed.url"
+        :text="purifiedTitle" />
     </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>
+  <body-list-entry-body
+    class="ml-8"
+    :url="null"
+    :title="null"
+    :loading="false"
+    :text="purifiedDescription" />
 </template>
 
 <script lang="ts" setup>
@@ -41,6 +39,7 @@
   import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
   import * as api from "@/logic/api";
+  import * as utils from "@/logic/utils";
   import {computedAsync} from "@vueuse/core";
   import DOMPurify from "dompurify";
   import {useEntriesStore} from "@/stores/entries";
@@ -57,6 +56,14 @@
   const globalSettings = useGlobalSettingsStore();
 
   const subscribed = computed(() => properties.feed.id in feedsStore.feeds);
+
+  const purifiedTitle = computed(() => {
+    return utils.purifyTitle({raw: properties.feed.title, default_: properties.feed.url});
+  });
+
+  const purifiedDescription = computed(() => {
+    return utils.purifyBody({raw: properties.feed.description, default_: "No description"});
+  });
 </script>
 
 <style scoped></style>

package/src/components/collections/Notification.vue

@@ -1,11 +1,9 @@
 <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 class="ffun-info-common">
+    <h4>Subscribe to curated collections</h4>
+    <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>
+
+    <collections-block class="mt-4" />
   </div>
 </template>

package/src/components/collections/SubscribingProgress.vue

@@ -1,22 +1,19 @@
 <template>
-  <div>
-    <p
-      v-if="loading"
-      class="ffun-info-attention"
-      >Subscribing...</p
-    >
-
-    <p
-      v-if="loaded"
-      class="ffun-info-good"
-      >Feeds added!</p
-    >
+  <div
+    v-if="loading"
+    class="ffun-info-waiting mt-4">
+    <p>Subscribing…</p>
+  </div>
 
-    <p
-      v-if="error"
-      class="ffun-info-bad"
-      >Unknown error occurred! Please, try later.</p
-    >
+  <div
+    v-if="loaded"
+    class="ffun-info-good mt-4"
+    ><p>Feeds added!</p>
+  </div>
+  <div
+    v-if="error"
+    class="ffun-info-bad mt-4"
+    ><p>Unknown error occurred! Please, try later.</p>
   </div>
 </template>
 

package/src/components/collections/Warning.vue

@@ -1,54 +1,52 @@
 <template>
-  <div class="ffun-info-attention">
-    <h3>Check your feed URLs</h3>
+  <div class="ffun-info-common">
+    <h4>Pay attention to your feed URLs</h4>
+
+    <p>
+      Some websites, like
+      <external-url
+        url="https://www.reddit.com"
+        text="Reddit" />
 
-    <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
-    >
+      <external-url
+        url="https://arxiv.org"
+        text="arXiv" />, provide multiple URLs for feeds:
+    </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
-      >
+      <li>
+        By customizing the list of categories, like
+        <code class="inline-block">https://example.org/feed/rss?category1+category2</code>.
+      </li>
+      <li>
+        By supporting different feed formats, like
+        <code class="inline-block">https://example.org/feed/rss</code> and
+        <code class="inline-block">https://example.org/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> Consequently, the same news may appear in multiple feeds. </p>
+
+    <p>
+      We do our best to detect duplicates, but in some cases, they may slip through and lead to extra usage of your API
+      key.
+    </p>
 
-    <p><strong>To get the most from free tagging in collections:</strong></p>
+    <p><strong>Please follow these recommendations:</strong></p>
 
     <ul>
-      <li>Use specific, granular feed URLs.</li>
-      <li
-        >Add feeds directly from
+      <li>Use short, granular feed URLs.</li>
+      <li>If a feed URL can be split into multiple simpler URLs, add them separately.</li>
+      <li>
+        Add feeds directly from
         <a
-          class="ffun-normal-link"
           href="#"
-          @click.prevent="goToCollections()"
-          >collections</a
+          @click.prevent="goToCollections()">
+          collections</a
         >
-        instead of using URLs from sites.</li
-      >
+        instead of using URLs from websites.
+      </li>
     </ul>
 
     <user-setting-for-notification

package/src/components/main/Block.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-center max-w-3xl mx-auto my-3 md:my-5 space-y-3 md:space-y-5">
+    <slot></slot>
+  </div>
+</template>

package/src/components/main/Description.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- PC -->
+  <div class="hidden md:flex items-stretch rounded-xl overflow-hidden min-h-28 max-h-28 mx-2">
+    <div class="w-12 bg-blue-200 flex items-center justify-center text-4xl font-bold">
+      <i :class="['ti', icon]"></i>
+    </div>
+
+    <div class="w-1/3 bg-blue-100 px-4 flex items-center text-xl font-medium">
+      <slot name="caption" />
+    </div>
+
+    <div class="flex-1 bg-slate-100 p-6 text-gray-800 flex items-center">
+      <div class="w-full">
+        <slot name="description" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div class="flex flex-col md:hidden flex items-stretch rounded-xl overflow-hidden min-h-28 max-h-28 mx-2">
+    <div class="w-full flex">
+      <div class="w-12 bg-blue-200 flex items-center justify-center text-lg font-bold">
+        <i :class="['ti', icon]"></i>
+      </div>
+
+      <div class="flex-grow bg-blue-100 px-4 flex justify-center text-lg font-medium">
+        <slot name="caption" />
+      </div>
+    </div>
+
+    <div class="flex-1 bg-slate-100 px-4 text-gray-800 flex items-center">
+      <div class="w-full">
+        <slot name="description" />
+      </div>
+    </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";
+  import * as events from "@/logic/events";
+
+  const properties = defineProps<{
+    icon: string;
+  }>();
+</script>

package/src/components/main/HeaderLine.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-slate-200 text-center p-3 md:py-5 border border-x-0 border-slate-400">
+    <p class="text-2xl md:text-3xl font-medium">
+      <slot></slot>
+    </p>
+  </div>
+</template>

package/src/components/main/Item.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col items-stretch rounded-xl overflow-hidden min-h-28 max-h-28 mx-2">
+    <div class="bg-blue-100 py-1 items-center text-xl font-medium">
+      <slot name="caption" />
+    </div>
+
+    <div class="flex-1 bg-slate-100 p-2 text-gray-800 flex items-center">
+      <div class="">
+        <slot name="description" />
+      </div>
+    </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";
+  import * as events from "@/logic/events";
+
+  const properties = defineProps<{
+    icon: string;
+  }>();
+</script>

package/src/components/main/NewsTitle.vue

@@ -0,0 +1,26 @@
+<template>
+  <span class="block text-base md:text-lg">
+    <span
+      v-if="score"
+      class="cursor-pointer text-purple-700 inline-block w-12"
+      >{{ score }}</span
+    >
+
+    <span class="font-bold">{{ title }}</span>
+  </span>
+</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";
+  import * as events from "@/logic/events";
+
+  const properties = defineProps<{
+    title: string;
+    score: number | null;
+  }>();
+</script>

package/src/components/notifications/ApiKey.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="ffun-info-attention">
+  <div class="ffun-info-common">
+    <h4>Setup API keys</h4>
+
     <p>
       Please
       <a
@@ -7,17 +9,24 @@
         @click.prevent="goToSettings()"
         >set up</a
       >
-      your own OpenAI and/or Gemini API keys to tag your personal feeds.
+      your own
+      <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 keys to tag your personal feeds.
     </p>
 
     <p>
-      Remember, Feeds Fun provides tags for feeds from
       <a
         href="#"
         @click.prevent="goToCollections()"
-        >collections</a
+        >Collection</a
       >
-      for free. You do not need to set up your own API keys to have tags in news from collections.
+      feeds are tagged automatically, so no actions are required for them.
     </p>
 
     <user-setting-for-notification

package/src/components/notifications/CreateRuleHelp.vue

@@ -1,20 +1,19 @@
 <template>
-  <div class="ffun-info-attention">
-    <h3>Create your first news score rule</h3>
-    <p>Set up a rule to filter your news:</p>
+  <div class="ffun-info-common">
+    <h4>Create your first rule</h4>
+
     <ol class="list-decimal list-inside">
-      <li><strong>Click</strong> any tag on a news item.</li>
-      <li>See how news is filtered by the chosen tag.</li>
-      <li>Locate the <strong>Create Rule</strong> panel in the left sidebar.</li>
+      <li><strong>Click on a tag</strong> that interests you.</li>
+      <li>See how Feeds Fun filters news based on the selected tag.</li>
       <li>
-        Assign a numeric score for filtered news:
+        <strong>Assign a score</strong> to the filtered news in the "Create Rule" block in the left sidebar:
         <ul>
-          <li>Use higher scores (above zero) for important or engaging content.</li>
-          <li>Use lower (below zero) scores for uninteresting or irrelevant content.</li>
+          <li>Use positive scores for important or engaging content.</li>
+          <li>Use negative scores for irrelevant or boring content.</li>
         </ul>
       </li>
-      <li>Click <strong>Create Rule</strong>.</li>
-      <li>Watch the news reorganize based on your scores.</li>
+      <li><strong>Click the "Create Rule" button</strong>.</li>
+      <li>See how Feeds Fun reorganizes news based on your rule.</li>
     </ol>
   </div>
 </template>

package/src/components/page_header/ExternalLinks.vue

@@ -0,0 +1,58 @@
+<template>
+  <a
+    v-if="showApi"
+    href="/api/docs"
+    target="_blank"
+    class="ffun-page-header-link"
+    @click="events.socialLinkClicked({linkType: 'api'})"
+    >API</a
+  >
+
+  <a
+    v-if="settings.blog"
+    :href="settings.blog"
+    target="_blank"
+    class="ffun-page-header-link"
+    @click="events.socialLinkClicked({linkType: 'blog'})"
+    >Blog</a
+  >
+
+  <a
+    v-if="settings.redditSubreddit"
+    :href="settings.redditSubreddit"
+    target="_blank"
+    class="ffun-page-header-link text-xl align-middle"
+    title="Reddit"
+    @click="events.socialLinkClicked({linkType: 'reddit'})"
+    ><i class="ti ti-brand-reddit"></i
+  ></a>
+
+  <a
+    v-if="settings.discordInvite"
+    :href="settings.discordInvite"
+    target="_blank"
+    class="ffun-page-header-link text-xl align-middle"
+    title="Discord"
+    @click="events.socialLinkClicked({linkType: 'discord'})"
+    ><i class="ti ti-brand-discord"></i
+  ></a>
+
+  <a
+    v-if="settings.githubRepo"
+    :href="settings.githubRepo"
+    target="_blank"
+    class="ffun-page-header-link text-xl align-middle"
+    title="GitHub"
+    @click="events.socialLinkClicked({linkType: 'github'})">
+    <i class="ti ti-brand-github"></i
+  ></a>
+</template>
+
+<script lang="ts" setup>
+  import {ref, computed, useSlots, onMounted, watch, watchEffect} from "vue";
+
+  import * as events from "@/logic/events";
+  import * as settings from "@/logic/settings";
+
+  const properties = defineProps<{showApi: boolean}>();
+</script>