refactor: improve VersionUpgradeModal props and extract ReleaseInfo type

Using useVersionCheck hook in 2 places caused github requests to be made twice, which is not ideal.

src/App.jsx

@@ -782,7 +782,13 @@ function AppContent() {
       />
 
       {/* Version Upgrade Modal */}
-      <VersionUpgradeModal showVersionModal={showVersionModal} setShowVersionModal={setShowVersionModal}/>
+      <VersionUpgradeModal
+        isOpen={showVersionModal}
+        onClose={() => setShowVersionModal(false)}
+        releaseInfo={releaseInfo}
+        currentVersion={currentVersion}
+        latestVersion={latestVersion}
+      />
     </div>
   );
 }

src/components/modals/VersionUpgradeModal.tsx

@@ -1,21 +1,29 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { authenticatedFetch } from "../../utils/api";
-import { useVersionCheck } from "../../hooks/useVersionCheck";
+import { ReleaseInfo } from "../../types/sharedTypes";
 
 interface VersionUpgradeModalProps {
-    showVersionModal: boolean;
+    isOpen: boolean;
-    setShowVersionModal: (show: boolean) => void;
+    onClose: () => void;
+    releaseInfo: ReleaseInfo | null;
+    currentVersion: string;
+    latestVersion: string | null;
 }
 
-export default function VersionUpgradeModal({ showVersionModal, setShowVersionModal }: VersionUpgradeModalProps) {
+export default function VersionUpgradeModal({
+    isOpen,
+    onClose,
+    releaseInfo,
+    currentVersion,
+    latestVersion
+}: VersionUpgradeModalProps) {
     const { t } = useTranslation('common');
     const [isUpdating, setIsUpdating] = useState(false);
     const [updateOutput, setUpdateOutput] = useState('');
     const [updateError, setUpdateError] = useState('');
-    const { latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
 
-    if (!showVersionModal) return null;
+    if (!isOpen) return null;
 
     const handleUpdateNow = async () => {
         setIsUpdating(true);
@@ -51,7 +59,7 @@ export default function VersionUpgradeModal({ showVersionModal, setShowVersionMo
             {/* Backdrop */}
             <button
                 className="fixed inset-0 bg-black/50 backdrop-blur-sm"
-                onClick={() => setShowVersionModal(false)}
+                onClick={onClose}
                 aria-label={t('versionUpdate.ariaLabels.closeModal')}
             />
 
@@ -73,7 +81,7 @@ export default function VersionUpgradeModal({ showVersionModal, setShowVersionMo
                         </div>
                     </div>
                     <button
-                        onClick={() => setShowVersionModal(false)}
+                        onClick={onClose}
                         className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
                     >
                         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -149,7 +157,7 @@ export default function VersionUpgradeModal({ showVersionModal, setShowVersionMo
                 {/* Actions */}
                 <div className="flex gap-2 pt-2">
                     <button
-                        onClick={() => setShowVersionModal(false)}
+                        onClick={onClose}
                         className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
                     >
                         {updateOutput ? t('versionUpdate.buttons.close') : t('versionUpdate.buttons.later')}

src/hooks/useVersionCheck.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { version } from '../../package.json';
+import { ReleaseInfo } from '../types/sharedTypes';
 
 /**
  * Compare two semantic version strings
@@ -20,13 +21,6 @@ const compareVersions = (v1: string, v2: string) => {
   return 0;
 };
 
-type ReleaseInfo = {
-  title: string;
-  body: string;
-  htmlUrl: string;
-  publishedAt: string;
-};
-
 export const useVersionCheck = (owner: string, repo: string) => {
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const [latestVersion, setLatestVersion] = useState<string | null>(null);

src/types/sharedTypes.ts

@@ -0,0 +1,6 @@
+export type ReleaseInfo = {
+  title: string;
+  body: string;
+  htmlUrl: string;
+  publishedAt: string;
+};