feat(server,web): libraries (#3124)

* feat: libraries Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> Co-authored-by: Alex <alex.tran1502@gmail.com>
2023-09-20 13:16:33 +02:00
parent 816db700e1
commit acdc66413c
143 changed files with 10941 additions and 386 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -21,6 +21,7 @@
        "lodash-es": "^4.17.21",
        "luxon": "^3.2.1",
        "socket.io-client": "^4.6.1",
+        "svelte-loading-spinners": "^0.3.4",
        "svelte-local-storage-store": "^0.5.0",
        "svelte-material-icons": "^3.0.5",
        "thumbhash": "^0.1.1"
@@ -29,6 +30,7 @@
        "@babel/preset-env": "^7.20.2",
        "@babel/preset-typescript": "^7.22.5",
        "@faker-js/faker": "^7.6.0",
+        "@floating-ui/dom": "^1.5.1",
        "@sveltejs/adapter-node": "^1.2.0",
        "@sveltejs/kit": "^1.20.4",
        "@testing-library/jest-dom": "^5.16.5",
@@ -48,6 +50,9 @@
        "eslint-config-prettier": "^8.6.0",
        "eslint-plugin-svelte": "^2.30.0",
        "factory.ts": "^1.3.0",
+        "flowbite": "^1.8.1",
+        "flowbite-svelte": "^0.43.1",
+        "flowbite-svelte-icons": "^0.3.6",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^29.4.3",
        "jest-environment-jsdom": "^29.4.3",
@@ -59,6 +64,7 @@
        "svelte-check": "^3.4.3",
        "svelte-jester": "^2.3.2",
        "svelte-preprocess": "^5.0.3",
+        "tailwind-merge": "^1.14.0",
        "tailwindcss": "^3.2.7",
        "tslib": "^2.5.0",
        "typescript": "^5.0.0",
@@ -2345,6 +2351,31 @@
        "npm": ">=6.0.0"
      }
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+      "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+      "dev": true
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -3173,6 +3204,16 @@
      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
      "dev": true
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@rollup/plugin-commonjs": {
      "version": "24.0.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz",
@@ -6195,6 +6236,45 @@
      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
      "dev": true
    },
+    "node_modules/flowbite": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.8.1.tgz",
+      "integrity": "sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.3",
+        "mini-svg-data-uri": "^1.4.3"
+      }
+    },
+    "node_modules/flowbite-svelte": {
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.43.1.tgz",
+      "integrity": "sha512-01ofjsHi7YRNx/MvmjpULQ5L6ar8El7yqWD3aJJupyaXRvTyPb5CHPUP5fT1rOJA11oeZDnPRTdJ27aDuTXpZQ==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1",
+        "flowbite": "^1.8.1",
+        "tailwind-merge": "^1.14.0"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55.1 || ^4.0.0"
+      }
+    },
+    "node_modules/flowbite-svelte-icons": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.3.6.tgz",
+      "integrity": "sha512-4YEq++cbD36KF+zGgLqfkmQgfWGMAP7tjDbesuieROx6UgbMBTtj7f4n49iO+g1cMLelGsCkyZiwelCXDbIJ2w==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": "^3.54.0 || ^4.0.0",
+        "tailwind-merge": "^1.13.2",
+        "tailwindcss": "^3.3.2"
+      }
+    },
    "node_modules/follow-redirects": {
      "version": "1.15.2",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -9549,6 +9629,15 @@
        "node": ">=4"
      }
    },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -11224,6 +11313,11 @@
        "svelte": ">= 3"
      }
    },
+    "node_modules/svelte-loading-spinners": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.4.tgz",
+      "integrity": "sha512-vKaW71QMCBcTNijAGc0mUl8k3DQ66iYmp6MB8BMGCXyWk82bTrcLy8FOnSm9fE+8q6TwzD6PLUoYFHt0II93Xw=="
+    },
    "node_modules/svelte-local-storage-store": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.5.0.tgz",
@@ -11351,6 +11445,16 @@
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
      "dev": true
    },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
@@ -13657,6 +13761,31 @@
      "integrity": "sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==",
      "dev": true
    },
+    "@floating-ui/core": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+      "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+      "dev": true
+    },
    "@humanwhocodes/config-array": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -14285,6 +14414,12 @@
      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
      "dev": true
    },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true
+    },
    "@rollup/plugin-commonjs": {
      "version": "24.0.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz",
@@ -16518,6 +16653,34 @@
      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
      "dev": true
    },
