Skip to content

Commit b509673

Browse files
StijnusStijnus
committed
Update fix
more enhanced UI and more details what is fixed, ect
1 parent f091409 commit b509673

File tree

2 files changed

+383
-51
lines changed

2 files changed

+383
-51
lines changed

‎app/components/@settings/tabs/update/UpdateTab.tsx‎

Lines changed: 188 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { logStore } from '~/lib/stores/logs';
55
import { toast } from 'react-toastify';
66
import { Dialog, DialogRoot, DialogTitle, DialogDescription, DialogButton } from '~/components/ui/Dialog';
77
import { classNames } from '~/utils/classNames';
8+
import { Markdown } from '~/components/chat/Markdown';
89

910
interface UpdateProgress {
1011
stage: 'fetch' | 'pull' | 'install' | 'build' | 'complete';
@@ -20,6 +21,8 @@ interface UpdateProgress {
2021
currentCommit?: string;
2122
remoteCommit?: string;
2223
updateReady?: boolean;
24+
changelog?: string;
25+
compareUrl?: string;
2326
};
2427
}
2528

@@ -50,15 +53,52 @@ const UpdateProgressDisplay = ({ progress }: { progress: UpdateProgress }) => (
5053
{progress.details && (
5154
<div className="mt-2 text-sm text-gray-600">
5255
{progress.details.changedFiles && progress.details.changedFiles.length > 0 && (
53-
<div className="mt-2">
54-
<div className="font-medium">Changed Files:</div>
55-
<ul className="list-disc list-inside">
56-
{progress.details.changedFiles.map((file, index) => (
57-
<li key={index} className="ml-2">
58-
{file}
59-
</li>
60-
))}
61-
</ul>
56+
<div className="mt-4">
57+
<div className="font-medium mb-2">Changed Files:</div>
58+
<div className="space-y-2">
59+
{/* Group files by type */}
60+
{['Modified', 'Added', 'Deleted'].map((type) => {
61+
const filesOfType = progress.details?.changedFiles?.filter((file) => file.startsWith(type)) || [];
62+
63+
if (filesOfType.length === 0) {
64+
return null;
65+
}
66+
67+
return (
68+
<div key={type} className="space-y-1">
69+
<div
70+
className={classNames('text-sm font-medium', {
71+
'text-blue-500': type === 'Modified',
72+
'text-green-500': type === 'Added',
73+
'text-red-500': type === 'Deleted',
74+
})}
75+
>
76+
{type} ({filesOfType.length})
77+
</div>
78+
<div className="pl-4 space-y-1">
79+
{filesOfType.map((file, index) => {
80+
const fileName = file.split(': ')[1];
81+
return (
82+
<div key={index} className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
83+
<div
84+
className={classNames('w-4 h-4', {
85+
'i-ph:pencil-simple': type === 'Modified',
86+
'i-ph:plus': type === 'Added',
87+
'i-ph:trash': type === 'Deleted',
88+
'text-blue-500': type === 'Modified',
89+
'text-green-500': type === 'Added',
90+
'text-red-500': type === 'Deleted',
91+
})}
92+
/>
93+
<span className="font-mono text-xs">{fileName}</span>
94+
</div>
95+
);
96+
})}
97+
</div>
98+
</div>
99+
);
100+
})}
101+
</div>
62102
</div>
63103
)}
64104
{progress.details.totalSize && <div className="mt-1">Total size: {progress.details.totalSize}</div>}
@@ -410,19 +450,100 @@ const UpdateTab = () => {
410450
{error && <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">{error}</div>}
411451

412452
{/* Show update source information */}
413-
<div className="mt-4 text-sm text-bolt-elements-textSecondary">
414-
<p>
415-
Updates are fetched from: <span className="font-mono">stackblitz-labs/bolt.diy</span> (
416-
{isLatestBranch ? 'main' : 'stable'} branch)
417-
</p>
418-
{updateProgress?.details?.currentCommit && updateProgress?.details?.remoteCommit && (
419-
<p className="mt-1">
420-
Current version: <span className="font-mono">{updateProgress.details.currentCommit}</span>
421-
<span className="mx-2">→</span>
422-
Latest version: <span className="font-mono">{updateProgress.details.remoteCommit}</span>
423-
</p>
424-
)}
425-
</div>
453+
{updateProgress?.details?.currentCommit && updateProgress?.details?.remoteCommit && (
454+
<div className="mt-4 text-sm text-bolt-elements-textSecondary">
455+
<div className="flex items-center justify-between">
456+
<div>
457+
<p>
458+
Updates are fetched from: <span className="font-mono">stackblitz-labs/bolt.diy</span> (
459+
{isLatestBranch ? 'main' : 'stable'} branch)
460+
</p>
461+
<p className="mt-1">
462+
Current version: <span className="font-mono">{updateProgress.details.currentCommit}</span>
463+
<span className="mx-2">→</span>
464+
Latest version: <span className="font-mono">{updateProgress.details.remoteCommit}</span>
465+
</p>
466+
</div>
467+
{updateProgress?.details?.compareUrl && (
468+
<a
469+
href={updateProgress.details.compareUrl}
470+
target="_blank"
471+
rel="noopener noreferrer"
472+
className={classNames(
473+
'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
474+
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
475+
'hover:bg-purple-500/10 hover:text-purple-500',
476+
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
477+
'text-bolt-elements-textPrimary',
478+
'transition-colors duration-200',
479+
'w-fit',
480+
)}
481+
>
482+
<div className="i-ph:github-logo w-4 h-4" />
483+
View Changes on GitHub
484+
</a>
485+
)}
486+
</div>
487+
{updateProgress?.details?.additions !== undefined && updateProgress?.details?.deletions !== undefined && (
488+
<div className="mt-2 flex items-center gap-2">
489+
<div className="i-ph:git-diff text-purple-500 w-4 h-4" />
490+
Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
491+
<span className="text-red-600">-{updateProgress.details.deletions}</span>
492+
</div>
493+
)}
494+
</div>
495+
)}
496+
497+
{/* Add this before the changed files section */}
498+
{updateProgress?.details?.changelog && (
499+
<div className="mb-6">
500+
<div className="flex items-center gap-2 mb-2">
501+
<div className="i-ph:scroll text-purple-500 w-5 h-5" />
502+
<p className="font-medium">Changelog</p>
503+
</div>
504+
<div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-4 overflow-auto max-h-[300px]">
505+
<div className="prose dark:prose-invert prose-sm max-w-none">
506+
<Markdown>{updateProgress.details.changelog}</Markdown>
507+
</div>
508+
</div>
509+
</div>
510+
)}
511+
512+
{/* Add this in the update status card, after the commit info */}
513+
{updateProgress?.details?.compareUrl && (
514+
<div className="mt-4">
515+
<a
516+
href={updateProgress.details.compareUrl}
517+
target="_blank"
518+
rel="noopener noreferrer"
519+
className={classNames(
520+
'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
521+
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
522+
'hover:bg-purple-500/10 hover:text-purple-500',
523+
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
524+
'text-bolt-elements-textPrimary',
525+
'transition-colors duration-200',
526+
'w-fit',
527+
)}
528+
>
529+
<div className="i-ph:github-logo w-4 h-4" />
530+
View Changes on GitHub
531+
</a>
532+
</div>
533+
)}
534+
535+
{updateProgress?.details?.commitMessages && updateProgress.details.commitMessages.length > 0 && (
536+
<div className="mb-6">
537+
<p className="font-medium mb-2">Changes in this Update:</p>
538+
<div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-4 overflow-auto max-h-[400px]">
539+
<div className="prose dark:prose-invert prose-sm max-w-none">
540+
{updateProgress.details.commitMessages.map((section, index) => (
541+
<Markdown key={index}>{section}</Markdown>
542+
))}
543+
</div>
544+
</div>
545+
</div>
546+
)}
426547
</motion.div>
427548

428549
{/* Update dialog */}
@@ -435,40 +556,58 @@ const UpdateTab = () => {
435556
A new version is available from <span className="font-mono">stackblitz-labs/bolt.diy</span> (
436557
{isLatestBranch ? 'main' : 'stable'} branch)
437558
</p>
559+
560+
{updateProgress?.details?.compareUrl && (
561+
<div className="mb-6">
562+
<a
563+
href={updateProgress.details.compareUrl}
564+
target="_blank"
565+
rel="noopener noreferrer"
566+
className={classNames(
567+
'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
568+
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
569+
'hover:bg-purple-500/10 hover:text-purple-500',
570+
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
571+
'text-bolt-elements-textPrimary',
572+
'transition-colors duration-200',
573+
'w-fit',
574+
)}
575+
>
576+
<div className="i-ph:github-logo w-4 h-4" />
577+
View Changes on GitHub
578+
</a>
579+
</div>
580+
)}
581+
438582
{updateProgress?.details?.commitMessages && updateProgress.details.commitMessages.length > 0 && (
439-
<div className="mb-4">
583+
<div className="mb-6">
440584
<p className="font-medium mb-2">Commit Messages:</p>
441-
<ul className="list-disc list-inside space-y-1">
585+
<div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-3 space-y-2">
442586
{updateProgress.details.commitMessages.map((msg, index) => (
443-
<li key={index} className="text-sm text-bolt-elements-textSecondary">
444-
{msg}
445-
</li>
446-
))}
447-
</ul>
448-
</div>
449-
)}
450-
{updateProgress?.details?.changedFiles && (
451-
<div>
452-
<p className="font-medium mb-2">Changed Files:</p>
453-
<ul className="list-disc list-inside space-y-1">
454-
{updateProgress.details.changedFiles.map((file, index) => (
455-
<li key={index} className="text-sm text-bolt-elements-textSecondary">
456-
{file}
457-
</li>
587+
<div key={index} className="text-sm text-bolt-elements-textSecondary flex items-start gap-2">
588+
<div className="i-ph:git-commit text-purple-500 w-4 h-4 mt-0.5 flex-shrink-0" />
589+
<span>{msg}</span>
590+
</div>
458591
))}
459-
</ul>
592+
</div>
460593
</div>
461594
)}
595+
462596
{updateProgress?.details?.totalSize && (
463-
<p className="mt-4 text-sm text-bolt-elements-textSecondary">
464-
Total size: {updateProgress.details.totalSize}
465-
</p>
466-
)}
467-
{updateProgress?.details?.additions !== undefined && updateProgress?.details?.deletions !== undefined && (
468-
<p className="mt-2 text-sm text-bolt-elements-textSecondary">
469-
Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
470-
<span className="text-red-600">-{updateProgress.details.deletions}</span>
471-
</p>
597+
<div className="flex items-center gap-4 text-sm text-bolt-elements-textSecondary">
598+
<div className="flex items-center gap-2">
599+
<div className="i-ph:file text-purple-500 w-4 h-4" />
600+
Total size: {updateProgress.details.totalSize}
601+
</div>
602+
{updateProgress?.details?.additions !== undefined &&
603+
updateProgress?.details?.deletions !== undefined && (
604+
<div className="flex items-center gap-2">
605+
<div className="i-ph:git-diff text-purple-500 w-4 h-4" />
606+
Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
607+
<span className="text-red-600">-{updateProgress.details.deletions}</span>
608+
</div>
609+
)}
610+
</div>
472611
)}
473612
</div>
474613
</DialogDescription>

0 commit comments

Comments
 (0)