[WEB-3096] feat: stickies page (#6380)

* feat: added independent stickies page

* chore: randomized sticky color

* chore: search in stickies

* feat: dnd

* fix: quick links

* fix: stickies abrupt rendering

* fix: handled edge cases for dnd

* fix: empty states

* fix: build and lint

* fix: handled new sticky when last sticky is emoty

* fix: new sticky condition

* refactor: stickies empty states, store

* chore: update stickies empty states

* fix: random sticky color

* fix: header

* refactor: better error handling

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { observer } from "mobx-react";
+// ui
+import { useParams } from "next/navigation";
+import { Breadcrumbs, Button, Header, RecentStickyIcon } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+
+// hooks
+import { StickySearch } from "@/components/stickies/modal/search";
+import { useStickyOperations } from "@/components/stickies/sticky/use-operations";
+// plane-web
+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.BreadcrumbItem
+                type="text"
+                link={
+                  <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>
+    </>
+  );
+});

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

@@ -0,0 +1,13 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { WorkspaceStickyHeader } from "./header";
+
+export default function WorkspaceStickiesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceStickyHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

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

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