💄 Manage users/links UI improvements

frontend/src/PicrIcons.tsx

@@ -2,6 +2,7 @@ import {
   TbClipboard,
   TbDownload,
   TbFilter,
+  TbHome,
   TbInfoCircle,
   TbLink,
   TbSearch,
@@ -30,3 +31,4 @@ export const NoFlagIcon = (props: IconBaseProps) => (
 export const FilterIcon = (props: IconBaseProps) => <TbFilter {...props} />;
 export const DownloadIcon = (props: IconBaseProps) => <TbDownload {...props} />;
 export const SearchIcon = (props: IconBaseProps) => <TbSearch {...props} />;
+export const HomeIcon = (props: IconBaseProps) => <TbHome {...props} />;

frontend/src/components/CommentChip.tsx

@@ -0,0 +1,16 @@
+import { CommentPermissions } from '../../../graphql-types';
+import { Badge } from '@mantine/core';
+import { commentPermissionsStyle } from './CommentPermissionsStyle';
+
+export const CommentChip = ({
+  commentPermissions,
+}: {
+  commentPermissions: CommentPermissions;
+}) => {
+  const { icon, color } = commentPermissionsStyle[commentPermissions];
+  return (
+    <Badge color={color} size="sm" leftSection={icon}>
+      {commentPermissions}
+    </Badge>
+  );
+};

frontend/src/components/CommentPermissionsSelector.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, InputDescription, InputLabel } from '@mantine/core';
 import { CommentPermissions } from '../../../graphql-types';
+import { commentPermissionsStyle } from './CommentPermissionsStyle';
 
 export const CommentPermissionsSelector = ({
   value,
@@ -17,8 +18,10 @@ export const CommentPermissionsSelector = ({
       <Button.Group>
         {options.map((opt) => {
           const isSelected = opt === value;
+          const { icon, color } = commentPermissionsStyle[opt];
           return (
             <Button
+              leftSection={icon}
               title={opt}
               variant={isSelected ? 'filled' : 'default'}
               onClick={() => onChange(opt)}

frontend/src/components/CommentPermissionsStyle.tsx

@@ -0,0 +1,20 @@
+import { CommentPermissions } from '../../../graphql-types';
+import { ReactNode } from 'react';
+import { BiComment, BiCommentAdd, BiCommentX } from 'react-icons/bi';
+
+export const commentPermissionsStyle: {
+  [key in CommentPermissions]: { icon: ReactNode; color: string };
+} = {
+  [CommentPermissions.None]: {
+    icon: <BiCommentX />,
+    color: 'gray',
+  },
+  [CommentPermissions.Read]: {
+    icon: <BiComment />,
+    color: 'blue',
+  },
+  [CommentPermissions.Edit]: {
+    icon: <BiCommentAdd />,
+    color: 'green',
+  },
+};

frontend/src/components/FolderName.tsx

@@ -2,26 +2,34 @@ import { MinimalFolder } from '../../types';
 import { Code, Group, Tooltip } from '@mantine/core';
 import { joiner } from '../../../backend/helpers/joinTitle';
 import { TbChevronRight, TbChevronsRight } from 'react-icons/tb';
+import { HomeIcon } from '../PicrIcons';
 
 export const FolderName = ({ folder }: { folder: MinimalFolder }) => {
   return (
     <Tooltip
       withArrow={true}
-      color="gray"
+      color="blue.9"
       disabled={folder.parents?.length == 0}
       label={
         <Group gap={1}>
           {folder.parents?.toReversed().map((f) => (
             <>
-              <Code key={f.id}>{f.name}</Code>
+              <Code key={f.id} color="blue.8">
+                {f.name}
+              </Code>
               <Joiner />
             </>
           ))}
-          <Code>{folder.name}</Code>
+          <Code color="blue.7">{folder.name}</Code>
         </Group>
       }
     >
-      <Code>{folder.name}</Code>
+      <Code>
+        {folder.id == 1 ? (
+          <HomeIcon opacity={0.5} style={{ paddingTop: 3, marginRight: 2 }} />
+        ) : null}
+        {folder.name}
+      </Code>
     </Tooltip>
   );
 };

frontend/src/pages/management/CopyPublicLinkButton.tsx

@@ -0,0 +1,38 @@
+import { Button, ButtonProps } from '@mantine/core';
+import { copyToClipboard, publicURLFor } from '../../helpers/copyToClipboard';
+import { notifications } from '@mantine/notifications';
+import { ClipboardIcon } from '../../PicrIcons';
+import { TbClipboard } from 'react-icons/tb';
+
+export const CopyPublicLinkButton = ({
+  disabled,
+  hash,
+  folderId,
+  ...props
+}: {
+  disabled: boolean;
+  hash: string;
+  folderId: number;
+} & ButtonProps) => {
+  const url = publicURLFor(hash, folderId);
+  const notif = {
+    title: 'Link copied to clipboard',
+    message: url,
+    icon: <ClipboardIcon />,
+  };
+  return (
+    <Button
+      {...props}
+      disabled={disabled}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        copyToClipboard(url);
+        notifications.show(notif);
+      }}
+    >
+      <TbClipboard />
+      Copy Link
+    </Button>
+  );
+};

frontend/src/pages/management/ManagePublicLink.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { useMutation } from 'urql';
 import { editUserMutation } from '../../urql/mutations/editUserMutation';
 import type { MutationEditUserArgs } from '../../gql/graphql';
-import { copyToClipboard, publicURLFor } from '../../helpers/copyToClipboard';
 import {
   Button,
   Checkbox,
@@ -13,17 +12,12 @@ import {
   Stack,
   TextInput,
 } from '@mantine/core';
-import {
-  TbClipboard,
-  TbCloudUpload,
-  TbDoorExit,
-  TbUsersGroup,
-} from 'react-icons/tb';
-import { notifications } from '@mantine/notifications';
+import { TbCloudUpload, TbDoorExit, TbUsersGroup } from 'react-icons/tb';
 import { useViewUser } from './useViewUser';
 import { CommentPermissionsSelector } from '../../components/CommentPermissionsSelector';
 import { CommentPermissions } from '../../../../graphql-types';
-import { ClipboardIcon, PublicLinkIcon } from '../../PicrIcons';
+import { PublicLinkIcon } from '../../PicrIcons';
+import { CopyPublicLinkButton } from './CopyPublicLinkButton';
 
 export const ManagePublicLink = ({
   id,
@@ -112,21 +106,11 @@ export const ManagePublicLink = ({
             <TbDoorExit />
             Cancel
           </Button>
-          <Button
+          <CopyPublicLinkButton
             disabled={invalidLink}
-            onClick={() => {
-              const url = publicURLFor(link, f!.id);
-              copyToClipboard(url);
-              notifications.show({
-                title: 'Link copied to clipboard',
-                message: url,
-                icon: <ClipboardIcon />,
-              });
-            }}
-          >
-            <TbClipboard />
-            Copy Link
-          </Button>
+            folderId={f!.id}
+            hash={link}
+          />
           <Button disabled={invalidLink} onClick={onSave}>
             <TbCloudUpload />
             {exists ? 'Save' : 'Create Link'}

frontend/src/pages/management/userColumns.tsx

@@ -4,6 +4,8 @@ import { TbCircleCheck, TbCircleXFilled } from 'react-icons/tb';
 import { folder } from '../../../../backend/graphql/queries/folder';
 import { Code } from '@mantine/core';
 import { FolderName } from '../../components/FolderName';
+import { CopyPublicLinkButton } from './CopyPublicLinkButton';
+import { CommentChip } from '../../components/CommentChip';
 
 export const userColumns: PicrColumns<User>[] = [
   { accessorKey: 'name', header: 'Name' },
@@ -25,8 +27,26 @@ export const userColumns: PicrColumns<User>[] = [
   },
 ];
 
-export const publicLinkColumns = userColumns.filter(
-  ({ accessorKey }: PicrColumns<User>) => {
+export const publicLinkColumns: PicrColumns<User>[] = [
+  ...userColumns.filter(({ accessorKey }: PicrColumns<User>) => {
     return !['username'].includes(accessorKey);
+  }),
+  {
+    header: 'Comments',
+    accessorFn: (user: User) => (
+      <CommentChip commentPermissions={user.commentPermissions} />
+    ),
+  },
+  {
+    header: 'Copy Link',
+    accessorFn: ({ enabled, uuid, folderId }) => (
+      <CopyPublicLinkButton
+        disabled={!enabled}
+        hash={uuid}
+        folderId={folderId}
+        variant="subtle"
+        size="compact-sm"
+      />
+    ),
   },
-);
+];