feeds-fun 1.11.0 → 1.12.0

package/src/components/notifications/Block.vue

@@ -0,0 +1,61 @@
+<template>
+  <notifications-api-key v-if="showAPIKeyNotification" />
+  <collections-notification v-if="showCollectionsNotification" />
+  <notifications-create-rule-help v-if="showCreateRuleHelpNotification" />
+  <collections-warning v-if="showCollectionsWarning" />
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useCollectionsStore} from "@/stores/collections";
+
+  const properties = defineProps<{
+    apiKey: boolean;
+    createRuleHelp: boolean;
+    collectionsNotification_: boolean;
+    collectionsWarning_: boolean;
+  }>();
+
+  const collections = useCollectionsStore();
+  const globalSettings = useGlobalSettingsStore();
+
+  const showApiKeyMessage = computed(() => {
+    return (
+      globalSettings.userSettings &&
+      !globalSettings.userSettings.openai_api_key.value &&
+      !globalSettings.userSettings.gemini_api_key.value &&
+      !globalSettings.userSettings.hide_message_about_setting_up_key.value
+    );
+  });
+
+  const showCollectionsNotification = computed(() => {
+    return (
+      properties.collectionsNotification_ &&
+      globalSettings.userSettings &&
+      !globalSettings.userSettings.hide_message_about_adding_collections.value
+    );
+  });
+
+  const showCreateRuleHelpNotification = computed(() => {
+    return !showCollectionsNotification.value && properties.createRuleHelp;
+  });
+
+  const showAPIKeyNotification = computed(() => {
+    return (
+      !showCollectionsNotification.value &&
+      !showCreateRuleHelpNotification.value &&
+      properties.apiKey &&
+      showApiKeyMessage.value
+    );
+  });
+
+  const showCollectionsWarning = computed(() => {
+    return (
+      properties.collectionsWarning_ &&
+      !showCollectionsNotification.value &&
+      globalSettings.userSettings &&
+      !globalSettings.userSettings.hide_message_check_your_feed_urls.value
+    );
+  });
+</script>

package/src/components/{NotificationCreateRuleHelp.vue → notifications/CreateRuleHelp.vue}

@@ -1,9 +1,9 @@
 <template>
   <div class="ffun-info-attention">
-    <p> Make your first rule to experience the reader's full capabilities! </p>
+    <p> Make your first rule to experience the full power of the Feeds Fun! </p>
 
     <ul class="list-decimal list-inside">
-      <li>Click a tag under a news.</li>
+      <li>Click any tag under a news item.</li>
       <li>Select more tags if needed.</li>
       <li>Set a score for the rule.</li>
       <li>Click "Create Rule".</li>

package/src/layouts/SidePanelLayout.vue

@@ -66,25 +66,58 @@
               >
             </li>
 
-            <li>
+            <li class="">
               <a
                 href="/api/docs"
                 target="_blank"
                 class="ffun-header-link"
                 style="text-decoration: none"
-                >API&#8599;</a
+                >API</a
               >
             </li>
 
-            <li>
+            <li v-if="settings.blog">
               <a
-                :href="settings.githubRepo"
+                :href="settings.blog"
                 target="_blank"
                 class="ffun-header-link"
                 style="text-decoration: none"
-                >GitHub&#8599;</a
+                >Blog</a
               >
             </li>
+
+            <li v-if="settings.redditSubreddit">
+              <a
+                :href="settings.redditSubreddit"
+                target="_blank"
+                class="ffun-header-link text-xl align-middle"
+                title="Reddit"
+                style="text-decoration: none"
+                ><i class="ti ti-brand-reddit"></i
+              ></a>
+            </li>
+
+            <li v-if="settings.discordInvite">
+              <a
+                :href="settings.discordInvite"
+                target="_blank"
+                class="ffun-header-link text-xl align-middle"
+                title="Discord"
+                style="text-decoration: none"
+                ><i class="ti ti-brand-discord"></i
+              ></a>
+            </li>
+
+            <li v-if="settings.githubRepo">
+              <a
+                :href="settings.githubRepo"
+                target="_blank"
+                class="ffun-header-link text-xl align-middle"
+                title="GitHub"
+                style="text-decoration: none">
+                <i class="ti ti-brand-github"></i
+              ></a>
+            </li>
           </ul>
         </div>
 
