@alpaca-editor/core 1.0.3955 → 1.0.3959

package/src/editor/sidebar/SidebarView.tsx

@@ -1,44 +1,22 @@
-import "allotment/dist/style.css";
-import { Allotment, AllotmentHandle } from "allotment";
-
-import { useEffect, useRef, useState } from "react";
 import { EditContextType } from "../client/editContext";
 import { classNames } from "primereact/utils";
 import { Sidebar } from "../../config/types";
+import { Splitter, SplitterPanel } from "../ui/Splitter";
+import { cn } from "../../lib/utils";
 
 export function SidebarView({
   sidebar,
   editContext,
   active,
+  onClose,
+  detached,
 }: {
   sidebar: Sidebar;
   editContext: EditContextType;
   active: boolean;
+  onClose: () => void;
+  detached?: boolean;
 }) {
-  const splitter = useRef<AllotmentHandle>(null);
-
-  const [sizes, setSizes] = useState<number[]>([]);
-  const [preferredSizes, setPreferredSizes] = useState<number[] | undefined>(
-    undefined,
-  );
-  const [panelsExpanded, setPanelsExpanded] = useState<boolean[]>([]);
-  const [sizeToSet, setSizeToSet] = useState<number[] | undefined>();
-
-  const panelHeaderSize = 40;
-  const toggle = (panelIndex: number) => {
-    const newSize = panelsExpanded[panelIndex]
-      ? panelHeaderSize
-      : (preferredSizes || sizes)[panelIndex];
-
-    if (newSize) resizePanel(panelIndex, newSize);
-
-    setPanelsExpanded((x) => {
-      const newState = [...x];
-      newState[panelIndex] = !newState[panelIndex];
-      return newState;
-    });
-  };
-
   const resolvedPanels = sidebar.panels.map((x) => {
     if (typeof x === "function") {
       return x(editContext!);
@@ -46,107 +24,95 @@ export function SidebarView({
     return x;
   });
 
-  useEffect(() => {
-    setPanelsExpanded(sidebar.panels.map(() => true));
-    setPreferredSizes(() => resolvedPanels.map((x) => x.initialSize));
-  }, [sidebar]);
-
-  const resizePanel = (panelIndex: number, newSize: number) => {
-    const totalSize = sizes.reduce((a, b) => a + b, 0);
-    const totalOther = totalSize - sizes[panelIndex]!;
-    const tmpSizes = [...sizes];
-    tmpSizes[panelIndex] = newSize;
-    const percentages = tmpSizes.map((x) => x / totalOther);
-    percentages[panelIndex] = 0;
-    const remaining = totalSize - newSize;
-    const newSizes = percentages.map((x) => x * remaining);
-    newSizes[panelIndex] = newSize;
-    setSizes(newSizes);
-
-    setSizeToSet(newSizes);
-  };
-
-  useEffect(() => {
-    if (sizeToSet) splitter.current?.resize(sizeToSet);
-  }, [sizeToSet]);
-
   const getHeader = (panel: any, index: number) => {
     if (panel.header) return panel.header({ panel, index });
 
     return (
-      <div
-        className={classNames(
-          "justify relative flex cursor-pointer items-center bg-gray-50 p-2.5 text-xs text-gray-500 uppercase",
-          panelsExpanded[index] ? "border-b border-gray-200" : "",
-        )}
-        onClick={() => toggle(index)}
-      >
+      <div className="border-gray-3 relative flex items-center border-b p-2.5 text-xs text-gray-500 uppercase">
         {panel.icon &&
           (typeof panel.icon === "string" ? (
             <i className={classNames(panel.icon, "pi mr-1.5")}></i>
           ) : (
-            <div className="mr-2 h-4 w-4">{panel.icon}</div>
+            <div className="mr-2">{panel.icon}</div>
           ))}
         <div className="mr-auto">{panel.title}</div>
-        <i
-          className={classNames(
-            panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down",
-            "pi text-sm",
-          )}
-        ></i>
+
+        {/* Close button - only show on the first panel */}
+        {index === 0 && (
+          <button
+            onClick={onClose}
+            className="hover:bg-gray-5 ml-2 flex h-6 w-6 items-center justify-center rounded"
+          >
+            <i className="pi pi-times text-sm"></i>
+          </button>
+        )}
       </div>
     );
   };
 
-  const initalSizes = resolvedPanels.map((x) => x.initialSize);
-
-  return (
-    <div className={!active ? "hidden h-full" : "h-full"}>
-      <Allotment
-        vertical={true}
-        snap={true}
-        className={!active ? "hidden h-full" : "h-full"}
-        ref={splitter}
-        defaultSizes={initalSizes}
-        onChange={(s) => {
-          if (sizes.join(",") != s.join(",")) setSizes(s);
+  if (!active) {
+    return <div className="hidden h-full" />;
+  }
 
-          const newPreferred = [...(preferredSizes || s)];
-          s.forEach((x, i) => {
-            if (x > panelHeaderSize) newPreferred[i] = x;
-          });
+  // Single panel - no splitter needed
+  if (resolvedPanels.length === 1) {
+    const panel = resolvedPanels[0];
+    if (!panel) return <div className="hidden h-full" />;
 
-          setPreferredSizes(newPreferred);
-        }}
-      >
-        {resolvedPanels.map((panel, index) => (
-          <Allotment.Pane
-            key={index}
-            //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
-            maxSize={
-              panelsExpanded.length <= index || panelsExpanded[index]
-                ? 10000
-                : panelHeaderSize
-            }
-          >
-            <div className="flex h-full flex-col">
-              {getHeader(panel, index)}
-              {panelsExpanded[index] && (
-                <div className="relative flex-1 overflow-hidden">
-                  <div
-                    className={classNames(
-                      "absolute inset-0",
-                      panel.noOverflow ? "" : "overflow-y-auto",
-                    )}
-                  >
-                    {panel.content}
-                  </div>
-                </div>
+    return (
+      <div className={cn("h-full", detached ? "border-gray-3 border p-2" : "")}>
+        <div
+          className={cn(
+            "flex h-full flex-col bg-white",
+            detached ? "rounded-xl" : "",
+          )}
+        >
+          {getHeader(panel, 0)}
+          <div className="relative flex-1 overflow-hidden">
+            <div
+              className={classNames(
+                "absolute inset-0",
+                panel.noOverflow ? "" : "overflow-y-auto",
               )}
+            >
+              {panel.content}
             </div>
-          </Allotment.Pane>
-        ))}
-      </Allotment>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Multiple panels - use existing Splitter component
+  const splitterPanels: SplitterPanel[] = resolvedPanels.map(
+    (panel, index) => ({
+      name: `panel-${index}`,
+      defaultSize: index === 0 ? panel.initialSize || 300 : "auto",
+      content: (
+        <div className="flex h-full flex-col bg-white">
+          {getHeader(panel, index)}
+          <div className="relative flex-1 overflow-hidden">
+            <div
+              className={classNames(
+                "absolute inset-0",
+                panel.noOverflow ? "" : "overflow-y-auto",
+              )}
+            >
+              {panel.content}
+            </div>
+          </div>
+        </div>
+      ),
+    }),
+  );
+
+  return (
+    <div className={cn("h-full", detached ? "p-2" : "")}>
+      <Splitter
+        panels={splitterPanels}
+        direction="vertical"
+        localStorageKey={`sidebar-${sidebar.panels.length}-panels`}
+      />
     </div>
   );
 }

package/src/editor/sidebar/ViewSelector.tsx

@@ -1,60 +1,228 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { classNames } from "primereact/utils";
 
 import { useEditContext } from "../client/editContext";
 import { cn } from "../../lib/utils";
+import { VerticalDotsIcon, ViewToggleIcon } from "../ui/Icons";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { Button } from "../../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { DrawingPinFilledIcon, DrawingPinIcon } from "@radix-ui/react-icons";
 
 export function ViewSelector() {
   const editContext = useEditContext();
   const userViews = editContext?.userInfo.views;
 
-  const views =
-    editContext?.configuration.editor.views
-      .filter(
-        (x) =>
-          (x.visible && x.visible(editContext)) || (!x.visible && !x.hidden),
-      )
-      .filter(
-        (x) =>
-          !userViews || userViews.map((view) => view.name).includes(x.name),
-      ) ?? [];
+  // Get values directly from editContext, with fallbacks
+  const pinnedViews =
+    editContext?.userInfo.preferences?.pinnedViews ||
+    editContext?.configuration.editor.defaultPinnedViews ||
+    [];
+
+  const showViewNames =
+    editContext?.userInfo.preferences?.showViewNames ?? false;
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const views = useMemo(() => {
+    return (
+      editContext?.configuration.editor.views
+        .filter(
+          (x) =>
+            (x.visible && x.visible(editContext)) || (!x.visible && !x.hidden),
+        )
+        .filter(
+          (x) =>
+            !userViews || userViews.map((view) => view.name).includes(x.name),
+        ) ?? []
+    );
+  }, [editContext, userViews]);
+
+  const { visibleViews } = useMemo(() => {
+    const visible = views.filter(
+      (view) =>
+        // Always show selected view
+        view.name === editContext?.viewName ||
+        // Show pinned views
+        pinnedViews.includes(view.name),
+    );
+
+    return { visibleViews: visible };
+  }, [views, pinnedViews, editContext?.viewName]);
+
+  const togglePin = (viewName: string) => {
+    const newPinnedViews = pinnedViews.includes(viewName)
+      ? pinnedViews.filter((name) => name !== viewName)
+      : [...pinnedViews, viewName];
+
+    // Save to user preferences via editContext
+    editContext?.setUserPreferences({ pinnedViews: newPinnedViews });
+  };
+
+  const toggleShowNames = () => {
+    const newShowNames = !showViewNames;
+    // Save to user preferences via editContext
+    editContext?.setUserPreferences({ showViewNames: newShowNames });
+  };
+
+  const renderViewIcon = (view: any, additionalClassName?: string) => {
+    if (view.icon && React.isValidElement(view.icon)) {
+      return React.cloneElement(view.icon as React.ReactElement<any>, {
+        className: cn("w-5 h-5", additionalClassName),
+      });
+    }
+    return null;
+  };
 
   return (
-    <div
-      className={cn(
-        "z-10 flex items-center gap-3 bg-neutral-200 p-2 shadow-md",
-        editContext?.isMobile
-          ? "scrollbar-hide flex-row overflow-x-auto"
-          : "max-w-11 flex-col",
-      )}
-    >
-      {views
+    <TooltipProvider>
+      {/* Visible views (pinned + selected) */}
+      {visibleViews
         .filter((x) => x.icon)
-        .map((x, i) => (
-          <div
-            title={x.title}
-            key={i}
-            className={classNames(
-              editContext?.viewName == x.name
-                ? "active bg-neutral-350 rounded-sm text-neutral-800"
-                : "text-neutral-500 hover:text-gray-900",
-              "cursor-pointer p-1.5",
+        .map((view, i) => (
+          <Tooltip key={`visible-${i}`}>
+            <TooltipTrigger asChild>
+              <div
+                className={classNames(
+                  editContext?.viewName === view.name
+                    ? "active bg-theme-secondary-light text-theme-secondary rounded-sm"
+                    : "text-dark hover:bg-gray-5",
+                  "relative flex cursor-pointer flex-col items-center justify-center",
+                  showViewNames ? "p-1" : "p-1.5",
+                  editContext?.isMobile ? "flex-shrink-0" : "",
+                )}
+                data-sidebarview-name={view.name}
+                onClick={() => {
+                  if (view.name !== editContext?.viewName) {
+                    editContext?.switchView(view.name);
+                  }
+                }}
+              >
+                <div className={showViewNames ? "p-0.5" : ""}>
+                  {renderViewIcon(view)}
+                </div>
+                {showViewNames && (
+                  <span className="mt-1 max-w-[60px] text-center text-xs leading-tight break-words">
+                    {view.title || view.name}
+                  </span>
+                )}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {view.title || view.name}
+            </TooltipContent>
+          </Tooltip>
+        ))}
+
+      {/* Three dots menu for non-selected views */}
+      {views.length > 0 && (
+        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    "p-1.5 text-neutral-500 hover:text-gray-900",
+                    editContext?.isMobile ? "flex-shrink-0" : "",
+                  )}
+                >
+                  <VerticalDotsIcon />
+                </Button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent>More views</TooltipContent>
+          </Tooltip>
+          <PopoverContent
+            className="w-56 p-2"
+            side={editContext?.isMobile ? "bottom" : "right"}
+            align="start"
+          >
+            <div className="space-y-1">
+              <div className="px-2 py-1 text-xs font-medium tracking-wider text-gray-600 uppercase">
+                All Views
+              </div>
+              {views.map((view, i) => {
+                const isPinned = pinnedViews.includes(view.name);
+                return (
+                  <div
+                    key={`hidden-${i}`}
+                    className="group flex cursor-pointer items-center justify-between rounded p-2 hover:bg-gray-100"
+                  >
+                    <div
+                      className="flex flex-1 items-center gap-2"
+                      onClick={() => {
+                        editContext?.switchView(view.name);
+                        setIsPopoverOpen(false);
+                      }}
+                    >
+                      {renderViewIcon(view, "w-4 h-4")}
+                      <span className="text-sm">{view.title || view.name}</span>
+                    </div>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className={cn(
+                            "h-6 w-6 transition-opacity",
+                            isPinned
+                              ? "opacity-100"
+                              : "opacity-0 group-hover:opacity-100",
+                          )}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            togglePin(view.name);
+                          }}
+                        >
+                          {isPinned ? (
+                            <DrawingPinFilledIcon className="h-3 w-3" />
+                          ) : (
+                            <DrawingPinIcon className="h-3 w-3" />
+                          )}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {isPinned ? "Unpin view" : "Pin view"}
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                );
+              })}
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+
+      {/* Toggle for showing view names */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              "mt-auto p-1.5 text-neutral-500 hover:text-gray-900",
               editContext?.isMobile ? "flex-shrink-0" : "",
             )}
-            data-sidebarview-name={x.name}
-            onClick={() => {
-              if (x.name !== editContext?.viewName) {
-                editContext?.switchView(x.name);
-              }
-            }}
+            onClick={toggleShowNames}
           >
-            {x.icon &&
-              React.isValidElement(x.icon) &&
-              React.cloneElement(x.icon as React.ReactElement<any>, {
-                className: "w-5 h-5",
-              })}
-          </div>
-        ))}
-    </div>
+            {showViewNames ? <ViewToggleIcon /> : <ViewToggleIcon />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {showViewNames ? "Hide view names" : "Show view names"}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }