v0.3.3 — minimize the transfer dialog to a floating chip (keeps running)

- Submit/Get-Latest progress dialog can be minimized to a small bottom-right chip (like the .sln build chip). Shows op + N/total + % + a thin progress bar; click to expand. Submit keeps a Cancel button on the chip. - The transfer runs in the backend regardless, so minimizing never interrupts it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-08 23:08:21 +03:00
parent 3954082e8d
commit 1c1153eee9
7 changed files with 68 additions and 13 deletions
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "exbyte-depot",
  "private": true,
-  "version": "0.3.2",
+  "version": "0.3.3",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@ -966,7 +966,7 @@ dependencies = [

 [[package]]
 name = "exbyte-depot"
-version = "0.3.2"
+version = "0.3.3"
 dependencies = [
 "encoding_rs",
 "serde",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -1,6 +1,6 @@
 [package]
 name = "exbyte-depot"
-version = "0.3.2"
+version = "0.3.3"
 description = "Exbyte Depot — native Perforce client by Exbyte Studios"
 authors = ["Exbyte Studios"]
 edition = "2021"
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -2,7 +2,7 @@
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Exbyte Depot",
  "mainBinaryName": "Exbyte Depot",
-  "version": "0.3.2",
+  "version": "0.3.3",
  "identifier": "com.bonchellon.exbyte-depot",
  "build": {
    "beforeDevCommand": "npm run dev",
--- a/src/App.css
+++ b/src/App.css
@ -448,10 +448,31 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .xfer-ttl b{font-size:14.5px}
 .xfer-ttl span{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
 .xfer-file{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.xfer-cancel{margin-left:auto;flex:0 0 auto;align-self:flex-start;font-size:11.5px;font-weight:600;cursor:pointer;
+.xfer-actions{margin-left:auto;flex:0 0 auto;align-self:flex-start;display:flex;align-items:center;gap:8px}
+.xfer-cancel{flex:0 0 auto;font-size:11.5px;font-weight:600;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:5px 11px;transition:.15s}
 .xfer-cancel:hover:not(:disabled){color:#fff;background:var(--danger,#e5484d);border-color:var(--danger,#e5484d)}
 .xfer-cancel:disabled{opacity:.55;cursor:default}
+.xfer-min{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;
+  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:8px;transition:.15s}
+.xfer-min:hover{color:var(--txt);border-color:var(--accent)}
+.xfer-min svg{width:15px;height:15px}
+/* minimized transfer chip (bottom-right; sits above the build chip if both show) */
+.xferchip{position:fixed;right:18px;bottom:18px;z-index:361;display:flex;align-items:center;gap:11px;
+  padding:9px 11px 9px 12px;border-radius:12px;cursor:pointer;background:var(--elevated);border:1px solid var(--border);
+  box-shadow:0 16px 40px -14px rgba(0,0,0,.55);animation:updin .25s ease;min-width:210px;max-width:320px;overflow:hidden}
+.xferchip.up{border-color:rgba(124,110,246,.5)}
+.xferchip.down{border-color:rgba(62,207,142,.5)}
+.xferchip:hover{filter:brightness(1.06)}
+.xc-ic{flex:0 0 auto;display:grid;place-items:center}
+.xc-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
+.xc-txt b{font-size:12.5px;font-weight:600}
+.xc-txt span{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.xc-cancel{flex:0 0 auto;width:22px;height:22px;border:none;background:none;color:var(--faint);border-radius:6px;cursor:pointer;display:grid;place-items:center}
+.xc-cancel:hover:not(:disabled){background:var(--danger,#e5484d);color:#fff}
+.xc-cancel:disabled{opacity:.5;cursor:default}
+.xc-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:transparent}
+.xc-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent-deep));transition:width .25s ease}
 .xfer-bar{margin-top:14px;height:6px;border-radius:4px;background:var(--panel-3);overflow:hidden;position:relative}
 .xfer-bar span{position:absolute;top:0;left:-35%;width:35%;height:100%;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:shim 1.1s ease-in-out infinite}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -384,6 +384,7 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
  const [pending, setPending] = useState<Change[]>([]); // committed-but-not-pushed changelists
  const [transfer, setTransfer] = useState<Transfer | null>(null); // live sync/submit file transfer
  const [commitProg, setCommitProg] = useState<{ count: number; total: number } | null>(null); // live commit (reopen) progress
+  const [xferMin, setXferMin] = useState(false); // transfer dialog collapsed to a floating chip (keeps running)
  const [showXfer, setShowXfer] = useState(false); // delayed so fast ops don't flash a dialog
  const [uproject, setUproject] = useState(""); // local .uproject path when the scope is a UE project
  const [slnPath, setSlnPath] = useState("");   // local .sln path in the scope (for building)
@ -626,7 +627,7 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
    let un: (() => void) | undefined; let dead = false;
    listen<{ op: "sync" | "submit"; count: number; total?: number; file?: string; done: boolean; cancelled?: boolean }>("p4-transfer", (e) => {
      const p = e.payload;
-      if (p.done) { setTransfer(null); return; }
+      if (p.done) { setTransfer(null); setXferMin(false); return; }
      setTransfer((prev) => {
        const log = prev ? prev.log : [];
        const next = p.file && (log.length === 0 || log[log.length - 1] !== p.file)
@ -1687,7 +1688,8 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
      {resolveOpen && <ResolveModal files={needResolve} onResolve={doResolve} onClose={() => setResolveOpen(false)} />}
      {ask && <ConfirmModal {...ask} onClose={(v) => { ask.resolve(v); setAsk(null); }} />}
      {prompt && <TextPrompt title={prompt.title} label={prompt.label} value={prompt.value} onSave={prompt.onSave} onClose={() => setPrompt(null)} />}
-      {showXfer && transfer && <TransferDialog transfer={transfer} onCancel={cancelTransfer} />}
+      {showXfer && transfer && !xferMin && <TransferDialog transfer={transfer} onCancel={cancelTransfer} onMinimize={() => setXferMin(true)} />}
+      {showXfer && transfer && xferMin && <TransferChip transfer={transfer} onExpand={() => setXferMin(false)} onCancel={cancelTransfer} />}
      {buildPick && <BuildPicker onPick={buildSln} onClose={() => setBuildPick(false)} />}
      {buildOpen && !buildMin && <BuildOverlay lines={buildLog} building={building} ok={buildOk} sln={slnPath} onMinimize={() => setBuildMin(true)} onClose={() => setBuildOpen(false)} />}
      {buildOpen && buildMin && <BuildChip building={building} ok={buildOk} onExpand={() => setBuildMin(false)} onClose={() => setBuildOpen(false)} />}
@ -2123,7 +2125,7 @@ function UnrealTab({ uproject }: { uproject: string }) {
 }

 /* ---------------- server transfer progress (P4V-style) ---------------- */
-function TransferDialog({ transfer, onCancel }: { transfer: Transfer; onCancel: () => void }) {
+function TransferDialog({ transfer, onCancel, onMinimize }: { transfer: Transfer; onCancel: () => void; onMinimize: () => void }) {
  const up = transfer.op === "submit";
  const total = transfer.total || 0;
  const pct = total > 0 ? Math.min(100, Math.round((transfer.count / total) * 100)) : 0;
@ -2144,12 +2146,17 @@ function TransferDialog({ transfer, onCancel }: { transfer: Transfer; onCancel:
              ? `${transfer.count.toLocaleString()} / ${total.toLocaleString()} · ${pct}%`
              : t("{n} files", { n: transfer.count })}</span>
          </div>
-          {up && (
-            <button className="xfer-cancel" onClick={onCancel} disabled={transfer.cancelling}
-              title={t("Stop before the server commit. Files already sent are not applied; the changelist stays pending.")}>
-              {transfer.cancelling ? t("Cancelling…") : t("Cancel")}
+          <div className="xfer-actions">
+            {up && (
+              <button className="xfer-cancel" onClick={onCancel} disabled={transfer.cancelling}
+                title={t("Stop before the server commit. Files already sent are not applied; the changelist stays pending.")}>
+                {transfer.cancelling ? t("Cancelling…") : t("Cancel")}
+              </button>
+            )}
+            <button className="xfer-min" onClick={onMinimize} title={t("Minimize — the transfer keeps running in the background")}>
+              <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
            </button>
-          )}
+          </div>
        </div>
        <div className={"xfer-bar" + (total > 0 ? " det" : "")}>
          <span style={total > 0 ? { width: pct + "%" } : undefined} />
@ -2162,6 +2169,30 @@ function TransferDialog({ transfer, onCancel }: { transfer: Transfer; onCancel:
  );
 }

+/* minimized transfer indicator — small floating chip; the transfer keeps running.
+   Click to expand back to the full dialog. */
+function TransferChip({ transfer, onExpand, onCancel }: { transfer: Transfer; onExpand: () => void; onCancel: () => void }) {
+  const up = transfer.op === "submit";
+  const total = transfer.total || 0;
+  const pct = total > 0 ? Math.min(100, Math.round((transfer.count / total) * 100)) : 0;
+  return (
+    <div className={"xferchip" + (up ? " up" : " down")} onClick={onExpand} title={t("Expand")}>
+      <span className="xc-ic"><span className="ldr sm" /></span>
+      <span className="xc-txt">
+        <b>{up ? t("Submitting") : t("Getting latest")}</b>
+        <span>{total > 0 ? `${transfer.count.toLocaleString()} / ${total.toLocaleString()} · ${pct}%` : t("{n} files", { n: transfer.count })}</span>
+      </span>
+      {up && (
+        <button className="xc-cancel" disabled={transfer.cancelling} title={t("Cancel")}
+          onClick={(e) => { e.stopPropagation(); onCancel(); }}>
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" /></svg>
+        </button>
+      )}
+      {total > 0 && <span className="xc-bar"><span style={{ width: pct + "%" }} /></span>}
+    </div>
+  );
+}
+
 /* ---------------- build output (MSBuild) ---------------- */
 function BuildOverlay({ lines, building, ok, sln, onMinimize, onClose }: { lines: string[]; building: boolean; ok: boolean | null; sln: string; onMinimize: () => void; onClose: () => void }) {
  const ref = useRef<HTMLDivElement>(null);
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -151,6 +151,9 @@ const D: Record<string, Tr> = {
  "found {n} files": { ru: "найдено {n} файлов", de: "{n} Dateien gefunden", fr: "{n} fichiers trouvés", es: "{n} archivos encontrados" },
  "Committing…": { ru: "Коммичу…", de: "Übertrage…", fr: "Validation…", es: "Confirmando…" },
  "Cancelling…": { ru: "Отменяю…", de: "Breche ab…", fr: "Annulation…", es: "Cancelando…" },
+  "Minimize — the transfer keeps running in the background": { ru: "Свернуть — передача продолжится в фоне", de: "Minimieren — die Übertragung läuft im Hintergrund weiter", fr: "Réduire — le transfert continue en arrière-plan", es: "Minimizar — la transferencia continúa en segundo plano" },
+  "Submitting": { ru: "Отправка", de: "Übertrage", fr: "Envoi", es: "Enviando" },
+  "Getting latest": { ru: "Получение", de: "Aktualisiere", fr: "Récupération", es: "Obteniendo" },
  "Stop before the server commit. Files already sent are not applied; the changelist stays pending.": { ru: "Остановить до серверного коммита. Уже отправленные файлы не применяются; changelist останется в pending.", de: "Vor dem Server-Commit stoppen. Bereits gesendete Dateien werden nicht übernommen; die Changelist bleibt ausstehend.", fr: "Arrêter avant le commit serveur. Les fichiers déjà envoyés ne sont pas appliqués ; la changelist reste en attente.", es: "Detener antes del commit del servidor. Los archivos ya enviados no se aplican; la changelist queda pendiente." },
  "Stop the scan. Files already found stay staged.": { ru: "Остановить скан. Уже найденные файлы останутся помеченными.", de: "Scan stoppen. Bereits gefundene Dateien bleiben vorgemerkt.", fr: "Arrêter l’analyse. Les fichiers déjà trouvés restent préparés.", es: "Detener el escaneo. Los archivos ya encontrados quedan preparados." },
  "{a} of {b} selected": { ru: "{a} из {b} выбрано", de: "{a} von {b} ausgewählt", fr: "{a} sur {b} sélectionnés", es: "{a} de {b} seleccionados" },