Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

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

@@ -0,0 +1,113 @@
+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 const AskPiMenu: React.FC<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="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+          <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="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
+                onClick={() => handleInsertText(false)}
+              >
+                Replace selection
+              </button>
+              <Tooltip tooltipContent="Add to next line">
+                <button
+                  type="button"
+                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                  onClick={() => handleInsertText(true)}
+                >
+                  <CornerDownRight className="text-custom-text-300 size-4" />
+                </button>
+              </Tooltip>
+              <Tooltip tooltipContent="Re-generate response">
+                <button
+                  type="button"
+                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRegenerate();
+                  }}
+                  disabled={isRegenerating}
+                >
+                  <RefreshCcw
+                    className={cn("text-custom-text-300 size-4", {
+                      "animate-spin": isRegenerating,
+                    })}
+                  />
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-custom-text-200">Pi is answering...</p>
+        )}
+      </div>
+      <div className="py-3 px-4">
+        <div className="flex items-center gap-2 border border-custom-border-200 rounded-md p-2">
+          <span className="flex-shrink-0 size-3 grid place-items-center">
+            <Sparkles className="size-3 text-custom-text-200" />
+          </span>
+          <input
+            type="text"
+            className="w-full bg-transparent border-none outline-none placeholder:text-custom-text-400 text-sm"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Tell Pi what to do..."
+          />
+          <span className="flex-shrink-0 size-4 grid place-items-center">
+            <CircleArrowUp className="size-4 text-custom-text-200" />
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};

apps/web/ce/components/pages/editor/ai/index.ts

@@ -0,0 +1,2 @@
+export * from "./ask-pi-menu";
+export * from "./menu";

apps/web/ce/components/pages/editor/ai/menu.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+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 "@/plane-web/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 const EditorAIMenu: React.FC<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(
+        "w-[210px] flex flex-col rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg transition-all",
+        {
+          "w-[700px]": activeTask,
+        }
+      )}
+    >
+      <div
+        className={cn("flex max-h-72 w-full", {
+          "divide-x divide-custom-border-200": activeTask,
+        })}
+      >
+        <div className="flex-shrink-0 w-[210px] 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(
+                  "w-full flex items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80 transition-colors",
+                  {
+                    "bg-custom-background-80": isActiveTask,
+                  }
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClick(item.key);
+                }}
+              >
+                <span className="flex-shrink-0 flex items-center gap-2 truncate">
+                  <item.icon className="flex-shrink-0 size-3" />
+                  {item.label}
+                </span>
+                <ChevronRightIcon
+                  className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
+                    "opacity-100 pointer-events-auto": isActiveTask,
+                  })}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <div
+          ref={responseContainerRef}
+          className={cn("flex-shrink-0 w-0 overflow-hidden transition-all", {
+            "w-[490px] overflow-auto vertical-scrollbar scrollbar-sm": 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="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+                  <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="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
+                        onClick={() => handleInsertText(false)}
+                      >
+                        Replace selection
+                      </button>
+                      <Tooltip tooltipContent="Add to next line">
+                        <button
+                          type="button"
+                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                          onClick={() => handleInsertText(true)}
+                        >
+                          <CornerDownRight className="text-custom-text-300 size-4" />
+                        </button>
+                      </Tooltip>
+                      <Tooltip tooltipContent="Re-generate response">
+                        <button
+                          type="button"
+                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleRegenerate();
+                          }}
+                          disabled={isRegenerating}
+                        >
+                          <RefreshCcw
+                            className={cn("text-custom-text-300 size-4", {
+                              "animate-spin": isRegenerating,
+                            })}
+                          />
+                        </button>
+                      </Tooltip>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-sm text-custom-text-200">
+                    {activeTask ? LOADING_TEXTS[activeTask] : "Pi is writing"}...
+                  </p>
+                )}
+              </div>
+              <div className="sticky bottom-0 w-full bg-custom-background-100 pl-[54.8px] py-2 flex items-center gap-2">
+                {TONES_LIST.map((tone) => (
+                  <button
+                    key={tone.key}
+                    type="button"
+                    className={cn(
+                      "p-1 text-xs text-custom-text-200 font-medium bg-custom-background-80 rounded transition-colors outline-none",
+                      {
+                        "bg-custom-primary-100/20 text-custom-primary-100": tone.key === "default",
+                      }
+                    )}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleToneChange(tone.key);
+                    }}
+                  >
+                    {tone.label}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {activeTask && (
+        <div className="bg-custom-background-90 rounded-b-md py-2 px-4 text-custom-text-300 flex items-center gap-2 border-t border-custom-border-200">
+          <span className="flex-shrink-0 size-4 grid place-items-center">
+            <TriangleAlert className="size-3" />
+          </span>
+          <p className="flex-shrink-0 text-xs font-medium">
+            By using this feature, you consent to sharing the message with a 3rd party service.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

apps/web/ce/components/pages/editor/embed/index.ts

@@ -0,0 +1 @@
+export * from "./issue-embed-upgrade-card";

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

@@ -0,0 +1,31 @@
+// plane imports
+import { getButtonStyling } from "@plane/propel/button";
+import { cn } from "@plane/utils";
+// components
+import { ProIcon } from "@/components/common/pro-icon";
+
+export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
+  <div
+    className={cn(
+      "w-full bg-custom-background-80 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
+      {
+        "border-2": props.selected,
+      }
+    )}
+  >
+    <div className="flex items-center gap-4">
+      <ProIcon className="flex-shrink-0 size-4" />
+      <p className="text-custom-text !text-base">
+        Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
+      </p>
+    </div>
+    <a
+      href="https://plane.so/pro"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(getButtonStyling("primary", "md"), "no-underline")}
+    >
+      Upgrade
+    </a>
+  </div>
+);

apps/web/ce/components/pages/editor/index.ts

@@ -0,0 +1,2 @@
+export * from "./ai";
+export * from "./embed";

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

@@ -0,0 +1,10 @@
+// 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 const PageDetailsHeaderExtraActions: React.FC<TPageHeaderExtraActionsProps> = () => null;

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

@@ -0,0 +1,10 @@
+"use client";
+
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageCollaboratorsListProps = {
+  page: TPageInstance;
+};
+
+export const PageCollaboratorsList = ({}: TPageCollaboratorsListProps) => null;

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

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
+// plane imports
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+import { Tooltip } from "@plane/propel/tooltip";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
+// 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(({ 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}
+            data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
+            className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
+            aria-label="Lock"
+          >
+            <LockKeyhole className="size-3.5" />
+          </button>
+        </Tooltip>
+      )}
+
+      {displayState === "locked" && (
+        <button
+          type="button"
+          onClick={toggleLock}
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
+          className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
+          aria-label="Locked"
+        >
+          <LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
+          <span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
+            Locked
+          </span>
+        </button>
+      )}
+
+      {displayState === "unlocked" && (
+        <div
+          className="h-6 flex items-center gap-1 px-2 rounded text-custom-text-200 animate-fade-out"
+          aria-label="Unlocked"
+        >
+          <LockKeyholeOpen className="flex-shrink-0 size-3.5 animate-unlock-icon" />
+          <span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-out">
+            Unlocked
+          </span>
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,10 @@
+"use client";
+
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageMoveControlProps = {
+  page: TPageInstance;
+};
+
+export const PageMoveControl = ({}: TPageMoveControlProps) => null;

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

@@ -0,0 +1,12 @@
+"use client";
+
+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 const PageShareControl = ({}: TPageShareControlProps) => null;

apps/web/ce/components/pages/index.ts

@@ -0,0 +1,3 @@
+export * from "./editor";
+export * from "./modals";
+export * from "./extra-actions";

apps/web/ce/components/pages/modals/index.ts

@@ -0,0 +1,2 @@
+export * from "./move-page-modal";
+export * from "./modals";

apps/web/ce/components/pages/modals/modals.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type React from "react";
+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: React.FC<TPageModalsProps> = observer((props) => null);

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

@@ -0,0 +1,10 @@
+// store types
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TMovePageModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  page: TPageInstance;
+};
+
+export const MovePageModal: React.FC<TMovePageModalProps> = () => null;

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

@@ -0,0 +1,31 @@
+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,
+];

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

