[WEB-3590] chore: sidebar enhancements (#6780)

* chore: implement optimistic update for extended sidebar item

* chore: replace eye icon with pin icon for show/hide functionality

* chore: code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia
2025-03-20 16:43:45 +05:30
committed by GitHub
parent e22265dc93
commit b0e941e4e2
2 changed files with 22 additions and 10 deletions

View File

@@ -5,7 +5,7 @@ import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { Eye, EyeClosed } from "lucide-react";
import { Pin, PinOff } from "lucide-react";
// plane imports
import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
@@ -197,16 +197,16 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
</div>
)}
{isPinned ? (
<Tooltip tooltipContent="Hide tab">
<Eye
className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-300 outline-none"
<Tooltip tooltipContent="Unpin">
<PinOff
className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
/>
</Tooltip>
) : (
<Tooltip tooltipContent="Show tab">
<EyeClosed
className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-400 outline-none"
<Tooltip tooltipContent="Pin">
<Pin
className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
/>
</Tooltip>

View File

@@ -1,3 +1,4 @@
import clone from "lodash/clone";
import set from "lodash/set";
import { action, computed, observable, makeObservable, runInAction } from "mobx";
// types
@@ -214,18 +215,29 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
key: string,
data: Partial<IWorkspaceSidebarNavigationItem>
) => {
// Store the data before update to use for reverting if needed
const beforeUpdateData = clone(this.navigationPreferencesMap[workspaceSlug]?.[key]);
try {
const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
runInAction(() => {
this.navigationPreferencesMap[workspaceSlug] = {
...this.navigationPreferencesMap[workspaceSlug],
[key]: response,
[key]: {
...beforeUpdateData,
...data,
},
};
});
const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
return response;
} catch (error) {
// Revert to original data if API call fails
runInAction(() => {
this.navigationPreferencesMap[workspaceSlug] = {
...this.navigationPreferencesMap[workspaceSlug],
[key]: beforeUpdateData,
};
});
console.error("Failed to update sidebar preference:", error);
}
};