[ENG 946] Added zooming for image preview (#2368)

* added buttons for zoom in and out

* currently added only English translation

* added magnification prop

* added a `div` Wrapper for Scrolling

* Update Original.tsx

* Update de/common.json

* Update es/common.json

* Update fr/common.json

* Update it/common.json

* Update js/common.json

* Update nl/common.json

* Update ru/common.json

* Update tr/common.json

* Update by/common.json

* Update zh-CN/common.json

* Update zh-TW/common.json

* Reset Zoom

* Squashed commit of the following:

commit 36ae94c
Merge: df02017 9126332
Author: Aditya <[email protected]>
Date:   Sat Apr 27 21:35:22 2024 +0530

    Merge branch 'spacedriveapp:main' into main

commit 9126332
Author: ameer2468 <[email protected]>
Date:   Sat Apr 27 18:08:07 2024 +0300

    [MOB-89] Separate headers (#2408)

    * separate headers

    improvements to headers

    cleanup

    missed cleanup

    documentation

    * Update SearchStack.tsx

commit a61a7be
Author: ameer2468 <[email protected]>
Date:   Fri Apr 26 20:36:21 2024 +0300

    Windows mouse resize fix (#2407)

    Update useMouseItemResize.ts

commit 9384bad
Author: Vítor Vasconcellos <[email protected]>
Date:   Thu Apr 25 21:29:55 2024 -0300

    Revert OpenDAL for ephemeral location (#2399)

    * Revert "OpenDAL - Ephemeral Locations (#2283)"

    This reverts commit 2848782.

    * Format

    * Fix some diff problems

commit e76ff78
Author: Arnab Chakraborty <[email protected]>
Date:   Thu Apr 25 20:29:55 2024 -0400

    Alpha 0.2.13 (#2394)

    bump

commit 476447a
Author: Vítor Vasconcellos <[email protected]>
Date:   Thu Apr 25 21:20:36 2024 -0300

    Fix server release again (#2403)

    * Fix server release again

    * small improvement to regex

commit ab46cff
Author: Jamie Pine <[email protected]>
Date:   Thu Apr 25 14:37:25 2024 -0700

    Reactive file identification (#2396)

    * yes

    * Explain mysterious if

    * Use id alias just for consistency reasons

    * yes

    * Rust fmt

    * fix ts

    ---------

    Co-authored-by: Ericson "Fogo" Soares <[email protected]>
    Co-authored-by: Utku Bakir <[email protected]>

commit 64bbce3
Author: Utku <[email protected]>
Date:   Thu Apr 25 16:06:35 2024 -0400

    Fix title (#2398)

    * fix task manager title

    * 2 more config item

commit 310eb28
Author: Vítor Vasconcellos <[email protected]>
Date:   Thu Apr 25 14:58:50 2024 -0300

    Fix `cargo test`  & improve `pnpm prep` native deps download (#2393)

    Couple of fixes
     - Increase `pnpm prep` connection timeout to 5min, to better handle downloading native deps under flaky network conditions
     - Fix `cargo test` and cache-factory CI
     - Clippy and fmt

commit b86d3d2
Author: ameer2468 <[email protected]>
Date:   Thu Apr 25 20:29:46 2024 +0300

    [ENG-1762] Reverse mouse resize direction (#2395)

    Update useMouseItemResize.ts

commit 4493372
Author: Artsiom Voitas <[email protected]>
Date:   Thu Apr 25 19:26:36 2024 +0300

    Improved translation into Belarusian and Russian (#2391)

    * feat: improved translation on belarusian and russian

    * updated keys related to vacuum

    * updated keys related to vacuum

commit b1ffbee
Author: Jamie Pine <[email protected]>
Date:   Thu Apr 25 09:14:43 2024 -0700

    Fix thumbnail generation reactivity  (#2392)

    fix

commit 73f521a
Author: Ericson "Fogo" Soares <[email protected]>
Date:   Thu Apr 25 01:06:11 2024 -0300

    [ENG-1629] Write new file identifier with the task system (#2334)

    * Introduce deep vs shallow for indexer tasks with different priorities

    * Make job wait to dispatch if it's paused

    * Extract file metadata task on file identifier job

    * Some initial drafts on object processor task

    * Object processor task for file identifier

    * File Identifier job and shallow

commit 463babe
Author: Heavysnowjakarta <[email protected]>
Date:   Thu Apr 25 07:38:34 2024 +0800

    I18n polish (zh-cn) (#2337)

    * i18n some polishes

    * reviewed 1st-100th strings of zh-cn i18n

    * change the indent to 2 space characters

commit 2c777e5
Author: Vítor Vasconcellos <[email protected]>
Date:   Wed Apr 24 20:37:38 2024 -0300

    Fix core test (#2386)

    * Fix core test

    * Import CompressedCRDTOperations

    ---------

    Co-authored-by: Ericson "Fogo" Soares <[email protected]>

commit 57b0139
Author: ameer2468 <[email protected]>
Date:   Thu Apr 25 02:34:24 2024 +0300

    [MOB-90] Visual adjustments (#2383)

    * Visual adjustments

    * Update Tags.tsx

    * cleanup

    * remove prop

    * remove hitslop

    * sectionlist

commit e0f540a
Author: Arnab Chakraborty <[email protected]>
Date:   Wed Apr 24 14:20:51 2024 -0400

    Small Trash UI fixes (#2385)

    * Update index.tsx

    * More ui fixes + toast

    * Update index.tsx

    * Add Translations

commit 279aaf2
Author: Utku <[email protected]>
Date:   Wed Apr 24 12:48:14 2024 -0400

    hide placeholders (#2384)

commit 3bed56d
Author: Utku <[email protected]>
Date:   Wed Apr 24 10:25:22 2024 -0400

    Alpha 0.2.12 (#2382)

    * pnpm

    * alpha 0.2.12

    * make pnpm version non strict

commit 0b6bd05
Author: Oscar Beaumont <[email protected]>
Date:   Wed Apr 24 18:09:18 2024 +0800

    Fix main (#2381)

    * fix

    * fix

commit ae6c49b
Author: Oscar Beaumont <[email protected]>
Date:   Wed Apr 24 16:43:30 2024 +0800

    Improved p2p settings (#2379)

    improved p2p settings

commit 918c2a9
Author: Brendan Allan <[email protected]>
Date:   Wed Apr 24 16:26:50 2024 +0800

    Batch ingest sync operations (#2378)

    batch ingest sync operations

commit 643bd3a
Author: Oscar Beaumont <[email protected]>
Date:   Wed Apr 24 16:27:31 2024 +0800

    Block size (#2377)

    Block size + some Clippy

commit e009a04
Author: Utku <[email protected]>
Date:   Tue Apr 23 19:20:59 2024 -0400

    Revert "[MOB-85] Better headers" (#2376)

    Revert "[MOB-85] Better headers (#2375)"

    This reverts commit 6a556a4.

commit 6a556a4
Author: ameer2468 <[email protected]>
Date:   Wed Apr 24 01:21:31 2024 +0300

    [MOB-85] Better headers (#2375)

    * wip

    * improve headers

    * cleanup

commit b4037d6
Author: Arnab Chakraborty <[email protected]>
Date:   Mon Apr 22 15:46:10 2024 -0400

    Open Trash from the application (#2338)

    * Open Trash from the application

    * Working Trash Sidebar Button

    * Small UI fixes

    * Update common.json

    * Move openTrash to Tauri Command instead of RSPC

    * format and remove type assertion

    ---------

    Co-authored-by: Utku Bakir <[email protected]>

commit 745399e
Author: nikec <[email protected]>
Date:   Mon Apr 22 20:54:42 2024 +0200

    [ENG-1751] Improve active item handling (#2367)

    base

commit 959ccdf
Author: Oscar Beaumont <[email protected]>
Date:   Mon Apr 22 20:43:44 2024 +0800

    Reintroduce P2P Settings (#2365)

    * redo backend to be less cringe

    * fixed up

commit ef969f1
Author: Oscar Beaumont <[email protected]>
Date:   Mon Apr 22 19:47:47 2024 +0800

    Remove indexer rules from ephemeral indexer (#2319)

    remove indexer rules from ephemeral indexer

commit 548fff1
Author: Brendan Allan <[email protected]>
Date:   Mon Apr 22 18:29:54 2024 +0800

    Ignore empty object/filepath search filters (#2371)

commit 52c5c2b
Author: Oscar Beaumont <[email protected]>
Date:   Mon Apr 22 18:28:35 2024 +0800

    Show errors creating P2P listeners on startup (#2372)

    * do it

    * fix accuracy

    * `useRef` as god intended

commit 20e5430
Author: nikec <[email protected]>
Date:   Mon Apr 22 12:27:30 2024 +0200

    [ENG-1753] Only open quick preview when items are selected (#2374)

    only toggle when items are selected

commit 13e4ff6
Author: nikec <[email protected]>
Date:   Mon Apr 22 12:25:53 2024 +0200

    [ENG-1752] Fix explorer selection reset when closing quick preview via keybind (#2373)

    prevent selection reset

commit 51c94c8
Author: Oscar Beaumont <[email protected]>
Date:   Mon Apr 22 18:12:06 2024 +0800

    Fix Docker start command (#2370)

commit d689e7e
Author: ameer2468 <[email protected]>
Date:   Sun Apr 21 17:28:27 2024 +0300

    [ENG-1750] Update context menu colors (#2369)

    update context menu colors

commit df02017
Merge: 5624054 619a4c8
Author: Aditya <[email protected]>
Date:   Sat Apr 20 13:14:52 2024 +0530

    Merge branch 'main' of https://github.com/Raghav-45/spacedrive

commit 947354f
Author: Oscar Beaumont <[email protected]>
Date:   Sat Apr 20 11:21:20 2024 +0800

    Remove files over p2p feature (#2364)

    * goodbye

    * types

    * a

commit f97a761
Author: ameer2468 <[email protected]>
Date:   Sat Apr 20 02:18:54 2024 +0300

    [ENG-1745] Mouse wheel resize (#2366)

    * Resize layout items with mouse wheel

    icon/item size using mouse wheel

    Update useMouseItemResize.ts

    Update useMouseItemResize.ts

    * improve comment

    * fb

    * Update useMouseItemResize.ts

    * Update IconSize.tsx

commit 619a4c8
Merge: df4f627 795bb18
Author: Aditya <[email protected]>
Date:   Tue Aug 29 16:59:18 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit df4f627
Merge: dfb5192 e4b0361
Author: Aditya <[email protected]>
Date:   Tue Aug 22 20:44:09 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit dfb5192
Merge: c1bfc32 a0a1c67
Author: Aditya <[email protected]>
Date:   Thu Aug 17 21:22:49 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit c1bfc32
Merge: de274c3 9c0aec8
Author: Aditya <[email protected]>
Date:   Tue Aug 15 19:43:43 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit de274c3
Merge: 14faf0b c86a728
Author: Aditya <[email protected]>
Date:   Sun Aug 13 21:54:16 2023 +0530

    Merge branch 'spacedriveapp:main' into main

commit 14faf0b
Merge: 3e013d8 baf0328
Author: Aditya <[email protected]>
Date:   Thu Aug 10 06:54:01 2023 -0400

    Merge branch 'spacedriveapp:main' into main

commit 3e013d8
Merge: 2e702f2 7708ba5
Author: Aditya <[email protected]>
Date:   Tue Aug 8 11:21:07 2023 -0400

    Merge branch 'spacedriveapp:main' into main

commit 2e702f2
Author: Brendan Allan <[email protected]>
Date:   Tue Aug 8 07:58:58 2023 -0700

    Mention pnpm dev:web in CONTRIBUTING.md

commit a1c5c55
Author: Raghav-45 <[email protected]>
Date:   Tue Aug 8 18:49:50 2023 +0530

    Update command to run server

    I encountered an issue where the cargo run -p server command was not functioning properly. It took me nearly an hour to pinpoint the problem, which turned out to be related to a modification in the Cargo.toml file. This change was made by @Brendonovich during their work on issue #1181, which pertained to *syncing ingestion*.

    Initially, I believed that re-cloning the repository from GitHub would resolve the issue. However, after attempting this solution exactly 5 times, I realized my assumption was incorrect. Despite the time and effort spent, I was able to successfully identify and rectify the problem.

* conflicts

* Revert "conflicts"

This reverts commit 2f1066a.

* Revert "Squashed commit of the following:"

This reverts commit cd2435e.

* change in line endings from 'LF' to 'CRLF'.

* Update common.json

* Update common.json

* Update common.json

* fixed indent

---------

Co-authored-by: Utku Bakir <[email protected]>

interface/app/$libraryId/Explorer/FilePath/Original.tsx

@@ -29,6 +29,7 @@ interface OriginalRendererProps {
 	isDark: boolean;
 	childClassName?: string;
 	size?: number;
+	magnification?: number;
 	mediaControls?: boolean;
 	frame?: boolean;
 	isSidebarPreview?: boolean;
@@ -163,16 +164,23 @@ const ORIGINAL_RENDERERS: {
 		const size = useSize(ref);
 
 		return (
-			<Image
-				ref={ref}
-				src={props.src}
-				size={size}
-				onLoad={props.onLoad}
-				onError={props.onError}
-				decoding={props.size ? 'async' : 'sync'}
-				className={clsx(props.className, props.frameClassName)}
-				crossOrigin="anonymous" // Here it is ok, because it is not a react attr
-			/>
+			<div className="custom-scroll quick-preview-images-scroll flex size-full justify-center transition-all">
+				<Image
+					ref={ref}
+					src={props.src}
+					size={size}
+					style={{ transform: `scale(${props.magnification})` }}
+					onLoad={props.onLoad}
+					onError={props.onError}
+					decoding={props.size ? 'async' : 'sync'}
+					className={clsx(
+						props.className,
+						props.frameClassName,
+						'origin-center transition-transform'
+					)}
+					crossOrigin="anonymous" // Here it is ok, because it is not a react attr
+				/>
+			</div>
 		);
 	}
 };

interface/app/$libraryId/Explorer/FilePath/Thumb.tsx

@@ -40,6 +40,7 @@ export interface ThumbProps {
 	childClassName?: string | ((type: ThumbType) => string | undefined);
 	isSidebarPreview?: boolean;
 	childProps?: HTMLAttributes<HTMLElement>;
+	magnification?: number;
 }
 
 type ThumbType = { variant: 'original' } | { variant: 'thumbnail' } | { variant: 'icon' };
@@ -217,6 +218,7 @@ export const FileThumb = forwardRef<HTMLImageElement, ThumbProps>((props, ref) =
 						isDark={isDark}
 						childClassName={childClassName}
 						size={props.size}
+						magnification={props.magnification}
 						mediaControls={props.mediaControls}
 						frame={props.frame}
 						isSidebarPreview={props.isSidebarPreview}

interface/app/$libraryId/Explorer/QuickPreview/index.tsx

@@ -2,6 +2,8 @@ import {
 	ArrowLeft,
 	ArrowRight,
 	DotsThree,
+	MagnifyingGlassMinus,
+	MagnifyingGlassPlus,
 	Plus,
 	SidebarSimple,
 	Slideshow,
@@ -81,6 +83,7 @@ export const QuickPreview = () => {
 	const thumb = createRef<HTMLDivElement>();
 	const [thumbErrorToast, setThumbErrorToast] = useState<ToastMessage>();
 	const [showMetadata, setShowMetadata] = useState<boolean>(false);
+	const [magnification, setMagnification] = useState<number>(1);
 	const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
 	const [isRenaming, setIsRenaming] = useState<boolean>(false);
 	const [newName, setNewName] = useState<string | null>(null);
@@ -149,6 +152,7 @@ export const QuickPreview = () => {
 	useEffect(() => {
 		setNewName(null);
 		setThumbErrorToast(undefined);
+		setMagnification(1);
 
 		if (open || item) return;
 
@@ -423,6 +427,35 @@ export const QuickPreview = () => {
 									</div>
 
 									<div className="flex flex-1 items-center justify-end gap-1">
+										<Tooltip label={t('zoom_in')}>
+											<IconButton
+												onClick={() =>
+													setMagnification(
+														(currentMagnification) =>
+															currentMagnification +
+															currentMagnification * 0.2
+													)
+												}
+												// this is same formula as intrest calculation
+											>
+												<MagnifyingGlassPlus />
+											</IconButton>
+										</Tooltip>
+
+										<Tooltip label={t('zoom_out')}>
+											<IconButton
+												onClick={() =>
+													setMagnification(
+														(currentMagnification) =>
+															currentMagnification / (1 + 0.2)
+													)
+												}
+												// this is same formula as intrest calculation
+											>
+												<MagnifyingGlassMinus />
+											</IconButton>
+										</Tooltip>
+
 										<DropdownMenu.Root
 											trigger={
 												<div className="flex">
@@ -537,6 +570,7 @@ export const QuickPreview = () => {
 										!icon && 'h-full',
 										textKinds.includes(kind) && 'select-text'
 									)}
+									magnification={magnification}
 								/>
 
 								{explorerLayoutStore.showImageSlider && activeItem && (

interface/locales/be/common.json

@@ -500,5 +500,7 @@
   "your_account": "Ваш уліковы запіс",
   "your_account_description": "Уліковы запіс Spacedrive і інфармацыя.",
   "your_local_network": "Ваша лакальная сетка",
-  "your_privacy": "Ваша прыватнасць"
+  "your_privacy": "Ваша прыватнасць",
+  "zoom_in": "Павялічыць",
+  "zoom_out": "Змяншэння"
 }

interface/locales/de/common.json

@@ -500,5 +500,7 @@
   "your_account": "Ihr Konto",
   "your_account_description": "Spacedrive-Konto und -Informationen.",
   "your_local_network": "Ihr lokales Netzwerk",
-  "your_privacy": "Ihre Privatsphäre"
+  "your_privacy": "Ihre Privatsphäre",
+  "zoom_in": "Hereinzoomen",
+  "zoom_out": "Hinauszoomen"
 }

interface/locales/en/common.json

@@ -500,5 +500,7 @@
 	"your_account": "Your account",
 	"your_account_description": "Spacedrive account and information.",
 	"your_local_network": "Your Local Network",
-	"your_privacy": "Your Privacy"
+	"your_privacy": "Your Privacy",
+	"zoom_in": "Zoom In",
+	"zoom_out": "Zoom Out"
 }

interface/locales/es/common.json

@@ -500,5 +500,7 @@
   "your_account": "Tu cuenta",
   "your_account_description": "Cuenta de Spacedrive e información.",
   "your_local_network": "Tu Red Local",
-  "your_privacy": "Tu Privacidad"
+  "your_privacy": "Tu Privacidad",
+  "zoom_in": "Acercar",
+  "zoom_out": "Alejar"
 }

interface/locales/fr/common.json

@@ -500,5 +500,7 @@
   "your_account": "Votre compte",
   "your_account_description": "Compte et informations Spacedrive.",
   "your_local_network": "Votre réseau local",
-  "your_privacy": "Votre confidentialité"
+  "your_privacy": "Votre confidentialité",
+  "zoom_in": "Zoom avant",
+  "zoom_out": "Zoom arrière"
 }

interface/locales/it/common.json

@@ -500,5 +500,7 @@
   "your_account": "Il tuo account",
   "your_account_description": "Account di Spacedrive e informazioni.",
   "your_local_network": "La tua rete locale",
-  "your_privacy": "La tua Privacy"
+  "your_privacy": "La tua Privacy",
+  "zoom_in": "Ingrandire",
+  "zoom_out": "Ridurre"
 }

interface/locales/ja/common.json

@@ -500,5 +500,7 @@
   "your_account": "あなたのアカウント",
   "your_account_description": "Spacedriveアカウントの情報",
   "your_local_network": "ローカルネットワーク",
-  "your_privacy": "あなたのプライバシー"
+  "your_privacy": "あなたのプライバシー",
+  "zoom_in": "拡大する",
+  "zoom_out": "縮小する"
 }

interface/locales/nl/common.json

@@ -500,5 +500,7 @@
   "your_account": "Je account",
   "your_account_description": "Spacedrive account en informatie.",
   "your_local_network": "Je Lokale Netwerk",
-  "your_privacy": "Jouw Privacy"
+  "your_privacy": "Jouw Privacy",
+  "zoom_in": "Inzoomen",
+  "zoom_out": "Uitzoomen"
 }

interface/locales/ru/common.json

@@ -500,5 +500,7 @@
   "your_account": "Ваш аккаунт",
   "your_account_description": "Учетная запись Spacedrive и информация.",
   "your_local_network": "Ваша локальная сеть",
-  "your_privacy": "Ваша конфиденциальность"
+  "your_privacy": "Ваша конфиденциальность",
+  "zoom_in": "Увеличить",
+  "zoom_out": "Уменьшить"
 }

interface/locales/tr/common.json

@@ -500,5 +500,7 @@
   "your_account": "Hesabınız",
   "your_account_description": "Spacedrive hesabınız ve bilgileri.",
   "your_local_network": "Yerel Ağınız",
-  "your_privacy": "Gizliliğiniz"
+  "your_privacy": "Gizliliğiniz",
+  "zoom_in": "Yakınlaştır",
+  "zoom_out": "Uzaklaştır"
 }

interface/locales/zh-CN/common.json

@@ -502,5 +502,7 @@
   "your_account": "您的账户",
   "your_account_description": "Spacedrive账号和信息。",
   "your_local_network": "您的本地网络",
-  "your_privacy": "您的隐私"
+  "your_privacy": "您的隐私",
+  "zoom_in": "放大",
+  "zoom_out": "缩小"
 }

interface/locales/zh-TW/common.json

@@ -500,5 +500,7 @@
   "your_account": "您的帳戶",
   "your_account_description": "Spacedrive帳戶和資訊。",
   "your_local_network": "您的本地網路",
-  "your_privacy": "您的隱私"
+  "your_privacy": "您的隱私",
+  "zoom_in": "放大",
+  "zoom_out": "縮小"
 }