feeds-fun 1.17.1 → 1.18.1

package/src/css/panels.css

@@ -24,7 +24,7 @@
   }
 
   .ffun-x-info {
-    @apply ffun-x-panel border p-4 rounded-md;
+    @apply ffun-x-panel border p-4 rounded-md my-2;
   }
 
   .ffun-info-settings {
@@ -32,18 +32,18 @@
   }
 
   .ffun-info-common {
-    @apply ffun-x-info bg-blue-50 border-blue-200 text-blue-800;
+    @apply ffun-x-info bg-blue-50 border-blue-200 text-blue-900;
   }
 
   .ffun-info-good {
-    @apply ffun-x-info bg-green-50 border-green-200 text-green-800;
+    @apply ffun-x-info bg-green-50 border-green-200 text-green-900;
   }
 
   .ffun-info-bad {
-    @apply ffun-x-info bg-red-50 border-red-200 text-red-800;
+    @apply ffun-x-info bg-red-50 border-red-200 text-red-900;
   }
 
   .ffun-info-waiting {
-    @apply ffun-x-info bg-yellow-50 border-yellow-200 text-yellow-800;
+    @apply ffun-x-info bg-yellow-50 border-yellow-200 text-yellow-900;
   }
 }

package/src/css/side_panel_layout.css

@@ -15,6 +15,10 @@
       }
     }
 
+    .ffun-side-panel-collapsed {
+      @apply px-4 w-16 bg-slate-50 flex-shrink-0;
+    }
+
     .ffun-body-panel {
       @apply flex-grow;
     }

package/src/layouts/SidePanelLayout.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="ffun-side-panel-layout">
-    <div class="ffun-side-panel">
-      <div class="ffun-page-header">
-        <div class="ffun-page-header-title">
+    <div
+      v-if="globalSettings.showSidebar"
+      class="ffun-side-panel">
+      <div class="ffun-page-header pr-0 mr-0 flex min-w-full">
+        <div class="ffun-page-header-title grow">
           <slot name="main-header"></slot>
         </div>
+
+        <side-panel-collapse-button />
       </div>
 
       <hr />
@@ -49,29 +53,43 @@
     <div class="ffun-body-panel">
       <div class="ffun-page-header">
         <div class="ffun-page-header-left-block">
-          <template
-            v-for="[mode, props] of e.MainPanelModeProperties"
-            :key="mode">
-            <a
-              v-if="globalSettings.mainPanelMode !== mode"
-              :href="router.resolve({name: mode, params: {}}).href"
-              class="ffun-page-header-link"
-              @click.prevent="router.push({name: mode, params: {}})">
-              {{ props.text }}
-            </a>
-
-            <span
-              class="ffun-page-header-link-disabled"
-              v-else
-              >{{ props.text }}</span
-            >
+          <side-panel-collapse-button v-if="!globalSettings.showSidebar" />
+
+          <a
+            v-if="homeButton"
+            :href="router.resolve({name: 'main', params: {}}).href"
+            class="ffun-page-header-link"
+            >Home</a
+          >
+
+          <template v-if="globalState.isLoggedIn">
+            <template
+              v-for="[mode, props] of e.MainPanelModeProperties"
+              :key="mode">
+              <template v-if="props.showInMenu">
+                <a
+                  v-if="globalSettings.mainPanelMode !== mode"
+                  :href="router.resolve({name: mode, params: {}}).href"
+                  class="ffun-page-header-link"
+                  @click.prevent="router.push({name: mode, params: {}})">
+                  {{ props.text }}
+                </a>
+
+                <span
+                  class="ffun-page-header-link-disabled"
+                  v-else
+                  >{{ props.text }}</span
+                >
+              </template>
+            </template>
           </template>
 
-          <page-header-external-links :show-api="true" />
+          <page-header-external-links :show-api="globalState.isLoggedIn" />
         </div>
 
         <div class="ffun-page-header-right-block">
           <a
+            v-if="globalState.isLoggedIn"
             href="#"
             class="ffun-page-header-link"
             @click.prevent="logout()"
@@ -80,7 +98,7 @@
         </div>
       </div>
 
