feeds-fun 0.6.0 → 1.2.0

package/src/components/NotificationOpenaiApiKey.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="ffun-info-attention">
+    <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 this on the
+      <a
+        href="#"
+        @click.prevent="router.push({name: e.MainPanelMode.Settings, params: {}})"
+        >settings</a
+      >
+      page.
+    </p>
+
+    <user-setting-for-notification
+      kind="openai_hide_message_about_setting_up_key"
+      button-text="Hide this message" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {useRouter} from "vue-router";
+  import * as e from "@/logic/enums";
+
+  const router = useRouter();
+</script>

package/src/components/Notifications.vue

@@ -0,0 +1,32 @@
+<template>
+  <notification-openai-api-key v-if="showOpenAIKeyNotification" />
+  <notification-collections v-if="showCollectionsNotification" />
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const properties = defineProps<{
+    openaiApiKey: boolean;
+    collections: boolean;
+  }>();
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const showApiKeyMessage = computed(() => {
+    return (
+      globalSettings.userSettings &&
+      !globalSettings.userSettings.openai_api_key.value &&
+      !globalSettings.userSettings.openai_hide_message_about_setting_up_key.value
+    );
+  });
+
+  const showCollectionsNotification = computed(() => {
+    return properties.collections;
+  });
+
+  const showOpenAIKeyNotification = computed(() => {
+    return !showCollectionsNotification.value && properties.openaiApiKey && showApiKeyMessage.value;
+  });
+</script>

package/src/components/OPMLUpload.vue

@@ -2,8 +2,11 @@
   <div>
     <input
       type="file"
+      class="ffun-file-button"
       @change="uploadFile" />
+
     <button
+      class="ffun-form-button"
       type="submit"
       @click.prevent="submit"
       >Submit</button

package/src/components/RuleConstructor.vue

@@ -1,22 +1,11 @@
 <template>
-  <div class="rule-constructor">
-    <p>Select tags to score news by them.</p>
-
-    <template
-      v-for="tag of tags"
-      :key="tag">
-      <ffun-tag
-        :uid="tag"
-        mode="required" />&nbsp;
-    </template>
-
-    <br />
-
-    <score-selector v-model="currentScore" />
-
-    &nbsp;
+  <div class="">
+    <score-selector
+      class="inline-block mr-2"
+      v-model="currentScore" />
 
     <a
+      class="ffun-form-button"
       href="#"
       v-if="canCreateRule"
       @click.prevent="createOrUpdateRule()"
@@ -27,9 +16,12 @@
 
 <script lang="ts" setup>
   import {computed, ref} from "vue";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import * as api from "@/logic/api";
   const properties = defineProps<{tags: string[]}>();
 
+  const globalSettings = useGlobalSettingsStore();
+
   const emit = defineEmits(["rule-constructor:created"]);
 
   // fibonacci numbers
@@ -43,14 +35,14 @@
 
   async function createOrUpdateRule() {
     await api.createOrUpdateRule({tags: properties.tags, score: currentScore.value});
+
+    // this line leads to the reloading of news and any other data
+    // not an elegant solution, but it works with the current API implementation
+    // TODO: try to refactor to only update scores of news:
+    //       - without reloading
+    //       - maybe, without reordering too
+    globalSettings.updateDataVersion();
+
     emit("rule-constructor:created");
   }
 </script>
-
-<style scoped>
-  .rule-constructor {
-    padding: 0.25rem;
-    margin: 0.25rem;
-    border: 1px solid #ccc;
-  }
-</style>

package/src/components/RuleForList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    v-if="rule !== null"
+    class="flex mb-1">
+    <div class="flex-shrink-0 min-w-fit mr-2">
+      <a
+        href="#"
+        class="ffun-normal-link"
+        @click.prevent="deleteRule()">
+        remove
+      </a>
+    </div>
+
+    <rule-score-updater
+      class="flex-shrink-0 mr-2"
+      :score="rule.score"
+      :rule-id="rule.id"
+      :tags="rule.tags" />
+
+    <div class="flex-grow">
+      <template
+        v-for="tag of rule.tags"
+        :key="tag">
+        <ffun-tag :uid="tag" />&nbsp;
+      </template>
+    </div>
+  </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 DOMPurify from "dompurify";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const properties = defineProps<{rule: t.Rule}>();
+
+  async function deleteRule() {
+    await api.deleteRule({id: properties.rule.id});
+    globalSettings.updateDataVersion();
+  }
+</script>

