chore(eslint): update ESLint configuration for better compatibility

Add `@eslint/js` recommended configuration to improve linting
standards. Include `@next/eslint-plugin-next` and `eslint-plugin-next`
to enhance Next.js specific linting capabilities. Adjust formatting
for consistency and readability.

refactor(files.ts): introduce DriveFile interface for better type safety

Define a `DriveFile` interface to improve type safety and readability
when handling Google Drive file data. This change reduces the use of
`any` type and clarifies the structure of file objects.

feat(Footer.tsx): display current time using useEffect hook

Add `useEffect` to set the current time in the footer component,
improving the accuracy of the displayed timestamp. This change
ensures the time is set once the component mounts.

refactor(form.tsx): destructure props for better readability

Destructure props in `FormItem` and `FormLabel` components to
enhance readability and maintainability. This change clarifies
which props are being used and passed down.

docs(useLoading.ts): improve documentation for useLoading hook

Enhance the documentation for the `useLoading` hook to clarify
its usage and behavior, especially regarding dependency management
in async mode. This change aims to prevent misuse and improve
developer experience.

refactor(errors.ts): improve type safety in withErrorHandler

Refine the `withErrorHandler` function to use `unknown` instead of
`any` for better type safety. This change aligns with TypeScript
best practices and improves code reliability.

Author: kzndotsh

eslint.config.mjs

