feeds-fun 0.0.4

package/src/components/FeedInfo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h3>
+      <a
+        :href="feed.url"
+        target="_blank"
+        rel="noopener noreferrer">
+        {{ feed.title }}
+      </a>
+    </h3>
+
+    <p v-html="feed.description" />
+
+    <ul>
+      <li
+        v-for="entry in feed.entries"
+        :key="entry.url">
+        <entry-info :entry="entry" />
+      </li>
+    </ul>
+  </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<{feed: t.FeedInfo}>();
+</script>
+
+<style scoped></style>

package/src/components/FeedsCollections.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <template v-for="item in collections">
+      <input
+        type="checkbox"
+        :id="item"
+        :name="item"
+        :value="item"
+        v-model="selectedCollections"
+        checked />
+      <label :for="item">{{ item }}</label>
+      <br />
+    </template>
+
+    <br />
+
+    <button @click="subscribe()">Subscribe</button>
+  </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 {useEntriesStore} from "@/stores/entries";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const selectedCollections = ref<t.FeedsCollectionId[]>([]);
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const collections = computedAsync(async () => {
+    const collections = await api.getFeedsCollections();
+
+    for (const collectionId of collections) {
+      selectedCollections.value.push(collectionId);
+    }
+
+    return collections;
+  });
+
+  async function subscribe() {
+    await api.subscribeToFeedsCollections({
+      collectionsIds: selectedCollections.value
+    });
+    globalSettings.updateDataVersion();
+  }
+</script>
+
+<style scoped></style>

package/src/components/FeedsList.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <template v-if="feeds === null || feeds.length == 0">
+      <p>No feeds</p>
+    </template>
+
+    <template v-else>
+      <ul style="list-style-type: none; margin: 0; padding: 0">
+        <li
+          v-for="feed in feeds"
+          :key="feed.id"
+          style="margin-bottom: 0.25rem">
+          <feed-for-list :feed="feed" />
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import type * as t from "@/logic/types";
+
+  const properties = defineProps<{feeds: Array<t.Feed>}>();
+</script>
+
+<style scoped></style>

package/src/components/FfunGithubButtons.vue

@@ -0,0 +1,22 @@
+<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>

