feat: responsive fm card (#11)

* feat: responsive fm card

* delete meaningless words

* fix joinIP

src/components/cron.tsx

@@ -213,7 +213,7 @@ export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
                                     name="servers"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>Specific Servers (Separate with comma)</FormLabel>
+                                            <FormLabel>Specific Servers</FormLabel>
                                             <FormControl>
                                                 <MultiSelect
                                                     options={serverList}

src/components/fm.tsx

@@ -37,6 +37,14 @@ import { TableRow, TableCell } from "./ui/table"
 import { DataTable } from "./xui/virtulized-data-table"
 import { Input } from "@/components/ui/input"
 import { Filepath } from "./xui/filepath"
+import { useMediaQuery } from "@/hooks/useMediaQuery"
+import {
+    Drawer,
+    DrawerContent,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer"
 
 interface FMProps {
     wsUrl: string;
@@ -346,6 +354,8 @@ export const FMCard = ({ id }: { id?: string }) => {
     const [fm, setFM] = useState<ModelCreateFMResponse | null>(null);
     const [init, setInit] = useState(false);
 
+    const isDesktop = useMediaQuery("(min-width: 640px)");
+
     const fetchFM = async () => {
         if (id) {
             try {
@@ -363,25 +373,55 @@ export const FMCard = ({ id }: { id?: string }) => {
         }
     }
 
-    return (
-        <Sheet modal={false} open={open} onOpenChange={(isOpen) => { if (isOpen) setOpen(true); }}>
-            <SheetTrigger asChild>
-                <IconButton icon="folder-closed" onClick={fetchFM} />
-            </SheetTrigger>
-            <SheetContent setOpen={setOpen} className="sm:min-w-[35%]">
-                <div className="overflow-auto">
-                    <SheetTitle />
-                    <SheetHeader className="pb-2">
-                        <SheetDescription />
-                    </SheetHeader>
-                    {fm?.session_id && init
-                        ?
-                        <FMComponent className="p-1 space-y-5" wsUrl={`/api/v1/ws/file/${fm.session_id}`} />
-                        :
-                        <p>The server does not exist, or have not been connected yet.</p>
-                    }
-                </div>
-            </SheetContent>
-        </Sheet>
+    return (isDesktop ?
+        (
+            <Sheet
+                modal={false}
+                open={open}
+                onOpenChange={(isOpen) => { if (isOpen) setOpen(true); }}
+            >
+                <SheetTrigger asChild>
+                    <IconButton icon="folder-closed" onClick={fetchFM} />
+                </SheetTrigger>
+                <SheetContent
+                    setOpen={setOpen}
+                    className="min-w-[35%]"
+                >
+                    <div className="overflow-auto">
+                        <SheetTitle />
+                        <SheetHeader className="pb-2">
+                            <SheetDescription />
+                        </SheetHeader>
+                        {fm?.session_id && init
+                            ?
+                            <FMComponent className="p-1 space-y-5" wsUrl={`/api/v1/ws/file/${fm.session_id}`} />
+                            :
+                            <p>The server does not exist, or have not been connected yet.</p>
+                        }
+                    </div>
+                </SheetContent>
+            </Sheet>
+        )
+        : (
+            <Drawer>
+                <DrawerTrigger asChild>
+                    <IconButton icon="folder-closed" onClick={fetchFM} />
+                </DrawerTrigger>
+                <DrawerContent className="min-h-[60%] p-4">
+                    <div className="overflow-auto">
+                        <DrawerTitle />
+                        <DrawerHeader className="pb-2">
+                            <SheetDescription />
+                        </DrawerHeader>
+                        {fm?.session_id && init
+                            ?
+                            <FMComponent className="p-1 space-y-5" wsUrl={`/api/v1/ws/file/${fm.session_id}`} />
+                            :
+                            <p>The server does not exist, or have not been connected yet.</p>
+                        }
+                    </div>
+                </DrawerContent>
+            </Drawer>
+        )
     )
 }

src/components/xui/virtulized-data-table.tsx

@@ -16,6 +16,7 @@ import { HTMLAttributes, forwardRef, useState, useRef, useEffect } from "react";
 import { TableVirtuoso } from "react-virtuoso";
 import { cn } from "@/lib/utils"
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 // Original Table is wrapped with a <div> (see https://ui.shadcn.com/docs/components/table#radix-:r24:-content-manual),
 // but here we don't want it, so let's use a new component with only <table> tag
@@ -99,6 +100,8 @@ export function DataTable<TData, TValue>({
 
     const [heightState, setHeight] = useState(0)
     const ref = useRef(null);
+    const isDesktop = useMediaQuery("(min-width: 640px)");
+
     useEffect(() => {
         const calculateHeight = () => {
             if (ref.current) {
@@ -118,11 +121,14 @@ export function DataTable<TData, TValue>({
                 setHeight(calculatedHeight);
             }
         };
-        window.addEventListener('resize', calculateHeight);
         calculateHeight(); // Initial calculation
 
-        return () => window.removeEventListener('resize', calculateHeight);
-    }, []);
+        if (isDesktop) {
+            window.addEventListener('resize', calculateHeight);
+        }
+
+        return () => { if (isDesktop) window.removeEventListener('resize', calculateHeight); }
+    }, [isDesktop]);
 
     return (
         <div className="rounded-md border" ref={ref} style={{ height: heightState }}>