feat(api-docs): simplify API documentation loading and integrate ApiReferenceReact component

feat(openapi): add File schema to OpenAPI specification for file management

app/api-docs/page.tsx

@@ -1,70 +1,29 @@
-'use client';
-
-import { useEffect } from 'react';
-import Link from 'next/link';
+import { ApiReferenceReact } from '@scalar/api-reference-react'
 
 export default function ApiDocs() {
-  useEffect(() => {
-    // Load Scalar API Reference dynamically
-    const script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/@scalar/api-reference@1.32.9/dist/browser/standalone.js';
-    script.async = true;
-    document.body.appendChild(script);
-
-    const style = document.createElement('link');
-    style.rel = 'stylesheet';
-    style.href = 'https://cdn.jsdelivr.net/npm/@scalar/api-reference@1.32.9/dist/style.css';
-    document.head.appendChild(style);
-
-    return () => {
-      document.body.removeChild(script);
-      document.head.removeChild(style);
-    };
-  }, []);
-
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="bg-white shadow rounded-lg">
           <div className="px-4 py-5 sm:p-6">
-            <div className="flex items-center justify-between mb-4">
-              <div>
-                <h1 className="text-2xl font-bold text-gray-900">
-                  Vtorio API Documentation
-                </h1>
-                <p className="text-gray-600 mt-2">
-                  Interactive API documentation for file upload and management endpoints.
-                </p>
-              </div>
-              <Link
-                href="/"
-                className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
-                legacyBehavior>
-                <svg
-                  className="w-4 h-4 mr-2"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-                  />
-                </svg>
-                Back to Home
-              </Link>
+            <div className="mb-4">
+              <h1 className="text-2xl font-bold text-gray-900">
+                Vtorio API Documentation
+              </h1>
+              <p className="text-gray-600 mt-2">
+                Interactive API documentation for file upload and management endpoints.
+              </p>
             </div>
-            <div
-              id="api-reference"
-              data-url="/api/openapi.json"
-              data-theme="default"
-              style={{ height: 'calc(100vh - 200px)' }}
+            <ApiReferenceReact 
+              configuration={{
+                url: '/api/openapi.json',
+                theme: 'default',
+                layout: 'modern'
+              }}
             />
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }

app/api/openapi.json/route.ts

@@ -13,6 +13,21 @@ const openApiSpec = {
       description: 'Development server',
     },
   ],
+  components: {
+    schemas: {
+      File: {
+        type: 'object',
+        properties: {
+          id: { type: 'string' },
+          filename: { type: 'string' },
+          mimetype: { type: 'string' },
+          size: { type: 'number' },
+          createdAt: { type: 'string', format: 'date-time' },
+          updatedAt: { type: 'string', format: 'date-time' },
+        },
+      },
+    },
+  },
   paths: {
     '/api/upload': {
       post: {