base

plane-src/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { CircleArrowUp, CornerDownRight, RefreshCcw, Sparkles } from "lucide-react";
+// ui
+import { Tooltip } from "@plane/propel/tooltip";
+// components
+import { cn } from "@plane/utils";
+import { RichTextEditor } from "@/components/editor/rich-text";
+// helpers
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+type Props = {
+  handleInsertText: (insertOnNextLine: boolean) => void;
+  handleRegenerate: () => Promise<void>;
+  isRegenerating: boolean;
+  response: string | undefined;
+  workspaceSlug: string;
+};
+
+export function AskPiMenu(props: Props) {
+  const { handleInsertText, handleRegenerate, isRegenerating, response, workspaceSlug } = props;
+  // states
+  const [query, setQuery] = useState("");
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
+
+  return (
+    <>
+      <div
+        className={cn("flex items-center gap-3 px-4 py-3.5", {
+          "items-start": response,
+        })}
+      >
+        <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
+          <Sparkles className="size-3" />
+        </span>
+        {response ? (
+          <div>
+            <RichTextEditor
+              editable={false}
+              displayConfig={{
+                fontSize: "small-font",
+              }}
+              id="editor-ai-response"
+              initialValue={response}
+              containerClassName="!p-0 border-none"
+              editorClassName="!pl-0"
+              workspaceId={workspaceId}
+              workspaceSlug={workspaceSlug}
+            />
+            <div className="mt-3 flex items-center gap-4">
+              <button
+                type="button"
+                className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
+                onClick={() => handleInsertText(false)}
+              >
+                Replace selection
+              </button>
+              <Tooltip tooltipContent="Add to next line">
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                  onClick={() => handleInsertText(true)}
+                >
+                  <CornerDownRight className="size-4 text-tertiary" />
+                </button>
+              </Tooltip>
+              <Tooltip tooltipContent="Re-generate response">
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRegenerate();
+                  }}
+                  disabled={isRegenerating}
+                >
+                  <RefreshCcw
+                    className={cn("size-4 text-tertiary", {
+                      "animate-spin": isRegenerating,
+                    })}
+                  />
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        ) : (
+          <p className="text-13 text-secondary">AI is answering...</p>
+        )}
+      </div>
+      <div className="px-4 py-3">
+        <div className="flex items-center gap-2 rounded-md border border-subtle p-2">
+          <span className="grid size-3 flex-shrink-0 place-items-center">
+            <Sparkles className="size-3 text-secondary" />
+          </span>
+          <input
+            type="text"
+            className="w-full border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Tell AI what to do..."
+          />
+          <span className="grid size-4 flex-shrink-0 place-items-center">
+            <CircleArrowUp className="size-4 text-secondary" />
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}

plane-src/apps/web/ce/components/pages/editor/ai/index.ts

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

plane-src/apps/web/ce/components/pages/editor/ai/menu.tsx

