feeds-fun 0.5.1 → 1.1.0

package/src/components/UserSettingForNotification.vue

@@ -0,0 +1,63 @@
+<template>
+  <button
+    v-if="setting"
+    @click.prevent="updateFlag(true)"
+    class="ffun-form-button"
+    >{{ text }}</button
+  >
+</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();
+
+  const properties = defineProps<{kind: string; buttonText: string}>();
+
+  const value = ref<boolean | null>(null);
+
+  const setting = computed(() => {
+    if (properties.kind === null) {
+      return null;
+    }
+
+    if (globalSettings.userSettings === null) {
+      return null;
+    }
+
+    return globalSettings.userSettings[properties.kind];
+  });
+
+  const text = computed(() => {
+    if (properties.buttonText) {
+      return properties.buttonText;
+    }
+
+    if (setting.value === null) {
+      return "";
+    }
+
+    return setting.value.name;
+  });
+
+  async function save() {
+    if (value.value === null) {
+      return;
+    }
+
+    await api.setUserSetting({kind: properties.kind, value: value.value});
+    globalSettings.updateDataVersion();
+  }
+
+  async function updateFlag(newValue: any) {
+    value.value = newValue;
+    await save();
+  }
+</script>
+
+<style></style>

package/src/inputs/Marker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display: inline-block">
+  <div>
     <template v-if="hasMarker">
       <a
         href="#"
@@ -57,14 +57,10 @@
 
 <style scoped>
   .marked {
-    color: #2e8f2e;
-    font-weight: bold;
-    text-decoration: none;
+    @apply text-green-700 no-underline;
   }
 
   .unmarked {
-    color: purple;
-    /* font-weight: bold; */
-    text-decoration: none;
+    @apply text-purple-700 font-bold no-underline;
   }
 </style>

package/src/inputs/ScoreSelector.vue

@@ -1,16 +1,15 @@
 <template>
-  <div>
-    <select
-      :value="modelValue"
-      @input="updateSelected">
-      <option
-        v-for="score of scores"
-        :value="score"
-        :selected="modelValue === score">
-        {{ score }}
-      </option>
-    </select>
-  </div>
+  <select
+    class="ffun-input"
+    :value="modelValue"
+    @input="updateSelected">
+    <option
+      v-for="score of scores"
+      :value="score"
+      :selected="modelValue === score">
+      {{ score }}
+    </option>
+  </select>
 </template>
 
 <script lang="ts" setup>

package/src/layouts/SidePanelLayout.vue

@@ -1,40 +1,30 @@
 <template>
-  <div class="container">
-    <div class="nav-panel">
-      <h2 style="margin-top: 0; margin-bottom: 0">
+  <div class="flex divide-x">
+    <div class="p-4 w-60 bg-slate-200 flex-shrink-0">
+      <h2 class="leading-8 my-0">
         <slot name="main-header"></slot>
       </h2>
 
       <hr />
 
-      <ul class="config-menu">
-        <li
-          v-if="hasSideMenuItem(1)"
-          class="config-menu-item">
+      <ul class="space-y-2">
+        <li v-if="hasSideMenuItem(1)">
           <slot name="side-menu-item-1"></slot>
         </li>
 
-        <li
-          v-if="hasSideMenuItem(2)"
-          class="config-menu-item">
+        <li v-if="hasSideMenuItem(2)">
           <slot name="side-menu-item-2"></slot>
         </li>
 
-        <li
-          v-if="hasSideMenuItem(3)"
-          class="config-menu-item">
+        <li v-if="hasSideMenuItem(3)">
           <slot name="side-menu-item-3"></slot>
         </li>
 
-        <li
-          v-if="hasSideMenuItem(4)"
-          class="config-menu-item">
+        <li v-if="hasSideMenuItem(4)">
           <slot name="side-menu-item-4"></slot>
         </li>
 
-        <li
-          v-if="hasSideMenuItem(5)"
-          class="config-menu-item">
+        <li v-if="hasSideMenuItem(5)">
           <slot name="side-menu-item-5"></slot>
         </li>
       </ul>
