fix: center shortcut key pill '+' separator between key caps

AUDIT_LOG.md

@@ -2,8 +2,27 @@
 
 This log tracks all significant changes, updates, and versions in the PaperCache project.
 
-## 2026-06-25 - (Uncommitted)
-**Change:** fix: window state persistence and login-item toggle desync (v0.5.4)
+## 2026-06-25
+**Change:** fix: remove macOS frameless window 28px shift compensation (PR #62)
+
+**Details/Why:**
+The v0.5.4 window-state fix incorrectly added +/-28px compensation for a supposed macOS frameless window titlebar offset in `tauri-plugin-window-state`. Tracing through the full stack (`tauri-plugin-window-state` v2.4.1 → `tauri-runtime-wry` → `tao` 0.35.3) confirmed no such offset exists for `decorations: false` windows — `outer_position()` returns the window frame origin and `set_position()` sets it correctly. Removed all compensation from save and restore paths.
+
+**Files changed:** `src-tauri/src/commands/system.rs`, `src-tauri/src/lib.rs`, `CHANGELOG.md`.
+
+---
+
+## 2026-06-25
+**Change:** fix: shortcut key pill "+" centered between key caps
+
+**Details/Why:**
+In the Settings global shortcuts section, the `renderShortcutDisplay` function grouped each key cap and the `+` to its right in a wrapper `<span>`, with the outer container using `justify-content: space-evenly`. This made the `+` appear closer to the left key cap. Fixed by flattening to `<React.Fragment>` siblings in a flex row with `justify-content: center` and `gap: 4px`.
+
+**Files changed:** `src/Settings.tsx`, `CHANGELOG.md`.
+
+---
+
+### 2026-06-25 - fix: window state persistence and login-item toggle desync (v0.5.4)
 
 **Details/Why:**
 Two bug fixes for window state and settings reliability:

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - **Window position/size now persists across restarts**: The window-state plugin's `on_window_ready` fires before the macOS display server is ready, causing `available_monitors()` to return empty and the saved position to be silently discarded. Fixed by deferring window-state restoration via a background thread + `run_on_main_thread` 300ms after `setup()` completes, bypassing the plugin's monitor-intersection check with a direct file read. Both the tray "Quit" and Settings "Quit" buttons now explicitly save window state before exit.
+- **Window no longer shifts down on restart on macOS**: Removed the +/-28px compensation that was incorrectly added for a macOS frameless window offset which does not exist in `tauri-plugin-window-state` v2.4.1 — the plugin correctly saves `outer_position()` and restores via `set_position()` with no titlebar offset for frameless windows.
+- **Shortcut key pill "+" centered between key caps**: The `+` separator in the shortcut display was grouped inside the same `<span>` as the key cap to its left with `justify-content: space-evenly`, making it appear visually attached to the left pill. Restructured to a flat flex layout with `gap` so the `+` is independently centered with equal spacing on both sides.
 - **Login-item toggle stays in sync with macOS System Settings**: The launch-at-startup toggle only read from `localStorage`, so removing PaperCache from System Settings left the toggle permanently stuck in the checked state. Fixed by adding a `get_launch_at_startup` Tauri command that queries the actual OS login-item state via `app.autolaunch().is_enabled()`, and syncing the toggle with the real OS state on every Settings mount.
 
 ## [v0.5.3] - 2026-06-24

src/Settings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, Fragment } from 'react'
 import { SETTINGS_KEYS } from './lib/settingsKeys'
 import { useAppStore } from './store/useAppStore'
 import { useSettingsStore } from './store/useSettingsStore'
@@ -390,8 +390,9 @@ function ShortcutInput({ value, onChange }: { value: string; onChange: (val: str
         style={{
           display: 'flex',
           alignItems: 'center',
+          gap: '4px',
           width: '100%',
-          justifyContent: 'space-evenly',
+          justifyContent: 'center',
         }}
       >
         {parts.map((part, index) => {
@@ -428,7 +429,7 @@ function ShortcutInput({ value, onChange }: { value: string; onChange: (val: str
               break
           }
           return (
-            <span key={index} style={{ display: 'flex', alignItems: 'center' }}>
+            <Fragment key={index}>
               <span
                 style={{
                   display: 'inline-flex',
@@ -448,9 +449,9 @@ function ShortcutInput({ value, onChange }: { value: string; onChange: (val: str
                 {display}
               </span>
               {index < parts.length - 1 && (
-                <span style={{ margin: '0 4px', opacity: 0.5, fontSize: '14px' }}>+</span>
+                <span style={{ opacity: 0.5, fontSize: '14px' }}>+</span>
               )}
-            </span>
+            </Fragment>
           )
         })}
       </div>