@@ -0,0 +1,309 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+import { CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
+// plane editor
+import type { EditorRefApi } from "@plane/editor";
+import { ChevronRightIcon } from "@plane/propel/icons";
+// plane ui
+import { Tooltip } from "@plane/propel/tooltip";
+// components
+import { cn } from "@plane/utils";
+import { RichTextEditor } from "@/components/editor/rich-text";
+// plane web constants
+import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/constants/ai";
+// plane web services
+import type { TTaskPayload } from "@/services/ai.service";
+import { AIService } from "@/services/ai.service";
+import { AskPiMenu } from "./ask-pi-menu";
+const aiService = new AIService();
+
+type Props = {
+  editorRef: EditorRefApi | null;
+  isOpen: boolean;
+  onClose: () => void;
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+const MENU_ITEMS: {
+  icon: LucideIcon;
+  key: AI_EDITOR_TASKS;
+  label: string;
+}[] = [
+  {
+    key: AI_EDITOR_TASKS.ASK_ANYTHING,
+    icon: Sparkles,
+    label: "Ask Pi",
+  },
+];
+
+const TONES_LIST = [
+  {
+    key: "default",
+    label: "Default",
+    casual_score: 5,
+    formal_score: 5,
+  },
+  {
+    key: "professional",
+    label: "💼 Professional",
+    casual_score: 0,
+    formal_score: 10,
+  },
+  {
+    key: "casual",
+    label: "😃 Casual",
+    casual_score: 10,
+    formal_score: 0,
+  },
+];
+
+export function EditorAIMenu(props: Props) {
+  const { editorRef, isOpen, onClose, workspaceId, workspaceSlug } = props;
+  // states
+  const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
+  const [response, setResponse] = useState<string | undefined>(undefined);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  // refs
+  const responseContainerRef = useRef<HTMLDivElement>(null);
+  // params
+  const handleGenerateResponse = async (payload: TTaskPayload) => {
+    if (!workspaceSlug) return;
+    await aiService.performEditorTask(workspaceSlug.toString(), payload).then((res) => setResponse(res.response));
+  };
+  // handle task click
+  const handleClick = async (key: AI_EDITOR_TASKS) => {
+    const selection = editorRef?.getSelectedText();
+    if (!selection || activeTask === key) return;
+    setActiveTask(key);
+    if (key === AI_EDITOR_TASKS.ASK_ANYTHING) return;
+    setResponse(undefined);
+    setIsRegenerating(false);
+    await handleGenerateResponse({
+      task: key,
+      text_input: selection,
+    });
+  };
+  // handle re-generate response
+  const handleRegenerate = async () => {
+    const selection = editorRef?.getSelectedText();
+    if (!selection || !activeTask) return;
+    setIsRegenerating(true);
+    await handleGenerateResponse({
+      task: activeTask,
+      text_input: selection,
+    })
+      .then(() =>
+        responseContainerRef.current?.scrollTo({
+          top: 0,
+          behavior: "smooth",
+        })
+      )
+      .finally(() => setIsRegenerating(false));
+  };
+  // handle re-generate response
+  const handleToneChange = async (key: string) => {
+    const selectedTone = TONES_LIST.find((t) => t.key === key);
+    const selection = editorRef?.getSelectedText();
+    if (!selectedTone || !selection || !activeTask) return;
+    setResponse(undefined);
+    setIsRegenerating(false);
+    await handleGenerateResponse({
+      casual_score: selectedTone.casual_score,
+      formal_score: selectedTone.formal_score,
+      task: activeTask,
+      text_input: selection,
+    }).then(() =>
+      responseContainerRef.current?.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      })
+    );
+  };
+  // handle replace selected text with the response
+  const handleInsertText = (insertOnNextLine: boolean) => {
+    if (!response) return;
+    editorRef?.insertText(response, insertOnNextLine);
+    onClose();
+  };
+
+  // reset on close
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveTask(null);
+      setResponse(undefined);
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      className={cn(
+        "flex w-[210px] flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
+        {
+          "w-[700px]": activeTask,
+        }
+      )}
+    >
+      <div
+        className={cn("flex max-h-72 w-full", {
+          "divide-x divide-subtle-1": activeTask,
+        })}
+      >
+        <div className="w-[210px] flex-shrink-0 overflow-y-auto px-2 py-2.5 transition-all">
+          {MENU_ITEMS.map((item) => {
+            const isActiveTask = activeTask === item.key;
+
+            return (
+              <button
+                key={item.key}
+                type="button"
+                className={cn(
+                  "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary transition-colors hover:bg-layer-1",
+                  {
+                    "bg-layer-1": isActiveTask,
+                  }
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClick(item.key);
+                }}
+              >
+                <span className="flex flex-shrink-0 items-center gap-2 truncate">
+                  <item.icon className="size-3 flex-shrink-0" />
+                  {item.label}
+                </span>
+                <ChevronRightIcon
+                  className={cn("pointer-events-none size-3 flex-shrink-0 opacity-0 transition-opacity", {
+                    "pointer-events-auto opacity-100": isActiveTask,
+                  })}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <div
+          ref={responseContainerRef}
+          className={cn("w-0 flex-shrink-0 overflow-hidden transition-all", {
+            "vertical-scrollbar scrollbar-sm w-[490px] overflow-auto": activeTask,
+          })}
+        >
+          {activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
+            <AskPiMenu
+              handleInsertText={handleInsertText}
+              handleRegenerate={handleRegenerate}
+              isRegenerating={isRegenerating}
+              response={response}
+              workspaceSlug={workspaceSlug}
+            />
+          ) : (
+            <>
+              <div
+                className={cn("flex items-center gap-3 px-4 py-3.5", {
+                  "items-start": response,
+                })}
+              >
+                <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
+                  <Sparkles className="size-3" />
+                </span>
+                {response ? (
+                  <div>
+                    <RichTextEditor
+                      displayConfig={{
+                        fontSize: "small-font",
+                      }}
+                      editable={false}
+                      id="editor-ai-response"
+                      initialValue={response}
+                      containerClassName="!p-0 border-none"
+                      editorClassName="!pl-0"
+                      workspaceId={workspaceId}
+                      workspaceSlug={workspaceSlug}
+                    />
+                    <div className="mt-3 flex items-center gap-4">
+                      <button
+                        type="button"
+                        className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
+                        onClick={() => handleInsertText(false)}
+                      >
+                        Replace selection
+                      </button>
+                      <Tooltip tooltipContent="Add to next line">
+                        <button
+                          type="button"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                          onClick={() => handleInsertText(true)}
+                        >
+                          <CornerDownRight className="size-4 text-tertiary" />
+                        </button>
+                      </Tooltip>
+                      <Tooltip tooltipContent="Re-generate response">
+                        <button
+                          type="button"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleRegenerate();
+                          }}
+                          disabled={isRegenerating}
+                        >
+                          <RefreshCcw
+                            className={cn("size-4 text-tertiary", {
+                              "animate-spin": isRegenerating,
+                            })}
+                          />
+                        </button>
+                      </Tooltip>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-13 text-secondary">
+                    {activeTask ? LOADING_TEXTS[activeTask] : "Pi is writing"}...
+                  </p>
+                )}
+              </div>
+              <div className="sticky bottom-0 flex w-full items-center gap-2 bg-surface-1 py-2 pl-[54.8px]">
+                {TONES_LIST.map((tone) => (
+                  <button
+                    key={tone.key}
+                    type="button"
+                    className={cn(
+                      "rounded-sm bg-layer-1 p-1 text-11 font-medium text-secondary transition-colors outline-none",
+                      {
+                        "bg-accent-primary/20 text-accent-primary": tone.key === "default",
+                      }
+                    )}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleToneChange(tone.key);
+                    }}
+                  >
+                    {tone.label}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {activeTask && (
+        <div className="flex items-center gap-2 rounded-b-md border-t border-subtle bg-surface-2 px-4 py-2 text-tertiary">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
+            <TriangleAlert className="size-3" />
+          </span>
+          <p className="flex-shrink-0 text-11 font-medium">
+            By using this feature, you consent to sharing the message with a 3rd party service.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

plane-src/apps/web/ce/components/pages/editor/embed/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 "./issue-embed-upgrade-card";

plane-src/apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { getButtonStyling } from "@plane/propel/button";
+import { cn } from "@plane/utils";
+// components
+import { ProIcon } from "@/components/common/pro-icon";
+
+export function IssueEmbedUpgradeCard(props: any) {
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-5 rounded-md border-[0.5px] border-subtle bg-layer-1 px-5 py-2 shadow-raised-100 max-md:flex-wrap",
+        {
+          "border-2": props.selected,
+        }
+      )}
+    >
+      <div className="flex items-center gap-4">
+        <ProIcon className="size-4 flex-shrink-0" />
+        <p className="!text-14 text-secondary">
+          Embed and access issues in pages seamlessly, upgrade to NODE.DC Pro now.
+        </p>
+      </div>
+      <a
+        href="https://plane.so/pro"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(getButtonStyling("primary", "base"), "no-underline")}
+      >
+        Upgrade
+      </a>
+    </div>
+  );
+}

plane-src/apps/web/ce/components/pages/editor/index.ts

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

plane-src/apps/web/ce/components/pages/extra-actions.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// store
+import type { EPageStoreType } from "@/plane-web/hooks/store";
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageHeaderExtraActionsProps = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export function PageDetailsHeaderExtraActions(_props: TPageHeaderExtraActionsProps) {
+  return null;
+}

plane-src/apps/web/ce/components/pages/header/collaborators-list.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageCollaboratorsListProps = {
+  page: TPageInstance;
+};
+
+export function PageCollaboratorsList({}: TPageCollaboratorsListProps) {
+  return null;
+}

plane-src/apps/web/ce/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 { LockKeyhole, LockKeyholeOpen } from "lucide-react";
+// plane imports
+import { Tooltip } from "@plane/propel/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 tooltipContent="Lock" position="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"
+          >
+            <LockKeyhole 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"
+        >
+          <LockKeyhole 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"
+        >
+          <LockKeyholeOpen 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>
+      )}
+    </>
+  );
+});