@@ -0,0 +1,13 @@
+// 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 const AdditionalPageNavigationPaneAssetItem: React.FC<TAdditionalPageNavigationPaneAssetItemProps> = () => null;

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

@@ -0,0 +1,30 @@
+import Image from "next/image";
+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 const PageNavigationPaneAssetsTabEmptyState = () => {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // asset resolved path
+  const resolvedPath = resolvedTheme === "light" ? lightAssetsAsset : darkAssetsAsset;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="size-full grid place-items-center">
+      <div className="flex flex-col items-center gap-y-6 text-center">
+        <Image src={resolvedPath} width={160} height={160} alt="An image depicting the assets of a page" />
+        <div className="space-y-2.5">
+          <h4 className="text-base font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
+          <p className="text-sm text-custom-text-200 font-medium">
+            {t("page_navigation_pane.tabs.assets.empty_state.description")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+import Image from "next/image";
+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 const PageNavigationPaneOutlineTabEmptyState = () => {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // asset resolved path
+  const resolvedPath = resolvedTheme === "light" ? lightOutlineAsset : darkOutlineAsset;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="size-full grid place-items-center">
+      <div className="flex flex-col items-center gap-y-6 text-center">
+        <Image src={resolvedPath} width={160} height={160} alt="An image depicting the outline of a page" />
+        <div className="space-y-2.5">
+          <h4 className="text-base font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
+          <p className="text-sm text-custom-text-200 font-medium">
+            {t("page_navigation_pane.tabs.outline.empty_state.description")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,13 @@
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import type { TPageNavigationPaneTab } from "..";
+
+export type TPageNavigationPaneAdditionalTabPanelsRootProps = {
+  activeTab: TPageNavigationPaneTab;
+  page: TPageInstance;
+};
+
+export const PageNavigationPaneAdditionalTabPanelsRoot: React.FC<
+  TPageNavigationPaneAdditionalTabPanelsRootProps
+> = () => null;