accept all, validate later (#511)

Author: lazarusA

src/components/ui/MainPanel/LocalNetCDF.tsx

@@ -1,26 +1,40 @@
 "use client";
-import React, {ChangeEvent} from 'react'
+import React, {ChangeEvent, useState} from 'react'
 import { Input } from '../input'
 import { useGlobalStore, useZarrStore } from '@/utils/GlobalStates';
 import { NetCDF4 } from '@earthyscience/netcdf4-wasm';
-
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/ui/alert';
 
 interface LocalNCType {
   setShowLocal: React.Dispatch<React.SetStateAction<boolean>>;
   setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+const NETCDF_EXT_REGEX = /\.(nc|netcdf|nc3|nc4)$/i;
+
 const LocalNetCDF = ({ setOpenVariables}:LocalNCType) => {
     const {setStatus } = useGlobalStore.getState()
     const {ncModule} = useZarrStore.getState()
+    const [ncError, setError] = useState<string | null>(null);
 
     const handleFileSelect = async (event: ChangeEvent<HTMLInputElement>) => {
+        setError(null);
         const files = event.target.files;
         if (!files || files.length === 0) {
         setStatus(null)
         return;
         }
         const file = files[0]
+        // Manual validation (iOS-safe)
+        if (!NETCDF_EXT_REGEX.test(file.name)) {
+          setError('Please select a valid NetCDF (.nc, .netcdf, .nc3, .nc4) file.');
+          return;
+        }
+
         if (ncModule) ncModule.close();
         setStatus("Loading...")
         const data = await NetCDF4.fromBlobLazy(file)
@@ -47,9 +61,16 @@ const LocalNetCDF = ({ setOpenVariables}:LocalNCType) => {
         <Input type="file" id="filepicker"
           className='hover:drop-shadow-md hover:scale-[102%]'
           style={{width:'200px', cursor:'pointer'}}
-          accept='.nc, .netcdf, .nc3, .nc4'
           onChange={handleFileSelect}
         />
+        {ncError && (
+        <Alert variant="destructive" className='border-0 mt-1'>
+          <AlertTitle>Hey!</AlertTitle>
+          <AlertDescription>
+            {ncError}
+          </AlertDescription>
+        </Alert>
+      )}
     </div>
   )
 }

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }