feeds-fun 1.20.5 → 1.20.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.20.5",
+  "version": "1.20.7",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/ConfigFlag.vue

@@ -2,13 +2,18 @@
   <button
     class="ffun-config-flag"
     @click="emit('update:flag', !flag)">
-    <span v-if="flag">{{ offText }}</span>
+    <span v-if="!flagDefined">&nbsp;</span>
+    <span v-else-if="flag">{{ offText }}</span>
     <span v-else>{{ onText }}</span>
   </button>
 </template>
 
 <script setup lang="ts">
-  defineProps<{flag: boolean; onText: string; offText: string}>();
+  import {computed} from "vue";
+
+  const properties = defineProps<{flag: boolean | null; onText: string; offText: string}>();
+
+  const flagDefined = computed(() => properties.flag !== null && properties.flag !== undefined);
 
   const emit = defineEmits(["update:flag"]);
 </script>

package/src/components/ConfigSelector.vue

@@ -2,19 +2,28 @@
   <select
     class="ffun-input"
     @change="updateProperty($event)">
+    <option
+      v-if="!propertyDefined"
+      value=""
+      selected>
+    </option>
+
     <option
       v-for="[value, props] of values"
       :value="value"
-      :selected="value === property">
+      :selected="value === property && propertyDefined">
       {{ props.text }}
     </option>
   </select>
 </template>
 
 <script lang="ts" setup>
+  import {computed} from "vue";
   import * as e from "@/logic/enums";
 
-  const properties = defineProps<{values: any; property: string}>();
+  const properties = defineProps<{values: any; property: string | null}>();
+
+  const propertyDefined = computed(() => properties.property !== null && properties.property !== undefined);
 
   const emit = defineEmits(["update:property"]);
 

package/src/components/TokensCost.vue

@@ -29,11 +29,11 @@
   const k = 2;
 
   const percents = computed(() => {
-    if (globalSettings.userSettings == null) {
+    if (!globalSettings.userSettingsPresent) {
       return "—";
     }
 
-    const setting = globalSettings.userSettings["max_tokens_cost_in_month"];
+    const setting = globalSettings.max_tokens_cost_in_month;
 
     if (!setting) {
       return "—";

package/src/components/UserSetting.vue

@@ -68,11 +68,11 @@
       return null;
     }
 
-    if (globalSettings.userSettings === null) {
+    if (!globalSettings.userSettingsPresent) {
       return null;
     }
 
-    return globalSettings.userSettings[properties.kind];
+    return (globalSettings as any)[properties.kind];
   });
 
   const verboseValue = computed(() => {
@@ -98,13 +98,13 @@
     return v;
   });
 
-  async function save() {
+  function save() {
     if (value.value === null) {
       return;
     }
 
-    await api.setUserSetting({kind: properties.kind, value: value.value});
-    globalSettings.updateDataVersion();
+    globalSettings.setUserSettings(properties.kind, value.value);
+
     editing.value = false;
   }
 

package/src/components/UserSettingForNotification.vue

@@ -27,11 +27,11 @@
       return null;
     }
 
-    if (globalSettings.userSettings === null) {
+    if (!globalSettings.userSettingsPresent) {
       return null;
     }
 
-    return globalSettings.userSettings[properties.kind];
+    return (globalSettings as any)[properties.kind];
   });
 
   const text = computed(() => {
@@ -46,13 +46,12 @@
     return setting.value.name;
   });
 
-  async function save() {
+  function save() {
     if (value.value === null) {
       return;
     }
 
-    await api.setUserSetting({kind: properties.kind, value: value.value});
-    globalSettings.updateDataVersion();
+    globalSettings.setUserSettings(properties.kind, value.value);
   }
 
   async function updateFlag(newValue: any) {

package/src/components/notifications/Block.vue

@@ -27,18 +27,18 @@
 
   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
+      globalSettings.userSettingsPresent &&
+      !globalSettings.openai_api_key?.value &&
+      !globalSettings.gemini_api_key?.value &&
+      !globalSettings.hide_message_about_setting_up_key?.value
     );
   });
 
   const showCollectionsNotification = computed(() => {
     return (
       properties.collectionsNotification_ &&
-      globalSettings.userSettings &&
-      !globalSettings.userSettings.hide_message_about_adding_collections.value &&
+      globalSettings.userSettingsPresent &&
+      !globalSettings.hide_message_about_adding_collections?.value &&
       !tagsStates?.value.hasSelectedTags &&
       settings.hasCollections
     );
@@ -61,8 +61,8 @@
     return (
       properties.collectionsWarning_ &&
       !showCollectionsNotification.value &&
-      globalSettings.userSettings &&
-      !globalSettings.userSettings.hide_message_check_your_feed_urls.value
+      globalSettings.userSettingsPresent &&
+      !globalSettings.hide_message_check_your_feed_urls?.value
     );
   });
 </script>

