Merge 7c1a7653ac into 6ded4e96e7

app/components/home.tsx

@@ -29,6 +29,9 @@ import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
 import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
+import { useSyncStore } from "../store/sync";
+import { showToast } from "./ui-lib";
+import Locale from "@/app/locales";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -149,6 +152,40 @@ export function WindowContent(props: { children: React.ReactNode }) {
   );
 }
 
+function useSyncOnStart() {
+  const syncStore = useSyncStore();
+  const storeHasHydrated = useSyncStore((s) => s._hasHydrated);
+  useEffect(() => {
+    let running = true;
+    setTimeout(async () => {
+      if (
+        !(
+          storeHasHydrated &&
+          running &&
+          syncStore.cloudSync() &&
+          syncStore.autoSync.onStart
+        )
+      ) {
+        return;
+      }
+      const dismissSyncingToast = showToast(Locale.Settings.Sync.IsSyncing);
+      try {
+        await syncStore.sync();
+        dismissSyncingToast();
+        showToast(Locale.Settings.Sync.Success);
+      } catch (e: unknown) {
+        dismissSyncingToast();
+        showToast(Locale.Settings.Sync.Fail);
+        console.error("[Sync]", e);
+      }
+    });
+    return () => {
+      running = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storeHasHydrated]);
+}
+
 function Screen() {
   const config = useAppConfig();
   const location = useLocation();
@@ -165,6 +202,7 @@ function Screen() {
   useEffect(() => {
     loadAsyncGoogleFont();
   }, []);
+  useSyncOnStart();
 
   if (isArtifact) {
     return (

app/components/settings.tsx

@@ -477,6 +477,21 @@ function SyncConfigModal(props: { onClose?: () => void }) {
             </ListItem>
           </List>
         )}
+
+        <List>
+          <ListItem title={Locale.Settings.Sync.Config.AutoSync.OnStartup}>
+            <input
+              type="checkbox"
+              checked={syncStore.autoSync.onStart}
+              onChange={(e) => {
+                syncStore.update(
+                  (config) =>
+                    (config.autoSync.onStart = e.currentTarget.checked),
+                );
+              }}
+            />
+          </ListItem>
+        </List>
       </Modal>
     </div>
   );

app/components/ui-lib.tsx

@@ -229,13 +229,19 @@ export function showToast(
   content: string,
   action?: ToastProps["action"],
   delay = 3000,
-) {
+): () => void {
   const div = document.createElement("div");
   div.className = styles.show;
   document.body.appendChild(div);
 
   const root = createRoot(div);
+  let closeCalled = false;
   const close = () => {
+    if (closeCalled) {
+      return;
+    } else {
+      closeCalled = true;
+    }
     div.classList.add(styles.hide);
 
     setTimeout(() => {
@@ -249,6 +255,8 @@ export function showToast(
   }, delay);
 
   root.render(<Toast content={content} action={action} onClose={close} />);
+
+  return close;
 }
 
 export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {