feat: add new UI

bun.lock

···
     "": {
       "name": "atproto-backup",
       "dependencies": {
+        "@atcute/car": "^3.1.1",
         "@atproto/api": "^0.15.25",
+        "@atproto/jwk-webcrypto": "^0.1.9",
         "@atproto/oauth-client-browser": "^0.3.27",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
         "@radix-ui/react-slot": "^1.2.3",
         "@tailwindcss/vite": "^4.1.11",
         "@tauri-apps/api": "^2",
+        "@tauri-apps/plugin-autostart": "~2",
         "@tauri-apps/plugin-deep-link": "~2",
+        "@tauri-apps/plugin-fs": "~2",
         "@tauri-apps/plugin-opener": "^2",
+        "@tauri-apps/plugin-store": "~2",
         "antd": "^5.26.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.525.0",
         "next": "^15.3.5",
+        "next-themes": "^0.4.6",
         "nextra": "^4.2.17",
         "nextra-theme-docs": "^4.2.17",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "shadcn": "^2.9.0",
+        "sonner": "^2.0.6",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11",
       },
···
     "@antfu/ni": ["@antfu/ni@23.3.1", "", { "bin": { "na": "bin/na.mjs", "ni": "bin/ni.mjs", "nr": "bin/nr.mjs", "nu": "bin/nu.mjs", "nci": "bin/nci.mjs", "nlx": "bin/nlx.mjs", "nun": "bin/nun.mjs" } }, "sha512-C90iyzm/jLV7Lomv2UzwWUzRv9WZr1oRsFRKsX5HjQL4EXrbi9H/RtBkjCP+NF+ABZXUKpAa4F1dkoTaea4zHg=="],
 
     "@antfu/utils": ["@antfu/utils@8.1.1", "", {}, "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ=="],
+
+    "@atcute/car": ["@atcute/car@3.1.1", "", { "dependencies": { "@atcute/cbor": "^2.2.4", "@atcute/cid": "^2.2.3", "@atcute/uint8array": "^1.0.2", "@atcute/varint": "^1.0.2", "yocto-queue": "^1.2.1" } }, "sha512-yhez/LqIl0zHubG6z/G/gqWYHmg7wJ5L4jNkbXj5FvZ4eOvmzsw8+ojbdq6wfMU4p5NhP0pUJNLkTZHbYSPmLg=="],
+
+    "@atcute/cbor": ["@atcute/cbor@2.2.5", "", { "dependencies": { "@atcute/cid": "^2.2.3", "@atcute/multibase": "^1.1.4", "@atcute/uint8array": "^1.0.3" } }, "sha512-sBT8+6qau0mC3kwgmjl+nzqGn02xsE9b+kSgXm4/BRd9w8fwdRQYwcC9ApDlfaojrljJfcEkimppl/IcPOF3CA=="],
+
+    "@atcute/cid": ["@atcute/cid@2.2.3", "", { "dependencies": { "@atcute/multibase": "^1.1.4", "@atcute/uint8array": "^1.0.2" } }, "sha512-WEzNSL1EuCVtCQDFYEBIm4dEP6PcMEwi8IYUVIWvT77eO5EjY58F63z5T4qMABxSBM0+L4kqMxypdL1Fzf6LZw=="],
+
+    "@atcute/multibase": ["@atcute/multibase@1.1.4", "", { "dependencies": { "@atcute/uint8array": "^1.0.2" } }, "sha512-NUf5AeeSOmuZHGU+4GAaMtISJoG+ZHtW/vUVA4lK/YDt/7LODAW0Fd0NNIIUPVUoW0xJS6zSEIWvwLLuxmEHhA=="],
+
+    "@atcute/uint8array": ["@atcute/uint8array@1.0.3", "", {}, "sha512-M/K+ihiVW8Pl2PFLzaC4E3l4JaZ1IH05Q0AbPWUC4cVHnd/gZ/1kAF5ngdtGvJeDMirHZ2VAy7OmAsPwR/2nlA=="],
+
+    "@atcute/varint": ["@atcute/varint@1.0.2", "", {}, "sha512-0O31hePzzr4O3NGWHUKKOyta6CGSL+AtN8iir8grGxu9jXyI7DBARlw6PbgKA6uTAvsXdpmRmF8MX+p0TsLnNg=="],
 
     "@atproto-labs/did-resolver": ["@atproto-labs/did-resolver@0.2.0", "", { "dependencies": { "@atproto-labs/fetch": "0.2.3", "@atproto-labs/pipe": "0.1.1", "@atproto-labs/simple-store": "0.2.0", "@atproto-labs/simple-store-memory": "0.1.3", "@atproto/did": "0.1.5", "zod": "^3.23.8" } }, "sha512-y9GOx2gUETynDKmANnBrU5DTf+u0AwKBJpGns1vDDOYMdLdRCFIeYy3UH+TI8YOkcEazjgF5Q3m+LjwriE1KqQ=="],
 
···
 
     "@open-draft/until": ["@open-draft/until@2.1.0", "", {}, "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg=="],
 
+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
+
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+
+    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
+
+    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.10", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog=="],
+
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
+
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
+
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ=="],
+
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ=="],
+
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
+
+    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
+
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
+
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.10", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew=="],
+
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+
+    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
+
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.7", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg=="],
+
+    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q=="],
+
+    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.9", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A=="],
+
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
+
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
+
+    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
+
+    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
+
+    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.0", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA=="],
+
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
+
+    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
+
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
+
+    "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
     "@rc-component/async-validator": ["@rc-component/async-validator@5.0.4", "", { "dependencies": { "@babel/runtime": "^7.24.4" } }, "sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg=="],
 
···
 
     "@tauri-apps/cli-win32-x64-msvc": ["@tauri-apps/cli-win32-x64-msvc@2.6.2", "", { "os": "win32", "cpu": "x64" }, "sha512-ItB8RCKk+nCmqOxOvbNtltz6x1A4QX6cSM21kj3NkpcnjT9rHSMcfyf8WVI2fkoMUJR80iqCblUX6ARxC3lj6w=="],
 
+    "@tauri-apps/plugin-autostart": ["@tauri-apps/plugin-autostart@2.5.0", "", { "dependencies": { "@tauri-apps/api": "^2.6.0" } }, "sha512-smSt0vydfVB950AeYRbO2S/c01SZrgMVg4FOrFLQLom0R0amsu/8zYaxgttriBdxcofjBZuHv4hmROBQIBVXmA=="],
+
     "@tauri-apps/plugin-deep-link": ["@tauri-apps/plugin-deep-link@2.4.0", "", { "dependencies": { "@tauri-apps/api": "^2.6.0" } }, "sha512-scFldWG5FDqLgbHauS5FtsE563Bo00sqYhhWTYwNzIOZFdOJtNY6tBqzqGJ8I1aehPtEVA0LcTNaq8fmDQbDGg=="],
 
