feat: Dynamically load Google API client, remove gapi-script dependency, and mark sync settings as client-side.

components/settings/SyncSettings.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useSync } from '@/lib/hooks/useSync';
 import { Icons } from '@/components/ui/Icon';
 import { Button } from '@/components/ui/Button';

lib/hooks/useGoogleDrive.ts

@@ -1,10 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
-import { gapi } from 'gapi-script';
 
 const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];
 const SCOPES = 'https://www.googleapis.com/auth/drive.appdata';
 const APP_DATA_FILENAME = 'kvideo_data.json';
 
+// Type declarations for gapi
+declare const gapi: any;
+
 export interface GoogleUser {
     name: string;
     email: string;
@@ -24,9 +26,23 @@ export function useGoogleDrive() {
     const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
+        // Only run on client side
+        if (typeof window === 'undefined') return;
+
         const initClient = async () => {
             try {
-                await new Promise<void>((resolve, reject) => {
+                // Dynamically load gapi script
+                if (!window.gapi) {
+                    await new Promise<void>((resolve, reject) => {
+                        const script = document.createElement('script');
+                        script.src = 'https://apis.google.com/js/api.js';
+                        script.onload = () => resolve();
+                        script.onerror = () => reject(new Error('Failed to load gapi script'));
+                        document.body.appendChild(script);
+                    });
+                }
+
+                await new Promise<void>((resolve) => {
                     gapi.load('client:auth2', () => {
                         resolve();
                     });

package-lock.json

@@ -23,6 +23,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/gapi.auth2": "^0.0.61",
         "@types/node": "^24",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1620,6 +1621,16 @@
       "integrity": "sha512-/ZsLuq6BffMgbKMtZyDZ8vwQvTyKhKQ1G2K6VyWCgtHHhfSSXbk4+4JwImZiTjWNXfI2q1ZStAwFFHSkNoTkHA==",
       "license": "MIT"
     },
+    "node_modules/@types/gapi.auth2": {
+      "version": "0.0.61",
+      "resolved": "https://registry.npmjs.org/@types/gapi.auth2/-/gapi.auth2-0.0.61.tgz",
+      "integrity": "sha512-cn+omiRoE/LTxZncnVl1QhcLggOT0sJ8Yz9RXIsw5R2zLyRf+0o6kaZzJ/Gr3Sxz6i7J/+PbXAF8yeZipCaiWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/gapi": "*"
+      }
+    },
     "node_modules/@types/gapi.client": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/gapi.client/-/gapi.client-1.0.8.tgz",

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/gapi.auth2": "^0.0.61",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",