feeds-fun 1.22.8 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.22.8",
+  "version": "1.23.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/css/inputs.css

@@ -29,6 +29,20 @@
     }
   }
 
+  .ffun-main-button {
+    @apply ffun-x-input-common border-0;
+    @apply text-xl;
+    @apply px-3 py-2;
+    @apply rounded-lg shadow-sm border focus:ring-0;
+
+    @apply text-blue-700;
+    @apply border-blue-300 hover:border-blue-400;
+
+    &.short {
+      @apply p-1 px-2;
+    }
+  }
+
   .ffun-form-button {
     @apply ffun-x-input-common font-semibold text-white;
     @apply px-4 py-2;

package/src/logic/enums.ts

@@ -57,7 +57,7 @@ export enum LastEntriesPeriod {
   Day3 = "day3",
   Week = "week",
   Week2 = "week2",
-  Month1 = "month",
+  Month1 = "month1",
   Month3 = "month3",
   Month6 = "month6",
   Year1 = "year1",
@@ -70,8 +70,7 @@ export type LastEntriesPeriodProperty = {
   readonly default?: boolean;
 };
 
-// Map preserves the order of the keys
-export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, LastEntriesPeriodProperty>([
+const lastEntriesPeriodEntries: ReadonlyArray<readonly [LastEntriesPeriod, LastEntriesPeriodProperty]> = [
   [LastEntriesPeriod.Hour1, {text: "1 hour", seconds: c.hour}],
   [LastEntriesPeriod.Hour3, {text: "3 hours", seconds: 3 * c.hour}],
   [LastEntriesPeriod.Hour6, {text: "6 hours", seconds: 6 * c.hour}],
@@ -85,7 +84,12 @@ export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, LastEntrie
   [LastEntriesPeriod.Month6, {text: "6 months", seconds: 6 * c.month}],
   [LastEntriesPeriod.Year1, {text: "1 year", seconds: c.year}],
   [LastEntriesPeriod.AllTime, {text: "all time", seconds: c.infinity}]
-]);
+];
+
+// Map preserves the order of the keys
+export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, LastEntriesPeriodProperty>(
+  lastEntriesPeriodEntries.filter(([key]) => settings.entriesPeriodList.includes(key))
+);
 
 ////////////////
 // Entries order

package/src/logic/settings.ts

@@ -24,6 +24,29 @@ export const crmImpressum = import.meta.env.VITE_FFUN_CRM_IMPRESSUM || null;
 
 export const hasCollections = import.meta.env.VITE_FFUN_HAS_COLLECTIONS == "true" || false;
 
+function jsonOrDefault<T>(value: string | undefined, defaultValue: T): T {
+  if (!value) return defaultValue;
+
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    console.warn("Failed to parse JSON value, using default", {value, error: e});
+    return defaultValue;
+  }
+}
+
+export const entriesPeriodList = jsonOrDefault(import.meta.env.VITE_FFUN_ENTRIES_PERIOD_LIST, [
+  "hour1",
+  "hour3",
+  "hour6",
+  "hour12",
+  "day1",
+  "day3",
+  "week",
+  "week2",
+  "month1"
+]);
+
 console.log("settings.version", version);
 
 console.log("settings.authRefreshInterval", authRefreshInterval);

package/src/views/MainView.vue

@@ -200,7 +200,7 @@
     <main-block v-if="settings.hasCollections">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <template
-          v-for="collectionId in collections.collectionsOrder"
+          v-for="collectionId in collectionsToShow"
           :key="collectionId">
           <main-item v-if="collections.collections[collectionId].showOnMain">
             <template #caption>
@@ -220,6 +220,16 @@
           </main-item>
         </template>
       </div>
+
+      <div
+        v-if="showMoreCollectionsButtonRequired"
+        class="mt-4 text-center">
+        <button
+          class="ffun-main-button short"
+          @click="showAllCollections = !showAllCollections">
+          {{ showAllCollections ? "Show less" : "Show more" }}
+        </button>
+      </div>
     </main-block>
 
     <main-header-line> Here, take a peek </main-header-line>
@@ -252,6 +262,22 @@
 
   provide("eventsViewName", eventsView);
 
+  const showAllCollections = ref(false);
+
+  const alwaysVisibleCollectionsCount = 4;
+
+  const collectionsToShow = computed(() => {
+    if (showAllCollections.value) {
+      return collections.collectionsOrder;
+    }
+
+    return collections.collectionsOrder.slice(0, alwaysVisibleCollectionsCount + 1);
+  });
+
+  const showMoreCollectionsButtonRequired = computed(() => {
+    return collections.collectionsOrder.length > alwaysVisibleCollectionsCount;
+  });
+
   function publicCollectionHref(collectionSlug: t.CollectionSlug) {
     return router.resolve({name: "public-collection", params: {collectionSlug: collectionSlug}}).href;
   }