@@ -42,6 +32,7 @@
       <hr v-if="reloadButton" />
 
       <a
+        class="ffun-form-button p-1 my-1 block w-full text-center"
         v-if="reloadButton"
         href="#"
         @click="globalSettings.dataVersion += 1"
@@ -53,80 +44,72 @@
       <slot name="side-footer"></slot>
     </div>
 
-    <div class="main-content">
-      <header style="padding-top: 1rem; display: flex; align-items: center">
-        <div style="display: flex; align-items: center; margin-right: auto">
-          <ul style="list-style-type: none; margin: 0; padding: 0">
-            <li style="display: inline-block; margin-right: 0.5rem">
+    <div class="flex-grow p-4">
+      <header class="flex items-center leading-8">
+        <div class="display:flex items-center mr-auto">
+          <ul class="list-none m-0 p-0 flex space-x-2">
+            <li>
               <a
-                href="#"
+                href="/"
+                class="ffun-header-link"
                 @click.prevent="router.push({name: 'main', params: {}})"
-                style="text-decoration: none"
                 >Home</a
               >
             </li>
 
             <li
               v-for="[mode, props] of e.MainPanelModeProperties"
-              :key="mode"
-              style="display: inline-block; margin-right: 0.5rem">
+              :key="mode">
               <a
                 v-if="globalSettings.mainPanelMode !== mode"
-                href="#"
-                @click.prevent="router.push({name: mode, params: {}})"
-                style="text-decoration: none">
+                :href="mode"
+                class="ffun-header-link"
+                @click.prevent="router.push({name: mode, params: {}})">
                 {{ props.text }}
               </a>
 
-              <span v-else>{{ props.text }}</span>
+              <span
+                class="ffun-header-link-disabled cursor-default"
+                v-else
+                >{{ props.text }}</span
+              >
             </li>
 
-            <li style="display: inline-block; margin-right: 0.5rem">
+            <li>
               <a
                 href="/api/docs"
                 target="_blank"
+                class="ffun-header-link"
                 style="text-decoration: none"
                 >API&#8599;</a
               >
             </li>
+
+            <li>
+              <a
+                :href="settings.githubRepo"
+                target="_blank"
+                class="ffun-header-link"
+                style="text-decoration: none"
+                >GitHub&#8599;</a
+              >
+            </li>
           </ul>
         </div>
 
-        <div style="display: flex; align-items: center; margin-left: 1rem">
-          <ffun-github-buttons
-            :repository="settings.githubRepo"
-            style="margin-top: 0.3rem" />
-          &nbsp;|&nbsp;
+        <div class="flex items-center ml-4">
           <a
             href="#"
+            class="ffun-header-link"
             @click.prevent="logout()"
             >logout</a
           >
         </div>
       </header>
 
-      <hr />
-
-      <div
-        v-if="showApiKeyMessage"
-        style="border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem; background-color: #f0f8ff">
-        <p>
-          Because, for now, our service is free to use and OpenAI API costs money, we politely ask you to set up your
-          own OpenAI API key.
-        </p>
-        <p>
-          You can do it on the
-          <a
-            href="#"
-            @click.prevent="router.push({name: e.MainPanelMode.Settings, params: {}})"
-            >settings</a
-          >
-          page.
-        </p>
-        <user-setting kind="openai_hide_message_about_setting_up_key" />
-      </div>
+      <hr class="my-2 border-slate-400" />
 
-      <main>
+      <main class="mb-4">
         <slot></slot>
       </main>
 
@@ -178,14 +161,6 @@
     return !!slots[`side-menu-item-${index}`];
   }
 
-  const showApiKeyMessage = computed(() => {
-    return (
-      globalSettings.userSettings &&
-      !globalSettings.userSettings.openai_api_key.value &&
-      !globalSettings.userSettings.openai_hide_message_about_setting_up_key.value
-    );
-  });
-
   watchEffect(() => {
     if (!properties.loginRequired) {
       return;
@@ -200,32 +175,3 @@
     }
   });
 </script>
