Simplify refresh status layout

app/src-tauri/tauri.conf.json

@@ -34,7 +34,7 @@
     "category": "Productivity",
     "shortDescription": "Nextcloud Deck on your desktop",
     "longDescription": "A focused cross-platform desktop client for viewing and editing Nextcloud Deck boards.",
-    "copyright": "Copyright © 2026 Elijah Kuntz",
+    "copyright": "Copyright (c) 2026 Elijah Kuntz",
     "windows": {
       "webviewInstallMode": {
         "type": "downloadBootstrapper"

app/src/App.svelte

@@ -14,7 +14,6 @@
     ChevronRight,
     Columns3,
     LayoutList,
-    LoaderCircle,
     Minus,
     Pencil,
     Plus,
@@ -113,7 +112,7 @@
           { id: 106, stackId: 13, title: 'Patho Concept Map', type: 'plain', owner: 'admin', order: 2, color: 'E69A88', done: null }
         ]}
       ];
-      status = 'Homework · 6 cards · Preview data';
+      status = 'Preview data';
       return;
     }
     if (!serverUrl || !username) return;
@@ -149,7 +148,7 @@
       return;
     }
     updateState = 'checking';
-    updateMessage = 'Checking Forgejo for a newer signed release…';
+    updateMessage = 'Checking Forgejo for a newer signed release...';
     updateProgress = 0;
     pendingUpdate = null;
     try {
@@ -170,7 +169,7 @@
   async function installUpdate() {
     if (!pendingUpdate) return;
     updateState = 'downloading';
-    updateMessage = `Downloading Decky ${pendingUpdate.version}…`;
+    updateMessage = `Downloading Decky ${pendingUpdate.version}...`;
     let downloaded = 0;
     let total = 0;
     try {
@@ -184,7 +183,7 @@
         } else if (event.event === 'Finished') {
           updateState = 'installing';
           updateProgress = 100;
-          updateMessage = 'Download verified. Installing and restarting Decky…';
+          updateMessage = 'Download verified. Installing and restarting Decky...';
         }
       });
       await relaunch();
