feat: add batch tag add / remove actions, minor dialog cleanup

package.json

@@ -47,6 +47,7 @@
     "groq": "2.0.9",
     "immer": "8.0.1",
     "is-hotkey": "0.2.0",
+    "nanoid": "3.1.20",
     "pluralize": "8.0.0",
     "react-file-icon": "1.0.0",
     "react-hook-form": "6.14.0",

src/components/Card/index.tsx

@@ -90,7 +90,7 @@ const Card = (props: Props) => {
   }
 
   // Callbacks
-  const handleAssetClick = (e: MouseEvent) => {
+  const handleAssetClick = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation()
 
     if (currentDocument) {

src/components/Controls/index.tsx

@@ -1,5 +1,4 @@
 import {hues} from '@sanity/color'
-import {SplitVerticalIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline} from '@sanity/ui'
 import React, {FC} from 'react'
 import {useDispatch} from 'react-redux'
@@ -12,6 +11,7 @@ import OrderSelect from '../OrderSelect'
 import Progress from '../Progress'
 import SearchFacets from '../SearchFacets'
 import SearchFacetsControl from '../SearchFacetsControl'
+import TagIcon from '../TagIcon'
 import TextInputSearch from '../TextInputSearch'
 
 const Controls: FC = () => {
@@ -111,7 +111,11 @@ const Controls: FC = () => {
             <Box display={['none', 'none', 'block']} marginLeft={2}>
               <Button
                 fontSize={1}
-                icon={SplitVerticalIcon}
+                icon={
+                  <Box style={{transform: 'scale(0.75)'}}>
+                    <TagIcon />
+                  </Box>
+                }
                 onClick={toggleTagsPanelToggle}
                 mode={tagsPanelVisible ? 'default' : 'ghost'}
                 text={tagsPanelVisible ? 'Tags' : ''}

src/components/DialogAssetEdit/index.tsx

@@ -12,7 +12,7 @@ import * as yup from 'yup'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsUpdate, selectAssetById} from '../../modules/assets'
-import {dialogRemove, dialogShowDeleteConfirm} from '../../modules/dialog'
+import {dialogRemove, dialogShowConfirmDeleteAsset} from '../../modules/dialog'
 import {selectTags, selectTagSelectOptions, tagsCreate} from '../../modules/tags'
 import getTagSelectOptions from '../../utils/getTagSelectOptions'
 import imageDprUrl from '../../utils/imageDprUrl'
@@ -110,10 +110,9 @@ const DialogAssetEdit: FC<Props> = (props: Props) => {
     }
 
     dispatch(
-      dialogShowDeleteConfirm({
-        closeDialogId: assetItem?.asset._id,
-        documentId: assetItem?.asset._id,
-        documentType: 'asset'
+      dialogShowConfirmDeleteAsset({
+        asset: assetItem?.asset,
+        closeDialogId: assetItem?.asset._id
       })
     )
   }

src/components/DialogConfirm/index.tsx

@@ -0,0 +1,85 @@
+import {WarningOutlineIcon} from '@sanity/icons'
+import {Box, Button, Dialog, Flex, Stack, Text} from '@sanity/ui'
+import {DialogConfirm} from '@types'
+import React, {FC, ReactNode} from 'react'
+import {useDispatch} from 'react-redux'
+
+import {dialogRemove} from '../../modules/dialog'
+
+type Props = {
+  children?: ReactNode
+  dialog: DialogConfirm
+}
+
+const DialogConfirm: FC<Props> = (props: Props) => {
+  const {children, dialog} = props
+
+  // Redux
+  const dispatch = useDispatch()
+
+  // Callbacks
+  const handleClose = () => {
+    dispatch(dialogRemove(dialog?.id))
+  }
+
+  const handleConfirm = () => {
+    // Close target dialog, if provided
+    if (dialog?.closeDialogId) {
+      dispatch(dialogRemove(dialog?.closeDialogId))
+    }
+
+    if (dialog?.confirmCallbackAction) {
+      dispatch(dialog.confirmCallbackAction)
+    }
+
+    // Close self
+    handleClose()
+  }
+
+  const Footer = () => (
+    <Box padding={3}>
+      <Flex justify="space-between">
+        <Button fontSize={1} mode="bleed" onClick={handleClose} text="Cancel" />
+        <Button
+          fontSize={1}
+          onClick={handleConfirm}
+          text={dialog?.confirmText}
+          tone={dialog?.tone}
+        />
+      </Flex>
+    </Box>
+  )
+
+  const Header = () => (
+    <Flex align="center">
+      <Box paddingX={1}>
+        <WarningOutlineIcon />
+      </Box>
+      <Box marginLeft={2}>{dialog?.title}</Box>
+    </Flex>
+  )
+
+  return (
+    <Dialog
+      footer={<Footer />}
+      header={<Header />}
+      id="confirm"
+      onClose={handleClose}
+      scheme="dark"
+      width={1}
+    >
+      <Box paddingX={4} paddingY={4}>
+        <Stack space={3}>
+          {dialog?.description && <Text size={1}>{dialog.description}</Text>}
+          <Text muted size={1}>
+            <em>This operation cannot be reversed. Are you sure you want to continue?</em>
+          </Text>
+        </Stack>
+      </Box>
+
+      {children}
+    </Dialog>
+  )
+}
+
+export default DialogConfirm

src/components/DialogTagEdit/index.tsx

@@ -7,7 +7,7 @@ import {useDispatch} from 'react-redux'
 import * as yup from 'yup'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
-import {dialogRemove, dialogShowDeleteConfirm} from '../../modules/dialog'
+import {dialogRemove, dialogShowConfirmDeleteTag} from '../../modules/dialog'
 import {selectTagById, tagsUpdate} from '../../modules/tags'
 import sanitizeFormData from '../../utils/sanitizeFormData'
 import FormFieldInputText from '../FormFieldInputText'
@@ -84,10 +84,9 @@ const DialogTagEdit: FC<Props> = (props: Props) => {
     }
 
     dispatch(
-      dialogShowDeleteConfirm({
+      dialogShowConfirmDeleteTag({
         closeDialogId: tagItem?.tag?._id,
-        documentId: tagItem?.tag?._id,
-        documentType: 'tag'
+        tag: tagItem?.tag
       })
     )
   }

src/components/Dialogs/index.tsx

@@ -2,7 +2,7 @@ import {Dialog} from '@types'
 import React, {FC} from 'react'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
-import DialogDeleteConfirm from '../DialogDeleteConfirm'
+import DialogConfirm from '../DialogConfirm'
 import DialogAssetEdit from '../DialogAssetEdit'
 import DialogSearchFacets from '../DialogSearchFacets'
 import DialogTagCreate from '../DialogTagCreate'
@@ -29,11 +29,11 @@ const Dialogs: FC = () => {
       )
     }
 
-    if (dialog.type === 'deleteConfirm') {
+    if (dialog.type === 'confirm') {
       return (
-        <DialogDeleteConfirm dialog={dialog} key={index}>
+        <DialogConfirm dialog={dialog} key={index}>
           {childDialogs}
-        </DialogDeleteConfirm>
+        </DialogConfirm>
       )
     }