snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/pages/header/actions.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageOptionsDropdown } from "../editor/toolbar";
+import { PageArchivedBadge } from "./archived-badge";
+import { PageCopyLinkControl } from "./copy-link-control";
+import { PageFavoriteControl } from "./favorite-control";
+import { PageOfflineBadge } from "./offline-badge";
+import { PageLockControl } from "./lock-control";
+
+type Props = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export const PageHeaderActions = observer(function PageHeaderActions(props: Props) {
+  const { page, storeType } = props;
+
+  return (
+    <div className="flex items-center gap-1">
+      <PageArchivedBadge page={page} />
+      <PageOfflineBadge page={page} />
+      <PageLockControl page={page} />
+      <PageCopyLinkControl page={page} />
+      <PageFavoriteControl page={page} />
+      <PageOptionsDropdown page={page} storeType={storeType} />
+    </div>
+  );
+});

apps/web/core/components/pages/header/archived-badge.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { ArchiveOutline } from "@makeplane/propel/icons";
+import { renderFormattedDate } from "@plane/utils";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageArchivedBadge = observer(function PageArchivedBadge({ page }: Props) {
+  if (!page.archived_at) return null;
+
+  return (
+    <div className="flex h-6 flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary">
+      <ArchiveOutline className="size-3.5 flex-shrink-0" />
+      <span className="text-11 font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
+    </div>
+  );
+});

apps/web/core/components/pages/header/copy-link-control.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { observer } from "mobx-react";
+
+import { LinkOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { IconButton } from "@plane/propel/icon-button";
+import { cn } from "@plane/utils";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageCopyLinkControl = observer(function PageCopyLinkControl({ page }: Props) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
+
+  // Cleanup timer on unmount
+  useEffect(
+    () => () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    []
+  );
+
+  const handleCopy = useCallback(() => {
+    pageOperations.copyLink();
+    setIsCopied(true);
+
+    // Clear previous timer if it exists
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    // Set new timer
+    timerRef.current = setTimeout(() => {
+      setIsCopied(false);
+      timerRef.current = null;
+    }, 1000);
+  }, [pageOperations]);
+
+  return (
+    <Tooltip label={isCopied ? "Copied!" : "Copy link"} side="bottom">
+      <IconButton
+        variant="ghost"
+        size="lg"
+        icon={isCopied ? TickOutline : LinkOutline}
+        onClick={handleCopy}
+        aria-label={isCopied ? "Copied link" : "Copy link"}
+        className={cn(isCopied && "text-success-primary")}
+      />
+    </Tooltip>
+  );
+});

apps/web/core/components/pages/header/favorite-control.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { StarOutline } from "@makeplane/propel/icons";
+// ui
+import { IconButton } from "@plane/propel/icon-button";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageFavoriteControl = observer(function PageFavoriteControl({ page }: Props) {
+  // derived values
+  const { is_favorite, canCurrentUserFavoritePage } = page;
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
+
+  if (!canCurrentUserFavoritePage) return null;
+
+  return (
+    <IconButton
+      variant="ghost"
+      size="lg"
+      icon={StarOutline}
+      onClick={() => {
+        pageOperations.toggleFavorite();
+      }}
+      aria-label={is_favorite ? "Remove favorite" : "Add to favorites"}
+      className={
+        is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
+      }
+    />
+  );
+});

apps/web/core/components/pages/header/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

