[WEB-3096] feat: stickies page

apiserver/plane/app/views/workspace/sticky.py

@@ -39,17 +39,17 @@ def create(self, request, slug):
     )
     def list(self, request, slug):
         query = request.query_params.get("query", False)
-        stickies = self.get_queryset()
+        stickies = self.get_queryset().order_by("-sort_order")
         if query:
-            stickies = stickies.filter(name__icontains=query)
+            stickies = stickies.filter(description_stripped__icontains=query)
 
         return self.paginate(
             request=request,
             queryset=(stickies),
             on_results=lambda stickies: StickySerializer(stickies, many=True).data,
             default_per_page=20,
         )
-        
+
     @allow_permission(allowed_roles=[], creator=True, model=Sticky, level="WORKSPACE")
     def partial_update(self, request, *args, **kwargs):
         return super().partial_update(request, *args, **kwargs)

apiserver/plane/db/models/sticky.py

@@ -5,6 +5,9 @@
 # Module imports
 from .base import BaseModel
 
+# Third party imports
+from plane.utils.html_processor import strip_tags
+
 
 class Sticky(BaseModel):
     name = models.TextField(null=True, blank=True)
@@ -33,6 +36,12 @@ class Meta:
         ordering = ("-created_at",)
 
     def save(self, *args, **kwargs):
+        # Strip the html tags using html parser
+        self.description_stripped = (
+            None
+            if (self.description_html == "" or self.description_html is None)
+            else strip_tags(self.description_html)
+        )
         if self._state.adding:
             # Get the maximum sequence value from the database
             last_id = Sticky.objects.filter(workspace=self.workspace).aggregate(

packages/constants/src/index.ts

@@ -10,3 +10,4 @@ export * from "./state";
 export * from "./swr";
 export * from "./user";
 export * from "./workspace";
+export * from "./stickies";

packages/constants/src/stickies.ts

@@ -0,0 +1 @@
+export const STICKIES_PER_PAGE = 30;

packages/types/src/stickies.d.ts

@@ -5,4 +5,5 @@ export type TSticky = {
   color?: string;
   createdAt?: Date;
   updatedAt?: Date;
+  sort_order: number;
 };

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

@@ -0,0 +1,67 @@
+"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();
+            }}
+          >
+            Add sticky
+            {creatingSticky && (
+              <div className="flex items-center justify-center ml-2">
+                <div
+                  className={`w-4 h-4 border-[1px] border-t-transparent rounded-full animate-spin border-white`}
+                  role="status"
+                  aria-label="loading"
+                />
+              </div>
+            )}
+          </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,27 @@
+"use client";
+
+import { useParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core";
+import { StickiesInfinite } from "@/components/stickies";
+
+const WorkspaceStickiesPage = () => {
+  // router
+  const { workspaceSlug: routeWorkspaceSlug } = useParams();
+  const pageTitle = "My stickies";
+
+  // derived values
+  const workspaceSlug = (routeWorkspaceSlug as string) || undefined;
+
+  if (!workspaceSlug) return null;
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+        <StickiesInfinite />
+      </div>
+    </>
+  );
+};
+
+export default WorkspaceStickiesPage;

web/core/components/core/content-overflow-HOC.tsx

@@ -9,6 +9,7 @@ interface IContentOverflowWrapper {
   buttonClassName?: string;
   containerClassName?: string;
   fallback?: ReactNode;
+  customButton?: ReactNode;
 }
 
 export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper) => {
@@ -18,6 +19,7 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
     buttonClassName = "text-sm font-medium text-custom-primary-100",
     containerClassName,
     fallback = null,
+    customButton,
   } = props;
 
   // states
@@ -131,16 +133,18 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
             pointerEvents: isTransitioning ? "none" : "auto",
           }}
         >
-          <button
-            className={cn(
-              "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300",
-              buttonClassName
-            )}
-            onClick={handleToggle}
-            disabled={isTransitioning}
-          >
-            {showAll ? "Show less" : "Show all"}
-          </button>
+          {customButton || (
+            <button
+              className={cn(
+                "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300",
+                buttonClassName
+              )}
+              onClick={handleToggle}
+              disabled={isTransitioning}
+            >
+              {showAll ? "Show less" : "Show all"}
+            </button>
+          )}
         </div>
       )}
     </div>

web/core/components/editor/sticky-editor/editor.tsx

@@ -82,26 +82,28 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
         containerClassName={cn(containerClassName, "relative")}
         {...rest}
       />
-      <div
-        className={cn(
-          "transition-all duration-300 ease-out origin-top",
-          isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
-        )}
-      >
-        <Toolbar
-          executeCommand={(item) => {
-            // TODO: update this while toolbar homogenization
-            // @ts-expect-error type mismatch here
-            editorRef?.executeMenuItemCommand({
-              itemKey: item.itemKey,
-              ...item.extraProps,
-            });
-          }}
-          handleDelete={handleDelete}
-          handleColorChange={handleColorChange}
-          editorRef={editorRef}
-        />
-      </div>
+      {showToolbar && (
+        <div
+          className={cn(
+            "transition-all duration-300 ease-out origin-top",
+            isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
+          )}
+        >
+          <Toolbar
+            executeCommand={(item) => {
+              // TODO: update this while toolbar homogenization
+              // @ts-expect-error type mismatch here
+              editorRef?.executeMenuItemCommand({
+                itemKey: item.itemKey,
+                ...item.extraProps,
+              });
+            }}
+            handleDelete={handleDelete}
+            handleColorChange={handleColorChange}
+            editorRef={editorRef}
+          />
+        </div>
+      )}
     </div>
   );
 });

web/core/components/home/widgets/empty-states/links.tsx

@@ -1,27 +1,12 @@
-import { Link2, Plus } from "lucide-react";
-import { Button } from "@plane/ui";
+import { Link2 } from "lucide-react";
 
