fix(web) Disable draggable on common usage element to avoid trigger drag-n-drop layer (#1330)

server/immich-openapi-specs.json

@@ -1476,6 +1476,153 @@
         ]
       }
     },
+    "/tag": {
+      "post": {
+        "operationId": "create",
+        "description": "",
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/CreateTagDto"
+              }
+            }
+          }
+        },
+        "responses": {
+          "201": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/TagResponseDto"
+                }
+              }
+            }
+          }
+        },
+        "tags": [
+          "Tag"
+        ]
+      },
+      "get": {
+        "operationId": "findAll",
+        "description": "",
+        "parameters": [],
+        "responses": {
+          "200": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/components/schemas/TagResponseDto"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "tags": [
+          "Tag"
+        ]
+      }
+    },
+    "/tag/{id}": {
+      "get": {
+        "operationId": "findOne",
+        "description": "",
+        "parameters": [
+          {
+            "name": "id",
+            "required": true,
+            "in": "path",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/TagResponseDto"
+                }
+              }
+            }
+          }
+        },
+        "tags": [
+          "Tag"
+        ]
+      },
+      "patch": {
+        "operationId": "update",
+        "description": "",
+        "parameters": [
+          {
+            "name": "id",
+            "required": true,
+            "in": "path",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/UpdateTagDto"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/TagResponseDto"
+                }
+              }
+            }
+          }
+        },
+        "tags": [
+          "Tag"
+        ]
+      },
+      "delete": {
+        "operationId": "delete",
+        "description": "",
+        "parameters": [
+          {
+            "name": "id",
+            "required": true,
+            "in": "path",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": ""
+          }
+        },
+        "tags": [
+          "Tag"
+        ]
+      }
+    },
     "/album/count-by-user-id": {
       "get": {
         "operationId": "getAlbumCountByUserId",
@@ -1947,153 +2094,6 @@
         ]
       }
     },
-    "/tag": {
-      "post": {
-        "operationId": "create",
-        "description": "",
-        "parameters": [],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": {
-                "$ref": "#/components/schemas/CreateTagDto"
-              }
-            }
-          }
-        },
-        "responses": {
-          "201": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/TagResponseDto"
-                }
-              }
-            }
-          }
-        },
-        "tags": [
-          "Tag"
-        ]
-      },
-      "get": {
-        "operationId": "findAll",
-        "description": "",
-        "parameters": [],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "array",
-                  "items": {
-                    "$ref": "#/components/schemas/TagResponseDto"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "tags": [
-          "Tag"
-        ]
-      }
-    },
-    "/tag/{id}": {
-      "get": {
-        "operationId": "findOne",
-        "description": "",
-        "parameters": [
-          {
-            "name": "id",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "type": "string"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/TagResponseDto"
-                }
-              }
-            }
-          }
-        },
-        "tags": [
-          "Tag"
-        ]
-      },
-      "patch": {
-        "operationId": "update",
-        "description": "",
-        "parameters": [
-          {
-            "name": "id",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "type": "string"
-            }
-          }
-        ],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": {
-                "$ref": "#/components/schemas/UpdateTagDto"
-              }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/TagResponseDto"
-                }
-              }
-            }
-          }
-        },
-        "tags": [
-          "Tag"
-        ]
-      },
-      "delete": {
-        "operationId": "delete",
-        "description": "",
-        "parameters": [
-          {
-            "name": "id",
-            "required": true,
-            "in": "path",
-            "schema": {
-              "type": "string"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": ""
-          }
-        },
-        "tags": [
-          "Tag"
-        ]
-      }
-    },
     "/auth/login": {
       "post": {
         "operationId": "login",
@@ -3786,6 +3786,32 @@
           }
         }
       },
+      "CreateTagDto": {
+        "type": "object",
+        "properties": {
+          "type": {
+            "$ref": "#/components/schemas/TagTypeEnum"
+          },
+          "name": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "type",
+          "name"
+        ]
+      },
+      "UpdateTagDto": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "renameTagId": {
+            "type": "string"
+          }
+        }
+      },
       "AlbumCountResponseDto": {
         "type": "object",
         "properties": {
@@ -3922,32 +3948,6 @@
           "albumId"
         ]
       },