package/src/components/RulesList.vue

@@ -1,38 +1,11 @@
 <template>
-  <table>
-    <thead>
-      <tr>
-        <th>score</th>
-        <th>tags</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="rule in rules"
-        :key="rule.id">
-        <td>
-          <rule-score-updater
-            :score="rule.score"
-            :rule-id="rule.id"
-            :tags="rule.tags" />
-        </td>
-        <td>
-          <template
-            v-for="tag of rule.tags"
-            :key="tag">
-            <ffun-tag :uid="tag" />&nbsp;
-          </template>
-        </td>
-        <td>
-          <a
-            href="#"
-            @click.prevent="deleteRule(rule.id)"
-            >delete</a
-          >
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <ul>
+    <li
+      v-for="rule in rules"
+      :key="rule.id">
+      <rule-for-list :rule="rule" />
+    </li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
@@ -42,13 +15,4 @@
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
 
   defineProps<{rules: Array<t.Rule>}>();
-
-  const globalSettings = useGlobalSettingsStore();
-
-  async function deleteRule(id: t.RuleId) {
-    await api.deleteRule({id: id});
-    globalSettings.updateDataVersion();
-  }
 </script>
-
-<style></style>

package/src/components/SimplePagination.vue

@@ -1,14 +1,16 @@
 <template>
   <div>
+    {{ realShowEntries }} of {{ total }}
+
     <button
+      class="ffun-form-button ml-2"
       v-if="canShowMore"
       @click.prevent="showMore()">
       next {{ realShowPerPage }}
     </button>
 
-    <span v-if="canShowMore && canHide"> | </span>
-
     <button
+      class="ffun-form-button ml-2"
       v-if="canHide"
       @click.prevent="hideAll()"
       >hide</button
@@ -19,8 +21,6 @@
       style="line-height: 0.5rem"
       >&nbsp;</div
     >
-
-    shown {{ realShowEntries }} / {{ total }}
   </div>
 </template>
 
@@ -77,5 +77,3 @@
     return showEntries.value < properties.total;
   });
 </script>
-
-<style></style>

package/src/components/SupertokensLogin.vue

@@ -1,46 +1,62 @@
 <template>
-  <div>
+  <div v-if="globalState.isLoggedIn">
+    <p class="">You have already logged in.</p>
+    <button
+      class="text-blue-600 hover:text-blue-800 text-xl pt-0"
+      @click.prevent="goToWorkspace()"
+      >Go To Feeds ⇒</button
+    >
+  </div>
+
+  <div v-else>
     <template v-if="!requested">
-      <p>Will send you an email with a login link.</p>
+      <p class="text-left">We'll send you an email with a login link.</p>
 
-      <p>If you don&apos;t have an account, one will be created.</p>
+      <p class="text-left">If you don&apos;t have an account, one will be created.</p>
 
-      <form @submit.prevent="login()">
+      <form
+        @submit.prevent="login()"
+        class="w-full flex">
         <input
+          class="ffun-input flex-grow p-1 mr-2"
           type="email"
           v-model="email"
           required
-          placeholder="your-account-email@example.com" />
-        <button type="submit">Login</button>
+          placeholder="me@example.com" />
+        <button
+          class="ffun-form-button"
+          type="submit"
+          >Login</button
+        >
       </form>
     </template>
 
     <template v-else>
-      <p>
-        Email with login link has been sent to <strong>{{ email }}</strong>
+      <p class="">
+        Login link was sent to <strong>{{ email }}</strong>
+
+        <a
+          class="ml-1"
+          @click.prevent="onChangeEmail()"
+          >change</a
+        >
       </p>
 
       <button