-
-<style scoped>
-  .container {
-    display: flex;
-  }
-
-  .nav-panel {
-    width: 11rem;
-    flex-shrink: 0;
-    background-color: #f0f0f0;
-    padding: 1rem;
-  }
-
-  .main-content {
-    flex-grow: 1;
-    padding: 1rem;
-    padding-top: 0;
-  }
-
-  .config-menu {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  :deep(.config-menu-item) {
-    margin-bottom: 1rem;
-  }
-</style>

package/src/layouts/WideLayout.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="main-content">
+  <div class="flex justify-center h-screen">
+    <div class="flex flex-col justify-start items-center text-center p-4">
       <header>
         <h1>
           <slot name="header"></slot>
@@ -19,26 +19,3 @@
 </template>
 
 <script lang="ts" setup></script>
-
-<style scoped>
-  .container {
-    display: flex;
-    justify-content: center;
-    /* align-items: center; */
-    height: 100vh;
-  }
-
-  .main-content {
-    /* flex-grow: 1; */
-
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    align-items: center;
-    text-align: center;
-    width: 50%;
-    /* margin-bottom: 50vh; */
-    padding: 1rem;
-    max-width: 960px;
-  }
-</style>

package/src/logic/api.ts

@@ -8,7 +8,7 @@ const ENTRY_POINT = "/api";
 const API_GET_FEEDS = `${ENTRY_POINT}/get-feeds`;
 const API_GET_LAST_ENTRIES = `${ENTRY_POINT}/get-last-entries`;
 const API_GET_ENTRIES_BY_IDS = `${ENTRY_POINT}/get-entries-by-ids`;
-const API_CREATE_RULE = `${ENTRY_POINT}/create-rule`;
+const API_CREATE_OR_UPDATE_RULE = `${ENTRY_POINT}/create-or-update-rule`;
 
 const API_DELETE_RULE = `${ENTRY_POINT}/delete-rule`;
 const API_UPDATE_RULE = `${ENTRY_POINT}/update-rule`;
@@ -97,9 +97,9 @@ export async function getEntriesByIds({ids}: {ids: t.EntryId[]}) {
   return entries;
 }
 
-export async function createRule({tags, score}: {tags: string[]; score: number}) {
+export async function createOrUpdateRule({tags, score}: {tags: string[]; score: number}) {
   const response = await post({
-    url: API_CREATE_RULE,
+    url: API_CREATE_OR_UPDATE_RULE,
     data: {tags: tags, score: score}
   });
   return response;

package/src/logic/settings.ts

@@ -13,11 +13,6 @@ 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 sentryEnable = import.meta.env.VITE_FFUN_ENABLE_SENTRY == "True" || false;
-
-export const sentryDsn = import.meta.env.VITE_FFUN_SENTRY_DSN || "not-secified";
-export const sentrySampleRate = import.meta.env.VITE_FFUN_SENTRY_SAMPLE_RATE || 1.0;
-
 export const githubRepo = import.meta.env.VITE_FFUN_GITHUB_REPO || "https://github.com/Tiendil/feeds.fun";
 
 console.log("settings.appName", appName);
@@ -30,8 +25,4 @@ console.log("settings.authMode", authMode);
 console.log("settings.authSupertokensApiBasePath", authSupertokensApiBasePath);
 console.log("settings.authSupertokensResendAfter", authSupertokensResendAfter);
 
-console.log("settings.sentryEnable", sentryEnable);
-console.log("settings.sentryDsn", sentryDsn);
-console.log("settings.sentrySampleRate", sentrySampleRate);
-
 console.log("settings.githubRepo", githubRepo);

package/src/main.ts

@@ -1,10 +1,11 @@
 import {createApp} from "vue";
 import {createPinia} from "pinia";
-import * as Sentry from "@sentry/vue";
 
 import App from "./App.vue";
 import router from "./router";
 
+import "./style.css";
+
 import FeedsList from "./components/FeedsList.vue";
 import EntriesList from "./components/EntriesList.vue";
 import RulesList from "./components/RulesList.vue";
@@ -17,17 +18,20 @@ import RuleScoreUpdater from "./components/RuleScoreUpdater.vue";
 import TagsFilter from "./components/TagsFilter.vue";
 import DiscoveryForm from "./components/DiscoveryForm.vue";
 import FeedInfo from "./components/FeedInfo.vue";
-import EntryInfo from "./components/EntryInfo.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 FfunGithubButtons from "./components/FfunGithubButtons.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 FaviconElement from "./components/FaviconElement.vue";
+import NotificationCollections from "./components/NotificationCollections.vue";
+import NotificationOpenaiApiKey from "./components/NotificationOpenaiApiKey.vue";
+import Notifications from "./components/Notifications.vue";
+import RuleForList from "./components/RuleForList.vue";
+import UserSettingForNotification from "./components/UserSettingForNotification.vue";
 
 import ScoreSelector from "./inputs/ScoreSelector.vue";
 import InputMarker from "./inputs/Marker.vue";
@@ -43,7 +47,6 @@ import SidePanelLayout from "./layouts/SidePanelLayout.vue";
 import {useSupertokens} from "@/stores/supertokens";
 
 import VueCountdown from "@chenfengyuan/vue-countdown";
-import GithubButton from "vue-github-button";
 
 const app = createApp(App);
 
@@ -59,17 +62,20 @@ app.component("RuleScoreUpdater", RuleScoreUpdater);
 app.component("TagsFilter", TagsFilter);
 app.component("DiscoveryForm", DiscoveryForm);
 app.component("FeedInfo", FeedInfo);
-app.component("EntryInfo", EntryInfo);
 app.component("OpmlUpload", OpmlUpload);
 app.component("FeedForList", FeedForList);
 app.component("SupertokensLogin", SupertokensLogin);
 app.component("FeedsCollections", FeedsCollections);
-app.component("FfunGithubButtons", FfunGithubButtons);
 app.component("FfunTag", FfunTag);
 app.component("SimplePagination", SimplePagination);
 app.component("UserSetting", UserSetting);
 app.component("OpenaiTokensUsage", OpenaiTokensUsage);
 app.component("FaviconElement", FaviconElement);
+app.component("NotificationCollections", NotificationCollections);
+app.component("NotificationOpenaiApiKey", NotificationOpenaiApiKey);
+app.component("Notifications", Notifications);
+app.component("RuleForList", RuleForList);
+app.component("UserSettingForNotification", UserSettingForNotification);
 
 app.component("ScoreSelector", ScoreSelector);
 app.component("InputMarker", InputMarker);
@@ -83,23 +89,10 @@ app.component("WideLayout", WideLayout);
 app.component("SidePanelLayout", SidePanelLayout);
 
 app.component("vue-countdown", VueCountdown);
-app.component("github-button", GithubButton);
 
 app.use(createPinia());
 app.use(router);
 
-if (settings.sentryEnable) {
-  Sentry.init({
-    app,
-    dsn: settings.sentryDsn,
-    environment: settings.environment,
-    sampleRate: settings.sentrySampleRate,
-    attachStacktrace: true,
-    enableTracing: false,
-    integrations: []
-  });
-}
-
 app.mount("#app");
 
 import * as api from "@/logic/api";

package/src/stores/entries.ts

@@ -15,8 +15,6 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   const entries = ref<{[key: t.EntryId]: t.Entry}>({});
   const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
 
-  const firstTimeEntriesLoading = ref(true);
-
   function registerEntry(entry: t.Entry) {
     if (entry.id in entries.value) {
       if (entry.body === null && entries.value[entry.id].body !== null) {
@@ -50,10 +48,8 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       report.push(entry.id);
     }
 
-    firstTimeEntriesLoading.value = false;
-
     return report;
-  }, []);
+  }, null);
 
   function requestFullEntry({entryId}: {entryId: t.EntryId}) {
     if (entryId in entries.value && entries.value[entryId].body !== null) {
@@ -104,7 +100,6 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     requestFullEntry,
     setMarker,
     removeMarker,
-    firstTimeEntriesLoading,
     loadedEntriesReport
   };
 });

