fix: 'Starred' section should open if collapsed and starred item is added

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);
   },
 });
 

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);
   },
 });
 

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
   );
 

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));
     }
   });