plane-src/apps/web/ce/components/pages/header/move-control.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageMoveControlProps = {
+  page: TPageInstance;
+};
+
+export function PageMoveControl({}: TPageMoveControlProps) {
+  return null;
+}

plane-src/apps/web/ce/components/pages/header/share-control.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EPageStoreType } from "@/plane-web/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageShareControlProps = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export function PageShareControl({}: TPageShareControlProps) {
+  return null;
+}

plane-src/apps/web/ce/components/pages/index.ts

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

plane-src/apps/web/ce/components/pages/modals/index.ts

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

plane-src/apps/web/ce/components/pages/modals/modals.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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";
+// components
+import type { EPageStoreType } from "@/plane-web/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageModalsProps = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export const PageModals = observer(function PageModals(_props: TPageModalsProps) {
+  return null;
+});

plane-src/apps/web/ce/components/pages/modals/move-page-modal.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// store types
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TMovePageModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  page: TPageInstance;
+};
+
+export function MovePageModal(_props: TMovePageModalProps) {
+  return null;
+}

plane-src/apps/web/ce/components/pages/navigation-pane/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPageNavigationPaneTab = "outline" | "info" | "assets";
+
+export const PAGE_NAVIGATION_PANE_TABS_LIST: Record<
+  TPageNavigationPaneTab,
+  {
+    key: TPageNavigationPaneTab;
+    i18n_label: string;
+  }
+> = {
+  outline: {
+    key: "outline",
+    i18n_label: "page_navigation_pane.tabs.outline.label",
+  },
+  info: {
+    key: "info",
+    i18n_label: "page_navigation_pane.tabs.info.label",
+  },
+  assets: {
+    key: "assets",
+    i18n_label: "page_navigation_pane.tabs.assets.label",
+  },
+};
+
+export const ORDERED_PAGE_NAVIGATION_TABS_LIST: {
+  key: TPageNavigationPaneTab;
+  i18n_label: string;
+}[] = [
+  PAGE_NAVIGATION_PANE_TABS_LIST.outline,
+  PAGE_NAVIGATION_PANE_TABS_LIST.info,
+  PAGE_NAVIGATION_PANE_TABS_LIST.assets,
+];