+        v-if="!counting"
         type="button"
-        class="btn btn-primary"
-        :disabled="counting">
-        <vue-countdown
-          v-if="counting"
-          :time="supertokens.allowResendAfter"
-          @end="onCountdownEnd"
-          v-slot="{totalSeconds}">
-          Resend the email in {{ totalSeconds }} seconds.
-        </vue-countdown>
-        <span
-          v-else
-          @click.prevent="resend()"
-          >Resend email</span
-        >
+        class="btn btn-primary ffun-form-button">
+        <span @click.prevent="resend()">Resend email</span>
       </button>
 
-      <br /><br />
-
-      <button @click.prevent="onChangeEmail()">Change email</button>
+      <vue-countdown
+        v-else
+        :time="supertokens.allowResendAfter"
+        @end="onCountdownEnd"
+        class=""
+        v-slot="{totalSeconds}">
+        Resend in {{ totalSeconds }} seconds
+      </vue-countdown>
     </template>
   </div>
 </template>
@@ -54,7 +70,12 @@
   import DOMPurify from "dompurify";
   import {useEntriesStore} from "@/stores/entries";
   import {useSupertokens} from "@/stores/supertokens";
+  import {useGlobalState} from "@/stores/globalState";
+  import {useRouter} from "vue-router";
   import * as settings from "@/logic/settings";
+  const router = useRouter();
+
+  const globalState = useGlobalState();
 
   const supertokens = useSupertokens();
 
@@ -106,6 +127,10 @@
     await supertokens.clearLoginAttempt();
   }
 