package/src/components/side_pannel/CollapseButton.vue

@@ -1,11 +1,11 @@
 <template>
   <a
     href="#"
-    class="ffun-page-header-link py-2 flex items-center justify-center"
+    class="ffun-page-header-link py-2 flex items-center justify-center relative"
     :title="title"
     @click.prevent="onClick">
     <icon
-      v-if="globalSettings.showSidebar"
+      v-if="showSidebar"
       icon="sidebar-left-collapse"
       size="large" />
     <icon
@@ -15,7 +15,7 @@
 
     <span
       v-if="showPoint"
-      class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 border border-white"></span>
+      class="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-red-500 border border-white"></span>
   </a>
 </template>
 
@@ -40,8 +40,12 @@
     return globalSettings.showSidebar ? "Hide sidebar" : "Show sidebar";
   });
 
+  const showSidebar = computed(() => {
+    return globalSettings.showSidebar || !globalSettings.userSettingsPresent;
+  });
+
   const showPoint = computed(() => {
-    return !globalSettings.showSidebar && globalSettings.showSidebarPoint;
+    return !showSidebar.value && globalSettings.showSidebarPoint;
   });
 
   function onClick() {

package/src/css/inputs.css

@@ -35,7 +35,7 @@
   }
 
   .ffun-config-flag {
-    @apply ffun-x-input-common px-2 py-0;
+    @apply ffun-x-input-common px-2 py-0 w-12;
   }
 
   .ffun-input {

package/src/layouts/SidePanelLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ffun-side-panel-layout">
     <div
-      v-if="globalSettings.showSidebar"
+      v-if="showSidebar"
       class="ffun-side-panel">
       <div class="ffun-page-header pr-0 mr-0 flex min-w-full">
         <div class="ffun-page-header-title grow">
@@ -53,7 +53,7 @@
     <div class="ffun-body-panel">
       <div class="ffun-page-header">
         <div class="ffun-page-header-left-block">
-          <side-panel-collapse-button v-if="!globalSettings.showSidebar" />
+          <side-panel-collapse-button v-if="!showSidebar" />
 
           <page-header-home-button v-if="homeButton" />
 
@@ -162,6 +162,10 @@
     return !!slots[`side-menu-item-${index}`];
   }
 
