fix: merge conflicts from preview

web/core/hooks/store/index.ts

@@ -30,3 +30,4 @@ export * from "./use-router-params";
 export * from "./use-webhook";
 export * from "./use-workspace";
 export * from "./user";
+export * from "./use-transient";

web/core/hooks/store/use-transient.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import { ITransientStore } from "@/store/transient.store";
+
+export const useTransient = (): ITransientStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useTransient must be used within StoreProvider");
+  return context.transient;
+};

web/core/hooks/use-favorite-item-details.tsx

@@ -0,0 +1,60 @@
+import { IFavorite } from "@plane/types";
+import {
+  generateFavoriteItemLink,
+  getFavoriteItemIcon,
+} from "@/components/workspace/sidebar/favorites/favorite-items/common";
+import { useProject, usePage, useProjectView, useCycle, useModule } from "@/hooks/store";
+
+export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorite) => {
+  const favoriteItemId = favorite?.entity_data?.id;
+  const favoriteItemLogoProps = favorite?.entity_data?.logo_props;
+  const favoriteItemName = favorite?.entity_data.name || favorite?.name;
+  const favoriteItemEntityType = favorite?.entity_type;
+
+  // store hooks
+  const { getViewById } = useProjectView();
+  const { getProjectById } = useProject();
+  const { getCycleById } = useCycle();
+  const { getModuleById } = useModule();
+
+  // derived values
+  const pageDetail = usePage(favoriteItemId ?? "");
+  const viewDetails = getViewById(favoriteItemId ?? "");
+  const cycleDetail = getCycleById(favoriteItemId ?? "");
+  const moduleDetail = getModuleById(favoriteItemId ?? "");
+
+  const currentProjectDetails = getProjectById(favorite.project_id ?? "");
+
+  let itemIcon;
+  let itemTitle;
+  const itemLink = generateFavoriteItemLink(workspaceSlug.toString(), favorite);
+
+  switch (favoriteItemEntityType) {
+    case "project":
+      itemTitle = currentProjectDetails?.name || favoriteItemName;
+      itemIcon = getFavoriteItemIcon("project", currentProjectDetails?.logo_props || favoriteItemLogoProps);
+      break;
+    case "page":
+      itemTitle = pageDetail.name || favoriteItemName;
+      itemIcon = getFavoriteItemIcon("page", pageDetail?.logo_props || favoriteItemLogoProps);
+      break;
+    case "view":
+      itemTitle = viewDetails?.name || favoriteItemName;
+      itemIcon = getFavoriteItemIcon("view", viewDetails?.logo_props || favoriteItemLogoProps);
+      break;
+    case "cycle":
+      itemTitle = cycleDetail?.name || favoriteItemName;
+      itemIcon = getFavoriteItemIcon("cycle");
+      break;
+    case "module":
+      itemTitle = moduleDetail?.name || favoriteItemName;
+      itemIcon = getFavoriteItemIcon("module");
+      break;
+    default:
+      itemTitle = favoriteItemName;
+      itemIcon = getFavoriteItemIcon(favoriteItemEntityType);
+      break;
+  }
+
+  return { itemIcon, itemTitle, itemLink };
+};

web/core/hooks/use-page-filters.ts

@@ -1,12 +1,67 @@
+// plane editor
+import { TEditorFontSize, TEditorFontStyle } from "@plane/editor";
 // hooks
 import useLocalStorage from "@/hooks/use-local-storage";
 
+export type TPagesPersonalizationConfig = {
+  full_width: boolean;
+  font_size: TEditorFontSize;
+  font_style: TEditorFontStyle;
+};
+
+const DEFAULT_PERSONALIZATION_VALUES: TPagesPersonalizationConfig = {
+  full_width: false,
+  font_size: "large-font",
+  font_style: "sans-serif",
+};
+
 export const usePageFilters = () => {
-  const { storedValue: isFullWidth, setValue: setFullWidth } = useLocalStorage<boolean>("page_full_width", true);
-  const handleFullWidth = (value: boolean) => setFullWidth(value);
+  // local storage
+  const { storedValue: pagesConfig, setValue: setPagesConfig } = useLocalStorage<TPagesPersonalizationConfig>(
+    "pages_config",
+    DEFAULT_PERSONALIZATION_VALUES
+  );
+  // stored values
+  const isFullWidth = !!pagesConfig?.full_width;
+  const fontSize = pagesConfig?.font_size ?? DEFAULT_PERSONALIZATION_VALUES.font_size;
+  const fontStyle = pagesConfig?.font_style ?? DEFAULT_PERSONALIZATION_VALUES.font_style;
+  // update action
+  const handleUpdateConfig = (payload: Partial<TPagesPersonalizationConfig>) =>
+    setPagesConfig({
+      ...(pagesConfig ?? DEFAULT_PERSONALIZATION_VALUES),
+      ...payload,
+    });
+  /**
+   * @description action to update full_width value
+   * @param {boolean} value
+   */
+  const handleFullWidth = (value: boolean) =>
+    handleUpdateConfig({
+      full_width: value,
+    });
+  /**
+   * @description action to update font_size value
+   * @param {TEditorFontSize} value
+   */
+  const handleFontSize = (value: TEditorFontSize) =>
+    handleUpdateConfig({
+      font_size: value,
+    });
+  /**
+   * @description action to update font_size value
+   * @param {TEditorFontSize} value
+   */
+  const handleFontStyle = (value: TEditorFontStyle) =>
+    handleUpdateConfig({
+      font_style: value,
+    });
 
   return {
-    isFullWidth: !!isFullWidth,
+    fontSize,
+    handleFontSize,
+    fontStyle,
+    handleFontStyle,
+    isFullWidth,
     handleFullWidth,
   };
 };