Merge branch 'main' of https://github.com/immich-app/immich into feat/inline-offline-check

server/src/app.module.ts

@@ -20,14 +20,14 @@ import { ErrorInterceptor } from 'src/middleware/error.interceptor';
 import { FileUploadInterceptor } from 'src/middleware/file-upload.interceptor';
 import { GlobalExceptionFilter } from 'src/middleware/global-exception.filter';
 import { LoggingInterceptor } from 'src/middleware/logging.interceptor';
-import { repositories } from 'src/repositories';
+import { providers, repositories } from 'src/repositories';
 import { ConfigRepository } from 'src/repositories/config.repository';
 import { teardownTelemetry } from 'src/repositories/telemetry.repository';
 import { services } from 'src/services';
 import { CliService } from 'src/services/cli.service';
 import { DatabaseService } from 'src/services/database.service';
 
-const common = [...services, ...repositories];
+const common = [...services, ...providers, ...repositories];
 
 const middleware = [
   FileUploadInterceptor,
@@ -73,7 +73,7 @@ class BaseModule implements OnModuleInit, OnModuleDestroy {
   }
 
   async onModuleInit() {
-    this.telemetryRepository.setup({ repositories: repositories.map(({ useClass }) => useClass) });
+    this.telemetryRepository.setup({ repositories: [...providers.map(({ useClass }) => useClass), ...repositories] });
 
     this.jobRepository.setup({ services });
     if (this.worker === ImmichWorker.MICROSERVICES) {

server/src/bin/sync-sql.ts

@@ -12,7 +12,7 @@ import { format } from 'sql-formatter';
 import { GENERATE_SQL_KEY, GenerateSqlQueries } from 'src/decorators';
 import { entities } from 'src/entities';
 import { ILoggerRepository } from 'src/interfaces/logger.interface';
-import { repositories } from 'src/repositories';
+import { providers, repositories } from 'src/repositories';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { ConfigRepository } from 'src/repositories/config.repository';
 import { AuthService } from 'src/services/auth.service';
@@ -43,7 +43,7 @@ export class SqlLogger implements Logger {
 
 const reflector = new Reflector();
 
-type Repository = (typeof repositories)[0]['useClass'];
+type Repository = (typeof providers)[0]['useClass'];
 type Provider = { provide: any; useClass: Repository };
 type SqlGeneratorOptions = { targetDir: string };
 
@@ -57,7 +57,11 @@ class SqlGenerator {
   async run() {
     try {
       await this.setup();
-      for (const repository of repositories) {
+      const targets = [
+        ...providers,
+        ...repositories.map((repository) => ({ provide: repository, useClass: repository as any })),
+      ];
+      for (const repository of targets) {
         if (repository.provide === ILoggerRepository) {
           continue;
         }
@@ -99,7 +103,7 @@ class SqlGenerator {
         TypeOrmModule.forFeature(entities),
         OpenTelemetryModule.forRoot(otel),
       ],
-      providers: [...repositories, AuthService, SchedulerRegistry],
+      providers: [...providers, ...repositories, AuthService, SchedulerRegistry],
     }).compile();
 
     this.app = await moduleFixture.createNestApplication().init();

server/src/database.ts

@@ -0,0 +1,3 @@
+export const columns = {
+  userDto: ['id', 'name', 'email', 'profileImagePath', 'profileChangedAt'],
+} as const;

server/src/dtos/activity.dto.ts

@@ -1,7 +1,8 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { IsEnum, IsNotEmpty, IsString, ValidateIf } from 'class-validator';
-import { UserResponseDto, mapUser } from 'src/dtos/user.dto';
-import { ActivityEntity } from 'src/entities/activity.entity';
+import { mapUser, UserResponseDto } from 'src/dtos/user.dto';
+import { UserEntity } from 'src/entities/user.entity';
+import { ActivityItem } from 'src/types';
 import { Optional, ValidateUUID } from 'src/validation';
 
 export enum ReactionType {
@@ -67,13 +68,13 @@ export class ActivityCreateDto extends ActivityDto {
   comment?: string;
 }
 
-export function mapActivity(activity: ActivityEntity): ActivityResponseDto {
+export const mapActivity = (activity: ActivityItem): ActivityResponseDto => {
   return {
     id: activity.id,
     assetId: activity.assetId,
     createdAt: activity.createdAt,
     comment: activity.comment,
     type: activity.isLiked ? ReactionType.LIKE : ReactionType.COMMENT,
-    user: mapUser(activity.user),
+    user: mapUser(activity.user as unknown as UserEntity),
   };
-}
+};

server/src/interfaces/activity.interface.ts

@@ -1,13 +0,0 @@
-import { Insertable } from 'kysely';
-import { Activity } from 'src/db';
-import { ActivityEntity } from 'src/entities/activity.entity';
-import { ActivitySearch } from 'src/repositories/activity.repository';
-
-export const IActivityRepository = 'IActivityRepository';
-
-export interface IActivityRepository {
-  search(options: ActivitySearch): Promise<ActivityEntity[]>;
-  create(activity: Insertable<Activity>): Promise<ActivityEntity>;
-  delete(id: string): Promise<void>;
-  getStatistics(options: { albumId: string; assetId?: string }): Promise<number>;
-}

server/src/queries/access.repository.sql

@@ -1,180 +1,137 @@
 -- NOTE: This file is auto generated by ./sql-generator
 
 -- AccessRepository.activity.checkOwnerAccess
-SELECT
-  "ActivityEntity"."id" AS "ActivityEntity_id"
-FROM
-  "activity" "ActivityEntity"
-WHERE
-  (
-    ("ActivityEntity"."id" IN ($1))
-    AND ("ActivityEntity"."userId" = $2)
-  )
+select
+  "activity"."id"
+from
+  "activity"
+where
+  "activity"."id" in ($1)
+  and "activity"."userId" = $2
 
 -- AccessRepository.activity.checkAlbumOwnerAccess
-SELECT
-  "ActivityEntity"."id" AS "ActivityEntity_id"
-FROM
-  "activity" "ActivityEntity"
-  LEFT JOIN "albums" "ActivityEntity__ActivityEntity_album" ON "ActivityEntity__ActivityEntity_album"."id" = "ActivityEntity"."albumId"
-  AND (
-    "ActivityEntity__ActivityEntity_album"."deletedAt" IS NULL
-  )
-WHERE
-  (
-    ("ActivityEntity"."id" IN ($1))
-    AND (
-      (
-        (
-          "ActivityEntity__ActivityEntity_album"."ownerId" = $2
-        )
-      )
-    )
-  )
+select
+  "activity"."id"
+from
+  "activity"
+  left join "albums" on "activity"."albumId" = "albums"."id"
+  and "albums"."deletedAt" is null
+where
+  "activity"."id" in ($1)
+  and "albums"."ownerId" = $2::uuid
 
 -- AccessRepository.activity.checkCreateAccess
-SELECT
-  "album"."id" AS "album_id"
-FROM
-  "albums" "album"
-  LEFT JOIN "albums_shared_users_users" "album_albumUsers_users" ON "album_albumUsers_users"."albumsId" = "album"."id"
-  LEFT JOIN "users" "albumUsers" ON "albumUsers"."id" = "album_albumUsers_users"."usersId"
-  AND ("albumUsers"."deletedAt" IS NULL)
-WHERE
-  (
-    "album"."id" IN ($1)
-    AND "album"."isActivityEnabled" = true
-    AND (
-      "album"."ownerId" = $2
-      OR "albumUsers"."id" = $2
-    )
+select
+  "albums"."id"
+from
+  "albums"
+  left join "albums_shared_users_users" as "albumUsers" on "albumUsers"."albumsId" = "albums"."id"
+  left join "users" on "users"."id" = "albumUsers"."usersId"
+  and "users"."deletedAt" is null
+where
+  "albums"."id" in ($1)
+  and "albums"."isActivityEnabled" = $2
+  and (
+    "albums"."ownerId" = $3
+    or "users"."id" = $4
   )
-  AND ("album"."deletedAt" IS NULL)
+  and "albums"."deletedAt" is null
 
 -- AccessRepository.album.checkOwnerAccess
-SELECT
-  "AlbumEntity"."id" AS "AlbumEntity_id"
-FROM
-  "albums" "AlbumEntity"
-WHERE
-  (
-    (
-      ("AlbumEntity"."id" IN ($1))
-      AND ("AlbumEntity"."ownerId" = $2)
-    )
-  )
-  AND ("AlbumEntity"."deletedAt" IS NULL)
+select
+  "albums"."id"
+from
+  "albums"
+where
+  "albums"."id" in ($1)
+  and "albums"."ownerId" = $2
+  and "albums"."deletedAt" is null
 
 -- AccessRepository.album.checkSharedAlbumAccess
-SELECT
-  "AlbumEntity"."id" AS "AlbumEntity_id"
-FROM
-  "albums" "AlbumEntity"
-  LEFT JOIN "albums_shared_users_users" "AlbumEntity__AlbumEntity_albumUsers" ON "AlbumEntity__AlbumEntity_albumUsers"."albumsId" = "AlbumEntity"."id"
-  LEFT JOIN "users" "a641d58cf46d4a391ba060ac4dc337665c69ffea" ON "a641d58cf46d4a391ba060ac4dc337665c69ffea"."id" = "AlbumEntity__AlbumEntity_albumUsers"."usersId"
-  AND (
-    "a641d58cf46d4a391ba060ac4dc337665c69ffea"."deletedAt" IS NULL
-  )
-WHERE
-  (
-    (
-      ("AlbumEntity"."id" IN ($1))
-      AND (
-        (
-          (
-            (
-              (
-                "a641d58cf46d4a391ba060ac4dc337665c69ffea"."id" = $2
-              )
-            )
-          )
-          AND (
-            "AlbumEntity__AlbumEntity_albumUsers"."role" IN ($3, $4)
-          )
-        )
-      )
-    )
-  )
-  AND ("AlbumEntity"."deletedAt" IS NULL)
+select
+  "albums"."id"
+from
+  "albums"
+  left join "albums_shared_users_users" as "albumUsers" on "albumUsers"."albumsId" = "albums"."id"
+  left join "users" on "users"."id" = "albumUsers"."usersId"
+  and "users"."deletedAt" is null
+where
+  "albums"."id" in ($1)
+  and "albums"."deletedAt" is null
+  and "users"."id" = $2
+  and "albumUsers"."role" in ($3, $4)
 
 -- AccessRepository.album.checkSharedLinkAccess
-SELECT
-  "SharedLinkEntity"."albumId" AS "SharedLinkEntity_albumId",
-  "SharedLinkEntity"."id" AS "SharedLinkEntity_id"
-FROM
-  "shared_links" "SharedLinkEntity"
-WHERE
-  (
-    ("SharedLinkEntity"."id" = $1)
-    AND ("SharedLinkEntity"."albumId" IN ($2))
-  )
+select
+  "shared_links"."albumId"
+from
+  "shared_links"
+where
+  "shared_links"."id" = $1
+  and "shared_links"."albumId" in ($2)
 
 -- AccessRepository.asset.checkAlbumAccess
-SELECT
-  "asset"."id" AS "assetId",
-  "asset"."livePhotoVideoId" AS "livePhotoVideoId"
-FROM
-  "albums" "album"
-  INNER JOIN "albums_assets_assets" "album_asset" ON "album_asset"."albumsId" = "album"."id"
-  INNER JOIN "assets" "asset" ON "asset"."id" = "album_asset"."assetsId"
-  AND ("asset"."deletedAt" IS NULL)
-  LEFT JOIN "albums_shared_users_users" "album_albumUsers_users" ON "album_albumUsers_users"."albumsId" = "album"."id"
-  LEFT JOIN "users" "albumUsers" ON "albumUsers"."id" = "album_albumUsers_users"."usersId"
-  AND ("albumUsers"."deletedAt" IS NULL)
-WHERE
-  (
-    array["asset"."id", "asset"."livePhotoVideoId"] && array[$1]::uuid []
-    AND (
-      "album"."ownerId" = $2
-      OR "albumUsers"."id" = $2
-    )
+select
+  "assets"."id",
+  "assets"."livePhotoVideoId"
+from
+  "albums"
+  inner join "albums_assets_assets" as "albumAssets" on "albums"."id" = "albumAssets"."albumsId"
+  inner join "assets" on "assets"."id" = "albumAssets"."assetsId"
+  and "assets"."deletedAt" is null
+  left join "albums_shared_users_users" as "albumUsers" on "albumUsers"."albumsId" = "albums"."id"
+  left join "users" on "users"."id" = "albumUsers"."usersId"
+  and "users"."deletedAt" is null
+where
+  array["assets"."id", "assets"."livePhotoVideoId"] && array[$1]::uuid []
+  and (
+    "albums"."ownerId" = $2
+    or "users"."id" = $3
   )
-  AND ("album"."deletedAt" IS NULL)
+  and "albums"."deletedAt" is null
 
 -- AccessRepository.asset.checkOwnerAccess
-SELECT
-  "AssetEntity"."id" AS "AssetEntity_id"
-FROM
-  "assets" "AssetEntity"
-WHERE
-  (
-    ("AssetEntity"."id" IN ($1))
-    AND ("AssetEntity"."ownerId" = $2)
-  )
+select
+  "assets"."id"
+from
+  "assets"
+where
+  "assets"."id" in ($1)
+  and "assets"."ownerId" = $2
 
 -- AccessRepository.asset.checkPartnerAccess
-SELECT
-  "asset"."id" AS "assetId"
-FROM
-  "partners" "partner"
-  INNER JOIN "users" "sharedBy" ON "sharedBy"."id" = "partner"."sharedById"
-  AND ("sharedBy"."deletedAt" IS NULL)
-  INNER JOIN "assets" "asset" ON "asset"."ownerId" = "sharedBy"."id"
-  AND ("asset"."deletedAt" IS NULL)
-WHERE
+select
+  "assets"."id"
+from
+  "partners" as "partner"
+  inner join "users" as "sharedBy" on "sharedBy"."id" = "partner"."sharedById"
+  and "sharedBy"."deletedAt" is null
+  inner join "assets" on "assets"."ownerId" = "sharedBy"."id"
+  and "assets"."deletedAt" is null
+where
   "partner"."sharedWithId" = $1
-  AND "asset"."isArchived" = false
-  AND "asset"."id" IN ($2)
+  and "assets"."isArchived" = $2
+  and "assets"."id" in ($3)
 
 -- AccessRepository.asset.checkSharedLinkAccess
-SELECT
-  "assets"."id" AS "assetId",
-  "assets"."livePhotoVideoId" AS "assetLivePhotoVideoId",
-  "albumAssets"."id" AS "albumAssetId",
-  "albumAssets"."livePhotoVideoId" AS "albumAssetLivePhotoVideoId"
-FROM
-  "shared_links" "sharedLink"
-  LEFT JOIN "albums" "album" ON "album"."id" = "sharedLink"."albumId"
-  AND ("album"."deletedAt" IS NULL)
-  LEFT JOIN "shared_link__asset" "assets_sharedLink" ON "assets_sharedLink"."sharedLinksId" = "sharedLink"."id"
-  LEFT JOIN "assets" "assets" ON "assets"."id" = "assets_sharedLink"."assetsId"
-  AND ("assets"."deletedAt" IS NULL)
-  LEFT JOIN "albums_assets_assets" "album_albumAssets" ON "album_albumAssets"."albumsId" = "album"."id"
-  LEFT JOIN "assets" "albumAssets" ON "albumAssets"."id" = "album_albumAssets"."assetsId"
-  AND ("albumAssets"."deletedAt" IS NULL)
-WHERE
-  "sharedLink"."id" = $1
-  AND array[
+select
+  "assets"."id" as "assetId",
+  "assets"."livePhotoVideoId" as "assetLivePhotoVideoId",
+  "albumAssets"."id" as "albumAssetId",
+  "albumAssets"."livePhotoVideoId" as "albumAssetLivePhotoVideoId"
+from
+  "shared_links"
+  left join "albums" on "albums"."id" = "shared_links"."albumId"
+  and "albums"."deletedAt" is null
+  left join "shared_link__asset" on "shared_link__asset"."sharedLinksId" = "shared_links"."id"
+  left join "assets" on "assets"."id" = "shared_link__asset"."assetsId"
+  and "assets"."deletedAt" is null
+  left join "albums_assets_assets" on "albums_assets_assets"."albumsId" = "albums"."id"
+  left join "assets" as "albumAssets" on "albumAssets"."id" = "albums_assets_assets"."assetsId"
+  and "albumAssets"."deletedAt" is null
+where
+  "shared_links"."id" = $1
+  and array[
     "assets"."id",
     "assets"."livePhotoVideoId",
     "albumAssets"."id",
@@ -182,100 +139,76 @@ WHERE
   ] && array[$2]::uuid []
 
 -- AccessRepository.authDevice.checkOwnerAccess
-SELECT
-  "SessionEntity"."id" AS "SessionEntity_id"
-FROM
-  "sessions" "SessionEntity"
-WHERE
-  (
-    ("SessionEntity"."userId" = $1)
-    AND ("SessionEntity"."id" IN ($2))
-  )
+select
+  "sessions"."id"
+from
+  "sessions"
+where
+  "sessions"."userId" = $1
+  and "sessions"."id" in ($2)
 
 -- AccessRepository.memory.checkOwnerAccess
-SELECT
-  "MemoryEntity"."id" AS "MemoryEntity_id"
-FROM
-  "memories" "MemoryEntity"
-WHERE
-  (
-    (
-      ("MemoryEntity"."id" IN ($1))
-      AND ("MemoryEntity"."ownerId" = $2)
-    )
-  )
-  AND ("MemoryEntity"."deletedAt" IS NULL)
+select
+  "memories"."id"
+from
+  "memories"
+where
+  "memories"."id" in ($1)
+  and "memories"."ownerId" = $2
+  and "memories"."deletedAt" is null
 
 -- AccessRepository.person.checkOwnerAccess
-SELECT
-  "PersonEntity"."id" AS "PersonEntity_id"
-FROM
-  "person" "PersonEntity"
-WHERE
-  (
-    ("PersonEntity"."id" IN ($1))
-    AND ("PersonEntity"."ownerId" = $2)
-  )
+select
+  "person"."id"
+from
+  "person"
+where
+  "person"."id" in ($1)
+  and "person"."ownerId" = $2
 
 -- AccessRepository.person.checkFaceOwnerAccess
-SELECT
-  "AssetFaceEntity"."id" AS "AssetFaceEntity_id"
-FROM
-  "asset_faces" "AssetFaceEntity"
-  LEFT JOIN "assets" "AssetFaceEntity__AssetFaceEntity_asset" ON "AssetFaceEntity__AssetFaceEntity_asset"."id" = "AssetFaceEntity"."assetId"
-  AND (
-    "AssetFaceEntity__AssetFaceEntity_asset"."deletedAt" IS NULL
-  )
-WHERE
-  (
-    ("AssetFaceEntity"."id" IN ($1))
-    AND (
-      (
-        (
-          "AssetFaceEntity__AssetFaceEntity_asset"."ownerId" = $2
-        )
-      )
-    )
-  )
+select
+  "asset_faces"."id"
+from
+  "asset_faces"
+  left join "assets" on "assets"."id" = "asset_faces"."assetId"
+  and "assets"."deletedAt" is null
+where
+  "asset_faces"."id" in ($1)
+  and "assets"."ownerId" = $2
 
 -- AccessRepository.partner.checkUpdateAccess
-SELECT
-  "partner"."sharedById" AS "partner_sharedById",
-  "partner"."sharedWithId" AS "partner_sharedWithId"
-FROM
-  "partners" "partner"
-WHERE
-  "partner"."sharedById" IN ($1)
-  AND "partner"."sharedWithId" = $2
+select
+  "partners"."sharedById"
+from
+  "partners"
+where
+  "partners"."sharedById" in ($1)
+  and "partners"."sharedWithId" = $2
 
 -- AccessRepository.stack.checkOwnerAccess
-SELECT
-  "StackEntity"."id" AS "StackEntity_id"
-FROM
-  "asset_stack" "StackEntity"
-WHERE
-  (
-    ("StackEntity"."id" IN ($1))
-    AND ("StackEntity"."ownerId" = $2)
-  )
+select
+  "stacks"."id"
+from
+  "asset_stack" as "stacks"
+where
+  "stacks"."id" in ($1)
+  and "stacks"."ownerId" = $2
 
 -- AccessRepository.tag.checkOwnerAccess
-SELECT
-  "TagEntity"."id" AS "TagEntity_id"
-FROM
-  "tags" "TagEntity"
-WHERE
-  (
-    ("TagEntity"."id" IN ($1))
-    AND ("TagEntity"."userId" = $2)
-  )
+select
+  "tags"."id"
+from
+  "tags"
+where
+  "tags"."id" in ($1)
+  and "tags"."userId" = $2
 
 -- AccessRepository.timeline.checkPartnerAccess
-SELECT
-  "partner"."sharedById" AS "partner_sharedById",
-  "partner"."sharedWithId" AS "partner_sharedWithId"
-FROM
-  "partners" "partner"
-WHERE
-  "partner"."sharedById" IN ($1)
-  AND "partner"."sharedWithId" = $2
+select
+  "partners"."sharedById"
+from
+  "partners"
+where
+  "partners"."sharedById" in ($1)
+  and "partners"."sharedWithId" = $2

server/src/queries/activity.repository.sql

@@ -9,7 +9,11 @@ select
     from
       (
         select
-          *
+          "id",
+          "name",
+          "email",
+          "profileImagePath",
+          "profileChangedAt"
         from
           "users"
         where

server/src/repositories/access.repository.ts

@@ -1,21 +1,12 @@
 import { Injectable } from '@nestjs/common';
-import { InjectRepository } from '@nestjs/typeorm';
+import { Kysely, sql } from 'kysely';
+import { InjectKysely } from 'nestjs-kysely';
+import { DB } from 'src/db';
 import { ChunkedSet, DummyValue, GenerateSql } from 'src/decorators';
-import { ActivityEntity } from 'src/entities/activity.entity';
-import { AlbumEntity } from 'src/entities/album.entity';
-import { AssetFaceEntity } from 'src/entities/asset-face.entity';
-import { AssetEntity } from 'src/entities/asset.entity';
-import { LibraryEntity } from 'src/entities/library.entity';
-import { MemoryEntity } from 'src/entities/memory.entity';
-import { PartnerEntity } from 'src/entities/partner.entity';
-import { PersonEntity } from 'src/entities/person.entity';
-import { SessionEntity } from 'src/entities/session.entity';
-import { SharedLinkEntity } from 'src/entities/shared-link.entity';
-import { StackEntity } from 'src/entities/stack.entity';
-import { TagEntity } from 'src/entities/tag.entity';
+
 import { AlbumUserRole } from 'src/enum';
 import { IAccessRepository } from 'src/interfaces/access.interface';
-import { Brackets, In, Repository } from 'typeorm';
+import { asUuid } from 'src/utils/database';
 
 type IActivityAccess = IAccessRepository['activity'];
 type IAlbumAccess = IAccessRepository['album'];
@@ -30,10 +21,7 @@ type ITimelineAccess = IAccessRepository['timeline'];
 
 @Injectable()
 class ActivityAccess implements IActivityAccess {
-  constructor(
-    private activityRepository: Repository<ActivityEntity>,
-    private albumRepository: Repository<AlbumEntity>,
-  ) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -42,15 +30,16 @@ class ActivityAccess implements IActivityAccess {
       return new Set();
     }
 
-    return this.activityRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...activityIds]),
-          userId,
-        },
-      })
-      .then((activities) => new Set(activities.map((activity) => activity.id)));
+    return this.db
+      .selectFrom('activity')
+      .select('activity.id')
+      .where('activity.id', 'in', [...activityIds])
+      .where('activity.userId', '=', userId)
+      .execute()
+      .then((activities) => {
+        console.log('activities', activities);
+        return new Set(activities.map((activity) => activity.id));
+      });
   }
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
@@ -60,16 +49,13 @@ class ActivityAccess implements IActivityAccess {
       return new Set();
     }
 
-    return this.activityRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...activityIds]),
-          album: {
-            ownerId: userId,
-          },
-        },
-      })
+    return this.db
+      .selectFrom('activity')
+      .select('activity.id')
+      .leftJoin('albums', (join) => join.onRef('activity.albumId', '=', 'albums.id').on('albums.deletedAt', 'is', null))
+      .where('activity.id', 'in', [...activityIds])
+      .whereRef('albums.ownerId', '=', asUuid(userId))
+      .execute()
       .then((activities) => new Set(activities.map((activity) => activity.id)));
   }
 
@@ -80,28 +66,22 @@ class ActivityAccess implements IActivityAccess {
       return new Set();
     }
 
-    return this.albumRepository
-      .createQueryBuilder('album')
-      .select('album.id')
-      .leftJoin('album.albumUsers', 'album_albumUsers_users')
-      .leftJoin('album_albumUsers_users.user', 'albumUsers')
-      .where('album.id IN (:...albumIds)', { albumIds: [...albumIds] })
-      .andWhere('album.isActivityEnabled = true')
-      .andWhere(
-        new Brackets((qb) => {
-          qb.where('album.ownerId = :userId', { userId }).orWhere('albumUsers.id = :userId', { userId });
-        }),
-      )
-      .getMany()
+    return this.db
+      .selectFrom('albums')
+      .select('albums.id')
+      .leftJoin('albums_shared_users_users as albumUsers', 'albumUsers.albumsId', 'albums.id')
+      .leftJoin('users', (join) => join.onRef('users.id', '=', 'albumUsers.usersId').on('users.deletedAt', 'is', null))
+      .where('albums.id', 'in', [...albumIds])
+      .where('albums.isActivityEnabled', '=', true)
+      .where((eb) => eb.or([eb('albums.ownerId', '=', userId), eb('users.id', '=', userId)]))
+      .where('albums.deletedAt', 'is', null)
+      .execute()
       .then((albums) => new Set(albums.map((album) => album.id)));
   }
 }
 
 class AlbumAccess implements IAlbumAccess {
-  constructor(
-    private albumRepository: Repository<AlbumEntity>,
-    private sharedLinkRepository: Repository<SharedLinkEntity>,
-  ) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -110,14 +90,13 @@ class AlbumAccess implements IAlbumAccess {
       return new Set();
     }
 
-    return this.albumRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...albumIds]),
-          ownerId: userId,
-        },
-      })
+    return this.db
+      .selectFrom('albums')
+      .select('albums.id')
+      .where('albums.id', 'in', [...albumIds])
+      .where('albums.ownerId', '=', userId)
+      .where('albums.deletedAt', 'is', null)
+      .execute()
       .then((albums) => new Set(albums.map((album) => album.id)));
   }
 