@@ -1,16 +1,19 @@
+import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
 
 const compat = new FlatCompat({
+  // import.meta.dirname is available after Node.js v20.11.0
   baseDirectory: import.meta.dirname,
+  recommendedConfig: js.configs.recommended,
 });
 
 const eslintConfig = [
   // Use Next.js recommended configuration as base
   ...compat.config({
     extends: [
       "next/core-web-vitals", // Includes Next.js specific rules + React rules
-      "next/typescript",      // TypeScript specific rules for Next.js
-      "prettier",            // Disable ESLint rules that conflict with Prettier
+      "next/typescript", // TypeScript specific rules for Next.js
+      "prettier", // Disable ESLint rules that conflict with Prettier
     ],
   }),
   // Global ignores (replaces .eslintignore)
@@ -21,28 +24,28 @@ const eslintConfig = [
       "**/.pnp",
       "**/.pnp.js",
       "**/.yarn/**",
-      
+
       // Build outputs
       "**/.next/**",
       "**/out/**",
       "**/build/**",
       "**/dist/**",
       "**/.vercel/**",
       "**/storybook-static/**",
-      
+
       // Testing & Coverage
       "**/coverage/**",
       "**/.nyc_output/**",
       "**/test-results/**",
       "**/playwright-report/**",
       "**/playwright/.cache/**",
-      
+
       // Configuration files
       "**/*.config.js",
       "**/*.config.mjs",
       "**/*.config.ts",
       "**/commitlint.config.js",
-      
+
       // Generated files
       "**/*.min.js",
       "**/*.min.css",
@@ -51,12 +54,12 @@ const eslintConfig = [
       "**/public/worker-*.js",
       "**/public/fallback-*.js",
       "**/public/precache.*.js",
-      
+
       // TypeScript
       "**/*.d.ts",
       "**/next-env.d.ts",
       "**/*.tsbuildinfo",
-      
+
       // Logs
       "**/logs/**",
       "**/*.log",
@@ -65,36 +68,36 @@ const eslintConfig = [
       "**/yarn-error.log*",
       "**/pnpm-debug.log*",
       "**/lerna-debug.log*",
-      
+
       // OS files
       "**/.DS_Store",
       "**/Thumbs.db",
-      
+
       // Security
       "**/*.pem",
       "**/*.key",
       "**/*.crt",
-      
+
       // Environment
       "**/.env*",
-      
+
       // Temporary & cache
       "**/.cache/**",
       "**/.parcel-cache/**",
       "**/tmp/**",
       "**/temp/**",
       "**/*.tmp",
       "**/*.temp",
-      
+
       // Package files
       "**/package-lock.json",
       "**/yarn.lock",
       "**/pnpm-lock.yaml",
-      
+
       // Documentation
       "**/*.md",
       "**/LICENSE",
-      
+
       // Misc
       "**/.eslintcache",
       "**/.prettierignore",
@@ -106,34 +109,43 @@ const eslintConfig = [
     rules: {
       // TypeScript rules (warnings for gradual adoption)
       "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/no-unused-vars": ["warn", {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      }],
-      "@typescript-eslint/consistent-type-imports": ["warn", {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports",
-      }],
-      
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          fixStyle: "inline-type-imports",
+        },
+      ],
+
       // React best practices
       // Allow both arrow functions and function declarations
       "react/function-component-definition": "off",
-      
+
       // Next.js specific rules
       "@next/next/no-html-link-for-pages": "error",
       "@next/next/no-img-element": "warn", // Warn instead of error for gradual migration
-      
+
       // General code quality
-      "no-console": ["warn", { 
-        allow: ["warn", "error", "info", "debug"] // Allow more console methods in development
-      }],
+      "no-console": [
+        "warn",
+        {
+          allow: ["warn", "error", "info", "debug"], // Allow more console methods in development
+        },
+      ],
       "prefer-const": "error",
       "no-var": "error",
       "object-shorthand": "warn",
       "prefer-arrow-callback": "off", // Turn off to allow function expressions
       "prefer-template": "warn",
-      
+
       // Import rules (when import plugin is available)
       "import/first": "off",
       "import/newline-after-import": "off",

package-lock.json

@@ -94,6 +94,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
+    "@next/eslint-plugin-next": "^15.3.5",
     "@tailwindcss/postcss": "^4.1.11",
     "@types/cors": "^2.8.19",
     "@types/eslint": "^9.6.1",
@@ -114,6 +115,7 @@
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-next": "^0.0.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "husky": "^9.1.7",

package.json

@@ -10,6 +10,13 @@ import { encryptionService, gdrive } from "@/lib/utils.server";
 
 import { ValidatePaths } from "./paths";
 
+interface DriveFile {
+  mimeType?: string;
+  size?: string | number;
+  fileExtension?: string;
+  name?: string;
+}
+
 /**
  * List files in a folder
  * @param {object} options
@@ -577,19 +584,25 @@ export async function GetStorageInfo(): Promise<
           pageToken: pageToken || undefined,
         });
 
-        if (response && (response as any).data.files) {
-          for (const file of (response as any).data.files) {
-            if (file.mimeType === "application/vnd.google-apps.folder") {
+        if (
+          response &&
+          (response as { data: { files: unknown[]; nextPageToken?: string } })
+            .data.files
+        ) {
+          for (const file of (response as { data: { files: unknown[] } }).data
+            .files) {
+            const f = file as DriveFile;
+            if (f.mimeType === "application/vnd.google-apps.folder") {
               totalFolders++;
             } else {
               totalFiles++;
-              if (file.size) {
-                const fileSize = Number(file.size);
+              if (f.size) {
+                const fileSize = Number(f.size);
                 totalSize += fileSize;
 
                 // Categorize by file type
-                const extension = file.fileExtension || "no-extension";
-                const mimeType = file.mimeType || "unknown";
+                const extension = f.fileExtension || "no-extension";
+                const mimeType = f.mimeType || "unknown";
 
                 let category = "other";
                 if (mimeType.startsWith("image/")) category = "images";
@@ -619,7 +632,8 @@ export async function GetStorageInfo(): Promise<
           }
         }
 
-        pageToken = (response as any).data.nextPageToken;
+        pageToken = (response as { data: { nextPageToken?: string } }).data
+          .nextPageToken;
         console.info(
           `[GetStorageInfo] Processed page, total files so far: ${totalFiles}, folders: ${totalFolders}, size: ${(totalSize / 1024 ** 4).toFixed(2)} TB`
         );

src/actions/files.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { usePathname } from "next/navigation";
 
@@ -19,8 +19,13 @@ type Props = {
 export default function Footer({ content }: Props) {
   const pathname = usePathname();
   const loading = useLoading();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [loadTime, setLoadTime] = useState<number>(0);
+  const [now, setNow] = useState<string | null>(null);
+
+  useEffect(() => {
+    setNow(`${new Date().toISOString().slice(0, 19)}Z`);
+    setLoadTime(performance.now());
+  }, []);
 
   if (NO_LAYOUT_PATHS.some((path) => new RegExp(path).test(pathname)))
     return null;
@@ -33,9 +38,9 @@ export default function Footer({ content }: Props) {
           <span>SYSTEM STATUS: OPERATIONAL</span>
         </div>
         <div className="text-muted-foreground/60">•</div>
-        <div className="text-xs font-mono text-muted-foreground">
-          {new Date().toISOString().slice(0, 19)}Z
-        </div>
+        {now ? (
+          <div className="text-xs font-mono text-muted-foreground">{now}</div>
+        ) : null}
       </div>
       {config.siteConfig.experimental_pageLoadTime &&
         (loading ? (

src/components/layout/Footer.tsx

@@ -75,33 +75,33 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
 );
 
-function FormItem({
-  className,
-  disableBorder,
-  ...props
-}: React.ComponentProps<"div"> & { disableBorder?: boolean }) {
+function FormItem(
+  props: React.ComponentProps<"div"> & { disableBorder?: boolean }
+) {
+  const { className, disableBorder, ...rest } = props;
+  const _disableBorder = disableBorder;
   const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div
         data-slot="form-item"
         className={cn("grid gap-2", className)}
-        {...props}
+        {...rest}
       />
     </FormItemContext.Provider>
   );
 }
 
-function FormLabel({
-  className,
-  resetDisabled,
-  onFieldReset,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root> & {
-  resetDisabled?: boolean;
-  onFieldReset?: () => void;
-}) {
+function FormLabel(
+  props: React.ComponentProps<typeof LabelPrimitive.Root> & {
+    resetDisabled?: boolean;
+    onFieldReset?: () => void;
+  }
+) {
+  const { className, resetDisabled, onFieldReset, ...rest } = props;
+  const _resetDisabled = resetDisabled;
+  const _onFieldReset = onFieldReset;
   const { error, formItemId } = useFormField();
 
   return (
@@ -110,7 +110,7 @@ function FormLabel({
       data-error={!!error}
       className={cn("data-[error=true]:text-destructive", className)}
       htmlFor={formItemId}
-      {...props}
+      {...rest}
     />
   );
 }