feeds-fun 1.16.2 → 1.16.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.16.2",
+  "version": "1.16.4",
   "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/EntryForList.vue

@@ -2,7 +2,30 @@
   <div
     ref="entryTop"
     class="flex text-lg">
-    <div class="flex-shrink-0 w-8 text-right pr-1">
+    <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>
+    </div>
+
+    <div class="flex-shrink-0 w-8 text-center pr-1">
       <value-score
         :value="entry.score"
         :entry-id="entry.id" />
@@ -14,15 +37,6 @@
         class="w-5 h-5 align-text-bottom mx-1 inline" />
     </div>
 
-    <div class="flex-shrink-0 text-right">
-      <input-marker
-        class="w-7 mr-2"
-        :marker="e.Marker.Read"
-        :entry-id="entryId"
-        on-text="read"
-        off-text="new" />
-    </div>
-
     <div class="flex-grow">
       <a
         :href="entry.url"
@@ -73,7 +87,7 @@
 
 <script lang="ts" setup>
   import _ from "lodash";
-  import {computed, ref, useTemplateRef} from "vue";
+  import {computed, ref, useTemplateRef, onMounted} from "vue";
   import type * as t from "@/logic/types";
   import * as events from "@/logic/events";
   import * as e from "@/logic/enums";
@@ -156,11 +170,25 @@
         await entriesStore.displayEntry({entryId: entry.value.id});
 
         if (topElement.value) {
-          topElement.value.scrollIntoView({behavior: "instant"});
+          const rect = topElement.value.getBoundingClientRect();
+
+          const isVisible =
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+          if (!isVisible) {
+            topElement.value.scrollIntoView({behavior: "instant"});
+          }
         }
       }
     } else {
       await newsLinkOpenedEvent();
     }
   }
+
+  onMounted(() => {
+    entriesStore.requestFullEntry({entryId: properties.entryId});
+  });
 </script>

package/src/inputs/Marker.vue

@@ -3,19 +3,17 @@
     <template v-if="hasMarker">
       <a
         href="#"
-        class="marked"
-        @click.prevent="unmark()"
-        >{{ onText }}</a
-      >
+        @click.prevent="unmark()">
+        <slot name="marked" />
+      </a>
     </template>
 
     <template v-else>
       <a
         href="#"
-        class="unmarked"
-        @click.prevent="mark()"
-        >{{ offText }}</a
-      >
+        @click.prevent="mark()">
+        <slot name="unmarked" />
+      </a>
     </template>
   </div>
 </template>
@@ -23,7 +21,7 @@
 <script lang="ts" setup>
   import {computed, ref} from "vue";
   import * as api from "@/logic/api";
-  import type * as e from "@/logic/enums";
+  import * as e from "@/logic/enums";
   import type * as t from "@/logic/types";
   import {useEntriesStore} from "@/stores/entries";
 
@@ -32,8 +30,6 @@
   const properties = defineProps<{
     marker: e.Marker;
     entryId: t.EntryId;
-    onText: string;
-    offText: string;
   }>();
 
   const hasMarker = computed(() => {
@@ -55,12 +51,4 @@
   }
 </script>
 
-<style scoped>
-  .marked {
-    @apply text-green-700 no-underline;
-  }
-
-  .unmarked {
-    @apply text-orange-700 font-bold no-underline;
-  }
-</style>
+<style scoped></style>

package/src/stores/entries.ts

@@ -16,6 +16,9 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   const entries = ref<{[key: t.EntryId]: t.Entry}>({});
   const requestedEntries = ref<{[key: t.EntryId]: boolean}>({});
   const displayedEntryId = ref<t.EntryId | null>(null);
+  const readHistory = ref<t.EntryId[]>([]);
+
+  const canUndoMarkRead = computed(() => readHistory.value.length > 0);
 
   function registerEntry(entry: t.Entry) {
     if (entry.id in entries.value) {
@@ -82,19 +85,33 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   requestedEntriesTimer.start();
 
   async function setMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
-    await api.setMarker({entryId: entryId, marker: marker});
+    if (marker === e.Marker.Read) {
+      readHistory.value.push(entryId);
+    }
 
+    // This code must be before the actual API request
+    // to guarantee smooth UI transition to the new state
+    // otherwise the UI will be updated two times which leads to flickering
     if (entryId in entries.value) {
       entries.value[entryId].setMarker(marker);
     }
+
+    await api.setMarker({entryId: entryId, marker: marker});
   }
 
   async function removeMarker({entryId, marker}: {entryId: t.EntryId; marker: e.Marker}) {
-    await api.removeMarker({entryId: entryId, marker: marker});
+    if (marker === e.Marker.Read) {
+      _.pull(readHistory.value, entryId);
+
+      hideEntry({entryId: entryId});
+    }
 
+    // This code must be before the actual API request, see comment above
     if (entryId in entries.value) {
       entries.value[entryId].removeMarker(marker);
     }
+
+    await api.removeMarker({entryId: entryId, marker: marker});
   }
 
   async function displayEntry({entryId}: {entryId: t.EntryId}) {
@@ -118,6 +135,16 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     }
   }
 
+  function undoMarkRead() {
+    if (readHistory.value.length === 0) {
+      return;
+    }
+
+    const entryId = readHistory.value.pop() as t.EntryId;
+
+    removeMarker({entryId: entryId, marker: e.Marker.Read});
+  }
+
   return {
     entries,
     requestFullEntry,
@@ -126,6 +153,8 @@ export const useEntriesStore = defineStore("entriesStore", () => {
     loadedEntriesReport,
     displayedEntryId,
     displayEntry,
-    hideEntry
+    hideEntry,
+    undoMarkRead,
+    canUndoMarkRead
   };
 });

package/src/style.css

@@ -81,7 +81,7 @@
   }
 
   .ffun-form-button {
-    @apply ffun-input-common border-blue-300 disabled:bg-blue-700/75 py-1;
+    @apply ffun-input-common border-blue-300 disabled:bg-blue-100/25 py-1;
   }
 
   .ffun-file-button {

package/src/values/Score.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="inline-block cursor-pointer font-semibold text-purple-700"
+    title="Click to see score details"
+    class="inline-block cursor-pointer text-purple-700"
     @click.prevent="onClick()">
     {{ value }}
   </div>

package/src/views/DiscoveryView.vue

@@ -8,7 +8,7 @@
       :collections-notification_="false"
       :collections-warning_="true" />
 
-    <h2>Lood feeds from an OPML file</h2>
+    <h2>Load feeds from an OPML file</h2>
 
     <div class="ffun-info-good">
       <p>

package/src/views/NewsView.vue

@@ -15,12 +15,21 @@
     </template>
 
     <template #side-menu-item-3>
-      Show read:
+      Show read
+
       <config-flag
         style="min-width: 2.5rem"
         v-model:flag="globalSettings.showRead"
         on-text="no"
         off-text="yes" />
+
+      <button
+        class="ffun-form-button py-0 ml-1"
+        title='Undo last "mark read" operation'
+        :disabled="!entriesStore.canUndoMarkRead"
+        @click="entriesStore.undoMarkRead()">
+        ↶
+      </button>
     </template>
 
     <template #side-footer>