feat: enable auto-blur feature for widgets and enhance widget window styling

Author: PythonSmall-Q

src-tauri/src/commands/widget_cmd.rs

@@ -460,6 +460,7 @@ pub fn build_widget_window_sync(app: &AppHandle, config: &WidgetConfig) -> Resul
         .inner_size(width, height)
         .position(x, y)
         .decorations(false)
+        .transparent(true)
         .always_on_top(config.always_on_top_mode == "always")
         .skip_taskbar(false)
         .resizable(true)

src/styles/globals.css

@@ -79,6 +79,12 @@ body {
   overflow: hidden;
 }
 
+html.widget-window,
+html.widget-window body {
+  background: transparent;
+  background-image: none;
+}
+
 .widget-root > * {
   background-image:
     linear-gradient(rgba(30, 36, 51, var(--timelens-widget-overlay, 0.62)), rgba(30, 36, 51, var(--timelens-widget-overlay, 0.62))),

src/widgets/NoteWidget.tsx

@@ -142,6 +142,9 @@ export default function NoteWidget({ widgetId }: Props) {
     } catch {
       // ignore
     }
+    window.dispatchEvent(new CustomEvent("timelens-widget-auto-blur-changed", {
+      detail: { widgetId, enabled: next },
+    }));
   };
 
   const selectedNote = useMemo(

src/widgets/TodoWidget.tsx

@@ -199,6 +199,9 @@ export default function TodoWidget({ widgetId }: Props) {
     } catch {
       // ignore
     }
+    window.dispatchEvent(new CustomEvent("timelens-widget-auto-blur-changed", {
+      detail: { widgetId, enabled: next },
+    }));
   };
 
   const sensors = useSensors(

src/widgets/WidgetWindow.tsx

@@ -34,12 +34,19 @@ export default function WidgetWindow({ widgetId }: Props) {
   const [isBlurred, setIsBlurred] = useState(false);
   const [idle, setIdle] = useState(false);
   const idleTimer = useRef<ReturnType<typeof setTimeout>>();
+  const autoBlurEnabled = useRef(false);
+  const rootRef = useRef<HTMLDivElement>(null);
   const [widgetType, setWidgetType] = useState<string>(
     widgetId.includes("-") ? widgetId.substring(0, widgetId.lastIndexOf("-")) : ""
   );
   const [refreshKey, setRefreshKey] = useState(0);
   const [paused, setPaused] = useState(false);
 
+  useEffect(() => {
+    document.documentElement.classList.add("widget-window");
+    return () => document.documentElement.classList.remove("widget-window");
+  }, []);
+
   const getMonitorIndexForRect = async (x: number, y: number, width: number, height: number) => {
     try {
       const target = await monitorFromPoint(x + width / 2, y + height / 2);
@@ -57,6 +64,20 @@ export default function WidgetWindow({ widgetId }: Props) {
   };
 
   useEffect(() => {
+    const autoBlurKey = `${widgetId}-auto-blur`;
+    autoBlurEnabled.current = localStorage.getItem(autoBlurKey) === "1";
+    const onAutoBlurChanged = (event: Event) => {
+      const { widgetId: changedWidgetId, enabled } = (event as CustomEvent<{
+        widgetId?: string;
+        enabled?: boolean;
+      }>).detail ?? {};
+      if (changedWidgetId !== widgetId) return;
+      autoBlurEnabled.current = enabled === true;
+      clearTimeout(idleTimer.current);
+      if (!autoBlurEnabled.current) setIdle(false);
+    };
+    window.addEventListener("timelens-widget-auto-blur-changed", onAutoBlurChanged);
+
     const heartbeatKey = `timelens-widget-heartbeat:${widgetId}`;
     const recordHeartbeat = (event: string) => {
       try {
@@ -140,6 +161,7 @@ export default function WidgetWindow({ widgetId }: Props) {
     return () => {
       unlistenFocus.then((u) => u());
       unlistenMove.then((u) => u());
+      window.removeEventListener("timelens-widget-auto-blur-changed", onAutoBlurChanged);
       window.removeEventListener("mousedown", restoreOnMouseDown);
       if (positionSaveTimer.current) clearTimeout(positionSaveTimer.current);
     };
@@ -211,7 +233,27 @@ export default function WidgetWindow({ widgetId }: Props) {
   };
 
   const handleMouseLeave = () => {
-    idleTimer.current = setTimeout(() => setIdle(true), 2000);
+    if (!autoBlurEnabled.current) return;
+    idleTimer.current = setTimeout(() => {
+      const activeElement = document.activeElement;
+      const isEditing = activeElement instanceof HTMLTextAreaElement
+        || activeElement instanceof HTMLInputElement
+        || activeElement instanceof HTMLElement && activeElement.isContentEditable;
+      if (!isEditing || !rootRef.current?.contains(activeElement)) {
+        setIdle(true);
+      }
+    }, 2000);
+  };
+
+  const handleFocusCapture = (event: React.FocusEvent<HTMLDivElement>) => {
+    const target = event.target;
+    const isEditing = target instanceof HTMLTextAreaElement
+      || target instanceof HTMLInputElement
+      || target instanceof HTMLElement && target.isContentEditable;
+    if (isEditing) {
+      clearTimeout(idleTimer.current);
+      setIdle(false);
+    }
   };
 
   // Cleanup idle timer on unmount
@@ -221,9 +263,11 @@ export default function WidgetWindow({ widgetId }: Props) {
 
   return (
     <div
+      ref={rootRef}
       className={`widget-root ${isBlurred && widgetType !== "clock" ? "widget-root--faded" : ""} ${idle ? "widget-idle" : ""}`}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onFocusCapture={handleFocusCapture}
     >
       {widgetType === "clock" && <ClockWidget key={refreshKey} widgetId={widgetId} isBlurred={isBlurred} />}
       {widgetType === "todo" && <TodoWidget key={refreshKey} widgetId={widgetId} />}

src/widgets/__tests__/NoteWidget.test.tsx

@@ -55,6 +55,22 @@ describe("NoteWidget", () => {
     expect(writeCalls.length).toBeGreaterThan(0);
   });
 
+  it("enables auto blur for the current widget", async () => {
+    const onAutoBlurChanged = vi.fn();
+    window.addEventListener("timelens-widget-auto-blur-changed", onAutoBlurChanged);
+    mockGatewayState({ notes: null, notes_backup: null });
+    renderWithProviders(<NoteWidget widgetId="note-test" />);
+
+    await screen.findByText("No notes yet. Create your first one.");
+    await userEvent.click(screen.getByRole("button", { name: "Auto-blur when unfocused" }));
+
+    expect(localStorage.getItem("note-test-auto-blur")).toBe("1");
+    expect(onAutoBlurChanged).toHaveBeenCalledWith(expect.objectContaining({
+      detail: { widgetId: "note-test", enabled: true },
+    }));
+    window.removeEventListener("timelens-widget-auto-blur-changed", onAutoBlurChanged);
+  });
+
   it("deletes the current note", async () => {
     const notes = JSON.stringify([
       { id: "n1", content: "First note", updatedAt: new Date().toISOString() },