.

modules/customers/src/web/list/controllers/use-customer-summary-panel.controller.ts

@@ -18,7 +18,7 @@ export const useCustomerSummaryPanelController = ({
 
   const panelState = useRightPanelState({
     defaultMode: initialMode,
-    defaultVisibility: initialOpen ? "temporary" : "hidden",
+    defaultVisibility: initialOpen ? "visible" : "hidden",
   });
 
   const query = useCustomerGetQuery(customerId, {
@@ -26,16 +26,11 @@ export const useCustomerSummaryPanelController = ({
   });
 
   const openCustomerPanel = useCallback(
-    (nextCustomerId: string, mode: RightPanelMode = "view") => {
-      setCustomerId(nextCustomerId);
-
-      if (panelState.isPinned) {
-        panelState.openPersistent(mode);
-      } else {
-        panelState.openTemporary(mode);
-      }
+    (id: string, mode: RightPanelMode = "view") => {
+      setCustomerId(id);
+      panelState.open(mode);
     },
-    [panelState.isPinned, panelState.openTemporary, panelState.openPersistent]
+    [panelState.open]
   );
 
   const closePanel = useCallback(() => {

modules/customers/src/web/list/ui/blocks/customer-summary-panel/customer-summary-panel.tsx

@@ -2,7 +2,7 @@ import { RightPanel } from "@repo/rdx-ui/components";
 import type { RightPanelMode, RightPanelVisibility } from "@repo/rdx-ui/hooks";
 import { Button } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { PencilIcon, PinIcon, PinOffIcon } from "lucide-react";
+import { PencilIcon } from "lucide-react";
 
 import type { Customer } from "../../../../shared";
 
@@ -51,7 +51,6 @@ interface CustomerSummaryPanelProps {
   mode: RightPanelMode;
 
   onOpenChange: (open: boolean) => void;
-  onTogglePinned: () => void;
 
   onEdit?: (customer: Customer) => void;
   className?: string;
@@ -63,12 +62,9 @@ export const CustomerSummaryPanel = ({
   visibility,
   mode,
   onOpenChange,
-  onTogglePinned,
   onEdit,
   className,
 }: CustomerSummaryPanelProps) => {
-  const isPinned = visibility === "persistent";
-
   const titleMap: Record<RightPanelMode, string> = {
     view: "Ficha de cliente",
     edit: "Editar cliente",
@@ -80,16 +76,6 @@ export const CustomerSummaryPanel = ({
       className={cn("bg-transparent", className)}
       headerActions={
         <>
-          <Button
-            aria-label={isPinned ? "Desfijar panel" : "Fijar panel"}
-            aria-pressed={isPinned}
-            onClick={onTogglePinned}
-            size="icon-sm"
-            variant="ghost"
-          >
-            {isPinned ? <PinOffIcon className="size-4" /> : <PinIcon className="size-4" />}
-          </Button>
-
           {customer ? (
             <Button
               aria-label="Editar cliente"

modules/customers/src/web/list/ui/pages/list-customers-page.tsx

@@ -110,7 +110,6 @@ export const ListCustomersPage = () => {
 
                     panelCtrl.panelState.onOpenChange(true);
                   }}
-                  onTogglePinned={panelCtrl.panelState.togglePinned}
                   open={panelCtrl.panelState.isOpen}
                   visibility={panelCtrl.panelState.visibility}
                 />

packages/rdx-ui/src/hooks/side-panel/use-side-panel-state.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
 export type RightPanelMode = "view" | "edit" | "create";
-export type RightPanelVisibility = "hidden" | "temporary" | "persistent";
+export type RightPanelVisibility = "hidden" | "visible";
 
 export interface RightPanelStateOptions {
   defaultMode?: RightPanelMode;
@@ -12,14 +12,11 @@ export interface RightPanelState {
   mode: RightPanelMode;
   visibility: RightPanelVisibility;
   isOpen: boolean;
-  isPinned: boolean;
 }
 
 export interface RightPanelStateActions {
-  onOpenChange: (next: boolean) => void;
-  openTemporary: (mode?: RightPanelMode) => void;
-  openPersistent: (mode?: RightPanelMode) => void;
-  togglePinned: () => void;
+  onOpenChange: (open: boolean) => void;
+  open: (mode?: RightPanelMode) => void;
   close: () => void;
   reset: () => void;
 }
@@ -37,35 +34,19 @@ export const useRightPanelState = (
   const [mode, setMode] = useState<RightPanelMode>(defaultMode);
   const [visibility, setVisibility] = useState<RightPanelVisibility>(defaultVisibility);
 
-  const isOpen = visibility !== "hidden";
-  const isPinned = visibility === "persistent";
+  const isOpen = visibility === "visible";
+
+  const open = useCallback((nextMode: RightPanelMode = DEFAULT_MODE) => {
+    setMode(nextMode);
+    setVisibility("visible");
+  }, []);
 
   const close = useCallback(() => {
     setVisibility("hidden");
   }, []);
 
-  const onOpenChange = useCallback((next: boolean) => {
-    setVisibility((prev) => {
-      if (!next) return "hidden";
-      return prev === "persistent" ? "persistent" : "temporary";
-    });
-  }, []);
-
-  const openTemporary = useCallback((nextMode: RightPanelMode = DEFAULT_MODE) => {
-    setMode(nextMode);
-    setVisibility("temporary");
-  }, []);
-
-  const openPersistent = useCallback((nextMode: RightPanelMode = DEFAULT_MODE) => {
-    setMode(nextMode);
-    setVisibility("persistent");
-  }, []);
-
-  const togglePinned = useCallback(() => {
-    setVisibility((prev) => {
-      if (prev === "hidden") return prev;
-      return prev === "persistent" ? "temporary" : "persistent";
-    });
+  const onOpenChange = useCallback((open: boolean) => {
+    setVisibility(open ? "visible" : "hidden");
   }, []);
 
   const reset = useCallback(() => {
@@ -77,12 +58,9 @@ export const useRightPanelState = (
     mode,
     visibility,
     isOpen,
-    isPinned,
-    onOpenChange,
-    openTemporary,
-    openPersistent,
-    togglePinned,
+    open,
     close,
+    onOpenChange,
     reset,
   };
 };