feat: Optimize dialogs

src/components/ActionsModal.tsx

@@ -1,22 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useMediaQuery } from 'usehooks-ts'
 
+import { useResponsiveDialog } from '@/components/ResponsiveDialog'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from '@/components/ui/drawer'
+import type { Dialog } from '@/components/ui/dialog'
 import { BottomSafeArea } from '@/components/VerticalSafeArea'
 
 export type Action = {
@@ -36,49 +23,39 @@ const ActionsModal = ({
   ...props
 }: ActionsModalProps): JSX.Element => {
   const { t } = useTranslation()
-  const isDesktop = useMediaQuery('(min-width: 768px)')
-
-  if (isDesktop) {
-    return (
-      <Dialog {...props}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{title}</DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-5">
-            {actions.map((action) => (
-              <Button stretch key={action.id} onClick={action.onClick}>
-                {t(action.title)}
-              </Button>
-            ))}
-          </div>
-        </DialogContent>
-      </Dialog>
-    )
-  }
+  const {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogClose,
+  } = useResponsiveDialog()
 
   return (
-    <Drawer {...props}>
-      <DrawerContent className="select-none">
-        <DrawerHeader>
-          <DrawerTitle>{title}</DrawerTitle>
-        </DrawerHeader>
-        <DrawerFooter>
+    <Dialog {...props}>
+      <DialogContent className="select-none">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
           {actions.map((action) => (
             <Button stretch key={action.id} onClick={action.onClick}>
               {t(action.title)}
             </Button>
           ))}
-          <DrawerClose>
-            <Button className="w-full" variant="outline">
-              {t('common.close')}
-            </Button>
-          </DrawerClose>
-        </DrawerFooter>
+        </div>
+
+        <DialogFooter className="flex md:hidden">
+          <DialogClose asChild>
+            <Button variant="outline">{t('common.close')}</Button>
+          </DialogClose>
+        </DialogFooter>
+
         <BottomSafeArea />
-      </DrawerContent>
-    </Drawer>
+      </DialogContent>
+    </Dialog>
   )
 }
 

src/components/ResponsiveDialog.tsx

@@ -0,0 +1,53 @@
+import tw from 'twin.macro'
+import { useMediaQuery } from 'usehooks-ts'
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+
+const CustomDrawerContent = tw(DrawerContent)`px-6`
+const CustomDrawerFooter = tw(DrawerFooter)`px-0`
+const CustomDrawerHeader = tw(DrawerHeader)`px-0`
+
+export const useResponsiveDialog = () => {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  return isDesktop
+    ? ({
+        Dialog,
+        DialogClose,
+        DialogContent,
+        DialogDescription,
+        DialogFooter,
+        DialogHeader,
+        DialogTitle,
+        DialogTrigger,
+      } as const)
+    : ({
+        Dialog: Drawer,
+        DialogClose: DrawerClose,
+        DialogContent: CustomDrawerContent,
+        DialogDescription: DrawerDescription,
+        DialogFooter: CustomDrawerFooter,
+        DialogHeader: CustomDrawerHeader,
+        DialogTitle: DrawerTitle,
+        DialogTrigger: DrawerTrigger,
+      } as const)
+}

src/pages/Devices/components/DeviceSettingsModal.tsx

@@ -6,15 +6,9 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { to } from 'await-to-js'
 import { mutate } from 'swr'
 
+import { useResponsiveDialog } from '@/components/ResponsiveDialog'
 import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import type { Dialog } from '@/components/ui/dialog'
 import {
   Form,
   FormControl,
@@ -47,6 +41,15 @@ const DeviceSettingsModal = ({
   ...props
 }: DeviceSettingsModalProps): JSX.Element => {
   const { t } = useTranslation()
+  const {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogClose,
+  } = useResponsiveDialog()
+
   const DeviceSettingsSchema = useDeviceSettingsSchema()
 
   const form = useForm<FormData>({
@@ -176,7 +179,7 @@ const DeviceSettingsModal = ({
               control={form.control}
               name="shouldHandledBySurge"
               render={({ field }) => (
-                <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                <FormItem className="flex flex-row items-center space-x-3 space-y-0 py-2">
                   <FormControl>
                     <Switch
                       disabled={isLoading}
@@ -190,6 +193,9 @@ const DeviceSettingsModal = ({
             />
 
             <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">{t('common.cancel')}</Button>
+              </DialogClose>
               <Button
                 isLoading={isLoading}
                 type="submit"

src/pages/Scripting/Evaluate/index.tsx

@@ -7,28 +7,33 @@ import CodeContent from '@/components/CodeContent'
 import CodeMirrorLoading from '@/components/CodeMirrorLoading'
 import FixedFullscreenContainer from '@/components/FixedFullscreenContainer'
 import PageTitle from '@/components/PageTitle'
+import { useResponsiveDialog } from '@/components/ResponsiveDialog'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { BottomSafeArea } from '@/components/VerticalSafeArea'
 import { EvaluateResult } from '@/types'
 import fetcher from '@/utils/fetcher'
 
 const CodeMirror = lazy(() => import('@/components/CodeMirror'))
 
 export const Component: React.FC = () => {
   const { t } = useTranslation()
+
+  const {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogClose,
+  } = useResponsiveDialog()
+
   const [code, setCode] = useState<string>(() =>
     t('scripting.editor_placeholder'),
   )
   const [isLoading, setIsLoading] = useState(false)
-  const [result, setResult] = useState<string>()
+  const [result, setResult] = useState<string | undefined>()
   const [timeout, setTimeoutValue] = useState<number>(5)
 
   const evaluate = useCallback(() => {
@@ -133,8 +138,12 @@ export const Component: React.FC = () => {
             <CodeContent content={result} />
           </div>
           <DialogFooter>
-            <Button onClick={() => setResult('')}>{t('common.close')}</Button>
+            <DialogClose asChild>
+              <Button variant="default">{t('common.close')}</Button>
+            </DialogClose>
           </DialogFooter>
+
+          <BottomSafeArea />
         </DialogContent>
       </Dialog>
     </FixedFullscreenContainer>

src/pages/Scripting/index.tsx

@@ -10,24 +10,29 @@ import CodeContent from '@/components/CodeContent'
 import HorizontalSafeArea from '@/components/HorizontalSafeArea'
 import { ListCell } from '@/components/ListCell'
 import PageTitle from '@/components/PageTitle'
+import { useResponsiveDialog } from '@/components/ResponsiveDialog'
 import { Button } from '@/components/ui/button'
 import { ButtonGroup } from '@/components/ui/button-group'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import { BottomSafeArea } from '@/components/VerticalSafeArea'
 import { EvaluateResult, Scriptings } from '@/types'
 import fetcher from '@/utils/fetcher'
 import withProfile from '@/utils/with-profile'
 
 const ComponentBase: React.FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
+
+  const {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogClose,
+  } = useResponsiveDialog()
+
   const { data: scripting } = useSWR<Scriptings>('/scripting', fetcher)
-  const [evaluateResult, setEvaluateResult] = useState<string>()
+  const [evaluateResult, setEvaluateResult] = useState<string | undefined>()
   const [isLoading, setIsLoading] = useState<number>()
 
   const filteredList = useMemo(() => {
@@ -143,10 +148,12 @@ const ComponentBase: React.FC = () => {
             <CodeContent content={evaluateResult} />
           </div>
           <DialogFooter>
-            <Button onClick={() => setEvaluateResult(undefined)}>
-              {t('common.close')}
-            </Button>
+            <DialogClose asChild>
+              <Button variant="default">{t('common.close')}</Button>
+            </DialogClose>
           </DialogFooter>
+
+          <BottomSafeArea />
         </DialogContent>
       </Dialog>
     </>