package/src/components/FfunTag.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    :class="classes"
+    :title="tooltip"
+    @click.prevent="onClick()">
+    <slot name="start"> </slot>
+
+    <span v-if="countMode == 'prefix'">[{{ count }}]</span>
+
+    {{ tagInfo.name }}
+
+    <a
+      v-if="tagInfo.link"
+      :href="tagInfo.link"
+      target="_blank"
+      @click.stop=""
+      style="text-decoration: none"
+      rel="noopener noreferrer">
+      &#8599;
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import * as t from "@/logic/types";
+  import {computed, ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+
+  const tagsStore = useTagsStore();
+
+  const properties = defineProps<{
+    uid: string;
+    count?: number | null;
+    countMode?: string | null;
+    mode?: string | null;
+  }>();
+
+  const tagInfo = computed(() => {
+    const tagInfo = tagsStore.tags[properties.uid];
+
+    if (tagInfo) {
+      return tagInfo;
+    }
+
+    tagsStore.requestTagInfo({tagUid: properties.uid});
+
+    return t.noInfoTag(properties.uid);
+  });
+
+  const emit = defineEmits(["tag:clicked"]);
+
+  const classes = computed(() => {
+    const result: {[key: string]: boolean} = {
+      tag: true
+    };
+
+    if (properties.mode) {
+      result[properties.mode] = true;
+    }
+
+    return result;
+  });
+
+  function onClick() {
+    emit("tag:clicked", properties.uid);
+  }
+
+  const tooltip = computed(() => {
+    if (properties.countMode == "tooltip" && properties.count) {
+      return `articles with the tag: ${properties.count} (${properties.uid})`;
+    }
+    return "";
+  });
+</script>
+
+<style scoped>
+  .tag {
+    display: inline-block;
+    cursor: pointer;
+    padding: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .tag.selected {
+    background-color: #ccccff;
+  }
+
+  .tag.required {
+    background-color: #ccffcc;
+  }
+
+  .tag.excluded {
+    background-color: #ffcccc;
+  }
+</style>

package/src/components/OPMLUpload.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <input
+      type="file"
+      @change="uploadFile" />
+    <button
+      type="submit"
+      @click.prevent="submit"
+      >Submit</button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import * 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 opmlFile = ref<File | null>(null);
+
+  function uploadFile(event: Event) {
+    opmlFile.value = (event.target as HTMLInputElement).files?.[0] ?? null;
+  }
+
+  async function submit() {
+    if (opmlFile.value === null) {
+      return;
+    }
+
+    const reader = new FileReader();
+
+    reader.readAsText(opmlFile.value);
+    const content = await new Promise<string>((resolve) => {
+      reader.onload = () => {
+        resolve(reader.result as string);
+      };
+    });
+
+    await api.addOPML({content: content});
+  }
+</script>
+
+<style scoped></style>

package/src/components/OpenaiTokensUsage.vue

@@ -0,0 +1,61 @@
+<template>
+  <tr>
+    <td>{{ period }}</td>
+    <td style="text-align: right">{{ usage.used }}</td>
+    <td style="text-align: right">{{ usage.reserved }}</td>
+    <td style="text-align: right">{{ usage.total() }}</td>
+    <td style="text-align: right">{{ percents }}%</td>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import * as api from "@/logic/api";
+  import type * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const properties = defineProps<{
+    usage: t.ResourceHistoryRecord;
+  }>();
+
+  const globalSettings = useGlobalSettingsStore();
+
+  globalSettings.mainPanelMode = e.MainPanelMode.Settings;
+
+  const openAIUsage = computedAsync(async () => {
+    return await api.getResourceHistory({kind: "openai_tokens"});
+  }, null);
+
+  const period = computed(() => {
+    return properties.usage.intervalStartedAt.toLocaleString("default", {month: "long", year: "numeric"});
+  });
+
+  const percents = computed(() => {
+    if (globalSettings.userSettings == null) {
+      return "—";
+    }
+
+    const setting = globalSettings.userSettings["openai_max_tokens_in_month"];
+
+    if (!setting) {
+      return "—";
+    }
+
+    if (typeof setting.value !== "number") {
+      return "—";
+    }
+
+    const limit: number = setting.value;
+    const total = properties.usage.total();
+
+    if (limit == 0) {
+      return "—";
+    }
+
+    return ((total / limit) * 100).toFixed(5);
+  });
+</script>
+
+<style></style>

package/src/components/RuleConstructor.vue

@@ -0,0 +1,56 @@
+<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;
+
+    <a
+      href="#"
+      v-if="canCreateRule"
+      @click.prevent="createRule()"
+      >create rule</a
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import * as api from "@/logic/api";
+  const properties = defineProps<{tags: string[]}>();
+
+  const emit = defineEmits(["rule-constructor:created"]);
+
+  // fibonacci numbers
+  const scores = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610];
+
+  const currentScore = ref(1);
+
+  const canCreateRule = computed(() => {
+    return properties.tags.length > 0;
+  });
+
+  async function createRule() {
+    await api.createRule({tags: properties.tags, score: currentScore.value});
+    emit("rule-constructor:created");
+  }
+</script>
+
+<style scoped>
+  .rule-constructor {
+    padding: 0.25rem;
+    margin: 0.25rem;
+    border: 1px solid #ccc;
+  }
+</style>

package/src/components/RuleScoreUpdater.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <score-selector
+      :modelValue="currentScore"
+      @input="updateSelected" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import * as api from "@/logic/api";
+  import type * as t from "@/logic/types";
+
+  const properties = defineProps<{
+    score: number;
+    ruleId: t.RuleId;
+    tags: string[];
+  }>();
+
+  const currentScore = ref(properties.score);
+
+  async function updateSelected(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newScore = Number(target.value);
+    await api.updateRule({
+      id: properties.ruleId,
+      score: newScore,
+      tags: properties.tags
+    });
+  }
+</script>
+
+<style scoped></style>

package/src/components/RulesList.vue

@@ -0,0 +1,52 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>score</th>
+        <th>tags</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="rule in rules">
+        <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>
+</template>
+
+<script lang="ts" setup>
+  import type * as t from "@/logic/types";
+  import * as api from "@/logic/api";
+  import * as e from "@/logic/enums";
+  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

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <button
+      v-if="canShowMore"
+      @click.prevent="showMore()">
+      next {{ realShowPerPage }}
+    </button>
+
+    <span v-if="canShowMore && canHide"> | </span>
+
+    <button
+      v-if="canHide"
+      @click.prevent="hideAll()"
+      >hide</button
+    >
+
+    <div
+      v-if="counterOnNewLine"
+      style="line-height: 0.5rem"
+      >&nbsp;</div
+    >
+
+    shown {{ realShowEntries }} / {{ total }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import * as t from "@/logic/types";
+  import {computedAsync} from "@vueuse/core";
+
+  const properties = defineProps<{
+    showFromStart: number;
+    showPerPage: number;
+    total: number;
+    counterOnNewLine: boolean;
+  }>();
+
+  const showEntries = ref(properties.showFromStart);
+
+  const emit = defineEmits(["update:showEntries"]);
+
+  emit("update:showEntries", showEntries.value);
+
+  function showMore() {
+    showEntries.value += properties.showPerPage;
+
+    if (showEntries.value > properties.total) {
+      showEntries.value = properties.total;
+    }
+
+    emit("update:showEntries", showEntries.value);
+  }
+
+  function hideAll() {
+    showEntries.value = properties.showFromStart;
+    emit("update:showEntries", showEntries.value);
+  }
+
+  const realShowPerPage = computed(() => {
+    return Math.min(properties.showPerPage, properties.total - showEntries.value);
+  });
+
+  const realShowEntries = computed(() => {
+    const size = Math.min(showEntries.value, properties.total);
+
+    emit("update:showEntries", size);
+
+    return size;
+  });
+
+  const canHide = computed(() => {
+    return showEntries.value > properties.showFromStart;
+  });
+
+  const canShowMore = computed(() => {
+    return showEntries.value < properties.total;
+  });
+</script>
+
+<style></style>

package/src/components/SupertokensLogin.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <template v-if="!requested">
+      <p>Will send you an email with a login link.</p>
+
+      <p>If you don&apos;t have an account, one will be created.</p>
+
+      <form @submit.prevent="login()">
+        <input
+          type="email"
+          v-model="email"
+          required
+          placeholder="your-account-email@example.com" />
+        <button type="submit">Login</button>
+      </form>
+    </template>
+
+    <template v-else>
+      <p>
+        Email with login link has been sent to <strong>{{ email }}</strong>
+      </p>
+
+      <button
+        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
+        >
+      </button>
+
+      <br /><br />
+
+      <button @click.prevent="onChangeEmail()">Change email</button>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onMounted} from "vue";
+  import * 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 {useEntriesStore} from "@/stores/entries";
+  import {useSupertokens} from "@/stores/supertokens";
+  import * as settings from "@/logic/settings";
+
+  const supertokens = useSupertokens();
+
+  const requested = ref(false);
+
+  const counting = ref(false);
+
+  const email = ref("");
+
+  async function afterEmailSend(success: boolean) {
+    if (success) {
+      return;
+    }
+
+    window.alert("Something went wrong. Please try again.");
+    requested.value = false;
+    counting.value = false;
+    await supertokens.clearLoginAttempt();
+  }
+
+  function beforeEmailSend() {
+    window.alert("Please check your email for the magic link");
+    requested.value = true;
+    counting.value = true;
+  }
+
+  async function login() {
+    beforeEmailSend();
+
+    const success = await supertokens.sendMagicLink(email.value);
+
+    await afterEmailSend(success);
+  }
+
+  async function resend() {
+    beforeEmailSend();
+
+    const success = await supertokens.resendMagicLink();
+
+    await afterEmailSend(success);
+  }
+
+  function onCountdownEnd() {
+    counting.value = false;
+  }
+
+  async function onChangeEmail() {
+    requested.value = false;
+    await supertokens.clearLoginAttempt();
+  }
+
+  onMounted(async () => {
+    if (settings.authMode === settings.AuthMode.SingleUser) {
+      return true;
+    }
+
+    requested.value = await supertokens.hasInitialMagicLinkBeenSent();
+  });
+</script>
+
+<style scoped></style>