[ENG-967] Reset confirmation for db sd reset (#1221)

Reset confirmation for db sd reset

apps/desktop/src/App.tsx

@@ -16,6 +16,7 @@ import {
 	routes
 } from '@sd/interface';
 import { getSpacedropState } from '@sd/interface/hooks/useSpacedropState';
+import { Dialogs } from '@sd/ui';
 import '@sd/ui/style';
 import * as commands from './commands';
 
@@ -118,6 +119,7 @@ export default function App() {
 			<PlatformProvider platform={platform}>
 				<QueryClientProvider client={queryClient}>
 					<AppInner />
+					<Dialogs />
 				</QueryClientProvider>
 			</PlatformProvider>
 		</RspcProvider>

interface/ErrorFallback.tsx

@@ -3,6 +3,7 @@ import { FallbackProps } from 'react-error-boundary';
 import { useRouteError } from 'react-router';
 import { useDebugState } from '@sd/client';
 import { Button } from '@sd/ui';
+import { showAlertDialog } from './components';
 import { useOperatingSystem, useTheme } from './hooks';
 
 export function RouterErrorBoundary() {
@@ -55,6 +56,21 @@ export function ErrorPage({
 	const debug = useDebugState();
 	const os = useOperatingSystem();
 	const isMacOS = os === 'macOS';
+
+	const resetHandler = () => {
+		showAlertDialog({
+			title: 'Reset',
+			value: 'Are you sure you want to reset Spacedrive? Your database will be deleted.',
+			label: 'Confirm',
+			cancelBtn: true,
+			onSubmit: () => {
+				localStorage.clear();
+				// @ts-expect-error
+				window.__TAURI_INVOKE__('reset_spacedrive');
+			}
+		});
+	};
+
 	if (!submessage && debug.enabled)
 		submessage = 'Check the console (CMD/CTRL + OPTION + i) for stack trace.';
 
@@ -98,13 +114,8 @@ export function ErrorPage({
 						</p>
 						<Button
 							variant="colored"
-							className="mt-4 max-w-xs border-transparent bg-red-500"
-							onClick={() => {
-								localStorage.clear();
-
-								// @ts-expect-error
-								window.__TAURI_INVOKE__('reset_spacedrive');
-							}}
+							className="max-w-xs mt-4 bg-red-500 border-transparent"
+							onClick={resetHandler}
 						>
 							Reset & Quit App
 						</Button>

interface/components/AlertDialog.tsx

@@ -10,6 +10,7 @@ interface Props extends UseDialogProps {
 	value?: string; // value to be displayed as text or in an input box
 	label?: string; // button label
 	inputBox?: boolean; // whether the dialog should display the `value` in a disabled input box or as text
+	cancelBtn?: boolean; // whether the dialog should have a cancel button
 }
 
 const AlertDialog = (props: Props) => {
@@ -20,6 +21,7 @@ const AlertDialog = (props: Props) => {
 			form={useZodForm()}
 			dialog={useDialog(props)}
 			ctaLabel={props.label !== undefined ? props.label : 'Done'}
+			cancelBtn={props.cancelBtn}
 			onCancelled={false}
 		>
 			{props.description && <div className="mb-3 text-sm">{props.description}</div>}
@@ -37,7 +39,7 @@ const AlertDialog = (props: Props) => {
 							}}
 							size="icon"
 						>
-							<Clipboard className="h-4 w-4" />
+							<Clipboard className="w-4 h-4" />
 						</Button>
 					}
 				/>

packages/ui/src/Dialog.tsx

@@ -118,6 +118,7 @@ export interface DialogProps<S extends FieldValues>
 	children?: ReactNode;
 	ctaDanger?: boolean;
 	closeLabel?: string;
+	cancelBtn?: boolean;
 	description?: string;
 	onCancelled?: boolean | (() => void);
 	submitDisabled?: boolean;
@@ -187,7 +188,7 @@ export function Dialog<S extends FieldValues>({
 
 									{props.children}
 								</div>
-								<div className="flex flex-row justify-end space-x-2 border-t border-app-line bg-app-selected p-3">
+								<div className="flex flex-row justify-end p-3 space-x-2 border-t border-app-line bg-app-selected">
 									{form.formState.isSubmitting && <Loader />}
 									{props.buttonsSideContent && (
 										<div>{props.buttonsSideContent}</div>
@@ -209,7 +210,21 @@ export function Dialog<S extends FieldValues>({
 											</Button>
 										</RDialog.Close>
 									)}
-
+									{props.cancelBtn && (
+										<RDialog.Close asChild>
+											<Button
+												size="sm"
+												variant="gray"
+												onClick={
+													typeof onCancelled === 'function'
+														? onCancelled
+														: undefined
+												}
+											>
+												Cancel
+											</Button>
+										</RDialog.Close>
+									)}
 									<Button
 										type="submit"
 										size="sm"