Merge branch 'main' into feat/search-filter-album/web

This commit is contained in:
CJPeckover
2025-06-09 22:56:15 -04:00
148 changed files with 6078 additions and 2726 deletions
+49 -211
View File
@@ -64,14 +64,14 @@
"eslint-config-prettier": "^10.0.0",
"eslint-p": "^0.23.0",
"eslint-plugin-svelte": "^3.9.0",
"eslint-plugin-unicorn": "^57.0.0",
"eslint-plugin-unicorn": "^59.0.0",
"factory.ts": "^1.4.1",
"globals": "^16.0.0",
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.0.0",
"prettier-plugin-sort-json": "^4.1.1",
"prettier-plugin-svelte": "^3.3.3",
"rollup-plugin-visualizer": "^5.14.0",
"rollup-plugin-visualizer": "^6.0.0",
"svelte": "^5.25.3",
"svelte-check": "^4.1.5",
"tailwindcss": "^4.1.7",
@@ -2915,13 +2915,6 @@
"undici-types": "~6.21.0"
}
},
"node_modules/@types/normalize-package-data": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
"integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/pbf": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
@@ -3663,9 +3656,9 @@
"license": "MIT"
},
"node_modules/builtin-modules": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-4.0.0.tgz",
"integrity": "sha512-p1n8zyCkt1BVrKNFymOHjcDSAl7oq/gUvfgULv2EblgpPVQlQr9yHnWjg9IJ2MhfwPqiYqMMrr01OY7yQoK2yA==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-5.0.0.tgz",
"integrity": "sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==",
"dev": true,
"license": "MIT",
"engines": {
@@ -4759,50 +4752,65 @@
}
},
"node_modules/eslint-plugin-unicorn": {
"version": "57.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-57.0.0.tgz",
"integrity": "sha512-zUYYa6zfNdTeG9BISWDlcLmz16c+2Ck2o5ZDHh0UzXJz3DEP7xjmlVDTzbyV0W+XksgZ0q37WEWzN2D2Ze+g9Q==",
"version": "59.0.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-59.0.1.tgz",
"integrity": "sha512-EtNXYuWPUmkgSU2E7Ttn57LbRREQesIP1BiLn7OZLKodopKfDXfBUkC/0j6mpw2JExwf43Uf3qLSvrSvppgy8Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-validator-identifier": "^7.25.9",
"@eslint-community/eslint-utils": "^4.4.1",
"ci-info": "^4.1.0",
"@eslint-community/eslint-utils": "^4.5.1",
"@eslint/plugin-kit": "^0.2.7",
"ci-info": "^4.2.0",
"clean-regexp": "^1.0.0",
"core-js-compat": "^3.40.0",
"core-js-compat": "^3.41.0",
"esquery": "^1.6.0",
"globals": "^15.15.0",
"find-up-simple": "^1.0.1",
"globals": "^16.0.0",
"indent-string": "^5.0.0",
"is-builtin-module": "^4.0.0",
"is-builtin-module": "^5.0.0",
"jsesc": "^3.1.0",
"pluralize": "^8.0.0",
"read-package-up": "^11.0.0",
"regexp-tree": "^0.1.27",
"regjsparser": "^0.12.0",
"semver": "^7.7.1",
"strip-indent": "^4.0.0"
},
"engines": {
"node": ">=18.18"
"node": "^18.20.0 || ^20.10.0 || >=21.0.0"
},
"funding": {
"url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1"
},
"peerDependencies": {
"eslint": ">=9.20.0"
"eslint": ">=9.22.0"
}
},
"node_modules/eslint-plugin-unicorn/node_modules/globals": {
"version": "15.15.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
"integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
"node_modules/eslint-plugin-unicorn/node_modules/@eslint/core": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
"integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
"license": "Apache-2.0",
"dependencies": {
"@types/json-schema": "^7.0.15"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
"node_modules/eslint-plugin-unicorn/node_modules/@eslint/plugin-kit": {
"version": "0.2.8",
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
"integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"@eslint/core": "^0.13.0",
"levn": "^0.4.1"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
"node_modules/eslint-scope": {
@@ -5589,19 +5597,6 @@
"node": ">= 0.4"
}
},
"node_modules/hosted-git-info": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
"integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
"dev": true,
"license": "ISC",
"dependencies": {
"lru-cache": "^10.0.1"
},
"engines": {
"node": "^16.14.0 || >=18.0.0"
}
},
"node_modules/html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -5744,19 +5739,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/index-to-position": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/index-to-position/-/index-to-position-1.1.0.tgz",
"integrity": "sha512-XPdx9Dq4t9Qk1mTMbWONJqU7boCoumEH7fRET37HX5+khDUl3J2W6PdALxhILYlIYx2amlwYcRPp28p0tSiojg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5820,13 +5802,13 @@
"license": "MIT"
},
"node_modules/is-builtin-module": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-4.0.0.tgz",
"integrity": "sha512-rWP3AMAalQSesXO8gleROyL2iKU73SX5Er66losQn9rWOWL4Gef0a/xOEOVqjWGMuR2vHG3FJ8UUmT700O8oFg==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-5.0.0.tgz",
"integrity": "sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==",
"dev": true,
"license": "MIT",
"dependencies": {
"builtin-modules": "^4.0.0"
"builtin-modules": "^5.0.0"
},
"engines": {
"node": ">=18.20"
@@ -7063,21 +7045,6 @@
"node": ">=6"
}
},
"node_modules/normalize-package-data": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.2.tgz",
"integrity": "sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"hosted-git-info": "^7.0.0",
"semver": "^7.3.5",
"validate-npm-package-license": "^3.0.4"
},
"engines": {
"node": "^16.14.0 || >=18.0.0"
}
},
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -7226,24 +7193,6 @@
"node": ">=6"
}
},
"node_modules/parse-json": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-8.3.0.tgz",
"integrity": "sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.26.2",
"index-to-position": "^1.1.0",
"type-fest": "^4.39.1"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/parse5": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
@@ -7715,44 +7664,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/read-package-up": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/read-package-up/-/read-package-up-11.0.0.tgz",
"integrity": "sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"find-up-simple": "^1.0.0",
"read-pkg": "^9.0.0",
"type-fest": "^4.6.0"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/read-pkg": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-9.0.1.tgz",
"integrity": "sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/normalize-package-data": "^2.4.3",
"normalize-package-data": "^6.0.0",
"parse-json": "^8.0.0",
"type-fest": "^4.6.0",
"unicorn-magic": "^0.1.0"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -7972,13 +7883,13 @@
}
},
"node_modules/rollup-plugin-visualizer": {
"version": "5.14.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.14.0.tgz",
"integrity": "sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==",
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-6.0.3.tgz",
"integrity": "sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==",
"dev": true,
"license": "MIT",
"dependencies": {
"open": "^8.4.0",
"open": "^8.0.0",
"picomatch": "^4.0.2",
"source-map": "^0.7.4",
"yargs": "^17.5.1"
@@ -7990,7 +7901,7 @@
"node": ">=18"
},
"peerDependencies": {
"rolldown": "1.x",
"rolldown": "1.x || ^1.0.0-beta",
"rollup": "2.x || 3.x || 4.x"
},
"peerDependenciesMeta": {
@@ -8449,42 +8360,6 @@
"source-map": "^0.6.0"
}
},
"node_modules/spdx-correct": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
"integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"spdx-expression-parse": "^3.0.0",
"spdx-license-ids": "^3.0.0"
}
},
"node_modules/spdx-exceptions": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
"integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
"dev": true,
"license": "CC-BY-3.0"
},
"node_modules/spdx-expression-parse": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
"integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"spdx-exceptions": "^2.1.0",
"spdx-license-ids": "^3.0.0"
}
},
"node_modules/spdx-license-ids": {
"version": "3.0.21",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.21.tgz",
"integrity": "sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==",
"dev": true,
"license": "CC0-1.0"
},
"node_modules/stackback": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -9183,19 +9058,6 @@
"node": ">= 0.8.0"
}
},
"node_modules/type-fest": {
"version": "4.40.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.40.0.tgz",
"integrity": "sha512-ABHZ2/tS2JkvH1PEjxFDTUWC8dB5OsIGZP4IFLhR293GqT5Y5qB1WwL2kMPYhQW9DVgVD8Hd7I8gjwPIf5GFkw==",
"dev": true,
"license": "(MIT OR CC0-1.0)",
"engines": {
"node": ">=16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/typescript": {
"version": "5.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -9253,19 +9115,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/unicorn-magic": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
"integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/universalify": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -9335,17 +9184,6 @@
"devOptional": true,
"license": "MIT"
},
"node_modules/validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"spdx-correct": "^3.0.0",
"spdx-expression-parse": "^3.0.0"
}
},
"node_modules/vite": {
"version": "6.3.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+2 -2
View File
@@ -81,14 +81,14 @@
"eslint-config-prettier": "^10.0.0",
"eslint-p": "^0.23.0",
"eslint-plugin-svelte": "^3.9.0",
"eslint-plugin-unicorn": "^57.0.0",
"eslint-plugin-unicorn": "^59.0.0",
"factory.ts": "^1.4.1",
"globals": "^16.0.0",
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.0.0",
"prettier-plugin-sort-json": "^4.1.1",
"prettier-plugin-svelte": "^3.3.3",
"rollup-plugin-visualizer": "^5.14.0",
"rollup-plugin-visualizer": "^6.0.0",
"svelte": "^5.25.3",
"svelte-check": "^4.1.5",
"tailwindcss": "^4.1.7",
@@ -1,6 +1,6 @@
import type { AssetAction } from '$lib/constants';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import type { AlbumResponseDto } from '@immich/sdk';
import type { AlbumResponseDto, StackResponseDto } from '@immich/sdk';
type ActionMap = {
[AssetAction.ARCHIVE]: { asset: TimelineAsset };
@@ -14,6 +14,7 @@ type ActionMap = {
[AssetAction.ADD_TO_ALBUM]: { asset: TimelineAsset; album: AlbumResponseDto };
[AssetAction.UNSTACK]: { assets: TimelineAsset[] };
[AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: TimelineAsset };
[AssetAction.SET_STACK_PRIMARY_ASSET]: { stack: StackResponseDto };
[AssetAction.SET_VISIBILITY_LOCKED]: { asset: TimelineAsset };
[AssetAction.SET_VISIBILITY_TIMELINE]: { asset: TimelineAsset };
};
@@ -0,0 +1,26 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { AssetAction } from '$lib/constants';
import { updateStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';
import { mdiImageCheckOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAction } from './action';
interface Props {
stack: StackResponseDto;
asset: AssetResponseDto;
onAction: OnAction;
}
let { stack, asset, onAction }: Props = $props();
const handleSetPrimaryAsset = async () => {
const updatedStack = await updateStack({ id: stack.id, stackUpdateDto: { primaryAssetId: asset.id } });
if (updatedStack) {
onAction({ type: AssetAction.SET_STACK_PRIMARY_ASSET, stack: updatedStack });
}
};
</script>
<MenuOption icon={mdiImageCheckOutline} onClick={handleSetPrimaryAsset} text={$t('set_stack_primary_asset')} />
@@ -13,6 +13,7 @@
import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
import SetProfilePictureAction from '$lib/components/asset-viewer/actions/set-profile-picture-action.svelte';
import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/set-stack-primary-asset.svelte';
import SetVisibilityAction from '$lib/components/asset-viewer/actions/set-visibility-action.svelte';
import ShareAction from '$lib/components/asset-viewer/actions/share-action.svelte';
import ShowDetailAction from '$lib/components/asset-viewer/actions/show-detail-action.svelte';
@@ -192,6 +193,9 @@
{#if stack}
<UnstackAction {stack} {onAction} />
<KeepThisDeleteOthersAction {stack} {asset} {onAction} />
{#if stack?.primaryAssetId !== asset.id}
<SetStackPrimaryAsset {stack} {asset} {onAction} />
{/if}
{/if}
{#if album}
<SetAlbumCoverAction {asset} {album} />
@@ -338,7 +338,10 @@
await handleGetAllAlbums();
break;
}
case AssetAction.SET_STACK_PRIMARY_ASSET: {
stack = action.stack;
break;
}
case AssetAction.KEEP_THIS_DELETE_OTHERS:
case AssetAction.UNSTACK: {
closeViewer();
@@ -67,7 +67,7 @@
<button
type="button"
class="rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 flex place-items-center place-content-center gap-1 px-2 py-1"
title="Add tag"
title={$t('add_tag')}
onclick={handleAddTag}
>
<span class="text-sm px-1 flex place-items-center place-content-center gap-1"
@@ -19,6 +19,7 @@
import { handleError } from '$lib/utils/handle-error';
import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
import { fromISODateTime, fromISODateTimeUTC } from '$lib/utils/timeline-util';
import { getParentPath } from '$lib/utils/tree-utils';
import {
AssetMediaSize,
getAssetInfo,
@@ -137,7 +138,7 @@
const getAssetFolderHref = (asset: AssetResponseDto) => {
const folderUrl = new URL(AppRoute.FOLDERS, globalThis.location.href);
// Remove the last part of the path to get the parent path
const assetParentPath = asset.originalPath.split('/').slice(0, -1).join('/');
const assetParentPath = getParentPath(asset.originalPath);
folderUrl.searchParams.set(QueryParameter.PATH, assetParentPath);
return folderUrl.href;
};
@@ -31,7 +31,7 @@
import { deleteAssets, updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
import { navigate } from '$lib/utils/navigation';
import { type ScrubberListener, type TimelinePlainYearMonth } from '$lib/utils/timeline-util';
import { toTimelineAsset, type ScrubberListener, type TimelinePlainYearMonth } from '$lib/utils/timeline-util';
import { AssetVisibility, getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
import { DateTime } from 'luxon';
import { onMount, type Snippet } from 'svelte';
@@ -511,6 +511,20 @@
updateUnstackedAssetInTimeline(assetStore, action.assets);
break;
}
case AssetAction.SET_STACK_PRIMARY_ASSET: {
//Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
updateUnstackedAssetInTimeline(
assetStore,
action.stack.assets.map((asset) => toTimelineAsset(asset)),
);
updateStackedAssetInTimeline(assetStore, {
stack: action.stack,
toDeleteIds: action.stack.assets
.filter((asset) => asset.id !== action.stack.primaryAssetId)
.map((asset) => asset.id),
});
break;
}
}
};
@@ -1,6 +1,6 @@
<script lang="ts">
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { DateTime } from 'luxon';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
import DateInput from '../elements/date-input.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
@@ -65,6 +65,9 @@
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
let selectedDate = $state(initialDate.toFormat("yyyy-MM-dd'T'HH:mm"));
// Use a fixed modern date to calculate stable timezone offsets for the list
// This ensures that the offsets shown in the combobox are always current,
// regardless of the historical date selected by the user.
let timezones: ZoneOption[] = knownTimezones
.map((zone) => zoneOptionForDate(zone, selectedDate))
.filter((zone) => zone.valid)
@@ -73,12 +76,13 @@
let selectedOption: ZoneOption | undefined = $state(getPreferredTimeZone(initialDate, userTimeZone, timezones));
function zoneOptionForDate(zone: string, date: string) {
const dateAtZone: DateTime = DateTime.fromISO(date, { zone });
const zoneOffsetAtDate = dateAtZone.toFormat('ZZ');
const valid = dateAtZone.isValid && date.toString() === dateAtZone.toFormat("yyyy-MM-dd'T'HH:mm");
const { offsetMinutes, offsetFormat: zoneOffsetAtDate } = getModernOffsetForZoneAndDate(zone, date);
// For validity, we still need to check if the exact date/time exists in the *original* timezone (for gaps/overlaps).
const dateForValidity = DateTime.fromISO(date, { zone });
const valid = dateForValidity.isValid && date === dateForValidity.toFormat("yyyy-MM-dd'T'HH:mm");
return {
value: zone,
offsetMinutes: dateAtZone.offset,
offsetMinutes,
label: zone + ' (' + zoneOffsetAtDate + ')' + (valid ? '' : ' [invalid date!]'),
valid,
};
@@ -118,6 +122,24 @@
return previousSelection ?? fromInitialTimeZone ?? sameAsUserTimeZone ?? firstWithSameOffset ?? utcFallback;
}
function getModernOffsetForZoneAndDate(
zone: string,
dateString: string,
): { offsetMinutes: number; offsetFormat: string } {
const dt = DateTime.fromISO(dateString, { zone });
// we determine the *modern* offset for this zone based on its current rules.
// To do this, we "move" the date to the current year, keeping the local time components.
// This allows Luxon to apply current-year DST rules.
const modernYearDt = dt.set({ year: DateTime.now().year });
// Calculate the offset at that modern year's date.
const modernOffsetMinutes = modernYearDt.setZone(zone, { keepLocalTime: true }).offset;
const modernOffsetFormat = modernYearDt.setZone(zone, { keepLocalTime: true }).toFormat('ZZ');
return { offsetMinutes: modernOffsetMinutes, offsetFormat: modernOffsetFormat };
}
function sortTwoZones(zoneA: ZoneOption, zoneB: ZoneOption) {
let offsetDifference = zoneA.offsetMinutes - zoneB.offsetMinutes;
if (offsetDifference != 0) {
@@ -127,9 +149,20 @@
}
const handleConfirm = () => {
const value = date.toISO();
if (value) {
onConfirm(value);
if (date.isValid && selectedOption) {
// Get the local date/time components from the selected string using neutral timezone
const dtComponents = DateTime.fromISO(selectedDate, { zone: 'utc' });
// Determine the modern, DST-aware offset for the selected IANA zone
const { offsetMinutes } = getModernOffsetForZoneAndDate(selectedOption.value, selectedDate);
// Construct the final ISO string with a fixed-offset zone.
const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
// Create a DateTime object in this fixed-offset zone, preserving the local time.
const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
onConfirm(finalDateTime.toISO({ includeOffset: true })!);
}
};
@@ -48,6 +48,7 @@
defaultFirstOption?: boolean;
hasThumbnails?: boolean;
onSelect?: (option: ComboBoxOption | undefined) => void;
forceFocus?: boolean;
}
let {
@@ -60,6 +61,7 @@
defaultFirstOption = false,
hasThumbnails = false,
onSelect = () => {},
forceFocus = false,
}: Props = $props();
/**
@@ -118,6 +120,12 @@
};
});
const forceFocusInput = (el: HTMLDivElement) => {
if (forceFocus) {
el.focus();
}
};
const activate = () => {
isActive = true;
searchQuery = '';
@@ -287,6 +295,7 @@
role="combobox"
type="text"
value={searchQuery}
use:forceFocusInput
use:shortcuts={[
{
shortcut: { key: 'ArrowUp' },
@@ -501,7 +501,7 @@
/>
{#if showAssetName && !isTimelineAsset(currentAsset)}
<div
class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-linear-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-linear-to-t bg-slate-50/75 dark:bg-slate-800/75 overflow-clip text-ellipsis whitespace-pre-wrap"
>
{currentAsset.originalFileName}
</div>
@@ -1,23 +1,27 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { TreeNode } from '$lib/utils/tree-utils';
import { IconButton } from '@immich/ui';
import { mdiArrowUpLeft, mdiChevronRight } from '@mdi/js';
import { t } from 'svelte-i18n';
interface Props {
pathSegments?: string[];
node: TreeNode;
getLink: (path: string) => string;
title: string;
icon: string;
}
let { pathSegments = [], getLink, title, icon }: Props = $props();
const { node, getLink, title, icon }: Props = $props();
let isRoot = $derived(pathSegments.length === 0);
const rootLink = getLink('');
const isRoot = $derived(node.parent === null);
const parentLink = $derived(getLink(node.parent ? node.parent.path : ''));
const parents = $derived(node.parents);
</script>
<nav class="flex items-center py-2">
{#if !isRoot}
{#if parentLink}
<div>
<IconButton
shape="round"
@@ -25,9 +29,8 @@
variant="ghost"
icon={mdiArrowUpLeft}
aria-label={$t('to_parent')}
href={getLink(pathSegments.slice(0, -1).join('/'))}
href={parentLink}
class="me-2"
onclick={() => {}}
/>
</div>
{/if}
@@ -42,31 +45,29 @@
color="secondary"
variant="ghost"
{icon}
href={getLink('')}
href={rootLink}
aria-label={title}
size="medium"
aria-current={isRoot ? 'page' : undefined}
onclick={() => {}}
/>
</li>
{#each pathSegments as segment, index (index)}
{@const isLastSegment = index === pathSegments.length - 1}
{#each parents as parent (parent)}
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
{#if isLastSegment}
<p class="cursor-default whitespace-pre-wrap">{segment}</p>
{:else}
<a
class="underline hover:font-semibold whitespace-pre-wrap"
href={getLink(pathSegments.slice(0, index + 1).join('/'))}
>
{segment}
</a>
{/if}
<a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
{parent.value}
</a>
</li>
{/each}
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
<p class="cursor-default whitespace-pre-wrap">{node.value}</p>
</li>
</ol>
</div>
</nav>
@@ -1,29 +1,31 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import type { TreeNode } from '$lib/utils/tree-utils';
interface Props {
items?: string[];
items: TreeNode[];
icon: string;
onClick: (path: string) => void;
}
let { items = [], icon, onClick }: Props = $props();
let { items, icon, onClick }: Props = $props();
</script>
{#if items.length > 0}
<div
class="w-full grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 rounded-2xl border border-gray-100 dark:border-gray-900"
>
{#each items as item (item)}
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each items as item}
<button
class="flex flex-col place-items-center gap-2 py-2 px-4 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/40 rounded-xl"
onclick={() => onClick(item)}
title={item}
onclick={() => onClick(item.value)}
title={item.value}
type="button"
>
<Icon path={icon} class="text-immich-primary dark:text-immich-dark-primary" size={64} />
<p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
{item}
{item.value}
</p>
</button>
{/each}
@@ -1,28 +1,21 @@
<script lang="ts">
import Tree from '$lib/components/shared-components/tree/tree.svelte';
import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
import { type TreeNode } from '$lib/utils/tree-utils';
interface Props {
items: RecursiveObject;
parent?: string;
active?: string;
tree: TreeNode;
active: string;
icons: { default: string; active: string };
getLink: (path: string) => string;
getColor?: (path: string) => string | undefined;
}
let { items, parent = '', active = '', icons, getLink, getColor = () => undefined }: Props = $props();
let { tree, active, icons, getLink }: Props = $props();
</script>
<ul class="list-none ms-2">
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each Object.entries(items).sort() as [path, tree]}
{@const value = normalizeTreePath(`${parent}/${path}`)}
{@const key = value + getColor(value)}
{#key key}
<li>
<Tree {parent} value={path} {tree} {icons} {active} {getLink} {getColor} />
</li>
{/key}
{#each tree.children as node (node.color ? node.path + node.color : node.path)}
<li>
<Tree {node} {icons} {active} {getLink} />
</li>
{/each}
</ul>
@@ -1,25 +1,20 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
import { TreeNode } from '$lib/utils/tree-utils';
import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
interface Props {
tree: RecursiveObject;
parent: string;
value: string;
active?: string;
node: TreeNode;
active: string;
icons: { default: string; active: string };
getLink: (path: string) => string;
getColor: (path: string) => string | undefined;
}
let { tree, parent, value, active = '', icons, getLink, getColor }: Props = $props();
let { node, active, icons, getLink }: Props = $props();
const path = $derived(normalizeTreePath(`${parent}/${value}`));
const isActive = $derived(active === path || active.startsWith(`${path}/`));
const isTarget = $derived(active === path);
const color = $derived(getColor(path));
const isTarget = $derived(active === node.path);
const isActive = $derived(active === node.path || active.startsWith(node.value === '/' ? '/' : `${node.path}/`));
let isOpen = $derived(isActive);
const onclick = (event: MouseEvent) => {
@@ -29,25 +24,27 @@
</script>
<a
href={getLink(path)}
title={value}
href={getLink(node.path)}
title={node.value}
class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
data-sveltekit-keepfocus
>
<button type="button" {onclick} class={Object.values(tree).length === 0 ? 'invisible' : ''}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
</button>
<div>
{#if node.size > 0}
<button type="button" {onclick}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
</button>
{/if}
<div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
<Icon
path={isActive ? icons.active : icons.default}
class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
{color}
color={node.color}
size={20}
/>
</div>
<span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{value}</span>
<span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{node.value}</span>
</a>
{#if isOpen}
<TreeItems parent={path} items={tree} {icons} {active} {getLink} {getColor} />
<TreeItems tree={node} {icons} {active} {getLink} />
{/if}
+1
View File
@@ -10,6 +10,7 @@ export enum AssetAction {
ADD_TO_ALBUM = 'add-to-album',
UNSTACK = 'unstack',
KEEP_THIS_DELETE_OTHERS = 'keep-this-delete-others',
SET_STACK_PRIMARY_ASSET = 'set-stack-primary-asset',
SET_VISIBILITY_LOCKED = 'set-visibility-locked',
SET_VISIBILITY_TIMELINE = 'set-visibility-timeline',
}
+1
View File
@@ -66,6 +66,7 @@
defaultFirstOption
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
placeholder={$t('search_tags')}
forceFocus
/>
</div>
</form>
+12 -17
View File
@@ -1,4 +1,5 @@
import { eventManager } from '$lib/managers/event-manager.svelte';
import { TreeNode } from '$lib/utils/tree-utils';
import {
getAssetsByOriginalPath,
getUniqueOriginalPaths,
@@ -13,47 +14,41 @@ type AssetCache = {
};
class FoldersStore {
folders = $state.raw<TreeNode | null>(null);
private initialized = false;
uniquePaths = $state<string[]>([]);
assets = $state<AssetCache>({});
private assets = $state<AssetCache>({});
constructor() {
eventManager.on('auth.logout', () => this.clearCache());
}
async fetchUniquePaths() {
async fetchTree(): Promise<TreeNode> {
if (this.initialized) {
return;
return this.folders!;
}
this.initialized = true;
const uniquePaths = await getUniqueOriginalPaths();
this.uniquePaths.push(...uniquePaths);
this.folders = TreeNode.fromPaths(await getUniqueOriginalPaths());
this.folders.collapse();
return this.folders;
}
bustAssetCache() {
this.assets = {};
}
async refreshAssetsByPath(path: string | null) {
if (!path) {
return;
}
this.assets[path] = await getAssetsByOriginalPath({ path });
async refreshAssetsByPath(path: string) {
return (this.assets[path] = await getAssetsByOriginalPath({ path }));
}
async fetchAssetsByPath(path: string) {
if (this.assets[path]) {
return;
}
this.assets[path] = await getAssetsByOriginalPath({ path });
return (this.assets[path] ??= await getAssetsByOriginalPath({ path }));
}
clearCache() {
this.initialized = false;
this.uniquePaths = [];
this.assets = {};
this.folders = null;
}
}
+1 -1
View File
@@ -23,7 +23,7 @@ export const isAssetViewerRoute = (target?: NavigationTarget | null) =>
!!(target?.route.id?.endsWith('/[[assetId=id]]') && 'assetId' in (target?.params || {}));
export function getAssetInfoFromParam({ assetId, key }: { assetId?: string; key?: string }) {
return assetId && getAssetInfo({ id: assetId, key });
return assetId ? getAssetInfo({ id: assetId, key }) : undefined;
}
function currentUrlWithoutAsset() {
+136 -13
View File
@@ -1,21 +1,144 @@
export interface RecursiveObject {
[key: string]: RecursiveObject;
}
/* eslint-disable @typescript-eslint/no-this-alias */
/* eslint-disable unicorn/no-this-assignment */
/* eslint-disable unicorn/prefer-at */
import type { TagResponseDto } from '@immich/sdk';
export const normalizeTreePath = (path: string) => path.replace(/^\//, '').replace(/\/$/, '');
export class TreeNode extends Map<string, TreeNode> {
value: string;
path: string;
parent: TreeNode | null;
hasAssets: boolean;
id: string | undefined;
color: string | undefined;
private _parents: TreeNode[] | undefined;
private _children: TreeNode[] | undefined;
export function buildTree(paths: string[]) {
const root: RecursiveObject = {};
private constructor(value: string, path: string, parent: TreeNode | null) {
super();
this.value = value;
this.parent = parent;
this.path = path;
this.hasAssets = false;
}
for (const path of paths) {
const parts = path.split('/');
let current = root;
static fromPaths(paths: string[]) {
const root = new TreeNode('', '', null);
for (const path of paths) {
const current = root.add(path);
current.hasAssets = true;
}
return root;
}
static fromTags(tags: TagResponseDto[]) {
const root = new TreeNode('', '', null);
for (const tag of tags) {
const current = root.add(tag.value);
current.hasAssets = true;
current.id = tag.id;
current.color = tag.color;
}
return root;
}
traverse(path: string) {
const parts = getPathParts(path);
let current: TreeNode = this;
let curPart = null;
for (const part of parts) {
if (!current[part]) {
current[part] = {};
// segments common to all subtrees can be collapsed together
curPart = curPart === null ? part : joinPaths(curPart, part);
const next = current.get(curPart);
if (next) {
current = next;
curPart = null;
}
current = current[part];
}
return current;
}
collapse() {
if (this.size === 1 && !this.hasAssets && this.parent !== null) {
const child = this.values().next().value!;
child.value = joinPaths(this.value, child.value);
child.parent = this.parent;
this.parent.delete(this.value);
this.parent.set(child.value, child);
}
for (const child of this.values()) {
child.collapse();
}
}
return root;
private add(path: string) {
let current: TreeNode = this;
for (const part of getPathParts(path)) {
let next = current.get(part);
if (next === undefined) {
next = new TreeNode(part, joinPaths(current.path, part), current);
current.set(part, next);
}
current = next;
}
return current;
}
get parents(): TreeNode[] {
if (this._parents) {
return this._parents;
}
const parents: TreeNode[] = [];
let current: TreeNode | null = this.parent;
while (current !== null && current.parent !== null) {
parents.push(current);
current = current.parent;
}
return (this._parents = parents.reverse());
}
get children(): TreeNode[] {
return (this._children ??= Array.from(this.values()));
}
}
export const normalizeTreePath = (path: string) =>
path.length > 1 && path[path.length - 1] === '/' ? path.slice(0, -1) : path;
export function getPathParts(path: string) {
const parts = path.split('/');
if (path[0] === '/') {
parts[0] = '/';
}
if (path[path.length - 1] === '/') {
parts.pop();
}
return parts;
}
export function joinPaths(path1: string, path2: string) {
if (!path1) {
return path2;
}
if (!path2) {
return path1;
}
if (path1[path1.length - 1] === '/') {
return path1 + path2;
}
return path1 + '/' + path2;
}
export function getParentPath(path: string) {
const normalized = normalizeTreePath(path);
const last = normalized.lastIndexOf('/');
if (last > 0) {
return normalized.slice(0, last);
}
return last === 0 ? '/' : normalized;
}
@@ -1,6 +1,5 @@
<script lang="ts">
import { afterNavigate, goto, invalidateAll } from '$app/navigation';
import { page } from '$app/stores';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -28,10 +27,9 @@
import { preferences } from '$lib/stores/user.store';
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { joinPaths } from '$lib/utils/tree-utils';
import { IconButton } from '@immich/ui';
import { mdiDotsVertical, mdiFolder, mdiFolderHome, mdiFolderOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@@ -43,51 +41,40 @@
const viewport: Viewport = $state({ width: 0, height: 0 });
let pathSegments = $derived(data.path ? data.path.split('/') : []);
let tree = $derived(buildTree(foldersStore.uniquePaths));
let currentPath = $derived($page.url.searchParams.get(QueryParameter.PATH) || '');
let currentTreeItems = $derived(currentPath ? data.currentFolders : Object.keys(tree).sort());
const assetInteraction = new AssetInteraction();
onMount(async function initializeFolders() {
await foldersStore.fetchUniquePaths();
});
const handleNavigateToFolder = (folderName: string) => navigateToView(joinPaths(data.tree.path, folderName));
const handleNavigateToFolder = async function handleNavigateToFolder(folderName: string) {
await navigateToView(normalizeTreePath(`${data.path || ''}/${folderName}`));
};
const getLinkForPath = function getLinkForPath(path: string) {
function getLinkForPath(path: string) {
const url = new URL(AppRoute.FOLDERS, globalThis.location.href);
if (path) {
url.searchParams.set(QueryParameter.PATH, path);
}
url.searchParams.set(QueryParameter.PATH, path);
return url.href;
};
}
afterNavigate(function clearAssetSelection() {
// Clear the asset selection when we navigate (like going to another folder)
cancelMultiselect(assetInteraction);
});
const navigateToView = function navigateToView(path: string) {
return goto(getLinkForPath(path));
};
function navigateToView(path: string) {
return goto(getLinkForPath(path), { keepFocus: true, noScroll: true });
}
const triggerAssetUpdate = async function updateAssets() {
async function triggerAssetUpdate() {
cancelMultiselect(assetInteraction);
await foldersStore.refreshAssetsByPath(data.path);
if (data.tree.path) {
await foldersStore.refreshAssetsByPath(data.tree.path);
}
await invalidateAll();
};
}
const handleSelectAllAssets = function handleSelectAllAssets() {
function handleSelectAllAssets() {
if (!data.pathAssets) {
return;
}
assetInteraction.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
};
}
</script>
<UserPageLayout title={data.meta.title}>
@@ -99,8 +86,8 @@
<div class="h-full">
<TreeItems
icons={{ default: mdiFolderOutline, active: mdiFolder }}
items={tree}
active={currentPath}
tree={foldersStore.folders!}
active={data.tree.path}
getLink={getLinkForPath}
/>
</div>
@@ -108,10 +95,10 @@
</Sidebar>
{/snippet}
<Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />
<Breadcrumbs node={data.tree} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
<TreeItemThumbnails items={currentTreeItems} icon={mdiFolder} onClick={handleNavigateToFolder} />
<TreeItemThumbnails items={data.tree.children} icon={mdiFolder} onClick={handleNavigateToFolder} />
<!-- Assets -->
{#if data.pathAssets && data.pathAssets.length > 0}
@@ -3,38 +3,28 @@ import { foldersStore } from '$lib/stores/folders.svelte';
import { authenticate } from '$lib/utils/auth';
import { getFormatter } from '$lib/utils/i18n';
import { getAssetInfoFromParam } from '$lib/utils/navigation';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import type { PageLoad } from './$types';
export const load = (async ({ params, url }) => {
await authenticate(url);
const asset = await getAssetInfoFromParam(params);
const $t = await getFormatter();
await foldersStore.fetchUniquePaths();
let pathAssets = null;
const [, asset, $t] = await Promise.all([foldersStore.fetchTree(), getAssetInfoFromParam(params), getFormatter()]);
let tree = foldersStore.folders!;
const path = url.searchParams.get(QueryParameter.PATH);
if (path) {
await foldersStore.fetchAssetsByPath(path);
pathAssets = foldersStore.assets[path] || null;
} else {
// If no path is provided, we we're at the root level
tree = tree.traverse(path);
} else if (path === null) {
// If no path is provided, we've just navigated to the folders page.
// We should bust the asset cache of the folder store, to make sure we don't show stale data
foldersStore.bustAssetCache();
}
let tree = buildTree(foldersStore.uniquePaths);
const parts = normalizeTreePath(path || '').split('/');
for (const part of parts) {
tree = tree?.[part];
}
// only fetch assets if the folder has assets
const pathAssets = tree.hasAssets ? await foldersStore.fetchAssetsByPath(tree.path) : null;
return {
asset,
path,
currentFolders: Object.keys(tree || {}).sort(),
tree,
pathAssets,
meta: {
title: $t('folders'),
@@ -1,6 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
@@ -15,9 +14,9 @@
import Sidebar from '$lib/components/sidebar/sidebar.svelte';
import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
@@ -31,38 +30,24 @@
let { data }: Props = $props();
let pathSegments = $derived(data.path ? data.path.split('/') : []);
let currentPath = $derived($page.url.searchParams.get(QueryParameter.PATH) || '');
const assetInteraction = new AssetInteraction();
const buildMap = (tags: TagResponseDto[]) => {
return Object.fromEntries(tags.map((tag) => [tag.value, tag]));
};
const assetStore = new AssetStore();
$effect(() => void assetStore.updateOptions({ deferInit: !tag, tagId }));
$effect(() => void assetStore.updateOptions({ deferInit: !tag, tagId: tag.id }));
onDestroy(() => assetStore.destroy());
let tags = $derived<TagResponseDto[]>(data.tags);
let tagsMap = $derived(buildMap(tags));
let tag = $derived(currentPath ? tagsMap[currentPath] : null);
let tagId = $derived(tag?.id);
let tree = $derived(buildTree(tags.map((tag) => tag.value)));
const tree = $derived(TreeNode.fromTags(tags));
const tag = $derived(tree.traverse(data.path));
const handleNavigation = async (tag: string) => {
await navigateToView(normalizeTreePath(`${data.path || ''}/${tag}`));
};
const handleNavigation = (tag: string) => navigateToView(joinPaths(data.path, tag));
const getLink = (path: string) => {
const url = new URL(AppRoute.TAGS, globalThis.location.href);
if (path) {
url.searchParams.set(QueryParameter.PATH, path);
}
url.searchParams.set(QueryParameter.PATH, path);
return url.href;
};
const getColor = (path: string) => tagsMap[path]?.color;
const navigateToView = (path: string) => goto(getLink(path));
let isNewOpen = $state(false);
@@ -86,7 +71,7 @@
const handleSubmit = async () => {
if (tag && isEditOpen && newTagColor) {
await updateTag({ id: tag.id, tagUpdateDto: { color: newTagColor } });
await updateTag({ id: tag.id!, tagUpdateDto: { color: newTagColor } });
notificationController.show({
message: $t('tag_updated', { values: { tag: tag.value } }),
@@ -125,12 +110,11 @@
return;
}
await deleteTag({ id: tag.id });
await deleteTag({ id: tag.id! });
tags = await getAllTags();
// navigate to parent
const parentPath = pathSegments.slice(0, -1).join('/');
await navigateToView(parentPath);
await navigateToView(tag.parent ? tag.parent.path : '');
};
const onsubmit = async (event: Event) => {
@@ -146,13 +130,7 @@
<section>
<div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
<div class="h-full">
<TreeItems
icons={{ default: mdiTag, active: mdiTag }}
items={tree}
active={currentPath}
{getLink}
{getColor}
/>
<TreeItems icons={{ default: mdiTag, active: mdiTag }} {tree} active={tag.path} {getLink} />
</div>
</section>
</Sidebar>
@@ -164,7 +142,7 @@
<Text class="hidden md:block">{$t('create_tag')}</Text>
</Button>
{#if pathSegments.length > 0 && tag}
{#if tag.path.length > 0}
<Button leadingIcon={mdiPencil} onclick={handleEdit} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('edit_tag')}</Text>
</Button>
@@ -175,17 +153,17 @@
</HStack>
{/snippet}
<Breadcrumbs {pathSegments} icon={mdiTagMultiple} title={$t('tags')} {getLink} />
<Breadcrumbs node={tag} icon={mdiTagMultiple} title={$t('tags')} {getLink} />
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
{#if tag}
{#if tag.hasAssets}
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
{#snippet empty()}
<TreeItemThumbnails items={data.children} icon={mdiTag} onClick={handleNavigation} />
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
{/snippet}
</AssetGrid>
{:else}
<TreeItemThumbnails items={Object.keys(tree)} icon={mdiTag} onClick={handleNavigation} />
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
{/if}
</section>
</UserPageLayout>
@@ -2,7 +2,6 @@ import { QueryParameter } from '$lib/constants';
import { authenticate } from '$lib/utils/auth';
import { getFormatter } from '$lib/utils/i18n';
import { getAssetInfoFromParam } from '$lib/utils/navigation';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { getAllTags } from '@immich/sdk';
import type { PageLoad } from './$types';
@@ -11,20 +10,12 @@ export const load = (async ({ params, url }) => {
const asset = await getAssetInfoFromParam(params);
const $t = await getFormatter();
const path = url.searchParams.get(QueryParameter.PATH);
const tags = await getAllTags();
const tree = buildTree(tags.map((tag) => tag.value));
let currentTree = tree;
const parts = normalizeTreePath(path || '').split('/');
for (const part of parts) {
currentTree = currentTree?.[part];
}
return {
path: url.searchParams.get(QueryParameter.PATH) ?? '',
tags,
asset,
path,
children: Object.keys(currentTree || {}),
meta: {
title: $t('tags'),
},