fix kanban collapsed writing mode in firefox

.github/workflows/create-sync-pr.yml

@@ -11,7 +11,7 @@ env:
 
 jobs:
   sync_changes:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     permissions:
       pull-requests: write
       contents: read

apiserver/plane/api/urls/issue.py

@@ -6,9 +6,15 @@ from plane.api.views import (
     IssueLinkAPIEndpoint,
     IssueCommentAPIEndpoint,
     IssueActivityAPIEndpoint,
+    WorkspaceIssueAPIEndpoint,
 )
 
 urlpatterns = [
+    path(
+        "workspaces/<str:slug>/issues/<str:project__identifier>-<str:issue__identifier>/",
+        WorkspaceIssueAPIEndpoint.as_view(),
+        name="issue-by-identifier",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
         IssueAPIEndpoint.as_view(),

apiserver/plane/api/views/__init__.py

@@ -3,6 +3,7 @@ from .project import ProjectAPIEndpoint, ProjectArchiveUnarchiveAPIEndpoint
 from .state import StateAPIEndpoint
 
 from .issue import (
+    WorkspaceIssueAPIEndpoint,
     IssueAPIEndpoint,
     LabelAPIEndpoint,
     IssueLinkAPIEndpoint,

apiserver/plane/api/views/issue.py

@@ -32,6 +32,7 @@ from plane.api.serializers import (
     LabelSerializer,
 )
 from plane.app.permissions import (
+    WorkspaceEntityPermission,
     ProjectEntityPermission,
     ProjectLitePermission,
     ProjectMemberPermission,
@@ -51,6 +52,65 @@ from plane.db.models import (
 from .base import BaseAPIView, WebhookMixin
 
 
+
+class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
+    """
+    This viewset provides `retrieveByIssueId` on workspace level
+
+    """
+
+    model = Issue
+    webhook_event = "issue"
+    permission_classes = [
+        ProjectEntityPermission
+    ]
+    serializer_class = IssueSerializer
+
+
+    @property
+    def project__identifier(self):
+        return self.kwargs.get("project__identifier", None)
+
+    def get_queryset(self):
+        return (
+            Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project__identifier=self.kwargs.get("project__identifier"))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(self.kwargs.get("order_by", "-created_at"))
+        ).distinct()
+
+    def get(self, request, slug, project__identifier=None, issue__identifier=None):
+        if issue__identifier and project__identifier:
+            issue = Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            ).get(workspace__slug=slug, project__identifier=project__identifier, sequence_id=issue__identifier)
+            return Response(
+                IssueSerializer(
+                    issue,
+                    fields=self.fields,
+                    expand=self.expand,
+                ).data,
+                status=status.HTTP_200_OK,
+            )
+
 class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
@@ -282,7 +342,7 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
         )
         if serializer.is_valid():
             if (
-                str(request.data.get("external_id"))
+                request.data.get("external_id")
                 and (issue.external_id != str(request.data.get("external_id")))
                 and Issue.objects.filter(
                     project_id=project_id,

apiserver/plane/app/permissions/project.py

@@ -79,6 +79,16 @@ class ProjectEntityPermission(BasePermission):
         if request.user.is_anonymous:
             return False
 
+        # Handle requests based on project__identifier
+        if hasattr(view, "project__identifier") and view.project__identifier:
+            if request.method in SAFE_METHODS:
+                return ProjectMember.objects.filter(
+                    workspace__slug=view.workspace_slug,
+                    member=request.user,
+                    project__identifier=view.project__identifier,
+                    is_active=True,
+                ).exists()
+
         ## Safe Methods -> Handle the filtering logic in queryset
         if request.method in SAFE_METHODS:
             return ProjectMember.objects.filter(

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

@@ -151,8 +151,8 @@ class WorkSpaceViewSet(BaseViewSet):
         return super().partial_update(request, *args, **kwargs)
 
     @invalidate_cache(path="/api/workspaces/", user=False)
-    @invalidate_cache(path="/api/users/me/workspaces/", multiple=True)
-    @invalidate_cache(path="/api/users/me/settings/", multiple=True)
+    @invalidate_cache(path="/api/users/me/workspaces/", multiple=True, user=False)
+    @invalidate_cache(path="/api/users/me/settings/", multiple=True, user=False)
     def destroy(self, request, *args, **kwargs):
         return super().destroy(request, *args, **kwargs)
 

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

@@ -21,6 +21,7 @@ class WorkspaceStatesEndpoint(BaseAPIView):
             project__project_projectmember__member=request.user,
             project__project_projectmember__is_active=True,
             project__archived_at__isnull=True,
+            is_triage=False,
         )
         serializer = StateSerializer(states, many=True).data
         return Response(serializer, status=status.HTTP_200_OK)

packages/ui/src/control-link/control-link.tsx

@@ -6,10 +6,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   children: React.ReactNode;
   target?: string;
   disabled?: boolean;
+  className?: string;
 };
 
-export const ControlLink: React.FC<TControlLink> = (props) => {
-  const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
+export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
+  const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
   const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -23,8 +24,8 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   if (disabled) return <>{children}</>;
 
   return (
-    <a href={href} target={target} onClick={handleOnClick} {...rest}>
+    <a href={href} target={target} onClick={handleOnClick} {...rest} ref={ref} className={className}>
       {children}
     </a>
   );
-};
+});

web/components/core/modals/existing-issues-list-modal.tsx

@@ -36,6 +36,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
     workspaceLevelToggle = false,
   } = props;
   // states