@@ -128,19 +107,19 @@ class AlbumAccess implements IAlbumAccess {
       return new Set();
     }
 
-    return this.albumRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...albumIds]),
-          albumUsers: {
-            user: { id: userId },
-            // If editor access is needed we check for it, otherwise both are accepted
-            role:
-              access === AlbumUserRole.EDITOR ? AlbumUserRole.EDITOR : In([AlbumUserRole.EDITOR, AlbumUserRole.VIEWER]),
-          },
-        },
-      })
+    const accessRole =
+      access === AlbumUserRole.EDITOR ? [AlbumUserRole.EDITOR] : [AlbumUserRole.EDITOR, AlbumUserRole.VIEWER];
+
+    return this.db
+      .selectFrom('albums')
+      .select('albums.id')
+      .leftJoin('albums_shared_users_users as albumUsers', 'albumUsers.albumsId', 'albums.id')
+      .leftJoin('users', (join) => join.onRef('users.id', '=', 'albumUsers.usersId').on('users.deletedAt', 'is', null))
+      .where('albums.id', 'in', [...albumIds])
+      .where('albums.deletedAt', 'is', null)
+      .where('users.id', '=', userId)
+      .where('albumUsers.role', 'in', [...accessRole])
+      .execute()
       .then((albums) => new Set(albums.map((album) => album.id)));
   }
 
