From bca97a5284953cd2fc65761f55b8393aa3442567 Mon Sep 17 00:00:00 2001
From: simos <simosmik@gmail.com>
Date: Tue, 8 Jul 2025 15:14:12 +0000
Subject: [PATCH] Update GitPanel

---
 src/components/GitPanel.jsx | 347 ++++++++++++++++++------------------
 1 file changed, 177 insertions(+), 170 deletions(-)

diff --git a/src/components/GitPanel.jsx b/src/components/GitPanel.jsx
index 1c9b6cc..6f7c1d5 100755
--- a/src/components/GitPanel.jsx
+++ b/src/components/GitPanel.jsx
@@ -506,189 +506,196 @@ function GitPanel({ selectedProject, isMobile }) {
         </button>
       </div>
 
-      {/* Tab Navigation */}
-      <div className="flex border-b border-gray-200 dark:border-gray-700">
-        <button
-          onClick={() => setActiveView('changes')}
-          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-            activeView === 'changes'
-              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-          }`}
-        >
-          <div className="flex items-center justify-center gap-2">
-            <FileText className="w-4 h-4" />
-            <span>Changes</span>
+      {/* Git Repository Not Found Message */}
+      {gitStatus?.error ? (
+        <div className="flex-1 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 px-6 py-12">
+          <GitBranch className="w-20 h-20 mb-6 opacity-30" />
+          <h3 className="text-xl font-medium mb-3 text-center">{gitStatus.error}</h3>
+          {gitStatus.details && (
+            <p className="text-sm text-center leading-relaxed mb-6 max-w-md">{gitStatus.details}</p>
+          )}
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 max-w-md">
+            <p className="text-sm text-blue-700 dark:text-blue-300 text-center">
+              <strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded font-mono text-xs">git init</code> in your project directory to initialize git source control.
+            </p>
           </div>
-        </button>
-        <button
-          onClick={() => setActiveView('history')}
-          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-            activeView === 'history'
-              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
-              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-          }`}
-        >
-          <div className="flex items-center justify-center gap-2">
-            <History className="w-4 h-4" />
-            <span>History</span>
-          </div>
-        </button>
-      </div>
-
-      {/* Changes View */}
-      {activeView === 'changes' && (
+        </div>
+      ) : (
         <>
-          {/* Commit Message Input */}
-          <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-            <div className="relative">
-              <textarea
-                ref={textareaRef}
-                value={commitMessage}
-                onChange={(e) => setCommitMessage(e.target.value)}
-                placeholder="Message (Ctrl+Enter to commit)"
-                className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
-                rows="3"
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                    handleCommit();
-                  }
-                }}
-              />
-              <div className="absolute right-2 top-2 flex gap-1">
-                <button
-                  onClick={generateCommitMessage}
-                  disabled={selectedFiles.size === 0 || isGeneratingMessage}
-                  className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                  title="Generate commit message"
-                >
-                  {isGeneratingMessage ? (
-                    <RefreshCw className="w-4 h-4 animate-spin" />
-                  ) : (
-                    <Sparkles className="w-4 h-4" />
-                  )}
-                </button>
-                <div style={{ display: 'none' }}>
-                  <MicButton
-                    onTranscript={(transcript) => setCommitMessage(transcript)}
-                    mode="default"
-                    className="p-1.5"
+          {/* Tab Navigation - Only show when git is available */}
+          <div className="flex border-b border-gray-200 dark:border-gray-700">
+            <button
+              onClick={() => setActiveView('changes')}
+              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+                activeView === 'changes'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+              }`}
+            >
+              <div className="flex items-center justify-center gap-2">
+                <FileText className="w-4 h-4" />
+                <span>Changes</span>
+              </div>
+            </button>
+            <button
+              onClick={() => setActiveView('history')}
+              className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+                activeView === 'history'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+              }`}
+            >
+              <div className="flex items-center justify-center gap-2">
+                <History className="w-4 h-4" />
+                <span>History</span>
+              </div>
+            </button>
+          </div>
+
+          {/* Changes View */}
+          {activeView === 'changes' && (
+            <>
+              {/* Commit Message Input */}
+              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                <div className="relative">
+                  <textarea
+                    ref={textareaRef}
+                    value={commitMessage}
+                    onChange={(e) => setCommitMessage(e.target.value)}
+                    placeholder="Message (Ctrl+Enter to commit)"
+                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
+                    rows="3"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                        handleCommit();
+                      }
+                    }}
                   />