-      "CreateTagDto": {
-        "type": "object",
-        "properties": {
-          "type": {
-            "$ref": "#/components/schemas/TagTypeEnum"
-          },
-          "name": {
-            "type": "string"
-          }
-        },
-        "required": [
-          "type",
-          "name"
-        ]
-      },
-      "UpdateTagDto": {
-        "type": "object",
-        "properties": {
-          "name": {
-            "type": "string"
-          },
-          "renameTagId": {
-            "type": "string"
-          }
-        }
-      },
       "LoginCredentialDto": {
         "type": "object",
         "properties": {

web/src/lib/components/album-page/album-card.svelte

@@ -79,6 +79,7 @@
 			alt={album.id}
 			class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
 			data-testid="album-image"
+			draggable="false"
 		/>
 	</div>
 

web/src/lib/components/album-page/album-viewer.svelte

@@ -418,7 +418,13 @@
 						class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
 						href="https://immich.app"
 					>
-						<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" />
+						<img
+							src="/immich-logo.svg"
+							alt="immich logo"
+							height="30"
+							width="30"
+							draggable="false"
+						/>
 						<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
 							IMMICH
 						</h1>

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -53,7 +53,7 @@
 <BaseModal on:close={() => dispatch('close')}>
 	<svelte:fragment slot="title">
 		<span class="flex gap-2 place-items-center">
-			<img src="/immich-logo.svg" width="24" alt="Immich" />
+			<img src="/immich-logo.svg" width="24" alt="Immich" draggable="false" />
 			<p class="font-medium">Invite to album</p>
 		</span>
 	</svelte:fragment>

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -33,6 +33,7 @@
 			alt={album.albumName}
 			class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
 			data-testid="album-image"
+			draggable="false"
 		/>
 	</div>
 	<div class="h-12 flex flex-col items-start justify-center">

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -208,6 +208,7 @@
 							alt={album.albumName}
 							class="w-[50px] h-[50px] object-cover rounded"
 							src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG`}
+							draggable="false"
 						/>
 					</div>
 

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -85,6 +85,7 @@
 				alt={assetId}
 				class="object-contain h-full transition-all"
 				loading="lazy"
+				draggable="false"
 			/>
 		{/await}
 	{/if}

web/src/lib/components/forms/admin-registration-form.svelte

@@ -55,7 +55,14 @@
 	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<img
+			class="text-center"
+			src="/immich-logo.svg"
+			height="100"
+			width="100"
+			alt="immich-logo"
+			draggable="false"
+		/>
 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
 			Admin Registration
 		</h1>

web/src/lib/components/forms/change-password-form.svelte

@@ -47,7 +47,14 @@
 	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<img
+			class="text-center"
+			src="/immich-logo.svg"
+			height="100"
+			width="100"
+			alt="immich-logo"
+			draggable="false"
+		/>
 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
 			Change Password
 		</h1>

web/src/lib/components/forms/create-user-form.svelte

@@ -80,7 +80,14 @@
 	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<img
+			class="text-center"
+			src="/immich-logo.svg"
+			height="100"
+			width="100"
+			alt="immich-logo"
+			draggable="false"
+		/>
 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
 			Create new user
 		</h1>

web/src/lib/components/forms/login-form.svelte

@@ -77,7 +77,14 @@
 	class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-md py-8"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<img
+			class="text-center"
+			src="/immich-logo.svg"
+			height="100"
+			width="100"
+			alt="immich-logo"
+			draggable="false"
+		/>
 		<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Login</h1>
 	</div>
 

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -120,7 +120,7 @@
 					class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
 					href="https://immich.app"
 				>
-					<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" />
+					<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" draggable="false" />
 					<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
 						IMMICH
 					</h1>

web/src/lib/components/shared-components/circle-avatar.svelte

@@ -45,6 +45,7 @@
 			style:height={`${size}px`}
 			class={`inline rounded-full  object-cover border shadow-md`}
 			title={user.email}
+			draggable="false"
 		/>
 	</button>
 {:catch}

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -20,6 +20,7 @@
 		height="200"
 		width="200"
 		class="animate-bounce pb-16"
+		draggable="false"
 	/>
 	<div class="text-2xl">Drop files anywhere to upload</div>
 </div>

web/src/lib/components/shared-components/immich-thumbnail.svelte

@@ -252,6 +252,7 @@
 				alt={asset.id}
 				class={`object-cover ${getSize()} transition-all z-0 ${getThumbnailBorderStyle()}`}
 				loading="lazy"
+				draggable="false"
 			/>
 		{/if}
 

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -38,6 +38,7 @@
 					src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
 					alt="profile-img"
 					class="inline rounded-full h-20 w-20 object-cover shadow-md"
+					draggable="false"
 				/>
 			{:catch}
 				<div transition:fade={{ duration: 200 }} class="text-lg">

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -50,7 +50,7 @@
 			class="flex gap-2 place-items-center hover:cursor-pointer"
 			href="/photos"
 		>
-			<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
+			<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" draggable="false" />
 			<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
 				IMMICH
 			</h1>
@@ -102,6 +102,7 @@
 							src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
 							alt="profile-img"
 							class="inline rounded-full h-12 w-12 object-cover shadow-md"
+							draggable="false"
 						/>
 					{:catch}
 						{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -40,6 +40,7 @@
 		data-sveltekit-noscroll
 		href={AppRoute.PHOTOS}
 		class="relative"
+		draggable="false"
 	>
 		<SideBarButton
 			title={`Photos`}
@@ -71,7 +72,7 @@
 		</div>
 	</a>
 
-	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative">
+	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative" draggable="false">
 		<SideBarButton
 			title="Sharing"
 			logo={AccountMultipleOutline}
@@ -103,7 +104,7 @@
 	<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
 		<p>LIBRARY</p>
 	</div>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative">
+	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false">
 		<SideBarButton
 			title="Albums"
 			logo={ImageAlbum}

web/src/lib/components/shared-components/upload-panel.svelte

@@ -100,6 +100,7 @@
 										src="/immich-logo.svg"
 										alt=""
 										class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg "
+										draggable="false"
 									/>
 
 									<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -73,6 +73,7 @@
 				alt={asset.id}
 				class="object-cover w-[100px] h-[100px] rounded-lg"
 				loading="lazy"
+				draggable="false"
 			/>
 		{/await}
 	</div>

web/src/lib/components/sharing-page/shared-album-list-tile.svelte

@@ -41,6 +41,7 @@
 				src={imageData}
 				alt={album.id}
 				class={`object-cover w-[75px] h-[75px] transition-all z-0 rounded-xl duration-300 `}
+				draggable="false"
 			/>
 		{/await}
 	</div>

web/src/routes/+error.svelte

@@ -33,7 +33,7 @@
 	<section class="bg-immich-bg dark:bg-immich-dark-bg">
 		<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-4">
 			<a class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
-				<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
+				<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" draggable="false" />
 				<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
 					IMMICH
 				</h1>

web/src/routes/+page.svelte

@@ -5,7 +5,14 @@
 <section class="h-screen w-screen flex place-items-center place-content-center">
 	<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
 		<div class="flex place-items-center place-content-center ">
-			<img class="text-center" src="immich-logo.svg" height="200" width="200" alt="immich-logo" />
+			<img
+				class="text-center"
+				src="immich-logo.svg"
+				height="200"
+				width="200"
+				alt="immich-logo"
+				draggable="false"
+			/>
 		</div>
 		<h1
 			class="text-4xl text-immich-primary dark:text-immich-dark-primary font-bold font-immich-title"

web/src/routes/albums/+page.svelte

@@ -93,7 +93,7 @@
 					on:keydown={handleCreateAlbum}
 					class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
 				>
-					<img src="/empty-1.svg" alt="Empty shared album" width="500" />
+					<img src="/empty-1.svg" alt="Empty shared album" width="500" draggable="false" />
 
 					<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
 						Create an album to organize your photos and videos

web/src/routes/sharing/+page.svelte

@@ -94,7 +94,7 @@
 				<div
 					class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
 				>
-					<img src="/empty-2.svg" alt="Empty shared album" width="500" />
+					<img src="/empty-2.svg" alt="Empty shared album" width="500" draggable="false" />
 					<p class="text-center text-immich-text-gray-500">
 						Create a shared album to share photos and videos with people in your network
 					</p>