[WIKI-400] feat: page navigation pane (#7206)

* init: page navigation pane

* chore: outline and info tabs

* chore: asset download endpoint

* chore: realtime document info updates

* chore: add support for code splitting

* fix: formatting

* refactor: image block id generation

* chore: implement translation

* refactor: assets list storage logic

* fix: build errors

* fix: image extension name

* refactor: add support for additional asset items

* refactor: asset extraction logic

* chore: add translations

* fix: merge conflicts resolved from preview

* chore: remove version history option from the dropdown

* chore: query params handling

* chore: remove unnecessary logic

* refactor: empty state components

* fix: empty state asset path

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,
+];

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

@@ -0,0 +1,11 @@
+// plane imports
+import { TEditorAsset } from "@plane/editor";
+// store
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TAdditionalPageNavigationPaneAssetItemProps = {
+  asset: TEditorAsset;
+  page: TPageInstance;
+};
+
+export const AdditionalPageNavigationPaneAssetItem: React.FC<TAdditionalPageNavigationPaneAssetItemProps> = () => null;

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

@@ -0,0 +1,26 @@
+import Image from "next/image";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// hooks
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+export const PageNavigationPaneAssetsTabEmptyState = () => {
+  // asset resolved path
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/pages/navigation-pane/assets" });
+  // 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>
+  );
+};

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

@@ -0,0 +1,26 @@
+import Image from "next/image";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// hooks
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+export const PageNavigationPaneOutlineTabEmptyState = () => {
+  // asset resolved path
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/pages/navigation-pane/outline" });
+  // 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>
+  );
+};

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 { TPageNavigationPaneTab } from "..";
+
+export type TPageNavigationPaneAdditionalTabPanelsRootProps = {
+  activeTab: TPageNavigationPaneTab;
+  page: TPageInstance;
+};
+
+export const PageNavigationPaneAdditionalTabPanelsRoot: React.FC<
+  TPageNavigationPaneAdditionalTabPanelsRootProps
+> = () => null;