@@ -151,14 +130,12 @@ class AlbumAccess implements IAlbumAccess {
       return new Set();
     }
 
-    return this.sharedLinkRepository
-      .find({
-        select: { albumId: true },
-        where: {
-          id: sharedLinkId,
-          albumId: In([...albumIds]),
-        },
-      })
+    return this.db
+      .selectFrom('shared_links')
+      .select('shared_links.albumId')
+      .where('shared_links.id', '=', sharedLinkId)
+      .where('shared_links.albumId', 'in', [...albumIds])
+      .execute()
       .then(
         (sharedLinks) => new Set(sharedLinks.flatMap((sharedLink) => (sharedLink.albumId ? [sharedLink.albumId] : []))),
       );
@@ -166,12 +143,7 @@ class AlbumAccess implements IAlbumAccess {
 }
 
 class AssetAccess implements IAssetAccess {
-  constructor(
-    private albumRepository: Repository<AlbumEntity>,
-    private assetRepository: Repository<AssetEntity>,
-    private partnerRepository: Repository<PartnerEntity>,
-    private sharedLinkRepository: Repository<SharedLinkEntity>,
-  ) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -180,30 +152,31 @@ class AssetAccess implements IAssetAccess {
       return new Set();
     }
 
-    return this.albumRepository
-      .createQueryBuilder('album')
-      .innerJoin('album.assets', 'asset')
-      .leftJoin('album.albumUsers', 'album_albumUsers_users')
-      .leftJoin('album_albumUsers_users.user', 'albumUsers')
-      .select('asset.id', 'assetId')
-      .addSelect('asset.livePhotoVideoId', 'livePhotoVideoId')
-      .where('array["asset"."id", "asset"."livePhotoVideoId"] && array[:...assetIds]::uuid[]', {
-        assetIds: [...assetIds],
-      })
-      .andWhere(
-        new Brackets((qb) => {
-          qb.where('album.ownerId = :userId', { userId }).orWhere('albumUsers.id = :userId', { userId });
-        }),
+    return this.db
+      .selectFrom('albums')
+      .innerJoin('albums_assets_assets as albumAssets', 'albums.id', 'albumAssets.albumsId')
+      .innerJoin('assets', (join) =>
+        join.onRef('assets.id', '=', 'albumAssets.assetsId').on('assets.deletedAt', 'is', null),
       )
-      .getRawMany()
-      .then((rows) => {
+      .leftJoin('albums_shared_users_users as albumUsers', 'albumUsers.albumsId', 'albums.id')
+      .leftJoin('users', (join) => join.onRef('users.id', '=', 'albumUsers.usersId').on('users.deletedAt', 'is', null))
+      .select(['assets.id', 'assets.livePhotoVideoId'])
+      .where(
+        sql`array["assets"."id", "assets"."livePhotoVideoId"]`,
+        '&&',
+        sql`array[${sql.join([...assetIds])}]::uuid[] `,
+      )
+      .where((eb) => eb.or([eb('albums.ownerId', '=', userId), eb('users.id', '=', userId)]))
+      .where('albums.deletedAt', 'is', null)
+      .execute()
+      .then((assets) => {
         const allowedIds = new Set<string>();
-        for (const row of rows) {
-          if (row.assetId && assetIds.has(row.assetId)) {
-            allowedIds.add(row.assetId);
+        for (const asset of assets) {
+          if (asset.id && assetIds.has(asset.id)) {
+            allowedIds.add(asset.id);
           }
-          if (row.livePhotoVideoId && assetIds.has(row.livePhotoVideoId)) {
-            allowedIds.add(row.livePhotoVideoId);
+          if (asset.livePhotoVideoId && assetIds.has(asset.livePhotoVideoId)) {
+            allowedIds.add(asset.livePhotoVideoId);
           }
         }
         return allowedIds;
@@ -217,15 +190,12 @@ class AssetAccess implements IAssetAccess {
       return new Set();
     }
 
-    return this.assetRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...assetIds]),
-          ownerId: userId,
-        },
-        withDeleted: true,
-      })
+    return this.db
+      .selectFrom('assets')
+      .select('assets.id')
+      .where('assets.id', 'in', [...assetIds])
+      .where('assets.ownerId', '=', userId)
+      .execute()
       .then((assets) => new Set(assets.map((asset) => asset.id)));
   }
 
@@ -236,16 +206,20 @@ class AssetAccess implements IAssetAccess {
       return new Set();
     }
 
-    return this.partnerRepository
-      .createQueryBuilder('partner')
-      .innerJoin('partner.sharedBy', 'sharedBy')
-      .innerJoin('sharedBy.assets', 'asset')
-      .select('asset.id', 'assetId')
-      .where('partner.sharedWithId = :userId', { userId })
-      .andWhere('asset.isArchived = false')
-      .andWhere('asset.id IN (:...assetIds)', { assetIds: [...assetIds] })
-      .getRawMany()
-      .then((rows) => new Set(rows.map((row) => row.assetId)));
+    return this.db
+      .selectFrom('partners as partner')
+      .innerJoin('users as sharedBy', (join) =>
+        join.onRef('sharedBy.id', '=', 'partner.sharedById').on('sharedBy.deletedAt', 'is', null),
+      )
+      .innerJoin('assets', (join) =>
+        join.onRef('assets.ownerId', '=', 'sharedBy.id').on('assets.deletedAt', 'is', null),
+      )
+      .select('assets.id')
+      .where('partner.sharedWithId', '=', userId)
+      .where('assets.isArchived', '=', false)
+      .where('assets.id', 'in', [...assetIds])
+      .execute()
+      .then((assets) => new Set(assets.map((asset) => asset.id)));
   }
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
@@ -255,23 +229,32 @@ class AssetAccess implements IAssetAccess {
       return new Set();
     }
 
-    return this.sharedLinkRepository
-      .createQueryBuilder('sharedLink')
-      .leftJoin('sharedLink.album', 'album')
-      .leftJoin('sharedLink.assets', 'assets')
-      .leftJoin('album.assets', 'albumAssets')
-      .select('assets.id', 'assetId')
-      .addSelect('albumAssets.id', 'albumAssetId')
-      .addSelect('assets.livePhotoVideoId', 'assetLivePhotoVideoId')
-      .addSelect('albumAssets.livePhotoVideoId', 'albumAssetLivePhotoVideoId')
-      .where('sharedLink.id = :sharedLinkId', { sharedLinkId })
-      .andWhere(
-        'array["assets"."id", "assets"."livePhotoVideoId", "albumAssets"."id", "albumAssets"."livePhotoVideoId"] && array[:...assetIds]::uuid[]',
-        {
-          assetIds: [...assetIds],
-        },
+    return this.db
+      .selectFrom('shared_links')
+      .leftJoin('albums', (join) =>
+        join.onRef('albums.id', '=', 'shared_links.albumId').on('albums.deletedAt', 'is', null),
       )
-      .getRawMany()
+      .leftJoin('shared_link__asset', 'shared_link__asset.sharedLinksId', 'shared_links.id')
+      .leftJoin('assets', (join) =>
+        join.onRef('assets.id', '=', 'shared_link__asset.assetsId').on('assets.deletedAt', 'is', null),
+      )
+      .leftJoin('albums_assets_assets', 'albums_assets_assets.albumsId', 'albums.id')
+      .leftJoin('assets as albumAssets', (join) =>
+        join.onRef('albumAssets.id', '=', 'albums_assets_assets.assetsId').on('albumAssets.deletedAt', 'is', null),
+      )
+      .select([
+        'assets.id as assetId',
+        'assets.livePhotoVideoId as assetLivePhotoVideoId',
+        'albumAssets.id as albumAssetId',
+        'albumAssets.livePhotoVideoId as albumAssetLivePhotoVideoId',
+      ])
+      .where('shared_links.id', '=', sharedLinkId)
+      .where(
+        sql`array["assets"."id", "assets"."livePhotoVideoId", "albumAssets"."id", "albumAssets"."livePhotoVideoId"]`,
+        '&&',
+        sql`array[${sql.join([...assetIds])}]::uuid[] `,
+      )
+      .execute()
       .then((rows) => {
         const allowedIds = new Set<string>();
         for (const row of rows) {
@@ -294,7 +277,7 @@ class AssetAccess implements IAssetAccess {
 }
 
 class AuthDeviceAccess implements IAuthDeviceAccess {
-  constructor(private sessionRepository: Repository<SessionEntity>) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -303,20 +286,18 @@ class AuthDeviceAccess implements IAuthDeviceAccess {
       return new Set();
     }
 
-    return this.sessionRepository
-      .find({
-        select: { id: true },
-        where: {
-          userId,
-          id: In([...deviceIds]),
-        },
-      })
+    return this.db
+      .selectFrom('sessions')
+      .select('sessions.id')
+      .where('sessions.userId', '=', userId)
+      .where('sessions.id', 'in', [...deviceIds])
+      .execute()
       .then((tokens) => new Set(tokens.map((token) => token.id)));
   }
 }
 
 class StackAccess implements IStackAccess {
-  constructor(private stackRepository: Repository<StackEntity>) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -325,20 +306,18 @@ class StackAccess implements IStackAccess {
       return new Set();
     }
 
-    return this.stackRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...stackIds]),
-          ownerId: userId,
-        },
-      })
+    return this.db
+      .selectFrom('asset_stack as stacks')
+      .select('stacks.id')
+      .where('stacks.id', 'in', [...stackIds])
+      .where('stacks.ownerId', '=', userId)
+      .execute()
       .then((stacks) => new Set(stacks.map((stack) => stack.id)));
   }
 }
 
 class TimelineAccess implements ITimelineAccess {
-  constructor(private partnerRepository: Repository<PartnerEntity>) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -347,18 +326,18 @@ class TimelineAccess implements ITimelineAccess {
       return new Set();
     }
 
-    return this.partnerRepository
-      .createQueryBuilder('partner')
-      .select('partner.sharedById')
-      .where('partner.sharedById IN (:...partnerIds)', { partnerIds: [...partnerIds] })
-      .andWhere('partner.sharedWithId = :userId', { userId })
-      .getMany()
+    return this.db
+      .selectFrom('partners')
+      .select('partners.sharedById')
+      .where('partners.sharedById', 'in', [...partnerIds])
+      .where('partners.sharedWithId', '=', userId)
+      .execute()
       .then((partners) => new Set(partners.map((partner) => partner.sharedById)));
   }
 }
 
 class MemoryAccess implements IMemoryAccess {
-  constructor(private memoryRepository: Repository<MemoryEntity>) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -367,23 +346,19 @@ class MemoryAccess implements IMemoryAccess {
       return new Set();
     }
 
-    return this.memoryRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...memoryIds]),
-          ownerId: userId,
-        },
-      })
+    return this.db
+      .selectFrom('memories')
+      .select('memories.id')
+      .where('memories.id', 'in', [...memoryIds])
+      .where('memories.ownerId', '=', userId)
+      .where('memories.deletedAt', 'is', null)
+      .execute()
       .then((memories) => new Set(memories.map((memory) => memory.id)));
   }
 }
 
 class PersonAccess implements IPersonAccess {
-  constructor(
-    private assetFaceRepository: Repository<AssetFaceEntity>,
-    private personRepository: Repository<PersonEntity>,
-  ) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -392,14 +367,12 @@ class PersonAccess implements IPersonAccess {
       return new Set();
     }
 
-    return this.personRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...personIds]),
-          ownerId: userId,
-        },
-      })
+    return this.db
+      .selectFrom('person')
+      .select('person.id')
+      .where('person.id', 'in', [...personIds])
+      .where('person.ownerId', '=', userId)
+      .execute()
       .then((persons) => new Set(persons.map((person) => person.id)));
   }
 
