web: show warning if there are unsynced changes on logout

apps/web/src/components/error-text/index.tsx

@@ -30,8 +30,13 @@ export function ErrorText(props: ErrorTextProps) {
     <Flex
       bg="var(--background-error)"
       p={1}
-      mt={2}
-      sx={{ borderRadius: "default", ...sx, maxHeight: 300, overflowY: "auto" }}
+      sx={{
+        borderRadius: "default",
+        ...sx,
+        alignItems: "flex-start",
+        maxHeight: 300,
+        overflowY: "auto"
+      }}
       {...restProps}
     >
       <ErrorIcon size={15} color="var(--icon-error)" />

apps/web/src/dialogs/confirm.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Box, Checkbox, Label, Text } from "@theme-ui/components";
+import { Checkbox, Flex, Label, Text } from "@theme-ui/components";
 import { useRef } from "react";
 import { mdToHtml } from "../utils/md";
 import Dialog from "../components/dialog";
@@ -25,6 +25,7 @@ import { BaseDialogProps, DialogManager } from "../common/dialog-manager";
 import { db } from "../common/db";
 import { getChangelog } from "../utils/version";
 import { downloadUpdate } from "../utils/updater";
+import { ErrorText } from "../components/error-text";
 
 type Check = { text: string; default?: boolean };
 export type ConfirmDialogProps<TCheckId extends string> = BaseDialogProps<
@@ -36,6 +37,7 @@ export type ConfirmDialogProps<TCheckId extends string> = BaseDialogProps<
   positiveButtonText?: string;
   negativeButtonText?: string;
   message?: string;
+  warnings?: string[];
   checks?: Partial<Record<TCheckId, Check>>;
 };
 
@@ -50,6 +52,7 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
     negativeButtonText,
     positiveButtonText,
     message,
+    warnings,
     checks
   } = props;
   const checkedItems = useRef<Record<TCheckId, boolean>>({} as any);
@@ -62,6 +65,12 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
       width={width}
       description={subtitle}
       onClose={() => onClose(false)}
+      onOpen={() => {
+        for (const checkId in checks) {
+          checkedItems.current[checkId as TCheckId] =
+            checks[checkId as TCheckId]?.default || false;
+        }
+      }}
       positiveButton={
         positiveButtonText
           ? {
@@ -80,8 +89,10 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
           : undefined
       }
     >
-      <Box
+      <Flex
         sx={{
+          flexDirection: "column",
+          gap: 1,
           pb: !negativeButtonText && !positiveButtonText ? 2 : 0,
           p: { m: 0 }
         }}
@@ -93,6 +104,9 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
             dangerouslySetInnerHTML={{ __html: mdToHtml(message) }}
           />
         ) : null}
+        {warnings?.map((text) => (
+          <ErrorText key={text} error={text} />
+        ))}
         {checks
           ? Object.entries<Check | undefined>(checks).map(
               ([id, check]) =>
@@ -101,7 +115,7 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
                     key={id}
                     id={id}
                     variant="text.body"
-                    sx={{ fontWeight: "bold", mt: 1 }}
+                    sx={{ fontWeight: "bold" }}
                   >
                     <Checkbox
                       name={id}
@@ -122,7 +136,7 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
                 )
             )
           : null}
-      </Box>
+      </Flex>
     </Dialog>
   );
 });
@@ -148,16 +162,21 @@ export function showMultiPermanentDeleteConfirmation(length: number) {
   });
 }
 
-export function showLogoutConfirmation() {
-  return ConfirmDialog.show({
+export async function showLogoutConfirmation() {
+  return await ConfirmDialog.show({
     title: `Logout?`,
     message:
-      "Logging out will clear all data stored on THIS DEVICE. Are you sure you want to log out?",
+      "Are you sure you want to log out and clear all data stored on THIS DEVICE?",
     positiveButtonText: "Yes",
     negativeButtonText: "No",
+    warnings: (await db.hasUnsyncedChanges())
+      ? [
+          "You have unsynced notes. Take a backup or sync your notes to avoid losing critical data."
+        ]
+      : [],
     checks: {
       backup: {
-        text: "Take a backup before logging out to prevent data loss?",
+        text: "Take a backup before logging out?",
         default: true
       }
     }