+    "flowbite": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.8.1.tgz",
+      "integrity": "sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.9.3",
+        "mini-svg-data-uri": "^1.4.3"
+      }
+    },
+    "flowbite-svelte": {
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.43.1.tgz",
+      "integrity": "sha512-01ofjsHi7YRNx/MvmjpULQ5L6ar8El7yqWD3aJJupyaXRvTyPb5CHPUP5fT1rOJA11oeZDnPRTdJ27aDuTXpZQ==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/dom": "^1.5.1",
+        "flowbite": "^1.8.1",
+        "tailwind-merge": "^1.14.0"
+      }
+    },
+    "flowbite-svelte-icons": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.3.6.tgz",
+      "integrity": "sha512-4YEq++cbD36KF+zGgLqfkmQgfWGMAP7tjDbesuieROx6UgbMBTtj7f4n49iO+g1cMLelGsCkyZiwelCXDbIJ2w==",
+      "dev": true,
+      "requires": {}
+    },
    "follow-redirects": {
      "version": "1.15.2",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -18987,6 +19150,12 @@
      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
      "dev": true
    },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true
+    },
    "minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -20160,6 +20329,11 @@
      "dev": true,
      "requires": {}
    },
+    "svelte-loading-spinners": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.4.tgz",
+      "integrity": "sha512-vKaW71QMCBcTNijAGc0mUl8k3DQ66iYmp6MB8BMGCXyWk82bTrcLy8FOnSm9fE+8q6TwzD6PLUoYFHt0II93Xw=="
+    },
    "svelte-local-storage-store": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.5.0.tgz",
@@ -20191,6 +20365,12 @@
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
      "dev": true
    },
+    "tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "dev": true
+    },
    "tailwindcss": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -23,6 +23,7 @@
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.22.5",
    "@faker-js/faker": "^7.6.0",
+    "@floating-ui/dom": "^1.5.1",
    "@sveltejs/adapter-node": "^1.2.0",
    "@sveltejs/kit": "^1.20.4",
    "@testing-library/jest-dom": "^5.16.5",
@@ -42,6 +43,9 @@
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-svelte": "^2.30.0",
    "factory.ts": "^1.3.0",
+    "flowbite": "^1.8.1",
+    "flowbite-svelte": "^0.43.1",
+    "flowbite-svelte-icons": "^0.3.6",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.4.3",
    "jest-environment-jsdom": "^29.4.3",
@@ -53,6 +57,7 @@
    "svelte-check": "^3.4.3",
    "svelte-jester": "^2.3.2",
    "svelte-preprocess": "^5.0.3",
+    "tailwind-merge": "^1.14.0",
    "tailwindcss": "^3.2.7",
    "tslib": "^2.5.0",
    "typescript": "^5.0.0",
@@ -73,6 +78,7 @@
    "lodash-es": "^4.17.21",
    "luxon": "^3.2.1",
    "socket.io-client": "^4.6.1",
+    "svelte-loading-spinners": "^0.3.4",
    "svelte-local-storage-store": "^0.5.0",
    "svelte-material-icons": "^3.0.5",
    "thumbhash": "^0.1.1"
