feat: add PushTable and PushRow components to display unpushed changes

frontend/src/components/settings/git/status/OutgoingChanges.jsx

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import IconButton from '@ui/IconButton';
 import ChangeTable from './ChangeTable';
+import PushTable from './PushTable';
 
 const OutgoingChanges = ({
     changes,
@@ -37,15 +38,45 @@ const OutgoingChanges = ({
     const totalOutgoingChanges = changes.length;
     const totalUnpushedCommits = unpushedFiles?.length || 0;
 
+    // If we only have committed changes waiting to be pushed
+    if (totalOutgoingChanges === 0 && hasUnpushedCommits) {
+        console.log('Unpushed Files:', unpushedFiles);
+
+        return (
+            <div className='mb-4'>
+                <div className='flex items-center justify-between mb-2'>
+                    <h4 className='text-sm font-medium text-gray-200 flex items-center'>
+                        <ArrowUpFromLine
+                            className='text-blue-400 mr-2'
+                            size={16}
+                        />
+                        <span>Ready to Push ({totalUnpushedCommits})</span>
+                    </h4>
+                    <div className='space-x-2 flex'>
+                        <IconButton
+                            onClick={onPushSelected}
+                            disabled={false}
+                            loading={loadingAction === 'push_changes'}
+                            icon={<Upload />}
+                            tooltip='Push Changes'
+                            className='bg-gray-700'
+                        />
+                    </div>
+                </div>
+                <div className='overflow-hidden'>
+                    <PushTable changes={unpushedFiles} />
+                </div>
+            </div>
+        );
+    }
+
+    // Regular view for uncommitted changes
     return (
         <div className='mb-4'>
             <div className='flex items-center justify-between mb-2'>
                 <h4 className='text-sm font-medium text-gray-200 flex items-center'>
                     <ArrowUpFromLine className='text-blue-400 mr-2' size={16} />
-                    <span>
-                        Outgoing Changes (
-                        {totalOutgoingChanges + totalUnpushedCommits})
-                    </span>
+                    <span>Outgoing Changes ({totalOutgoingChanges})</span>
                 </h4>
                 <div className='space-x-2 flex'>
                     <IconButton
@@ -83,33 +114,6 @@ const OutgoingChanges = ({
                         className='bg-gray-700'
                         disabledTooltip={getButtonTooltips.commit()}
                     />
-                    {hasUnpushedCommits && (
-                        <IconButton
-                            onClick={onPushSelected}
-                            disabled={!hasUnpushedCommits}
-                            loading={loadingAction === 'push_changes'}
-                            icon={<Upload />}
-                            tooltip={
-                                <div>
-                                    <div>Push Changes</div>
-                                    {unpushedFiles?.length > 0 && (
-                                        <div className='mt-1 text-xs'>
-                                            {unpushedFiles.map(
-                                                (file, index) => (
-                                                    <div key={index}>
-                                                        • {file.type}:{' '}
-                                                        {file.name}
-                                                    </div>
-                                                )
-                                            )}
-                                        </div>
-                                    )}
-                                </div>
-                            }
-                            className='bg-gray-700'
-                            disabledTooltip='No changes to push'
-                        />
-                    )}
                     <IconButton
                         onClick={() => onRevertSelected(selectedChanges)}
                         disabled={selectedChanges.length === 0}

frontend/src/components/settings/git/status/PushRow.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {GitCommit, Code, FileText, Settings, File} from 'lucide-react';
+
+const PushRow = ({change}) => {
+    console.log('Push Row Change:', change);
+
+    const getTypeIcon = type => {
+        switch (type) {
+            case 'Regex Pattern':
+                return <Code className='text-blue-400' size={16} />;
+            case 'Custom Format':
+                return <FileText className='text-green-400' size={16} />;
+            case 'Quality Profile':
+                return <Settings className='text-purple-400' size={16} />;
+            default:
+                return <File className='text-gray-400' size={16} />;
+        }
+    };
+
+    return (
+        <tr className='bg-gray-900'>
+            <td className='py-2 px-4 text-gray-300'>
+                <div className='flex items-center'>
+                    <GitCommit className='text-blue-400' size={16} />
+                    <span className='ml-2'>Committed</span>
+                </div>
+            </td>
+            <td className='py-2 px-4 text-gray-300'>
+                <div className='flex items-center'>
+                    {getTypeIcon(change.type)}
+                    <span className='ml-2'>{change.type}</span>
+                </div>
+            </td>
+            <td className='py-2 px-4 text-gray-300'>
+                <span>{change.name.replace('.yml', '')}</span>
+            </td>
+        </tr>
+    );
+};
+
+export default PushRow;

frontend/src/components/settings/git/status/PushTable.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PushRow from './PushRow';
+
+const PushTable = ({changes}) => (
+    <div className='rounded-lg border border-gray-700 overflow-hidden'>
+        <table className='w-full'>
+            <thead>
+                <tr className='bg-gray-800 border-b border-gray-700'>
+                    <th className='py-2 px-4 text-left text-gray-400 font-medium w-1/4'>
+                        Status
+                    </th>
+                    <th className='py-2 px-4 text-left text-gray-400 font-medium w-1/4'>
+                        Type
+                    </th>
+                    <th className='py-2 px-4 text-left text-gray-400 font-medium w-2/4'>
+                        Name
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {changes.map((change, index) => (
+                    <PushRow key={`push-${index}`} change={change} />
+                ))}
+            </tbody>
+        </table>
+    </div>
+);
+
+export default PushTable;