+  const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
@@ -72,7 +73,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   useEffect(() => {
     if (!isOpen || !workspaceSlug || !projectId) return;
-
+    setIsLoading(true);
     projectService
       .projectIssuesSearch(workspaceSlug as string, projectId as string, {
         search: debouncedSearchTerm,
@@ -80,7 +81,10 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
         workspace_search: isWorkspaceLevel,
       })
       .then((res) => setIssues(res))
-      .finally(() => setIsSearching(false));
+      .finally(() => {
+        setIsSearching(false);
+        setIsLoading(false);
+      });
   }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
 
   return (
@@ -194,14 +198,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       </h5>
                     )}
 
-                    <IssueSearchModalEmptyState
-                      debouncedSearchTerm={debouncedSearchTerm}
-                      isSearching={isSearching}
-                      issues={issues}
-                      searchTerm={searchTerm}
-                    />
-
-                    {isSearching ? (
+                    {isSearching || isLoading ? (
                       <Loader className="space-y-3 p-3">
                         <Loader.Item height="40px" />
                         <Loader.Item height="40px" />
@@ -209,48 +206,59 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
-                        {issues.map((issue) => {
-                          const selected = selectedIssues.some((i) => i.id === issue.id);
+                      <>
+                        {issues.length === 0 ? (
+                          <IssueSearchModalEmptyState
+                            debouncedSearchTerm={debouncedSearchTerm}
+                            isSearching={isSearching}
+                            issues={issues}
+                            searchTerm={searchTerm}
+                          />
+                        ) : (
+                          <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
+                            {issues.map((issue) => {
+                              const selected = selectedIssues.some((i) => i.id === issue.id);
 
-                          return (
-                            <Combobox.Option
-                              key={issue.id}
-                              as="label"
-                              htmlFor={`issue-${issue.id}`}
-                              value={issue}
-                              className={({ active }) =>
-                                `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                } ${selected ? "text-custom-text-100" : ""}`
-                              }
-                            >
-                              <div className="flex items-center gap-2">
-                                <input type="checkbox" checked={selected} readOnly />
-                                <span
-                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor: issue.state__color,
-                                  }}
-                                />
-                                <span className="flex-shrink-0 text-xs">
-                                  {issue.project__identifier}-{issue.sequence_id}
-                                </span>
-                                {issue.name}
-                              </div>
-                              <a
-                                href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
-                                target="_blank"
-                                className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
-                                rel="noopener noreferrer"
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                <Rocket className="h-4 w-4" />
-                              </a>
-                            </Combobox.Option>
-                          );
-                        })}
-                      </ul>
+                              return (
+                                <Combobox.Option
+                                  key={issue.id}
+                                  as="label"
+                                  htmlFor={`issue-${issue.id}`}
+                                  value={issue}
+                                  className={({ active }) =>
+                                    `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                      active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                    } ${selected ? "text-custom-text-100" : ""}`
+                                  }
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <input type="checkbox" checked={selected} readOnly />
+                                    <span
+                                      className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                      style={{
+                                        backgroundColor: issue.state__color,
+                                      }}
+                                    />
+                                    <span className="flex-shrink-0 text-xs">
+                                      {issue.project__identifier}-{issue.sequence_id}
+                                    </span>
+                                    {issue.name}
+                                  </div>
+                                  <a
+                                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+                                    target="_blank"
+                                    className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
+                                    rel="noopener noreferrer"
+                                    onClick={(e) => e.stopPropagation()}
+                                  >
+                                    <Rocket className="h-4 w-4" />
+                                  </a>
+                                </Combobox.Option>
+                              );
+                            })}
+                          </ul>
+                        )}
+                      </>
                     )}
                   </Combobox.Options>
                 </Combobox>

web/components/cycles/board/cycles-board-card.tsx

@@ -149,7 +149,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <div>
+    <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
         <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
@@ -231,23 +231,23 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
-              <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed && (
-                  <FavoriteStar
-                    onClick={(e) => {
-                      if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                      else handleAddToFavorites(e);
-                    }}
-                    selected={!!cycleDetails.is_favorite}
-                  />
-                )}
-
-                <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
-              </div>
             </div>
           </div>
         </div>
       </Link>
+      <div className="absolute right-4 bottom-3.5 z-[5] flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!cycleDetails.is_favorite}
+          />
+        )}
+
+        <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
+      </div>
     </div>
   );
 });

web/components/cycles/list/cycles-list-item.tsx

