✨ Allow reverseTakedown from workspace (#250)

* ✨ Allow reverseTakedown from workspace * 💄 Adjust z-index in various places to fix content overlapping
bluesky-social · Dec 5, 2024 · bdc3468 · bdc3468
1 parent 0a55cba
commit bdc3468
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 11 deletions.
diff --git a/components/common/Dropdown.tsx b/components/common/Dropdown.tsx
@@ -43,10 +43,11 @@ export const Dropdown = ({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
+          {/* z-30 value is important because we want all dropdowns to draw over other elements in the page and besides mobile menu, z-30 is the highest z-index we use in this codebase */}
           <Menu.Items
             className={classNames(
               rightAligned ? 'right-0' : '',
-              'absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-800 py-1 shadow-lg dark:shadow-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none',
+              'absolute z-30 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-800 py-1 shadow-lg dark:shadow-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none',
             )}
           >
             {items.map((item) => (

diff --git a/components/common/FullScreenActionPanel.tsx b/components/common/FullScreenActionPanel.tsx
@@ -11,10 +11,10 @@ export function FullScreenActionPanel(props: {
   const { open, onClose, title, children } = props
   return (
     <Transition.Root show={open} as={Fragment}>
-      {/* The z-20 value is important because the headerbar uses z-10 and we ant to make sure the full screen panels are never below the header bar */}
+      {/* The z-30 value is important because the headerbar uses z-10 and label chips with dropdowns use z-20 and we ant to make sure the full screen panels are never below the header bar and label chip dropdowns */}
       <Dialog
         as="div"
-        className="fixed z-20 inset-0 overflow-y-auto"
+        className="fixed z-30 inset-0 overflow-y-auto"
         onClose={onClose}
       >
         <Transition.Child

diff --git a/components/common/labels/List.tsx b/components/common/labels/List.tsx
@@ -107,7 +107,7 @@ export const ModerationLabel = ({
 
   return (
     <Popover className="relative z-20">
-      {({ open }) => (
+      {() => (
         <>
           <Popover.Button className="ring-none">
             <LabelChip

diff --git a/components/mod-event/SelectorButton.tsx b/components/mod-event/SelectorButton.tsx
@@ -109,7 +109,11 @@ export const ModEventSelectorButton = ({
       // Don't show reverse takedown action if subject is not takendown
       if (
         key === MOD_EVENTS.REVERSE_TAKEDOWN &&
-        (!subjectStatus?.takendown || !canTakedown)
+        // show reverse action even when subjectStatus is not takendown if we want to force display it
+        // however, if the user doesn't have permission for takedowns, don't show it
+        ((!subjectStatus?.takendown &&
+          !forceDisplayActions.includes(MOD_EVENTS.RESOLVE_APPEAL)) ||
+          !canTakedown)
       ) {
         return false
       }

diff --git a/components/shell/CommandPalette/Root.tsx b/components/shell/CommandPalette/Root.tsx
@@ -52,7 +52,8 @@ export const CommandPaletteRoot = ({
   return (
     <KBarProvider actions={staticActions}>
       <KBarPortal>
-        <KBarPositioner className="p-2 bg-gray-900/80 flex items-center pb-4 z-20">
+        {/* z-40 value is important because we want the cmd palette to be able above all panels and currently, the highest z-index we use is z-40 */}
+        <KBarPositioner className="p-2 bg-gray-900/80 flex items-center pb-4 z-40">
           <KBarAnimator className="w-full md:w-2/3 lg:w-1/2 w-max-[600px] overflow-hidden p-2 bg-white dark:bg-slate-800 rounded-xl">
             <KBarSearch
               defaultPlaceholder="Search by DID, bsky url or handle"

diff --git a/components/workspace/FilterSelector.tsx b/components/workspace/FilterSelector.tsx
@@ -134,17 +134,17 @@ export const WorkspaceFilterSelector = ({
   }
 
   return (
-    <Popover className="relative z-30">
-      {({ open, close }) => (
+    <Popover className="relative z-20">
+      {({ open }) => (
         <>
-          <Popover.Button className="text-sm flex flex-row items-center z-30">
+          <Popover.Button className="text-sm flex flex-row items-center z-20">
             <ActionButton
               appearance="outlined"
               size="xs"
               type="button"
               title="Select/unselect all items"
             >
-              <CheckIcon className="h-3 w-3" />
+              <CheckIcon className="h-4 w-3" />
             </ActionButton>
           </Popover.Button>
 

diff --git a/components/workspace/PanelActionForm.tsx b/components/workspace/PanelActionForm.tsx
@@ -31,7 +31,10 @@ export const WorkspacePanelActionForm = ({
           selectedAction={modEventType}
           isSubjectDid={false}
           hasBlobs={false}
-          forceDisplayActions={[MOD_EVENTS.RESOLVE_APPEAL]}
+          forceDisplayActions={[
+            MOD_EVENTS.RESOLVE_APPEAL,
+            MOD_EVENTS.REVERSE_TAKEDOWN,
+          ]}
           setSelectedAction={(action) => setModEventType(action)}
         />
         <ModEventDetailsPopover modEventType={modEventType} />