feeds-fun 1.16.6 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.16.6",
+  "version": "1.17.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/DiscoveryForm.vue

@@ -18,7 +18,7 @@
 
     <p
       v-if="searching"
-      class="ffun-info-attention"
+      class="ffun-info-waiting mt-2"
       >Searching for feeds…</p
     >
 
@@ -26,10 +26,8 @@
 
     <div
       v-else-if="foundFeeds.length === 0"
-      class="ffun-info-attention">
-      <p
-        class="ffun-info-error"
-        v-for="message in messages">
+      class="ffun-info-bad mt-2">
+      <p v-for="message in messages">
         {{ message.message }}
       </p>
 

package/src/components/EntriesList.vue

@@ -5,7 +5,7 @@
         <li
           v-for="entryId in entriesToShow"
           :key="entryId"
-          class="mb-1 entry-block">
+          class="ffun-body-list-entry">
           <entry-for-list
             :entryId="entryId"
             :time-field="timeField"
@@ -47,13 +47,3 @@
     return properties.entriesIds.slice(0, showEntries.value);
   });
 </script>
-
-<style scoped>
-  .entry-block {
-  }
-
-  .entry-block:not(:last-child) {
-    border-bottom-width: 1px;
-    @apply py-1;
-  }
-</style>

package/src/components/EntryForList.vue

@@ -1,28 +1,21 @@
 <template>
   <div
     ref="entryTop"
-    class="flex text-lg">
-    <div :class="['flex-shrink-0', 'text-right', {'ml-8': isRead}]">
-      <input-marker
-        class="w-7 mr-2"
-        :marker="e.Marker.Read"
-        :entry-id="entryId">
-        <template v-slot:marked>
-          <span
-            class="text-green-700 no-underline"
-            title="Mark as unread">
-            <i class="ti ti-chevrons-left" />
-          </span>
-        </template>
-
-        <template v-slot:unmarked>
-          <span
-            class="text-orange-700 no-underline"
-            title="Mark as read">
-            <i class="ti ti-chevrons-right" />
-          </span>
-        </template>
-      </input-marker>
+    :class="['flex', 'text-lg', {'ml-8': isRead}]">
+    <div class="ffun-body-list-icon-column">
+      <a
+        v-if="isRead"
+        href="#"
+        @click.prevent="markUnread()"
+        title="Mark as unread"
+        class="text-green-700 ti ti-chevrons-left" />
+
+      <a
+        v-else
+        href="#"
+        @click.prevent="markRead()"
+        title="Mark as read"
+        class="text-orange-700 ti ti-chevrons-right" />
     </div>
 
     <div class="flex-shrink-0 w-8 text-center pr-1">
@@ -31,11 +24,7 @@
         :entry-id="entry.id" />
     </div>
 
-    <div class="flex-shrink-0 w-8 text-right pr-1">
-      <favicon-element
-        :url="entry.url"
-        class="w-5 h-5 align-text-bottom mx-1 inline" />
-    </div>
+    <body-list-favicon-column :url="entry.url" />
 
     <div class="flex-grow">
       <a
@@ -46,7 +35,7 @@
         {{ purifiedTitle }}
       </a>
 
-      <tags-list
+      <entry-tags-list
         class="mt-0 pt-0"
         :tags="entry.tags"
         :tags-count="tagsCount"
@@ -55,34 +44,19 @@
         :contributions="entry.scoreContributions" />
     </div>
 
-    <div class="flex flex-shrink-0">
-      <div class="w-7">
-        <value-date-time
-          :value="timeFor"
-          :reversed="true" />
-      </div>
-    </div>
+    <body-list-reverse-time-column
+      :title="timeForTooltip"
+      :time="timeFor" />
   </div>
 
-  <div
+  <body-list-entry-body
     v-if="showBody"
-    class="flex justify-center my-1">
-    <div class="max-w-3xl flex-1 bg-slate-50 border-2 rounded p-4">
-      <h2 class="mt-0"
-        ><a
-          :href="entry.url"
-          target="_blank"
-          @click="newsLinkOpenedEvent"
-          >{{ purifiedTitle }}</a
-        ></h2
-      >
-      <p v-if="entry.body === null">loading...</p>
-      <div
-        v-if="entry.body !== null"
-        class="prose max-w-none"
-        v-html="purifiedBody" />
-    </div>
-  </div>
+    class="justify-center"
+    :url="entry.url"
+    :title="purifiedTitle"
+    :loading="entry.body === null"
+    :text="purifiedBody"
+    @body-title-clicked="newsLinkOpenedEvent" />
 </template>
 
 <script lang="ts" setup>
@@ -91,6 +65,7 @@
   import type * as t from "@/logic/types";
   import * as events from "@/logic/events";
   import * as e from "@/logic/enums";
