feeds-fun 0.0.4

package/src/views/CollectionsView.vue

@@ -0,0 +1,23 @@
+<template>
+  <side-panel-layout :reload-button="false">
+    <template #main-header> Collections </template>
+
+    <feeds-collections />
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Collections;
+</script>
+
+<style></style>

package/src/views/DiscoveryView.vue

@@ -0,0 +1,26 @@
+<template>
+  <side-panel-layout :reload-button="false">
+    <template #main-header> Discovery </template>
+
+    <opml-upload />
+
+    <hr />
+
+    <discovery-form />
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Discovery;
+</script>
+
+<style></style>

package/src/views/FeedsView.vue

@@ -0,0 +1,124 @@
+<template>
+  <side-panel-layout>
+    <template #side-menu-item-1>
+      Show descriptions:
+      <config-flag
+        v-model:flag="globalSettings.showFeedsDescriptions"
+        on-text="yes"
+        off-text="no" />
+    </template>
+
+    <template #side-menu-item-2>
+      Sorted by
+      <config-selector
+        :values="e.FeedsOrderProperties"
+        v-model:property="globalSettings.feedsOrder" />
+    </template>
+
+    <template #side-menu-item-3>
+      Show failed
+      <config-flag
+        v-model:flag="globalSettings.failedFeedsFirst"
+        on-text="first"
+        off-text="last" />
+    </template>
+
+    <template #main-header>
+      Feeds
+      <span v-if="sortedFeeds"> [{{ sortedFeeds.length }}] </span>
+    </template>
+
+    <template #main-footer> </template>
+
+    <feeds-list
+      v-if="sortedFeeds"
+      :feeds="sortedFeeds" />
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import _ from "lodash";
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import * as api from "@/logic/api";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Feeds;
+
+  const feeds = computedAsync(async () => {
+    // force refresh
+    globalSettings.dataVersion;
+    return await api.getFeeds();
+  }, null);
+
+  const sortedFeeds = computed(() => {
+    if (!feeds.value) {
+      return null;
+    }
+
+    let sorted = feeds.value.slice();
+
+    const orderProperties = e.FeedsOrderProperties.get(globalSettings.feedsOrder);
+
+    if (!orderProperties) {
+      throw new Error(`Invalid order properties: ${globalSettings.feedsOrder}`);
+    }
+
+    const orderField = orderProperties.orderField;
+
+    const direction = {asc: -1, desc: 1}[orderProperties.orderDirection];
+
+    if (direction === undefined) {
+      throw new Error(`Invalid order direction: ${orderProperties.orderDirection}`);
+    }
+
+    sorted = sorted.sort((a: t.Feed, b: t.Feed) => {
+      if (a.isOk && !b.isOk) {
+        if (globalSettings.failedFeedsFirst) {
+          return 1;
+        }
+        return -1;
+      }
+
+      if (!a.isOk && b.isOk) {
+        if (globalSettings.failedFeedsFirst) {
+          return -1;
+        }
+        return 1;
+      }
+
+      const valueA = _.get(a, orderField, null);
+      const valueB = _.get(b, orderField, null);
+
+      if (valueA === null && valueB === null) {
+        return 0;
+      }
+
+      if (valueA === null) {
+        return 1 * direction;
+      }
+
+      if (valueB === null) {
+        return -1 * direction;
+      }
+
+      if (valueA < valueB) {
+        return 1 * direction;
+      }
+
+      if (valueA > valueB) {
+        return -1 * direction;
+      }
+
+      return 0;
+    });
+
+    return sorted;
+  });
+</script>
+
+<style></style>

package/src/views/MainView.vue

@@ -0,0 +1,67 @@
+<template>
+  <wide-layout>
+    <template #header> Feeds Fun </template>
+
+    <div v-if="globalState.isLoggedIn">
+      <p>You have already logged in.</p>
+      <button @click.prevent="goToWorkspace()">Go To Feeds</button>
+    </div>
+
+    <div v-else>
+      <supertokens-login />
+    </div>
+
+    <br />
+
+    <ffun-github-buttons :repository="settings.githubRepo" />
+
+    <h2>What is it?</h2>
+
+    <ul style="text-align: left">
+      <li>Web-based news reader. Self-hosted, if it is your way.</li>
+      <li>Automatically assigns tags to news entries.</li>
+      <li>You create rules to score news by tags.</li>
+      <li>Then filter and sort news how you want.</li>
+    </ul>
+
+    <h2>You are in control</h2>
+
+    <ul style="text-align: left">
+      <li>No black box recommendation algorithms.</li>
+      <li>No "smart" reordering of your news.</li>
+      <li>No ads.</li>
+      <li>No selling of your data.</li>
+    </ul>
+
+    <h2>What will it become?</h2>
+
+    <ul style="text-align: left">
+      <li>Will become much prettier.</li>
+      <li> Will collect not only RSS/ATOM but any news feeds, including private if you allow. </li>
+      <li>Will suggest new rules to score & new feeds, if you allow.</li>
+    </ul>
+  </wide-layout>
+</template>
+
+<script lang="ts" setup>
+  import {useRouter} from "vue-router";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useSupertokens} from "@/stores/supertokens";
+  import {useGlobalState} from "@/stores/globalState";
+  import {computedAsync} from "@vueuse/core";
+  import * as settings from "@/logic/settings";
+  import * as e from "@/logic/enums";
+
+  const globalSettings = useGlobalSettingsStore();
+  const globalState = useGlobalState();
+
+  const supertokens = useSupertokens();
+
+  const router = useRouter();
+
+  function goToWorkspace() {
+    router.push({name: e.MainPanelMode.Entries, params: {}});
+  }
+</script>
+
+<style></style>

