feat: add start-at-boot setting and fix tray icon to use app logo

Add auto-launch settings (start at boot + start minimized) to the
Desktop section in Account settings, using Electron's built-in
setLoginItemSettings API across macOS, Windows, and Linux.

Replace the fallback colored-circle tray icon with proper B logo assets:
template images for macOS (adapts to light/dark menu bar) and colored
icons for Windows/Linux. Fix BGRA channel order bug in fallback generator
and move tray icons to resources/ so they're packaged into the app.
This commit is contained in:
Jannis Braun
2026-03-17 02:28:38 +01:00
parent e5f89d4c3f
commit ac7d3cb71b
9 changed files with 201 additions and 14 deletions
@@ -10,8 +10,70 @@ import { AVATAR_COLORS } from '@backspace/shared';
import type { User, UserStatus, AvatarColor } from '@backspace/shared';
import type { FederationOpResult } from '../../../utils/federationOps';
import { isElectron } from '../../../platform/platform';
import { Toggle } from '../../ui/Toggle';
function AutoLaunchSettings() {
const [openAtLogin, setOpenAtLogin] = useState(false);
const [startMinimized, setStartMinimized] = useState(true);
const [loading, setLoading] = useState(true);
useEffect(() => {
window.backspace?.getAutoLaunchSettings().then((settings) => {
setOpenAtLogin(settings.openAtLogin);
setStartMinimized(settings.startMinimized);
setLoading(false);
}).catch(() => setLoading(false));
}, []);
const handleOpenAtLoginChange = async (enabled: boolean) => {
setOpenAtLogin(enabled);
try {
const result = await window.backspace!.setAutoLaunchSettings({ openAtLogin: enabled });
setOpenAtLogin(result.openAtLogin);
setStartMinimized(result.startMinimized);
} catch {
setOpenAtLogin(!enabled);
}
};
const handleStartMinimizedChange = async (enabled: boolean) => {
setStartMinimized(enabled);
try {
const result = await window.backspace!.setAutoLaunchSettings({ startMinimized: enabled });
setOpenAtLogin(result.openAtLogin);
setStartMinimized(result.startMinimized);
} catch {
setStartMinimized(!enabled);
}
};
if (loading) return null;
return (
<>
<div className="flex items-center justify-between py-1">
<div className="flex-1 mr-4">
<div className="text-sm text-txt-primary">Start at boot</div>
<div className="text-xs text-txt-tertiary mt-0.5">
Automatically launch Backspace when you log in
</div>
</div>
<Toggle enabled={openAtLogin} onChange={handleOpenAtLoginChange} />
</div>
<div className="flex items-center justify-between py-1">
<div className="flex-1 mr-4">
<div className={`text-sm ${openAtLogin ? 'text-txt-primary' : 'text-txt-tertiary'}`}>Start minimized</div>
<div className="text-xs text-txt-tertiary mt-0.5">
Start hidden in the system tray instead of showing the window
</div>
</div>
<Toggle enabled={startMinimized} onChange={handleStartMinimizedChange} />
</div>
</>
);
}
export function AccountPanel() {
const user = useAuthStore((s) => s.user);
const updateProfile = useAuthStore((s) => s.updateProfile);
@@ -688,11 +750,15 @@ export function AccountPanel() {
</form>
</div>
{/* ── Connected Instance (Electron only) ── */}
{/* ── Desktop (Electron only) ── */}
{isElectron() && (
<div>
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Connected Instance</div>
<div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5">
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Desktop</div>
<div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5 space-y-3">
<AutoLaunchSettings />
<div className="border-t border-white/[0.04]" />
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-txt-primary font-medium">{window.location.origin}</div>