+    "@tauri-apps/plugin-fs": ["@tauri-apps/plugin-fs@2.4.0", "", { "dependencies": { "@tauri-apps/api": "^2.6.0" } }, "sha512-Sp8AdDcbyXyk6LD6Pmdx44SH3LPeNAvxR2TFfq/8CwqzfO1yOyV+RzT8fov0NNN7d9nvW7O7MtMAptJ42YXA5g=="],
+
     "@tauri-apps/plugin-opener": ["@tauri-apps/plugin-opener@2.4.0", "", { "dependencies": { "@tauri-apps/api": "^2.6.0" } }, "sha512-43VyN8JJtvKWJY72WI/KNZszTpDpzHULFxQs0CJBIYUdCRowQ6Q1feWTDb979N7nldqSuDOaBupZ6wz2nvuWwQ=="],
+
+    "@tauri-apps/plugin-store": ["@tauri-apps/plugin-store@2.3.0", "", { "dependencies": { "@tauri-apps/api": "^2.6.0" } }, "sha512-mre8er0nXPhyEWQzWCpUd+UnEoBQYcoA5JYlwpwOV9wcxKqlXTGfminpKsE37ic8NUb2BIZqf0QQ9/U3ib2+/A=="],
 
     "@theguild/remark-mermaid": ["@theguild/remark-mermaid@0.2.0", "", { "dependencies": { "mermaid": "^11.0.0", "unist-util-visit": "^5.0.0" }, "peerDependencies": { "react": "^18.2.0" } }, "sha512-o8n57TJy0OI4PCrNw8z6S+vpHtrwoQZzTA5Y3fL0U1NDRIoMg/78duWgEBFsCZcWM1G6zjE91yg1aKCsDwgE2Q=="],
 
···
 
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
+    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
+
     "array-iterate": ["array-iterate@2.0.1", "", {}, "sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg=="],
 
     "ast-types": ["ast-types@0.16.1", "", { "dependencies": { "tslib": "^2.0.1" } }, "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg=="],
···
 
     "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
 
+    "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
+
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
     "diff": ["diff@5.2.0", "", {}, "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A=="],
···
     "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
 
     "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
+
+    "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
 
     "get-own-enumerable-keys": ["get-own-enumerable-keys@1.0.0", "", {}, "sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA=="],
 
···
 
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
+    "react-remove-scroll": ["react-remove-scroll@2.7.1", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA=="],
+
+    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
+
+    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
+
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
 
     "reading-time": ["reading-time@1.5.0", "", {}, "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="],
···
     "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
 
     "slash": ["slash@5.1.0", "", {}, "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg=="],
+
+    "sonner": ["sonner@2.0.6", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q=="],
 
     "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
 
···
 
     "url-parse": ["url-parse@1.5.10", "", { "dependencies": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" } }, "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ=="],
 
+    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
+
+    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
+
     "use-sync-external-store": ["use-sync-external-store@1.5.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A=="],
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
···
     "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
     "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
+    "yocto-queue": ["yocto-queue@1.2.1", "", {}, "sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg=="],
 
     "yoctocolors-cjs": ["yoctocolors-cjs@2.1.2", "", {}, "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA=="],
 

docs/public/client_metadata.json

···
 {
     "client_id": "https://atproto-backup.pages.dev/client_metadata.json",
-    "client_name": "My App",
+    "client_name": "ATProto Backup",
     "client_uri": "https://atproto-backup.pages.dev",
     "logo_uri": "https://atproto-backup.pages.dev/logo.png",
     "tos_uri": "https://atproto-backup.pages.dev/tos",
···
     "redirect_uris": [
         "https://atproto-backup.pages.dev/auth/complete"
     ],
-    "scope": "atproto transition:generic",
     "grant_types": [
         "authorization_code",
         "refresh_token"
     ],
+    "scope": "atproto transition:generic",
     "response_types": [
         "code"
     ],
-    "token_endpoint_auth_method": "none",
     "application_type": "web",
+    "token_endpoint_auth_method": "none",
     "dpop_bound_access_tokens": true
 }

package.json

···
     "tauri": "tauri"
   },
   "dependencies": {
+    "@atcute/car": "^3.1.1",
     "@atproto/api": "^0.15.25",
+    "@atproto/jwk-webcrypto": "^0.1.9",
     "@atproto/oauth-client-browser": "^0.3.27",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.11",
     "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-autostart": "~2",
     "@tauri-apps/plugin-deep-link": "~2",
+    "@tauri-apps/plugin-fs": "~2",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-store": "~2",
     "antd": "^5.26.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "next": "^15.3.5",
+    "next-themes": "^0.4.6",
     "nextra": "^4.2.17",
     "nextra-theme-docs": "^4.2.17",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "shadcn": "^2.9.0",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },

src-tauri/Cargo.lock

···
  "serde_json",
  "tauri",
  "tauri-build",
+ "tauri-plugin-autostart",
  "tauri-plugin-deep-link",
+ "tauri-plugin-fs",
  "tauri-plugin-opener",
  "tauri-plugin-single-instance",
+ "tauri-plugin-store",
+]
+
+[[package]]
+name = "auto-launch"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f012b8cc0c850f34117ec8252a44418f2e34a2cf501de89e29b241ae5f79471"
+dependencies = [
+ "dirs 4.0.0",
+ "thiserror 1.0.69",
+ "winreg 0.10.1",
 ]
 
 [[package]]
···
 
 [[package]]
 name = "dirs"
+version = "4.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca3aa72a6f96ea37bbc5aa912f6788242832f75369bdfdadcb0e38423f100059"
+dependencies = [
+ "dirs-sys 0.3.7",
+]
+
+[[package]]
+name = "dirs"
 version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
 dependencies = [
- "dirs-sys",
+ "dirs-sys 0.5.0",
+]
+
+[[package]]
+name = "dirs-sys"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b1d1d91c932ef41c0f2663aa8b0ca0342d444d842c06914aa0a7e352d0bada6"
+dependencies = [
+ "libc",
+ "redox_users 0.4.6",
+ "winapi",
 ]
 
 [[package]]
···
 dependencies = [
  "libc",
  "option-ext",
- "redox_users",
+ "redox_users 0.5.0",
  "windows-sys 0.60.2",
 ]
 
···
  "rustc_version",
  "toml 0.9.2",
  "vswhom",
- "winreg",
+ "winreg 0.55.0",
 ]
 
 [[package]]
···
 
 [[package]]
 name = "redox_users"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba009ff324d1fc1b900bd1fdb31564febe58a8ccc8a6fdbb93b543d33b13ca43"
+dependencies = [
+ "getrandom 0.2.16",
+ "libredox",
+ "thiserror 1.0.69",
+]
+
+[[package]]
+name = "redox_users"
 version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dd6f9d3d47bdd2ad6945c5015a226ec6155d0bcdfd8f7cd29f86b71f8de99d2b"
···
 dependencies = [
  "anyhow",
  "bytes",
- "dirs",
+ "dirs 6.0.0",
  "dunce",
  "embed_plist",
  "getrandom 0.3.3",
···
 dependencies = [
  "anyhow",
  "cargo_toml",
- "dirs",
+ "dirs 6.0.0",
  "glob",
  "heck 0.5.0",
  "json-patch",
···
 ]
 
 [[package]]
+name = "tauri-plugin-autostart"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "062cdcd483d5e3148c9a64dabf8c574e239e2aa1193cf208d95cf89a676f87a5"
+dependencies = [
+ "auto-launch",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.12",
+]
+
+[[package]]
 name = "tauri-plugin-deep-link"
 version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 ]
 
 [[package]]
+name = "tauri-plugin-fs"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c341290d31991dbca38b31d412c73dfbdb070bb11536784f19dd2211d13b778f"
+dependencies = [
+ "anyhow",
+ "dunce",
+ "glob",
+ "percent-encoding",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "tauri-utils",
+ "thiserror 2.0.12",
+ "toml 0.8.23",
+ "url",
+]
+
+[[package]]
 name = "tauri-plugin-opener"
 version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 ]
 
 [[package]]