@@ -410,22 +383,21 @@ class PersonAccess implements IPersonAccess {
       return new Set();
     }
 
-    return this.assetFaceRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...assetFaceIds]),
-          asset: {
-            ownerId: userId,
-          },
-        },
-      })
+    return this.db
+      .selectFrom('asset_faces')
+      .select('asset_faces.id')
+      .leftJoin('assets', (join) =>
+        join.onRef('assets.id', '=', 'asset_faces.assetId').on('assets.deletedAt', 'is', null),
+      )
+      .where('asset_faces.id', 'in', [...assetFaceIds])
+      .where('assets.ownerId', '=', userId)
+      .execute()
       .then((faces) => new Set(faces.map((face) => face.id)));
   }
 }
 
 class PartnerAccess implements IPartnerAccess {
-  constructor(private partnerRepository: Repository<PartnerEntity>) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -434,18 +406,18 @@ class PartnerAccess implements IPartnerAccess {
       return new Set();
     }
 
-    return this.partnerRepository
-      .createQueryBuilder('partner')
-      .select('partner.sharedById')
-      .where('partner.sharedById IN (:...partnerIds)', { partnerIds: [...partnerIds] })
-      .andWhere('partner.sharedWithId = :userId', { userId })
-      .getMany()
+    return this.db
+      .selectFrom('partners')
+      .select('partners.sharedById')
+      .where('partners.sharedById', 'in', [...partnerIds])
+      .where('partners.sharedWithId', '=', userId)
+      .execute()
       .then((partners) => new Set(partners.map((partner) => partner.sharedById)));
   }
 }
 
 class TagAccess implements ITagAccess {
-  constructor(private tagRepository: Repository<TagEntity>) {}
+  constructor(private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [DummyValue.UUID, DummyValue.UUID_SET] })
   @ChunkedSet({ paramIndex: 1 })
@@ -454,14 +426,12 @@ class TagAccess implements ITagAccess {
       return new Set();
     }
 
-    return this.tagRepository
-      .find({
-        select: { id: true },
-        where: {
-          id: In([...tagIds]),
-          userId,
-        },
-      })
+    return this.db
+      .selectFrom('tags')
+      .select('tags.id')
+      .where('tags.id', 'in', [...tagIds])
+      .where('tags.userId', '=', userId)
+      .execute()
       .then((tags) => new Set(tags.map((tag) => tag.id)));
   }
 }