@@ -196,7 +195,7 @@
 
   async function connect(silent = false) {
     busy = true;
-    status = 'Connecting to Nextcloud…';
+    status = 'Connecting...';
     try {
       client = await DeckApiClient.connect({ serverUrl, username, appPassword });
       boards = (await client.getBoards()).filter((board) => !board.archived && !board.deletedAt);
@@ -228,13 +227,12 @@
   async function refreshBoard() {
     if (!client || !selectedBoard) return;
     busy = true;
-    status = `Loading ${selectedBoard.title}…`;
+    status = 'Refreshing...';
     try {
       stacks = (await client.getStacks(selectedBoard.id))
         .filter((stack) => !stack.deletedAt)
         .sort((a, b) => a.order - b.order);
-      const count = stacks.reduce((total, stack) => total + (stack.cards?.filter((card) => !card.archived).length ?? 0), 0);
-      status = `${selectedBoard.title} · ${count} card${count === 1 ? '' : 's'} · Updated ${new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
+      status = `Updated ${new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
     } catch (error) {
       status = friendlyError(error);
     } finally {
@@ -249,7 +247,7 @@
     const interactionAtStart = lastInteractionAt;
     if (!background) {
       busy = true;
-      status = selectedBoard ? `Loading ${selectedBoard.title}…` : 'Refreshing boards…';
+      status = 'Refreshing...';
     }
     try {
       const refreshedBoards = (await activeClient.getBoards()).filter((board) => !board.archived && !board.deletedAt);
@@ -273,8 +271,7 @@
         .sort((a, b) => a.order - b.order);
       if (client !== activeClient || selectedBoard?.id !== board.id || (background && (lastInteractionAt !== interactionAtStart || document.visibilityState !== 'visible'))) return;
       stacks = refreshedStacks;
-      const count = stacks.reduce((total, stack) => total + (stack.cards?.filter((card) => !card.archived).length ?? 0), 0);
-      status = `${board.title} · ${count} card${count === 1 ? '' : 's'} · Updated ${new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
+      status = `Updated ${new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
     } catch (error) {
       status = `${background ? 'Background refresh failed' : 'Refresh failed'}: ${friendlyError(error)}`;
     } finally {
@@ -503,7 +500,7 @@
   }
 
   async function deleteCard(card: Card) {
-    if (!client || !selectedBoard || !confirm(`Delete “${card.title}”?`)) return;
+    if (!client || !selectedBoard || !confirm(`Delete "${card.title}"?`)) return;
     busy = true;
     try {
       await client.deleteCard(selectedBoard.id, card.stackId, card.id);
@@ -675,8 +672,7 @@
       } else if (stackId !== null) {
         const targetIndex = stacks.findIndex((stack) => stack.id === stackId);
         stacks = await client.reorderStack(board.id, stackId, targetIndex);
-        const count = stacks.reduce((total, stack) => total + (stack.cards?.filter((item) => !item.archived).length ?? 0), 0);
-        status = `${board.title} · ${count} card${count === 1 ? '' : 's'} · Stack order saved`;
+        status = `Updated ${new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
       }
     } catch (error) {
       stacks = origin;
@@ -711,7 +707,7 @@
   }
 </script>
 
-<svelte:head><title>{selectedBoard ? `${selectedBoard.title} · Decky` : 'Decky'}</title></svelte:head>
+<svelte:head><title>{selectedBoard ? `${selectedBoard.title} - Decky` : 'Decky'}</title></svelte:head>
 
 <div class:sidebar-collapsed={settings.sidebarCollapsed} class="app-shell">
   <header class="window-titlebar" role="presentation" on:mousedown={dragWindow} on:dblclick={() => runWindowAction('maximize')}>
@@ -731,7 +727,7 @@
           <label>Username<input bind:value={username} autocomplete="username" /></label>
           <label>App password<input type="password" bind:value={appPassword} autocomplete="current-password" /></label>
           <label class="checkbox-row"><input type="checkbox" bind:checked={rememberPassword} /> Save securely on this device</label>
-          <button class="primary-button" disabled={busy || !serverUrl || !username || !appPassword}>{busy ? 'Connecting…' : 'Connect'}</button>
+          <button class="primary-button" disabled={busy || !serverUrl || !username || !appPassword}>{busy ? 'Connecting...' : 'Connect'}</button>
         </form>
       {/if}
 
@@ -759,7 +755,10 @@
         <button class:active={orientation === 'horizontal'} title="Horizontal layout" on:click={() => setOrientation('horizontal')}><Columns3 size={18} /><span>Columns</span></button>
         <button class:active={orientation === 'vertical'} title="Vertical layout" on:click={() => setOrientation('vertical')}><LayoutList size={18} /><span>List</span></button>
       </div>
-      <button class="sidebar-tool" title="Refresh" disabled={!client || busy} on:click={() => refreshFromNextcloud()}><RefreshCw size={18} class={busy ? 'spinning' : ''} /><span>Refresh</span></button>
+      <div class="refresh-row">
+        <button class="sidebar-tool" title="Refresh" disabled={!client || busy} on:click={() => refreshFromNextcloud()}><RefreshCw size={18} class={busy ? 'spinning' : ''} /><span>Refresh</span></button>
+        <span class="sync-status" title={status}>{status}</span>
+      </div>
       <button class="sidebar-tool" title="Settings" on:click={() => (settingsOpen = true)}><Settings size={18} /><span>Settings</span></button>
     </div>
   </aside>
@@ -841,10 +840,6 @@
     {/if}
   </main>
 
-  <footer class="statusbar">
-    {#if busy}<LoaderCircle size={14} class="spinning" />{:else}<span class:connected={Boolean(client)} class="status-dot"></span>{/if}
-    <span>{status}</span>
-  </footer>
 </div>
 
 {#if dragGhost}
@@ -867,7 +862,7 @@
     <form class="modal" on:submit|preventDefault={saveCard}>
       <header><div><small>{editor.mode === 'create' ? 'NEW CARD' : 'EDIT CARD'}</small><h2>{editor.mode === 'create' ? 'Create a card' : editor.card?.title}</h2></div><button type="button" class="icon-button" on:click={() => (editor = null, colorPickerOpen = false)}><X size={20} /></button></header>
       <label>Title<input bind:value={editor.draft.title} maxlength="255" /></label>
-      <label>Description<textarea bind:value={editor.draft.description} rows="5" placeholder="Add details…"></textarea></label>
+      <label>Description<textarea bind:value={editor.draft.description} rows="5" placeholder="Add details..."></textarea></label>
       <div class="form-row">
         <label>Due date<input type="datetime-local" bind:value={editor.draft.dueDate} /></label>
         <label>Card color
@@ -943,7 +938,7 @@
   <div class="modal-backdrop" role="presentation" on:click={(event) => event.currentTarget === event.target && (pendingDeletion = null)}>
     <div class="modal confirm-modal" role="alertdialog" aria-modal="true" aria-labelledby="delete-title">
       <header>
-        <div><small>CONFIRM DELETE</small><h2 id="delete-title">Delete “{pendingDeletion.title}”?</h2></div>
+        <div><small>CONFIRM DELETE</small><h2 id="delete-title">Delete "{pendingDeletion.title}"?</h2></div>
         <button type="button" class="icon-button" aria-label="Close" on:click={() => (pendingDeletion = null)}><X size={20} /></button>
       </header>
       <p class="modal-copy">
@@ -953,7 +948,7 @@
           This permanently deletes the stack and its {pendingDeletion.cardCount} card{pendingDeletion.cardCount === 1 ? '' : 's'} from Nextcloud.
         {/if}
       </p>
-      <footer><button type="button" class="secondary-button" on:click={() => (pendingDeletion = null)}>Cancel</button><button type="button" class="danger-button" disabled={busy} on:click={confirmStructureDeletion}>{busy ? 'Deleting…' : `Delete ${pendingDeletion.kind}`}</button></footer>
+      <footer><button type="button" class="secondary-button" on:click={() => (pendingDeletion = null)}>Cancel</button><button type="button" class="danger-button" disabled={busy} on:click={confirmStructureDeletion}>{busy ? 'Deleting...' : `Delete ${pendingDeletion.kind}`}</button></footer>
     </div>
   </div>
 {/if}
@@ -972,7 +967,7 @@
           <label class="checkbox-row"><input type="checkbox" bind:checked={rememberPassword} /> Save securely on this device</label>
           <div class="settings-actions">
             {#if client}<button type="button" class="secondary-button" on:click={disconnect}>Disconnect</button>{/if}
-            <button class="primary-button" disabled={busy || !serverUrl || !username || !appPassword}>{busy ? 'Connecting…' : client ? 'Reconnect' : 'Connect'}</button>
+            <button class="primary-button" disabled={busy || !serverUrl || !username || !appPassword}>{busy ? 'Connecting...' : client ? 'Reconnect' : 'Connect'}</button>
           </div>
         </form>
       </section>
@@ -996,7 +991,7 @@
             <button type="button" class="primary-button" on:click={installUpdate}>Download and install {pendingUpdate?.version}</button>
           {:else}
             <button type="button" class="secondary-button" disabled={updateState === 'checking' || updateState === 'downloading' || updateState === 'installing'} on:click={checkForUpdates}>
-              {updateState === 'checking' ? 'Checking…' : 'Check for updates'}
+              {updateState === 'checking' ? 'Checking...' : 'Check for updates'}
             </button>
           {/if}
         </div>

app/src/app.css

@@ -29,7 +29,7 @@ button { color: inherit; }
 .app-shell {
   height: 100%;
   display: grid;
-  grid-template: 34px minmax(0, 1fr) 28px / 250px minmax(0, 1fr);
+  grid-template: 34px minmax(0, 1fr) / 250px minmax(0, 1fr);
   background: var(--bg);
 }
 
@@ -115,6 +115,8 @@ textarea { resize: vertical; min-height: 90px; }
 .sidebar-layout button { justify-content: center; gap: 6px; padding: 0 6px; background: #292929; }
 .sidebar-layout button.active { color: #fff; background: #3a3a3a; box-shadow: inset 0 -2px var(--accent); }
 .sidebar-tool span, .sidebar-layout span { font-size: 12px; }
+.refresh-row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
+.sync-status { overflow: hidden; padding-right: 7px; color: var(--muted); font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
 
 .workspace { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #232323; }
 .workspace-tools { min-height: 46px; flex: 0 0 auto; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 280px) minmax(80px, 1fr); align-items: center; gap: 16px; padding: 6px 18px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
@@ -173,8 +175,6 @@ textarea { resize: vertical; min-height: 90px; }
 .empty-illustration span { position: absolute; width: 66px; height: 44px; z-index: -1; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); transform: translate(-28px, 13px) rotate(-12deg); }
 .empty-illustration span:last-child { transform: translate(28px, 13px) rotate(12deg); }
 
-.statusbar { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; border-top: 1px solid var(--line); color: var(--muted); background: #161616; font-size: 11px; }
-.statusbar span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .spinning { animation: spin .9s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }