Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { RecentStickyIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { StickySearch } from "@/components/stickies/modal/search";
+import { useStickyOperations } from "@/components/stickies/sticky/use-operations";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+
+export const WorkspaceStickyHeader = observer(() => {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { creatingSticky, toggleShowNewSticky } = useSticky();
+  const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
+
+  return (
+    <>
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2.5">
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    label={`Stickies`}
+                    icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
+                  />
+                }
+              />
+            </Breadcrumbs>
+          </div>
+        </Header.LeftItem>
+
+        <Header.RightItem>
+          <StickySearch />
+          <Button
+            variant="primary"
+            size="sm"
+            className="items-center gap-1"
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            loading={creatingSticky}
+          >
+            Add sticky
+          </Button>
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Outlet } from "react-router";
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { WorkspaceStickyHeader } from "./header";
+
+export default function WorkspaceStickiesLayout() {
+  return (
+    <>
+      <AppHeader header={<WorkspaceStickyHeader />} />
+      <ContentWrapper>
+        <Outlet />
+      </ContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { PageHead } from "@/components/core/page-title";
+import { StickiesInfinite } from "@/components/stickies/layout/stickies-infinite";
+
+export default function WorkspaceStickiesPage() {
+  return (
+    <>
+      <PageHead title="Your stickies" />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+        <StickiesInfinite />
+      </div>
+    </>
+  );
+}