+  import * as utils from "@/logic/utils";
   import {computedAsync} from "@vueuse/core";
   import DOMPurify from "dompurify";
   import {useEntriesStore} from "@/stores/entries";
@@ -129,30 +104,28 @@
     return _.get(entry.value, properties.timeField, null);
   });
 
-  const purifiedTitle = computed(() => {
+  const timeForTooltip = computed(() => {
     if (entry.value === null) {
       return "";
     }
 
-    // TODO: remove emojis?
-    let title = DOMPurify.sanitize(entry.value.title, {ALLOWED_TAGS: []});
+    if (properties.timeField === "publishedAt") {
+      return "How long ago the news was published";
+    }
 
-    if (title.length === 0) {
-      title = "No title";
+    if (properties.timeField === "catalogedAt") {
+      return "How long ago the news was collected";
     }
 
-    return title;
+    return "";
   });
 
-  const purifiedBody = computed(() => {
-    if (entry.value === null) {
-      return "";
-    }
+  const purifiedTitle = computed(() => {
+    return utils.purifyTitle({raw: entry.value.title, default_: "No title"});
+  });
 
-    if (entry.value.body === null) {
-      return "";
-    }
-    return DOMPurify.sanitize(entry.value.body);
+  const purifiedBody = computed(() => {
+    return utils.purifyBody({raw: entry.value.body, default_: "No description"});
   });
 
   async function newsLinkOpenedEvent() {
@@ -191,4 +164,18 @@
   onMounted(() => {
     entriesStore.requestFullEntry({entryId: properties.entryId});
   });
+
+  async function markUnread() {
+    await entriesStore.removeMarker({
+      entryId: properties.entryId,
+      marker: e.Marker.Read
+    });
+  }
+
+  async function markRead() {
+    await entriesStore.setMarker({
+      entryId: properties.entryId,
+      marker: e.Marker.Read
+    });
+  }
 </script>

package/src/components/FeedForList.vue

@@ -1,57 +1,41 @@
 <template>
   <div
     v-if="feed !== null"
-    class="flex mb-1">
-    <div class="flex-shrink-0 min-w-fit pr-2">
+    class="flex text-lg">
+    <div class="ffun-body-list-icon-column">
       <a
         href="#"
-        class="ffun-normal-link"
+        class="ti ti-x text-red-500 hover:text-red-600"
+        title="Unsubscribe"
         @click.prevent="feedsStore.unsubscribe(feed.id)">
-        remove
       </a>
     </div>
 
-    <div
-      class="flex-shrink-0 w-12 pr-2 text-right cursor-default"
-      title="Time of last load">
-      <value-date-time
-        :value="feed.loadedAt"
-        :reversed="true" />
-    </div>
+    <body-list-reverse-time-column
+      title="How long ago the feed was last checked for news"
+      :time="feed.loadedAt" />
 
-    <div
-      class="flex-shrink-0 w-12 pr-2 text-right cursor-default"
-      title="When was added">
-      <value-date-time
-        :value="feed.linkedAt"
-        :reversed="true" />
-    </div>
+    <body-list-reverse-time-column
+      title="How long ago the feed was added"
+      :time="feed.linkedAt" />
 
-    <div class="flex-shrink-0 w-8 pr-1 text-right cursor-default">
-      <span
+    <div class="ffun-body-list-icon-column ml-3">
+      <i
         v-if="feed.isOk"
         title="everything is ok"
-        class="text-green-700 cursor-default"
-        >ok</span
-      >
-      <span
+        class="text-green-700 ti ti-mood-smile"></i>
+      <i
         v-else
         :title="feed.lastError || 'unknown error'"
-        class="text-red-700 cursor-default"
-        >⚠</span
-      >
+        class="text-red-700 ti ti-mood-sad align-middle"></i>
     </div>
 
-    <div class="flex-shrink-0 w-8 text-right pr-1">
-      <favicon-element
-        :url="feed.url"
-        class="w-4 h-4 align-text-bottom mx-1 inline" />
-    </div>
+    <body-list-favicon-column :url="feed.url" />
 
     <div class="flex-grow">
-      <value-url
+      <external-url
         class="ffun-normal-link"
-        :value="feed.url"
+        :url="feed.url"
         :text="purifiedTitle" />
 
       <template v-if="feed.collectionIds.length > 0">
@@ -64,14 +48,16 @@
           </template>
         </span>
       </template>
-      <template v-if="globalSettings.showFeedsDescriptions">
-        <br />
-        <div class="max-w-3xl flex-1 bg-slate-50 border-2 rounded p-4">
-          <div v-html="purifiedDescription" />
-        </div>
-      </template>
     </div>
   </div>
+
+  <body-list-entry-body
+    v-if="globalSettings.showFeedsDescriptions"
+    class="ml-56"
+    :url="null"
+    :title="null"
+    :loading="false"
+    :text="purifiedDescription" />
 </template>
 
 <script lang="ts" setup>
@@ -79,6 +65,7 @@
   import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
   import * as api from "@/logic/api";
+  import * as utils from "@/logic/utils";
   import {computedAsync} from "@vueuse/core";
   import DOMPurify from "dompurify";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
@@ -91,33 +78,11 @@
 
   const properties = defineProps<{feed: t.Feed}>();
 
-  const noDescription = "No description";
-
   const purifiedTitle = computed(() => {
-    if (properties.feed.title === null) {
-      return properties.feed.url;
-    }
-
-    let title = DOMPurify.sanitize(properties.feed.title, {ALLOWED_TAGS: []}).trim();
-
-    if (title.length === 0) {
-      return properties.feed.url;
-    }
-
-    return title;
+    return utils.purifyTitle({raw: properties.feed.title, default_: properties.feed.url});
   });
 
   const purifiedDescription = computed(() => {
-    if (properties.feed.description === null) {
-      return noDescription;
-    }
-
-    let description = DOMPurify.sanitize(properties.feed.description).trim();
-
-    if (description.length === 0) {
-      return noDescription;
-    }
-
-    return description;
+    return utils.purifyBody({raw: properties.feed.description, default_: "No description"});
   });
 </script>

package/src/components/FeedInfo.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
-    <h2>
-      <a
+    <h3>
+      <favicon-element
+        :url="feed.url"
+        class="w-5 h-5 mx-1 mb-1 inline align-middle" />
+
+      <external-url
         class="ffun-normal-link"
-        :href="feed.url"
-        target="_blank"
-        rel="noopener noreferrer">
-        {{ feed.title }}
-      </a>
-    </h2>
+        :url="feed.url"
+        :text="feed.title" />
+    </h3>
 
     <p v-html="feed.description" />
 
@@ -16,13 +17,10 @@
       <li
         v-for="entry in feed.entries"
         :key="entry.url">
-        <a
+        <external-url
           class="ffun-normal-link"
-          :href="entry.url"
-          target="_blank"
-          rel="noopener noreferrer">
-          {{ entry.title }}
-        </a>
+          :url="entry.url"
+          :text="entry.title" />
       </li>
     </ul>
   </div>

package/src/components/FeedsList.vue

@@ -2,7 +2,8 @@
   <ul>
     <li
       v-for="feed in feeds"
-      :key="feed.id">
+      :key="feed.id"
+      class="ffun-body-list-entry">
       <feed-for-list :feed="feed" />
     </li>
   </ul>

package/src/components/OPMLUpload.vue

@@ -18,19 +18,19 @@
 
     <p
       v-if="loading"
-      class="ffun-info-attention"
+      class="ffun-info-waiting mt-2"
       >Loading...</p
     >
 
     <p
       v-if="loaded"
-      class="ffun-info-good"
+      class="ffun-info-good mt-4"
       >Feeds added!</p
     >
 
     <p
       v-if="error"
-      class="ffun-info-bad"
+      class="ffun-info-bad mt-4"
       >Error occurred! Maybe you chose a wrong file?</p
     >
   </div>

package/src/components/RuleConstructor.vue

@@ -17,12 +17,18 @@
       >
     </div>
 
-    <p
-      class="ffun-info-good"
-      v-else>
-      <template v-if="showSuccess"> Rule created. </template>
-      <template v-else> Select tags to create a rule. </template>
-    </p>
+    <template v-else>
+      <p
+        v-if="showSuccess"
+        class="ffun-info-good"
+        >Rule created.</p
+      >
+      <p
+        v-else
+        class="ffun-info-common"
+        >Select tags to create a rule.</p
+      >
+    </template>
   </div>
 </template>
 

package/src/components/RuleForList.vue

@@ -3,36 +3,27 @@
     <div
       v-if="rule !== null"
       class="flex mb-1">
-      <div class="flex-shrink-0 min-w-fit mr-2">
+      <div class="ffun-body-list-icon-column">
         <a
           href="#"
-          class="ffun-normal-link"
+          class="ti ti-x text-red-500 hover:text-red-600"
+          title="Remove this rule"
           @click.prevent="deleteRule()">
-          remove
         </a>
       </div>
 
-      <score-selector
-        class="flex-shrink-0 mr-2"
-        :modelValue="rule.score"
-        @input="updateSelected" />
+      <div class="flex-shrink-0 min-w-fit mr-2">
+        <score-selector
+          :modelValue="rule.score"
+          @input="updateSelected" />
+      </div>
 
       <div class="flex-grow">
-        <template
-          v-for="tag of rule.requiredTags"
-          :key="tag">
-          <ffun-tag
-            :uid="tag"
-            secondary-mode="positive" />&nbsp;
-        </template>
-
-        <template
-          v-for="tag of rule.excludedTags"
-          :key="tag">
-          <ffun-tag
-            :uid="tag"
-            secondary-mode="negative" />&nbsp;
-        </template>
+        <rule-tag
+          v-for="tag of rule.allTags"
+          :key="tag"
+          :uid="tag"
+          :css-modifier="cssModifiers[tag]" />
       </div>
     </div>
 
@@ -42,9 +33,9 @@
       Score updated
       <a
         href="#"
-        class="ffun-form-button"
+        class=""
         @click.prevent="scoreChanged = false"
-        >close</a
+        >[close]</a
       >
     </p>
   </div>
@@ -85,4 +76,14 @@
 
     globalSettings.updateDataVersion();
   }
+
+  const cssModifiers: {[key: string]: string} = {};
+
+  for (const tag of properties.rule.allTags) {
+    if (properties.rule.excludedTags.includes(tag)) {
+      cssModifiers[tag] = "negative";
+      continue;
+    }
+    cssModifiers[tag] = "positive";
+  }
 </script>

package/src/components/RulesList.vue

@@ -2,7 +2,8 @@
   <ul>
     <li
       v-for="rule in rules"
-      :key="rule.id">
+      :key="rule.id"
+      class="ffun-body-list-entry">
       <rule-for-list :rule="rule" />
     </li>
   </ul>

package/src/components/SimplePagination.vue

@@ -3,14 +3,14 @@
     {{ realShowEntries }} of {{ total }}
 
     <button
-      class="ffun-form-button ml-2"
+      class="ffun-form-button short ml-2"
       v-if="canShowMore"
       @click.prevent="showMore()">
       next {{ realShowPerPage }}
     </button>
 
     <button
-      class="ffun-form-button ml-2"
+      class="ffun-form-button short ml-2"
       v-if="canHide"
       @click.prevent="hideAll()"
       >hide</button

package/src/components/SupertokensLogin.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="globalState.isLoggedIn">
-    <p class="">You have already logged in.</p>
+    <h3 class="">You have already logged in</h3>
     <button
       class="text-blue-600 hover:text-blue-800 text-xl pt-0"
       @click.prevent="goToWorkspace()"
@@ -9,14 +9,13 @@
   </div>
 
   <div v-else>
+    <h2 class="my-0">Single e-mail to log in</h2>
     <template v-if="!requested">
-      <p class="text-left">We'll send you an email with a login link.</p>
-
-      <p class="text-left">If you don&apos;t have an account, one will be created.</p>
+      <p class="text-center">We'll send you an email with a login link, no password required.</p>
 
       <form
         @submit.prevent="login()"
-        class="w-full flex">
+        class="w-full flex justify-center">
         <input
           class="ffun-input flex-grow p-1 mr-2"
           type="email"
@@ -26,7 +25,7 @@
         <button
           class="ffun-form-button"
           type="submit"
-          >Login</button
+          >Log In</button
         >
       </form>
     </template>

package/src/components/UserSetting.vue

@@ -2,7 +2,7 @@
   <div
     v-if="setting !== null"
     class="mb-4">
-    <span class="font-semibold mr-1">{{ setting.name }}</span>
+    <span class="mr-1">{{ setting.name }}</span>
 
     <input
       class="ffun-input"
@@ -21,12 +21,12 @@
       style="min-width: 2.5rem"
       :flag="setting.value"
       @update:flag="updateFlag($event)"
-      on-text="No"
-      off-text="Yes" />
+      on-text="no"
+      off-text="yes" />
 
     <template v-else-if="!editing">
       <button
-        class="ffun-form-button ml-1"
+        class="ffun-form-button short ml-1"
         @click.prevent="startEditing()"
         >Edit</button
       >
@@ -35,20 +35,15 @@
     <template v-else>
       <button
         @click.prevent="save()"
-        class="ffun-form-button ml-1"
+        class="ffun-form-button short ml-1"
         >Save</button
       >
       <button
         @click.prevent="cancel()"
-        class="ffun-form-button ml-1"
+        class="ffun-form-button short ml-1"
         >Cancel</button
       >
     </template>
-
-    <div
-      class="ffun-normalized-text"
-      v-if="setting.description"
-      v-html="setting.description" />
   </div>
 </template>
 
@@ -89,7 +84,7 @@
     const type = setting.value.type;
 
     if (type == "boolean") {
-      return v ? "Yes" : "No";
+      return v ? "yes" : "no";
     }
 
     if (v == null || v == "") {