-type TProps = {
-  handleCreate: () => void;
-};
-export const LinksEmptyState = (props: TProps) => {
-  const { handleCreate } = props;
-  return (
-    <div className="min-h-[200px] flex w-full justify-center py-6 border-[1.5px] border-custom-border-100 rounded">
-      <div className="m-auto">
-        <div
-          className={`mb-2 rounded-full mx-auto last:rounded-full w-[50px] h-[50px] flex items-center justify-center bg-custom-background-80/40 transition-transform duration-300`}
-        >
-          <Link2 size={30} className="text-custom-text-400 -rotate-45" />
+export const LinksEmptyState = () => (
+    <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+      <div className="m-auto flex gap-2">
+        <Link2 size={30} className="text-custom-text-400/40 -rotate-45" />
+        <div className="text-custom-text-400 text-sm text-center my-auto">
+          Add any links you need for quick access to your work.
         </div>
-        <div className="text-custom-text-100 font-medium text-base text-center mb-1">No quick links yet</div>
-        <div className="text-custom-text-300 text-sm text-center mb-2">
-          Add any links you need for quick access to your work.{" "}
-        </div>
-        <Button variant="accent-primary" size="sm" onClick={handleCreate} className="mx-auto">
-          <Plus className="size-4 my-auto" /> <span>Add quick link</span>
-        </Button>
       </div>
     </div>
   );
-};

web/core/components/home/widgets/empty-states/recents.tsx

@@ -1,15 +1,38 @@
-import { History } from "lucide-react";
+import { Briefcase, FileText, History } from "lucide-react";
+import { LayersIcon } from "@plane/ui";
 
-export const RecentsEmptyState = () => (
-  <div className="h-[200px] flex w-full justify-center py-6 border-[1.5px] border-custom-border-100 rounded">
-    <div className="m-auto">
-      <div
-        className={`mb-2 rounded-full mx-auto last:rounded-full w-[50px] h-[50px] flex items-center justify-center bg-custom-background-80/40 transition-transform duration-300`}
-      >
-        <History size={30} className="text-custom-text-400 -rotate-45" />
+export const RecentsEmptyState = ({ type }: { type: string }) => {
+  const getDisplayContent = () => {
+    switch (type) {
+      case "project":
+        return {
+          icon: <Briefcase size={30} className="text-custom-text-400/40" />,
+          text: "Your recent projects will appear here once you visit one.",
+        };
+      case "page":
+        return {
+          icon: <FileText size={30} className="text-custom-text-400/40" />,
+          text: "Your recent pages will appear here once you visit one.",
+        };
+      case "issue":
+        return {
+          icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
+          text: "Your recent issues will appear here once you visit one.",
+        };
+      default:
+        return {
+          icon: <History size={30} className="text-custom-text-400/40" />,
+          text: "You don’t have any recent items yet.",
+        };
+    }
+  };
+  const { icon, text } = getDisplayContent();
+
+  return (
+    <div className="min-h-[120px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+      <div className="m-auto flex gap-2">
+        {icon} <div className="text-custom-text-400 text-sm text-center my-auto">{text}</div>
       </div>
-      <div className="text-custom-text-100 font-medium text-base text-center mb-1">No recent items yet</div>
-      <div className="text-custom-text-300 text-sm text-center mb-2">You don’t have any recent items yet. </div>
     </div>
-  </div>
-);
+  );
+};

web/core/components/home/widgets/links/link-detail.tsx

@@ -4,12 +4,11 @@ import { FC } from "react";
 // hooks
 // ui
 import { observer } from "mobx-react";
-import { Pencil, Trash2, ExternalLink, EllipsisVertical, Link, Link2 } from "lucide-react";
+import { Pencil, Trash2, ExternalLink, EllipsisVertical, Link2, Link } from "lucide-react";
 import { TOAST_TYPE, setToast, CustomMenu, TContextMenuItem } from "@plane/ui";
 // helpers
-import { cn } from "@plane/utils";
+import { cn, copyTextToClipboard } from "@plane/utils";
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
-import { copyUrlToClipboard } from "@/helpers/string.helper";
 import { useHome } from "@/hooks/store/use-home";
 import { TLinkOperations } from "./use-links";
 
@@ -37,7 +36,7 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
   };
 
   const handleCopyText = () =>
-    copyUrlToClipboard(viewLink).then(() => {
+    copyTextToClipboard(viewLink).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
@@ -74,7 +73,10 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
   ];
 
   return (
-    <div className="group btn btn-primary flex bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4 hover:shadow-md">
+    <div
+      onClick={handleOpenInNewTab}
+      className="cursor-pointer group btn btn-primary flex bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4 hover:shadow-md"
+    >
       <div className="rounded p-2 bg-custom-background-80/40 w-8 h-8 my-auto">
         <Link2 className="h-4 w-4 stroke-2 text-custom-text-350 -rotate-45" />
       </div>

web/core/components/home/widgets/links/links.tsx

@@ -20,14 +20,14 @@ export const ProjectLinkList: FC<TProjectLinkList> = observer((props) => {
   const { linkOperations, workspaceSlug } = props;
   // hooks
   const {
-    quickLinks: { getLinksByWorkspaceId, toggleLinkModal },
+    quickLinks: { getLinksByWorkspaceId },
   } = useHome();
 
   const links = getLinksByWorkspaceId(workspaceSlug);
 
   if (links === undefined) return <WidgetLoader widgetKey={EWidgetKeys.QUICK_LINKS} />;
 
-  if (links.length === 0) return <LinksEmptyState handleCreate={() => toggleLinkModal(true)} />;
+  if (links.length === 0) return <LinksEmptyState />;
 
   return (
     <div className="relative">