+name = "tauri-plugin-store"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5916c609664a56c82aeaefffca9851fd072d4d41f73d63f22ee3ee451508194f"
+dependencies = [
+ "dunce",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.12",
+ "tokio",
+ "tracing",
+]
+
+[[package]]
 name = "tauri-runtime"
 version = "2.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
  "pin-project-lite",
  "slab",
  "socket2",
+ "tokio-macros",
  "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "tokio-macros"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e06d43f1345a3bcd39f6a56dbb7dcab2ba47e68e8ac134855e7e2bdbaf8cab8"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
 ]
 
 [[package]]
···
 checksum = "2da75ec677957aa21f6e0b361df0daab972f13a5bee3606de0638fd4ee1c666a"
 dependencies = [
  "crossbeam-channel",
- "dirs",
+ "dirs 6.0.0",
  "libappindicator",
  "muda",
  "objc2 0.6.1",
···
 checksum = "f3edebf492c8125044983378ecb5766203ad3b4c2f7a922bd7dd207f6d443e95"
 dependencies = [
  "memchr",
+]
+
+[[package]]
+name = "winreg"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "80d0f4e272c85def139476380b12f9ac60926689dd2e01d4923222f40580869d"
+dependencies = [
+ "winapi",
 ]
 
 [[package]]

src-tauri/Cargo.toml

···
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-deep-link = "2"
+tauri-plugin-store = "2"
+tauri-plugin-fs = "2"
 
 [target."cfg(any(target_os = \"macos\", windows, target_os = \"linux\"))".dependencies]
 tauri-plugin-single-instance = { version = "2.0.0", features = ["deep-link"] }
+
+[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
+tauri-plugin-autostart = "2"

src-tauri/capabilities/default.json

···
   ],
   "permissions": [
     "core:default",
-    "opener:default",
     "core:window:default",
     "core:window:allow-start-dragging",
     "core:event:default",
···
     "core:window:allow-close",
     "core:window:allow-minimize",
     "core:window:allow-toggle-maximize",
-    "core:window:allow-internal-toggle-maximize"
+    "core:window:allow-internal-toggle-maximize",
+    "opener:default",
+    "store:default",
+    {
+      "identifier": "opener:allow-open-path",
+      "allow": [
+        {
+          "path": "$DOCUMENT/ATBackup"
+        }
+      ]
+    },
+    "opener:allow-open-url",
+    "fs:default",
+    {
+      "identifier": "fs:allow-exists",
+      "allow": [
+        {
+          "path": "$DOCUMENT/ATBackup/*"
+        },
+        {
+          "path": "$DOCUMENT/ATBackup"
+        }
+      ]
+    },
+    {
+      "identifier": "fs:allow-mkdir",
+      "allow": [
+        {
+          "path": "$DOCUMENT/ATBackup"
+        }
+      ]
+    },
+    "fs:scope-document-recursive",
+    "fs:allow-document-write-recursive"
   ]
 }

src-tauri/capabilities/desktop.json

···
+{
+  "identifier": "desktop-capability",
+  "platforms": [
+    "macOS",
+    "windows",
+    "linux"
+  ],
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "autostart:default"
+  ]
+}

src-tauri/src/lib.rs

···
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     let mut builder = tauri::Builder::default()
+        .plugin(tauri_plugin_autostart::init())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_deep_link::init())
         .plugin(tauri_plugin_opener::init())
         .invoke_handler(tauri::generate_handler![greet])

src-tauri/tauri.conf.json