--- a/web/src/api/api.ts
+++ b/web/src/api/api.ts
@@ -1,5 +1,6 @@
 import {
  AlbumApi,
+  LibraryApi,
  APIKeyApi,
  AssetApi,
  AssetApiFp,
@@ -25,6 +26,7 @@ import type { ApiParams } from './types';

 export class ImmichApi {
  public albumApi: AlbumApi;
+  public libraryApi: LibraryApi;
  public assetApi: AssetApi;
  public authenticationApi: AuthenticationApi;
  public jobApi: JobApi;
@@ -49,6 +51,7 @@ export class ImmichApi {
    this.config = new Configuration(params);

    this.albumApi = new AlbumApi(this.config);
+    this.libraryApi = new LibraryApi(this.config);
    this.assetApi = new AssetApi(this.config);
    this.authenticationApi = new AuthenticationApi(this.config);
    this.jobApi = new JobApi(this.config);
@@ -130,6 +133,7 @@ export class ImmichApi {
      [JobName.StorageTemplateMigration]: 'Storage Template Migration',
      [JobName.BackgroundTask]: 'Background Tasks',
      [JobName.Search]: 'Search',
+      [JobName.Library]: 'Library',
    };

    return names[jobName];
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
--- a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
+++ b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
@@ -12,6 +12,7 @@
  import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
  import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
  import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
+  import LibraryShelves from 'svelte-material-icons/LibraryShelves.svelte';
  import FolderMove from 'svelte-material-icons/FolderMove.svelte';
  import CogIcon from 'svelte-material-icons/Cog.svelte';
  import Table from 'svelte-material-icons/Table.svelte';
@@ -64,6 +65,13 @@
      title: api.getJobName(JobName.MetadataExtraction),
      subtitle: 'Extract metadata information i.e. GPS, resolution...etc',
    },
+    [JobName.Library]: {
+      icon: LibraryShelves,
+      title: api.getJobName(JobName.Library),
+      subtitle: 'Perform library tasks',
+      allText: 'ALL',
+      missingText: 'REFRESH',
+    },
    [JobName.Sidecar]: {
      title: api.getJobName(JobName.Sidecar),
      icon: FileXmlBox,
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -6,6 +6,7 @@
  import { createEventDispatcher } from 'svelte';
  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
  import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+  import AlertOutline from 'svelte-material-icons/AlertOutline.svelte';
  import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
@@ -74,6 +75,14 @@
    <CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
  </div>
  <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
+    {#if asset.isOffline}
+      <CircleIconButton
+        isOpacity={true}
+        logo={AlertOutline}
+        on:click={() => dispatch('showDetail')}
+        title="Asset Offline"
+      />
+    {/if}
    {#if showMotionPlayButton}
      {#if isMotionPhotoPlaying}
        <CircleIconButton
@@ -134,7 +143,9 @@
    {/if}

    {#if isOwner}
-      <CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
+      {#if !asset.isReadOnly && !asset.isExternal}
+        <CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
+      {/if}
      <div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
        <CircleIconButton isOpacity={true} logo={DotsVertical} on:click={showOptionsMenu} title="More" />
        {#if isShowAssetOptions}
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -50,7 +50,7 @@
  let addToSharedAlbum = true;
  let shouldPlayMotionPhoto = false;
  let isShowProfileImageCrop = false;
-  let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
+  let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
  let canCopyImagesToClipboard: boolean;

  const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo);
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -101,6 +101,20 @@
    <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
  </div>

+  {#if asset.isOffline}
+    <section class="px-4 py-4">
+      <div role="alert">
+        <div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">Asset offline</div>
+        <div class="rounded-b border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
+          <p>
+            This asset is offline. Immich can not access its file location. Please ensure the asset is available and
+            then rescan the library.
+          </p>
+        </div>
+      </div>
+    </section>
+  {/if}
+
  <section class="mx-4 mt-10" style:display={!isOwner && textarea?.value == '' ? 'none' : 'block'}>
    <textarea
      bind:this={textarea}
@@ -156,8 +170,16 @@
  {/if}

  <div class="px-4 py-4">
-    {#if !asset.exifInfo}
+    {#if !asset.exifInfo && !asset.isExternal}
      <p class="text-sm">NO EXIF INFO AVAILABLE</p>
+    {:else if !asset.exifInfo && asset.isExternal}
+      <div class="flex gap-4 py-4">
+        <div>
+          <p class="break-all">
+            Metadata not loaded for {asset.originalPath}
+          </p>
+        </div>
+      </div>
    {:else}
      <p class="text-sm">DETAILS</p>
    {/if}
--- a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
+++ b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FolderRemove from 'svelte-material-icons/FolderRemove.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+
+  export let exclusionPattern: string;
+  export let canDelete = false;
+  export let submitText = 'Submit';
+
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => dispatch('cancel');
+  const handleSubmit = () => dispatch('submit', { excludePattern: exclusionPattern });
+</script>
+
+<FullScreenModal on:clickOutside={() => handleCancel()}>
+  <div
+    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <FolderRemove size="4em" />
+      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Add Exclusion pattern</h1>
+    </div>
+
+    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+      <p class="p-5 text-sm">
+        Exclusion patterns lets you ignore files and folders when scanning your library. This is useful if you have
+        folders that contain files you don't want to import, such as RAW files.
+        <br /><br />
+        Add exclusion patterns. Globbing using *, **, and ? is supported. To ignore all files in any directory named "Raw",
+        use "**/Raw/**". To ignore all files ending in ".tif", use "**/*.tif". To ignore an absolute path, use "/path/to/ignore".
+      </p>
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="exclusionPattern">Pattern</label>
+        <input
+          class="immich-form-input"
+          id="exclusionPattern"
+          name="exclusionPattern"
+          type="text"
+          bind:value={exclusionPattern}
+        />
+      </div>
+      <div class="mt-8 flex w-full gap-4 px-4">
+        <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
+        {#if canDelete}
+          <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
+        {/if}
+
+        <Button type="submit" fullwidth>{submitText}</Button>
+      </div>
+    </form>
+  </div>
+</FullScreenModal>
--- a/web/src/lib/components/forms/library-import-path-form.svelte
+++ b/web/src/lib/components/forms/library-import-path-form.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FolderSync from 'svelte-material-icons/FolderSync.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+
+  export let importPath: string;
+  export let title = 'Import path';
+  export let cancelText = 'Cancel';
+  export let submitText = 'Save';
+  export let canDelete = false;
+
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => dispatch('cancel');
+  const handleSubmit = () => dispatch('submit', { importPath });
+</script>
+
+<FullScreenModal on:clickOutside={() => handleCancel()}>
+  <div
+    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <FolderSync size="4em" />
+      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
+        {title}
+      </h1>
+    </div>
+
+    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+      <p class="p-5 text-sm">
+        Specify a folder to import. This folder, including subfolders, will be scanned for images and videos. Note that
+        you are only allowed to import paths inside of your account's external path, configured in the administrative
+        settings.
+      </p>
+
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="path">Path</label>
+        <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
+      </div>
+
+      <div class="mt-8 flex w-full gap-4 px-4">
+        <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
+        {#if canDelete}
+          <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
+        {/if}
+
+        <Button type="submit" fullwidth>{submitText}</Button>
+      </div>
+    </form>
+  </div>
+</FullScreenModal>
--- a/web/src/lib/components/forms/library-import-paths-form.svelte
+++ b/web/src/lib/components/forms/library-import-paths-form.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { handleError } from '../../utils/handle-error';
+  import LibraryImportPathForm from './library-import-path-form.svelte';
+  import { onMount } from 'svelte';
+  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+  import type { LibraryResponseDto } from '@api';
+
+  export let library: Partial<LibraryResponseDto>;
+
+  let addImportPath = false;
+  let editImportPath: number | null = null;
+
+  let importPathToAdd: string;
+  let editedImportPath: string;
+
+  let importPaths: string[] = [];
+
+  onMount(() => {
+    if (library.importPaths) {
+      importPaths = library.importPaths;
+    } else {
+      library.importPaths = [];
+    }
+  });
+
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => {
+    dispatch('cancel');
+  };
+
+  const handleSubmit = () => {
+    dispatch('submit', { ...library });
+  };
+
+  const handleAddImportPath = async () => {
+    if (!addImportPath) {
+      return;
+    }
+
+    if (!library.importPaths) {
+      library.importPaths = [];
+    }
+
+    try {
+      library.importPaths.push(importPathToAdd);
+      importPaths = library.importPaths;
+    } catch (error) {
+      handleError(error, 'Unable to remove import path');
+    } finally {
+      addImportPath = false;
+    }
+  };
+
+  const handleEditImportPath = async () => {
+    if (editImportPath === null) {
+      return;
+    }
+
+    if (!library.importPaths) {
+      library.importPaths = [];
+    }
+
+    try {
+      library.importPaths[editImportPath] = editedImportPath;
+      importPaths = library.importPaths;
+    } catch (error) {
+      editImportPath = null;
+      handleError(error, 'Unable to edit import path');
+    } finally {
+      editImportPath = null;
+    }
+  };
+
+  const handleDeleteImportPath = async () => {
+    if (editImportPath === null) {
+      return;
+    }
+
+    try {
+      if (!library.importPaths) {
+        library.importPaths = [];
+      }
+
+      const pathToDelete = library.importPaths[editImportPath];
+      library.importPaths = library.importPaths.filter((path) => path != pathToDelete);
+      importPaths = library.importPaths;
+    } catch (error) {
+      handleError(error, 'Unable to delete import path');
+    } finally {
+      editImportPath = null;
+    }
+  };
+</script>
+
+{#if addImportPath}
+  <LibraryImportPathForm
+    title="Add Import Path"
+    submitText="Add"
+    bind:importPath={importPathToAdd}
+    on:submit={handleAddImportPath}
+    on:cancel={() => {
+      addImportPath = false;
+    }}
+  />
+{/if}
+
+{#if editImportPath != null}
+  <LibraryImportPathForm
+    title="Edit Import Path"
+    submitText="Save"
+    canDelete={true}
+    bind:importPath={editedImportPath}
+    on:submit={handleEditImportPath}
+    on:delete={handleDeleteImportPath}
+    on:cancel={() => {
+      editImportPath = null;
+    }}
+  />
+{/if}
+
+<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-4">
+  <table class="text-left">
+    <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+      {#each importPaths as importPath, listIndex}
+        <tr
+          class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+            listIndex % 2 == 0
+              ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+              : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+          }`}
+        >
+          <td class="w-4/5 text-ellipsis px-4 text-sm">{importPath}</td>
+          <td class="w-1/5 text-ellipsis px-4 text-sm">
+            <button
+              type="button"
+              on:click={() => {
+                editImportPath = listIndex;
+                editedImportPath = importPath;
+              }}
+              class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+            >
+              <PencilOutline size="16" />
+            </button>
+          </td>
+        </tr>
+      {/each}
+      <tr
+        class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+          importPaths.length % 2 == 0
+            ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+            : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+        }`}
+      >
+        <td class="w-4/5 text-ellipsis px-4 text-sm" />
+        <td class="w-1/5 text-ellipsis px-4 text-sm"
+          ><Button
+            type="button"
+            size="sm"
+            on:click={() => {
+              addImportPath = true;
+            }}>Add path</Button
+          ></td
+        ></tr
+      >
+    </tbody>
+  </table>
+
+  <div class="flex w-full justify-end gap-2">
+    <Button size="sm" color="gray" on:click={() => handleCancel()}>Cancel</Button>
+    <Button size="sm" type="submit">Save</Button>
+  </div>
+</form>
--- a/web/src/lib/components/forms/library-rename-form.svelte
+++ b/web/src/lib/components/forms/library-rename-form.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import type { LibraryResponseDto } from '@api';
+
+  export let library: Partial<LibraryResponseDto>;
+
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => {
+    dispatch('cancel');
+  };
+
+  const handleSubmit = () => {
+    dispatch('submit', { ...library });
+  };
+</script>
+
+<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-2">
+  <div class="flex flex-col gap-2">
+    <label class="immich-form-label" for="path">Name</label>
+    <input class="immich-form-input" id="name" name="name" type="text" bind:value={library.name} />
+  </div>
+  <div class="flex w-full justify-end gap-2 pt-2">
+    <Button size="sm" color="gray" on:click={() => handleCancel()}>Cancel</Button>
+    <Button size="sm" type="submit">Save</Button>
+  </div>
+</form>
--- a/web/src/lib/components/forms/library-scan-settings-form.svelte
+++ b/web/src/lib/components/forms/library-scan-settings-form.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { LibraryType, type LibraryResponseDto } from '@api';
+  import { handleError } from '../../utils/handle-error';
+  import { onMount } from 'svelte';
+  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+  import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
+
+  export let library: Partial<LibraryResponseDto>;
+
+  let addExclusionPattern = false;
+  let editExclusionPattern: number | null = null;
+
+  let exclusionPatternToAdd: string;
+  let editedExclusionPattern: string;
+
+  let exclusionPatterns: string[] = [];
+
+  onMount(() => {
+    if (library.exclusionPatterns) {
+      exclusionPatterns = library.exclusionPatterns;
+    } else {
+      library.exclusionPatterns = [];
+    }
+  });
+
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => {
+    dispatch('cancel');
+  };
+
+  const handleSubmit = () => {
+    dispatch('submit', { ...library, libraryType: LibraryType.External });
+  };
+
+  const handleAddExclusionPattern = async () => {
+    if (!addExclusionPattern) {
+      return;
+    }
+
+    if (!library.exclusionPatterns) {
+      library.exclusionPatterns = [];
+    }
+
+    try {
+      library.exclusionPatterns.push(exclusionPatternToAdd);
+      exclusionPatternToAdd = '';
+
+      exclusionPatterns = library.exclusionPatterns;
+      addExclusionPattern = false;
+    } catch (error) {
+      handleError(error, 'Unable to add exclude pattern');
+    }
+  };
+
+  const handleEditExclusionPattern = async () => {
+    if (editExclusionPattern === null) {
+      return;
+    }
+
+    if (!library.exclusionPatterns) {
+      library.exclusionPatterns = [];
+    }
+
+    try {
+      library.exclusionPatterns[editExclusionPattern] = editedExclusionPattern;
+      exclusionPatterns = library.exclusionPatterns;
+    } catch (error) {
+      handleError(error, 'Unable to edit exclude pattern');
+    } finally {
+      editExclusionPattern = null;
+    }
+  };
+
+  const handleDeleteExclusionPattern = async () => {
+    if (editExclusionPattern === null) {
+      return;
+    }
+
+    try {
+      if (!library.exclusionPatterns) {
+        library.exclusionPatterns = [];
+      }
+
+      const pathToDelete = library.exclusionPatterns[editExclusionPattern];
+      library.exclusionPatterns = library.exclusionPatterns.filter((path) => path != pathToDelete);
+      exclusionPatterns = library.exclusionPatterns;
+    } catch (error) {
+      handleError(error, 'Unable to delete exclude pattern');
+    } finally {
+      editExclusionPattern = null;
+    }
+  };
+</script>
+
+{#if addExclusionPattern}
+  <LibraryExclusionPatternForm
+    submitText="Add"
+    bind:exclusionPattern={exclusionPatternToAdd}
+    on:submit={handleAddExclusionPattern}
+    on:cancel={() => {
+      addExclusionPattern = false;
+    }}
+  />
+{/if}
+
+{#if editExclusionPattern != null}
+  <LibraryExclusionPatternForm
+    submitText="Save"
+    canDelete={true}
+    bind:exclusionPattern={editedExclusionPattern}
+    on:submit={handleEditExclusionPattern}
+    on:delete={handleDeleteExclusionPattern}
+    on:cancel={() => {
+      editExclusionPattern = null;
+    }}
+  />
+{/if}
+
+<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-4">
+  <table class="w-full text-left">
+    <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+      {#each exclusionPatterns as exclusionPattern, listIndex}
+        <tr
+          class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+            listIndex % 2 == 0
+              ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+              : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+          }`}
+        >
+          <td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
+          <td class="w-1/4 text-ellipsis px-4 text-sm">
+            <button
+              type="button"
+              on:click={() => {
+                editExclusionPattern = listIndex;
+                editedExclusionPattern = exclusionPattern;
+              }}
+              class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+            >
+              <PencilOutline size="16" />
+            </button>
+          </td>
+        </tr>
+      {/each}
+      <tr
+        class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+          exclusionPatterns.length % 2 == 0
+            ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+            : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+        }`}
+      >
+        <td class="w-3/4 text-ellipsis px-4 text-sm">
+          {#if exclusionPatterns.length === 0}
+            No pattern added
+          {/if}
+        </td>
+        <td class="w-1/4 text-ellipsis px-4 text-sm"
+          ><Button
+            size="sm"
+            on:click={() => {
+              addExclusionPattern = true;
+            }}>Add Exclusion Pattern</Button
+          ></td
+        ></tr
+      >
+    </tbody>
+  </table>
+
+  <div class="flex w-full justify-end gap-4">
+    <Button size="sm" color="gray" on:click={() => handleCancel()}>Cancel</Button>
+    <Button size="sm" type="submit">Save</Button>
+  </div>
+</form>
--- a/web/src/lib/components/user-settings-page/library-list.svelte
+++ b/web/src/lib/components/user-settings-page/library-list.svelte
@@ -0,0 +1,380 @@
+<script lang="ts">
+  import { api, UpdateLibraryDto, LibraryResponseDto, LibraryType, LibraryStatsResponseDto } from '@api';
+  import { onMount } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { fade } from 'svelte/transition';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import Database from 'svelte-material-icons/Database.svelte';
+  import Upload from 'svelte-material-icons/Upload.svelte';
+  import Pulse from 'svelte-loading-spinners/Pulse.svelte';
+
+  import { slide } from 'svelte/transition';
+  import { Dropdown, DropdownDivider, DropdownItem, Helper } from 'flowbite-svelte';
+  import { Icon } from 'flowbite-svelte-icons';
+  import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
+  import LibraryScanSettingsForm from '../forms/library-scan-settings-form.svelte';
+  import LibraryRenameForm from '../forms/library-rename-form.svelte';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+
+  let libraries: LibraryResponseDto[] = [];
+
+  let stats: LibraryStatsResponseDto[] = [];
+  let photos: number[] = [];
+  let videos: number[] = [];
+  let totalCount: number[] = [];
+  let diskUsage: number[] = [];
+  let diskUsageUnit: string[] = [];
+
+  let confirmDeleteLibrary: LibraryResponseDto | null = null;
+  let deleteLibrary: LibraryResponseDto | null = null;
+
+  let editImportPaths: number | null;
+  let editScanSettings: number | null;
+  let renameLibrary: number | null;
+
+  let updateLibraryIndex: number | null;
+
+  let deleteAssetCount = 0;
+
+  let dropdownOpen: boolean[] = [];
+
+  onMount(() => {
+    readLibraryList();
+  });
+
+  const closeAll = () => {
+    editImportPaths = null;
+    editScanSettings = null;
+    renameLibrary = null;
+    updateLibraryIndex = null;
+
+    for (let i = 0; i < dropdownOpen.length; i++) {
+      dropdownOpen[i] = false;
+    }
+  };
+
+  const refreshStats = async (listIndex: number) => {
+    const { data } = await api.libraryApi.getLibraryStatistics({ id: libraries[listIndex].id });
+    stats[listIndex] = data;
+    photos[listIndex] = stats[listIndex].photos;
+    videos[listIndex] = stats[listIndex].videos;
+    totalCount[listIndex] = stats[listIndex].total;
+    [diskUsage[listIndex], diskUsageUnit[listIndex]] = getBytesWithUnit(stats[listIndex].usage, 0);
+  };
+
+  async function readLibraryList() {
+    const { data } = await api.libraryApi.getAllForUser();
+    libraries = data;
+
+    dropdownOpen.length = libraries.length;
+
+    for (let i = 0; i < libraries.length; i++) {
+      await refreshStats(i);
+      dropdownOpen[i] = false;
+    }
+  }
+
+  const handleCreate = async (libraryType: LibraryType) => {
+    try {
+      const { data } = await api.libraryApi.createLibrary({
+        createLibraryDto: { type: libraryType },
+      });
+
+      const createdLibrary = data;
+
+      notificationController.show({
+        message: `Created library: ${createdLibrary.name}`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to create library');
+    } finally {
+      await readLibraryList();
+    }
+  };
+
+  const handleUpdate = async (event: CustomEvent<UpdateLibraryDto>) => {
+    if (updateLibraryIndex === null) {
+      return;
+    }
+
+    try {
+      const dto = event.detail;
+      const libraryId = libraries[updateLibraryIndex].id;
+
+      await api.libraryApi.updateLibrary({ id: libraryId, updateLibraryDto: dto });
+    } catch (error) {
+      handleError(error, 'Unable to update library');
+    } finally {
+      closeAll();
+      await readLibraryList();
+    }
+  };
+
+  const handleDelete = async () => {
+    if (confirmDeleteLibrary) {
+      deleteLibrary = confirmDeleteLibrary;
+    }
+
+    if (!deleteLibrary) {
+      return;
+    }
+
+    try {
+      await api.libraryApi.deleteLibrary({ id: deleteLibrary.id });
+      notificationController.show({
+        message: `Library deleted`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to remove library');
+    } finally {
+      confirmDeleteLibrary = null;
+      deleteLibrary = null;
+      await readLibraryList();
+    }
+  };
+
+  const handleScanAll = async () => {
+    try {
+      for (const library of libraries) {
+        if (library.type === LibraryType.External) {
+          await api.libraryApi.scanLibrary({ id: library.id, scanLibraryDto: {} });
+        }
+      }
+      notificationController.show({
+        message: `Refreshing all libraries`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to scan libraries');
+    }
+  };
+
+  const handleScan = async (libraryId: string) => {
+    try {
+      await api.libraryApi.scanLibrary({ id: libraryId, scanLibraryDto: {} });
+      notificationController.show({
+        message: `Scanning library for new files`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to scan library');
+    }
+  };
+
+  const handleScanChanges = async (libraryId: string) => {
+    try {
+      await api.libraryApi.scanLibrary({ id: libraryId, scanLibraryDto: { refreshModifiedFiles: true } });
+      notificationController.show({
+        message: `Scanning library for changed files`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to scan library');
+    }
+  };
+
+  const handleForceScan = async (libraryId: string) => {
+    try {
+      await api.libraryApi.scanLibrary({ id: libraryId, scanLibraryDto: { refreshAllFiles: true } });
+      notificationController.show({
+        message: `Forcing refresh of all library files`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to scan library');
+    }
+  };
+
+  const handleRemoveOffline = async (libraryId: string) => {
+    try {
+      await api.libraryApi.removeOfflineFiles({ id: libraryId });
+      notificationController.show({
+        message: `Removing Offline Files`,
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, 'Unable to remove offline files');
+    }
+  };
+</script>
+
+{#if confirmDeleteLibrary}
+  <ConfirmDialogue
+    title="Warning!"
+    prompt="Are you sure you want to delete this library? This will DELETE all {deleteAssetCount} contained assets and cannot be undone."
+    on:confirm={handleDelete}
+    on:cancel={() => (confirmDeleteLibrary = null)}
+  />
+{/if}
+
+<section class="my-4">
+  <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
+    {#if libraries.length > 0}
+      <table class="w-full text-left">
+        <thead
+          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+        >
+          <tr class="flex w-full place-items-center">
+            <th class="w-1/6 text-center text-sm font-medium">Type</th>
+            <th class="w-1/3 text-center text-sm font-medium">Name</th>
+            <th class="w-1/5 text-center text-sm font-medium">Assets</th>
+            <th class="w-1/6 text-center text-sm font-medium">Size</th>
+            <th class="w-1/6 text-center text-sm font-medium" />
+          </tr>
+        </thead>
+        <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+          {#each libraries as library, index}
+            {#key library.id}
+              <tr
+                class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+                  index % 2 == 0
+                    ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+                    : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+                }`}
+              >
+                <td class="w-1/6 px-10 text-sm">
+                  {#if library.type === LibraryType.External}
+                    <Database size="40" title="External library (created on {library.createdAt})" />
+                  {:else if library.type === LibraryType.Upload}
+                    <Upload size="40" title="Upload library (created on {library.createdAt})" />
+                  {/if}</td
+                >
+
+                <td class="w-1/3 text-ellipsis px-4 text-sm">{library.name}</td>
+                {#if totalCount[index] == undefined}
+                  <td colspan="2" class="flex w-1/3 items-center justify-center text-ellipsis px-4 text-sm">
+                    <Pulse color="gray" size="40" unit="px" />
+                  </td>
+                {:else}
+                  <td class="w-1/6 text-ellipsis px-4 text-sm">
+                    {totalCount[index]}
+                  </td>
+                  <td class="w-1/6 text-ellipsis px-4 text-sm">{diskUsage[index]} {diskUsageUnit[index]} </td>
+                {/if}
+
+                <td class="w-1/6 text-ellipsis px-4 text-sm">
+                  <button
+                    class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+                  >
+                    <DotsVertical size="16" />
+                  </button>
+
+                  <Dropdown bind:open={dropdownOpen[index]}>
+                    <DropdownItem
+                      on:click={() => {
+                        closeAll();
+                        renameLibrary = index;
+                        updateLibraryIndex = index;
+                      }}>Rename</DropdownItem
+                    >
+                    {#if library.type === LibraryType.External}
+                      <DropdownItem
+                        on:click={function () {
+                          closeAll();
+                          handleScan(library.id);
+                        }}
+                      >
+                        Scan Library Files
+                        <Helper>Looks for new files</Helper>
+                      </DropdownItem>
+                      <DropdownItem
+                        on:click={() => {
+                          closeAll();
+                          editImportPaths = index;
+                          updateLibraryIndex = index;
+                        }}>Edit Import Paths</DropdownItem
+                      >
+                      <DropdownItem class="flex items-center justify-between">
+                        Manage<Icon name="chevron-right-solid" class="ml-2 h-3 w-3 text-primary-700 dark:text-white" />
+                      </DropdownItem>
+                      <Dropdown slot="footer" class="w-60" placement="right-start">
+                        <DropdownItem
+                          on:click={() => {
+                            closeAll();
+                            editScanSettings = index;
+                            updateLibraryIndex = index;
+                          }}>Scan Settings</DropdownItem
+                        >
+                        <DropdownDivider />
+                        <DropdownItem
+                          on:click={function () {
+                            closeAll();
+                            handleScanChanges(library.id);
+                          }}
+                          >Scan All Library Files
+                          <Helper>Rescan, but also refreshes modified files</Helper>
+                        </DropdownItem>
+                        <DropdownItem
+                          on:click={function () {
+                            closeAll();
+                            handleForceScan(library.id);
+                          }}
+                          >Force Scan All Library Files
+                          <Helper>Rescan, but refreshes every file</Helper>
+                        </DropdownItem>
+                        <DropdownItem
+                          on:click={function () {
+                            closeAll();
+                            handleRemoveOffline(library.id);
+                          }}
+                          >Remove Offline Files
+                          <Helper>Any offline files are removed from Immich</Helper>
+                        </DropdownItem>
+                        <DropdownItem
+                          on:click={function () {
+                            closeAll();
+                            refreshStats(index);
+
+                            if (totalCount[index] > 0) {
+                              deleteAssetCount = totalCount[index];
+                              confirmDeleteLibrary = library;
+                            } else {
+                              deleteLibrary = library;
+                              handleDelete();
+                            }
+                          }}>Delete Library</DropdownItem
+                        >
+                      </Dropdown>
+                    {/if}
+                  </Dropdown>
+                </td>
+              </tr>
+              {#if renameLibrary === index}
+                <div transition:slide={{ duration: 250 }}>
+                  <LibraryRenameForm {library} on:submit={handleUpdate} on:cancel={() => (renameLibrary = null)} />
+                </div>
+              {/if}
+              {#if editImportPaths === index}
+                <div transition:slide={{ duration: 250 }}>
+                  <LibraryImportPathsForm
+                    {library}
+                    on:submit={handleUpdate}
+                    on:cancel={() => (editImportPaths = null)}
+                  />
+                </div>
+              {/if}
+              {#if editScanSettings === index}
+                <div transition:slide={{ duration: 250 }} class="mb-4 ml-4 mr-4">
+                  <LibraryScanSettingsForm
+                    {library}
+                    on:submit={handleUpdate}
+                    on:cancel={() => (editScanSettings = null)}
+                  />
+                </div>
+              {/if}
+            {/key}
+          {/each}
+        </tbody>
+      </table>
+    {/if}
+    <div class="my-2 flex justify-end gap-2">
+      <Button size="sm" on:click={() => handleScanAll()}>Scan All Libraries</Button>
+      <Button size="sm" on:click={() => handleCreate(LibraryType.External)}>Create External Library</Button>
+    </div>
+  </div>
+</section>
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -11,6 +11,7 @@
  import PartnerSettings from './partner-settings.svelte';
  import UserAPIKeyList from './user-api-key-list.svelte';
  import UserProfileSettings from './user-profile-settings.svelte';
+  import LibraryList from './library-list.svelte';

  export let user: UserResponseDto;

@@ -36,6 +37,10 @@
  <DeviceList bind:devices />
 </SettingAccordion>

+<SettingAccordion title="Libraries" subtitle="Manage your asset libraries">
+  <LibraryList />
+</SettingAccordion>
+
 <SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
  <MemoriesSettings {user} />
 </SettingAccordion>
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -12,6 +12,7 @@ export enum AppRoute {
  ADMIN_JOBS = '/admin/jobs-status',

  ALBUMS = '/albums',
+  LIBRARIES = '/libraries',
  ARCHIVE = '/archive',
  FAVORITES = '/favorites',
  PEOPLE = '/people',
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -83,6 +83,13 @@ export const downloadArchive = async (fileName: string, options: DownloadInfoDto
 };

 export const downloadFile = async (asset: AssetResponseDto) => {
+  if (asset.isOffline) {
+    notificationController.show({
+      type: NotificationType.Info,
+      message: `Asset ${asset.originalFileName} is offline`,
+    });
+    return;
+  }
  const assets = [
    {
      filename: `${asset.originalFileName}.${getFilenameExtension(asset.originalPath)}`,
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
  darkMode: 'class',
  theme: {
    extend: {
@@ -22,6 +22,20 @@ module.exports = {
        'immich-dark-error': '#d32f2f',
        'immich-dark-success': '#388e3c',
        'immich-dark-warning': '#f57c00',
+
+        // flowbite-svelte
+        primary: {
+          50: '#FFF5F2',
+          100: '#FFF1EE',
+          200: '#FFE4DE',
+          300: '#FFD5CC',
+          400: '#FFBCAD',
+          500: '#FE795D',
+          600: '#EF562F',
+          700: '#EB4F27',
+          800: '#CC4522',
+          900: '#A5371B',
+        },
      },
      fontFamily: {
        'immich-title': ['Snowburst One', 'cursive'],
@@ -31,5 +45,5 @@ module.exports = {
      },
    },
  },
-  plugins: [],
+  plugins: [require('flowbite/plugin')],
 };