upstream-plane/apps/web/core/components/navigation/use-tab-preferences.ts

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useMemo } from "react";
import { setToast, TOAST_TYPE } from "@plane/propel/toast";
import { useMember } from "@/hooks/store/use-member";
import { useUser } from "@/hooks/store/user";
import { DEFAULT_TAB_KEY } from "./tab-navigation-utils";
import type { TTabPreferences } from "./tab-navigation-utils";

export type TTabPreferencesHook = {
  tabPreferences: TTabPreferences;
  isLoading: boolean;
  handleToggleDefaultTab: (tabKey: string) => void;
  handleHideTab: (tabKey: string) => void;
  handleShowTab: (tabKey: string) => void;
};

/**
 * Custom hook to manage tab preferences for a project
 * Uses MobX store for state management and API persistence
 *
 * @param workspaceSlug - The workspace slug
 * @param projectId - The project ID
 * @returns Tab preferences state and handlers
 */
export const useTabPreferences = (workspaceSlug: string, projectId: string): TTabPreferencesHook => {
  const {
    project: { getProjectUserProperties, updateProjectUserProperties },
  } = useMember();
  // const { projectUserInfo } = useUserPermissions();
  const { data } = useUser();

  // Get member ID from projectUserInfo
  // const projectMemberInfo = projectUserInfo[workspaceSlug]?.[projectId];
  const memberId = data?.id || null;

  // Get preferences from store
  const storePreferences = getProjectUserProperties(projectId);
  const defaultTab = storePreferences?.preferences?.navigation?.default_tab || DEFAULT_TAB_KEY;
  const hideInMoreMenu = storePreferences?.preferences?.navigation?.hide_in_more_menu || [];

  // Convert store preferences to component format
  const tabPreferences: TTabPreferences = useMemo(() => {
    return {
      defaultTab,
      hiddenTabs: hideInMoreMenu,
    };
  }, [defaultTab, hideInMoreMenu]);

  const isLoading = !storePreferences && memberId !== null;

  /**
   * Update preferences via store
   */
  const updatePreferences = async (newPreferences: TTabPreferences) => {
    await updateProjectUserProperties(workspaceSlug, projectId, {
      preferences: {
        pages: storePreferences?.preferences?.pages || { block_display: false },
        navigation: {
          default_tab: newPreferences.defaultTab,
          hide_in_more_menu: newPreferences.hiddenTabs,
        },
      },
    });
  };

  /**
   * Toggle default tab setting
   * If tab is already default, resets to work_items; otherwise sets as default
   */
  const handleToggleDefaultTab = (tabKey: string) => {
    const newDefaultTab = tabKey === tabPreferences.defaultTab ? DEFAULT_TAB_KEY : tabKey;
    const newPreferences = { ...tabPreferences, defaultTab: newDefaultTab };
    updatePreferences(newPreferences)
      .then(() => {
        setToast({
          type: TOAST_TYPE.SUCCESS,
          title: "Success!",
          message: "Default tab updated successfully.",
        });
        return;
      })
      .catch(() => {
        setToast({
          type: TOAST_TYPE.ERROR,
          title: "Error!",
          message: "Failed to update default tab. Please try again later.",
        });
      });
  };

  /**
   * Hide a tab (moves to overflow menu with "Show" option)
   */
  const handleHideTab = (tabKey: string) => {
    const newPreferences = {
      ...tabPreferences,
      hiddenTabs: [...tabPreferences.hiddenTabs, tabKey],
    };
    try {
      updatePreferences(newPreferences);
    } catch (error) {
      console.error("Error hiding tab:", error);
      setToast({
        type: TOAST_TYPE.ERROR,
        title: "Error!",
        message: "Failed to hide tab. Please try again later.",
      });
    }
  };

  /**
   * Show a previously hidden tab (returns to visible pool)
   */
  const handleShowTab = (tabKey: string) => {
    const newPreferences = {
      ...tabPreferences,
      hiddenTabs: tabPreferences.hiddenTabs.filter((key) => key !== tabKey),
    };
    try {
      updatePreferences(newPreferences);
    } catch (error) {
      console.error("Error showing tab:", error);
      setToast({
        type: TOAST_TYPE.ERROR,
        title: "Error!",
        message: "Something went wrong. Please try again later.",
      });
    }
  };

  return {
    tabPreferences,
    isLoading,
    handleToggleDefaultTab,
    handleHideTab,
    handleShowTab,
  };
};