+  function goToWorkspace() {
+    router.push({name: e.MainPanelMode.Entries, params: {}});
+  }
+
   onMounted(async () => {
     if (settings.authMode === settings.AuthMode.SingleUser) {
       return true;

package/src/components/TagsFilter.vue

@@ -2,40 +2,40 @@
   <div>
     <ul
       v-if="displayedSelectedTags.length > 0"
-      style="list-style: none; padding: 0; margin: 0">
+      class="pl-0 mb-0">
       <li
-        class="filter-element"
         v-for="tag of displayedSelectedTags"
-        :key="tag">
+        :key="tag"
+        class="whitespace-nowrap line-clamp-1">
+        <a
+          href="#"
+          @click.prevent="deselect(tag)"
+          >[X]</a
+        >
         <ffun-tag
+          class="ml-1"
           :uid="tag"
           :count="tags[tag] ?? 0"
           count-mode="no"
           :mode="tagStates[tag]"
           @tag:clicked="onTagClicked">
-          <template #start>
-            <a
-              href="#"
-              @click.prevent="deselect(tag)"
-              >[X]</a
-            >
-          </template>
         </ffun-tag>
       </li>
     </ul>
 
     <input
+      class="ffun-input w-full"
       type="text"
       placeholder="Input part of tag..."
       v-model="tagNameFilter" />
 
     <ul
       v-if="displayedTags.length > 0"
-      style="list-style: none; padding: 0; margin: 0">
+      class="pl-0 mb-0">
       <li
-        class="filter-element"
         v-for="tag of displayedTags"
-        :key="tag">
+        :key="tag"
+        class="truncate">
         <ffun-tag
           :uid="tag"
           :count="tags[tag]"
@@ -172,15 +172,3 @@
     emit("tag:stateChanged", {tag: tag, state: tagStates.value[tag]});
   }
 </script>
-
-<style scoped>
-  .filter-element {
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .filter-element value-tag {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>

package/src/components/TagsList.vue

@@ -1,32 +1,36 @@
 <template>
   <div>
+    <div class="text-sm">
+      <ffun-tag
+        v-for="tag of displayedTags"
+        :key="tag"
+        :uid="tag"
+        :mode="tagMode(tag)"
+        :count="tagsCount[tag]"
+        count-mode="tooltip"
+        @tag:clicked="onTagClicked" />
+
+      <a
+        class="ffun-normal-link"
+        href="#"
+        v-if="canShowAll"
+        @click.prevent="showAll = true"
+        >{{ tagsNumber - showLimit }} more</a
+      >
+
+      <a
+        class="ffun-normal-link"
+        href="#"
+        v-if="canHide"
+        @click.prevent="showAll = false"
+        >hide</a
+      >
+    </div>
+
     <rule-constructor
       v-if="selectedTagsList.length > 0"
       :tags="selectedTagsList"
       @rule-constructor:created="onRuleCreated" />
-
-    <ffun-tag
-      v-for="tag of displayedTags"
-      :key="tag"
-      :uid="tag"
-      :mode="tagMode(tag)"
-      :count="tagsCount[tag]"
-      count-mode="tooltip"
-      @tag:clicked="onTagClicked" />
-
-    <a
-      href="#"
-      v-if="canShowAll"
-      @click.prevent="showAll = true"
-      >{{ tagsNumber - showLimit }} more</a
-    >
-
-    <a
-      href="#"
-      v-if="canHide"
-      @click.prevent="showAll = false"
-      >hide</a
-    >
   </div>
 </template>
 
@@ -159,5 +163,3 @@
     selectedTags.value = {};
   }
 </script>
-
-<style></style>

package/src/components/UserSetting.vue

@@ -1,44 +1,52 @@
 <template>
   <div
     v-if="setting !== null"
-    style="margin-bottom: 1rem">
-    <label>
-      <strong>{{ setting.name }}:</strong>
-      &nbsp;
-      <input
-        v-if="editing"
-        type="input"
-        v-model="value" />
-      <span v-else>{{ verboseValue }}</span>
-    </label>
-
-    &nbsp;
-
-    <template v-if="setting.type == 'boolean'">
-      <button
-        v-if="!setting.value"
-        @click.prevent="turnOn()"
-        >Turn on</button
-      >
+    class="mb-4">
+    <span class="font-semibold mr-1">{{ setting.name }}</span>
+
+    <input
+      class="ffun-input"
+      v-if="editing"
+      type="input"
+      v-model="value" />
+
+    <input
+      v-else-if="setting.type !== 'boolean'"
+      class="ffun-input"
+      disabled
+      :value="verboseValue" />
+
+    <config-flag
+      v-if="setting.type == 'boolean'"
+      style="min-width: 2.5rem"
+      :flag="setting.value"
+      @update:flag="updateFlag($event)"
+      on-text="No"
+      off-text="Yes" />
 
+    <template v-else-if="!editing">
       <button
-        v-if="setting.value"
-        @click.prevent="turnOff()"
-        >Turn off</button
+        class="ffun-form-button ml-1"
+        @click.prevent="startEditing()"
+        >Edit</button
       >
     </template>
 
-    <template v-else-if="!editing">
-      <button @click.prevent="startEditing()">Edit</button>
-    </template>
-
     <template v-else>
-      <button @click.prevent="save()">Save</button>
-      &nbsp;
-      <button @click.prevent="cancel()">Cancel</button>
+      <button
+        @click.prevent="save()"
+        class="ffun-form-button ml-1"
+        >Save</button
+      >
+      <button
+        @click.prevent="cancel()"
+        class="ffun-form-button ml-1"
+        >Cancel</button
+      >
     </template>
 
     <div
+      class="ffun-normalized-text"
       v-if="setting.description"
       v-html="setting.description" />
   </div>
@@ -74,7 +82,7 @@
 
   const verboseValue = computed(() => {
     if (setting.value === null) {
-      return "—";
+      return "no value";
     }
 
     const v = setting.value.value;
@@ -85,7 +93,7 @@
     }
 
     if (v == null || v == "") {
-      return "—";
+      return "no value";
     }
 
     if (type == "secret") {
@@ -115,13 +123,8 @@
     editing.value = true;
   }
 
-  async function turnOn() {
-    value.value = true;
-    await save();
-  }
-
-  async function turnOff() {
-    value.value = false;
+  async function updateFlag(newValue: any) {
+    value.value = newValue;
     await save();
   }
 </script>