···
 {
   "$schema": "https://schema.tauri.app/config/2",
-  "productName": "atproto-backup",
+  "productName": "ATBackup",
   "version": "0.1.0",
-  "identifier": "io.github.turtlepaw.atproto.backup",
+  "identifier": "ATBackup",
   "build": {
     "beforeDevCommand": "bun run dev",
     "devUrl": "http://localhost:1420",
···
   "app": {
     "windows": [
       {
-        "title": "ATP Backup",
+        "title": "ATBackup",
         "width": 800,
         "height": 600,
-        "decorations": false
+        "decorations": false,
+        "label": "main"
       }
     ],
     "security": {

src/App.css

···
 
 .titlebar {
   height: 40px;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(150px);
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(100px);
   user-select: none;
   display: flex;
   justify-content: flex-end;
···
   line-height: 1;
   vertical-align: middle;
 }
+
+/* Main content area that starts below the titlebar */
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #6366f1 #18181b;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  background: #18181b;
+  border-radius: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #6366f1;
+  border-radius: 8px;
+  min-height: 40px;
+  border: 2px solid #18181b;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #818cf8;
+}
+
+.custom-scrollbar::-webkit-scrollbar-corner {
+  background: #18181b;
+}

src/App.tsx

···
 import { useState, useEffect } from "react";
-import reactLogo from "./assets/react.svg";
 import { invoke } from "@tauri-apps/api/core";
 import "./App.css";
 import { Button } from "./components/ui/button";
 import LoginPage from "./routes/Login";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import {
-  Agent,
-  AtpAgent,
-  type AtpSessionData,
-  type AtpSessionEvent,
-} from "@atproto/api";
-import {
-  BrowserOAuthClient,
-  OAuthSession,
-} from "@atproto/oauth-client-browser";
-import { LoaderIcon } from "lucide-react";
-import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
-
-function LoggedInScreen({
-  session,
-  onLogout,
-  agent,
-}: {
-  session: OAuthSession;
-  onLogout: () => void;
-  agent: Agent;
-}) {
-  const [userData, setUserData] = useState<ProfileViewDetailed | null>(null);
-
-  useEffect(() => {
-    (async () => {
-      const sessionData = await agent.getProfile({ actor: agent.assertDid });
-      setUserData(sessionData.data);
-    })();
-  }, [agent]);
-
-  return (
-    <div className="p-4 mt-10">
-      <div className="flex justify-between items-center mb-4">
-        <h1 className="text-2xl font-bold">Welcome!</h1>
-        <Button onClick={onLogout}>Logout</Button>
-      </div>
-      <div className="bg-card rounded-lg p-4">
-        <p className="mb-2 text-white">
-          Logged in as: <span className="font-mono">@{userData?.handle}</span>
-        </p>
-        <p className="text-sm text-muted-foreground"></p>
-      </div>
-    </div>
-  );
-}
+import { Agent } from "@atproto/api";
+import { OAuthSession } from "@atproto/oauth-client-browser";
+import { LoaderCircleIcon, LoaderIcon } from "lucide-react";
+import { AuthProvider, useAuth } from "./Auth";
+import { initializeLocalStorage } from "./localstorage_ployfill";
+import { Home } from "./routes/Home";
+import { ThemeProvider } from "./theme-provider";
+import { Toaster } from "sonner";
+import { ScrollArea } from "./components/ui/scroll-area";
 
-function App() {
-  const [session, setSession] = useState<OAuthSession | null>(null);
+function AppContent() {
+  const { isLoading, isAuthenticated, profile, client, login, logout } =
+    useAuth();
   const appWindow = getCurrentWindow();
-  const [client, setClient] = useState<BrowserOAuthClient | null>(null);
-  const [agent, setAgent] = useState<Agent | null>(null);
+
+  const [isLocalStorageReady, setIsLocalStorageReady] = useState(false);
 
-  // Load session from localStorage on mount
   useEffect(() => {
-    (async () => {
-      const client = await BrowserOAuthClient.load({
-        clientId: "https://atproto-backup.pages.dev/client_metadata.json",
-        handleResolver: "https://bsky.social",
-      });
+    const initStorage = async () => {
+      try {
+        await initializeLocalStorage();
+        setIsLocalStorageReady(true);
+      } catch (error) {
+        console.error("Failed to initialize localStorage:", error);
+        setIsLocalStorageReady(true); // Continue anyway
+      }
+    };
 
-      //@ts-expect-error
-      const result: undefined | { session: OAuthSession; state?: string } =
-        await client.init();
-
-      if (result) {
-        const { session, state } = result;
-        if (state != null) {
-          console.log(
-            `${session.sub} was successfully authenticated (state: ${state})`
-          );
-        } else {
-          console.log(`${session.sub} was restored (last active session)`);
-        }
-        setSession(session);
-        setAgent(new Agent(session));
-      }
-      setClient(client);
-    })();
+    initStorage();
   }, []);
 
-  const handleLogin = (newSession: OAuthSession) => {
-    setSession(newSession);
-    setAgent(new Agent(newSession));
-  };
-
-  const handleLogout = () => {
-    setSession(null);
-    setAgent(null);
-  };
-
   return (
-    <main className="dark bg-background min-h-screen flex flex-col">
+    <main className="bg-background dark min-h-screen flex flex-col">
       <div className="titlebar" data-tauri-drag-region>
         <div className="controls">
           <Button
···
         </div>
       </div>
 
-      {client ? (
-        <>
-          {session && agent ? (
-            <LoggedInScreen
-              session={session}
-              onLogout={handleLogout}
-              agent={agent}
-            />
-          ) : (
-            <LoginPage onLogin={handleLogin} client={client} />
-          )}
-        </>
-      ) : (
-        <div className="flex-1 flex items-center justify-center">
-          <LoaderIcon className="animate-spin" />
-        </div>
-      )}
+      <ScrollArea>
+        {isLoading || !isLocalStorageReady ? (
+          <div className="fixed inset-0 flex items-center justify-center">
+            <LoaderCircleIcon className="animate-spin text-white/80" />
+          </div>
+        ) : isAuthenticated ? (
+          <Home profile={profile!!} onLogout={logout} />
+        ) : (
+          <LoginPage onLogin={login} client={client} />
+        )}
+      </ScrollArea>
+
+      <Toaster />
     </main>
+  );
+}
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <AuthProvider>
+        <AppContent />
+      </AuthProvider>
+    </ThemeProvider>
   );
 }
 

src/Auth.tsx

···
+import { Agent } from "@atproto/api";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { OAuthClient, type OAuthSession } from "@atproto/oauth-client";
+import { BrowserOAuthClient } from "@atproto/oauth-client-browser";
+import { load, Store } from "@tauri-apps/plugin-store";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+interface StoredSession {
+  did: string;
+}
+
+interface AuthContextType {
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  profile: ProfileViewDetailed | null;
+  client: OAuthClient | null;
+  login: (session: OAuthSession) => Promise<void>;
+  logout: () => Promise<void>;
+  agent: Agent | null;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [profile, setProfile] = useState<ProfileViewDetailed | null>(null);
+  const [client, setClient] = useState<OAuthClient | null>(null);
+  const [agent, setAgent] = useState<Agent | null>(null);
+
+  // Initialize OAuth client
+  useEffect(() => {
+    const init = async () => {
+      setIsLoading(true);
+      try {
+        const client = await BrowserOAuthClient.load({
+          clientId: "https://atproto-backup.pages.dev/client_metadata.json",
+          handleResolver: "https://bsky.social",
+        });
+
+        setClient(client);
+
+        // Try to restore existing session from storage
+        try {
+          //@ts-expect-error
+          const result: undefined | { session: OAuthSession; state?: string } =
+            await client.init();
+
+          if (result) {
+            const { session, state } = result;
+            if (state != null) {
+              console.log(
+                `${session.sub} was successfully authenticated (state: ${state})`
+              );
+            } else {
+              console.log(`${session.sub} was restored (last active session)`);
+            }
+            await login(session);
+          } else {
+            const store = await Store.load("store.json", { autoSave: true });
+            const sub = (await store.get("session")) as string;
+            if (sub) {
+              const session = await client.restore(sub);
+              await login(session);
+              return;
+            }
+          }
+        } catch (error) {
+          console.error("Failed to restore session:", error);
+        }
+      } catch (error) {
+        console.error("Failed to initialize auth:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, []);
+
+  const login = async (session: OAuthSession) => {
+    try {
+      const store = await Store.load("store.json", { autoSave: true });
+      store.set("session", session.did);
+      const agent = new Agent(session);
+      setAgent(agent);
+      setIsLoading(true);
+
+      const actor = await agent.getProfile({ actor: session.did });
+      setProfile(actor.data);
+    } catch (error) {
+      console.error("Login failed:", error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = async () => {
+    try {
+      if (client && profile) {
+        // Revoke the session and clear storage
+        await client.revoke(profile.did);
+        const store = await Store.load("store.json", { autoSave: true });
+        // probably unnecessary
+        await store.clear();
+        setProfile(null);
+      }
+    } catch (error) {
+      console.error("Logout failed:", error);
+      throw error;
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        isLoading,
+        isAuthenticated: !!profile,
+        profile,
+        client,
+        login,
+        logout,
+        agent,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

src/assets/ATTRIBUTIONS.md

···
+`cloudy_sunset.png` - "Birds retreating to the forest at dusk on a cloudy evening" 
+by Arachnidly, CC BY-SA 4.0, from Wikimedia Commons
+`night_sky.jpg` - by Mauro H Mathias, CC BY 2.0, from Flickr (https://commons.wikimedia.org/wiki/File:-i---i-_(24729862071).jpg)
+`milky_way.jpg` - "Milky Way over Bontecou Lake" by Juliancolton, CC BY-SA 4.0 (https://commons.wikimedia.org/wiki/File:Bontecou_Lake_Milky_Way_panorama.jpg)

src/components/ui/avatar.tsx

···
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

···
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/dropdown-menu.tsx

···
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/progress.tsx

···
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

src/components/ui/scroll-area.tsx

···
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/components/ui/sonner.tsx

···
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/lib/backup.ts

···
+import { Agent } from "@atproto/api";
+import { createBackupDir, getBackupDir } from "./paths";
+import { join, resolve } from "@tauri-apps/api/path";
+import {
+  mkdir,
+  readDir,
+  readTextFile,
+  writeFile,
+  remove,
+} from "@tauri-apps/plugin-fs";
+import { CarStats, getCarStats } from "./stats";
+
+export interface Metadata {
+  did: string;
+  timestamp: string;
+  backupType: string;
+  filePath: string;
+  stats: CarStats;
+}
+
+export class BackupManager {
+  private agent: Agent;
+  private maxBackups = 3;
+
+  constructor(agent: Agent) {
+    this.agent = agent;
+  }
+
+  async startBackup(): Promise<Metadata> {
+    const did = this.agent.did;
+    if (did == null) throw Error("Unauthenticated");
+
+    // Get the repo data
+    const data = await this.agent.com.atproto.sync.getRepo({ did: did });
+
+    // Write to backup location
+    const metadata = await this.writeBackupToFile(data.data, did);
+
+    // Clean up old backups after creating new one
+    await this.cleanupOldBackups();
+
+    return metadata;
+  }
+
+  private async writeBackupToFile(
+    repoData: Uint8Array,
+    did: string
+  ): Promise<Metadata> {
+    try {
+      // Create backup directory structure
+      await createBackupDir();
+      const backupDir = await getBackupDir();
+      const timestamp = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
+      const backupPath = await join(backupDir, `${timestamp}_backup`);
+      await mkdir(backupPath);
+
+      // Write the repo data as binary file
+      const repoFilePath = await join(backupPath, "repo.car");
+      await writeFile(repoFilePath, repoData);
+
+      const stats = await getCarStats(repoData);
+
+      // Create a metadata file
+      const metadata = {
+        did: did,
+        timestamp: new Date().toISOString(),
+        backupType: "full_repo",
+        filePath: repoFilePath,
+        stats,
+      };
+
+      const metadataPath = await join(backupPath, "metadata.json");
+      const metadataJson = JSON.stringify(metadata, null, 2);
+      await writeFile(metadataPath, new TextEncoder().encode(metadataJson));
+
+      console.log(`Backup written to: ${backupPath}`);
+      return metadata;
+    } catch (error) {
+      console.error("Failed to write backup:", error);
+      throw error;
+    }
+  }
+
+  private async cleanupOldBackups(): Promise<void> {
+    try {
+      const backups = await this.getBackups();
+
+      // Sort backups by timestamp (newest first)
+      const sortedBackups = backups.sort(
+        (a, b) =>
+          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+      );
+
+      // If we have more than maxBackups, delete the oldest ones
+      if (sortedBackups.length > this.maxBackups) {
+        const backupsToDelete = sortedBackups.slice(this.maxBackups);
+
+        for (const backup of backupsToDelete) {
+          await this.deleteBackup(backup);
+        }
+
+        console.log(`Deleted ${backupsToDelete.length} old backup(s)`);
+      }
+    } catch (error) {
+      console.error("Failed to cleanup old backups:", error);
+      // Don't throw here - we don't want backup creation to fail because of cleanup issues
+    }
+  }
+
+  private async deleteBackup(backup: Metadata): Promise<void> {
+    try {
+      const rootBackupDir = await getBackupDir();
+      const dir = await readDir(rootBackupDir);
+
+      // Find the backup directory that contains this backup
+      for (const backupDir of dir) {
+        if (backupDir.isDirectory) {
+          const backupPath = await resolve(rootBackupDir, backupDir.name);
+          const metadataPath = await join(backupPath, "metadata.json");
+
+          try {
+            const metadata = await readTextFile(metadataPath);
+            const parsedMetadata = JSON.parse(metadata);
+
+            // Check if this is the backup we want to delete
+            if (
+              parsedMetadata.timestamp === backup.timestamp &&
+              parsedMetadata.did === backup.did
+            ) {
+              await remove(backupPath, { recursive: true });
+              console.log(`Deleted backup: ${backupPath}`);
+              break;
+            }
+          } catch (e) {
+            // Skip if we can't read metadata
+            continue;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Failed to delete backup:`, error);
+    }
+  }
+
+  async getBackups(): Promise<Metadata[]> {
+    const data: Metadata[] = [];
+    await createBackupDir();
+    const rootBackupDir = await getBackupDir();
+    const dir = await readDir(rootBackupDir);
+
+    for (const backupDir of dir) {
+      if (backupDir.isDirectory) {
+        const backup = await readDir(
+          await resolve(rootBackupDir, backupDir.name)
+        );
+        const metadataFile = backup.find((e) => e.name == "metadata.json");
+        if (metadataFile) {
+          try {
+            const metadata = await readTextFile(
+              await resolve(rootBackupDir, backupDir.name, metadataFile.name)
+            );
+            data.push(JSON.parse(metadata));
+          } catch (error) {
+            console.error(
+              `Failed to read metadata for ${backupDir.name}:`,
+              error
+            );
+            // Continue processing other backups
+          }
+        }
+      }
+    }
+
+    return data;
+  }
+}

src/lib/paths.ts

···
+import { documentDir, resolve } from "@tauri-apps/api/path";
+import { exists, BaseDirectory, mkdir } from "@tauri-apps/plugin-fs";
+
+const dir = "ATBackup";
+export async function getBackupDir() {
+  const docs = await documentDir();
+  return await resolve(docs, dir);
+}
+
+export async function createBackupDir() {
+  const dirExists = await exists(dir, {
+    baseDir: BaseDirectory.Document,
+  });
+
+  if (!dirExists) {
+    await mkdir(dir, {
+      baseDir: BaseDirectory.Document,
+    });
+  }
+}

src/lib/stats.ts

···
+import { CarReader, RepoReader } from "@atcute/car/v4";
+
+export interface CarStats {
+  totalBlocks: number;
+  totalSize: number;
+  recordCount: number;
+  recordTypes: Record<string, number>;
+  fileSize: number;
+  collections: string[];
+  createdAt: string;
+}
+
+export async function getCarStats(carData: Uint8Array): Promise<CarStats> {
+  try {
+    // Parse the CAR file
+    await using repo = RepoReader.fromUint8Array(carData);
+
+    let totalBlocks = 0;
+    let totalSize = 0;
+    let recordCount = 0;
+    const recordTypes: Record<string, number> = {};
+    const collections = new Set<string>();
+
+    // Iterate through all blocks in the CAR file
+    for await (const record of repo) {
+      totalBlocks++;
+
+      try {
+        // Try to decode the block as a record
+        if (record) {
+          // Count different record types
+          const type = (record.record as any)["$type"]
+          if (type) {
+            recordTypes[type] = (recordTypes[type] || 0) + 1;
+            recordCount++;
+
+            // Extract collection name
+            collections.add(type);
+          }
+        }
+      } catch (e) {
+        // Not all blocks are records, some are structural
+        continue;
+      }
+    }
+
+    return {
+      totalBlocks,
+      totalSize,
+      recordCount,
+      recordTypes,
+      fileSize: carData.length,
+      collections: Array.from(collections),
+      createdAt: new Date().toISOString(),
+    };
+  } catch (error) {
+    console.error("Error parsing CAR file:", error);
+    throw new Error(`Failed to parse CAR file: ${error}`);
+  }
+}

src/localstorage_ployfill.ts

···
+// localStorage-polyfill.ts
+import { Store } from "@tauri-apps/plugin-store";
+
+interface StorageData {
+  [key: string]: string;
+}
+
+class LocalStoragePolyfill implements Storage {
+  private store: Store;
+  private cache: Map<string, string>;
+  private initialized: boolean = false;
+  private initPromise: Promise<void> | null = null;
+
+  constructor(store: Store) {
+    this.store = store;
+    this.cache = new Map();
+  }
+
+  async init(): Promise<void> {
+    if (this.initialized) return;
+
+    if (this.initPromise) {
+      return this.initPromise;
+    }
+
+    this.initPromise = this._initialize();
+    return this.initPromise;
+  }
+
+  private async _initialize(): Promise<void> {
+    try {
+      const data = (await this.store.get("data")) as StorageData | null;
+      if (data && typeof data === "object") {
+        Object.entries(data).forEach(([key, value]) => {
+          this.cache.set(key, value);
+        });
+      }
+    } catch (error) {
+      console.error("Failed to load localStorage data:", error);
+    }
+
+    this.initialized = true;
+  }
+
+  private async persist(): Promise<void> {
+    try {
+      const data: StorageData = Object.fromEntries(this.cache);
+      await this.store.set("data", data);
+      await this.store.save();
+    } catch (error) {
+      console.error("Failed to persist localStorage data:", error);
+    }
+  }
+
+  getItem(key: string): string | null {
+    return this.cache.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.cache.set(key, String(value));
+    // Persist asynchronously to avoid blocking
+    this.persist().catch(console.error);
+  }
+
+  removeItem(key: string): void {
+    this.cache.delete(key);
+    this.persist().catch(console.error);
+  }
+
+  clear(): void {
+    this.cache.clear();
+    this.persist().catch(console.error);
+  }
+
+  get length(): number {
+    return this.cache.size;
+  }
+
+  key(index: number): string | null {
+    return Array.from(this.cache.keys())[index] || null;
+  }
+
+  // Required for Storage interface compatibility
+  [name: string]: any;
+}
+
+// Initialize and replace global localStorage
+let tauriLocalStorage: LocalStoragePolyfill | undefined;
+
+export const initializeLocalStorage = async (): Promise<void> => {
+  if (typeof window !== "undefined") {
+    const store = await Store.load("localStorage.json");
+    tauriLocalStorage = new LocalStoragePolyfill(store);
+    await tauriLocalStorage.init();
+
+    // Try to replace localStorage using Object.defineProperty
+    try {
+      Object.defineProperty(window, "localStorage", {
+        value: tauriLocalStorage,
+        writable: true,
+        configurable: true,
+      });
+    } catch (error) {
+      console.warn("Could not replace global localStorage:", error);
+      // Fallback: store reference for manual usage
+      (window as any).__tauriLocalStorage = tauriLocalStorage;
+    }
+  }
+};
+
+export const getTauriLocalStorage = (): LocalStoragePolyfill | undefined => {
+  return tauriLocalStorage;
+};
+
+// Helper function to get localStorage (either polyfill or native)
+export const getLocalStorage = (): Storage => {
+  if (typeof window !== "undefined") {
+    return window.localStorage || (window as any).__tauriLocalStorage;
+  }
+  throw new Error("localStorage not available");
+};
+
+export default tauriLocalStorage;

src/routes/Home.tsx

···
+import { Button } from "@/components/ui/button";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { openPath } from "@tauri-apps/plugin-opener";
+import { appDataDir, documentDir } from "@tauri-apps/api/path";
+import { createBackupDir, getBackupDir } from "@/lib/paths";
+import { useEffect, useState, useRef } from "react";
+import {
+  History,
+  LoaderCircleIcon,
+  ChevronDown,
+  ChevronUp,
+  FolderOpen,
+  Download,
+  Database,
+  FileText,
+  HardDrive,
+  Calendar,
+  Package,
+  Zap,
+  Heart,
+  Users,
+  User,
+} from "lucide-react";
+import { BackupManager, Metadata } from "@/lib/backup";
+import { useAuth } from "@/Auth";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+
+export function Home({
+  profile,
+  onLogout,
+}: {
+  profile: ProfileViewDetailed;
+  onLogout: () => void;
+}) {
+  const [isDirLoading, setDirLoading] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  const handleBackupComplete = () => {
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  return (
+    <div className="p-4 mt-10">
+      <div className="flex justify-between items-center mb-4">
+        <div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <div className="flex flex-row items-center gap-2 cursor-pointer p-2 rounded-md transition-colors hover:bg-white/10">
+                <Avatar>
+                  <AvatarImage src={profile.avatar} />
+                  <AvatarFallback>
+                    {profile.displayName ?? profile.handle}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="text-white">
+                  {profile.displayName ?? `@${profile.handle}`}
+                </span>
+              </div>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent className="ml-3">
+              <DropdownMenuItem
+                onClick={onLogout}
+                className="cursor-pointer text-red-500"
+              >
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div className="bg-card rounded-lg p-4 mb-4">
+        <p className="mb-2 text-white">Backups</p>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            className="cursor-pointer"
+            onClick={async () => {
+              try {
+                setDirLoading(true);
+                await createBackupDir();
+                const appDataDirPath = await getBackupDir();
+                openPath(appDataDirPath);
+              } finally {
+                setDirLoading(false);
+              }
+            }}
+            disabled={isDirLoading}
+          >
+            {isDirLoading ? (
+              <LoaderCircleIcon className="w-4 h-4 animate-spin mr-2" />
+            ) : (
+              <FolderOpen className="w-4 h-4 mr-2" />
+            )}
+            Open backups
+          </Button>
+
+          <StartBackup onBackupComplete={handleBackupComplete} />
+        </div>
+      </div>
+
+      <Backups refreshTrigger={refreshTrigger} />
+    </div>
+  );
+}
+
+function StartBackup({ onBackupComplete }: { onBackupComplete: () => void }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { agent } = useAuth();
+
+  return (
+    <Button
+      variant="outline"
+      className="cursor-pointer"
+      onClick={async () => {
+        try {
+          setIsLoading(true);
+          if (agent == null) {
+            toast("Agent not initialized, try to reload the app.");
+            return;
+          }
+          const manager = new BackupManager(agent!!);
+          await manager.startBackup();
+          toast("Backup complete!");
+          onBackupComplete(); // Trigger refresh
+        } catch (err: any) {
+          toast(err.toString());
+          console.error(err);
+        } finally {
+          setIsLoading(false);
+        }
+      }}
+      disabled={isLoading}
+    >
+      {isLoading ? (
+        <LoaderCircleIcon className="animate-spin text-white/80" />
+      ) : (
+        <span>Backup now</span>
+      )}
+    </Button>
+  );
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+function getRecordTypeIcon(type: string) {
+  if (type.includes("post")) return <FileText className="w-4 h-4" />;
+  if (type.includes("like")) return <Heart className="w-4 h-4" />;
+  if (type.includes("follow")) return <Users className="w-4 h-4" />;
+  if (type.includes("profile")) return <User className="w-4 h-4" />;
+  return <Package className="w-4 h-4" />;
+}
+
+function Backups({ refreshTrigger }: { refreshTrigger: number }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [backups, setBackups] = useState<Metadata[]>([]);
+  const [showCollections, setShowCollections] = useState<
+    Record<string, boolean>
+  >({});
+  const { agent } = useAuth();
+  const contentRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const loadBackups = async () => {
+    if (agent == null) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const manager = new BackupManager(agent);
+      const backupsList = await manager.getBackups();
+      // Sort backups by timestamp (newest first)
+      const sortedBackups = backupsList.sort(
+        (a, b) =>
+          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+      );
+      setBackups(sortedBackups);
+    } catch (err: any) {
+      toast(err.toString());
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadBackups();
+  }, [agent, refreshTrigger]); // Add refreshTrigger to dependencies
+
+  //@ts-expect-error
+  const units: Record<Intl.RelativeTimeFormatUnit, number> = {
+    year: 24 * 60 * 60 * 1000 * 365,
+    month: (24 * 60 * 60 * 1000 * 365) / 12,
+    day: 24 * 60 * 60 * 1000,
+    hour: 60 * 60 * 1000,
+    minute: 60 * 1000,
+    second: 1000,
+  };
+
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+  const getRelativeTime = (d1: Date, d2 = new Date()) => {
+    const elapsed = d1.getTime() - d2.getTime();
+    for (const u in units) {
+      if (Math.abs(elapsed) > units[u as keyof typeof units] || u == "second") {
+        return rtf.format(
+          Math.round(elapsed / units[u as keyof typeof units]),
+          u as Intl.RelativeTimeFormatUnit
+        );
+      }
+    }
+  };
+
+  const getTotalRecords = (backup: Metadata) => {
+    return Object.values(backup.stats?.recordTypes || {}).reduce(
+      (sum, count) => sum + count,
+      0
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="bg-card rounded-lg p-4">
+        <div className="flex items-center gap-2 mb-4">
+          <History className="w-5 h-5" />
+          <p className="text-white text-lg font-semibold">Previous backups</p>
+        </div>
+        <div className="flex items-center justify-center py-8">
+          <LoaderCircleIcon className="w-6 h-6 animate-spin text-white/80" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-card rounded-lg p-4">
+      <div className="flex items-center gap-2 mb-4">
+        <History className="w-5 h-5" />
+        <p className="text-white text-lg font-semibold">Previous backups</p>
+      </div>
+
+      {backups.length === 0 ? (
+        <div className="text-muted-foreground text-sm">No backups found.</div>
+      ) : (
+        <div className="space-y-4">
+          {backups.map((backup, index) => {
+            const expanded = !!showCollections[backup.filePath];
+            const totalRecords = getTotalRecords(backup);
+            const recordTypes = Object.entries(backup.stats?.recordTypes || {});
+
+            return (
+              <div
+                key={backup.filePath}
+                className="rounded-lg border border-white/10 shadow-sm"
+              >
+                <div
+                  className="cursor-pointer select-none hover:bg-white/5 transition-colors p-4 rounded-lg"
+                  onClick={() =>
+                    setShowCollections((prev) => ({
+                      ...prev,
+                      [backup.filePath]: !prev[backup.filePath],
+                    }))
+                  }
+                >
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      {index === 0 && <Badge variant="default">Newest</Badge>}
+                      <div className="flex items-center gap-2 text-white/80">
+                        <span>
+                          {getRelativeTime(new Date(backup.timestamp))} (
+                          {new Date(backup.timestamp).toLocaleString()})
+                        </span>
+                        <span>•</span>
+                        <span>{formatBytes(backup.stats?.fileSize || 0)}</span>
+                        <span>•</span>
+                        <span className="font-semibold text-white/90">
+                          {backup.stats?.collections.length || 0} collections
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      className={`transition-transform duration-300 ${
+                        expanded ? "rotate-180" : "rotate-0"
+                      }`}
+                    >
+                      <ChevronDown className="w-5 h-5 text-white/60" />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div className="flex items-center gap-2 p-3 rounded-lg bg-white/5">
+                      <FileText className="w-5 h-5 text-blue-400" />
+                      <div>
+                        <p className="text-white/60 text-xs">Records</p>
+                        <p className="text-white font-semibold">
+                          {totalRecords.toLocaleString()}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2 p-3 rounded-lg bg-white/5">
+                      <Package className="w-5 h-5 text-orange-400" />
+                      <div>
+                        <p className="text-white/60 text-xs">Collections</p>
+                        <p className="text-white font-semibold">
+                          {backup.stats.collections.length.toLocaleString()}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2 p-3 rounded-lg bg-white/5">
+                      <Database className="w-5 h-5 text-purple-400" />
+                      <div>
+                        <p className="text-white/60 text-xs">Blocks</p>
+                        <p className="text-white font-semibold">
+                          {backup.stats?.totalBlocks?.toLocaleString() || "-"}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2 p-3 rounded-lg bg-white/5">
+                      <HardDrive className="w-5 h-5 text-green-400" />
+                      <div>
+                        <p className="text-white/60 text-xs">File Size</p>
+                        <p className="text-white font-semibold">
+                          {formatBytes(backup.stats?.fileSize || 0)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  ref={(el) => {
+                    contentRefs.current[backup.filePath] = el;
+                  }}
+                  style={{
+                    maxHeight:
+                      expanded && contentRefs.current[backup.filePath]
+                        ? `${
+                            contentRefs.current[backup.filePath]!.scrollHeight
+                          }px`
+                        : 0,
+                    opacity: expanded ? 1 : 0,
+                    transition:
+                      "max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s",
+                    overflow: "hidden",
+                  }}
+                >
+                  <div className="border-t border-white/10 mx-4 mt-4" />
+                  <div className="pt-4 p-4">
+                    <h4 className="text-white font-medium mb-3 flex items-center gap-2">
+                      <Package className="w-4 h-4" />
+                      Record Types
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                      {recordTypes.map(([type, count]) => {
+                        const percentage =
+                          totalRecords > 0 ? (count / totalRecords) * 100 : 0;
+                        return (
+                          <div
+                            key={type}
+                            className="p-3 rounded-lg bg-white/5 border border-white/10"
+                          >
+                            <div className="flex items-center justify-between mb-2">
+                              <div className="flex items-center gap-2">
+                                {getRecordTypeIcon(type)}
+                                <span className="text-white/80 text-sm font-medium">
+                                  {type}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <span className="text-white font-semibold">
+                                  {count.toLocaleString()}
+                                </span>
+                                <span className="text-white/60 text-xs">
+                                  ({percentage.toFixed(1)}%)
+                                </span>
+                              </div>
+                            </div>
+                            <Progress value={percentage} className="h-2" />
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/routes/Login.tsx

···
   CredentialSession,
   AtpSessionData,
 } from "@atproto/api";
-import {
-  BrowserOAuthClient,
-  BrowserOAuthClientOptions,
-  OAuthSession,
-} from "@atproto/oauth-client-browser";
 import { onOpenUrl } from "@tauri-apps/plugin-deep-link";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { OAuthClient, type OAuthSession } from "@atproto/oauth-client";
+import { SquareArrowOutUpRight } from "lucide-react";
 
 type LoginMethod = "credential" | "oauth";
 
 interface LoginPageProps {
   onLogin: (session: OAuthSession) => void;
-  client: BrowserOAuthClient;
+  client: OAuthClient | null;
 }
 
 export default function LoginPage({
···
             // Get the first URL from the array and parse it
             const url = new URL(urls[0]);
 
+            console.log("OAuth callback URL:", url.searchParams.entries);
             // Process the OAuth callback with the URLSearchParams directly
             const session = await oauthClient.callback(url.searchParams);
             console.log("OAuth callback successful!", session);
···
           } catch (err) {
             console.error("Failed to process OAuth callback:", err);
             setError("Failed to complete OAuth login");
+            setLoading(false);
           } finally {
             processingOAuthRef.current = false;
           }
···
       }
     };
     initOAuthClient();
-  }, [onLogin]);
+  }, [onLogin, oauthClient]);
 
   const handleLogin = async () => {
     if (!oauthClient) {
···
         return;
       }
 
-      // Sign in using OAuth with popup
-      const session = await oauthClient.signInPopup(identifier, {
+      const url = await oauthClient.authorize(identifier, {
         scope: "atproto transition:generic",
         ui_locales: "en",
         signal: new AbortController().signal,
       });
 
-      console.log("OAuth login successful!", session);
-      onLogin(session);
+      await openUrl(url);
     } catch (err: any) {
       console.error(err);
       setError(err.message || "OAuth login failed");
-    } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background px-4">
-      <Card className="w-full max-w-sm">
+    <div
+      className="min-h-screen flex items-center justify-center bg-background px-4 relative"
+      style={{
+        backgroundImage: "url(/src/assets/milky_way.jpg)",
+        backgroundSize: "300%",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <Card className="w-full max-w-sm bg-black/50 backdrop-blur-md">
         <CardHeader>
-          <CardTitle>Login with your handle on the Atmosphere</CardTitle>
+          <CardTitle className="cursor-default">
+            Login with your handle on the Atmosphere
+          </CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <Input
-            placeholder="Username or email"
+            placeholder="example.bsky.social"
             value={identifier}
             onChange={(e) => setIdentifier(e.target.value)}
           />
···
           <Button
             className="w-full cursor-pointer"
             onClick={handleLogin}
-            disabled={loading || identifier == null}
+            disabled={loading || !identifier || !oauthClient}
           >
             {loading ? "Logging in..." : "Login"}
           </Button>
         </CardContent>
       </Card>
+      <div
+        className="absolute left-0 bottom-0 m-4 text-xs text-white/60 flex flex-row items-center gap-1"
+        style={{ pointerEvents: "auto" }}
+      >
+        <button
+          type="button"
+          className="gap-2 p-0 bg-transparent border-none text-inherit hover:underline flex items-center cursor-pointer"
+          onClick={() =>
+            openUrl(
+              "https://commons.wikimedia.org/wiki/File:Bontecou_Lake_Milky_Way_panorama.jpg"
+            )
+          }
+          tabIndex={0}
+          aria-label="Open image in browser"
+        >
+          <span>Image by Juliancolton, CC BY-SA 4.0</span>
+          <SquareArrowOutUpRight size={14} />
+        </button>
+      </div>
     </div>
   );
 }

src/theme-provider.tsx

···
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};