Move settings to separate window and improve UI spacing

AGENTS.md

@@ -0,0 +1,29 @@
+# AGENTS.md
+
+## Cursor Cloud specific instructions
+
+This is a **Tauri 2** desktop application (Rust backend + React 19/TypeScript frontend). A single command `pnpm tauri dev` starts both the Vite dev server (port 1420) and the native Tauri window.
+
+### Prerequisites (system-level, installed once in the VM snapshot)
+
+- **Tauri Linux system libraries**: `libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf`
+- **Rust stable** (1.94+): The default rustup toolchain must be `stable`, not the older system-pinned `1.83.0`. Run `rustup default stable` if `cargo --version` shows < 1.94.
+- **Node.js** (v18+) and **pnpm** (v9+): Already available via nvm.
+
+### Key commands
+
+| Task | Command |
+|---|---|
+| Install frontend deps | `pnpm install` |
+| TypeScript lint/check | `pnpm exec tsc --noEmit` |
+| Frontend build | `pnpm build` |
+| Rust check | `cd src-tauri && cargo check` |
+| Run dev (full app) | `pnpm tauri dev` |
+| Production build | `pnpm tauri build` |
+
+### Gotchas
+
+- The first `cargo check` / `pnpm tauri dev` after a clean clone takes ~60s to compile all Rust dependencies. Subsequent builds are incremental and much faster.
+- In headless/VM environments, expect `libEGL warning: DRI3 error` messages — these are benign and the app still renders correctly via software rendering.
+- `pnpm tauri dev` auto-runs `pnpm dev` (Vite) as a `beforeDevCommand`; you don't need to start Vite separately.
+- There are no automated test suites in this repository. Validation is done via TypeScript type checking (`tsc --noEmit`) and building the app.

src-tauri/capabilities/default.json

