snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/stickies/widget.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+// local imports
+import { StickiesTruncated } from "./layout/stickies-truncated";
+import { StickySearch } from "./modal/search";
+import { useStickyOperations } from "./sticky/use-operations";
+
+export const StickiesWidget = observer(function StickiesWidget() {
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { creatingSticky, toggleShowNewSticky } = useSticky();
+  const { t } = useTranslation();
+  // sticky operations
+  const { stickyOperations } = useStickyOperations({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("stickies.title")}</div>
+        {/* actions */}
+        <div className="flex gap-2">
+          <StickySearch />
+          <button
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
+            disabled={creatingSticky}
+          >
+            <AddOutline className="my-auto size-4" />
+            <span>{t("stickies.add")}</span>
+            {creatingSticky && (
+              <div
+                className="size-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent"
+                role="status"
+                aria-label="loading"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+      <div className="-mx-2">
+        <StickiesTruncated />
+      </div>
+    </div>
+  );
+});