self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-20 20:16:10 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Jonathan Jogenfors 2025-01-17 00:01:56 +01:00
commit e1b12e96c8
36 changed files with 844 additions and 924 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
server/src/app.module.ts
View File

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

12
server/src/bin/sync-sql.ts
View File

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

3
server/src/database.ts Normal file
View File

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

11
server/src/dtos/activity.dto.ts
View File

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

13
server/src/interfaces/activity.interface.ts
View File

@ -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>;
}

405
server/src/queries/access.repository.sql
View File

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

6
server/src/queries/activity.repository.sql
View File

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

439
server/src/repositories/access.repository.ts
View File

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

15
server/src/repositories/activity.repository.ts
View File

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

7
server/src/repositories/index.ts
View File

@ -1,5 +1,4 @@
import { IAccessRepository } from 'src/interfaces/access.interface'; import { IAccessRepository } from 'src/interfaces/access.interface';
import { IActivityRepository } from 'src/interfaces/activity.interface';
import { IAlbumUserRepository } from 'src/interfaces/album-user.interface'; import { IAlbumUserRepository } from 'src/interfaces/album-user.interface';
import { IAlbumRepository } from 'src/interfaces/album.interface'; import { IAlbumRepository } from 'src/interfaces/album.interface';
import { IKeyRepository } from 'src/interfaces/api-key.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'; import { ViewRepository } from 'src/repositories/view-repository';
export const repositories = [ export const repositories = [
//
ActivityRepository,
];
export const providers = [
{ provide: IAccessRepository, useClass: AccessRepository }, { provide: IAccessRepository, useClass: AccessRepository },
{ provide: IActivityRepository, useClass: ActivityRepository },
{ provide: IAlbumRepository, useClass: AlbumRepository }, { provide: IAlbumRepository, useClass: AlbumRepository },
{ provide: IAlbumUserRepository, useClass: AlbumUserRepository }, { provide: IAlbumUserRepository, useClass: AlbumUserRepository },
{ provide: IAssetRepository, useClass: AssetRepository }, { provide: IAssetRepository, useClass: AssetRepository },

2
server/src/services/activity.service.spec.ts
View File

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

6
server/src/services/activity.service.ts
View File

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

4
server/src/services/base.service.ts
View File

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

9
server/src/types.ts
View File

@ -1,5 +1,6 @@
import { UserEntity } from 'src/entities/user.entity'; import { UserEntity } from 'src/entities/user.entity';
import { Permission } from 'src/enum'; import { Permission } from 'src/enum';
import { ActivityRepository } from 'src/repositories/activity.repository';
export type AuthApiKey = { export type AuthApiKey = {
id: string; id: string;
@ -7,3 +8,11 @@ export type AuthApiKey = {
user: UserEntity; user: UserEntity;
permissions: Permission[]; 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];

32
server/test/fixtures/activity.stub.ts vendored
View File

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

2
server/test/repositories/activity.repository.mock.ts
View File

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

4
server/test/utils.ts
View File

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

8
web/package-lock.json generated
View File

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

2
web/package.json
View File

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

2
web/src/app.css
View File

@ -26,7 +26,7 @@
:root { :root {
/* light */ /* light */
--immich-ui-primary: 66 80 175; --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-light: 255 255 255;
--immich-ui-success: 34 197 94; --immich-ui-success: 34 197 94;
--immich-ui-danger: 180 0 0; --immich-ui-danger: 180 0 0;

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

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

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

@ -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>

22
web/src/lib/components/elements/dropdown.svelte
View File

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

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

@ -1,13 +1,11 @@
<script lang="ts"> <script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte'; import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.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 type { MapSettings } from '$lib/stores/preferences.store';
import { Button, Field, Stack, Switch } from '@immich/ui';
import { Duration } from 'luxon'; import { Duration } from 'luxon';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition'; 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'; import DateInput from '../elements/date-input.svelte';
interface Props { interface Props {
@ -16,7 +14,8 @@
onSave: (settings: MapSettings) => void; 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); let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore);
@ -26,13 +25,25 @@
}; };
</script> </script>
<form {onsubmit}>
<FullScreenModal title={$t('map_settings')} {onClose}> <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"> <Stack gap={4}>
<SettingSwitch title={$t('allow_dark_mode')} bind:checked={settings.allowDarkMode} /> <Field label={$t('allow_dark_mode')}>
<SettingSwitch title={$t('only_favorites')} bind:checked={settings.onlyFavorites} /> <Switch bind:checked={settings.allowDarkMode} class="flex justify-between items-center text-sm" />
<SettingSwitch title={$t('include_archived')} bind:checked={settings.includeArchived} /> </Field>
<SettingSwitch title={$t('include_shared_partner_assets')} bind:checked={settings.withPartners} /> <Field label={$t('only_favorites')}>
<SettingSwitch title={$t('include_shared_albums')} bind:checked={settings.withSharedAlbums} /> <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>
{#if customDateRange} {#if customDateRange}
<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4"> <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
<div class="flex items-center justify-between gap-8"> <div class="flex items-center justify-between gap-8">
@ -50,7 +61,10 @@
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} /> <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
</div> </div>
<div class="flex justify-center text-xs"> <div class="flex justify-center text-xs">
<LinkButton <Button
color="primary"
size="small"
variant="ghost"
onclick={() => { onclick={() => {
customDateRange = false; customDateRange = false;
settings.dateAfter = ''; settings.dateAfter = '';
@ -58,7 +72,7 @@
}} }}
> >
{$t('remove_custom_date_range')} {$t('remove_custom_date_range')}
</LinkButton> </Button>
</div> </div>
</div> </div>
{:else} {:else}
@ -95,21 +109,25 @@
]} ]}
/> />
<div class="text-xs"> <div class="text-xs">
<LinkButton <Button
color="primary"
size="small"
variant="ghost"
onclick={() => { onclick={() => {
customDateRange = true; customDateRange = true;
settings.relativeDate = ''; settings.relativeDate = '';
}} }}
> >
{$t('use_custom_date_range')} {$t('use_custom_date_range')}
</LinkButton> </Button>
</div> </div>
</div> </div>
{/if} {/if}
</form> </Stack>
{#snippet stickyBottom()} {#snippet stickyBottom()}
<Button color="gray" size="sm" fullwidth onclick={onClose}>{$t('cancel')}</Button> <Button color="secondary" shape="round" fullWidth onclick={onClose}>{$t('cancel')}</Button>
<Button type="submit" size="sm" fullwidth form="map-settings-form">{$t('save')}</Button> <Button type="submit" shape="round" fullWidth>{$t('save')}</Button>
{/snippet} {/snippet}
</FullScreenModal> </FullScreenModal>
</form>

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

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

24
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

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

12
web/src/lib/stores/preferences.store.ts
View File

@ -62,7 +62,7 @@ export interface MapSettings {
dateBefore: string; dateBefore: string;
} }
export const mapSettings = persisted<MapSettings>('map-settings', { const defaultMapSettings = {
allowDarkMode: true, allowDarkMode: true,
includeArchived: false, includeArchived: false,
onlyFavorites: false, onlyFavorites: false,
@ -71,8 +71,18 @@ export const mapSettings = persisted<MapSettings>('map-settings', {
relativeDate: '', relativeDate: '',
dateAfter: '', dateAfter: '',
dateBefore: '', 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 videoViewerVolume = persisted<number>('video-viewer-volume', 1, {});
export const videoViewerMuted = persisted<boolean>('video-viewer-muted', false, {}); export const videoViewerMuted = persisted<boolean>('video-viewer-muted', false, {});

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

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

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

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

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

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

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

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

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

@ -1,27 +1,26 @@
<script lang="ts"> <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 UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog'; import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
import { import {
NotificationType, NotificationType,
notificationController, notificationController,
} from '$lib/components/shared-components/notification/notification'; } 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 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 { 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 { handleError } from '$lib/utils/handle-error';
import type { AssetResponseDto } from '@immich/sdk';
import { deleteAssets, updateAssets } 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 { t } from 'svelte-i18n';
import type { PageData } from './$types'; 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 { interface Props {
data: PageData; data: PageData;
@ -163,25 +162,31 @@
<UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}> <UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}>
{#snippet buttons()} {#snippet buttons()}
<div class="flex place-items-center gap-2"> <HStack gap={0}>
<LinkButton onclick={() => handleDeduplicateAll()} disabled={!hasDuplicates}> <Button
<div class="flex place-items-center gap-2 text-sm"> onclick={() => handleDeduplicateAll()}
<Icon path={mdiTrashCanOutline} size="18" /> disabled={!hasDuplicates}
size="small"
variant="ghost"
color="secondary"
>
<Icon path={mdiTrashCanOutline} />
{$t('deduplicate_all')} {$t('deduplicate_all')}
</div> </Button>
</LinkButton> <Button onclick={() => handleKeepAll()} disabled={!hasDuplicates} size="small" variant="ghost" color="secondary">
<LinkButton onclick={() => handleKeepAll()} disabled={!hasDuplicates}> <Icon path={mdiCheckOutline} />
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiCheckOutline} size="18" />
{$t('keep_all')} {$t('keep_all')}
</div> </Button>
</LinkButton> <IconButton
<CircleIconButton shape="round"
variant="ghost"
color="secondary"
size="large"
icon={mdiKeyboard} icon={mdiKeyboard}
title={$t('show_keyboard_shortcuts')} title={$t('show_keyboard_shortcuts')}
onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)} onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
/> />
</div> </HStack>
{/snippet} {/snippet}
<div class=""> <div class="">

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

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

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

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

60
web/src/routes/admin/repair/+page.svelte
View File

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

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

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