@@ -116,13 +149,11 @@
   import {useRouter, RouterLink, RouterView} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useGlobalState} from "@/stores/globalState";
-  import {useEntriesStore} from "@/stores/entries";
   import {useSupertokens} from "@/stores/supertokens";
   import * as e from "@/logic/enums";
   import * as settings from "@/logic/settings";
 
   const globalSettings = useGlobalSettingsStore();
-  const entriesStore = useEntriesStore();
   const supertokens = useSupertokens();
   const globalState = useGlobalState();
 

package/src/logic/api.ts

@@ -20,8 +20,9 @@ const API_DISCOVER_FEEDS = `${ENTRY_POINT}/discover-feeds`;
 const API_ADD_FEED = `${ENTRY_POINT}/add-feed`;
 const API_ADD_OPML = `${ENTRY_POINT}/add-opml`;
 const API_UNSUBSCRIBE = `${ENTRY_POINT}/unsubscribe`;
-const API_GET_FEEDS_COLLECTIONS = `${ENTRY_POINT}/get-feeds-collections`;
-const API_SUBSCRIBE_TO_FEEDS_COLLECTIONS = `${ENTRY_POINT}/subscribe-to-feeds-collections`;
+const API_GET_COLLECTIONS = `${ENTRY_POINT}/get-collections`;
+const API_GET_COLLECTION_FEEDS = `${ENTRY_POINT}/get-collection-feeds`;
+const API_SUBSCRIBE_TO_COLLECTIONS = `${ENTRY_POINT}/subscribe-to-collections`;
 const API_GET_TAGS_INFO = `${ENTRY_POINT}/get-tags-info`;
 const API_GET_USER_SETTINGS = `${ENTRY_POINT}/get-user-settings`;
 const API_SET_USER_SETTING = `${ENTRY_POINT}/set-user-setting`;
@@ -186,15 +187,38 @@ export async function unsubscribe({feedId}: {feedId: t.FeedId}) {
   await post({url: API_UNSUBSCRIBE, data: {feedId: feedId}});
 }
 