+  const showSidebar = computed(() => {
+    return globalSettings.showSidebar || !globalSettings.userSettingsPresent;
+  });
+
   watchEffect(() => {
     if (!properties.loginRequired) {
       return;

package/src/logic/enums.ts

@@ -57,6 +57,7 @@ export enum LastEntriesPeriod {
 export type LastEntriesPeriodProperty = {
   readonly text: string;
   readonly seconds: number;
+  readonly default?: boolean;
 };
 
 // Map preserves the order of the keys
@@ -66,7 +67,7 @@ export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, LastEntrie
   [LastEntriesPeriod.Hour6, {text: "6 hours", seconds: 6 * c.hour}],
   [LastEntriesPeriod.Hour12, {text: "12 hours", seconds: 12 * c.hour}],
   [LastEntriesPeriod.Day1, {text: "1 day", seconds: c.day}],
-  [LastEntriesPeriod.Day3, {text: "3 days", seconds: 3 * c.day}],
+  [LastEntriesPeriod.Day3, {text: "3 days", seconds: 3 * c.day, default: true}],
   [LastEntriesPeriod.Week, {text: "1 week", seconds: c.week}],
   [LastEntriesPeriod.Week2, {text: "2 weeks", seconds: 2 * c.week}],
   [LastEntriesPeriod.Month1, {text: "1 month", seconds: c.month}],
@@ -83,7 +84,7 @@ export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, LastEntrie
 export enum EntriesOrder {
   Score = "score",
   ScoreToZero = "score-to-zero",
-  ScoreBackward = "score-to-",
+  ScoreBackward = "score-backward",
   Published = "published",
   Cataloged = "cataloged"
 }
@@ -93,19 +94,20 @@ export type EntriesOrderProperty = {
   readonly orderField: string;
   readonly timeField: string;
   readonly direction: number;
+  readonly default?: boolean;
 };
 
 export const EntriesOrderProperties = new Map<EntriesOrder, EntriesOrderProperty>([
-  [EntriesOrder.Score, {text: "score", orderField: "score", timeField: "catalogedAt", direction: 1}],
+  [EntriesOrder.Score, {text: "score", orderField: "score", timeField: "catalogedAt", direction: 1, default: true}],
   [EntriesOrder.ScoreToZero, {text: "score ~ 0", orderField: "scoreToZero", timeField: "catalogedAt", direction: 1}],
   [EntriesOrder.ScoreBackward, {text: "score backward", orderField: "score", timeField: "catalogedAt", direction: -1}],
   [EntriesOrder.Published, {text: "published", orderField: "publishedAt", timeField: "publishedAt", direction: 1}],
   [EntriesOrder.Cataloged, {text: "cataloged", orderField: "catalogedAt", timeField: "catalogedAt", direction: 1}]
 ]);
 
-////////////////
+/////////////////////
 // Min news tag count
-////////////////
+/////////////////////
 
 export enum MinNewsTagCount {
   One = "one",
@@ -118,11 +120,12 @@ export enum MinNewsTagCount {
 export type MinNewsTagCountProperty = {
   readonly text: string;
   readonly count: number;
+  readonly default?: boolean;
 };
 
 export const MinNewsTagCountProperties = new Map<MinNewsTagCount, MinNewsTagCountProperty>([
   [MinNewsTagCount.One, {text: "all", count: 1}],
-  [MinNewsTagCount.Two, {text: "if in 2+ news", count: 2}],
+  [MinNewsTagCount.Two, {text: "if in 2+ news", count: 2, default: true}],
   [MinNewsTagCount.Three, {text: "if in 3+ news", count: 3}],
   [MinNewsTagCount.Four, {text: "if in 4+ news", count: 4}],
   [MinNewsTagCount.Five, {text: "if in 5+ news", count: 5}]
@@ -151,8 +154,15 @@ export enum FeedsOrder {
   Linked = "linked"
 }
 
-export const FeedsOrderProperties = new Map<FeedsOrder, {text: string; orderField: string; orderDirection: string}>([
-  [FeedsOrder.Title, {text: "title", orderField: "title", orderDirection: "asc"}],
+export type FeedsOrderProperty = {
+  readonly text: string;
+  readonly orderField: string;
+  readonly orderDirection: string;
+  readonly default?: boolean;
+};
+
+export const FeedsOrderProperties = new Map<FeedsOrder, FeedsOrderProperty>([
+  [FeedsOrder.Title, {text: "title", orderField: "title", orderDirection: "asc", default: true}],
   [FeedsOrder.Url, {text: "url", orderField: "url", orderDirection: "asc"}],
   [FeedsOrder.Loaded, {text: "loaded", orderField: "loadedAt", orderDirection: "desc"}],
   [FeedsOrder.Linked, {text: "added", orderField: "linkedAt", orderDirection: "desc"}]
@@ -169,8 +179,15 @@ export enum RulesOrder {
   Updated = "updated"
 }
 
-export const RulesOrderProperties = new Map<RulesOrder, {text: string; orderField: string; orderDirection: string}>([
-  [RulesOrder.Tags, {text: "tags", orderField: "tags", orderDirection: "asc"}],
+export type RulesOrderProperty = {
+  readonly text: string;
+  readonly orderField: string;
+  readonly orderDirection: string;
+  readonly default?: boolean;
+};
+
+export const RulesOrderProperties = new Map<RulesOrder, RulesOrderProperty>([
+  [RulesOrder.Tags, {text: "tags", orderField: "tags", orderDirection: "asc", default: true}],
   [RulesOrder.Score, {text: "score", orderField: "score", orderDirection: "desc"}],
   [RulesOrder.Created, {text: "created", orderField: "createdAt", orderDirection: "desc"}],
   [RulesOrder.Updated, {text: "updated", orderField: "updatedAt", orderDirection: "desc"}]

package/src/logic/types.ts

@@ -358,10 +358,12 @@ export function fakeTag({uid, name, link, categories}: TagInfo): TagInfo {
   return {uid, name, link, categories};
 }
 
+export type UserSettingsValue = string | number | boolean;
+
 export type UserSetting = {
   readonly kind: string;
   readonly type: string;
-  value: string | number | boolean;
+  value: UserSettingsValue;
   readonly name: string;
 };
 
@@ -369,14 +371,12 @@ export function userSettingFromJSON({
   kind,
   type,
   value,
-  name,
-  description
+  name
 }: {
   kind: string;
   type: string;
   value: string | number | boolean;
   name: string;
-  description: string;
 }): UserSetting {
   return {
     kind,

package/src/stores/entries.ts

@@ -52,14 +52,19 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     globalSettings.updateDataVersion();
   }
 
+  const readyToLoadNews = computed(() => {
+    return (globalSettings.userSettingsPresent || !globalState.isLoggedIn) && mode.value !== null;
+  });
+
   // Public collections uses fixed sorting order
   // News uses dynamic sorting order and should keep it between switching views
   // So, if we set globalSettings.entriesOrderProperties in PublicCollection view
   // we'll break News view sorting and confuse users
   // => we hardcode specific order properties for PublicCollection mode
   const activeOrderProperties = computed(() => {
-    if (mode.value === null) {
-      // Return most general order for the case when mode is not set yet
+    if (!readyToLoadNews.value) {
+      // We can not load or process entries until everything is ready
+      // => Return most general order
       return e.EntriesOrderProperties.get(e.EntriesOrder.Published) as unknown as e.EntriesOrderProperty;
     }
 
@@ -106,7 +111,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   }
 
   async function loadEntriesAccordingToMode() {
-    const periodProperties = e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod);
+    const periodProperties = e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod as any);
 
     if (periodProperties === undefined) {
       throw new Error(`Unknown period ${globalSettings.lastEntriesPeriod}`);
@@ -114,7 +119,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
     const period = periodProperties.seconds;
 
-    const minTagCount = e.MinNewsTagCountProperties.get(globalSettings.minTagCount)?.count;
+    const minTagCount = e.MinNewsTagCountProperties.get(globalSettings.minTagCount as any)?.count;
 
     if (minTagCount === undefined) {
       throw new Error(`Unknown min tag count ${globalSettings.minTagCount}`);
@@ -142,8 +147,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     // force refresh
     globalSettings.dataVersion;
 
-    if (mode.value === null) {
-      // Do nothing until the mode is set
+    if (!readyToLoadNews.value) {
       return null;
     }
 
@@ -164,6 +168,10 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   }, null);
 
   const _sortedEntries = computed(() => {
+    if (!readyToLoadNews.value) {
+      return [];
+    }
+
     if (loadedEntriesReport.value === null) {
       return [];
     }

package/src/stores/globalSettings.ts

@@ -1,9 +1,11 @@
+import _ from "lodash";
 import {ref, computed} from "vue";
 import {defineStore} from "pinia";
 import {computedAsync} from "@vueuse/core";
 import {useGlobalState} from "@/stores/globalState";
 
 import * as e from "@/logic/enums";
+import * as t from "@/logic/types";
 import * as api from "@/logic/api";
 
 export const useGlobalSettingsStore = defineStore("globalSettings", () => {
@@ -12,33 +14,13 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // General
   const mainPanelMode = ref(e.MainPanelMode.Entries);
   const dataVersion = ref(0);
-  const showSidebar = ref(true);
-  const showSidebarPoint = ref(false);
-
-  // Entries
-  const lastEntriesPeriod = ref(e.LastEntriesPeriod.Day3);
-  const entriesOrder = ref(e.EntriesOrder.Score);
-  const minTagCount = ref(e.MinNewsTagCount.Two);
-  const showRead = ref(true);
-
-  const entriesOrderProperties = computed(() => {
-    return e.EntriesOrderProperties.get(entriesOrder.value);
-  });
-
-  // Feeds
-  const showFeedsDescriptions = ref(true);
-  const feedsOrder = ref(e.FeedsOrder.Title);
-  const failedFeedsFirst = ref(false);
-
-  // Rules
-  const rulesOrder = ref(e.RulesOrder.Tags);
 
   function updateDataVersion() {
     dataVersion.value++;
   }
 
-  // backend side settings
-  const userSettings = computedAsync(async () => {
+  // TODO: We may want to remove this API and move user_id to the user settings API
+  const info = computedAsync(async () => {
     if (!globalState.isLoggedIn) {
       return null;
     }
@@ -46,20 +28,195 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     // force refresh
     dataVersion.value;
 
-    return await api.getUserSettings();
+    return await api.getInfo();
   }, null);
 
-  const info = computedAsync(async () => {
+  ///////////////////////////////////////////////////////////
+  // Functionality for interaction with backend side settings
+  ///////////////////////////////////////////////////////////
+
+  const _userSettings = computedAsync(async () => {
     if (!globalState.isLoggedIn) {
       return null;
     }
 
-    // force refresh
     dataVersion.value;
 
-    return await api.getInfo();
+    let settings = await api.getUserSettings();
+
+    settingsOverrides.value = {};
+
+    return settings;
   }, null);
 
+  const userSettingsPresent = computed(() => {
+    return _userSettings.value !== null && _userSettings.value !== undefined;
+  });
+
+  function userSettingInfo(kind: string) {
+    return computed(() => {
+      if (!_userSettings.value || !(kind in _userSettings.value)) {
+        return null;
+      }
+
+      const setting = _userSettings.value[kind];
+
+      let value = setting.value;
+
+      if (kind in settingsOverrides.value) {
+        value = settingsOverrides.value[kind];
+      }
+
+      return {
+        kind: setting.kind,
+        name: setting.name,
+        type: setting.type,
+        value: value
+      } as t.UserSetting;
+    });
+  }
+
+  function _backgroundSetUserSetting(kind: string, value: t.UserSettingsValue) {
+    api.setUserSetting({kind: kind, value: value}).catch((error) => {
+      console.error(`Error in API call setUserSetting for kind "${kind}":`, error);
+    });
+  }
+
+  // This dict is used for two purposes:
+  // - To store settings that anonymous user changes while using the site.
+  // - To close fast reactive loop after calling backendSettings.set.
+  //   Without this, setting a setting will cause weired and complex chain
+  //   of (re)loading data from the backend.
+  var settingsOverrides = ref<{[key in keyof any]: t.UserSettingsValue}>({});
+
+  function setUserSettings(kind: string, newValue: t.UserSettingsValue) {
+    settingsOverrides.value[kind] = newValue;
+
+    if (globalState.isLoggedIn) {
+      _backgroundSetUserSetting(kind, newValue);
+    }
+
+    if (_userSettings.value) {
+      _userSettings.value[kind].value = newValue;
+    }
+
+    // We do not call updateDataVersion() here
+    // Because it causes request of the user settings from the backen
+    // which is not required
+    // All reactive code should be triggered by changes in settingsOverrides
+  }
+
+  function backendSettings(kind: string, validator: any, defaultValue: t.UserSettingsValue) {
+    return computed({
+      get() {
+        if (kind in settingsOverrides.value) {
+          return settingsOverrides.value[kind];
+        }
+
+        if (!globalState.isLoggedIn) {
+          return defaultValue;
+        }
+
+        if (!_userSettings.value) {
+          return null;
+        }
+
+        const setting = _userSettings.value[kind];
+
+        if (!validator(setting.value)) {
+          _backgroundSetUserSetting(kind, defaultValue);
+          return defaultValue;
+        }
+
+        return setting.value;
+      },
+
+      set(newValue) {
+        if (newValue === null || newValue === undefined) {
+          console.warn(`Setting "${kind}" is set to null or undefined. This is not allowed.`);
+          return;
+        }
+        setUserSettings(kind, newValue);
+      }
+    });
+  }
+
+  function boolBackendSettings(kind: string, defaultValue: t.UserSettingsValue) {
+    return backendSettings(
+      kind,
+      (rawValue: t.UserSettingsValue) => {
+        return typeof rawValue === "boolean";
+      },
+      defaultValue
+    );
+  }
+
+  function enumBackendSettings(kind: string, enumProperties: any) {
+    const defaultEntry = _.find([...enumProperties], ([, prop]) => prop.default);
+
+    if (!defaultEntry) {
+      throw new Error(`No default entry found for enum "${kind}"`);
+    }
+
+    let defaultValue = defaultEntry[0];
+
+    return backendSettings(
+      kind,
+      (rawValue: t.UserSettingsValue) => {
+        return enumProperties.has(rawValue);
+      },
+      defaultValue
+    );
+  }
+
+  ///////////////////////
+  // News filter settings
+  ///////////////////////
+
+  const lastEntriesPeriod = enumBackendSettings("view_news_filter_interval", e.LastEntriesPeriodProperties);
+  const entriesOrder = enumBackendSettings("view_news_filter_sort_by", e.EntriesOrderProperties);
+  const minTagCount = enumBackendSettings("view_news_filter_min_tags_count", e.MinNewsTagCountProperties);
+  const showRead = boolBackendSettings("view_news_filter_show_read", true);
+
+  const entriesOrderProperties = computed(() => {
+    return e.EntriesOrderProperties.get(entriesOrder.value as any);
+  });
+
+  ////////////////////////
+  // Feeds filter settings
+  ////////////////////////
+
+  const showFeedsDescriptions = boolBackendSettings("view_feeds_show_feed_descriptions", true);
+  const feedsOrder = enumBackendSettings("view_feeds_feed_order", e.FeedsOrderProperties);
+  const failedFeedsFirst = boolBackendSettings("view_feeds_failed_feeds_first", false);
+
+  ////////////////////////
+  // Rules filter settings
+  ////////////////////////
+
+  const rulesOrder = enumBackendSettings("view_rules_order", e.RulesOrderProperties);
+
+  ///////////////////
+  // Sidebar settings
+  ///////////////////
+
+  const showSidebar = boolBackendSettings("show_sidebar", true);
+  const showSidebarPoint = ref(false);
+
+  ////////////////
+  // User settings
+  ////////////////
+
+  const hide_message_about_setting_up_key = userSettingInfo("hide_message_about_setting_up_key");
+  const hide_message_about_adding_collections = userSettingInfo("hide_message_about_adding_collections");
+  const hide_message_check_your_feed_urls = userSettingInfo("hide_message_check_your_feed_urls");
+
+  const openai_api_key = userSettingInfo("openai_api_key");
+  const gemini_api_key = userSettingInfo("gemini_api_key");
+
+  const max_tokens_cost_in_month = userSettingInfo("max_tokens_cost_in_month");
+  const process_entries_not_older_than = userSettingInfo("process_entries_not_older_than");
+
   return {
     mainPanelMode,
     lastEntriesPeriod,
@@ -70,12 +227,23 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     dataVersion,
     updateDataVersion,
     showFeedsDescriptions,
-    userSettings,
+    userSettingsPresent,
     info,
     feedsOrder,
     failedFeedsFirst,
     rulesOrder,
     showSidebar,
-    showSidebarPoint
+    showSidebarPoint,
+    setUserSettings,
+
+    hide_message_about_setting_up_key,
+    hide_message_about_adding_collections,
+    hide_message_check_your_feed_urls,
+
+    openai_api_key,
+    gemini_api_key,
+
+    max_tokens_cost_in_month,
+    process_entries_not_older_than
   };
 });

package/src/views/FeedsView.vue

@@ -80,7 +80,7 @@
       return [];
     }
 
-    const orderProperties = e.FeedsOrderProperties.get(globalSettings.feedsOrder);
+    const orderProperties = e.FeedsOrderProperties.get(globalSettings.feedsOrder as any);
 
     if (!orderProperties) {
       throw new Error(`Invalid order properties: ${globalSettings.feedsOrder}`);

package/src/views/NewsView.vue

@@ -64,7 +64,7 @@
 
     <notifications-loaded-old-news
       :entries="entriesStore.loadedEntriesReport || []"
-      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod)" />
+      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod as any)" />
 
     <entries-list
       :loading="entriesStore.loading"

package/src/views/PublicCollectionView.vue

@@ -86,7 +86,7 @@
 
     <notifications-loaded-old-news
       :entries="entriesStore.loadedEntriesReport || []"
-      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod)" />
+      :period="e.LastEntriesPeriodProperties.get(globalSettings.lastEntriesPeriod as any)" />
 
     <entries-list
       :loading="entriesStore.loading"
@@ -198,7 +198,7 @@
 
   const medianTag1: ComputedRef<string> = computed(() => {
     // do not change tag when the filter changed
-    if (tagsStates.value.hasSelectedTags) {
+    if (tagsStates.value.hasSelectedTags && medianTag1.value) {
       return medianTag1.value;
     }
 
@@ -215,7 +215,7 @@
 
   const medianTag2: ComputedRef<string> = computed(() => {
     // do not change tag when the filter changed
-    if (tagsStates.value.hasSelectedTags) {
+    if (tagsStates.value.hasSelectedTags && medianTag2.value) {
       return medianTag2.value;
     }
 

package/src/views/RulesView.vue

@@ -92,7 +92,7 @@
 
     sorted = tagsStates.value.filterByTags(sorted, (rule) => rule.tags);
 
-    const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder);
+    const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder as any);
 
     if (!orderProperties) {
       throw new Error(`Invalid order properties: ${globalSettings.rulesOrder}`);

package/src/views/SettingsView.vue

@@ -130,7 +130,7 @@
       class="ffun-info-bad">
       <button
         @click.prevent="removeAccount()"
-        class="ffun-form-button bad short ml-1"
+        class="ffun-form-button bad short pl-0"
         >Remove Account</button
       >