From 79899f35439b8f9d94850da0f885d7dc6ac3fa26 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 25 Apr 2024 20:27:12 -0400
Subject: [PATCH] fix: 'Starred' section should open if collapsed and starred
 item is added

---
 app/actions/definitions/collections.tsx      |  3 +++
 app/actions/definitions/documents.tsx        |  3 +++
 app/components/Sidebar/components/Header.tsx |  6 +++++-
 app/hooks/usePersistedState.ts               | 19 ++++++++++++++++++-
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/actions/definitions/collections.tsx b/app/actions/definitions/collections.tsx
index 700c84a2c..573b5f1a2 100644
--- a/app/actions/definitions/collections.tsx
+++ b/app/actions/definitions/collections.tsx
@@ -15,8 +15,10 @@ import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
+import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
+import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 
 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
@@ -132,6 +134,7 @@ export const starCollection = createAction({
 
     const collection = stores.collections.get(activeCollectionId);
     await collection?.star();
+    setPersistedState(getHeaderExpandedKey("starred"), true);
   },
 });
 
diff --git a/app/actions/definitions/documents.tsx b/app/actions/definitions/documents.tsx
index fca40523e..9a4aceec1 100644
--- a/app/actions/definitions/documents.tsx
+++ b/app/actions/definitions/documents.tsx
@@ -41,9 +41,11 @@ import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInT
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import DuplicateDialog from "~/components/DuplicateDialog";
 import SharePopover from "~/components/Sharing";
+import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
 import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
+import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import {
   documentInsightsPath,
@@ -172,6 +174,7 @@ export const starDocument = createAction({
 
     const document = stores.documents.get(activeDocumentId);
     await document?.star();
+    setPersistedState(getHeaderExpandedKey("starred"), true);
   },
 });
 
diff --git a/app/components/Sidebar/components/Header.tsx b/app/components/Sidebar/components/Header.tsx
index 2bd5531bf..c8ab64666 100644
--- a/app/components/Sidebar/components/Header.tsx
+++ b/app/components/Sidebar/components/Header.tsx
@@ -12,13 +12,17 @@ type Props = {
   children?: React.ReactNode;
 };
 
+export function getHeaderExpandedKey(id: string) {
+  return `sidebar-header-${id}`;
+}
+
 /**
  * Toggleable sidebar header
  */
 export const Header: React.FC<Props> = ({ id, title, children }: Props) => {
   const [firstRender, setFirstRender] = React.useState(true);
   const [expanded, setExpanded] = usePersistedState<boolean>(
-    `sidebar-header-${id}`,
+    getHeaderExpandedKey(id ?? ""),
     true
   );
 
diff --git a/app/hooks/usePersistedState.ts b/app/hooks/usePersistedState.ts
index 56fdb0d95..2c2fc941e 100644
--- a/app/hooks/usePersistedState.ts
+++ b/app/hooks/usePersistedState.ts
@@ -9,6 +9,23 @@ type Options = {
   listen?: boolean;
 };
 
+/**
+ * Set a value in local storage and emit storage event to trigger render of any
+ * listening mounted components.
+ *
+ * @param key Key to store value under
+ * @param value Value to store
+ */
+export function setPersistedState<T extends Primitive | object>(
+  key: string,
+  value: T
+) {
+  Storage.set(key, value);
+  window.dispatchEvent(
+    new StorageEvent("storage", { key, newValue: JSON.stringify(value) })
+  );
+}
+
 /**
  * A hook with the same API as `useState` that persists its value locally and
  * syncs the value between browser tabs.
@@ -49,7 +66,7 @@ export default function usePersistedState<T extends Primitive | object>(
 
   // Listen to the key changing in other tabs so we can keep UI in sync
   useEventListener("storage", (event: StorageEvent) => {
-    if (options?.listen && event.key === key && event.newValue) {
+    if (options?.listen !== false && event.key === key && event.newValue) {
       setStoredValue(JSON.parse(event.newValue));
     }
   });