From e2e77f20baad290d0ecd0badc978562b2cd59a33 Mon Sep 17 00:00:00 2001
From: Haileyesus <something@gmail.com>
Date: Thu, 5 Feb 2026 22:19:15 +0300
Subject: [PATCH] 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                                   |  8 +++++-
 src/components/modals/VersionUpgradeModal.tsx | 28 ++++++++++++-------
 src/hooks/useVersionCheck.ts                  |  8 +-----
 src/types/sharedTypes.ts                      |  6 ++++
 4 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 src/types/sharedTypes.ts

diff --git a/src/App.jsx b/src/App.jsx
index 2be8595..0d743be 100644
--- a/src/App.jsx
+++ b/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>
   );
 }
diff --git a/src/components/modals/VersionUpgradeModal.tsx b/src/components/modals/VersionUpgradeModal.tsx
index bb7e459..4b6d644 100644
--- a/src/components/modals/VersionUpgradeModal.tsx
+++ b/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;
-    setShowVersionModal: (show: boolean) => void;
+    isOpen: boolean;
+    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')}
@@ -203,4 +211,4 @@ const cleanChangelog = (body: string) => {
         .replace(/\n\s*\n\s*\n/g, '\n\n')
         // Trim whitespace
         .trim();
-};
\ No newline at end of file
+};
diff --git a/src/hooks/useVersionCheck.ts b/src/hooks/useVersionCheck.ts
index c0ef0ee..9ce8e92 100644
--- a/src/hooks/useVersionCheck.ts
+++ b/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);
diff --git a/src/types/sharedTypes.ts b/src/types/sharedTypes.ts
new file mode 100644
index 0000000..71be7a7
--- /dev/null
+++ b/src/types/sharedTypes.ts
@@ -0,0 +1,6 @@
+export type ReleaseInfo = {
+  title: string;
+  body: string;
+  htmlUrl: string;
+  publishedAt: string;
+};
\ No newline at end of file