plane-src/apps/web/ce/components/pages/navigation-pane/tab-panels/assets.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TEditorAsset } from "@plane/editor";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TAdditionalPageNavigationPaneAssetItemProps = {
+  asset: TEditorAsset;
+  assetSrc: string;
+  assetDownloadSrc: string;
+  page: TPageInstance;
+};
+
+export function AdditionalPageNavigationPaneAssetItem(_props: TAdditionalPageNavigationPaneAssetItemProps) {
+  return null;
+}

plane-src/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// assets
+import darkAssetsAsset from "@/app/assets/empty-state/wiki/navigation-pane/assets-dark.webp?url";
+import lightAssetsAsset from "@/app/assets/empty-state/wiki/navigation-pane/assets-light.webp?url";
+
+export function PageNavigationPaneAssetsTabEmptyState() {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // asset resolved path
+  const resolvedPath = resolvedTheme === "light" ? lightAssetsAsset : darkAssetsAsset;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="grid size-full place-items-center">
+      <div className="flex flex-col items-center gap-y-6 text-center">
+        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the assets of a page" />
+        <div className="space-y-2.5">
+          <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
+          <p className="text-13 font-medium text-secondary">
+            {t("page_navigation_pane.tabs.assets.empty_state.description")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

plane-src/apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// assets
+import darkOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp?url";
+import lightOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-light.webp?url";
+
+export function PageNavigationPaneOutlineTabEmptyState() {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // asset resolved path
+  const resolvedPath = resolvedTheme === "light" ? lightOutlineAsset : darkOutlineAsset;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="grid size-full place-items-center">
+      <div className="flex flex-col items-center gap-y-6 text-center">
+        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the outline of a page" />
+        <div className="space-y-2.5">
+          <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
+          <p className="text-13 font-medium text-secondary">
+            {t("page_navigation_pane.tabs.outline.empty_state.description")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

plane-src/apps/web/ce/components/pages/navigation-pane/tab-panels/root.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import type { TPageNavigationPaneTab } from "..";
+
+export type TPageNavigationPaneAdditionalTabPanelsRootProps = {
+  activeTab: TPageNavigationPaneTab;
+  page: TPageInstance;
+};
+
+export function PageNavigationPaneAdditionalTabPanelsRoot(_props: TPageNavigationPaneAdditionalTabPanelsRootProps) {
+  return null;
+}