+
+
+
+
+
+ );
+
+ if (!page) return null;
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {isParentPagesLoading ? (
+
+
+ ) : (
+ <>
+ {!isRootPage && rootParentDetails?.id && (
+
+
+
+
+
+ )}
+
+ {middleParents.length > 0 && (
+
+
+ {middleParents.map(
+ (parent, index) =>
+ parent.id && (
+
+
+ )}
+
+ )}
+
+
+ router.push(`/${workspaceSlug}/pages/${parent.id}`)}
+ >
+
+
+ )
+ )}
+
+
+
+
+ );
+
+ if (!isNestedPagesEnabled(workspaceSlug?.toString()) && page?.parent_id)
+ return (
+
+
+ );
+
+ if (pageDetailsError || !canCurrentUserAccessPage)
+ return (
+ Please upgrade your plan to view this nested page
++ Please upgrade your plan to view this nested page +
+ + View other Pages + +
+
+ );
+
+ if (!page) return null;
+
+ return (
+ <>
+ Page not found
++ The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it. +
+ + View other Pages + +
+
+
+ );
+});
+
+export default PageDetailsPage;
diff --git a/dev-wiki/app/(all)/[workspaceSlug]/(pages)/pages/header.tsx b/dev-wiki/app/(all)/[workspaceSlug]/(pages)/pages/header.tsx
new file mode 100644
index 0000000000..63873a7c1d
--- /dev/null
+++ b/dev-wiki/app/(all)/[workspaceSlug]/(pages)/pages/header.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Home } from "lucide-react";
+// images
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
+// plane imports
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+
+export const PagesAppDashboardHeader = () => {
+ // hooks
+ const { resolvedTheme } = useTheme();
+
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+ {/* */}
+ {/* */}
+
+
+ {currentUser &&
+
+ );
+}
diff --git a/dev-wiki/app/(all)/[workspaceSlug]/(pages)/pages/sidebar.tsx b/dev-wiki/app/(all)/[workspaceSlug]/(pages)/pages/sidebar.tsx
new file mode 100644
index 0000000000..5331da283b
--- /dev/null
+++ b/dev-wiki/app/(all)/[workspaceSlug]/(pages)/pages/sidebar.tsx
@@ -0,0 +1,112 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import useSWR from "swr";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// components
+import { SidebarDropdown } from "@/components/workspace";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useAppTheme } from "@/hooks/store";
+// plane web components
+import { PagesAppSidebarList, PagesAppSidebarMenu, PagesAppSidebarQuickActions } from "@/plane-web/components/pages";
+// import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
+// plane web hooks
+import { usePageStore, EPageStoreType } from "@/plane-web/hooks/store/use-page-store";
+
+export const PagesAppSidebar = observer(() => {
+ // params
+ const { workspaceSlug, pageId } = useParams();
+ const pathname = usePathname();
+ // state
+ const [expandedPageIds, setExpandedPageIds] = useState
+
+ )}
+
+ {/*
+ {/* */}
+ {/*
*/}
+
+
+ );
+});
diff --git a/dev-wiki/app/(all)/[workspaceSlug]/layout.tsx b/dev-wiki/app/(all)/[workspaceSlug]/layout.tsx
new file mode 100644
index 0000000000..5640b62134
--- /dev/null
+++ b/dev-wiki/app/(all)/[workspaceSlug]/layout.tsx
@@ -0,0 +1,3 @@
+export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
+ return <>{children};
+}
diff --git a/dev-wiki/app/(all)/layout.preload.tsx b/dev-wiki/app/(all)/layout.preload.tsx
new file mode 100644
index 0000000000..18ca3b4b38
--- /dev/null
+++ b/dev-wiki/app/(all)/layout.preload.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+import ReactDOM from "react-dom";
+
+// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
+export const usePreloadResources = () => {
+ useEffect(() => {
+ const preloadItem = (url: string) => {
+ ReactDOM.preload(url, { as: "fetch", crossOrigin: "use-credentials" });
+ };
+
+ const urls = [
+ `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/instances/`,
+ `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/users/me/`,
+ `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/users/me/profile/`,
+ `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/users/me/settings/`,
+ `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/users/me/workspaces/?v=${Date.now()}`,
+ ];
+
+ urls.forEach(url => preloadItem(url));
+ }, []);
+};
+
+export const PreloadResources = () => {
+ usePreloadResources();
+ return null;
+};
diff --git a/dev-wiki/app/(all)/layout.tsx b/dev-wiki/app/(all)/layout.tsx
new file mode 100644
index 0000000000..32589c4bf0
--- /dev/null
+++ b/dev-wiki/app/(all)/layout.tsx
@@ -0,0 +1,31 @@
+import { Metadata, Viewport } from "next";
+
+import { PreloadResources } from "./layout.preload";
+
+// styles
+import "@/styles/command-pallette.css";
+import "@/styles/emoji.css";
+import "@/styles/react-day-picker.css";
+
+export const metadata: Metadata = {
+ robots: {
+ index: false,
+ follow: false,
+ },
+};
+
+export const viewport: Viewport = {
+ minimumScale: 1,
+ initialScale: 1,
+ width: "device-width",
+ viewportFit: "cover",
+};
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ Yikes! That doesn{"'"}t look good.
++ That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more + details, please write to{" "} + + support@plane.so + {" "} + or on our{" "} + + Discord + + . +
+
+
+ Go to home
+
+
+
+
+ {children}
+
+
+
+);
+
+export default PageNotFound;
diff --git a/dev-wiki/app/provider.tsx b/dev-wiki/app/provider.tsx
new file mode 100644
index 0000000000..bad790d78e
--- /dev/null
+++ b/dev-wiki/app/provider.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import dynamic from "next/dynamic";
+import { useTheme, ThemeProvider } from "next-themes";
+import { SWRConfig } from "swr";
+// Plane Imports
+import { WEB_SWR_CONFIG } from "@plane/constants";
+import { TranslationProvider } from "@plane/i18n";
+import { Toast } from "@plane/ui";
+//helpers
+import { resolveGeneralTheme } from "@/helpers/theme.helper";
+// nprogress
+import { AppProgressBar } from "@/lib/n-progress";
+// polyfills
+import "@/lib/polyfills";
+// mobx store provider
+import { StoreProvider } from "@/lib/store-context";
+// wrappers
+import { InstanceWrapper } from "@/lib/wrappers";
+// dynamic imports
+const StoreWrapper = dynamic(() => import("@/lib/wrappers/store-wrapper"), { ssr: false });
+
+export interface IAppProvider {
+ children: ReactNode;
+}
+
+const ToastWithTheme = () => {
+ const { resolvedTheme } = useTheme();
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+ Oops! Something went wrong.
++ Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is + temporarily unavailable. +
+
+
+
+
+ Oops! You are not authorized to view this page
+ {actionButton} +
+
+
+
+
+
+ Not Authorized!
++ You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check + your pending invitations. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {accessSpecifiers.map((access, index) => {
+ const label = access.i18n_label ? t(access.i18n_label) : access.label;
+ return (
+
+
+
+ );
+ })}
+
+ );
+};
diff --git a/dev-wiki/core/components/common/activity/activity-block.tsx b/dev-wiki/core/components/common/activity/activity-block.tsx
new file mode 100644
index 0000000000..61c1a0b7b4
--- /dev/null
+++ b/dev-wiki/core/components/common/activity/activity-block.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { Network } from "lucide-react";
+// types
+import { TWorkspaceBaseActivity } from "@plane/types";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "@/helpers/date-time.helper";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local components
+import { User } from "./user";
+
+type TActivityBlockComponent = {
+ icon?: ReactNode;
+ activity: TWorkspaceBaseActivity;
+ ends: "top" | "bottom" | undefined;
+ children: ReactNode;
+ customUserName?: string;
+};
+
+export const ActivityBlockComponent: FC
+
+ );
+};
diff --git a/dev-wiki/core/components/common/activity/activity-item.tsx b/dev-wiki/core/components/common/activity/activity-item.tsx
new file mode 100644
index 0000000000..643d897383
--- /dev/null
+++ b/dev-wiki/core/components/common/activity/activity-item.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+
+import { TProjectActivity } from "@/plane-web/types";
+import { ActivityBlockComponent } from "./activity-block";
+import { iconsMap, messages } from "./helper";
+
+type TActivityItem = {
+ activity: TProjectActivity;
+ showProject?: boolean;
+ ends?: "top" | "bottom" | undefined;
+};
+
+export const ActivityItem: FC
+ {icon ? icon :
+
+
+
+
+
+
+
+ {calculateTimeAgo(activity.created_at)}
+
+
+
+
+ {getDateLabel(date)}
+ {editable && (
+
+ )}
+
+ ))}
+
+ );
+});
diff --git a/dev-wiki/core/components/common/applied-filters/index.ts b/dev-wiki/core/components/common/applied-filters/index.ts
new file mode 100644
index 0000000000..77f9f6304c
--- /dev/null
+++ b/dev-wiki/core/components/common/applied-filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./date";
+export * from "./members";
diff --git a/dev-wiki/core/components/common/applied-filters/members.tsx b/dev-wiki/core/components/common/applied-filters/members.tsx
new file mode 100644
index 0000000000..87d3393666
--- /dev/null
+++ b/dev-wiki/core/components/common/applied-filters/members.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { X } from "lucide-react";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { getFileURL } from "@/helpers/file.helper";
+// types
+import { useMember } from "@/hooks/store";
+
+type Props = {
+ handleRemove: (val: string) => void;
+ values: string[];
+ editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters: React.FC
+
+ );
+ })}
+
+ );
+});
diff --git a/dev-wiki/core/components/common/breadcrumb-link.tsx b/dev-wiki/core/components/common/breadcrumb-link.tsx
new file mode 100644
index 0000000000..bf421a50c2
--- /dev/null
+++ b/dev-wiki/core/components/common/breadcrumb-link.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { ReactNode } from "react";
+import Link from "next/link";
+import { Tooltip } from "@plane/ui";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+ label?: string | ReactNode;
+ href?: string;
+ icon?: React.ReactNode | undefined;
+ disableTooltip?: boolean;
+};
+
+export const BreadcrumbLink: React.FC
+ {href ? (
+
+ {icon && (
+
+ {icon}
+ )}
+ {label && (
+ {label}
+ )}
+
+ ) : (
+
+ {icon &&
+ )}
+ {icon}
}
+ {label}
+
+ {count}
+
+ );
+};
diff --git a/dev-wiki/core/components/common/custom-error.tsx b/dev-wiki/core/components/common/custom-error.tsx
new file mode 100644
index 0000000000..1b82b08afb
--- /dev/null
+++ b/dev-wiki/core/components/common/custom-error.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Button } from "@plane/ui";
+
+export const CustomError = () => {
+ const handleRefresh = () => {
+ window.location.reload();
+ };
+
+ return (
+
+
+ );
+};
diff --git a/dev-wiki/core/components/common/empty-state.tsx b/dev-wiki/core/components/common/empty-state.tsx
new file mode 100644
index 0000000000..5fdd210d91
--- /dev/null
+++ b/dev-wiki/core/components/common/empty-state.tsx
@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+
+import Image from "next/image";
+
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+ title: string;
+ description?: React.ReactNode;
+ image: any;
+ primaryButton?: {
+ icon?: any;
+ text: string;
+ onClick: () => void;
+ };
+ secondaryButton?: React.ReactNode;
+ disabled?: boolean;
+};
+
+export const EmptyState: React.FC
+
+
+
+
+
+ Yikes! That doesn{"'"}t look good.
++ That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more + details, please write to{" "} + + support@plane.so + {" "} + or on our{" "} + + Discord + + . +
+
+
+
+
+
+);
diff --git a/dev-wiki/core/components/common/filters/created-at.tsx b/dev-wiki/core/components/common/filters/created-at.tsx
new file mode 100644
index 0000000000..8a43a4985d
--- /dev/null
+++ b/dev-wiki/core/components/common/filters/created-at.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
+import { DateFilterModal } from "@/components/core";
+// import { FilterHeader, FilterOption } from "@/components/issues";
+// helpers
+import { isInDateFormat } from "@/helpers/date-time.helper";
+
+type Props = {
+ appliedFilters: string[] | null;
+ handleUpdate: (val: string | string[]) => void;
+ searchQuery: string;
+};
+
+export const FilterCreatedDate: React.FC
+
+ {title}
+ {description &&{description}
} +
+ {primaryButton && (
+
+ )}
+ {secondaryButton}
+
+ */}
+ {/* {filteredOptions.length > 0 ? ( */}
+ {/* <> */}
+ {/* {filteredOptions.map((option) => ( */}
+ {/* handleUpdate(option.value)} */}
+ {/* title={option.name} */}
+ {/* multiple */}
+ {/* /> */}
+ {/* ))} */}
+ {/*
*/}
+ {/* )} */}
+
+ );
+});
diff --git a/dev-wiki/core/components/common/filters/created-by.tsx b/dev-wiki/core/components/common/filters/created-by.tsx
new file mode 100644
index 0000000000..c1476d28ab
--- /dev/null
+++ b/dev-wiki/core/components/common/filters/created-by.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// components
+// import { FilterHeader, FilterOption } from "@/components/issues";
+// helpers
+import { getFileURL } from "@/helpers/file.helper";
+// hooks
+import { useMember, useUser } from "@/hooks/store";
+
+type Props = {
+ appliedFilters: string[] | null;
+ handleUpdate: (val: string) => void;
+ memberIds: string[] | undefined;
+ searchQuery: string;
+};
+
+export const FilterCreatedBy: React.FCNo matches found
*/} + {/* )} */} + {/* */}
+ {/* {sortedOptions ? ( */}
+ {/* sortedOptions.length > 0 ? ( */}
+ {/* <> */}
+ {/* {sortedOptions.slice(0, itemsToRender).map((memberId) => { */}
+ {/* const member = getUserDetails(memberId); */}
+ {/**/}
+ {/* if (!member) return null; */}
+ {/* return ( */}
+ {/* handleUpdate(member.id)} */}
+ {/* icon={ */}
+ {/* */}
+ {/* */}
+ {/* )} */}
+ {/*
*/}
+ {/* )} */}
+
+ );
+});
diff --git a/dev-wiki/core/components/common/filters/index.ts b/dev-wiki/core/components/common/filters/index.ts
new file mode 100644
index 0000000000..6f0b5dbdef
--- /dev/null
+++ b/dev-wiki/core/components/common/filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./created-at";
+export * from "./created-by";
diff --git a/dev-wiki/core/components/common/index.ts b/dev-wiki/core/components/common/index.ts
new file mode 100644
index 0000000000..5a9aa4c34b
--- /dev/null
+++ b/dev-wiki/core/components/common/index.ts
@@ -0,0 +1,11 @@
+export * from "./empty-state";
+export * from "./latest-feature-block";
+export * from "./breadcrumb-link";
+export * from "./logo-spinner";
+export * from "./logo";
+export * from "./pro-icon";
+export * from "./custom-error";
+export * from "./count-chip";
+export * from "./activity";
+export * from "./switcher-label";
+export * from "./page-access-icon";
diff --git a/dev-wiki/core/components/common/latest-feature-block.tsx b/dev-wiki/core/components/common/latest-feature-block.tsx
new file mode 100644
index 0000000000..35aacddcfe
--- /dev/null
+++ b/dev-wiki/core/components/common/latest-feature-block.tsx
@@ -0,0 +1,40 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+// icons
+import { Lightbulb } from "lucide-react";
+// images
+import latestFeatures from "@/public/onboarding/onboarding-pages.webp";
+
+export const LatestFeatureBlock = () => {
+ const { resolvedTheme } = useTheme();
+
+ return (
+ <>
+ No matches found
*/} + {/* ) */} + {/* ) : ( */} + {/*
+
+ + Pages gets a facelift! Write anything and use Galileo to help you start.{" "} + + Learn more + +
+
+
+
+ );
+};
diff --git a/dev-wiki/core/components/common/logo-spinner.tsx b/dev-wiki/core/components/common/logo-spinner.tsx
new file mode 100644
index 0000000000..abcebfe76c
--- /dev/null
+++ b/dev-wiki/core/components/common/logo-spinner.tsx
@@ -0,0 +1,17 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
+import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+
+export const LogoSpinner = () => {
+ const { resolvedTheme } = useTheme();
+
+ const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/dev-wiki/core/components/common/logo.tsx b/dev-wiki/core/components/common/logo.tsx
new file mode 100644
index 0000000000..49d4d60a12
--- /dev/null
+++ b/dev-wiki/core/components/common/logo.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { FC } from "react";
+import { Emoji } from "emoji-picker-react";
+// Due to some weird issue with the import order, the import of useFontFaceObserver
+// should be after the imported here rather than some below helper functions as it is in the original file
+// eslint-disable-next-line import/order
+import useFontFaceObserver from "use-font-face-observer";
+// types
+import { TLogoProps } from "@plane/types";
+// ui
+import { LUCIDE_ICONS_LIST } from "@plane/ui";
+// helpers
+import { emojiCodeToUnicode } from "@/helpers/emoji.helper";
+
+type Props = {
+ logo: TLogoProps;
+ size?: number;
+ type?: "lucide" | "material";
+};
+
+export const Logo: FC
+
+ );
+};
diff --git a/dev-wiki/core/components/common/page-access-icon.tsx b/dev-wiki/core/components/common/page-access-icon.tsx
new file mode 100644
index 0000000000..9f547a1163
--- /dev/null
+++ b/dev-wiki/core/components/common/page-access-icon.tsx
@@ -0,0 +1,15 @@
+import { ArchiveIcon, Earth, Lock } from "lucide-react";
+import { EPageAccess } from "@plane/constants";
+import { TPage } from "@plane/types";
+
+export const PageAccessIcon = (page: TPage) => (
+
+
+
+
+ {title}
+ {description &&{description}
} +
+
+
+
+ {primaryButton && (
+
+ )}
+ {comicBox &&
+ isHovered &&
+ (comicBox.direction === "right" ? (
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ {comicBox?.title}
+ {comicBox?.description}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {comicBox?.title}
+ {comicBox?.description}
+
+
+ {page.archived_at ? (
+
+);
diff --git a/dev-wiki/core/components/common/pro-icon.tsx b/dev-wiki/core/components/common/pro-icon.tsx
new file mode 100644
index 0000000000..39d4c2a901
--- /dev/null
+++ b/dev-wiki/core/components/common/pro-icon.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { FC } from "react";
+import { Crown } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type TProIcon = {
+ className?: string;
+};
+
+export const ProIcon: FC
+ {logo_props?.in_use ? (
+ })
+ ) : (
+
+ );
+};
diff --git a/dev-wiki/core/components/core/app-header.tsx b/dev-wiki/core/components/core/app-header.tsx
new file mode 100644
index 0000000000..8320bd9f71
--- /dev/null
+++ b/dev-wiki/core/components/core/app-header.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { Row } from "@plane/ui";
+import { SidebarHamburgerToggle } from "@/components/core";
+// plane web components
+
+export interface AppHeaderProps {
+ header: ReactNode;
+ mobileHeader?: ReactNode;
+}
+
+export const AppHeader = (props: AppHeaderProps) => {
+ const { header, mobileHeader } = props;
+
+ return (
+
+
+
+ {mobileHeader && mobileHeader}
+
+ );
+};
diff --git a/dev-wiki/core/components/core/content-overflow-HOC.tsx b/dev-wiki/core/components/core/content-overflow-HOC.tsx
new file mode 100644
index 0000000000..f8089c34bc
--- /dev/null
+++ b/dev-wiki/core/components/core/content-overflow-HOC.tsx
@@ -0,0 +1,156 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+
+interface IContentOverflowWrapper {
+ children: ReactNode;
+ maxHeight?: number;
+ gradientColor?: string;
+ buttonClassName?: string;
+ containerClassName?: string;
+ fallback?: ReactNode;
+ customButton?: ReactNode;
+}
+
+export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper) => {
+ const {
+ children,
+ maxHeight = 625,
+ buttonClassName = "text-sm font-medium text-custom-primary-100",
+ containerClassName,
+ fallback = null,
+ customButton,
+ } = props;
+
+ // states
+ const [containerHeight, setContainerHeight] = useState(0);
+ const [showAll, setShowAll] = useState(false);
+ const [isTransitioning, setIsTransitioning] = useState(false);
+
+ // refs
+ const contentRef = useRef
+
+ {header}
+ maxHeight,
+ },
+ containerClassName
+ )}
+ style={{
+ height: showAll ? `${containerHeight}px` : `${Math.min(maxHeight, containerHeight)}px`,
+ }}
+ >
+
+ );
+});
diff --git a/dev-wiki/core/components/core/content-wrapper.tsx b/dev-wiki/core/components/core/content-wrapper.tsx
new file mode 100644
index 0000000000..eefc96b1e0
--- /dev/null
+++ b/dev-wiki/core/components/core/content-wrapper.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactNode } from "react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export interface ContentWrapperProps {
+ className?: string;
+ children: ReactNode;
+}
+
+export const ContentWrapper = ({ className, children }: ContentWrapperProps) => (
+
+ {children}
+
+
+ {containerHeight > maxHeight && (
+
+ {customButton || (
+
+ )}
+
+ )}
+
+
+);
diff --git a/dev-wiki/core/components/core/filters/date-filter-modal.tsx b/dev-wiki/core/components/core/filters/date-filter-modal.tsx
new file mode 100644
index 0000000000..a1c76da4b4
--- /dev/null
+++ b/dev-wiki/core/components/core/filters/date-filter-modal.tsx
@@ -0,0 +1,170 @@
+"use client";
+import { Fragment } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { X } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+
+import { Button, Calendar } from "@plane/ui";
+
+import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@/helpers/date-time.helper";
+import { DateFilterSelect } from "./date-filter-select";
+type Props = {
+ title: string;
+ handleClose: () => void;
+ isOpen: boolean;
+ onSelect: (val: string[]) => void;
+};
+
+type TFormValues = {
+ filterType: "before" | "after" | "range";
+ date1: Date;
+ date2: Date;
+};
+
+const defaultValues: TFormValues = {
+ filterType: "range",
+ date1: new Date(),
+ date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
+};
+
+export const DateFilterModal: React.FC{children}
+
+ {option.icon}
+ {title} {option.name}
+
+
+
+
+ {tabOptions.map((tab) => {
+ if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
+ if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") return null;
+
+ return (
+
+ `rounded px-4 py-1 text-center text-sm outline-none transition-colors ${
+ selected ? "bg-custom-primary text-white" : "text-custom-text-100"
+ }`
+ }
+ >
+ {tab.title}
+
+ );
+ })}
+
+
+ {(unsplashImages || !unsplashError) && (
+
+
+
+ )}
+
+ )}
+ {(!projectCoverImages || projectCoverImages.length !== 0) && (
+
+ {projectCoverImages ? (
+ projectCoverImages.length > 0 ? (
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+ (
+ {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ setSearchParams(formData.search);
+ }
+ }}
+ value={value}
+ onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+ ref={ref}
+ placeholder="Search for images"
+ className="w-full text-sm"
+ />
+ )}
+ />
+
+
+ {unsplashImages ? (
+ unsplashImages.length > 0 ? (
+
+ {unsplashImages.map((image) => (
+
+ ) : (
+ {
+ setIsOpen(false);
+ onChange(image.urls.regular);
+ }}
+ >
+ 
+
+ ))}
+ No images found.
+ ) + ) : ( +
+ {projectCoverImages.map((image, index) => (
+
+ ) : (
+ {
+ setIsOpen(false);
+ onChange(image);
+ }}
+ >
+ 
+
+ ))}
+ No images found.
+ ) + ) : ( +
+
+
+
+ {fileRejections.length > 0 && (
+
+
+ {image !== null || (value && value !== "") ? (
+ <>
+
+
+
+ {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+
+
+ )}
+
+
+ + {fileRejections[0].errors[0].code === "file-too-large" + ? "The image size cannot exceed 5 MB." + : "Please upload a file in a valid format."} +
+ )} + +File formats supported- .jpeg, .jpg, .png, .webp
+ +
+
+
+
+
+
+
+
+ );
+};
diff --git a/dev-wiki/core/components/core/list/list-root.tsx b/dev-wiki/core/components/core/list/list-root.tsx
new file mode 100644
index 0000000000..bd62efb2ef
--- /dev/null
+++ b/dev-wiki/core/components/core/list/list-root.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+import { Row, ERowVariant } from "@plane/ui";
+
+interface IListContainer {
+ children: React.ReactNode;
+}
+
+export const ListLayout: FC
+
+
+ {quickActionElement && quickActionElement}
+
+ {actionableItems && (
+
+ {prependTitleElement && {prependTitleElement}}
+
+ {title}
+
+
+ {appendTitleElement && (
+ {appendTitleElement}
+ )}
+
+ {actionableItems}
+
+ )}
+
+
+ );
+};
+
+export default ProgressChart;
diff --git a/dev-wiki/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/dev-wiki/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
new file mode 100644
index 0000000000..7dc3988129
--- /dev/null
+++ b/dev-wiki/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Menu } from "lucide-react";
+import { useAppTheme } from "@/hooks/store";
+
+export const SidebarHamburgerToggle = observer(() => {
+ // store hooks
+ const { toggleSidebar } = useAppTheme();
+
+ return (
+
+ );
+});
diff --git a/dev-wiki/core/components/core/sidebar/single-progress-stats.tsx b/dev-wiki/core/components/core/sidebar/single-progress-stats.tsx
new file mode 100644
index 0000000000..047d8bc04d
--- /dev/null
+++ b/dev-wiki/core/components/core/sidebar/single-progress-stats.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+type TSingleProgressStatsProps = {
+ title: any;
+ completed: number;
+ total: number;
+ onClick?: () => void;
+ selected?: boolean;
+};
+
+export const SingleProgressStats: React.FC
+
+);
diff --git a/dev-wiki/core/components/core/theme/color-picker-input.tsx b/dev-wiki/core/components/core/theme/color-picker-input.tsx
new file mode 100644
index 0000000000..dbaa13aacb
--- /dev/null
+++ b/dev-wiki/core/components/core/theme/color-picker-input.tsx
@@ -0,0 +1,129 @@
+"use client";
+import { FC, Fragment } from "react";
+// react-form
+import { ColorResult, SketchPicker } from "react-color";
+import {
+ Control,
+ Controller,
+ FieldError,
+ FieldErrorsImpl,
+ Merge,
+ UseFormRegister,
+ UseFormSetValue,
+ UseFormWatch,
+} from "react-hook-form";
+// react-color
+// component
+import { Palette } from "lucide-react";
+import { Popover, Transition } from "@headlessui/react";
+import { IUserTheme } from "@plane/types";
+import { Input } from "@plane/ui";
+// icons
+// types
+
+type Props = {
+ name: keyof IUserTheme;
+ position?: "left" | "right";
+ watch: UseFormWatch{title}
+
+
+
+
+ {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
+
+
+ of {total}
+
+ (
+
+ )}
+ />
+
+ );
+};
diff --git a/dev-wiki/core/components/core/theme/custom-theme-selector.tsx b/dev-wiki/core/components/core/theme/custom-theme-selector.tsx
new file mode 100644
index 0000000000..d66fbe82f8
--- /dev/null
+++ b/dev-wiki/core/components/core/theme/custom-theme-selector.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// types
+import { useTranslation } from "@plane/i18n";
+import { IUserTheme } from "@plane/types";
+// ui
+import { Button, InputColorPicker, setPromiseToast } from "@plane/ui";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+type TCustomThemeSelector = {
+ applyThemeChange: (theme: Partial
+
+ {({ open }) => (
+ <>
+
+ {watch(name) && watch(name) !== "" ? (
+
+ ) : (
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ {t(value.key)}
+
+ ) : (
+ t("select_your_theme")
+ )
+ }
+ onChange={onChange}
+ input
+ >
+ {THEME_OPTIONS.map((themeOption) => (
+
+
+
+
+
+
+ {t(themeOption.key)}
+
+ @deactivated user
+
+ );
+ }
+
+ return (
+
+
+ @{userDetails?.display_name}
+
+
+ );
+});
diff --git a/dev-wiki/core/components/editor/index.ts b/dev-wiki/core/components/editor/index.ts
new file mode 100644
index 0000000000..cf8352ae4a
--- /dev/null
+++ b/dev-wiki/core/components/editor/index.ts
@@ -0,0 +1 @@
+export * from "./embeds";
diff --git a/dev-wiki/core/components/editor/index.tsx b/dev-wiki/core/components/editor/index.tsx
new file mode 100644
index 0000000000..a891fa82b8
--- /dev/null
+++ b/dev-wiki/core/components/editor/index.tsx
@@ -0,0 +1,2 @@
+export const RichTextReadOnlyEditor = () => null;
+export const EditorMentionsRoot = () => null; export const ProductUpdatesHeader = () => null;
diff --git a/dev-wiki/core/components/empty-state/index.tsx b/dev-wiki/core/components/empty-state/index.tsx
new file mode 100644
index 0000000000..4ae97e839c
--- /dev/null
+++ b/dev-wiki/core/components/empty-state/index.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+// ui
+import { Button } from "@plane/ui/src/button";
+// utils
+import { cn } from "@plane/utils";
+
+type EmptyStateSize = "sm" | "md" | "lg";
+
+type ButtonConfig = {
+ text: string;
+ prependIcon?: React.ReactNode;
+ appendIcon?: React.ReactNode;
+ onClick?: () => void;
+ disabled?: boolean;
+};
+
+type Props = {
+ title: string;
+ description?: string;
+ assetPath?: string;
+ size?: EmptyStateSize;
+ primaryButton?: ButtonConfig;
+ secondaryButton?: ButtonConfig;
+ customPrimaryButton?: React.ReactNode;
+ customSecondaryButton?: React.ReactNode;
+ className?: string;
+};
+
+const sizeClasses = {
+ sm: "md:min-w-[24rem] max-w-[45rem]",
+ md: "md:min-w-[28rem] max-w-[50rem]",
+ lg: "md:min-w-[30rem] max-w-[60rem]",
+} as const;
+
+const CustomButton = ({
+ config,
+ variant,
+ size,
+}: {
+ config: ButtonConfig;
+ variant: "primary" | "neutral-primary";
+ size: EmptyStateSize;
+}) => (
+
+);
+
+export const DetailedEmptyState: React.FC
+
+
+
+
+
+
+
+ {userDetails?.first_name} {userDetails?.last_name}
+
+ {roleDetails &&
+ {ROLE[roleDetails as keyof typeof ROLE]}
} +
+
+ );
+});
diff --git a/dev-wiki/core/components/instance/index.ts b/dev-wiki/core/components/instance/index.ts
new file mode 100644
index 0000000000..43e76eba72
--- /dev/null
+++ b/dev-wiki/core/components/instance/index.ts
@@ -0,0 +1,2 @@
+export * from "./not-ready-view";
+export * from "./maintenance-view";
diff --git a/dev-wiki/core/components/instance/maintenance-view.tsx b/dev-wiki/core/components/instance/maintenance-view.tsx
new file mode 100644
index 0000000000..8dd4c34e78
--- /dev/null
+++ b/dev-wiki/core/components/instance/maintenance-view.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { FC } from "react";
+import Image from "next/image";
+// ui
+import { Button } from "@plane/ui";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+// components
+import { MaintenanceMessage } from "@/plane-web/components/instance";
+// images
+import maintenanceModeImage from "@/public/maintenance-mode.webp";
+
+export const MaintenanceView: FC = () => (
+
+
+
+
+
+ {assetPath && (
+ {title}
+ {description &&{description}
} +
+ {/* primary button */}
+ {customPrimaryButton ??
+ (primaryButton?.text &&
+ )}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/dev-wiki/core/components/issues/issue-layouts/properties/all-properties.tsx b/dev-wiki/core/components/issues/issue-layouts/properties/all-properties.tsx
new file mode 100644
index 0000000000..c6aeb549ea
--- /dev/null
+++ b/dev-wiki/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -0,0 +1 @@
+export const IssueProperties = () => null;
diff --git a/dev-wiki/core/components/issues/issue-layouts/utils.ts b/dev-wiki/core/components/issues/issue-layouts/utils.ts
new file mode 100644
index 0000000000..1dadc78345
--- /dev/null
+++ b/dev-wiki/core/components/issues/issue-layouts/utils.ts
@@ -0,0 +1,12 @@
+// Minimal utils for dev-wiki - only what's needed for sidebar functionality
+export const HIGHLIGHT_CLASS = "bg-yellow-50 border-yellow-200";
+
+export const highlightIssueOnDrop = (elementId: string, timeout: number = 3000) => {
+ const element = document.getElementById(elementId);
+ if (element) {
+ element.classList.add(HIGHLIGHT_CLASS);
+ setTimeout(() => {
+ element.classList.remove(HIGHLIGHT_CLASS);
+ }, timeout);
+ }
+};
diff --git a/dev-wiki/core/components/pages/dropdowns/actions.tsx b/dev-wiki/core/components/pages/dropdowns/actions.tsx
new file mode 100644
index 0000000000..ffe8208d0a
--- /dev/null
+++ b/dev-wiki/core/components/pages/dropdowns/actions.tsx
@@ -0,0 +1,194 @@
+"use client";
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Copy, ExternalLink, Globe2, Link, Lock, Trash2 } from "lucide-react";
+// constants
+import { EPageAccess } from "@plane/constants";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane ui
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
+// components
+import { DeletePageModal } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store/use-page-store";
+// Import the custom menu hook
+import { usePageActionsMenu } from "@/plane-web/hooks/use-page-actions-menu";
+// store types
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageActions =
+ | "full-screen"
+ | "sticky-toolbar"
+ | "copy-markdown"
+ | "toggle-lock"
+ | "toggle-access"
+ | "open-in-new-tab"
+ | "copy-link"
+ | "make-a-copy"
+ | "archive-restore"
+ | "delete"
+ | "version-history"
+ | "export"
+ | "move";
+
+type Props = {
+ editorRef?: EditorRefApi | null;
+ extraOptions?: (TContextMenuItem & { key: TPageActions })[];
+ optionsOrder: TPageActions[];
+ page: TPageInstance;
+ parentRef?: React.RefObject
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Welcome aboard Plane!
++ Get started by setting up your instance and workspace +
+
+
+
+
+
+
+ {showLogo && }
+
+
+ );
+ }
+
+ return (
+
+
+
+ {showLogo && }
+
+
+
+
+
+ {showLogo && (
+
+
+
+
+ setIsOpen(val)}
+ className="flex items-center justify-center"
+ buttonClassName="flex items-center justify-center"
+ label={
+ <>
+ {logo_props?.in_use ? (
+
+ )}
+
+ {getPageName(name)}
+
+
+ {/* table of content */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const res = await fetchMentions(query);
+ if (!res) throw new Error("Failed in fetching mentions");
+ return res;
+ },
+ renderComponent: (props) =>
+
+
+
+
+
+
+ setIsLogoPickerOpen(val)}
+ className="flex items-center justify-center"
+ buttonClassName="flex items-center justify-center"
+ label={
+
+ );
+});
diff --git a/dev-wiki/core/components/pages/editor/header/root.tsx b/dev-wiki/core/components/pages/editor/header/root.tsx
new file mode 100644
index 0000000000..bc9d7fb8b0
--- /dev/null
+++ b/dev-wiki/core/components/pages/editor/header/root.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { SmilePlus } from "lucide-react";
+// plane imports
+import type { EditorTitleRefApi } from "@plane/editor";
+import { EmojiIconPicker, EmojiIconPickerTypes } from "@plane/ui";
+import { cn } from "@plane/utils";
+// plane web components
+// import { PageTemplatePicker } from "@/plane-web/components/pages";
+// store
+import { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageEditorHeaderLogoPicker } from "./logo-picker";
+
+type Props = {
+ isEditorContentEmpty: boolean;
+ isPageLoading: boolean;
+ page: TPageInstance;
+ projectId: string | undefined;
+ titleEditorRef: React.RefObject
+ {isLogoSelected &&
+ }
+ onChange={updatePageLogo}
+ defaultIconColor={logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined}
+ defaultOpen={
+ logo_props?.in_use && logo_props?.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+ }
+ disabled={!isContentEditable}
+ />
+
+
+
+ {!isLogoSelected && (
+ setIsLogoPickerOpen(val)}
+ className="flex items-center justify-center"
+ buttonClassName="flex items-center justify-center"
+ label={
+
+ }
+ onChange={updatePageLogo}
+ defaultIconColor={
+ logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined
+ }
+ defaultOpen={
+ logo_props?.in_use && logo_props?.in_use === "emoji"
+ ? EmojiIconPickerTypes.EMOJI
+ : EmojiIconPickerTypes.ICON
+ }
+ disabled={!isContentEditable}
+ />
+ )}
+ {/* {isEditorContentEmpty && ( */}
+ {/*
+
+ {headings.map((marking) => {
+ const Component = HeadingComponent[marking.level];
+ if (!Component) return null;
+ if (showOutline === true)
+ return (
+
+ );
+ return (
+ handleOnClick(marking)}
+ />
+ );
+ })}
+
+ );
+};
diff --git a/dev-wiki/core/components/pages/editor/summary/heading-components.tsx b/dev-wiki/core/components/pages/editor/summary/heading-components.tsx
new file mode 100644
index 0000000000..c2e78dd67f
--- /dev/null
+++ b/dev-wiki/core/components/pages/editor/summary/heading-components.tsx
@@ -0,0 +1,37 @@
+// plane editor
+import type { IMarking } from "@plane/editor";
+
+export type THeadingComponentProps = {
+ marking: IMarking;
+ onClick: (event: React.MouseEvent
+ {readOnly ? (
+
+ {getPageName(title)} +
+ ) : ( +
+