@@ -154,7 +154,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <>
+    <div className="relative">
       <Link
         href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
         onClick={(e) => {
@@ -199,58 +199,61 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
               {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
             </div>
           </div>
-          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
-            {currentCycle && (
-              <div
-                className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
-                style={{
-                  color: currentCycle.color,
-                  backgroundColor: `${currentCycle.color}20`,
-                }}
-              >
-                {currentCycle.value === "current"
-                  ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                  : `${currentCycle.label}`}
-              </div>
-            )}
-
-            <div className="relative flex flex-shrink-0 items-center gap-3">
-              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
-                <div className="flex w-10 cursor-default items-center justify-center">
-                  {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
-                    <AvatarGroup showTooltip={false}>
-                      {cycleDetails.assignee_ids?.map((assignee_id) => {
-                        const member = getUserDetails(assignee_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                      })}
-                    </AvatarGroup>
-                  ) : (
-                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                      <User2 className="h-4 w-4 text-custom-text-400" />
-                    </span>
-                  )}
-                </div>
-              </Tooltip>
-
-              {isEditingAllowed && !isArchived && (
-                <FavoriteStar
-                  onClick={(e) => {
-                    if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    else handleAddToFavorites(e);
-                  }}
-                  selected={!!cycleDetails.is_favorite}
-                />
-              )}
-              <CycleQuickActions
-                cycleId={cycleId}
-                projectId={projectId}
-                workspaceSlug={workspaceSlug}
-                isArchived={isArchived}
-              />
-            </div>
-          </div>
+          <span className="h-6 w-52 flex-shrink-0" />
         </div>
       </Link>
-    </>
+      <div className="absolute right-5 bottom-8 z-[5] flex items-center gap-1.5">
+        <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
+          {currentCycle && (
+            <div
+              className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+              style={{
+                color: currentCycle.color,
+                backgroundColor: `${currentCycle.color}20`,
+              }}
+            >
+              {currentCycle.value === "current"
+                ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
+                : `${currentCycle.label}`}
+            </div>
+          )}
+
+          <div className="relative flex flex-shrink-0 items-center gap-3">
+            <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
+              <div className="flex w-10 cursor-default items-center justify-center">
+                {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {cycleDetails.assignee_ids?.map((assignee_id) => {
+                      const member = getUserDetails(assignee_id);
+                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                    })}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {isEditingAllowed && !isArchived && (
+              <FavoriteStar
+                onClick={(e) => {
+                  if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+                  else handleAddToFavorites(e);
+                }}
+                selected={!!cycleDetails.is_favorite}
+              />
+            )}
+            <CycleQuickActions
+              cycleId={cycleId}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+              isArchived={isArchived}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 });

web/components/empty-state/empty-state.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -23,7 +24,7 @@ export type EmptyStateProps = {
   secondaryButtonOnClick?: () => void;
 };
 
-export const EmptyState: React.FC<EmptyStateProps> = (props) => {
+export const EmptyState: React.FC<EmptyStateProps> = observer((props) => {
   const {
     type,
     size = "lg",
@@ -173,4 +174,4 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
       )}
     </>
   );
-};
+});

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -76,6 +76,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const sub_group_by = displayFilters?.sub_group_by;
   const group_by = displayFilters?.group_by;
 
+  const orderBy = displayFilters?.order_by;
+
   const userDisplayFilters = displayFilters || null;
 
   const KanBanView = sub_group_by ? KanBanSwimLanes : KanBan;
@@ -158,7 +160,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       issues.getIssueIds,
       updateIssue,
       group_by,
