Skip to content

Updated "Update toast" using toast.pen #1271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cbum-dev wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Updated "Update toast" using toast.pen #1271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
550fbd4
chore(update): address feedback and remove design file\n\n- Remove to…
cbum-dev Feb 14, 2026
726110e
style(update): tweak toast text styles\n\n- Remove underline from 'Cl…
cbum-dev Feb 14, 2026
790ce02
finalised toast
cbum-dev Feb 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 124 additions & 35 deletions src/components/update/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,48 @@

import { Progress } from '@/components/ui/progress';
import type { ProgressInfo } from 'electron-updater';
import { Package, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

interface UpdateToastProps {
toastId: string | number;
children: React.ReactNode;
onClose?: () => void;
}

const UpdateToastShell = ({ toastId, children, onClose }: UpdateToastProps) => {
const { t } = useTranslation();

return (
<div className="w-[275px] overflow-hidden rounded-xl border border-border-secondary bg-fill-default shadow-perfect">
<div className="flex items-center justify-between bg-surface-primary px-3 py-2">
<div className="flex items-center gap-2">
<Package className="h-4 w-4 text-icon-primary" strokeWidth={1.33} />
<span
className="font-bold text-text-heading"
style={{ fontSize: '13px', lineHeight: '20px' }}
>
{t('update.update-eigent')}
</span>
</div>
<button
className="flex h-4 w-4 items-center justify-center rounded text-icon-secondary transition-colors hover:text-icon-primary"
onClick={() => {
onClose?.();
toast.dismiss(toastId);
}}
>
<X className="h-[16px] w-[16px]" strokeWidth={1.33} />
</button>
</div>
{children}
</div>
);
};

// ── Main component ──────────────────────────────────────────────────
const Update = () => {
const [downloadProgress, setDownloadProgress] = useState<number>(0);
const [isDownloading, setIsDownloading] = useState<boolean>(false);
Expand All @@ -30,18 +68,39 @@ const Update = () => {
const onUpdateCanAvailable = useCallback(
(_event: Electron.IpcRendererEvent, info: VersionInfo) => {
if (info.update) {
toast(t('update.new-version-available'), {
description: `v${info.version} → v${info.newVersion}`,
action: {
label: t('update.download'),
onClick: () => {
setIsDownloading(true);
setDownloadProgress(0);
window.ipcRenderer.invoke('start-download');
},
},
duration: Infinity,
});
toast.custom(
(toastId) => (
<UpdateToastShell toastId={toastId}>
<div className="px-3 py-1.5">
<p
className="font-medium text-text-label"
style={{ fontSize: '10px', lineHeight: '16px' }}
>
{t('update.new-version-available')}
</p>
<p
className="mt-0.5 text-text-disabled"
style={{ fontSize: '10px', lineHeight: '16px' }}
>
v{info.version} → v{info.newVersion}
</p>
<button
className="mt-2 w-full rounded-md bg-fill-fill-primary px-3 py-1.5 font-medium text-text-on-action transition-colors hover:bg-fill-fill-primary-hover"
style={{ fontSize: '10px' }}
onClick={() => {
setIsDownloading(true);
setDownloadProgress(0);
window.ipcRenderer.invoke('start-download');
toast.dismiss(toastId);
}}
>
{t('update.download')}
</button>
</div>
</UpdateToastShell>
),
{ id: 'update-available', duration: Infinity }
);
}
},
[t]
Expand All @@ -58,7 +117,6 @@ const Update = () => {

const onDownloadProgress = useCallback(
(_event: Electron.IpcRendererEvent, progress: ProgressInfo) => {
console.log('Download progress received:', progress);
setDownloadProgress(progress.percent ?? 0);
},
[]
Expand All @@ -68,37 +126,68 @@ const Update = () => {
useEffect(() => {
if (isDownloading) {
toast.custom(
(_toastId) => (
<div className="w-[300px] rounded-lg bg-white-100% p-4 shadow-lg">
<div className="mb-2 text-sm font-medium">
{t('update.downloading-update')}
(toastId) => (
<UpdateToastShell
toastId={toastId}
onClose={() => {
setIsDownloading(false);
Copy link
Collaborator

@Zephyroam Zephyroam Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the downloading is not actually cancelled. But I guess the original implementation was not doing anything as well, right?

Copy link
Contributor Author

@cbum-dev cbum-dev Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah for now it's just hiding the toast. Any endpoint present in the backend to stop the update?

}}
>
<div
className="flex cursor-pointer items-center gap-1 px-3 py-1.5"
onClick={() => {
setIsDownloading(false);
toast.dismiss(toastId);
}}
>
<span
className="font-medium text-text-label"
style={{ fontSize: '10px', lineHeight: '16px' }}
>
{t('update.downloading-in-progress')}
</span>
<span
className="font-medium text-text-primary"
style={{ fontSize: '10px', lineHeight: '16px' }}
>
{t('update.click-to-stop')}
</span>
</div>
<Progress value={downloadProgress} className="mb-2" />
<div className="text-xs text-gray-500">
{Math.round(downloadProgress)}% {t('update.complete')}
</div>
</div>
<Progress value={downloadProgress} className="h-1 rounded-none" />
</UpdateToastShell>
),
{
id: 'download-progress',
duration: Infinity,
}
{ id: 'download-progress', duration: Infinity }
);
}
}, [downloadProgress, isDownloading, t]);

const onUpdateDownloaded = useCallback(
(_event: Electron.IpcRendererEvent) => {
toast.dismiss('download-progress');
setIsDownloading(false);
toast.success(t('update.download-completed'), {
description: t('update.click-to-install-update'),
action: {
label: t('update.install'),
onClick: () => window.ipcRenderer.invoke('quit-and-install'),
},
duration: Infinity,
});
toast.dismiss('download-progress');

toast.custom(
(toastId) => (
<UpdateToastShell toastId={toastId}>
<div className="flex items-center gap-1 px-3 py-1.5">
<span
className="font-medium text-text-label"
style={{ fontSize: '10px', lineHeight: '16px' }}
>
{t('update.ready-to-install')}
</span>
<span
className="cursor-pointer font-medium text-text-primary decoration-text-label hover:decoration-text-primary"
style={{ fontSize: '10px', lineHeight: '16px' }}
onClick={() => window.ipcRenderer.invoke('quit-and-install')}
>
{t('update.click-to-restart')}
</span>
</div>
</UpdateToastShell>
),
{ id: 'update-downloaded', duration: Infinity }
);
},
[t]
);
Expand Down
7 changes: 6 additions & 1 deletion src/i18n/locales/en-us/update.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,10 @@
"complete": "Complete",
"download-completed": "Download completed",
"click-to-install-update": "Click to install update",
"install": "Install"
"install": "Install",
"update-eigent": "Update Eigent",
"downloading-in-progress": "Downloading in progress.",
"click-to-stop": "Click to stop.",
"ready-to-install": "Ready to install.",
"click-to-restart": "Click to restart."
}