feeds-fun 0.6.0 → 1.2.0

package/src/views/FeedsView.vue

@@ -3,6 +3,7 @@
     <template #side-menu-item-1>
       Show descriptions:
       <config-flag
+        style="min-width: 2.5rem"
         v-model:flag="globalSettings.showFeedsDescriptions"
         on-text="yes"
         off-text="no" />
@@ -19,6 +20,7 @@
       Show failed
       <config-flag
         v-model:flag="globalSettings.failedFeedsFirst"
+        style="min-width: 2.5rem"
         on-text="first"
         off-text="last" />
     </template>
@@ -28,11 +30,16 @@
       <span v-if="sortedFeeds"> [{{ sortedFeeds.length }}] </span>
     </template>
 
-    <template #main-footer> </template>
+    <notifications
+      v-if="sortedFeeds !== null"
+      :openai-api-key="false"
+      :collections="sortedFeeds === null || sortedFeeds.length == 0" />
 
     <feeds-list
       v-if="sortedFeeds"
       :feeds="sortedFeeds" />
+
+    <template #main-footer> </template>
   </side-panel-layout>
 </template>
 
@@ -120,5 +127,3 @@
     return sorted;
   });
 </script>
-
-<style></style>

package/src/views/MainView.vue

@@ -1,96 +1,50 @@
 <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 />
+    <template #header>
+      Feeds Fun
+      <small class="block text-lg font-normal">Personalized news for professionals</small>
+    </template>
+
+    <div class="max-w-md mx-auto">
+      <div class="ffun-info-good">
+        <supertokens-login />
+      </div>
+
+      <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>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>
 
-    <br />
-
-    <ffun-github-buttons :repository="settings.githubRepo" />
-
-    <h2>What is it?</h2>
-
-    <p>
-      <i>Web-based news reader. Self-hosted, if it is your way.</i>
-    </p>
-
-    <ul class="main-page-element">
-      <li>Reader automatically assigns tags to news entries.</li>
-      <li>You create rules to score news by tags.</li>
-      <li>Filter and sort news how you want, to read only what you want.</li>
-      <li>?????</li>
-      <li>Profit.</li>
-    </ul>
-
-    <h2>You are in control</h2>
-
-    <ul class="main-page-element">
-      <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>Screenshots</h2>
-
-    <p><i>GUI is still in the early development stage, like the whole project. It will become more pleasurable.</i></p>
-
     <img
+      class="border-2 rounded border-slate-300"
       src="/news-filtering-example.png"
       alt="News filtering example" />
-
-    <p class="main-page-element"><strong>Explanation</strong></p>
-
-    <ul class="main-page-element">
-      <li>From the news for the last week, sorted by score.</li>
-      <li>Show only news about <code>game-development</code> from <code>reddit.com</code>.</li>
-      <li>Exclude news related to <code>employment</code>.</li>
-      <li>Hide already read news.</li>
-    </ul>
-
-    <p class="main-page-element"><strong>Tags sorting for news records</strong></p>
-
-    <ul class="main-page-element">
-      <li>Tags are sorted by the impact on the score.</li>
-      <li>Green tags have a positive impact.</li>
-      <li>Red tags have a negative impact.</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>
-  .main-page-element {
-    text-align: left;
-    margin-left: auto;
-    max-width: 27rem;
-    margin-right: auto;
-  }
-</style>

package/src/views/NewsView.vue

@@ -1,14 +1,14 @@
 <template>
   <side-panel-layout>
     <template #side-menu-item-1>
-      For the last
+      For
       <config-selector
         :values="e.LastEntriesPeriodProperties"
         v-model:property="globalSettings.lastEntriesPeriod" />
     </template>
 
     <template #side-menu-item-2>
-      Sorted by
+      Sort by
       <config-selector
         :values="e.EntriesOrderProperties"
         v-model:property="globalSettings.entriesOrder" />
@@ -17,17 +17,19 @@
     <template #side-menu-item-3>
       Show tags:
       <config-flag
+        style="min-width: 2.5rem"
         v-model:flag="globalSettings.showEntriesTags"
-        on-text="yes"
-        off-text="no" />
+        on-text="no"
+        off-text="yes" />
     </template>
 
     <template #side-menu-item-4>
-      Show already read:
+      Show read:
       <config-flag
+        style="min-width: 2.5rem"
         v-model:flag="globalSettings.showRead"
-        on-text="yes"
-        off-text="no" />
+        on-text="no"
+        off-text="yes" />
     </template>
 
     <template #side-footer>
@@ -43,11 +45,10 @@
 
     <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>
+    <notifications
+      v-if="entriesStore.loadedEntriesReport !== null"
+      :openai-api-key="true"
+      :collections="!hasEntries" />
 
     <entries-list
       :entriesIds="entriesReport"
