feat: init

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { CycleIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// plane web components
+import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
+
+export const WorkspaceActiveCycleHeader = observer(() => {
+  const { t } = useTranslation();
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={t("active_cycles")}
+                icon={<CycleIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+              />
+            }
+          />
+        </Breadcrumbs>
+        <UpgradeBadge size="md" />
+      </Header.LeftItem>
+    </Header>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+// local imports
+import { WorkspaceActiveCycleHeader } from "./header";
+
+export default function WorkspaceActiveCycleLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceActiveCycleHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// plane web components
+import { WorkspaceActiveCyclesRoot } from "@/plane-web/components/active-cycles";
+
+const WorkspaceActiveCyclesPage = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Active Cycles` : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <WorkspaceActiveCyclesRoot />
+    </>
+  );
+});
+
+export default WorkspaceActiveCyclesPage;