package/src/style.css

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply font-serif bg-slate-100;
+  }
+
+  h1 {
+    @apply text-3xl font-bold leading-tight my-4;
+  }
+
+  h2 {
+    @apply text-2xl font-semibold leading-relaxed my-3;
+  }
+
+  hr {
+    @apply border-slate-400 my-2;
+  }
+
+  p,
+  ul,
+  ol,
+  table {
+    @apply mb-1;
+  }
+
+  p a {
+    @apply text-blue-600 hover:text-blue-800 cursor-pointer;
+  }
+
+  .ffun-info-common {
+    @apply border-2 p-2 my-1 rounded;
+  }
+
+  .ffun-info-good {
+    @apply ffun-info-common border-green-300 bg-green-50;
+  }
+
+  .ffun-info-bad {
+    @apply ffun-info-common border-red-300 bg-red-50;
+  }
+
+  .ffun-info-warning {
+    @apply ffun-info-common border-orange-300 bg-orange-50;
+  }
+
+  .ffun-info-attention {
+    @apply ffun-info-common border-purple-300 bg-purple-50;
+  }
+
+  .ffun-header-link {
+    @apply text-blue-600 hover:text-blue-800 cursor-pointer text-lg;
+  }
+
+  .ffun-normal-link {
+    @apply text-blue-600 hover:text-blue-800 cursor-pointer;
+  }
+
+  .ffun-header-link-disabled {
+    @apply text-lg underline underline-offset-4;
+  }
+
+  .ffun-input-common {
+    @apply border-2 rounded bg-slate-50 hover:bg-blue-50 enabled:hover:border-blue-400 px-1 disabled:bg-orange-50;
+  }
+
+  .ffun-form-button {
+    @apply ffun-input-common border-blue-300 disabled:bg-blue-700/75 py-1;
+  }
+
+  .ffun-file-button {
+    @apply file:border-2 file:rounded file:bg-slate-50 file:hover:bg-blue-50 file:enabled:hover:border-blue-400 file:px-1 file:disabled:bg-orange-50  file:border-blue-300 file:disabled:bg-blue-700/75 file:py-1 file:shadow-none file:border-solid text-slate-500;
+  }
+
+  .ffun-config-flag {
+    @apply ffun-input-common border-blue-300 disabled:bg-blue-700/75 py-0;
+  }
+
+  .ffun-input {
+    @apply ffun-input-common border-blue-200 focus:border-blue-300 focus:outline-none placeholder-gray-500 py-1;
+  }
+
+  .ffun-checkbox {
+    @apply ffun-input-common h-4 w-4 align-middle;
+  }
+
+  .ffun-normalized-text ul {
+    @apply list-disc list-inside;
+  }
+}