-      <hr class="my-2 border-slate-400" />
+      <hr class="mx-4 my-2 border-slate-400" />
 
       <main class="mb-4 px-4 min-h-screen">
         <slot></slot>
@@ -110,10 +128,14 @@
   const router = useRouter();
   const slots = useSlots();
 
-  const properties = withDefaults(defineProps<{reloadButton?: boolean; loginRequired?: boolean}>(), {
-    reloadButton: true,
-    loginRequired: true
-  });
+  const properties = withDefaults(
+    defineProps<{reloadButton?: boolean; loginRequired?: boolean; homeButton?: boolean}>(),
+    {
+      reloadButton: true,
+      loginRequired: true,
+      homeButton: false
+    }
+  );
 
   async function logout() {
     if (settings.authMode === settings.AuthMode.SingleUser) {
@@ -122,7 +144,10 @@
     }
 
     await supertokens.logout();
-    router.push({name: "main", params: {}});
+
+    if (properties.loginRequired) {
+      router.push({name: "main", params: {}});
+    }
   }
 
   const hasSideFooter = computed(() => {

package/src/layouts/WideLayout.vue

@@ -1,9 +1,5 @@
 <template>
-  <!-- <div class="flex justify-center h-screen"> -->
-  <!-- <div class="flex flex-col justify-start items-center text-center p-4"> -->
   <slot></slot>
-  <!-- </div> -->
-  <!-- </div> -->
 </template>
 
 <script lang="ts" setup></script>

package/src/logic/api.ts

@@ -7,6 +7,7 @@ const ENTRY_POINT = "/api";
 
 const API_GET_FEEDS = `${ENTRY_POINT}/get-feeds`;
 const API_GET_LAST_ENTRIES = `${ENTRY_POINT}/get-last-entries`;
+const API_GET_LAST_COLLECTION_ENTRIES = `${ENTRY_POINT}/get-last-collection-entries`;
 const API_GET_ENTRIES_BY_IDS = `${ENTRY_POINT}/get-entries-by-ids`;
 const API_CREATE_OR_UPDATE_RULE = `${ENTRY_POINT}/create-or-update-rule`;
 
@@ -83,6 +84,28 @@ export async function getLastEntries({period}: {period: number}) {
   return entries;
 }
 
+export async function getLastCollectionEntries({
+  period,
+  collectionSlug
+}: {
+  period: number;
+  collectionSlug: t.CollectionSlug | null;
+}) {
+  const response = await post({
+    url: API_GET_LAST_COLLECTION_ENTRIES,
+    data: {period: period, collectionSlug: collectionSlug}
+  });
+
+  const entries = [];
+
+  for (let rawEntry of response.entries) {
+    const entry = t.entryFromJSON(rawEntry, response.tagsMapping);
+    entries.push(entry);
+  }
+
+  return entries;
+}
+
 export async function getEntriesByIds({ids}: {ids: t.EntryId[]}) {
   const response = await post({
     url: API_GET_ENTRIES_BY_IDS,

package/src/logic/enums.ts

@@ -10,16 +10,23 @@ export enum MainPanelMode {
   Rules = "rules",
   Discovery = "discovery",
   Collections = "collections",
+  PublicCollection = "public-collection",
   Settings = "settings"
 }
 
-export const MainPanelModeProperties = new Map<MainPanelMode, {text: string}>([
-  [MainPanelMode.Entries, {text: "News"}],
-  [MainPanelMode.Feeds, {text: "Feeds"}],
-  [MainPanelMode.Rules, {text: "Rules"}],
-  [MainPanelMode.Discovery, {text: "Discovery"}],
-  [MainPanelMode.Collections, {text: "Collections"}],
-  [MainPanelMode.Settings, {text: "Settings"}]
+export type MainPanelModeProperty = {
+  readonly text: string;
+  readonly showInMenu: boolean;
+};
+
+export const MainPanelModeProperties = new Map<MainPanelMode, MainPanelModeProperty>([
+  [MainPanelMode.Entries, {text: "News", showInMenu: true}],
+  [MainPanelMode.Feeds, {text: "Feeds", showInMenu: true}],
+  [MainPanelMode.Rules, {text: "Rules", showInMenu: true}],
+  [MainPanelMode.Discovery, {text: "Discovery", showInMenu: true}],
+  [MainPanelMode.Collections, {text: "Collections", showInMenu: true}],
+  [MainPanelMode.PublicCollection, {text: "Public Collection", showInMenu: false}],
+  [MainPanelMode.Settings, {text: "Settings", showInMenu: true}]
 ]);
 
 export enum LastEntriesPeriod {
@@ -38,8 +45,13 @@ export enum LastEntriesPeriod {
   AllTime = "alltime"
 }
 
+export type LastEntriesPeriodProperty = {
+  readonly text: string;
+  readonly seconds: number;
+};
+
 // Map preserves the order of the keys
-export const LastEntriesPeriodProperties = new Map<LastEntriesPeriod, {text: string; seconds: number}>([
+export const LastEntriesPeriodProperties = new Map<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}],
@@ -63,10 +75,14 @@ export enum EntriesOrder {
   Cataloged = "cataloged"
 }
 
-export const EntriesOrderProperties = new Map<
-  EntriesOrder,
-  {text: string; orderField: string; timeField: string; direction: number}
->([
+export type EntriesOrderProperty = {
+  readonly text: string;
+  readonly orderField: string;
+  readonly timeField: string;
+  readonly direction: number;
+};
+
+export const EntriesOrderProperties = new Map<EntriesOrder, EntriesOrderProperty>([
   [EntriesOrder.Score, {text: "score", orderField: "score", timeField: "catalogedAt", direction: 1}],
   [EntriesOrder.ScoreToZero, {text: "score ~ 0", orderField: "scoreToZero", timeField: "catalogedAt", direction: 1}],
   [EntriesOrder.ScoreBackward, {text: "score backward", orderField: "score", timeField: "catalogedAt", direction: -1}],

package/src/logic/events.ts

@@ -1,37 +1,85 @@
 import * as api from "@/logic/api";
 import type * as t from "@/logic/types";
+import {inject} from "vue";
 import type {State as TagState} from "@/logic/tagsFilterState";
 
-export type TagChangeSource = "news_tags_filter" | "rules_tags_filter" | "entry_record" | "rule_record";
+export type EventsViewName =
+  | "news"
+  | "rules"
+  | "public_collections"
+  | "auth"
+  | "settings"
+  | "discovery"
+  | "feeds"
+  | "main"
+  | "collections";
+export type TagChangeSource = "tags_filter" | "entry_record" | "rule_record";
 
-export async function newsLinkOpened({entryId}: {entryId: t.EntryId}) {
-  await api.trackEvent({name: "news_link_opened", entry_id: entryId});
+export type SidebarVisibilityChangeEvent = "hide" | "show";
+export type SidebarVisibilityChangeSource = "top_sidebar_button";
+
+export async function newsLinkOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
+  await api.trackEvent({
+    name: "news_link_opened",
+    view: view,
+    entry_id: entryId
+  });
 }
 
-export async function newsBodyOpened({entryId}: {entryId: t.EntryId}) {
-  await api.trackEvent({name: "news_body_opened", entry_id: entryId});
+export async function newsBodyOpened({entryId, view}: {entryId: t.EntryId; view: EventsViewName}) {
+  await api.trackEvent({
+    name: "news_body_opened",
+    view: view,
+    entry_id: entryId
+  });
 }
 
-export async function socialLinkClicked({linkType}: {linkType: string}) {
-  await api.trackEvent({name: "social_link_clicked", link_type: linkType});
+export async function socialLinkClicked({linkType, view}: {linkType: string; view: EventsViewName}) {
+  await api.trackEvent({
+    name: "social_link_clicked",
+    view: view,
+    link_type: linkType
+  });
+}
+
+export async function sidebarStateChanged({
+  subEvent,
+  view,
+  source
+}: {
+  subEvent: SidebarVisibilityChangeEvent;
+  view: EventsViewName;
+  source: SidebarVisibilityChangeSource;
+}) {
+  await api.trackEvent({
+    name: "sidebar_state_changed",
+    view: view,
+    sub_event: subEvent,
+    source: source
+  });
 }
 
 export async function tagStateChanged({
   tag,
   fromState,
   toState,
-  source
+  source,
+  view
 }: {
   tag: string;
   fromState: TagState;
   toState: TagState;
   source: TagChangeSource;
+  view: EventsViewName;
 }) {
+  // const eventsView = inject<events.EventViewName>("eventsViewName");
+
   await api.trackEvent({
     name: "tag_filter_state_changed",
     tag: tag,
     from_state: fromState,
     to_state: toState,
+    view: view,
     source: source
   });
 }

package/src/logic/tagsFilterState.ts

@@ -1,5 +1,6 @@
-import {ref, computed, reactive} from "vue";
+import {ref, computed, reactive, watch} from "vue";
 import type {ComputedRef} from "vue";
+import _ from "lodash";
 
 export type State = "required" | "excluded" | "none";
 
@@ -102,6 +103,34 @@ export class Storage {
     return report;
   }
 
+  tagsForUrl() {
+    const selectedTags = Object.keys(this.selectedTags).sort();
+
+    const tags = [];
+
+    for (const tag of selectedTags) {
+      if (this.requiredTags[tag]) {
+        tags.push(tag);
+      } else {
+        tags.push(`-${tag}`);
+      }
+    }
+
+    return tags;
+  }
+
+  setTagsFromUrl(tags: string[]) {
+    this.clear();
+
+    for (const tag of tags) {
+      if (tag.startsWith("-")) {
+        this.excludedTags[tag.slice(1)] = true;
+      } else {
+        this.requiredTags[tag] = true;
+      }
+    }
+  }
+
   clear() {
     Object.keys(this.requiredTags).forEach((key) => {
       delete this.requiredTags[key];
@@ -112,3 +141,34 @@ export class Storage {
     });
   }
 }
+
+// must be called synchoronously from the view
+export function setSyncingTagsWithRoute({tagsStates, route, router}: {tagsStates: Storage; route: any; router: any}) {
+  if (!route.params.tags) {
+    tagsStates.setTagsFromUrl([]);
+  } else {
+    tagsStates.setTagsFromUrl(route.params.tags);
+  }
+
+  watch(tagsStates, () => {
+    const newParams = _.clone(route.params);
+    newParams.tags = tagsStates.tagsForUrl();
+
+    router.push({
+      replace: true,
+      name: route.name,
+      params: newParams
+    });
+  });
+}
+
+// must be called synchoronously from the view
+export function setSyncingTagsSidebarPoint({tagsStates, globalSettings}: {tagsStates: Storage; globalSettings: any}) {
+  watch(
+    tagsStates,
+    () => {
+      globalSettings.showSidebarPoint = tagsStates.hasSelectedTags;
+    },
+    {immediate: true}
+  );
+}

package/src/logic/types.ts

@@ -24,6 +24,12 @@ export function toCollectionId(id: string): CollectionId {
   return id as CollectionId;
 }
 
+export type CollectionSlug = string & {readonly __brand: unique symbol};
+
+export function toCollectionSlug(slug: string): CollectionSlug {
+  return slug as CollectionSlug;
+}
+
 export type URL = string & {readonly __brand: unique symbol};
 
 export function toURL(url: string): URL {
@@ -233,7 +239,7 @@ export type Rule = {
   readonly id: RuleId;
   readonly requiredTags: string[];
   readonly excludedTags: string[];
-  readonly allTags: string[];
+  readonly tags: string[];
   readonly score: number;
   readonly createdAt: Date;
   readonly updatedAt: Date;
@@ -261,7 +267,7 @@ export function ruleFromJSON({
     id: toRuleId(id),
     requiredTags: requiredTags,
     excludedTags: excludedTags,
-    allTags: requiredTags.concat(excludedTags).sort(),
+    tags: requiredTags.concat(excludedTags).sort(),
     score: score,
     createdAt: new Date(createdAt),
     updatedAt: new Date(updatedAt)
@@ -411,6 +417,7 @@ export function resourceHistoryRecordFromJSON({
 
 export class Collection {
   readonly id: CollectionId;
+  readonly slug: CollectionSlug;
   readonly guiOrder: number;
   readonly name: string;
   readonly description: string;
@@ -419,6 +426,7 @@ export class Collection {
 
   constructor({
     id,
+    slug,
     guiOrder,
     name,
     description,
@@ -426,6 +434,7 @@ export class Collection {
     showOnMain
   }: {
     id: CollectionId;
+    slug: CollectionSlug;
     guiOrder: number;
     name: string;
     description: string;
@@ -433,6 +442,7 @@ export class Collection {
     showOnMain: boolean;
   }) {
     this.id = id;
+    this.slug = slug;
     this.guiOrder = guiOrder;
     this.name = name;
     this.description = description;
@@ -443,6 +453,7 @@ export class Collection {
 
 export function collectionFromJSON({
   id,
+  slug,
   guiOrder,
   name,
   description,
@@ -450,6 +461,7 @@ export function collectionFromJSON({
   showOnMain
 }: {
   id: string;
+  slug: string;
   guiOrder: number;
   name: string;
   description: string;
@@ -458,6 +470,7 @@ export function collectionFromJSON({
 }): Collection {
   return {
     id: toCollectionId(id),
+    slug: toCollectionSlug(slug),
     guiOrder: guiOrder,
     name: name,
     description: description,

package/src/logic/utils.ts

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import type * as t from "@/logic/types";
 import DOMPurify from "dompurify";
 
 export function timeSince(date: Date) {
@@ -64,7 +65,6 @@ export function faviconForUrl(url: string): string | null {
     const parsedUrl = new URL(url);
     return `${parsedUrl.protocol}//${parsedUrl.host}/favicon.ico`;
   } catch (error) {
-    console.error("Invalid URL:", error);
     return null;
   }
 }
@@ -96,3 +96,106 @@ export function purifyBody({raw, default_}: {raw: string | null; default_: strin
 
   return body;
 }
+
+export function chooseTagByUsage({
+  tagsCount,
+  border,
+  exclude
+}: {
+  tagsCount: {[key: string]: number};
+  border: number;
+  exclude: string[];
+}) {
+  if (Object.keys(tagsCount).length === 0) {
+    return null;
+  }
+
+  if (!exclude) {
+    exclude = [];
+  }
+
+  const tags = _.toPairs(tagsCount).sort((a, b) => {
+    if (a[1] === b[1]) {
+      return a[0].localeCompare(b[0]);
+    }
+
+    return b[1] - a[1];
+  });
+
+  for (let i = 0; i < tags.length; i++) {
+    if (exclude.includes(tags[i][0])) {
+      continue;
+    }
+
+    if (tags[i][1] < border) {
+      return tags[i][0];
+    }
+  }
+
+  return tags[tags.length - 1][0];
+}
+
+export function countTags(entries: t.Entry[] | t.Rule[] | null) {
+  if (!entries) {
+    return {};
+  }
+
+  const tagsCount: {[key: string]: number} = {};
+
+  for (const entry of entries) {
+    for (const tag of entry.tags) {
+      if (tag in tagsCount) {
+        tagsCount[tag] += 1;
+      } else {
+        tagsCount[tag] = 1;
+      }
+    }
+  }
+
+  return tagsCount;
+}
+
+export function sortIdsList<ID extends string = string>({
+  ids,
+  storage,
+  field,
+  direction
+}: {
+  ids: ID[];
+  storage: {[key: string]: any};
+  field: string;
+  direction: number;
+}) {
+  // Pre-map to avoid repeated lookups in the comparator
+  // required for the cases when storage is reactive
+  const mapped = ids.map((id) => {
+    // @ts-ignore
+    return {id, value: storage[id][field]};
+  });
+
+  mapped.sort((a: {id: ID; value: any}, b: {id: ID; value: any}) => {
+    if (a.value === null && b.value === null) {
+      return 0;
+    }
+
+    if (a.value === null) {
+      return 1;
+    }
+
+    if (b.value === null) {
+      return -1;
+    }
+
+    if (a.value < b.value) {
+      return direction;
+    }
+
+    if (a.value > b.value) {
+      return -direction;
+    }
+
+    return 0;
+  });
+
+  return mapped.map((x) => x.id);
+}