package/src/views/NewsView.vue

@@ -0,0 +1,96 @@
+<template>
+  <side-panel-layout>
+    <template #side-menu-item-1>
+      For the last
+      <config-selector
+        :values="e.LastEntriesPeriodProperties"
+        v-model:property="globalSettings.lastEntriesPeriod" />
+    </template>
+
+    <template #side-menu-item-2>
+      Sorted by
+      <config-selector
+        :values="e.EntriesOrderProperties"
+        v-model:property="globalSettings.entriesOrder" />
+    </template>
+
+    <template #side-menu-item-3>
+      Show tags:
+      <config-flag
+        v-model:flag="globalSettings.showEntriesTags"
+        on-text="yes"
+        off-text="no" />
+    </template>
+
+    <template #side-menu-item-4>
+      Show already read:
+      <config-flag
+        v-model:flag="globalSettings.showRead"
+        on-text="yes"
+        off-text="no" />
+    </template>
+
+    <template #side-footer>
+      <tags-filter
+        v-if="globalSettings.mainPanelMode == e.MainPanelMode.Entries"
+        :tags="entriesStore.reportTagsCount" />
+    </template>
+
+    <template #main-header>
+      News
+      <span v-if="entriesNumber > 0">[{{ entriesNumber }}]</span>
+    </template>
+
+    <template #main-footer> </template>
+
+    <template v-if="!hasEntries && !entriesStore.firstTimeEntriesLoading">
+      <p>It looks like you have no news to read.</p>
+      <p> Try to subscribe for the feeds collections that we are preparing for you! </p>
+      <feeds-collections />
+    </template>
+
+    <entries-list
+      :entriesIds="entriesStore.entriesReport"
+      :time-field="timeField"
+      :show-tags="globalSettings.showEntriesTags"
+      :showFromStart="25"
+      :showPerPage="25" />
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const globalSettings = useGlobalSettingsStore();
+  const entriesStore = useEntriesStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Entries;
+
+  globalSettings.updateDataVersion();
+
+  const entriesNumber = computed(() => {
+    return entriesStore.entriesReport.length;
+  });
+
+  const hasEntries = computed(() => {
+    return entriesNumber.value > 0;
+  });
+
+  const timeField = computed(() => {
+    const orderProperties = e.EntriesOrderProperties.get(globalSettings.entriesOrder);
+
+    if (orderProperties === undefined) {
+      throw new Error(`Unknown entries order: ${globalSettings.entriesOrder}`);
+    }
+
+    return orderProperties.timeField;
+  });
+</script>
+
+<style></style>

package/src/views/RulesView.vue

@@ -0,0 +1,33 @@
+<template>
+  <side-panel-layout :reload-button="false">
+    <template #main-header>
+      Rules
+      <span v-if="rules">[{{ rules.length }}]</span>
+    </template>
+
+    <rules-list
+      v-if="rules"
+      :rules="rules" />
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Rules;
+
+  const rules = computedAsync(async () => {
+    // force refresh
+    globalSettings.dataVersion;
+    return await api.getRules();
+  }, null);
+</script>
+
+<style></style>

package/src/views/SettingsView.vue

@@ -0,0 +1,81 @@
+<template>
+  <side-panel-layout :reload-button="false">
+    <h2>Info</h2>
+
+    <ul>
+      <li><strong>User id</strong>: {{ userId }}</li>
+    </ul>
+
+    <h2>Settings</h2>
+
+    <template #main-header> Settings </template>
+
+    <user-setting
+      v-for="(value, kind) of globalSettings.userSettings"
+      :kind="kind" />
+
+    <h2>OpenAI usage</h2>
+
+    <p>Token usage for your OpenAI key per month.</p>
+
+    <ul>
+      <li> <strong>Used tokens</strong>: the number of tokens in processed requests. </li>
+      <li>
+        <strong>Reserved tokens</strong>: the number of tokens reserved for requests that currently are processing or
+        were not processed correctly.
+      </li>
+      <li>
+        <strong>Total tokens</strong>: the total number of tokens used in the month. Should be not less than the actual
+        used tokens, but can be bigger because we reserve more tokens than actually use.
+      </li>
+    </ul>
+
+    <p v-if="openAIUsage == null">Loading...</p>
+
+    <p v-else-if="openAIUsage.length == 0">No usage data</p>
+
+    <table v-else>
+      <thead>
+        <tr>
+          <th style="padding-left: 1rem">Period</th>
+          <th style="padding-left: 1rem">Used tokens</th>
+          <th style="padding-left: 1rem">Reserved tokens</th>
+          <th style="padding-left: 1rem">Total tokens</th>
+          <th style="padding-left: 1rem">% from current maximum</th>
+        </tr>
+      </thead>
+      <tbody>
+        <openai-tokens-usage
+          :usage="usage"
+          v-for="usage of openAIUsage" />
+      </tbody>
+    </table>
+  </side-panel-layout>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Settings;
+
+  const openAIUsage = computedAsync(async () => {
+    return await api.getResourceHistory({kind: "openai_tokens"});
+  }, null);
+
+  const userId = computed(() => {
+    if (globalSettings.info == null) {
+      return "—";
+    }
+
+    return globalSettings.info.userId;
+  });
+</script>
+
+<style></style>

package/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

package/tsconfig.vitest.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://backend:8000/',
+        changeOrigin: true,
+      },
+      '/supertokens': {
+        target: 'http://backend:8000/',
+        changeOrigin: true,
+      }
+    }
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig } from 'vite'
+import { configDefaults, defineConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)