@@ -478,29 +448,16 @@ export class AccessRepository implements IAccessRepository {
   tag: ITagAccess;
   timeline: ITimelineAccess;
 
-  constructor(
-    @InjectRepository(ActivityEntity) activityRepository: Repository<ActivityEntity>,
-    @InjectRepository(AssetEntity) assetRepository: Repository<AssetEntity>,
-    @InjectRepository(AlbumEntity) albumRepository: Repository<AlbumEntity>,
-    @InjectRepository(LibraryEntity) libraryRepository: Repository<LibraryEntity>,
-    @InjectRepository(MemoryEntity) memoryRepository: Repository<MemoryEntity>,
-    @InjectRepository(PartnerEntity) partnerRepository: Repository<PartnerEntity>,
-    @InjectRepository(PersonEntity) personRepository: Repository<PersonEntity>,
-    @InjectRepository(AssetFaceEntity) assetFaceRepository: Repository<AssetFaceEntity>,
-    @InjectRepository(SharedLinkEntity) sharedLinkRepository: Repository<SharedLinkEntity>,
-    @InjectRepository(SessionEntity) sessionRepository: Repository<SessionEntity>,
-    @InjectRepository(StackEntity) stackRepository: Repository<StackEntity>,
-    @InjectRepository(TagEntity) tagRepository: Repository<TagEntity>,
-  ) {
-    this.activity = new ActivityAccess(activityRepository, albumRepository);
-    this.album = new AlbumAccess(albumRepository, sharedLinkRepository);
-    this.asset = new AssetAccess(albumRepository, assetRepository, partnerRepository, sharedLinkRepository);
-    this.authDevice = new AuthDeviceAccess(sessionRepository);
-    this.memory = new MemoryAccess(memoryRepository);
-    this.person = new PersonAccess(assetFaceRepository, personRepository);
-    this.partner = new PartnerAccess(partnerRepository);
-    this.stack = new StackAccess(stackRepository);
-    this.tag = new TagAccess(tagRepository);
-    this.timeline = new TimelineAccess(partnerRepository);
+  constructor(@InjectKysely() db: Kysely<DB>) {
+    this.activity = new ActivityAccess(db);
+    this.album = new AlbumAccess(db);
+    this.asset = new AssetAccess(db);
+    this.authDevice = new AuthDeviceAccess(db);
+    this.memory = new MemoryAccess(db);
+    this.person = new PersonAccess(db);
+    this.partner = new PartnerAccess(db);
+    this.stack = new StackAccess(db);
+    this.tag = new TagAccess(db);
+    this.timeline = new TimelineAccess(db);
   }
 }

server/src/repositories/activity.repository.ts

@@ -2,10 +2,9 @@ import { Injectable } from '@nestjs/common';
 import { ExpressionBuilder, Insertable, Kysely } from 'kysely';
 import { jsonObjectFrom } from 'kysely/helpers/postgres';
 import { InjectKysely } from 'nestjs-kysely';
+import { columns } from 'src/database';
 import { Activity, DB } from 'src/db';
 import { DummyValue, GenerateSql } from 'src/decorators';
-import { ActivityEntity } from 'src/entities/activity.entity';
-import { IActivityRepository } from 'src/interfaces/activity.interface';
 import { asUuid } from 'src/utils/database';
 
 export interface ActivitySearch {
@@ -19,18 +18,18 @@ const withUser = (eb: ExpressionBuilder<DB, 'activity'>) => {
   return jsonObjectFrom(
     eb
       .selectFrom('users')
-      .selectAll()
+      .select(columns.userDto)
       .whereRef('users.id', '=', 'activity.userId')
       .where('users.deletedAt', 'is', null),
   ).as('user');
 };
 
 @Injectable()
-export class ActivityRepository implements IActivityRepository {
+export class ActivityRepository {
   constructor(@InjectKysely() private db: Kysely<DB>) {}
 
   @GenerateSql({ params: [{ albumId: DummyValue.UUID }] })
-  search(options: ActivitySearch): Promise<ActivityEntity[]> {
+  search(options: ActivitySearch) {
     const { userId, assetId, albumId, isLiked } = options;
 
     return this.db
@@ -44,14 +43,14 @@ export class ActivityRepository implements IActivityRepository {
       .$if(!!albumId, (qb) => qb.where('activity.albumId', '=', albumId!))
       .$if(isLiked !== undefined, (qb) => qb.where('activity.isLiked', '=', isLiked!))
       .orderBy('activity.createdAt', 'asc')
-      .execute() as unknown as Promise<ActivityEntity[]>;
+      .execute();
   }
 
   async create(activity: Insertable<Activity>) {
     return this.save(activity);
   }
 
-  async delete(id: string): Promise<void> {
+  async delete(id: string) {
     await this.db.deleteFrom('activity').where('id', '=', asUuid(id)).execute();
   }
 
@@ -79,6 +78,6 @@ export class ActivityRepository implements IActivityRepository {
       .selectAll('activity')
       .select(withUser)
       .where('activity.id', '=', asUuid(id))
-      .executeTakeFirstOrThrow() as unknown as Promise<ActivityEntity>;
+      .executeTakeFirstOrThrow();
   }
 }

server/src/repositories/index.ts

@@ -1,5 +1,4 @@
 import { IAccessRepository } from 'src/interfaces/access.interface';
-import { IActivityRepository } from 'src/interfaces/activity.interface';
 import { IAlbumUserRepository } from 'src/interfaces/album-user.interface';
 import { IAlbumRepository } from 'src/interfaces/album.interface';
 import { IKeyRepository } from 'src/interfaces/api-key.interface';
@@ -78,8 +77,12 @@ import { VersionHistoryRepository } from 'src/repositories/version-history.repos
 import { ViewRepository } from 'src/repositories/view-repository';
 
 export const repositories = [
+  //
+  ActivityRepository,
+];
+
+export const providers = [
   { provide: IAccessRepository, useClass: AccessRepository },
-  { provide: IActivityRepository, useClass: ActivityRepository },
   { provide: IAlbumRepository, useClass: AlbumRepository },
   { provide: IAlbumUserRepository, useClass: AlbumUserRepository },
   { provide: IAssetRepository, useClass: AssetRepository },

server/src/services/activity.service.spec.ts

@@ -1,7 +1,7 @@
 import { BadRequestException } from '@nestjs/common';
 import { ReactionType } from 'src/dtos/activity.dto';
-import { IActivityRepository } from 'src/interfaces/activity.interface';
 import { ActivityService } from 'src/services/activity.service';
+import { IActivityRepository } from 'src/types';
 import { activityStub } from 'test/fixtures/activity.stub';
 import { authStub } from 'test/fixtures/auth.stub';
 import { IAccessRepositoryMock } from 'test/repositories/access.repository.mock';

server/src/services/activity.service.ts

@@ -5,15 +5,15 @@ import {
   ActivityResponseDto,
   ActivitySearchDto,
   ActivityStatisticsResponseDto,
+  mapActivity,
   MaybeDuplicate,
   ReactionLevel,
   ReactionType,
-  mapActivity,
 } from 'src/dtos/activity.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
-import { ActivityEntity } from 'src/entities/activity.entity';
 import { Permission } from 'src/enum';
 import { BaseService } from 'src/services/base.service';
+import { ActivityItem } from 'src/types';
 
 @Injectable()
 export class ActivityService extends BaseService {
@@ -43,7 +43,7 @@ export class ActivityService extends BaseService {
       albumId: dto.albumId,
     };
 
-    let activity: ActivityEntity | null = null;
+    let activity: ActivityItem | undefined;
     let duplicate = false;
 
     if (dto.type === ReactionType.LIKE) {

server/src/services/base.service.ts

@@ -7,7 +7,6 @@ import { StorageCore } from 'src/cores/storage.core';
 import { Users } from 'src/db';
 import { UserEntity } from 'src/entities/user.entity';
 import { IAccessRepository } from 'src/interfaces/access.interface';
-import { IActivityRepository } from 'src/interfaces/activity.interface';
 import { IAlbumUserRepository } from 'src/interfaces/album-user.interface';
 import { IAlbumRepository } from 'src/interfaces/album.interface';
 import { IKeyRepository } from 'src/interfaces/api-key.interface';
@@ -45,6 +44,7 @@ import { ITrashRepository } from 'src/interfaces/trash.interface';
 import { IUserRepository } from 'src/interfaces/user.interface';
 import { IVersionHistoryRepository } from 'src/interfaces/version-history.interface';
 import { IViewRepository } from 'src/interfaces/view.interface';
+import { ActivityRepository } from 'src/repositories/activity.repository';
 import { AccessRequest, checkAccess, requireAccess } from 'src/utils/access';
 import { getConfig, updateConfig } from 'src/utils/config';
 
@@ -54,7 +54,7 @@ export class BaseService {
   constructor(
     @Inject(ILoggerRepository) protected logger: ILoggerRepository,
     @Inject(IAccessRepository) protected accessRepository: IAccessRepository,
-    @Inject(IActivityRepository) protected activityRepository: IActivityRepository,
+    protected activityRepository: ActivityRepository,
     @Inject(IAuditRepository) protected auditRepository: IAuditRepository,
     @Inject(IAlbumRepository) protected albumRepository: IAlbumRepository,
     @Inject(IAlbumUserRepository) protected albumUserRepository: IAlbumUserRepository,

server/src/types.ts

@@ -1,5 +1,6 @@
 import { UserEntity } from 'src/entities/user.entity';
 import { Permission } from 'src/enum';
+import { ActivityRepository } from 'src/repositories/activity.repository';
 
 export type AuthApiKey = {
   id: string;
@@ -7,3 +8,11 @@ export type AuthApiKey = {
   user: UserEntity;
   permissions: Permission[];
 };
+
+export type RepositoryInterface<T extends object> = Pick<T, keyof T>;
+
+export type IActivityRepository = RepositoryInterface<ActivityRepository>;
+
+export type ActivityItem =
+  | Awaited<ReturnType<IActivityRepository['create']>>
+  | Awaited<ReturnType<IActivityRepository['search']>>[0];

server/test/fixtures/activity.stub.ts

@@ -1,33 +1,39 @@
-import { ActivityEntity } from 'src/entities/activity.entity';
+import { ActivityItem } from 'src/types';
 import { albumStub } from 'test/fixtures/album.stub';
 import { assetStub } from 'test/fixtures/asset.stub';
-import { authStub } from 'test/fixtures/auth.stub';
-import { userStub } from 'test/fixtures/user.stub';
 
 export const activityStub = {
-  oneComment: Object.freeze<ActivityEntity>({
+  oneComment: Object.freeze<ActivityItem>({
     id: 'activity-1',
     comment: 'comment',
     isLiked: false,
-    userId: authStub.admin.user.id,
-    user: userStub.admin,
+    userId: 'admin_id',
+    user: {
+      id: 'admin_id',
+      name: 'admin',
+      email: 'admin@test.com',
+      profileImagePath: '',
+      profileChangedAt: new Date('2021-01-01'),
+    },
     assetId: assetStub.image.id,
-    asset: assetStub.image,
     albumId: albumStub.oneAsset.id,
-    album: albumStub.oneAsset,
     createdAt: new Date(),
     updatedAt: new Date(),
   }),
-  liked: Object.freeze<ActivityEntity>({
+  liked: Object.freeze<ActivityItem>({
     id: 'activity-2',
     comment: null,
     isLiked: true,
-    userId: authStub.admin.user.id,
-    user: userStub.admin,
+    userId: 'admin_id',
+    user: {
+      id: 'admin_id',
+      name: 'admin',
+      email: 'admin@test.com',
+      profileImagePath: '',
+      profileChangedAt: new Date('2021-01-01'),
+    },
     assetId: assetStub.image.id,
-    asset: assetStub.image,
     albumId: albumStub.oneAsset.id,
-    album: albumStub.oneAsset,
     createdAt: new Date(),
     updatedAt: new Date(),
   }),

server/test/repositories/activity.repository.mock.ts

@@ -1,4 +1,4 @@
-import { IActivityRepository } from 'src/interfaces/activity.interface';
+import { IActivityRepository } from 'src/types';
 import { Mocked, vitest } from 'vitest';
 
 export const newActivityRepositoryMock = (): Mocked<IActivityRepository> => {

server/test/utils.ts

@@ -3,7 +3,9 @@ import { Writable } from 'node:stream';
 import { PNG } from 'pngjs';
 import { ImmichWorker } from 'src/enum';
 import { IMetadataRepository } from 'src/interfaces/metadata.interface';
+import { ActivityRepository } from 'src/repositories/activity.repository';
 import { BaseService } from 'src/services/base.service';
+import { IActivityRepository } from 'src/types';
 import { newAccessRepositoryMock } from 'test/repositories/access.repository.mock';
 import { newActivityRepositoryMock } from 'test/repositories/activity.repository.mock';
 import { newAlbumUserRepositoryMock } from 'test/repositories/album-user.repository.mock';
@@ -104,7 +106,7 @@ export const newTestService = <T extends BaseService>(
   const sut = new Service(
     loggerMock,
     accessMock,
-    activityMock,
+    activityMock as IActivityRepository as ActivityRepository,
     auditMock,
     albumMock,
     albumUserMock,

web/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.11.0",
+        "@immich/ui": "^0.12.0",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1305,9 +1305,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.11.0.tgz",
-      "integrity": "sha512-zRQFHCVt6BstNkGuVt27rLUAurOpZ0djfaZYDeqHuc8H97XXXk+hsbXzvADlVa9xAPHetUM3JuusPseJ+Hr23g==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.12.0.tgz",
+      "integrity": "sha512-vDv0P2UXJYEjV0TJFGZv/ZULOKYDR5yUNJIinNwePJ/CuOv1CpopnNcbt0LOsosYc0aodoEGmUhqEJP7oZP+Lw==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

web/package.json

@@ -67,7 +67,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.11.0",
+    "@immich/ui": "^0.12.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/app.css

@@ -26,7 +26,7 @@
   :root {
     /* light */
     --immich-ui-primary: 66 80 175;
-    --immich-ui-dark: 0 0 0;
+    --immich-ui-dark: 58 58 58;
     --immich-ui-light: 255 255 255;
     --immich-ui-success: 34 197 94;
     --immich-ui-danger: 180 0 0;

web/src/lib/components/album-page/albums-controls.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
+  import GroupTab from '$lib/components/elements/group-tab.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import {
     AlbumFilter,
-    AlbumSortBy,
     AlbumGroupBy,
+    AlbumSortBy,
     AlbumViewMode,
     albumViewSettings,
     SortOrder,
   } from '$lib/stores/preferences.store';
+  import {
+    type AlbumGroupOptionMetadata,
+    type AlbumSortOptionMetadata,
+    collapseAllAlbumGroups,
+    createAlbumAndRedirect,
+    expandAllAlbumGroups,
+    findFilterOption,
+    findGroupOptionMetadata,
+    findSortOptionMetadata,
+    getSelectedAlbumGroupOption,
+    groupOptionsMetadata,
+    sortOptionsMetadata,
+  } from '$lib/utils/album-utils';
+  import { Button, IconButton, Text } from '@immich/ui';
   import {
     mdiArrowDownThin,
     mdiArrowUpThin,
@@ -22,21 +37,8 @@
     mdiUnfoldMoreHorizontal,
     mdiViewGridOutline,
   } from '@mdi/js';
-  import {
-    type AlbumGroupOptionMetadata,
-    type AlbumSortOptionMetadata,
-    findGroupOptionMetadata,
-    findFilterOption,
-    findSortOptionMetadata,
-    getSelectedAlbumGroupOption,
-    groupOptionsMetadata,
-    sortOptionsMetadata,
-  } from '$lib/utils/album-utils';
-  import SearchBar from '$lib/components/elements/search-bar.svelte';
-  import GroupTab from '$lib/components/elements/group-tab.svelte';
-  import { createAlbumAndRedirect, collapseAllAlbumGroups, expandAllAlbumGroups } from '$lib/utils/album-utils';
-  import { fly } from 'svelte/transition';
   import { t } from 'svelte-i18n';
+  import { fly } from 'svelte/transition';
 
   interface Props {
     albumGroups: string[];
@@ -127,12 +129,10 @@
 </div>
 
 <!-- Create Album -->
-<LinkButton onclick={() => createAlbumAndRedirect()}>
-  <div class="flex place-items-center gap-2 text-sm">
-    <Icon path={mdiPlusBoxOutline} size="18" />
-    <p class="hidden md:block">{$t('create_album')}</p>
-  </div>
-</LinkButton>
+<Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
+  <Icon path={mdiPlusBoxOutline} />
+  <p class="hidden md:block">{$t('create_album')}</p>
+</Button>
 
 <!-- Sort Albums -->
 <Dropdown
@@ -164,34 +164,38 @@
     <!-- Expand Album Groups -->
     <div class="hidden xl:flex gap-0">
       <div class="block">
-        <LinkButton title={$t('expand_all')} onclick={() => expandAllAlbumGroups()}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiUnfoldMoreHorizontal} size="18" />
-          </div>
-        </LinkButton>
+        <IconButton
+          title={$t('expand_all')}
+          onclick={() => expandAllAlbumGroups()}
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          icon={mdiUnfoldMoreHorizontal}
+        />
       </div>
 
       <!-- Collapse Album Groups -->
       <div class="block">
-        <LinkButton title={$t('collapse_all')} onclick={() => collapseAllAlbumGroups(albumGroups)}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiUnfoldLessHorizontal} size="18" />
-          </div>
-        </LinkButton>
+        <IconButton
+          title={$t('collapse_all')}
+          onclick={() => collapseAllAlbumGroups(albumGroups)}
+          variant="ghost"
+          color="secondary"
+          shape="round"
+          icon={mdiUnfoldLessHorizontal}
+        />
       </div>
     </div>
   </span>
 {/if}
 
 <!-- Cover/List Display Toggle -->
-<LinkButton onclick={() => handleChangeListMode()}>
-  <div class="flex place-items-center gap-2 text-sm">
-    {#if $albumViewSettings.view === AlbumViewMode.List}
-      <Icon path={mdiViewGridOutline} size="18" />
-      <p class="hidden md:block">{$t('covers')}</p>
-    {:else}
-      <Icon path={mdiFormatListBulletedSquare} size="18" />
-      <p class="hidden md:block">{$t('list')}</p>
-    {/if}
-  </div>
-</LinkButton>
+<Button onclick={() => handleChangeListMode()} size="small" variant="ghost" color="secondary">
+  {#if $albumViewSettings.view === AlbumViewMode.List}
+    <Icon path={mdiViewGridOutline} />
+    <Text class="hidden md:block">{$t('covers')}</Text>
+  {:else}
+    <Icon path={mdiFormatListBulletedSquare} size="18" />
+    <Text class="hidden md:block">{$t('list')}</Text>
+  {/if}
+</Button>

web/src/lib/components/elements/buttons/link-button.svelte

@@ -1,25 +0,0 @@
-<script lang="ts" module>
-  export type Color = 'transparent-primary' | 'transparent-gray';
-</script>
-
-<script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    href?: string;
-    color?: Color;
-    children?: Snippet;
-    onclick?: (e: MouseEvent) => void;
-    title?: string;
-    disabled?: boolean;
-    fullwidth?: boolean;
-    class?: string;
-  }
-
-  let { color = 'transparent-gray', children, ...rest }: Props = $props();
-</script>
-
-<Button size="link" {color} shadow={false} rounded="lg" {...rest}>
-  {@render children?.()}
-</Button>

web/src/lib/components/elements/dropdown.svelte

@@ -11,14 +11,12 @@
 </script>
 
 <script lang="ts" generics="T">
-  import Icon from './icon.svelte';
-
-  import { mdiCheck } from '@mdi/js';
-
-  import { isEqual } from 'lodash-es';
-  import LinkButton from './buttons/link-button.svelte';
   import { clickOutside } from '$lib/actions/click-outside';
+  import { Button, Text } from '@immich/ui';
+  import { mdiCheck } from '@mdi/js';
+  import { isEqual } from 'lodash-es';
   import { fly } from 'svelte/transition';
+  import Icon from './icon.svelte';
 
   interface Props {
     class?: string;
@@ -82,14 +80,12 @@
 
 <div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}>
   <!-- BUTTON TITLE -->
-  <LinkButton onclick={() => (showMenu = true)} fullwidth {title}>
-    <div class="flex place-items-center gap-2 text-sm">
-      {#if renderedSelectedOption?.icon}
-        <Icon path={renderedSelectedOption.icon} size="18" />
-      {/if}
-      <p class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</p>
-    </div>
-  </LinkButton>
+  <Button onclick={() => (showMenu = true)} fullWidth {title} variant="ghost" color="secondary" size="small">
+    {#if renderedSelectedOption?.icon}
+      <Icon path={renderedSelectedOption.icon} />
+    {/if}
+    <Text class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</Text>
+  </Button>
 
   <!-- DROP DOWN MENU -->
   {#if showMenu}
@@ -108,7 +104,7 @@
         >
           {#if isEqual(selectedOption, option)}
             <div class="text-immich-primary dark:text-immich-dark-primary">
-              <Icon path={mdiCheck} size="18" />
+              <Icon path={mdiCheck} />
             </div>
             <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
               {renderedOption.title}

web/src/lib/components/map-page/map-settings-modal.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import type { MapSettings } from '$lib/stores/preferences.store';
+  import { Button, Field, Stack, Switch } from '@immich/ui';
   import { Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
-  import LinkButton from '../elements/buttons/link-button.svelte';
   import DateInput from '../elements/date-input.svelte';
 
   interface Props {
@@ -16,7 +14,8 @@
     onSave: (settings: MapSettings) => void;
   }
 
-  let { settings = $bindable(), onClose, onSave }: Props = $props();
+  let { settings: initialValues, onClose, onSave }: Props = $props();
+  let settings = $state(initialValues);
 
   let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore);
 
@@ -26,90 +25,109 @@
   };
 </script>
 
-<FullScreenModal title={$t('map_settings')} {onClose}>
-  <form {onsubmit} class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary" id="map-settings-form">
-    <SettingSwitch title={$t('allow_dark_mode')} bind:checked={settings.allowDarkMode} />
-    <SettingSwitch title={$t('only_favorites')} bind:checked={settings.onlyFavorites} />
-    <SettingSwitch title={$t('include_archived')} bind:checked={settings.includeArchived} />
-    <SettingSwitch title={$t('include_shared_partner_assets')} bind:checked={settings.withPartners} />
-    <SettingSwitch title={$t('include_shared_albums')} bind:checked={settings.withSharedAlbums} />
-    {#if customDateRange}
-      <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
-        <div class="flex items-center justify-between gap-8">
-          <label class="immich-form-label shrink-0 text-sm" for="date-after">{$t('date_after')}</label>
-          <DateInput
-            class="immich-form-input w-40"
-            type="date"
-            id="date-after"
-            max={settings.dateBefore}
-            bind:value={settings.dateAfter}
-          />
-        </div>
-        <div class="flex items-center justify-between gap-8">
-          <label class="immich-form-label shrink-0 text-sm" for="date-before">{$t('date_before')}</label>
-          <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
-        </div>
-        <div class="flex justify-center text-xs">
-          <LinkButton
-            onclick={() => {
-              customDateRange = false;
-              settings.dateAfter = '';
-              settings.dateBefore = '';
-            }}
-          >
-            {$t('remove_custom_date_range')}
-          </LinkButton>
-        </div>
-      </div>
-    {:else}
-      <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
-        <SettingSelect
-          label={$t('date_range')}
-          name="date-range"
-          bind:value={settings.relativeDate}
-          options={[
-            {
-              value: '',
-              text: $t('all'),
-            },
-            {
-              value: Duration.fromObject({ hours: 24 }).toISO() || '',
-              text: $t('past_durations.hours', { values: { hours: 24 } }),
-            },
-            {
-              value: Duration.fromObject({ days: 7 }).toISO() || '',
-              text: $t('past_durations.days', { values: { days: 7 } }),
-            },
-            {
-              value: Duration.fromObject({ days: 30 }).toISO() || '',
-              text: $t('past_durations.days', { values: { days: 30 } }),
-            },
-            {
-              value: Duration.fromObject({ years: 1 }).toISO() || '',
-              text: $t('past_durations.years', { values: { years: 1 } }),
-            },
-            {
-              value: Duration.fromObject({ years: 3 }).toISO() || '',
-              text: $t('past_durations.years', { values: { years: 3 } }),
-            },
-          ]}
-        />
-        <div class="text-xs">
-          <LinkButton
-            onclick={() => {
-              customDateRange = true;
-              settings.relativeDate = '';
-            }}
-          >
-            {$t('use_custom_date_range')}
-          </LinkButton>
-        </div>
-      </div>
-    {/if}
-  </form>
+<form {onsubmit}>
+  <FullScreenModal title={$t('map_settings')} {onClose}>
+    <Stack gap={4}>
+      <Field label={$t('allow_dark_mode')}>
+        <Switch bind:checked={settings.allowDarkMode} class="flex justify-between items-center text-sm" />
+      </Field>
+      <Field label={$t('only_favorites')}>
+        <Switch bind:checked={settings.onlyFavorites} class="flex justify-between items-center text-sm" />
+      </Field>
+      <Field label={$t('include_archived')}>
+        <Switch bind:checked={settings.includeArchived} class="flex justify-between items-center text-sm" />
+      </Field>
+      <Field label={$t('include_shared_partner_assets')}>
+        <Switch bind:checked={settings.withPartners} class="flex justify-between items-center text-sm" />
+      </Field>
+      <Field label={$t('include_shared_albums')}>
+        <Switch bind:checked={settings.withSharedAlbums} class="flex justify-between items-center text-sm" />
+      </Field>
 
-  {#snippet stickyBottom()}
-    <Button color="gray" size="sm" fullwidth onclick={onClose}>{$t('cancel')}</Button>
-    <Button type="submit" size="sm" fullwidth form="map-settings-form">{$t('save')}</Button>
-  {/snippet}
-</FullScreenModal>
+      {#if customDateRange}
+        <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
+          <div class="flex items-center justify-between gap-8">
+            <label class="immich-form-label shrink-0 text-sm" for="date-after">{$t('date_after')}</label>
+            <DateInput
+              class="immich-form-input w-40"
+              type="date"
+              id="date-after"
+              max={settings.dateBefore}
+              bind:value={settings.dateAfter}
+            />
+          </div>
+          <div class="flex items-center justify-between gap-8">
+            <label class="immich-form-label shrink-0 text-sm" for="date-before">{$t('date_before')}</label>
+            <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
+          </div>
+          <div class="flex justify-center text-xs">
+            <Button
+              color="primary"
+              size="small"
+              variant="ghost"
+              onclick={() => {
+                customDateRange = false;
+                settings.dateAfter = '';
+                settings.dateBefore = '';
+              }}
+            >
+              {$t('remove_custom_date_range')}
+            </Button>
+          </div>
+        </div>
+      {:else}
+        <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
+          <SettingSelect
+            label={$t('date_range')}
+            name="date-range"
+            bind:value={settings.relativeDate}
+            options={[
+              {
+                value: '',
+                text: $t('all'),
+              },
+              {
+                value: Duration.fromObject({ hours: 24 }).toISO() || '',
+                text: $t('past_durations.hours', { values: { hours: 24 } }),
+              },
+              {
+                value: Duration.fromObject({ days: 7 }).toISO() || '',
+                text: $t('past_durations.days', { values: { days: 7 } }),
+              },
+              {
+                value: Duration.fromObject({ days: 30 }).toISO() || '',
+                text: $t('past_durations.days', { values: { days: 30 } }),
+              },
+              {
+                value: Duration.fromObject({ years: 1 }).toISO() || '',
+                text: $t('past_durations.years', { values: { years: 1 } }),
+              },
+              {
+                value: Duration.fromObject({ years: 3 }).toISO() || '',
+                text: $t('past_durations.years', { values: { years: 3 } }),
+              },
+            ]}
+          />
+          <div class="text-xs">
+            <Button
+              color="primary"
+              size="small"
+              variant="ghost"
+              onclick={() => {
+                customDateRange = true;
+                settings.relativeDate = '';
+              }}
+            >
+              {$t('use_custom_date_range')}
+            </Button>
+          </div>
+        </div>
+      {/if}
+    </Stack>
+
+    {#snippet stickyBottom()}
+      <Button color="secondary" shape="round" fullWidth onclick={onClose}>{$t('cancel')}</Button>
+      <Button type="submit" shape="round" fullWidth>{$t('save')}</Button>
+    {/snippet}
+  </FullScreenModal>
+</form>

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import { locale } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
+  import { HStack, IconButton, Input } from '@immich/ui';
   import { mdiContentCopy, mdiLink } from '@mdi/js';
+  import { DateTime, Duration } from 'luxon';
+  import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../notification/notification';
   import SettingInputField from '../settings/setting-input-field.svelte';
   import SettingSwitch from '../settings/setting-switch.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { t } from 'svelte-i18n';
-  import { locale } from '$lib/stores/preferences.store';
-  import { DateTime, Duration } from 'luxon';
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
 
   interface Props {
     onClose: () => void;
@@ -243,14 +242,18 @@
         <Button size="sm" fullwidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
       {/if}
     {:else}
-      <div class="flex w-full gap-2">
-        <input class="immich-form-input w-full" bind:value={sharedLink} disabled />
-        <LinkButton onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiContentCopy} ariaLabel={$t('copy_link_to_clipboard')} size="18" />
-          </div>
-        </LinkButton>
-      </div>
+      <HStack class="w-full">
+        <Input bind:value={sharedLink} disabled class="flex flex-row" />
+        <IconButton
+          variant="ghost"
+          shape="round"
+          color="secondary"
+          size="giant"
+          icon={mdiContentCopy}
+          onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
+          aria-label={$t('copy_link_to_clipboard')}
+        />
+      </HStack>
     {/if}
   {/snippet}
 </FullScreenModal>

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

@@ -2,25 +2,25 @@
   import { page } from '$app/state';
   import { clickOutside } from '$lib/actions/click-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+  import { AppRoute } from '$lib/constants';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { handleLogout } from '$lib/utils/auth';
   import { getAboutInfo, logout, type ServerAboutResponseDto } from '@immich/sdk';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { AppRoute } from '$lib/constants';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
-  import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
-  import { onMount } from 'svelte';
 
   interface Props {
     showUploadButton?: boolean;
@@ -87,22 +87,24 @@
             onEscape: () => (shouldShowHelpPanel = false),
           }}
         >
-          <CircleIconButton
-            id="support-feedback-button"
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            size="large"
             title={$t('support_and_feedback')}
             icon={mdiHelpCircleOutline}
             onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
-            padding="1"
           />
         </div>
 
         {#if !page.url.pathname.includes('/admin') && showUploadButton}
-          <LinkButton onclick={onUploadClick} class="hidden lg:block">
+          <Button onclick={onUploadClick} class="hidden lg:block" variant="ghost" color="secondary">
             <div class="flex gap-2">
               <Icon path={mdiTrayArrowUp} size="1.5em" />
               <span>{$t('upload')}</span>
             </div>
-          </LinkButton>
+          </Button>
           <CircleIconButton
             onclick={onUploadClick}
             title={$t('upload')}

web/src/lib/stores/preferences.store.ts

@@ -62,7 +62,7 @@ export interface MapSettings {
   dateBefore: string;
 }
 
-export const mapSettings = persisted<MapSettings>('map-settings', {
+const defaultMapSettings = {
   allowDarkMode: true,
   includeArchived: false,
   onlyFavorites: false,
@@ -71,7 +71,17 @@ export const mapSettings = persisted<MapSettings>('map-settings', {
   relativeDate: '',
   dateAfter: '',
   dateBefore: '',
-});
+};
+
+const persistedObject = <T>(key: string, defaults: T) =>
+  persisted<T>(key, defaults, {
+    serializer: {
+      parse: (text) => ({ ...defaultMapSettings, ...JSON.parse(text ?? null) }),
+      stringify: JSON.stringify,
+    },
+  });
+
+export const mapSettings = persistedObject<MapSettings>('map-settings', defaultMapSettings);
 
 export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {});
 export const videoViewerMuted = persisted<boolean>('video-viewer-muted', false, {});

web/src/routes/(user)/people/+page.svelte

@@ -3,8 +3,6 @@
   import { page } from '$app/stores';
   import { focusTrap } from '$lib/actions/focus-trap';
   import { scrollMemory } from '$lib/actions/scroll-memory';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte';
   import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
@@ -32,6 +30,7 @@
     updatePerson,
     type PersonResponseDto,
   } from '@immich/sdk';
+  import { Button, Text } from '@immich/ui';
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -393,12 +392,10 @@
             />
           </div>
         </div>
-        <LinkButton onclick={() => (selectHidden = !selectHidden)}>
-          <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
-            <Icon path={mdiEyeOutline} size="18" />
-            <p class="ml-2">{$t('show_and_hide_people')}</p>
-          </div>
-        </LinkButton>
+        <Button onclick={() => (selectHidden = !selectHidden)} size="small" variant="ghost" color="secondary">
+          <Icon path={mdiEyeOutline} />
+          <Text>{$t('show_and_hide_people')}</Text>
+        </Button>
       </div>
     {/if}
   {/snippet}
@@ -445,13 +442,13 @@
 
       {#snippet stickyBottom()}
         <Button
-          color="gray"
-          fullwidth
+          color="secondary"
+          fullWidth
           onclick={() => {
             showChangeNameModal = false;
           }}>{$t('cancel')}</Button
         >
-        <Button type="submit" fullwidth form="change-name-form">{$t('ok')}</Button>
+        <Button type="submit" fullWidth form="change-name-form">{$t('ok')}</Button>
       {/snippet}
     </FullScreenModal>
   {/if}

web/src/routes/(user)/sharing/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import empty2Url from '$lib/assets/empty-2.svg';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Albums from '$lib/components/album-page/albums-list.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute } from '$lib/constants';
-  import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
-  import type { PageData } from './$types';
-  import { createAlbumAndRedirect } from '$lib/utils/album-utils';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -17,8 +14,11 @@
     SortOrder,
     type AlbumViewSettings,
   } from '$lib/stores/preferences.store';
-  import Albums from '$lib/components/album-page/albums-list.svelte';
+  import { createAlbumAndRedirect } from '$lib/utils/album-utils';
+  import { Button, HStack } from '@immich/ui';
+  import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -39,21 +39,17 @@
 
 <UserPageLayout title={data.meta.title}>
   {#snippet buttons()}
-    <div class="flex">
-      <LinkButton onclick={() => createAlbumAndRedirect()}>
-        <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
-          <Icon path={mdiPlusBoxOutline} size="18" class="shrink-0" />
-          <span class="leading-none max-sm:text-xs">{$t('create_album')}</span>
-        </div>
-      </LinkButton>
+    <HStack gap={0}>
+      <Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiPlusBoxOutline} class="shrink-0" />
+        <span class="leading-none max-sm:text-xs">{$t('create_album')}</span>
+      </Button>
 
-      <LinkButton href={AppRoute.SHARED_LINKS}>
-        <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
-          <Icon path={mdiLink} size="18" class="shrink-0" />
-          <span class="leading-none max-sm:text-xs">{$t('shared_links')}</span>
-        </div>
-      </LinkButton>
-    </div>
+      <Button href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiLink} class="shrink-0" />
+        <span class="leading-none max-sm:text-xs">{$t('shared_links')}</span>
+      </Button>
+    </HStack>
   {/snippet}
 
   <div class="flex flex-col">

web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import {
     notificationController,
@@ -13,19 +13,18 @@
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
+  import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetStore } from '$lib/stores/assets.store';
   import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
   import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
-  import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 
   interface Props {
     data: PageData;
@@ -169,29 +168,23 @@
   {/snippet}
 
   {#snippet buttons()}
-    <section>
-      <LinkButton onclick={handleCreate}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiPlus} size="18" />
-          <p class="hidden md:block">{$t('create_tag')}</p>
-        </div>
-      </LinkButton>
+    <HStack>
+      <Button onclick={handleCreate} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiPlus} />
+        <p class="hidden md:block">{$t('create_tag')}</p>
+      </Button>
 
       {#if pathSegments.length > 0 && tag}
-        <LinkButton onclick={handleEdit}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiPencil} size="18" />
-            <p class="hidden md:block">{$t('edit_tag')}</p>
-          </div>
-        </LinkButton>
-        <LinkButton onclick={handleDelete}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiTrashCanOutline} size="18" />
-            <p class="hidden md:block">{$t('delete_tag')}</p>
-          </div>
-        </LinkButton>
+        <Button onclick={handleEdit} size="small" variant="ghost" color="secondary">
+          <Icon path={mdiPencil} size="18" />
+          <Text class="hidden md:block">{$t('edit_tag')}</Text>
+        </Button>
+        <Button onclick={handleDelete} size="small" variant="ghost" color="secondary">
+          <Icon path={mdiTrashCanOutline} />
+          <Text class="hidden md:block">{$t('delete_tag')}</Text>
+        </Button>
       {/if}
-    </section>
+    </HStack>
   {/snippet}
 
   <Breadcrumbs {pathSegments} icon={mdiTagMultiple} title={$t('tags')} {getLink} />
@@ -230,8 +223,8 @@
     </form>
 
     {#snippet stickyBottom()}
-      <Button color="gray" fullwidth onclick={() => handleCancel()}>{$t('cancel')}</Button>
-      <Button type="submit" fullwidth form="create-tag-form">{$t('create')}</Button>
+      <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
+      <Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
     {/snippet}
   </FullScreenModal>
 {/if}
@@ -249,8 +242,8 @@
     </form>
 
     {#snippet stickyBottom()}
-      <Button color="gray" fullwidth onclick={() => handleCancel()}>{$t('cancel')}</Button>
-      <Button type="submit" fullwidth form="edit-tag-form">{$t('save')}</Button>
+      <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
+      <Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
     {/snippet}
   </FullScreenModal>
 {/if}

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import empty3Url from '$lib/assets/empty-3.svg';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
@@ -9,23 +8,24 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetStore } from '$lib/stores/assets.store';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { emptyTrash, restoreTrash } from '@immich/sdk';
+  import { Button, HStack } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
-  import type { PageData } from './$types';
-  import { handlePromiseError } from '$lib/utils';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import { t } from 'svelte-i18n';
   import { onDestroy } from 'svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -113,20 +113,28 @@
 {#if $featureFlags.loaded && $featureFlags.trash}
   <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
     {#snippet buttons()}
-      <div class="flex place-items-center gap-2">
-        <LinkButton onclick={handleRestoreTrash} disabled={assetInteraction.selectionActive}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiHistory} size="18" />
-            {$t('restore_all')}
-          </div>
-        </LinkButton>
-        <LinkButton onclick={() => handleEmptyTrash()} disabled={assetInteraction.selectionActive}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiDeleteForeverOutline} size="18" />
-            {$t('empty_trash')}
-          </div>
-        </LinkButton>
-      </div>
+      <HStack gap={0}>
+        <Button
+          onclick={handleRestoreTrash}
+          disabled={assetInteraction.selectionActive}
+          variant="ghost"
+          color="secondary"
+          size="small"
+        >
+          <Icon path={mdiHistory} />
+          {$t('restore_all')}
+        </Button>
+        <Button
+          onclick={() => handleEmptyTrash()}
+          disabled={assetInteraction.selectionActive}
+          variant="ghost"
+          color="secondary"
+          size="small"
+        >
+          <Icon path={mdiDeleteForeverOutline} />
+          {$t('empty_trash')}
+        </Button>
+      </HStack>
     {/snippet}
 
     <AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape}>

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
   import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
-  import type { AssetResponseDto } from '@immich/sdk';
+  import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
+  import { stackAssets } from '$lib/utils/asset-utils';
+  import { suggestDuplicate } from '$lib/utils/duplicate-utils';
   import { handleError } from '$lib/utils/handle-error';
+  import type { AssetResponseDto } from '@immich/sdk';
   import { deleteAssets, updateAssets } from '@immich/sdk';
+  import { Button, HStack, IconButton } from '@immich/ui';
+  import { mdiCheckOutline, mdiInformationOutline, mdiKeyboard, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { suggestDuplicate } from '$lib/utils/duplicate-utils';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import { mdiCheckOutline, mdiInformationOutline, mdiTrashCanOutline } from '@mdi/js';
-  import { stackAssets } from '$lib/utils/asset-utils';
-  import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
-  import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { mdiKeyboard } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { locale } from '$lib/stores/preferences.store';
 
   interface Props {
     data: PageData;
@@ -163,25 +162,31 @@
 
 <UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}>
   {#snippet buttons()}
-    <div class="flex place-items-center gap-2">
-      <LinkButton onclick={() => handleDeduplicateAll()} disabled={!hasDuplicates}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiTrashCanOutline} size="18" />
-          {$t('deduplicate_all')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleKeepAll()} disabled={!hasDuplicates}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiCheckOutline} size="18" />
-          {$t('keep_all')}
-        </div>
-      </LinkButton>
-      <CircleIconButton
+    <HStack gap={0}>
+      <Button
+        onclick={() => handleDeduplicateAll()}
+        disabled={!hasDuplicates}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiTrashCanOutline} />
+        {$t('deduplicate_all')}
+      </Button>
+      <Button onclick={() => handleKeepAll()} disabled={!hasDuplicates} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiCheckOutline} />
+        {$t('keep_all')}
+      </Button>
+      <IconButton
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        size="large"
         icon={mdiKeyboard}
         title={$t('show_keyboard_shortcuts')}
         onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
       />
-    </div>
+    </HStack>
   {/snippet}
 
   <div class="">

web/src/routes/admin/jobs-status/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
@@ -13,6 +12,7 @@
   import { asyncTimeout } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createJob, getAllJobsStatus, ManualJobName, type AllJobStatusResponseDto } from '@immich/sdk';
+  import { Button, HStack } from '@immich/ui';
   import { mdiCog, mdiPlus } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -71,20 +71,16 @@
 
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
-    <div class="flex justify-end">
-      <LinkButton onclick={() => (isOpen = true)}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiPlus} size="18" />
-          {$t('admin.create_job')}
-        </div>
-      </LinkButton>
-      <LinkButton href="{AppRoute.ADMIN_SETTINGS}?isOpen=job">
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiCog} size="18" />
-          {$t('admin.manage_concurrency')}
-        </div>
-      </LinkButton>
-    </div>
+    <HStack gap={0}>
+      <Button onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiPlus} size="18" />
+        {$t('admin.create_job')}
+      </Button>
+      <Button href="{AppRoute.ADMIN_SETTINGS}?isOpen=job" size="small" variant="ghost" color="secondary">
+        <Icon path={mdiCog} size="18" />
+        {$t('admin.manage_concurrency')}
+      </Button>
+    </HStack>
   {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">

web/src/routes/admin/library-management/+page.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
   import LibraryRenameForm from '$lib/components/forms/library-rename-form.svelte';
   import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
   import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { locale } from '$lib/stores/preferences.store';
   import { handleError } from '$lib/utils/handle-error';
   import {
     createLibrary,
@@ -24,15 +27,12 @@
     type LibraryResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiDatabase, mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
-  import { fade, slide } from 'svelte/transition';
-  import LinkButton from '../../../lib/components/elements/buttons/link-button.svelte';
-  import type { PageData } from './$types';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import { locale } from '$lib/stores/preferences.store';
+  import { fade, slide } from 'svelte/transition';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -209,19 +209,19 @@
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
       {#if libraries.length > 0}
-        <LinkButton onclick={() => handleScanAll()}>
+        <Button onclick={handleScanAll} size="small" variant="ghost" color="secondary">
           <div class="flex gap-1 text-sm">
             <Icon path={mdiSync} size="18" />
             <span>{$t('scan_all_libraries')}</span>
           </div>
-        </LinkButton>
+        </Button>
       {/if}
-      <LinkButton onclick={() => (toCreateLibrary = true)}>
+      <Button onclick={() => (toCreateLibrary = true)} size="small" variant="ghost" color="secondary">
         <div class="flex gap-1 text-sm">
           <Icon path={mdiPlusBoxOutline} size="18" />
           <span>{$t('create_library')}</span>
         </div>
-      </LinkButton>
+      </Button>
     </div>
   {/snippet}
   <section class="my-4">

web/src/routes/admin/repair/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import empty4Url from '$lib/assets/empty-4.svg';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -10,14 +9,15 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { downloadManager } from '$lib/stores/download';
+  import { locale } from '$lib/stores/preferences.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { fixAuditFiles, getAuditFiles, getFileChecksums, type FileReportItemDto } from '@immich/sdk';
+  import { Button, HStack } from '@immich/ui';
   import { mdiCheckAll, mdiContentCopy, mdiDownload, mdiRefresh, mdiWrench } from '@mdi/js';
-  import type { PageData } from './$types';
   import { t } from 'svelte-i18n';
-  import { locale } from '$lib/stores/preferences.store';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -185,32 +185,42 @@
 
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <LinkButton onclick={() => handleRepair()} disabled={matches.length === 0 || repairing}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiWrench} size="18" />
-          {$t('admin.repair_all')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleCheckAll()} disabled={extras.length === 0 || checking}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiCheckAll} size="18" />
-          {$t('admin.check_all')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleDownload()} disabled={extras.length + orphans.length === 0}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiDownload} size="18" />
-          {$t('export')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleRefresh()}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiRefresh} size="18" />
-          {$t('refresh')}
-        </div>
-      </LinkButton>
-    </div>
+    <HStack gap={0}>
+      <Button
+        onclick={() => handleRepair()}
+        disabled={matches.length === 0 || repairing}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiWrench} />
+        {$t('admin.repair_all')}
+      </Button>
+      <Button
+        onclick={() => handleCheckAll()}
+        disabled={extras.length === 0 || checking}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiCheckAll} />
+        {$t('admin.check_all')}
+      </Button>
+      <Button
+        onclick={() => handleDownload()}
+        disabled={extras.length + orphans.length === 0}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiDownload} />
+        {$t('export')}
+      </Button>
+      <Button onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiRefresh} />
+        {$t('refresh')}
+      </Button>
+    </HStack>
   {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">

web/src/routes/admin/system-settings/+page.svelte

@@ -17,7 +17,7 @@
   import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
   import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
   import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import { Button, HStack } from '@immich/ui';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
@@ -255,31 +255,30 @@
 
   <UserPageLayout title={data.meta.title} admin>
     {#snippet buttons()}
-      <div class="flex justify-end gap-2">
+      <HStack gap={1}>
         <div class="hidden lg:block">
           <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
         </div>
-        <LinkButton onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiContentCopy} size="18" />
-            {$t('copy_to_clipboard')}
-          </div>
-        </LinkButton>
-        <LinkButton onclick={() => downloadConfig()}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiDownload} size="18" />
-            {$t('export_as_json')}
-          </div>
-        </LinkButton>
+        <Button
+          onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
+          size="small"
+          variant="ghost"
+          color="secondary"
+        >
+          <Icon path={mdiContentCopy} />
+          {$t('copy_to_clipboard')}
+        </Button>
+        <Button onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
+          <Icon path={mdiDownload} />
+          {$t('export_as_json')}
+        </Button>
         {#if !$featureFlags.configFile}
-          <LinkButton onclick={() => inputElement?.click()}>
-            <div class="flex place-items-center gap-2 text-sm">
-              <Icon path={mdiUpload} size="18" />
-              {$t('import_from_json')}
-            </div>
-          </LinkButton>
+          <Button onclick={() => inputElement?.click()} size="small" variant="ghost" color="secondary">
+            <Icon path={mdiUpload} />
+            {$t('import_from_json')}
+          </Button>
         {/if}
-      </div>
+      </HStack>
     {/snippet}
 
     <AdminSettings bind:config bind:this={adminSettingElement}>