feat: custom scrollbars, portable storage, window state persistence

- Custom scrollbar CSS using ::-webkit-scrollbar for Tauri's Chromium WebView
- Portable storage: all data written next to exe in data/ folder instead of AppData
- Rust get_portable_data_dir command with runtime FS scope for exe directory
- Window size/position/maximized saved to settings on close, restored on startup

src/App.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect, useCallback } from "react";
+import { getCurrentWindow, LogicalSize, LogicalPosition } from "@tauri-apps/api/window";
 import { AnimatePresence, motion } from "framer-motion";
 import { springs, fadeSlideLeft, fadeSlideRight } from "@/lib/motion";
 import { useAppStore } from "@/stores/app-store";
 import { useBoardStore } from "@/stores/board-store";
+import { saveSettings } from "@/lib/storage";
 import { AppShell } from "@/components/layout/AppShell";
 import { BoardList } from "@/components/boards/BoardList";
 import { BoardView } from "@/components/board/BoardView";
@@ -21,13 +23,46 @@ export default function App() {
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false);
 
   useEffect(() => {
-    init();
+    init().then(() => {
+      // Restore window state after settings are loaded
+      const { settings } = useAppStore.getState();
+      const ws = settings.windowState;
+      if (ws) {
+        const appWindow = getCurrentWindow();
+        if (ws.maximized) {
+          appWindow.maximize();
+        } else {
+          appWindow.setSize(new LogicalSize(ws.width, ws.height));
+          appWindow.setPosition(new LogicalPosition(ws.x, ws.y));
+        }
+      }
+    });
   }, [init]);
 
-  // Flush pending board saves before the app window closes
+  // Save window state + flush board saves before the app window closes
   useEffect(() => {
     function handleBeforeUnload() {
       useBoardStore.getState().closeBoard();
+
+      // Save window state synchronously-ish (fire and forget)
+      const appWindow = getCurrentWindow();
+      Promise.all([
+        appWindow.outerSize(),
+        appWindow.outerPosition(),
+        appWindow.isMaximized(),
+      ]).then(([size, position, maximized]) => {
+        const settings = useAppStore.getState().settings;
+        saveSettings({
+          ...settings,
+          windowState: {
+            x: position.x,
+            y: position.y,
+            width: size.width,
+            height: size.height,
+            maximized,
+          },
+        });
+      });
     }
     window.addEventListener("beforeunload", handleBeforeUnload);
     return () => {

src/index.css

@@ -148,6 +148,39 @@
   .dark * {
     scrollbar-color: oklch(80% 0 0 / 15%) transparent;
   }
+
+  /* Custom scrollbar for Chromium/WebKit (Tauri WebView) */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: oklch(50% 0 0 / 20%);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: oklch(50% 0 0 / 35%);
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .dark ::-webkit-scrollbar-thumb {
+    background: oklch(80% 0 0 / 15%);
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: oklch(80% 0 0 / 30%);
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
   body {
     @apply bg-background text-foreground;
     font-family: "Satoshi", system-ui, -apple-system, sans-serif;

src/lib/schemas.ts

@@ -57,6 +57,14 @@ export const boardSchema = z.object({
   settings: boardSettingsSchema.default({ attachmentMode: "link", background: "none" }),
 });
 
+export const windowStateSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+  width: z.number(),
+  height: z.number(),
+  maximized: z.boolean(),
+});
+
 export const appSettingsSchema = z.object({
   theme: z.enum(["light", "dark", "system"]).default("system"),
   dataDirectory: z.string().nullable().default(null),
@@ -65,4 +73,5 @@ export const appSettingsSchema = z.object({
   uiZoom: z.number().min(0.75).max(1.5).default(1),
   density: z.enum(["compact", "comfortable", "spacious"]).default("comfortable"),
   defaultColumnWidth: z.enum(["narrow", "standard", "wide"]).default("standard"),
+  windowState: windowStateSchema.nullable().default(null),
 });

src/lib/storage.ts

@@ -7,18 +7,18 @@ import {
   remove,
   copyFile,
 } from "@tauri-apps/plugin-fs";
-import { appDataDir, join } from "@tauri-apps/api/path";
+import { join } from "@tauri-apps/api/path";
+import { invoke } from "@tauri-apps/api/core";
 import { boardSchema, appSettingsSchema } from "./schemas";
 import type { Board, BoardMeta } from "@/types/board";
 import type { AppSettings } from "@/types/settings";
 
 // ---------------------------------------------------------------------------
-// Path helpers
+// Path helpers — portable: all data lives next to the exe
 // ---------------------------------------------------------------------------
 
 async function getBaseDir(): Promise<string> {
-  const base = await appDataDir();
-  return join(base, "openpylon");
+  return invoke<string>("get_portable_data_dir");
 }
 
 async function getBoardsDir(): Promise<string> {

src/stores/app-store.ts

@@ -62,6 +62,7 @@ export const useAppStore = create<AppState>((set, get) => ({
     uiZoom: 1,
     density: "comfortable",
     defaultColumnWidth: "standard",
+    windowState: null,
   },
   boards: [],
   view: { type: "board-list" },

src/types/settings.ts

@@ -1,5 +1,13 @@
 import type { ColumnWidth } from "./board";
 
+export interface WindowState {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  maximized: boolean;
+}
+
 export interface AppSettings {
   theme: "light" | "dark" | "system";
   dataDirectory: string | null;
@@ -8,4 +16,5 @@ export interface AppSettings {
   uiZoom: number;
   density: "compact" | "comfortable" | "spacious";
   defaultColumnWidth: ColumnWidth;
+  windowState: WindowState | null;
 }