feat: dialogs, logout relaunch, timeout for lock dialog, public link …

…preview carousel, network drive sync indicator, bump deps, misc

locales/de/de.json

@@ -1014,7 +1014,8 @@
 					"confirmPin": "PIN bestätigen"
 				},
 				"lock": {
-					"wrongPin": "Falscher PIN"
+					"wrongPin": "Falscher PIN",
+					"tooManyAttempts": "Zu viele Entsperrversuche. Versuch es später erneut."
 				}
 			}
 		},

locales/en/en.json

@@ -1024,7 +1024,8 @@
 					"confirmPin": "Confirm PIN"
 				},
 				"lock": {
-					"wrongPin": "Wrong PIN"
+					"wrongPin": "Wrong PIN",
+					"tooManyAttempts": "Too many unlock attempts, try again later."
 				}
 			}
 		},

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@filen/web",
 	"private": false,
-	"version": "0.1.81",
+	"version": "0.1.82",
 	"type": "module",
 	"description": "Filen Web & Desktop app",
 	"scripts": {
@@ -24,9 +24,9 @@
 		"@emoji-mart/data": "^1.1.2",
 		"@emoji-mart/react": "^1.1.1",
 		"@filen/desktop": "^3.0.38",
-		"@filen/network-drive": "^0.9.39",
+		"@filen/network-drive": "^0.9.40",
 		"@filen/sdk": "^0.1.191",
-		"@filen/sync": "^0.1.91",
+		"@filen/sync": "^0.1.92",
 		"@radix-ui/react-alert-dialog": "^1.0.5",
 		"@radix-ui/react-avatar": "^1.0.4",
 		"@radix-ui/react-checkbox": "^1.0.4",

src/components/desktopHandler.tsx

@@ -12,6 +12,7 @@ import { useLocalStorage } from "@uidotdev/usehooks"
 import useIsSyncActive from "@/hooks/useIsSyncActive"
 import useSyncIssueCount from "@/hooks/useSyncIssueCount"
 import useSyncConfirmDeletion from "@/hooks/useSyncConfirmDeletion"
+import useNetworkDriveStats from "@/hooks/useNetworkDriveStats"
 
 const updateDesktopConfigMutex = new Semaphore(1)
 
@@ -34,6 +35,7 @@ export const DesktopHandler = memo(() => {
 	const syncIssueCount = useSyncIssueCount()
 	const [startMinimizedEnabled] = useLocalStorage<boolean>("startMinimizedEnabled", false)
 	const syncConfirmDeletion = useSyncConfirmDeletion()
+	const { uploadsInProgress: networkDriveUploadsInProgress } = useNetworkDriveStats()
 
 	const currentDesktopConfigStringified = useMemo(() => {
 		return JSON.stringify(desktopConfig)
@@ -123,10 +125,10 @@ export const DesktopHandler = memo(() => {
 		}
 
 		Promise.all([
-			window.desktopAPI.updateIsSyncing(isSyncActive),
+			window.desktopAPI.updateIsSyncing(isSyncActive || networkDriveUploadsInProgress > 0),
 			window.desktopAPI.updateWarningCount(syncIssueCount + syncConfirmDeletion.length)
 		]).catch(console.error)
-	}, [isSyncActive, syncIssueCount, authed, syncConfirmDeletion.length])
+	}, [isSyncActive, syncIssueCount, authed, syncConfirmDeletion.length, networkDriveUploadsInProgress])
 
 	useEffect(() => {
 		if (!authed) {

src/components/dialogs/desktopUpdate.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button"
 import { IS_DESKTOP } from "@/constants"
 import useErrorToast from "@/hooks/useErrorToast"
 import { Loader } from "lucide-react"
+import { useMiscStore } from "@/stores/misc.store"
 
 export const DesktopUpdateDialog = memo(() => {
 	const [open, setOpen] = useState<boolean>(false)
@@ -20,6 +21,10 @@ export const DesktopUpdateDialog = memo(() => {
 	const { t } = useTranslation()
 	const [version, setVersion] = useState<string>("1")
 	const [desktopUpdateDialogDismissedVersions, setDesktopUpdateDialogDismissedVersions] = useState<Record<string, boolean>>({})
+	const setUpdateDialogOpen = useMiscStore(useCallback(state => state.setUpdateDialogOpen, []))
+	const isOnlineDialogOpen = useMiscStore(useCallback(state => state.isOnlineDialogOpen, []))
+	const maintenanceDialogOpen = useMiscStore(useCallback(state => state.maintenanceDialogOpen, []))
+	const lockDialogOpen = useMiscStore(useCallback(state => state.lockDialogOpen, []))
 
 	const dismiss = useCallback(() => {
 		if (isUpdating) {
@@ -69,6 +74,10 @@ export const DesktopUpdateDialog = memo(() => {
 		e.stopPropagation()
 	}, [])
 
+	useEffect(() => {
+		setUpdateDialogOpen(open)
+	}, [open, setUpdateDialogOpen])
+
 	useEffect(() => {
 		let listener: ReturnType<typeof window.desktopAPI.onMainToWindowMessage> | null = null
 
@@ -86,7 +95,7 @@ export const DesktopUpdateDialog = memo(() => {
 	}, [onUpdateDownloaded])
 
 	return (
-		<AlertDialog open={open}>
+		<AlertDialog open={open && !maintenanceDialogOpen && !isOnlineDialogOpen && !lockDialogOpen}>
 			<AlertDialogContent
 				onEscapeKeyDown={isUpdating ? preventDefault : dismiss}
 				className="outline-none focus:outline-none active:outline-none hover:outline-none select-none"

src/components/dialogs/isOnline.tsx

@@ -6,12 +6,16 @@ import { Unplug } from "lucide-react"
 import { IS_DESKTOP, IS_APPLE_DEVICE, DESKTOP_TOPBAR_HEIGHT } from "@/constants"
 import useDriveURLState from "@/hooks/useDriveURLState"
 import WindowControls from "../windowControls"
+import { useMiscStore } from "@/stores/misc.store"
 
 export const IsOnlineDialog = memo(() => {
 	const [open, setOpen] = useState<boolean>(!window.navigator.onLine)
 	const { t } = useTranslation()
 	const isPinging = useRef<boolean>(false)
 	const { publicLink } = useDriveURLState()
+	const setIsOnlineDialogOpen = useMiscStore(useCallback(state => state.setIsOnlineDialogOpen, []))
+	const maintenanceDialogOpen = useMiscStore(useCallback(state => state.maintenanceDialogOpen, []))
+	const lockDialogOpen = useMiscStore(useCallback(state => state.lockDialogOpen, []))
 
 	const onEscapeKeyDown = useCallback((e: KeyboardEvent) => {
 		e.preventDefault()
@@ -44,6 +48,10 @@ export const IsOnlineDialog = memo(() => {
 		}
 	}, [])
 
+	useEffect(() => {
+		setIsOnlineDialogOpen(open)
+	}, [open, setIsOnlineDialogOpen])
+
 	useEffect(() => {
 		ping()
 
@@ -75,7 +83,7 @@ export const IsOnlineDialog = memo(() => {
 	}
 
 	return (
-		<Dialog open={open}>
+		<Dialog open={open && !maintenanceDialogOpen && !lockDialogOpen}>
 			<DialogContent
 				className="fullscreen-dialog no-close-button outline-none focus:outline-none active:outline-none hover:outline-none bg-background flex flex-row items-center justify-center select-none"
 				onEscapeKeyDown={onEscapeKeyDown}

src/components/dialogs/lock.tsx

@@ -8,8 +8,9 @@ import { useTranslation } from "react-i18next"
 import { LockIcon } from "lucide-react"
 import useMountedEffect from "@/hooks/useMountedEffect"
 import WindowControls from "../windowControls"
+import { useMiscStore } from "@/stores/misc.store"
 
-// This is by no means safe. In the packaged electron version we can disable the console, making it _almost_ impossible for a normal user to access the app when it's locked.
+// This is by no means safe. In the packaged electron version we can disable the console, making it _almost_ impossible for a _normal_ user to access the app when it's locked.
 // You could still open the Chromium DB in the user's install directory, but if someone with this kind of knowledge sits (or remotes) at your PC, you have other problems.
 
 export const LockDialog = memo(() => {
@@ -21,6 +22,9 @@ export const LockDialog = memo(() => {
 	const errorToast = useErrorToast()
 	const { t } = useTranslation()
 	const ref = useRef<HTMLInputElement>(null)
+	const triesRef = useRef<number>(0)
+	const [lockNextTry, setLockNextTry] = useLocalStorage<number>("lockNextTry", 0)
+	const setLockDialogOpen = useMiscStore(useCallback(state => state.setLockDialogOpen, []))
 
 	const onEscapeKeyDown = useCallback((e: KeyboardEvent) => {
 		e.preventDefault()
@@ -65,17 +69,40 @@ export const LockDialog = memo(() => {
 			return
 		}
 
-		if (pin !== lockPin) {
-			errorToast(t("settings.security.dialogs.lock.wrongPin"))
+		const now = Date.now()
+
+		if (lockNextTry > now) {
+			errorToast(t("settings.security.dialogs.lock.tooManyAttempts"))
+
+			setPin("")
 
+			return
+		}
+
+		if (pin !== lockPin) {
 			setPin("")
 
+			triesRef.current += 1
+
+			if (triesRef.current >= 10) {
+				setLockNextTry(now + 300000)
+
+				triesRef.current = 0
+
+				errorToast(t("settings.security.dialogs.lock.tooManyAttempts"))
+			} else {
+				errorToast(t("settings.security.dialogs.lock.wrongPin"))
+			}
+
 			return
 		}
 
+		triesRef.current = 0
+
+		setLockNextTry(0)
 		resetTimer()
 		setOpen(false)
-	}, [pin, lockPin, resetTimer, errorToast, t, lockTimeout])
+	}, [pin, lockPin, resetTimer, errorToast, t, lockTimeout, lockNextTry, setLockNextTry])
 
 	const onKeyUp = useCallback(() => {
 		if (pin.length === 4) {
@@ -100,6 +127,10 @@ export const LockDialog = memo(() => {
 		ref.current?.focus()
 	}, [])
 
+	useEffect(() => {
+		setLockDialogOpen(open)
+	}, [open, setLockDialogOpen])
+
 	useEffect(() => {
 		resetTimer()
 

src/components/dialogs/maintenance.tsx

@@ -1,18 +1,24 @@
-import { memo, useCallback } from "react"
+import { memo, useCallback, useEffect } from "react"
 import { Dialog, DialogContent } from "@/components/ui/dialog"
 import { useTranslation } from "react-i18next"
 import { useRemoteConfigStore } from "@/stores/remoteConfig.store"
 import { Unplug } from "lucide-react"
+import { useMiscStore } from "@/stores/misc.store"
 
 export const MaintenanceDialog = memo(() => {
 	const { t } = useTranslation()
 	const maintenanceActive = useRemoteConfigStore(useCallback(state => (state.config ? state.config.maintenance : false), []))
+	const setMaintenanceDialogOpen = useMiscStore(useCallback(state => state.setMaintenanceDialogOpen, []))
 
 	const onEscapeKeyDown = useCallback((e: KeyboardEvent) => {
 		e.preventDefault()
 		e.stopPropagation()
 	}, [])
 
+	useEffect(() => {
+		setMaintenanceDialogOpen(maintenanceActive)
+	}, [maintenanceActive, setMaintenanceDialogOpen])
+
 	return (
 		<Dialog open={maintenanceActive}>
 			<DialogContent