+                  <div className="absolute right-2 top-2 flex gap-1">
+                    <button
+                      onClick={generateCommitMessage}
+                      disabled={selectedFiles.size === 0 || isGeneratingMessage}
+                      className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Generate commit message"
+                    >
+                      {isGeneratingMessage ? (
+                        <RefreshCw className="w-4 h-4 animate-spin" />
+                      ) : (
+                        <Sparkles className="w-4 h-4" />
+                      )}
+                    </button>
+                    <div style={{ display: 'none' }}>
+                      <MicButton
+                        onTranscript={(transcript) => setCommitMessage(transcript)}
+                        mode="default"
+                        className="p-1.5"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between mt-2">
+                  <span className="text-xs text-gray-500">
+                    {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
+                  </span>
+                  <button
+                    onClick={handleCommit}
+                    disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
+                    className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
+                  >
+                    <Check className="w-3 h-3" />
+                    <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
+                  </button>
                 </div>
               </div>
-            </div>
-            <div className="flex items-center justify-between mt-2">
-              <span className="text-xs text-gray-500">
-                {selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
+            </>
+          )}
+
+          {/* File Selection Controls - Only show in changes view and when git is working */}
+          {activeView === 'changes' && gitStatus && !gitStatus.error && (
+            <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+              <span className="text-xs text-gray-600 dark:text-gray-400">
+                {selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} files selected
               </span>
-              <button
-                onClick={handleCommit}
-                disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
-                className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
-              >
-                <Check className="w-3 h-3" />
-                <span>{isCommitting ? 'Committing...' : 'Commit'}</span>
-              </button>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => {
+                    const allFiles = new Set([
+                      ...(gitStatus?.modified || []),
+                      ...(gitStatus?.added || []),
+                      ...(gitStatus?.deleted || []),
+                      ...(gitStatus?.untracked || [])
+                    ]);
+                    setSelectedFiles(allFiles);
+                  }}
+                  className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                >
+                  Select All
+                </button>
+                <span className="text-gray-300 dark:text-gray-600">|</span>
+                <button
+                  onClick={() => setSelectedFiles(new Set())}
+                  className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                >
+                  Deselect All
+                </button>
+              </div>
             </div>
-          </div>
+          )}
+
+          {/* Status Legend Toggle */}
+          {!gitStatus?.error && (
+            <div className="border-b border-gray-200 dark:border-gray-700">
+              <button
+                onClick={() => setShowLegend(!showLegend)}
+                className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
+              >
+                <Info className="w-3 h-3" />
+                <span>File Status Guide</span>
+                {showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+              </button>
+              
+              {showLegend && (
+                <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
+                  <div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
+                        M
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
+                        A
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Added</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
+                        D
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
+                        U
+                      </span>
+                      <span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </>
       )}
 
-      {/* File Selection Controls - Only show in changes view and when git is working */}
-      {activeView === 'changes' && gitStatus && !gitStatus.error && (
-        <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            {selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} files selected
-          </span>
-          <div className="flex gap-2">
-            <button
-              onClick={() => {
-                const allFiles = new Set([
-                  ...(gitStatus?.modified || []),
-                  ...(gitStatus?.added || []),
-                  ...(gitStatus?.deleted || []),
-                  ...(gitStatus?.untracked || [])
-                ]);
-                setSelectedFiles(allFiles);
-              }}
-              className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
-            >
-              Select All
-            </button>
-            <span className="text-gray-300 dark:text-gray-600">|</span>
-            <button
-              onClick={() => setSelectedFiles(new Set())}
-              className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
-            >
-              Deselect All
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Status Legend Toggle */}
-      <div className="border-b border-gray-200 dark:border-gray-700">
-        <button
-          onClick={() => setShowLegend(!showLegend)}
-          className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
-        >
-          <Info className="w-3 h-3" />
-          <span>File Status Guide</span>
-          {showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
-        </button>
-        
-        {showLegend && (
-          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
-            <div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
-                  M
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
-                  A
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Added</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
-                  D
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
-                  U
-                </span>
-                <span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* File List - Changes View */}
-      {activeView === 'changes' && (
+      {/* File List - Changes View - Only show when git is available */}
+      {activeView === 'changes' && !gitStatus?.error && (
         <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
           {isLoading ? (
             <div className="flex items-center justify-center h-32">
               <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
             </div>
-          ) : gitStatus?.error ? (
-            <div className="flex flex-col items-center justify-center h-48 text-gray-500 dark:text-gray-400 px-6">
-              <GitBranch className="w-16 h-16 mb-4 opacity-30" />
-              <p className="text-lg font-medium mb-2 text-center">{gitStatus.error}</p>
-              {gitStatus.details && (
-                <p className="text-sm text-center leading-relaxed">{gitStatus.details}</p>
-              )}
-              <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-                <p className="text-xs text-blue-700 dark:text-blue-300 text-center">
-                  <strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">git init</code> in your project directory to initialize git source control.
-                </p>
-              </div>
-            </div>
           ) : !gitStatus || (!gitStatus.modified?.length && !gitStatus.added?.length && !gitStatus.deleted?.length && !gitStatus.untracked?.length) ? (
             <div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
               <GitCommit className="w-12 h-12 mb-2 opacity-50" />
@@ -705,8 +712,8 @@ function GitPanel({ selectedProject, isMobile }) {
         </div>
       )}
 
-      {/* History View */}
-      {activeView === 'history' && (
+      {/* History View - Only show when git is available */}
+      {activeView === 'history' && !gitStatus?.error && (
         <div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
           {isLoading ? (
             <div className="flex items-center justify-center h-32">