fix: show project drag handle only when uncollapsed (#1727)

* fix: show project drag handle only when uncollapsed

* chore: fetch profile issues auth

* chore: update theme colors

* chore: update profile page redirection

apps/app/components/project/single-sidebar-project.tsx

@@ -143,7 +143,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
           >
             <button
               type="button"
-              className="absolute top-2 left-0 hidden rounded p-0.5 group-hover:!flex"
+              className={`absolute top-2 left-0 hidden rounded p-0.5 ${
+                sidebarCollapse ? "" : "group-hover:!flex"
+              }`}
               {...provided.dragHandleProps}
             >
               <EllipsisVerticalIcon className="h-4" />
@@ -157,8 +159,8 @@ export const SingleSidebarProject: React.FC<Props> = ({
             >
               <Disclosure.Button
                 as="div"
-                className={`flex w-full ml-4 cursor-pointer select-none items-center rounded-sm py-1 text-left text-sm font-medium ${
+                className={`flex w-full cursor-pointer select-none items-center rounded-sm py-1 text-left text-sm font-medium ${
-                  sidebarCollapse ? "justify-center" : "justify-between"
+                  sidebarCollapse ? "justify-center" : "justify-between ml-4"
                 }`}
               >
                 <div className="flex items-center gap-x-2">

apps/app/components/workspace/sidebar-dropdown.tsx

@@ -25,7 +25,7 @@ import { truncateText } from "helpers/string.helper";
 import { IWorkspace } from "types";
 
 // Static Data
-const userLinks = (workspaceSlug: string) => [
+const userLinks = (workspaceSlug: string, userId: string) => [
   {
     name: "Workspace Settings",
     href: `/${workspaceSlug}/settings`,
@@ -36,7 +36,7 @@ const userLinks = (workspaceSlug: string) => [
   },
   {
     name: "My Profile",
-    href: `/${workspaceSlug}/me/profile`,
+    href: `/${workspaceSlug}/profile/${userId}`,
   },
 ];
 
@@ -119,7 +119,7 @@ export const WorkspaceSidebarDropdown = () => {
         </Menu.Button>
 
         {!sidebarCollapse && (
-          <Link href={`/${workspaceSlug}/me/profile`}>
+          <Link href={`/${workspaceSlug}/profile/${user?.id}`}>
             <a>
               <div className="flex flex-grow justify-end">
                 <Avatar user={user} height="28px" width="28px" fontSize="14px" />
@@ -215,7 +215,7 @@ export const WorkspaceSidebarDropdown = () => {
             )}
           </div>
           <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
-            {userLinks(workspaceSlug as string).map((link, index) => (
+            {userLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
               <Menu.Item
                 key={index}
                 as="div"

apps/app/hooks/use-profile-issues.tsx

@@ -12,6 +12,7 @@ import { profileIssuesContext } from "contexts/profile-issues-context";
 import { IIssue } from "types";
 // fetch-keys
 import { USER_PROFILE_ISSUES } from "constants/fetch-keys";
+import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 
 const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
   const {
@@ -33,6 +34,8 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
 
   const router = useRouter();
 
+  const { memberRole } = useWorkspaceMyMembership();
+
   const params: any = {
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
@@ -47,14 +50,16 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
   };
 
   const { data: userProfileIssues, mutate: mutateProfileIssues } = useSWR(
-    workspaceSlug && userId
+    workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
       ? USER_PROFILE_ISSUES(workspaceSlug.toString(), userId.toString(), params)
       : null,
-    workspaceSlug && userId
+    workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
       ? () => userService.getUserProfileIssues(workspaceSlug.toString(), userId.toString(), params)
       : null
   );
 
+  console.log(memberRole);
+
   const groupedIssues:
     | {
         [key: string]: IIssue[];

apps/app/layouts/profile-layout.tsx

@@ -1,5 +1,3 @@
-import { useRouter } from "next/router";
-
 // hooks
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // layouts
@@ -14,23 +12,17 @@ type Props = {
   className?: string;
 };
 
-export const ProfileAuthWrapper = (props: Props) => {
+export const ProfileAuthWrapper = (props: Props) => (
-  const router = useRouter();
+  <WorkspaceAuthorizationLayout
-  const { workspaceSlug } = router.query;
+    breadcrumbs={
-
+      <Breadcrumbs>
-  return (
+        <BreadcrumbItem title="User Profile" />
-    <WorkspaceAuthorizationLayout
+      </Breadcrumbs>
-      breadcrumbs={
+    }
-        <Breadcrumbs>
+  >
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+    <ProfileLayout {...props} />
-          <BreadcrumbItem title={`User Name`} />
+  </WorkspaceAuthorizationLayout>
-        </Breadcrumbs>
+);
-      }
-    >
-      <ProfileLayout {...props} />
-    </WorkspaceAuthorizationLayout>
-  );
-};
 
 const ProfileLayout: React.FC<Props> = ({ children, className }) => {
   const { memberRole } = useWorkspaceMyMembership();

apps/app/styles/globals.css

@@ -23,6 +23,107 @@
   }
 
   :root {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
     --color-primary-10: 236, 241, 255;
     --color-primary-20: 217, 228, 255;
     --color-primary-30: 197, 214, 255;
@@ -42,122 +143,19 @@
     --color-primary-800: 19, 35, 76;
     --color-primary-900: 13, 24, 51;
 
-    /* default theme- light */
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-    --color-background-80: 245, 245, 245; /* tertiary bg */
 
-    --color-text-100: 23, 23, 23; /* primary text */
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-text-200: 82, 82, 82; /* secondary text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
 
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-background-100: 255, 255, 255; /* primary sidebar bg */
-    --color-sidebar-background-90: 250, 250, 250; /* secondary sidebar bg */
-    --color-sidebar-background-80: 245, 245, 245; /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: 23, 23, 23; /* primary sidebar text */
-    --color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
-    --color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
-    --color-sidebar-text-400: 163, 163, 163; /* sidebar placeholder text */
-
-    --color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
-    --color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
-  }
-
-  [data-theme="dark"] {
-    color-scheme: dark !important;
-
-    --color-background-100: 7, 7, 7; /* primary bg */
-    --color-background-90: 11, 11, 11; /* secondary bg */
-    --color-background-80: 23, 23, 23; /* tertiary bg */
-
-    --color-text-100: 241, 241, 241; /* primary text */
-    --color-text-200: 115, 115, 115; /* secondary text */
-    --color-text-300: 163, 163, 163; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-
-    --color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
-    --color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
-    --color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: 241, 241, 241; /* primary sidebar text */
-    --color-sidebar-text-200: 115, 115, 115; /* secondary sidebar text */
-    --color-sidebar-text-300: 163, 163, 163; /* tertiary sidebar text */
-    --color-sidebar-text-400: 82, 82, 82; /* sidebar placeholder text */
-
-    --color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
-    --color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
-  }
-
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-
-    --color-sidebar-text-100: 11, 11, 11; /* primary sidebar text */
-    --color-sidebar-text-200: 38, 38, 38; /* secondary sidebar text */
-    --color-sidebar-text-300: 58, 58, 58; /* tertiary sidebar text */
-    --color-sidebar-text-400: 115, 115, 115; /* sidebar placeholder text */
-
-    --color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
-    --color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
-  }
-
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-background-100: 7, 7, 7; /* primary bg */
-    --color-background-90: 11, 11, 11; /* secondary bg */
-    --color-background-80: 23, 23, 23; /* tertiary bg */
-
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
-    --color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
-    --color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: 250, 250, 250; /* primary sidebar text */
-    --color-sidebar-text-200: 241, 241, 241; /* secondary sidebar text */
-    --color-sidebar-text-300: 212, 212, 212; /* tertiary sidebar text */
-    --color-sidebar-text-400: 115, 115, 115; /* sidebar placeholder text */
-
-    --color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
-    --color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
   }
 }