-export async function getFeedsCollections() {
-  const response = await post({url: API_GET_FEEDS_COLLECTIONS, data: {}});
+export async function getCollections() {
+  const response = await post({url: API_GET_COLLECTIONS, data: {}});
 
-  return response.collections;
+  const collections = [];
+
+  for (let rawCollection of response.collections) {
+    const collection = t.collectionFromJSON(rawCollection);
+    collections.push(collection);
+  }
+
+  return collections;
+}
+
+export async function getCollectionFeeds({collectionId}: {collectionId: t.CollectionId}) {
+  const response = await post({
+    url: API_GET_COLLECTION_FEEDS,
+    data: {collectionId: collectionId}
+  });
+
+  const feeds = [];
+
+  for (let rawFeed of response.feeds) {
+    const feed = t.collectionFeedInfoFromJSON(rawFeed);
+    feeds.push(feed);
+  }
+
+  return feeds;
 }
 
-export async function subscribeToFeedsCollections({collectionsIds}: {collectionsIds: t.FeedsCollectionId[]}) {
+export async function subscribeToCollections({collectionsIds}: {collectionsIds: t.CollectionId[]}) {
   await post({
-    url: API_SUBSCRIBE_TO_FEEDS_COLLECTIONS,
+    url: API_SUBSCRIBE_TO_COLLECTIONS,
     data: {collections: collectionsIds}
   });
 }

package/src/logic/settings.ts

@@ -13,7 +13,10 @@ export const authMode = import.meta.env.VITE_FFUN_AUTH_MODE || AuthMode.SingleUs
 export const authSupertokensApiBasePath = import.meta.env.VITE_FFUN_AUTH_SUPERTOKENS_API_BASE_PATH || "/supertokens";
 export const authSupertokensResendAfter = import.meta.env.VITE_FFUN_AUTH_SUPERTOKENS_RESEND_AFTER || 60 * 1000;
 
+export const blog = import.meta.env.VITE_FFUN_BLOG || "https://blog.feeds.fun";
 export const githubRepo = import.meta.env.VITE_FFUN_GITHUB_REPO || "https://github.com/Tiendil/feeds.fun";
+export const discordInvite = import.meta.env.VITE_FFUN_DISCORD_INVITE || "https://discord.gg/C5RVusHQXy";
+export const redditSubreddit = import.meta.env.VITE_FFUN_REDDIT_SUBREDDIT || "https://www.reddit.com/r/feedsfun/";
 
 export const plausibleEnabled = import.meta.env.VITE_FFUN_PLAUSIBLE_ENABLED == "true" || false;
 export const plausibleDomain = import.meta.env.VITE_FFUN_PLAUSIBLE_DOMAIN || "localhost";
@@ -29,7 +32,10 @@ console.log("settings.authMode", authMode);
 console.log("settings.authSupertokensApiBasePath", authSupertokensApiBasePath);
 console.log("settings.authSupertokensResendAfter", authSupertokensResendAfter);
 
+console.log("settings.blog", blog);
 console.log("settings.githubRepo", githubRepo);
+console.log("settings.discordInvite", discordInvite);
+console.log("settings.redditSubreddit", redditSubreddit);
 
 console.log("settings.plausibleEnabled", plausibleEnabled);
 console.log("settings.plausibleDomain", plausibleDomain);

package/src/logic/types.ts

@@ -18,10 +18,10 @@ export function toRuleId(id: string): RuleId {
   return id as RuleId;
 }
 
-export type FeedsCollectionId = string & {readonly __brand: unique symbol};
+export type CollectionId = string & {readonly __brand: unique symbol};
 
-export function toFeedsCollectionId(id: string): FeedsCollectionId {
-  return id as FeedsCollectionId;
+export function toCollectionId(id: string): CollectionId {
+  return id as CollectionId;
 }
 
 export type URL = string & {readonly __brand: unique symbol};
@@ -40,6 +40,7 @@ export class Feed {
   readonly loadedAt: Date | null;
   readonly linkedAt: Date;
   readonly isOk: boolean;
+  readonly collectionIds: CollectionId[];
 
   constructor({
     id,
@@ -50,7 +51,8 @@ export class Feed {
     lastError,
     loadedAt,
     linkedAt,
-    isOk
+    isOk,
+    collectionIds
   }: {
     id: FeedId;
     title: string | null;
@@ -61,6 +63,7 @@ export class Feed {
     loadedAt: Date | null;
     linkedAt: Date;
     isOk: boolean;
+    collectionIds: CollectionId[];
   }) {
     this.id = id;
     this.title = title;
@@ -71,6 +74,7 @@ export class Feed {
     this.loadedAt = loadedAt;
     this.linkedAt = linkedAt;
     this.isOk = isOk;
+    this.collectionIds = collectionIds;
   }
 }
 
@@ -82,7 +86,8 @@ export function feedFromJSON({
   state,
   lastError,
   loadedAt,
-  linkedAt
+  linkedAt,
+  collectionIds
 }: {
   id: string;
   title: string;
@@ -92,6 +97,7 @@ export function feedFromJSON({
   lastError: string | null;
   loadedAt: string;
   linkedAt: string;
+  collectionIds: string[];
 }): Feed {
   return {
     id: toFeedId(id),
@@ -102,7 +108,8 @@ export function feedFromJSON({
     lastError: lastError,
     loadedAt: loadedAt !== null ? new Date(loadedAt) : null,
     linkedAt: new Date(linkedAt),
-    isOk: state === "loaded"
+    isOk: state === "loaded",
+    collectionIds: collectionIds.map(toCollectionId)
   };
 }
 
@@ -348,7 +355,13 @@ export function userSettingFromJSON({
   name: string;
   description: string;
 }): UserSetting {
-  return {kind, type, value, name, description};
+  return {
+    kind,
+    type,
+    value: type === "decimal" ? parseFloat(value as string) : value,
+    name,
+    description
+  };
 }
 
 export class ResourceHistoryRecord {
@@ -373,12 +386,96 @@ export function resourceHistoryRecordFromJSON({
   reserved
 }: {
   intervalStartedAt: string;
-  used: number;
-  reserved: number;
+  used: number | string;
+  reserved: number | string;
 }): ResourceHistoryRecord {
   return new ResourceHistoryRecord({
     intervalStartedAt: new Date(intervalStartedAt),
-    used,
-    reserved
+    // TODO: refactor to use kind of Decimals and to respect input types
+    used: parseFloat(used as string),
+    reserved: parseFloat(reserved as string)
+  });
+}
+
+export class Collection {
+  readonly id: CollectionId;
+  readonly guiOrder: number;
+  readonly name: string;
+  readonly description: string;
+  readonly feedsNumber: number;
+
+  constructor({
+    id,
+    guiOrder,
+    name,
+    description,
+    feedsNumber
+  }: {
+    id: CollectionId;
+    guiOrder: number;
+    name: string;
+    description: string;
+    feedsNumber: number;
+  }) {
+    this.id = id;
+    this.guiOrder = guiOrder;
+    this.name = name;
+    this.description = description;
+    this.feedsNumber = feedsNumber;
+  }
+}
+
+export function collectionFromJSON({
+  id,
+  guiOrder,
+  name,
+  description,
+  feedsNumber
+}: {
+  id: string;
+  guiOrder: number;
+  name: string;
+  description: string;
+  feedsNumber: number;
+}): Collection {
+  return {
+    id: toCollectionId(id),
+    guiOrder: guiOrder,
+    name: name,
+    description: description,
+    feedsNumber: feedsNumber
+  };
+}
+
+export class CollectionFeedInfo {
+  readonly url: URL;
+  readonly title: string;
+  readonly description: string;
+  readonly id: FeedId;
+
+  constructor({url, title, description, id}: {url: URL; title: string; description: string; id: FeedId}) {
+    this.url = url;
+    this.title = title;
+    this.description = description;
+    this.id = id;
+  }
+}
+
+export function collectionFeedInfoFromJSON({
+  url,
+  title,
+  description,
+  id
+}: {
+  url: string;
+  title: string;
+  description: string;
+  id: string;
+}): CollectionFeedInfo {
+  return new CollectionFeedInfo({
+    url: toURL(url),
+    title: title,
+    description: description,
+    id: toFeedId(id)
   });
 }

package/src/main.ts

@@ -20,19 +20,26 @@ import FeedInfo from "./components/FeedInfo.vue";
 import OpmlUpload from "./components/OPMLUpload.vue";
 import FeedForList from "./components/FeedForList.vue";
 import SupertokensLogin from "./components/SupertokensLogin.vue";
-import FeedsCollections from "./components/FeedsCollections.vue";
 import FfunTag from "./components/FfunTag.vue";
 import SimplePagination from "./components/SimplePagination.vue";
 import UserSetting from "./components/UserSetting.vue";
-import OpenaiTokensUsage from "./components/OpenaiTokensUsage.vue";
+import TokensCost from "./components/TokensCost.vue";
 import FaviconElement from "./components/FaviconElement.vue";
-import NotificationCollections from "./components/NotificationCollections.vue";
-import NotificationOpenaiApiKey from "./components/NotificationOpenaiApiKey.vue";
-import NotificationCreateRuleHelp from "./components/NotificationCreateRuleHelp.vue";
-import Notifications from "./components/Notifications.vue";
 import RuleForList from "./components/RuleForList.vue";
 import UserSettingForNotification from "./components/UserSettingForNotification.vue";
 
+import NotificationsApiKey from "./components/notifications/ApiKey.vue";
+import NotificationsCreateRuleHelp from "./components/notifications/CreateRuleHelp.vue";
+import Notifications from "./components/notifications/Block.vue";
+
+import CollectionsNotification from "./components/collections/Notification.vue";
+import CollectionsWarning from "./components/collections/Warning.vue";
+import CollectionsBlock from "./components/collections/Block.vue";
+import CollectionsBlockItem from "./components/collections/BlockItem.vue";
+import CollectionsDetailedItem from "./components/collections/DetailedItem.vue";
+import CollectionsSubscribingProgress from "./components/collections/SubscribingProgress.vue";
+import CollectionsFeedItem from "./components/collections/FeedItem.vue";
+
 import ScoreSelector from "./inputs/ScoreSelector.vue";
 import InputMarker from "./inputs/Marker.vue";
 
@@ -64,19 +71,26 @@ app.component("FeedInfo", FeedInfo);
 app.component("OpmlUpload", OpmlUpload);
 app.component("FeedForList", FeedForList);
 app.component("SupertokensLogin", SupertokensLogin);
-app.component("FeedsCollections", FeedsCollections);
 app.component("FfunTag", FfunTag);
 app.component("SimplePagination", SimplePagination);
 app.component("UserSetting", UserSetting);
-app.component("OpenaiTokensUsage", OpenaiTokensUsage);
+app.component("TokensCost", TokensCost);
 app.component("FaviconElement", FaviconElement);
-app.component("NotificationCollections", NotificationCollections);
-app.component("NotificationOpenaiApiKey", NotificationOpenaiApiKey);
-app.component("NotificationCreateRuleHelp", NotificationCreateRuleHelp);
-app.component("Notifications", Notifications);
 app.component("RuleForList", RuleForList);
 app.component("UserSettingForNotification", UserSettingForNotification);
 
+app.component("NotificationsApiKey", NotificationsApiKey);
+app.component("NotificationsCreateRuleHelp", NotificationsCreateRuleHelp);
+app.component("Notifications", Notifications);
+
+app.component("CollectionsNotification", CollectionsNotification);
+app.component("CollectionsWarning", CollectionsWarning);
+app.component("CollectionsBlock", CollectionsBlock);
+app.component("CollectionsBlockItem", CollectionsBlockItem);
+app.component("CollectionsDetailedItem", CollectionsDetailedItem);
+app.component("CollectionsSubscribingProgress", CollectionsSubscribingProgress);
+app.component("CollectionsFeedItem", CollectionsFeedItem);
+
 app.component("ScoreSelector", ScoreSelector);
 app.component("InputMarker", InputMarker);
 

package/src/stores/collections.ts

@@ -0,0 +1,53 @@
+import {computed, ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+
+import type * as t from "@/logic/types";
+import * as e from "@/logic/enums";
+import * as api from "@/logic/api";
+import {Timer} from "@/logic/timer";
+import {computedAsync} from "@vueuse/core";
+
+export const useCollectionsStore = defineStore("collectionsStore", () => {
+  const feeds = ref<{[id: t.CollectionId]: t.CollectionFeedInfo[]}>({});
+
+  const collections = computedAsync(async () => {
+    const collectionsList = await api.getCollections();
+
+    const collections: {[key: t.CollectionId]: t.Collection} = {};
+
+    for (const collection of collectionsList) {
+      collections[collection.id] = collection;
+    }
+
+    return collections;
+  }, {});
+
+  const collectionsOrder = computed(() => {
+    const order = Object.keys(collections.value) as t.CollectionId[];
+
+    order.sort((a, b) => {
+      return collections.value[a].guiOrder - collections.value[b].guiOrder;
+    });
+
+    return order;
+  });
+
+  async function getFeeds({collectionId}: {collectionId: t.CollectionId}) {
+    if (collectionId in feeds.value) {
+      return feeds.value[collectionId];
+    }
+
+    const feedsList = await api.getCollectionFeeds({collectionId: collectionId});
+
+    feeds.value[collectionId] = feedsList;
+
+    return feeds.value[collectionId];
+  }
+
+  return {
+    collections,
+    collectionsOrder,
+    getFeeds
+  };
+});

package/src/stores/feeds.ts

@@ -0,0 +1,48 @@
+import {computed, ref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {defineStore} from "pinia";
+
+import type * as t from "@/logic/types";
+import * as e from "@/logic/enums";
+import * as api from "@/logic/api";
+import {Timer} from "@/logic/timer";
+import {computedAsync} from "@vueuse/core";
+import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+export const useFeedsStore = defineStore("feedsStore", () => {
+  const globalSettings = useGlobalSettingsStore();
+
+  const feeds = computedAsync(async () => {
+    // force refresh
+    globalSettings.dataVersion;
+
+    const feedsList = await api.getFeeds();
+
+    const feedsDict: {[key: t.FeedId]: t.Feed} = {};
+
+    for (const feed of feedsList) {
+      feedsDict[feed.id] = feed;
+    }
+
+    return feedsDict;
+  }, {});
+
+  async function unsubscribe(feedId: t.FeedId) {
+    await api.unsubscribe({feedId: feedId});
+    globalSettings.updateDataVersion();
+  }
+
+  async function subscribe(url: t.URL) {
+    await api.addFeed({
+      url: url
+    });
+
+    globalSettings.updateDataVersion();
+  }
+
+  return {
+    feeds,
+    unsubscribe,
+    subscribe
+  };
+});

package/src/style.css

@@ -1,3 +1,5 @@
+@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -15,6 +17,10 @@
     @apply text-2xl font-semibold leading-relaxed my-3;
   }
 
+  h3 {
+    @apply text-xl font-semibold leading-relaxed my-2;
+  }
+
   hr {
     @apply border-slate-400 my-2;
   }
@@ -30,28 +36,36 @@
     @apply text-blue-600 hover:text-blue-800 cursor-pointer;
   }
 
+  .ffun-normalized-text ul {
+    @apply list-disc list-inside;
+  }
+
+  .ffun-normalized-text code {
+    @apply bg-slate-800 px-1 rounded bg-opacity-10 text-sm;
+  }
+
   .ffun-info-common {
-    @apply border-2 p-2 my-1 rounded;
+    @apply ffun-normalized-text border-2 p-2 my-1 rounded border-slate-200;
   }
 
   .ffun-info-good {
-    @apply ffun-info-common border-green-300 bg-green-50;
+    @apply ffun-info-common bg-green-50;
   }
 
   .ffun-info-bad {
-    @apply ffun-info-common border-red-300 bg-red-50;
+    @apply ffun-info-common bg-red-50;
   }
 
   .ffun-info-warning {
-    @apply ffun-info-common border-orange-300 bg-orange-50;
+    @apply ffun-info-common bg-orange-50;
   }
 
   .ffun-info-attention {
-    @apply ffun-info-common border-purple-300 bg-purple-50;
+    @apply ffun-info-common bg-purple-50;
   }
 
   .ffun-header-link {
-    @apply text-blue-600 hover:text-blue-800 cursor-pointer text-lg;
+    @apply text-blue-600 hover:text-blue-900 cursor-pointer text-lg;
   }
 
   .ffun-normal-link {
@@ -85,8 +99,4 @@
   .ffun-checkbox {
     @apply ffun-input-common h-4 w-4 align-middle;
   }
-
-  .ffun-normalized-text ul {
-    @apply list-disc list-inside;
-  }
 }