@@ -1,8 +1,8 @@
 {
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
-  "description": "Capability for the main window",
-  "windows": ["main"],
+  "description": "Capability for the main window and settings window",
+  "windows": ["main", "settings"],
   "permissions": [
     "core:default",
     "opener:default",
@@ -16,6 +16,10 @@
     "core:window:allow-inner-position",
     "core:window:allow-show",
     "core:window:allow-hide",
+    "core:window:allow-close",
+    "core:window:allow-set-focus",
+    "core:window:allow-center",
+    "core:webview:allow-create-webview-window",
     "core:app:allow-default-window-icon",
     "positioner:default",
     "store:default",

src-tauri/tauri.conf.json

@@ -12,6 +12,7 @@
   "app": {
     "windows": [
       {
+        "label": "main",
         "title": "Clock",
         "decorations": false,
         "transparent": true,

src/Clock.tsx

@@ -60,10 +60,11 @@ const Clock = () => {
 
   return (
     <div
-      className="font-black w-fit p-2 pointer-events-none transition-all duration-200"
+      className="font-black w-fit pointer-events-none transition-all duration-200"
       style={{
         backgroundColor: bgColorWithOpacity,
         fontSize,
+        padding: '20px 24px',
       }}
     >
       <span
@@ -77,7 +78,7 @@ const Clock = () => {
       </span>
       {date && (
         <span
-          className="drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] block text-center"
+          className="drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] block text-center mt-1"
           style={{
             color: settings.textColor,
             opacity: settings.textOpacity * 0.8,

src/SettingsWindow.tsx

@@ -0,0 +1,42 @@
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { X } from "lucide-react";
+import { SettingsProvider } from "./contexts/SettingsContext";
+import Settings from "./components/Settings";
+import "./globals.css";
+
+const SettingsWindowContent: React.FC = () => {
+  const handleClose = async () => {
+    const win = getCurrentWindow();
+    await win.close();
+  };
+
+  return (
+    <div className="bg-[#1a1a1a] min-h-screen overflow-y-auto">
+      <div
+        data-tauri-drag-region
+        className="sticky top-0 z-10 flex items-center justify-between bg-[#1a1a1a] cursor-move"
+        style={{ padding: '18px 28px', borderBottom: '2px solid #444' }}
+      >
+        <h2 className="text-lg font-semibold text-white pointer-events-none">Settings</h2>
+        <button
+          onClick={handleClose}
+          className="p-1.5 hover:bg-gray-700 rounded-md transition-colors cursor-pointer"
+          title="Close settings"
+        >
+          <X className="w-5 h-5 text-gray-400" />
+        </button>
+      </div>
+      <Settings />
+    </div>
+  );
+};
+
+const SettingsWindow: React.FC = () => {
+  return (
+    <SettingsProvider>
+      <SettingsWindowContent />
+    </SettingsProvider>
+  );
+};
+
+export default SettingsWindow;

src/TitleBar.tsx

@@ -1,18 +1,41 @@
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import React, { useState, useEffect, useRef } from "react";
 import { TrayIcon } from '@tauri-apps/api/tray';
 import { defaultWindowIcon } from "@tauri-apps/api/app";
 import { Menu } from '@tauri-apps/api/menu';
 import { Clock1, PinIcon, Settings as SettingsIcon } from "lucide-react";
-import Settings from "./components/Settings";
 
-interface TitleBarProps {
-  onSettingsOpen?: () => void;
+async function openSettingsWindow() {
+  const existing = await WebviewWindow.getByLabel('settings');
+  if (existing) {
+    await existing.setFocus();
+    return;
+  }
+
+  const mainWin = getCurrentWindow();
+  const pos = await mainWin.innerPosition();
+  const size = await mainWin.innerSize();
+
+  const webview = new WebviewWindow('settings', {
+    url: '/',
+    title: 'Settings',
+    width: 420,
+    height: 700,
+    x: pos.x + size.width + 16,
+    y: pos.y,
+    resizable: false,
+    decorations: false,
+    transparent: false,
+  });
+
+  webview.once('tauri://error', (e) => {
+    console.error('Failed to create settings window:', e);
+  });
 }
 
-const TitleBar: React.FC<TitleBarProps> = () => {
+const TitleBar: React.FC = () => {
   const [onTop, setOnTop] = useState<boolean | null>(null);
-  const [settingsOpen, setSettingsOpen] = useState(false);
   const trayRef = useRef<TrayIcon | null>(null);
 
   useEffect(() => {
@@ -39,8 +62,9 @@ const TitleBar: React.FC<TitleBarProps> = () => {
         {
           id: 'settings',
           text: 'Settings',
-          action: () => {
-            setTop(false).then(() => setSettingsOpen(true));
+          action: async () => {
+            await setTop(false);
+            await openSettingsWindow();
           },
         },
         {
@@ -90,22 +114,23 @@ const TitleBar: React.FC<TitleBarProps> = () => {
       ) : onTop ? null : (
         <div
           data-tauri-drag-region
-          className="w-full cursor-move flex flex-row justify-between items-center text-white px-3 py-2 text-lg bg-[#0c0d0f] transition-all"
+          className="w-full cursor-move flex flex-row justify-between items-center text-white text-lg bg-[#0c0d0f] transition-all"
+          style={{ padding: '14px 28px' }}
         >
-          <div className="flex flex-row items-center space-x-2 pointer-events-none">
+          <div className="flex flex-row items-center space-x-2.5 pointer-events-none">
             <Clock1 className="w-5 h-5" />
             <span className="text-sm font-medium">Clock</span>
           </div>
-          <div className="flex flex-row items-center space-x-1">
+          <div className="flex flex-row items-center space-x-1.5">
             <button
-              className="p-1.5 hover:bg-gray-700 rounded transition-colors cursor-pointer"
-              onClick={() => setSettingsOpen(true)}
+              className="p-2 hover:bg-gray-700 rounded-md transition-colors cursor-pointer"
+              onClick={() => openSettingsWindow()}
               title="Settings"
             >
               <SettingsIcon className="w-4 h-4" />
             </button>
             <button
-              className="p-1.5 hover:bg-gray-700 rounded transition-colors cursor-pointer"
+              className="p-2 hover:bg-gray-700 rounded-md transition-colors cursor-pointer"
               onClick={() => setTop(true)}
               title="Pin window (always on top)"
             >
@@ -114,7 +139,6 @@ const TitleBar: React.FC<TitleBarProps> = () => {
           </div>
         </div>
       )}
-      <Settings isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} />
     </>
   );
 };