package/src/values/Score.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="score"
+    class="inline-block cursor-pointer font-semibold text-purple-700"
     @click.prevent="onClick()">
     {{ value }}
   </div>
@@ -45,12 +45,3 @@
     alert(strings.join("\n"));
   }
 </script>
-
-<style scoped>
-  .score {
-    display: inline-block;
-    cursor: pointer;
-    padding: 0.1rem;
-    background-color: #c1c1ff;
-  }
-</style>

package/src/views/AuthView.vue

@@ -2,14 +2,10 @@
   <wide-layout>
     <template #header> Feeds Fun </template>
 
-    <div v-if="!linkProcessed">Checking login status...</div>
+    <div class="ffun-info-good">
+      <p v-if="!linkProcessed">Checking login status...</p>
 
-    <div v-else-if="globalState.isLoggedIn">
-      <button @click="goToWorkspace()">Go To Feeds</button>
-    </div>
-
-    <div v-else>
-      <supertokens-login />
+      <supertokens-login v-else />
     </div>
   </wide-layout>
 </template>

package/src/views/CollectionsView.vue

@@ -2,6 +2,8 @@
   <side-panel-layout :reload-button="false">
     <template #main-header> Collections </template>
 
+    <p> Try to subscribe for the feeds collections that we are preparing for you! </p>
+
     <feeds-collections />
   </side-panel-layout>
 </template>