-      sub_group_by
+      sub_group_by,
+      orderBy !== "sort_order"
     ).catch((err) => {
       setToast({
         title: "Error",
@@ -259,6 +262,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               displayProperties={displayProperties}
               sub_group_by={sub_group_by}
               group_by={group_by}
+              orderBy={orderBy}
               updateIssue={updateIssue}
               quickActions={renderQuickActions}
               handleKanbanFilters={handleKanbanFilters}

web/components/issues/issue-layouts/kanban/block.tsx

@@ -60,7 +60,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
             className="absolute -top-1 right-0 hidden group-hover/kanban-block:block"
             onClick={handleEventPropagation}
           >
-            {quickActions(issue)}
+            {!isReadOnly && quickActions(issue)}
           </div>
         </div>
       </WithDisplayPropertiesHOC>
@@ -103,7 +103,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     issueIds,
   } = props;
 
-  const cardRef = useRef<HTMLDivElement | null>(null);
+  const cardRef = useRef<HTMLAnchorElement | null>(null);
   const {
     router: { workspaceSlug },
   } = useApplication();
@@ -138,6 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     return combine(
       draggable({
         element,
+        dragHandle: element,
         canDrag: () => isDragAllowed,
         getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragStart: () => {
@@ -151,7 +152,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
       }),
       dropTargetForElements({
         element,
-        canDrop: (payload) => payload.source?.data?.id !== issue?.id,
         getData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragEnter: () => {
           setIsDraggingOverBlock(true);
@@ -184,32 +184,29 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
           target="_blank"
           onClick={() => handleIssuePeekOverview(issue)}
           disabled={!!issue?.tempId}
+          ref={cardRef}
+          className={cn(
+            "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+            { "hover:cursor-pointer": isDragAllowed },
+            { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
+            { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
+          )}
         >
-          <div
-            className={cn(
-              "rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
-              { "hover:cursor-pointer": isDragAllowed },
-              { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
-              { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
-            )}
-            ref={cardRef}
+          <RenderIfVisible
+            classNames="space-y-2 px-3 py-2"
+            root={scrollableContainerRef}
+            defaultHeight="100px"
+            horizontalOffset={50}
+            changingReference={issueIds}
           >
-            <RenderIfVisible
-              classNames="space-y-2 px-3 py-2"
-              root={scrollableContainerRef}
-              defaultHeight="100px"
-              horizontalOffset={50}
-              changingReference={issueIds}
-            >
-              <KanbanIssueDetailsBlock
-                issue={issue}
-                displayProperties={displayProperties}
-                updateIssue={updateIssue}
-                quickActions={quickActions}
-                isReadOnly={!canEditIssueProperties}
-              />
-            </RenderIfVisible>
-          </div>
+            <KanbanIssueDetailsBlock
+              issue={issue}
+              displayProperties={displayProperties}
+              updateIssue={updateIssue}
+              quickActions={quickActions}
+              isReadOnly={!canEditIssueProperties}
+            />
+          </RenderIfVisible>
         </ControlLink>
       </div>
     </>

web/components/issues/issue-layouts/kanban/default.tsx

@@ -11,6 +11,7 @@ import {
   TUnGroupedIssues,
   TIssueKanbanFilters,
   TIssueGroupByOptions,
+  TIssueOrderByOptions,
 } from "@plane/types";
 // constants
 // hooks
@@ -39,6 +40,7 @@ export interface IGroupByKanBan {
   displayProperties: IIssueDisplayProperties | undefined;
   sub_group_by: TIssueGroupByOptions | undefined;
   group_by: TIssueGroupByOptions | undefined;
+  orderBy: TIssueOrderByOptions | undefined;
   sub_group_id: string;
   isDragDisabled: boolean;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
@@ -87,6 +89,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     handleOnDrop,
     showEmptyGroup = true,
     subGroupIssueHeaderCount,
+    orderBy,
   } = props;
 
   const member = useMember();
@@ -180,6 +183,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   displayProperties={displayProperties}
                   sub_group_by={sub_group_by}
                   group_by={group_by}
+                  orderBy={orderBy}
                   sub_group_id={sub_group_id}
                   isDragDisabled={isDragDisabled}
                   updateIssue={updateIssue}
@@ -206,6 +210,7 @@ export interface IKanBan {
   displayProperties: IIssueDisplayProperties | undefined;
   sub_group_by: TIssueGroupByOptions | undefined;
   group_by: TIssueGroupByOptions | undefined;
+  orderBy: TIssueOrderByOptions | undefined;
   sub_group_id?: string;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
@@ -252,6 +257,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     handleOnDrop,
     showEmptyGroup,
     subGroupIssueHeaderCount,
+    orderBy,
   } = props;
 
   const issueKanBanView = useKanbanView();
@@ -263,6 +269,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       displayProperties={displayProperties}
       group_by={group_by}
       sub_group_by={sub_group_by}
+      orderBy={orderBy}
       sub_group_id={sub_group_id}
       isDragDisabled={!issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by)}
       updateIssue={updateIssue}

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -11,13 +11,19 @@ import {
   TSubGroupedIssues,
   TUnGroupedIssues,
   TIssueGroupByOptions,
+  TIssueOrderByOptions,
 } from "@plane/types";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectState } from "@/hooks/store";
 //components
-import { KanbanDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload } from "./utils";
+import {
+  KanbanDropLocation,
+  getSourceFromDropPayload,
+  getDestinationFromDropPayload,
+  highlightIssueOnDrop,
+} from "./utils";
 import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
 
 interface IKanbanGroup {
@@ -45,6 +51,7 @@ interface IKanbanGroup {
   groupByVisibilityToggle?: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   handleOnDrop: (source: KanbanDropLocation, destination: KanbanDropLocation) => Promise<void>;
+  orderBy: TIssueOrderByOptions | undefined;
 }
 
 export const KanbanGroup = (props: IKanbanGroup) => {
@@ -52,6 +59,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     groupId,
     sub_group_id,
     group_by,
+    orderBy,
     sub_group_by,
     issuesMap,
     displayProperties,
@@ -102,13 +110,15 @@ export const KanbanGroup = (props: IKanbanGroup) => {
           if (!source || !destination) return;
 
           handleOnDrop(source, destination);
+
+          highlightIssueOnDrop(payload.source.element.id, orderBy !== "sort_order");
         },
       }),
       autoScrollForElements({
         element,
       })
     );
-  }, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn]);
+  }, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn, orderBy]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -162,16 +172,28 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     return preloadedData;
   };
 
+  const shouldOverlay = isDraggingOverColumn && orderBy !== "sort_order";
   return (
     <div
       id={`${groupId}__${sub_group_id}`}
       className={cn(
         "relative h-full transition-all min-h-[50px]",
         { "bg-custom-background-80": isDraggingOverColumn },
-        { "vertical-scrollbar scrollbar-md": !sub_group_by }
+        { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlay }
       )}
       ref={columnRef}
     >
+      <div
+        className={cn(
+          "absolute top-0 left-0 h-full w-full justify-center items-center text-sm text-custom-text-100",
+          {
+            "flex bg-custom-primary-10 border-[2px] border-custom-primary-40 rounded z-[2]": shouldOverlay,
+          },
+          { hidden: !shouldOverlay }
+        )}
+      >
+        <span>Drop here to move issue</span>
+      </div>
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
         columnId={groupId}

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -11,6 +11,7 @@ import {
   TUnGroupedIssues,
   TIssueKanbanFilters,
   TIssueGroupByOptions,
+  TIssueOrderByOptions,
 } from "@plane/types";
 // components
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
@@ -113,6 +114,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   disableIssueCreation?: boolean;
   storeType: KanbanStoreType;
   enableQuickIssueCreate: boolean;
+  orderBy: TIssueOrderByOptions | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   quickAddCallback?: (
@@ -145,6 +147,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     viewId,
     scrollableContainerRef,
     handleOnDrop,
+    orderBy,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -180,7 +183,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
           if (subGroupByVisibilityToggle.showGroup === false) return <></>;
           return (
             <div key={_list.id} className="flex flex-shrink-0 flex-col">
-              <div className="sticky top-[50px] z-[1] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+              <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
                 <div className="sticky left-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
@@ -215,6 +218,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                     viewId={viewId}
                     scrollableContainerRef={scrollableContainerRef}
                     handleOnDrop={handleOnDrop}
+                    orderBy={orderBy}
                     subGroupIssueHeaderCount={(groupByListId: string) =>
                       getSubGroupHeaderIssuesCount(issueIds as TSubGroupedIssues, groupByListId)
                     }
@@ -253,6 +257,7 @@ export interface IKanBanSwimLanes {
   viewId?: string;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  orderBy: TIssueOrderByOptions | undefined;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@@ -262,6 +267,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     displayProperties,
     sub_group_by,
     group_by,
+    orderBy,
     updateIssue,
     storeType,
     quickActions,
@@ -312,7 +318,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
 
   return (
     <div className="relative">
-      <div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90 px-2">
+      <div className="sticky top-0 z-[4] h-[50px] bg-custom-background-90 px-2">
         <SubGroupSwimlaneHeader
           issueIds={issueIds}
           group_by={group_by}
@@ -333,6 +339,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           displayProperties={displayProperties}
           group_by={group_by}
           sub_group_by={sub_group_by}
+          orderBy={orderBy}
           updateIssue={updateIssue}
           quickActions={quickActions}
           kanbanFilters={kanbanFilters}

web/components/issues/issue-layouts/kanban/utils.ts

@@ -1,4 +1,5 @@
 import pull from "lodash/pull";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import { IPragmaticDropPayload, TIssue, TIssueGroupByOptions } from "@plane/types";
 import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
 
@@ -87,14 +88,17 @@ export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): K
 const handleSortOrder = (
   destinationIssues: string[],
   destinationIssueId: string | undefined,
-  getIssueById: (issueId: string) => TIssue | undefined
+  getIssueById: (issueId: string) => TIssue | undefined,
+  shouldAddIssueAtTop = false
 ) => {
   const sortOrderDefaultValue = 65535;
   let currentIssueState = {};
 
   const destinationIndex = destinationIssueId
     ? destinationIssues.indexOf(destinationIssueId)
-    : destinationIssues.length;
+    : shouldAddIssueAtTop
+      ? 0
+      : destinationIssues.length;
 
   if (destinationIssues && destinationIssues.length > 0) {
     if (destinationIndex === 0) {
@@ -145,7 +149,8 @@ export const handleDragDrop = async (
   getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined,
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined,
   groupBy: TIssueGroupByOptions | undefined,
-  subGroupBy: TIssueGroupByOptions | undefined
+  subGroupBy: TIssueGroupByOptions | undefined,
+  shouldAddIssueAtTop = false
 ) => {
   if (!source.id || !groupBy || (subGroupBy && (!source.subGroupId || !destination.subGroupId))) return;
 
@@ -165,7 +170,7 @@ export const handleDragDrop = async (
   // for both horizontal and vertical dnd
   updatedIssue = {
     ...updatedIssue,
-    ...handleSortOrder(destinationIssues, destination.id, getIssueById),
+    ...handleSortOrder(destinationIssues, destination.id, getIssueById, shouldAddIssueAtTop),
   };
 
   if (source.groupId && destination.groupId && source.groupId !== destination.groupId) {
@@ -207,3 +212,18 @@ export const handleDragDrop = async (
     );
   }
 };
+
+export const highlightIssueOnDrop = (elementId: string | undefined, shouldScrollIntoView = true) => {
+  setTimeout(async () => {
+    const sourceElementId = elementId ?? "";
+    const sourceElement = document.getElementById(sourceElementId);
+    if (shouldScrollIntoView && sourceElement)
+      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center" });
+    sourceElement?.classList?.add("highlight");
+    setTimeout(() => {
+      const sourceElementId = elementId ?? "";
+      const sourceElement = document.getElementById(sourceElementId);
+      sourceElement?.classList?.remove("highlight");
+    }, 1000);
+  }, 200);
+};

web/components/issues/issue-layouts/list/blocks-list.tsx

@@ -28,7 +28,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
               key={`${issueId}`}
               defaultHeight="3rem"
               root={containerRef}
-              classNames={"relative border-b last:border-b-transparent"}
+              classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
               changingReference={issueIds}
             >
               <IssueBlock

web/components/issues/parent-issues-list-modal.tsx

@@ -36,6 +36,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   projectId,
   issueId,
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -56,6 +57,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
     if (!isOpen || !workspaceSlug || !projectId) return;
 
     setIsSearching(true);
+    setIsLoading(true);
 
     projectService
       .projectIssuesSearch(workspaceSlug as string, projectId as string, {
@@ -65,7 +67,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
         workspace_search: isWorkspaceLevel,
       })
       .then((res) => setIssues(res))
-      .finally(() => setIsSearching(false));
+      .finally(() => {
+        setIsSearching(false);
+        setIsLoading(false);
+      });
   }, [debouncedSearchTerm, isOpen, issueId, isWorkspaceLevel, projectId, workspaceSlug]);
 
   return (
@@ -153,14 +158,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       </h5>
                     )}
 
-                    <IssueSearchModalEmptyState
-                      debouncedSearchTerm={debouncedSearchTerm}
-                      isSearching={isSearching}
-                      issues={issues}
-                      searchTerm={searchTerm}
-                    />
-
-                    {isSearching ? (
+                    {isSearching || isLoading ? (
                       <Loader className="space-y-3 p-3">
                         <Loader.Item height="40px" />
                         <Loader.Item height="40px" />
@@ -168,41 +166,52 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}>
-                        {issues.map((issue) => (
-                          <Combobox.Option
-                            key={issue.id}
-                            value={issue}
-                            className={({ active, selected }) =>
-                              `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                active ? "bg-custom-background-80 text-custom-text-100" : ""
-                              } ${selected ? "text-custom-text-100" : ""}`
-                            }
-                          >
-                            <div className="flex flex-grow items-center gap-2 truncate">
-                              <span
-                                className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                style={{
-                                  backgroundColor: issue.state__color,
-                                }}
-                              />
-                              <span className="flex-shrink-0 text-xs">
-                                {issue.project__identifier}-{issue.sequence_id}
-                              </span>{" "}
-                              <span className="truncate">{issue.name}</span>
-                            </div>
-                            <a
-                              href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
-                              target="_blank"
-                              className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
-                              rel="noopener noreferrer"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <Rocket className="h-4 w-4" />
-                            </a>
-                          </Combobox.Option>
-                        ))}
-                      </ul>
+                      <>
+                        {issues.length === 0 ? (
+                          <IssueSearchModalEmptyState
+                            debouncedSearchTerm={debouncedSearchTerm}
+                            isSearching={isSearching}
+                            issues={issues}
+                            searchTerm={searchTerm}
+                          />
+                        ) : (
+                          <ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}>
+                            {issues.map((issue) => (
+                              <Combobox.Option
+                                key={issue.id}
+                                value={issue}
+                                className={({ active, selected }) =>
+                                  `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                    active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                  } ${selected ? "text-custom-text-100" : ""}`
+                                }
+                              >
+                                <div className="flex flex-grow items-center gap-2 truncate">
+                                  <span
+                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: issue.state__color,
+                                    }}
+                                  />
+                                  <span className="flex-shrink-0 text-xs">
+                                    {issue.project__identifier}-{issue.sequence_id}
+                                  </span>{" "}
+                                  <span className="truncate">{issue.name}</span>
+                                </div>
+                                <a
+                                  href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+                                  target="_blank"
+                                  className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
+                                  rel="noopener noreferrer"
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <Rocket className="h-4 w-4" />
+                                </a>
+                              </Combobox.Option>
+                            ))}
+                          </ul>
+                        )}
+                      </>
                     )}
                   </Combobox.Options>
                 </Combobox>

web/components/labels/delete-label-modal.tsx

@@ -91,9 +91,9 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete label-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>? The label will be
-                          removed from all the issues.
+                          Are you sure you wish to delete{" "}
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>? This will remove the
+                          label from all the issue and from any views where the label is being filtered upon.
                         </p>
                       </div>
                     </div>

web/components/modules/module-card-item.tsx

@@ -144,106 +144,107 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     : "0 Issue";
 
   return (
-    <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
-      <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
-        <div>
-          <div className="flex items-center justify-between gap-2">
-            <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-              <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-            </Tooltip>
-            <div className="flex items-center gap-2">
-              {moduleStatus && (
-                <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                  style={{
-                    color: moduleStatus.color,
-                    backgroundColor: `${moduleStatus.color}20`,
-                  }}
-                >
-                  {moduleStatus.label}
-                </span>
-              )}
-              <button onClick={openModuleOverview}>
-                <Info className="h-4 w-4 text-custom-text-400" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-1.5 text-custom-text-200">
-              <LayersIcon className="h-4 w-4 text-custom-text-300" />
-              <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
-            </div>
-            {moduleDetails.member_ids?.length > 0 && (
-              <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
-                <div className="flex cursor-default items-center gap-1">
-                  <AvatarGroup showTooltip={false}>
-                    {moduleDetails.member_ids.map((member_id) => {
-                      const member = getUserDetails(member_id);
-                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                    })}
-                  </AvatarGroup>
-                </div>
+    <div className="relative">
+      <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
+        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
               </Tooltip>
-            )}
-          </div>
-
-          <Tooltip
-            isMobile={isMobile}
-            tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
-            position="top-left"
-          >
-            <div className="flex w-full items-center">
-              <div
-                className="bar relative h-1.5 w-full rounded bg-custom-background-90"
-                style={{
-                  boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
-                }}
-              >
-                <div
-                  className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
-                  style={{
-                    width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
-                  }}
-                />
+              <div className="flex items-center gap-2">
+                {moduleStatus && (
+                  <span
+                    className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                    style={{
+                      color: moduleStatus.color,
+                      backgroundColor: `${moduleStatus.color}20`,
+                    }}
+                  >
+                    {moduleStatus.label}
+                  </span>
+                )}
+                <button onClick={openModuleOverview}>
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
               </div>
             </div>
-          </Tooltip>
+          </div>
 
-          <div className="flex items-center justify-between">
-            {isDateValid ? (
-              <>
-                <span className="text-xs text-custom-text-300">
-                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-                </span>
-              </>
-            ) : (
-              <span className="text-xs text-custom-text-400">No due date</span>
-            )}
-
-            <div className="z-[5] flex items-center gap-1.5">
-              {isEditingAllowed && (
-                <FavoriteStar
-                  onClick={(e) => {
-                    if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    else handleAddToFavorites(e);
-                  }}
-                  selected={!!moduleDetails.is_favorite}
-                />
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
+              </div>
+              {moduleDetails.member_ids?.length > 0 && (
+                <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
+                  <div className="flex cursor-default items-center gap-1">
+                    <AvatarGroup showTooltip={false}>
+                      {moduleDetails.member_ids.map((member_id) => {
+                        const member = getUserDetails(member_id);
+                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                      })}
+                    </AvatarGroup>
+                  </div>
+                </Tooltip>
               )}
-              {workspaceSlug && projectId && (
-                <ModuleQuickActions
-                  moduleId={moduleId}
-                  projectId={projectId.toString()}
-                  workspaceSlug={workspaceSlug.toString()}
-                />
+            </div>
+
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex w-full items-center">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between py-0.5">
+              {isDateValid ? (
+                <>
+                  <span className="text-xs text-custom-text-300">
+                    {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+                  </span>
+                </>
+              ) : (
+                <span className="text-xs text-custom-text-400">No due date</span>
               )}
             </div>
           </div>
         </div>
+      </Link>
+      <div className="absolute right-4 bottom-3.5 z-[5] flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!moduleDetails.is_favorite}
+          />
+        )}
+        {workspaceSlug && projectId && (
+          <ModuleQuickActions
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        )}
       </div>
-    </Link>
+    </div>
   );
 });

web/components/modules/module-list-item.tsx

@@ -135,7 +135,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const completedModuleCheck = moduleDetails.status === "completed";
 
   return (
-    <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+    <div className="relative">
       <Link
         href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
         onClick={(e) => {
@@ -143,33 +143,39 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             openModuleOverview(e);
           }
         }}
-        className="relative flex w-full items-center justify-between gap-3 overflow-hidden"
       >
-        <div className="relative flex w-full items-center gap-3 overflow-hidden">
-          <div className="flex items-center gap-4 truncate">
-            <span className="flex-shrink-0">
-              <CircularProgressIndicator size={38} percentage={progress}>
-                {completedModuleCheck ? (
-                  progress === 100 ? (
-                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                  ) : (
-                    <span className="text-sm text-custom-primary-100">{`!`}</span>
-                  )
-                ) : progress === 100 ? (
-                  <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                ) : (
-                  <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                )}
-              </CircularProgressIndicator>
-            </span>
-            <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-              <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-            </Tooltip>
+        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+            <div className="relative flex w-full items-center gap-3 overflow-hidden">
+              <div className="flex items-center gap-4 truncate">
+                <span className="flex-shrink-0">
+                  <CircularProgressIndicator size={38} percentage={progress}>
+                    {completedModuleCheck ? (
+                      progress === 100 ? (
+                        <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                      ) : (
+                        <span className="text-sm text-custom-primary-100">{`!`}</span>
+                      )
+                    ) : progress === 100 ? (
+                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                    ) : (
+                      <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                    )}
+                  </CircularProgressIndicator>
+                </span>
+                <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+                  <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+                </Tooltip>
+              </div>
+              <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
+            </div>
           </div>
-          <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
-            <Info className="h-4 w-4 text-custom-text-400" />
-          </button>
+          <span className="h-6 w-52 flex-shrink-0" />
         </div>
+      </Link>
+      <div className="absolute right-5 bottom-8 z-[5] flex items-center gap-1.5">
         <div className="flex flex-shrink-0 items-center justify-center">
           {moduleStatus && (
             <span
@@ -183,51 +189,51 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             </span>
           )}
         </div>
-      </Link>
-      <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
-        <div className="text-xs text-custom-text-300">
-          {renderDate && (
-            <span className=" text-xs text-custom-text-300">
-              {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-            </span>
-          )}
-        </div>
+        <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
+          <div className="text-xs text-custom-text-300">
+            {renderDate && (
+              <span className=" text-xs text-custom-text-300">
+                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+              </span>
+            )}
+          </div>
 
-        <div className="relative flex flex-shrink-0 items-center gap-3">
-          <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
-            <div className="flex w-10 cursor-default items-center justify-center gap-1">
-              {moduleDetails.member_ids.length > 0 ? (
-                <AvatarGroup showTooltip={false}>
-                  {moduleDetails.member_ids.map((member_id) => {
-                    const member = getUserDetails(member_id);
-                    return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                  })}
-                </AvatarGroup>
-              ) : (
-                <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                  <User2 className="h-4 w-4 text-custom-text-400" />
-                </span>
-              )}
-            </div>
-          </Tooltip>
+          <div className="relative flex flex-shrink-0 items-center gap-3">
+            <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
+              <div className="flex w-10 cursor-default items-center justify-center gap-1">
+                {moduleDetails.member_ids.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {moduleDetails.member_ids.map((member_id) => {
+                      const member = getUserDetails(member_id);
+                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                    })}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
 
-          {isEditingAllowed && !isArchived && (
-            <FavoriteStar
-              onClick={(e) => {
-                if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                else handleAddToFavorites(e);
-              }}
-              selected={moduleDetails.is_favorite}
-            />
-          )}
-          {workspaceSlug && projectId && (
-            <ModuleQuickActions
-              moduleId={moduleId}
-              projectId={projectId.toString()}
-              workspaceSlug={workspaceSlug.toString()}
-              isArchived={isArchived}
-            />
-          )}
+            {isEditingAllowed && !isArchived && (
+              <FavoriteStar
+                onClick={(e) => {
+                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                  else handleAddToFavorites(e);
+                }}
+                selected={moduleDetails.is_favorite}
+              />
+            )}
+            {workspaceSlug && projectId && (
+              <ModuleQuickActions
+                moduleId={moduleId}
+                projectId={projectId.toString()}
+                workspaceSlug={workspaceSlug.toString()}
+                isArchived={isArchived}
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>

web/package.json

@@ -58,6 +58,7 @@
     "react-markdown": "^8.0.7",
     "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
+    "smooth-scroll-into-view-if-needed": "^2.0.2",
     "swr": "^2.1.3",
     "tailwind-merge": "^2.0.0",
     "use-debounce": "^9.0.4",

web/styles/globals.css

@@ -422,8 +422,10 @@ body {
 }
 
 .vertical-lr {
+  writing-mode: vertical-lr;
   -webkit-writing-mode: vertical-lr;
   -ms-writing-mode: vertical-lr;
+  width: fit-content;
 }
 
 div.web-view-spinner {
@@ -630,3 +632,8 @@ div.web-view-spinner div.bar12 {
 .scrollbar-lg::-webkit-scrollbar-thumb {
   border: 4px solid rgba(0, 0, 0, 0);
 }
+
+/* highlight class */
+.highlight {
+  border: 1px solid rgb(var(--color-primary-100));
+}

yarn.lock

@@ -2755,7 +2755,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
+"@types/react@*", "@types/react@^18.2.42":
   version "18.2.42"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
   integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==
@@ -3699,6 +3699,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+compute-scroll-into-view@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz#753f11d972596558d8fe7c6bcbc8497690ab4c87"
+  integrity sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -7633,6 +7638,13 @@ schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scroll-into-view-if-needed@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz#fa9524518c799b45a2ef6bbffb92bcad0296d01f"
+  integrity sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==
+  dependencies:
+    compute-scroll-into-view "^3.0.2"
+
 selecto@~1.26.3:
   version "1.26.3"
   resolved "https://registry.yarnpkg.com/selecto/-/selecto-1.26.3.tgz#12f259112b943d395731524e3bb0115da7372212"
@@ -7774,6 +7786,13 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+smooth-scroll-into-view-if-needed@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-2.0.2.tgz#5bd4ebef668474d6618ce8704650082e93068371"
+  integrity sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==
+  dependencies:
+    scroll-into-view-if-needed "^3.1.0"
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"