@@ -55,7 +56,8 @@
       :show-tags="globalSettings.showEntriesTags"
       :tags-count="tagsCount"
       :showFromStart="25"
-      :showPerPage="25" />
+      :showPerPage="25"
+      @entry:bodyVisibilityChanged="onBodyVisibilityChanged" />
   </side-panel-layout>
 </template>
 
@@ -79,11 +81,22 @@
 
   globalSettings.updateDataVersion();
 
+  const entriesWithOpenedBody = ref<{[key: t.EntryId]: boolean}>({});
+
   const entriesReport = computed(() => {
+    if (entriesStore.loadedEntriesReport === null) {
+      return [];
+    }
+
     let report = entriesStore.loadedEntriesReport.slice();
 
     if (!globalSettings.showRead) {
       report = report.filter((entryId) => {
+        if (entriesWithOpenedBody.value[entryId]) {
+          // always show read entries with open body
+          // otherwise, they will hide right after opening it
+          return true;
+        }
         return !entriesStore.entries[entryId].hasMarker(e.Marker.Read);
       });
     }
@@ -167,6 +180,10 @@
   function onTagStateChanged({tag, state}: {tag: string; state: tagsFilterState.State}) {
     tagsStates.value.onTagStateChanged({tag, state});
   }
+
+  function onBodyVisibilityChanged({entryId, visible}: {entryId: t.EntryId; visible: boolean}) {
+    entriesWithOpenedBody.value[entryId] = visible;
+  }
 </script>
 
 <style></style>

package/src/views/RulesView.vue

@@ -122,5 +122,3 @@
     tagsStates.value.onTagStateChanged({tag, state});
   }
 </script>
-
-<style></style>

package/src/views/SettingsView.vue

@@ -1,53 +1,66 @@
 <template>
   <side-panel-layout :reload-button="false">
-    <h2>Info</h2>
+    <template #main-header> Settings </template>
 
     <ul>
-      <li><strong>User id</strong>: {{ userId }}</li>
+      <li>
+        <strong class="mr-1">User id</strong>
+        <input
+          class="ffun-input w-72"
+          disabled
+          :value="userId" />
+      </li>
     </ul>
 
-    <h2>Settings</h2>
-
-    <template #main-header> Settings </template>
+    <hr />
 
-    <user-setting
-      v-for="(value, kind) of globalSettings.userSettings"
-      :kind="kind" />
+    <template v-for="(value, kind) of globalSettings.userSettings">
+      <user-setting :kind="kind" />
+      <hr />
+    </template>
 
     <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>
+    <ul class="list-disc list-inside">
+      <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
+        <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.
+        <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>
+    <table
+      v-else
+      class="border border-gray-300 rounded-lg">
+      <thead class="bg-slate-200">
         <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>
+          <th class="p-2">Period</th>
+          <th class="p-2">Used tokens</th>
+          <th class="p-2">Reserved tokens</th>
+          <th class="p-2">Total tokens</th>
+          <th class="p-2">% from current maximum</th>
         </tr>
       </thead>
       <tbody>
         <openai-tokens-usage
           :usage="usage"
           v-for="usage of openAIUsage" />
+
+        <tr v-if="openAIUsage.length == 0">
+          <td class="text-center">—</td>
+          <td class="text-center">—</td>
+          <td class="text-center">—</td>
+          <td class="text-center">—</td>
+          <td class="text-center">—</td>
+        </tr>
       </tbody>
     </table>
   </side-panel-layout>

package/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./index.html",
+        "./src/*.{vue,js,ts,jsx,tsx}",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+  theme: {
+    extend: {},
+  },
+    plugins: [
+        require('@tailwindcss/typography'),
+    ],
+}

package/src/components/EntryInfo.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <a
-      :href="entry.url"
-      target="_blank"
-      rel="noopener noreferrer">
-      {{ entry.title }}
-    </a>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import {computed, ref} from "vue";
-  import type * as t from "@/logic/types";
-  import * as e from "@/logic/enums";
-  import * as api from "@/logic/api";
-  import {computedAsync} from "@vueuse/core";
-  import {useEntriesStore} from "@/stores/entries";
-
-  const props = defineProps<{entry: t.EntryInfo}>();
-</script>
-
-<style scoped></style>

package/src/components/FfunGithubButtons.vue

@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <github-button
-      :href="repository"
-      data-icon="octicon-star"
-      >Star</github-button
-    >
-    &nbsp;
-    <github-button
-      :href="repository + '/discussions'"
-      data-show-count="true"
-      data-icon="octicon-comment-discussion"
-      >Discuss</github-button
-    >
-  </div>
-</template>
-
-<script lang="ts" setup>
-  const props = defineProps<{repository: string}>();
-</script>
-
-<style></style>