chore: release v2.0.7

Author: geekdada

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.0.7](https://github.com/geekdada/yasd/compare/v2.0.6...v2.0.7) (2024-09-21)
+
+
+
 ## [2.0.6](https://github.com/geekdada/yasd/compare/v2.0.5...v2.0.6) (2024-09-08)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yasd",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "private": true,
   "type": "module",
   "license": "MIT",
@@ -151,7 +151,9 @@
     "twin.macro": "^3.4.0",
     "typescript": "^5.1.6",
     "use-is-in-viewport": "^1.0.9",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^9.0.0",
+    "vaul": "^0.9.4",
     "zod": "^3.21.4",
     "zx": "~7.2.3"
   },

src/components/ActionsModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useMediaQuery } from 'usehooks-ts'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -8,6 +9,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer'
+import { BottomSafeArea } from '@/components/VerticalSafeArea'
 
 export type Action = {
   id: number | string
@@ -26,23 +36,49 @@ const ActionsModal = ({
   ...props
 }: ActionsModalProps): JSX.Element => {
   const { t } = useTranslation()
+  const isDesktop = useMediaQuery('(min-width: 768px)')
 
-  return (
-    <Dialog {...props}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
+  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>
+    )
+  }
 
-        <div className="space-y-5">
+  return (
+    <Drawer {...props}>
+      <DrawerContent className="select-none">
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+        </DrawerHeader>
+        <DrawerFooter>
           {actions.map((action) => (
             <Button stretch key={action.id} onClick={action.onClick}>
               {t(action.title)}
             </Button>
           ))}
-        </div>
-      </DialogContent>
-    </Dialog>
+          <DrawerClose>
+            <Button className="w-full" variant="outline">
+              {t('common.close')}
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+        <BottomSafeArea />
+      </DrawerContent>
+    </Drawer>
   )
 }
 

src/components/BackButton/index.tsx

@@ -8,7 +8,7 @@ const BackButton = ({ title }: { title?: string }) => {
   const navigate = useNavigate()
 
   return (
-    <div className="space-x-4">
+    <div className="space-x-4 select-none">
       <Button
         variant="outline"
         onClick={() => navigate(-1)}

src/components/VerticalSafeArea.tsx

@@ -6,7 +6,8 @@ export const BottomSafeArea = () => {
     <div
       className="flex flex-1 sm:hidden"
       css={css`
-        height: env(safe-area-inset-bottom, 0px);
+        height: 0;
+        padding-bottom: env(safe-area-inset-bottom, 0px);
       `}
     ></div>
   )

src/components/ui/drawer.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/utils/shadcn'
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

src/i18n/en/translation.json

@@ -20,7 +20,8 @@
     "sw_updated": "Surge Web Dashboard has been updated, refresh page to use the new version.",
     "refresh": "Refresh",
     "confirm": "Confirm",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "close": "Close"
   },
   "tls_instruction": {
     "title": "Needed a certificate?",

src/i18n/zh/translation.json

@@ -20,7 +20,8 @@
     "sw_updated": "Surge Web Dashboard 已更新，刷新页面以使用新版本。",
     "refresh": "刷新",
     "confirm": "确认",
-    "cancel": "取消"
+    "cancel": "取消",
+    "close": "关闭"
   },
   "tls_instruction": {
     "title": "需要证书吗？",