refactor: nearly there

package.json

@@ -70,7 +70,7 @@
     "lodash": "^4.17.21",
     "lodash.memoize": "^4.1.2",
     "media-chrome": "^0.8.1",
-    "react-icons": "^4.4.0",
+    "motion": "^10.13.1",
     "react-rx": "^2.0.4",
     "rxjs": "^6",
     "scroll-into-view-if-needed": "^2.2.29",

src/components/ConfigureApi.tsx

@@ -60,13 +60,10 @@ function ConfigureApi({secrets, setDialogState}: Props) {
         dispatch({type: 'submit'})
         const {token, secretKey, enableSignedUrls} = state
         handleSaveSecrets({token, secretKey, enableSignedUrls})
-          .then(async (savedSecrets) => {
+          .then((savedSecrets) => {
             const {projectId, dataset} = client.config()
             clear([cacheNs, secretsId, projectId, dataset])
-            await preload(
-              () => Promise.resolve(savedSecrets),
-              [cacheNs, secretsId, projectId, dataset]
-            )
+            preload(() => Promise.resolve(savedSecrets), [cacheNs, secretsId, projectId, dataset])
             setDialogState(false)
           })
           .catch((err) => dispatch({type: 'error', payload: err.message}))

src/components/EditThumbnailDialog.tsx

@@ -6,7 +6,7 @@ import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import type {VideoAssetDocument} from '../util/types'
-import {VideoThumbnail} from './VideoSource.styles'
+import {VideoThumbnail} from './VideoSource.styled'
 
 export interface Props {
   asset: VideoAssetDocument

src/components/InputBrowser.tsx

@@ -12,7 +12,14 @@ export default function InputBrowser({setDialogState, asset, onChange}: Props) {
   const id = `InputBrowser${useId()}`
   const handleClose = useCallback(() => setDialogState(false), [setDialogState])
   return (
-    <Dialog __unstable_autoFocus header="Select video" id={id} onClose={handleClose} width={2}>
+    <Dialog
+      scheme="dark"
+      __unstable_autoFocus
+      header="Select video"
+      id={id}
+      onClose={handleClose}
+      width={2}
+    >
       <SelectAsset asset={asset} onChange={onChange} setDialogState={setDialogState} />
     </Dialog>
   )

src/components/Preview.tsx

@@ -2,7 +2,7 @@ import React, {useMemo} from 'react'
 import {SanityDefaultPreview} from 'sanity/_unstable'
 
 import type {MuxAsset, VideoAssetDocument} from '../util/types'
-import {VideoThumbnail} from './VideoSource.styles'
+import {VideoThumbnail} from './VideoSource.styled'
 
 export interface MuxVideoPreviewProps {
   value: {

src/components/SelectAsset.tsx

@@ -9,7 +9,7 @@ import VideoSource, {type Props as VideoSourceProps} from './VideoSource'
 const PER_PAGE = 20
 
 function createQuery(start = 0, end = PER_PAGE) {
-  return /* groq */ `*[_type == "mux.videoAsset"] | order(_updatedAt desc) [${start}...${end}] {_id, playbackId, thumbTime, data}`
+  return /* groq */ `*[_type == "mux.videoAsset"] | order(_updatedAt desc) [${start}...${end}]`
 }
 
 export interface Props extends Pick<MuxInputProps, 'onChange'> {

src/components/Uploader.styled.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable no-nested-ternary */
+import {type CardTone, Card} from '@sanity/ui'
+import React, {forwardRef, useCallback, useRef} from 'react'
+import styled from 'styled-components'
+
+import {withFocusRing} from './withFocusRing'
+
+const ctrlKey = 17
+const cmdKey = 91
+
+const UploadCardWithFocusRing = withFocusRing(Card)
+
+interface UploadCardProps {
+  tone?: CardTone
+  children: React.ReactNode
+  onPaste: React.ClipboardEventHandler<HTMLInputElement>
+  onFocus: React.FocusEventHandler<HTMLDivElement>
+  onBlur: React.FocusEventHandler<HTMLDivElement>
+  onDrop: React.DragEventHandler<HTMLDivElement>
+  onDragOver: React.DragEventHandler<HTMLDivElement>
+  onDragLeave: React.DragEventHandler<HTMLDivElement>
+  onDragEnter: React.DragEventHandler<HTMLDivElement>
+}
+export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
+  (
+    {children, tone, onPaste, onFocus, onBlur, onDrop, onDragEnter, onDragLeave, onDragOver},
+    forwardedRef
+  ) => {
+    const ctrlDown = useRef(false)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
+      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+        ctrlDown.current = true
+      }
+      const vKey = 86
+      if (ctrlDown.current && event.keyCode == vKey) {
+        inputRef.current!.focus()
+      }
+    }, [])
+    const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
+      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
+        ctrlDown.current = false
+      }
+    }, [])
+
+    return (
+      <UploadCardWithFocusRing
+        tone={tone}
+        height="fill"
+        ref={forwardedRef}
+        padding={0}
+        radius={2}
+        shadow={0}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onPaste={onPaste}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onDrop={onDrop}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+      >
+        <HiddenInput ref={inputRef} onPaste={onPaste} />
+        {children}
+      </UploadCardWithFocusRing>
+    )
+  }
+)
+
+const HiddenInput = styled.input.attrs({type: 'text'})`
+  position: absolute;
+  border: 0;
+  color: white;
+  opacity: 0;
+
+  &:focus {
+    outline: none;
+  }
+`