[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
This commit is contained in:
Aaryan Khandelwal 2025-07-02 15:25:52 +05:30 committed by GitHub
parent cfe169c6d7
commit 0b159c4963
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
83 changed files with 2185 additions and 767 deletions

View file

@ -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>
);
};

View file

@ -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>
);
};