feeds-fun 1.18.0 → 1.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "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/side_pannel/CollapseButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <a
+    href="#"
+    class="ffun-page-header-link text-2xl align-middle flex-none pb-0 relative"
+    :title="title"
+    @click.prevent="onClick">
+    <i
+      v-if="globalSettings.showSidebar"
+      class="ti ti-layout-sidebar-left-collapse"></i>
+    <i
+      v-else
+      class="ti ti-layout-sidebar-left-expand"></i>
+
+    <span
+      v-if="showPoint"
+      class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 border border-white"></span>
+  </a>
+</template>
+
+<script lang="ts" setup>
+  import {ref, computed, useSlots, onMounted, watch, watchEffect, inject} from "vue";
+  import {useRouter, RouterLink, RouterView} from "vue-router";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useGlobalState} from "@/stores/globalState";
+  import {useSupertokens} from "@/stores/supertokens";
+  import * as asserts from "@/logic/asserts";
+  import * as events from "@/logic/events";
+  import * as e from "@/logic/enums";
+  import * as settings from "@/logic/settings";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const eventsView = inject<events.EventsViewName>("eventsViewName");
+
+  asserts.defined(eventsView);
+
+  const title = computed(() => {
+    return globalSettings.showSidebar ? "Hide sidebar" : "Show sidebar";
+  });
+
+  const showPoint = computed(() => {
+    return !globalSettings.showSidebar && globalSettings.showSidebarPoint;
+  });
+
+  function onClick() {
+    globalSettings.showSidebar = !globalSettings.showSidebar;
+
+    asserts.defined(eventsView);
+
+    events.sidebarStateChanged({
+      view: eventsView,
+      subEvent: globalSettings.showSidebar ? "show" : "hide",
+      source: "top_sidebar_button"
+    });
+  }
+</script>

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,6 +53,8 @@
     <div class="ffun-body-panel">
       <div class="ffun-page-header">
         <div class="ffun-page-header-left-block">
+          <side-panel-collapse-button v-if="!globalSettings.showSidebar" />
+
           <a
             v-if="homeButton"
             :href="router.resolve({name: 'main', params: {}}).href"
@@ -92,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>

package/src/logic/events.ts

@@ -15,6 +15,9 @@ export type EventsViewName =
   | "collections";
 export type TagChangeSource = "tags_filter" | "entry_record" | "rule_record";
 
+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",
@@ -39,6 +42,23 @@ export async function socialLinkClicked({linkType, view}: {linkType: string; vie
   });
 }
 
+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,

package/src/logic/tagsFilterState.ts

@@ -161,3 +161,14 @@ export function setSyncingTagsWithRoute({tagsStates, route, router}: {tagsStates
     });
   });
 }
+
+// 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/main.ts

@@ -67,6 +67,8 @@ import MainNewsTitle from "./components/main/NewsTitle.vue";
 import MainHeaderLine from "./components/main/HeaderLine.vue";
 import MainBlock from "./components/main/Block.vue";
 
+import SidePanelCollapseButton from "./components/side_pannel/CollapseButton.vue";
+
 import WideLayout from "./layouts/WideLayout.vue";
 import SidePanelLayout from "./layouts/SidePanelLayout.vue";
 
@@ -137,6 +139,8 @@ app.component("MainNewsTitle", MainNewsTitle);
 app.component("MainHeaderLine", MainHeaderLine);
 app.component("MainBlock", MainBlock);
 
+app.component("SidePanelCollapseButton", SidePanelCollapseButton);
+
 app.component("WideLayout", WideLayout);
 app.component("SidePanelLayout", SidePanelLayout);
 

package/src/stores/globalSettings.ts

@@ -12,6 +12,8 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   // General
   const mainPanelMode = ref(e.MainPanelMode.Entries);
   const dataVersion = ref(0);
+  const showSidebar = ref(true);
+  const showSidebarPoint = ref(false);
 
   // Entries
   const lastEntriesPeriod = ref(e.LastEntriesPeriod.Day3);
@@ -70,6 +72,8 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     info,
     feedsOrder,
     failedFeedsFirst,
-    rulesOrder
+    rulesOrder,
+    showSidebar,
+    showSidebarPoint
   };
 });

package/src/views/NewsView.vue

@@ -102,6 +102,11 @@
     router
   });
 
+  tagsFilterState.setSyncingTagsSidebarPoint({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    globalSettings
+  });
+
   globalSettings.mainPanelMode = e.MainPanelMode.Entries;
 
   globalSettings.updateDataVersion();

package/src/views/RulesView.vue

@@ -56,13 +56,18 @@
   provide("tagsStates", tagsStates);
   provide("eventsViewName", "rules");
 
+  const globalSettings = useGlobalSettingsStore();
+
   tagsFilterState.setSyncingTagsWithRoute({
     tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
     route,
     router
   });
 
-  const globalSettings = useGlobalSettingsStore();
+  tagsFilterState.setSyncingTagsSidebarPoint({
+    tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
+    globalSettings
+  });
 
   globalSettings.mainPanelMode = e.MainPanelMode.Rules;