apps/web/core/components/pages/header/lock-control.tsx

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { LockedOutline, UnlockedOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+// Define our lock display states, renaming "icon-only" to "neutral"
+type LockDisplayState = "neutral" | "locked" | "unlocked";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageLockControl = observer(function PageLockControl({ page }: Props) {
+  // Initial state: if locked, then "locked", otherwise default to "neutral"
+  const [displayState, setDisplayState] = useState<LockDisplayState>(page.is_locked ? "locked" : "neutral");
+  // derived values
+  const { canCurrentUserLockPage, is_locked } = page;
+  // Ref for the transition timer
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Ref to store the previous value of isLocked for detecting transitions
+  const prevLockedRef = useRef(is_locked);
+  // page operations
+  const {
+    pageOperations: { toggleLock },
+  } = usePageOperations({
+    page,
+  });
+
+  // Cleanup any running timer on unmount
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+
+  // Update display state when isLocked changes
+  useEffect(() => {
+    // Clear any previous timer to avoid overlapping transitions
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
+    // Transition logic:
+    // If locked, ensure the display state is "locked"
+    // If unlocked after being locked, show "unlocked" briefly then revert to "neutral"
+    if (is_locked) {
+      setDisplayState("locked");
+    } else if (prevLockedRef.current === true) {
+      setDisplayState("unlocked");
+      timerRef.current = setTimeout(() => {
+        setDisplayState("neutral");
+        timerRef.current = null;
+      }, 600);
+    } else {
+      setDisplayState("neutral");
+    }
+
+    // Update the previous locked state
+    prevLockedRef.current = is_locked;
+  }, [is_locked]);
+
+  if (!canCurrentUserLockPage) return null;
+
+  // Render different UI based on the current display state
+  return (
+    <>
+      {displayState === "neutral" && (
+        <Tooltip label="Lock" side="bottom">
+          <button
+            type="button"
+            onClick={toggleLock}
+            className="grid size-6 flex-shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
+            aria-label="Lock"
+          >
+            <LockedOutline className="size-3.5" />
+          </button>
+        </Tooltip>
+      )}
+
+      {displayState === "locked" && (
+        <button
+          type="button"
+          onClick={toggleLock}
+          className="flex h-6 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary transition-colors hover:bg-accent-primary/30"
+          aria-label="Locked"
+        >
+          <LockedOutline className="animate-lock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
+            Locked
+          </span>
+        </button>
+      )}
+
+      {displayState === "unlocked" && (
+        <div
+          className="flex h-6 animate-fade-out items-center gap-1 rounded-sm px-2 text-secondary"
+          aria-label="Unlocked"
+        >
+          <UnlockedOutline className="animate-unlock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in animate-text-fade-out overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
+            Unlocked
+          </span>
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/pages/header/offline-badge.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// hooks
+import useOnlineStatus from "@/hooks/use-online-status";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageOfflineBadge = observer(function PageOfflineBadge({ page }: Props) {
+  // use online status
+  const { isOnline } = useOnlineStatus();
+
+  if (!page.isContentEditable || isOnline) return null;
+
+  return (
+    <Tooltip
+      label="You are offline. You can continue making changes. They will be synced when you are back online."
+      layout="stacked"
+    >
+      <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+        <span className="size-1.5 flex-shrink-0 rounded-full bg-layer-1" />
+        <span>Offline</span>
+      </div>
+    </Tooltip>
+  );
+});

apps/web/core/components/pages/header/root.tsx

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { FilterOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TPageFilterProps, TPageNavigationTabs } from "@plane/types";
+import { Header, EHeaderVariant } from "@plane/ui";
+import { calculateTotalFilters } from "@plane/utils";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { usePageStore } from "@/hooks/store";
+import type { EPageStoreType } from "@/hooks/store";
+// local imports
+import { PageAppliedFiltersList } from "../list/applied-filters";
+import { PageFiltersSelection } from "../list/filters";
+import { PageOrderByDropdown } from "../list/order-by";
+import { PageSearchInput } from "../list/search-input";
+import { PageTabNavigation } from "../list/tab-navigation";
+
+type Props = {
+  pageType: TPageNavigationTabs;
+  projectId: string;
+  storeType: EPageStoreType;
+  workspaceSlug: string;
+};
+
+export const PagesListHeaderRoot = observer(function PagesListHeaderRoot(props: Props) {
+  const { pageType, projectId, storeType, workspaceSlug } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const { filters, updateFilters, clearAllFilters } = usePageStore(storeType);
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TPageFilterProps, value: string | null) => {
+      let newValues = filters.filters?.[key];
+
+      if (key === "favorites") newValues = !!value;
+      if (Array.isArray(newValues)) {
+        if (!value) newValues = [];
+        else newValues = newValues.filter((val) => val !== value);
+      }
+
+      updateFilters("filters", { [key]: newValues });
+    },
+    [filters.filters, updateFilters]
+  );
+
+  const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
+
+  return (
+    <>
+      <Header variant={EHeaderVariant.SECONDARY}>
+        <Header.LeftItem>
+          <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
+        </Header.LeftItem>
+        <Header.RightItem className="items-center">
+          <PageSearchInput
+            searchQuery={filters.searchQuery}
+            updateSearchQuery={(val) => updateFilters("searchQuery", val)}
+          />
+          <PageOrderByDropdown
+            sortBy={filters.sortBy}
+            sortKey={filters.sortKey}
+            onChange={(val) => {
+              if (val.key) updateFilters("sortKey", val.key);
+              if (val.order) updateFilters("sortBy", val.order);
+            }}
+          />
+          <FiltersDropdown
+            icon={<FilterOutline className="h-3 w-3" />}
+            title={t("common.filters")}
+            placement="bottom-end"
+            isFiltersApplied={isFiltersApplied}
+          >
+            <PageFiltersSelection
+              filters={filters}
+              handleFiltersUpdate={updateFilters}
+              memberIds={workspaceMemberIds ?? undefined}
+            />
+          </FiltersDropdown>
+        </Header.RightItem>
+      </Header>
+      {calculateTotalFilters(filters?.filters ?? {}) !== 0 && (
+        <Header variant={EHeaderVariant.TERNARY}>
+          <PageAppliedFiltersList
+            appliedFilters={filters.filters ?? {}}
+            handleClearAllFilters={clearAllFilters}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+          />
+        </Header>
+      )}
+    </>
+  );
+});

apps/web/core/components/pages/header/syncing-badge.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { CloudOff, Dot } from "lucide-react";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Badge } from "@plane/propel/badge";
+
+type Props = {
+  syncStatus: "syncing" | "synced" | "error";
+};
+
+const BADGE_CONTENT = {
+  syncing: {
+    label: "Syncing...",
+    tooltipLabel: "Syncing... Your changes are being synced with the server. You can continue making changes.",
+  },
+  error: {
+    label: "Connection lost",
+    tooltipLabel:
+      "Connection lost. We're having trouble connecting to the websocket server. Your changes will be synced and saved every 10 seconds.",
+  },
+};
+
+export function PageSyncingBadge({ syncStatus }: Props) {
+  const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
+  const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
+
+  useEffect(() => {
+    // Only handle transitions when there's a change
+    if (prevSyncStatus !== syncStatus) {
+      if (syncStatus === "synced") {
+        // Delay hiding to allow exit animation to complete
+        setTimeout(() => {
+          setIsVisible(false);
+        }, 300); // match animation duration
+      } else {
+        setIsVisible(true);
+      }
+      setPrevSyncStatus(syncStatus);
+    }
+  }, [syncStatus, prevSyncStatus]);
+
+  if (!isVisible || syncStatus === "synced") return null;
+
+  // The synced early-return above guarantees this key exists
+  const content = BADGE_CONTENT[syncStatus];
+
+  return (
+    <Tooltip label={content.tooltipLabel} layout="stacked">
+      <span className="animate-quickFadeIn">
+        <Badge
+          variant={syncStatus === "syncing" ? "brand" : "danger"}
+          size="lg"
+          prependIcon={syncStatus === "syncing" ? <Dot /> : <CloudOff />}
+        >
+          {content.label}
+        </Badge>
+      </span>
+    </Tooltip>
+  );
+}