refactor: update bottom bar button type assertions for consistency and clarity

cli/package.json

@@ -20,7 +20,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.9",
     "@types/mock-fs": "^4.13.1",
-    "@types/node": "^24.10.3",
+    "@types/node": "^24.10.1",
     "@vitest/coverage-v8": "^3.0.0",
     "byte-size": "^9.0.0",
     "cli-progress": "^3.12.0",

e2e/package.json

@@ -26,7 +26,7 @@
     "@playwright/test": "^1.44.1",
     "@socket.io/component-emitter": "^3.1.2",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^24.10.3",
+    "@types/node": "^24.10.1",
     "@types/oidc-provider": "^9.0.0",
     "@types/pg": "^8.15.1",
     "@types/pngjs": "^6.0.4",

mobile/lib/constants/enums.dart

@@ -7,3 +7,5 @@ enum AssetVisibilityEnum { timeline, hidden, archive, locked }
 enum SortUserBy { id }
 
 enum ActionSource { timeline, viewer }
+
+enum ButtonPosition { bottomBar, kebabMenu, other }

mobile/lib/presentation/widgets/action_buttons/edit_image_action_button.widget.dart

@@ -8,7 +8,10 @@ import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asse
 import 'package:immich_mobile/routing/router.dart';
 
 class EditImageActionButton extends ConsumerWidget {
-  const EditImageActionButton({super.key});
+  final bool iconOnly;
+  final bool menuItem;
+
+  const EditImageActionButton({super.key, this.iconOnly = false, this.menuItem = false});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -27,6 +30,8 @@ class EditImageActionButton extends ConsumerWidget {
       iconData: Icons.tune,
       label: "edit".t(context: context),
       onPressed: onPress,
+      iconOnly: iconOnly,
+      menuItem: menuItem,
     );
   }
 }

mobile/lib/presentation/widgets/action_buttons/like_activity_action_button.widget.dart

@@ -47,7 +47,7 @@ class LikeActivityActionButton extends ConsumerWidget {
 
         return BaseActionButton(
           maxWidth: 60,
-          iconData: liked != null ? Icons.thumb_up : Icons.thumb_up_off_alt,
+          iconData: liked != null ? Icons.favorite : Icons.favorite_border,
           label: "like".t(context: context),
           onPressed: () => onTap(liked),
           iconOnly: iconOnly,
@@ -57,7 +57,7 @@ class LikeActivityActionButton extends ConsumerWidget {
 
       // default to empty heart during loading
       loading: () => BaseActionButton(
-        iconData: Icons.thumb_up_off_alt,
+        iconData: Icons.favorite_border,
         label: "like".t(context: context),
         iconOnly: iconOnly,
         menuItem: menuItem,

mobile/lib/presentation/widgets/action_buttons/open_activity_action_button.widget.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+
+class OpenActivityActionButton extends ConsumerWidget {
+  const OpenActivityActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+
+  final bool iconOnly;
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.chat_outlined,
+      label: "activity".t(context: context),
+      onPressed: () => EventStream.shared.emit(const ViewerOpenBottomSheetEvent(activitiesMode: true)),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart

@@ -79,7 +79,7 @@ class ActivitiesBottomSheet extends HookConsumerWidget {
       expand: false,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
-      backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
+      backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
     );
   }
 }

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -97,7 +97,7 @@ class AssetViewer extends ConsumerStatefulWidget {
 }
 
 const double _kBottomSheetMinimumExtent = 0.4;
-const double _kBottomSheetSnapExtent = 0.67;
+const double _kBottomSheetSnapExtent = 0.7;
 
 class _AssetViewerState extends ConsumerState<AssetViewer> {
   static final _dummyListener = ImageStreamListener((image, _) => image.dispose());
@@ -399,14 +399,10 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     final isDraggingDown = currentExtent < previousExtent;
     previousExtent = currentExtent;
     // Closes the bottom sheet if the user is dragging down
-    if (isDraggingDown && delta.extent < 0.67) {
+    if (isDraggingDown && delta.extent < 0.55) {
       if (dragInProgress) {
         blockGestures = true;
       }
-      // Jump to a lower position before starting close animation to prevent glitch
-      if (bottomSheetController.isAttached) {
-        bottomSheetController.jumpTo(0.67);
-      }
       sheetCloseController?.close();
     }
 
@@ -484,7 +480,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     previousExtent = _kBottomSheetMinimumExtent;
     sheetCloseController = showBottomSheet(
       context: ctx,
-      sheetAnimationStyle: const AnimationStyle(duration: Durations.medium2, reverseDuration: Durations.medium2),
+      sheetAnimationStyle: const AnimationStyle(duration: Durations.short4, reverseDuration: Durations.short2),
       constraints: const BoxConstraints(maxWidth: double.infinity),
       shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))),
       backgroundColor: ctx.colorScheme.surfaceContainerLowest,
@@ -692,20 +688,16 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
               backgroundDecoration: BoxDecoration(color: backgroundColor),
               enablePanAlways: true,
             ),
-            if (!showingBottomSheet)
-              const Positioned(
-                bottom: 0,
-                left: 0,
-                right: 0,
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  mainAxisAlignment: MainAxisAlignment.end,
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [AssetStackRow(), ViewerBottomBar()],
-                ),
-              ),
           ],
         ),
+        bottomNavigationBar: showingBottomSheet
+            ? const SizedBox.shrink()
+            : const Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.end,
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [AssetStackRow(), ViewerBottomBar()],
+              ),
       ),
     );
   }

mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart

@@ -2,18 +2,18 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/edit_image_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/utils/action_button.utils.dart';
 import 'package:immich_mobile/widgets/asset_viewer/video_controls.dart';
 
 class ViewerBottomBar extends ConsumerWidget {
@@ -33,6 +33,11 @@ class ViewerBottomBar extends ConsumerWidget {
     int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
     final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
     final isInLockedView = ref.watch(inLockedViewProvider);
+    final album = ref.watch(currentRemoteAlbumProvider);
+    final isArchived = asset is RemoteAsset && asset.visibility == AssetVisibility.archive;
+    final advancedTroubleshooting = ref.watch(settingsProvider.notifier).get(Setting.advancedTroubleshooting);
+    final timelineOrigin = ref.read(timelineServiceProvider).origin;
+    final isTrashEnable = ref.watch(serverInfoProvider.select((state) => state.serverFeatures.trash));
 
     if (!showControls) {
       opacity = 0;
@@ -40,21 +45,22 @@ class ViewerBottomBar extends ConsumerWidget {
 
     final originalTheme = context.themeData;
 
-    final actions = <Widget>[
-      const ShareActionButton(source: ActionSource.viewer),
+    final buttonContext = ActionButtonContext(
+      asset: asset,
+      isOwner: isOwner,
+      isArchived: isArchived,
+      isTrashEnabled: isTrashEnable,
+      isStacked: asset is RemoteAsset && asset.stackId != null,
+      isInLockedView: isInLockedView,
+      currentAlbum: album,
+      advancedTroubleshooting: advancedTroubleshooting,
+      source: ActionSource.viewer,
+      timelineOrigin: timelineOrigin,
+      originalTheme: originalTheme,
+      buttonPosition: ButtonPosition.bottomBar,
+    );
 
-      if (!isInLockedView) ...[
-        if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
-        if (asset.type == AssetType.image) const EditImageActionButton(),
-        if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
-
-        if (isOwner) ...[
-          asset.isLocalOnly
-              ? const DeleteLocalActionButton(source: ActionSource.viewer)
-              : const DeleteActionButton(source: ActionSource.viewer, showConfirmation: true),
-        ],
-      ],
-    ];
+    final actions = ActionButtonBuilder.buildViewerBottomBar(buttonContext, context, ref);
 
     return IgnorePointer(
       ignoring: opacity < 255,
@@ -80,7 +86,11 @@ class ViewerBottomBar extends ConsumerWidget {
                       children: [
                         if (asset.isVideo) const VideoControls(),
                         if (!isReadonlyModeEnabled)
-                          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: actions),
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: actions.map((action) => Expanded(child: action)).toList(),
+                          ),
                       ],
                     ),
                   ),

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart

@@ -52,7 +52,7 @@ class AssetDetailBottomSheet extends ConsumerWidget {
       expand: false,
       shouldCloseOnMinExtent: false,
       resizeOnScroll: false,
-      backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
+      backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
     );
   }
 }
@@ -299,7 +299,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // Appears in (Albums)
         Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
         // padding at the bottom to avoid cut-off
-        const SizedBox(height: 30),
+        const SizedBox(height: 100),
       ],
     );
   }

mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart

@@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/events.model.dart';
-import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
@@ -51,13 +49,6 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
 
     final actions = <Widget>[
       if (asset.isMotionPhoto) const MotionPhotoActionButton(iconOnly: true),
-      if (album != null && album.isActivityEnabled && album.isShared)
-        IconButton(
-          icon: const Icon(Icons.chat_outlined),
-          onPressed: () {
-            EventStream.shared.emit(const ViewerOpenBottomSheetEvent(activitiesMode: true));
-          },
-        ),
 
       if (asset.hasRemote && isOwner && !asset.isFavorite)
         const FavoriteActionButton(source: ActionSource.viewer, iconOnly: true),

mobile/lib/presentation/widgets/bottom_sheet/archive_bottom_sheet.widget.dart

@@ -14,6 +14,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_b
 import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
@@ -46,7 +47,10 @@ class ArchiveBottomSheet extends ConsumerWidget {
           if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
           if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
         ],
-        if (multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+        if (multiselect.hasLocal) ...[
+          const DeleteLocalActionButton(source: ActionSource.timeline),
+          const UploadActionButton(source: ActionSource.timeline),
+        ],
       ],
     );
   }

mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart

@@ -81,7 +81,7 @@ class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet>
                 child: CustomScrollView(
                   controller: scrollController,
                   slivers: [
-                    const SliverToBoxAdapter(child: _DragHandle()),
+                    const SliverPersistentHeader(delegate: _DragHandleDelegate(), pinned: true),
                     if (widget.actions.isNotEmpty)
                       SliverToBoxAdapter(
                         child: Column(
@@ -108,13 +108,31 @@ class _BaseDraggableScrollableSheetState extends ConsumerState<BaseBottomSheet>
   }
 }
 
+class _DragHandleDelegate extends SliverPersistentHeaderDelegate {
+  const _DragHandleDelegate();
+
+  @override
+  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return const _DragHandle();
+  }
+
+  @override
+  bool shouldRebuild(_DragHandleDelegate oldDelegate) => false;
+
+  @override
+  double get minExtent => 50.0;
+
+  @override
+  double get maxExtent => 50.0;
+}
+
 class _DragHandle extends StatelessWidget {
   const _DragHandle();
 
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 38,
+      height: 50,
       child: Center(
         child: SizedBox(
           width: 32,

mobile/lib/presentation/widgets/bottom_sheet/favorite_bottom_sheet.widget.dart

@@ -17,6 +17,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_b
 import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
@@ -85,7 +86,10 @@ class FavoriteBottomSheet extends ConsumerWidget {
           if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
           if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
         ],
-        if (multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+        if (multiselect.hasLocal) ...[
+          const DeleteLocalActionButton(source: ActionSource.timeline),
+          const UploadActionButton(source: ActionSource.timeline),
+        ],
       ],
       slivers: multiselect.hasRemote
           ? [const AddToAlbumHeader(), AlbumSelector(onAlbumSelected: addAssetsToAlbum)]

mobile/lib/presentation/widgets/bottom_sheet/remote_album_bottom_sheet.widget.dart

@@ -18,6 +18,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_act
 import 'package:immich_mobile/presentation/widgets/action_buttons/stack_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
@@ -111,7 +112,10 @@ class _RemoteAlbumBottomSheetState extends ConsumerState<RemoteAlbumBottomSheet>
             if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
           ],
         ],
-        if (multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
+        if (multiselect.hasLocal) ...[
+          const DeleteLocalActionButton(source: ActionSource.timeline),
+          const UploadActionButton(source: ActionSource.timeline),
+        ],
         if (ownsAlbum) RemoveFromAlbumActionButton(source: ActionSource.timeline, albumId: widget.album.id),
       ],
       slivers: ownsAlbum

mobile/lib/utils/action_button.utils.dart

@@ -17,6 +17,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_a
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/open_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart';
@@ -27,6 +28,8 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_b
 import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/edit_image_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
 import 'package:immich_mobile/routing/router.dart';
 
 class ActionButtonContext {
@@ -42,6 +45,7 @@ class ActionButtonContext {
   final bool isCasting;
   final TimelineOrigin timelineOrigin;
   final ThemeData? originalTheme;
+  final ButtonPosition buttonPosition;
 
   const ActionButtonContext({
     required this.asset,
@@ -56,13 +60,48 @@ class ActionButtonContext {
     this.isCasting = false,
     this.timelineOrigin = TimelineOrigin.main,
     this.originalTheme,
+    this.buttonPosition = ButtonPosition.other,
   });
+
+  ActionButtonContext copyWith({
+    BaseAsset? asset,
+    bool? isOwner,
+    bool? isArchived,
+    bool? isTrashEnabled,
+    bool? isStacked,
+    bool? isInLockedView,
+    RemoteAlbum? currentAlbum,
+    bool? advancedTroubleshooting,
+    ActionSource? source,
+    bool? isCasting,
+    TimelineOrigin? timelineOrigin,
+    ThemeData? originalTheme,
+    ButtonPosition? buttonPosition,
+  }) {
+    return ActionButtonContext(
+      asset: asset ?? this.asset,
+      isOwner: isOwner ?? this.isOwner,
+      isArchived: isArchived ?? this.isArchived,
+      isTrashEnabled: isTrashEnabled ?? this.isTrashEnabled,
+      isStacked: isStacked ?? this.isStacked,
+      isInLockedView: isInLockedView ?? this.isInLockedView,
+      currentAlbum: currentAlbum ?? this.currentAlbum,
+      advancedTroubleshooting: advancedTroubleshooting ?? this.advancedTroubleshooting,
+      source: source ?? this.source,
+      isCasting: isCasting ?? this.isCasting,
+      timelineOrigin: timelineOrigin ?? this.timelineOrigin,
+      originalTheme: originalTheme ?? this.originalTheme,
+      buttonPosition: buttonPosition ?? this.buttonPosition,
+    );
+  }
 }
 
 enum ActionButtonType {
   openInfo,
+  openActivity,
   likeActivity,
   share,
+  editImage,
   shareLink,
   cast,
   similarPhotos,
@@ -79,6 +118,7 @@ enum ActionButtonType {
   deleteLocal,
   deletePermanent,
   delete,
+  addTo,
   advancedInfo;
 
   bool shouldShow(ActionButtonContext context) {
@@ -156,10 +196,22 @@ enum ActionButtonType {
             context.timelineOrigin != TimelineOrigin.localAlbum &&
             context.isOwner,
       ActionButtonType.cast => context.isCasting || context.asset.hasRemote,
+      ActionButtonType.editImage =>
+        !context.isInLockedView && //
+            context.asset.type == AssetType.image &&
+            !(context.buttonPosition == ButtonPosition.bottomBar && context.currentAlbum?.isShared == true),
+      ActionButtonType.addTo =>
+        !context.isInLockedView && //
+            context.asset.hasRemote,
+      ActionButtonType.openActivity =>
+        !context.isInLockedView &&
+            context.currentAlbum != null &&
+            context.currentAlbum!.isActivityEnabled &&
+            context.currentAlbum!.isShared,
     };
   }
 
-  ConsumerWidget buildButton(
+  Widget buildButton(
     ActionButtonContext context, [
     BuildContext? buildContext,
     bool iconOnly = false,
@@ -242,6 +294,9 @@ enum ActionButtonType {
               },
       ),
       ActionButtonType.cast => CastActionButton(iconOnly: iconOnly, menuItem: menuItem),
+      ActionButtonType.editImage => EditImageActionButton(iconOnly: iconOnly, menuItem: menuItem),
+      ActionButtonType.addTo => AddActionButton(originalTheme: context.originalTheme),
+      ActionButtonType.openActivity => OpenActivityActionButton(iconOnly: iconOnly, menuItem: menuItem),
     };
   }
 
@@ -272,39 +327,77 @@ enum ActionButtonType {
 class ActionButtonBuilder {
   static const List<ActionButtonType> _actionTypes = ActionButtonType.values;
   static const List<ActionButtonType> defaultViewerKebabMenuOrder = _actionTypes;
-  static const Set<ActionButtonType> defaultViewerBottomBarButtons = {
+  static const List<ActionButtonType> _defaultViewerBottomBarOrder = [
     ActionButtonType.share,
-    ActionButtonType.moveToLockFolder,
     ActionButtonType.upload,
+    ActionButtonType.editImage,
+    ActionButtonType.addTo,
+    ActionButtonType.openActivity,
+    ActionButtonType.likeActivity,
+    ActionButtonType.deleteLocal,
     ActionButtonType.delete,
-    ActionButtonType.archive,
-    ActionButtonType.unarchive,
-  };
+    ActionButtonType.removeFromLockFolder,
+    ActionButtonType.deletePermanent,
+  ];
 
   static List<Widget> build(ActionButtonContext context) {
     return _actionTypes.where((type) => type.shouldShow(context)).map((type) => type.buildButton(context)).toList();
   }
 
-  static List<Widget> buildViewerKebabMenu(ActionButtonContext context, BuildContext buildContext, WidgetRef ref) {
-    final visibleButtons = defaultViewerKebabMenuOrder
-        .where((type) => !defaultViewerBottomBarButtons.contains(type) && type.shouldShow(context))
-        .toList();
+  static List<ActionButtonType> getViewerKebabMenuTypes(ActionButtonContext context) {
+    final visibleBottomBarButtons = getViewerBottomBarTypes(context);
+    final excludedTypes = <ActionButtonType>{...visibleBottomBarButtons, ActionButtonType.addTo};
 
-    if (visibleButtons.isEmpty) {
+    if (visibleBottomBarButtons.contains(ActionButtonType.addTo)) {
+      excludedTypes.addAll([ActionButtonType.moveToLockFolder, ActionButtonType.archive, ActionButtonType.unarchive]);
+    }
+
+    return defaultViewerKebabMenuOrder
+        .where((type) => !excludedTypes.contains(type) && type.shouldShow(context))
+        .toList();
+  }
+
+  static List<ActionButtonType> getViewerBottomBarTypes(ActionButtonContext context) {
+    final bottomBarContext = context.copyWith(buttonPosition: ButtonPosition.bottomBar);
+    return _defaultViewerBottomBarOrder.where((type) => type.shouldShow(bottomBarContext)).take(4).toList();
+  }
+
+  static List<Widget> buildViewerKebabMenu(ActionButtonContext context, BuildContext buildContext, WidgetRef ref) {
+    final visibleButtons = getViewerKebabMenuTypes(context);
+    return visibleButtons.toKebabMenuWidgets(context, buildContext, ref);
+  }
+
+  static List<Widget> buildViewerBottomBar(ActionButtonContext context, BuildContext buildContext, WidgetRef ref) {
+    final visibleButtons = getViewerBottomBarTypes(context);
+    return visibleButtons.toBottomBarWidgets(context, buildContext, ref);
+  }
+}
+
+extension ActionButtonTypeListExtension on List<ActionButtonType> {
+  List<Widget> toKebabMenuWidgets(ActionButtonContext context, BuildContext buildContext, WidgetRef ref) {
+    if (isEmpty) {
       return [];
     }
 
     final List<Widget> result = [];
     int? lastGroup;
 
-    for (final type in visibleButtons) {
+    for (final type in this) {
       if (lastGroup != null && type.kebabMenuGroup != lastGroup) {
         result.add(const Divider(height: 1));
       }
-      result.add(type.buildButton(context, buildContext, false, true).build(buildContext, ref));
+      final widget = type.buildButton(context, buildContext, false, true);
+      result.add(widget is ConsumerWidget ? widget.build(buildContext, ref) : widget);
       lastGroup = type.kebabMenuGroup;
     }
 
     return result;
   }
+
+  List<Widget> toBottomBarWidgets(ActionButtonContext context, BuildContext buildContext, WidgetRef ref) {
+    return map((type) {
+      final widget = type.buildButton(context, buildContext, false, false);
+      return widget is ConsumerWidget ? widget.build(buildContext, ref) : widget;
+    }).toList();
+  }
 }

mobile/lib/widgets/activities/activity_text_field.dart

@@ -2,7 +2,6 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
 import 'package:immich_mobile/providers/album/current_album.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
@@ -69,11 +68,11 @@ class ActivityTextField extends HookConsumerWidget {
           suffixIcon: Padding(
             padding: const EdgeInsets.only(right: 10),
             child: IconButton(
-              icon: Icon(liked ? Icons.thumb_up : Icons.thumb_up_off_alt),
+              icon: Icon(liked ? Icons.favorite_rounded : Icons.favorite_border_rounded),
               onPressed: liked ? removeLike : addLike,
             ),
           ),
-          suffixIconColor: liked ? context.primaryColor : null,
+          suffixIconColor: liked ? Colors.red[700] : null,
           hintText: !isEnabled ? 'shared_album_activities_input_disable'.tr() : 'say_something'.tr(),
           hintStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 14, color: Colors.grey[600]),
         ),

mobile/lib/widgets/activities/activity_tile.dart

@@ -37,7 +37,7 @@ class ActivityTile extends HookConsumerWidget {
           ? Container(
               width: isBottomSheet ? 30 : 44,
               alignment: Alignment.center,
-              child: Icon(Icons.thumb_up, color: context.primaryColor),
+              child: Icon(Icons.favorite_rounded, color: Colors.red[700]),
             )
           : isBottomSheet
           ? UserCircleAvatar(user: activity.user, size: 30, radius: 15)

mobile/lib/widgets/activities/comment_bubble.dart

@@ -67,8 +67,8 @@ class CommentBubble extends ConsumerWidget {
                 bottom: 6,
                 child: Container(
                   padding: const EdgeInsets.all(4),
-                  decoration: BoxDecoration(color: context.colorScheme.surfaceContainer, shape: BoxShape.circle),
-                  child: Icon(Icons.thumb_up, color: context.primaryColor, size: 18),
+                  decoration: BoxDecoration(color: Colors.white.withValues(alpha: 0.7), shape: BoxShape.circle),
+                  child: Icon(Icons.favorite, color: Colors.red[600], size: 18),
                 ),
               ),
           ],
@@ -81,8 +81,8 @@ class CommentBubble extends ConsumerWidget {
     if (isLike && !showThumbnail) {
       likes = Container(
         padding: const EdgeInsets.all(8),
-        decoration: BoxDecoration(color: context.colorScheme.surfaceContainer, shape: BoxShape.circle),
-        child: Icon(Icons.thumb_up, color: context.primaryColor, size: 18),
+        decoration: BoxDecoration(color: Colors.white.withValues(alpha: 0.7), shape: BoxShape.circle),
+        child: Icon(Icons.favorite, color: Colors.red[600], size: 18),
       );
     }
 

mobile/test/modules/activity/activity_text_field_test.dart

@@ -77,15 +77,15 @@ void main() {
       overrides: overrides,
     );
 
-    expect(find.widgetWithIcon(IconButton, Icons.thumb_up), findsOneWidget);
-    expect(find.widgetWithIcon(IconButton, Icons.thumb_up_off_alt), findsNothing);
+    expect(find.widgetWithIcon(IconButton, Icons.favorite_rounded), findsOneWidget);
+    expect(find.widgetWithIcon(IconButton, Icons.favorite_border_rounded), findsNothing);
   });
 
   testWidgets('Bordered icon if likedId == null', (tester) async {
     await tester.pumpConsumerWidget(ActivityTextField(onSubmit: (_) {}), overrides: overrides);
 
-    expect(find.widgetWithIcon(IconButton, Icons.thumb_up_off_alt), findsOneWidget);
-    expect(find.widgetWithIcon(IconButton, Icons.thumb_up), findsNothing);
+    expect(find.widgetWithIcon(IconButton, Icons.favorite_border_rounded), findsOneWidget);
+    expect(find.widgetWithIcon(IconButton, Icons.favorite_rounded), findsNothing);
   });
 
   testWidgets('Adds new like', (tester) async {

mobile/test/modules/activity/activity_tile_test.dart

@@ -91,17 +91,17 @@ void main() {
   group('Like Activity', () {
     final activity = Activity(id: '1', createdAt: DateTime(100), type: ActivityType.like, user: UserStub.admin);
 
-    testWidgets('Like contains filled thumbs-up as leading', (tester) async {
+    testWidgets('Like contains filled heart as leading', (tester) async {
       await tester.pumpConsumerWidget(ActivityTile(activity), overrides: overrides);
 
       // Leading widget should not be null
       final listTile = tester.widget<ListTile>(find.byType(ListTile));
       expect(listTile.leading, isNotNull);
 
-      // And should have a thumb_up icon
-      final thumbUpIconFinder = find.widgetWithIcon(listTile.leading!.runtimeType, Icons.thumb_up);
+      // And should have a favorite icon
+      final favoIconFinder = find.widgetWithIcon(listTile.leading!.runtimeType, Icons.favorite_rounded);
 
-      expect(thumbUpIconFinder, findsOneWidget);
+      expect(favoIconFinder, findsOneWidget);
     });
 
     testWidgets('Like title is center aligned', (tester) async {

mobile/test/utils/action_button_utils_test.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:immich_mobile/constants/enums.dart';
@@ -962,4 +963,128 @@ void main() {
       expect(nonArchivedWidgets, isNotEmpty);
     });
   });
+
+  group('ActionButtonBuilder.getViewerBottomBarTypes', () {
+    test('should return correct button types for shared album with activity', () {
+      final remoteAsset = createRemoteAsset();
+      final album = createRemoteAlbum(isActivityEnabled: true, isShared: true);
+      final context = ActionButtonContext(
+        asset: remoteAsset,
+        isOwner: true,
+        isArchived: false,
+        isTrashEnabled: true,
+        isInLockedView: false,
+        currentAlbum: album,
+        advancedTroubleshooting: false,
+        isStacked: false,
+        source: ActionSource.viewer,
+        buttonPosition: ButtonPosition.bottomBar,
+      );
+
+      const expectedTypes = [
+        ActionButtonType.share,
+        ActionButtonType.addTo,
+        ActionButtonType.openActivity,
+        ActionButtonType.likeActivity,
+      ];
+
+      final bottomBarTypes = ActionButtonBuilder.getViewerBottomBarTypes(context);
+      final kebabTypes = ActionButtonBuilder.getViewerKebabMenuTypes(context);
+
+      expect(const ListEquality().equals(bottomBarTypes, expectedTypes), isTrue);
+      expect(bottomBarTypes.any(kebabTypes.contains), isFalse);
+    });
+
+    test('should return correct button types for local only asset', () {
+      final localAsset = createLocalAsset();
+      final context = ActionButtonContext(
+        asset: localAsset,
+        isOwner: true,
+        isArchived: false,
+        isTrashEnabled: true,
+        isInLockedView: false,
+        currentAlbum: null,
+        advancedTroubleshooting: false,
+        isStacked: false,
+        source: ActionSource.viewer,
+        buttonPosition: ButtonPosition.bottomBar,
+      );
+
+      const expectedTypes = [
+        ActionButtonType.share,
+        ActionButtonType.upload,
+        ActionButtonType.editImage,
+        ActionButtonType.deleteLocal,
+      ];
+
+      final bottomBarTypes = ActionButtonBuilder.getViewerBottomBarTypes(context);
+      final kebabTypes = ActionButtonBuilder.getViewerKebabMenuTypes(
+        context.copyWith(buttonPosition: ButtonPosition.kebabMenu),
+      );
+
+      expect(const ListEquality().equals(bottomBarTypes, expectedTypes), isTrue);
+      expect(bottomBarTypes.any(kebabTypes.contains), isFalse);
+    });
+
+    test('should return correct button types for locked view', () {
+      final remoteAsset = createRemoteAsset();
+      final context = ActionButtonContext(
+        asset: remoteAsset,
+        isOwner: true,
+        isArchived: false,
+        isTrashEnabled: false,
+        isInLockedView: true,
+        currentAlbum: null,
+        advancedTroubleshooting: false,
+        isStacked: false,
+        source: ActionSource.viewer,
+        buttonPosition: ButtonPosition.bottomBar,
+      );
+
+      const expectedTypes = [
+        ActionButtonType.share,
+        ActionButtonType.removeFromLockFolder,
+        ActionButtonType.deletePermanent,
+      ];
+
+      final bottomBarTypes = ActionButtonBuilder.getViewerBottomBarTypes(context);
+      final kebabTypes = ActionButtonBuilder.getViewerKebabMenuTypes(
+        context.copyWith(buttonPosition: ButtonPosition.kebabMenu),
+      );
+
+      expect(const ListEquality().equals(bottomBarTypes, expectedTypes), isTrue);
+      expect(bottomBarTypes.any(kebabTypes.contains), isFalse);
+    });
+
+    test('should return correct button types for remote only asset', () {
+      final remoteAsset = createRemoteAsset();
+      final context = ActionButtonContext(
+        asset: remoteAsset,
+        isOwner: true,
+        isArchived: false,
+        isTrashEnabled: true,
+        isInLockedView: false,
+        currentAlbum: null,
+        advancedTroubleshooting: false,
+        isStacked: false,
+        source: ActionSource.viewer,
+        buttonPosition: ButtonPosition.bottomBar,
+      );
+
+      const expectedTypes = [
+        ActionButtonType.share,
+        ActionButtonType.editImage,
+        ActionButtonType.addTo,
+        ActionButtonType.delete,
+      ];
+
+      final bottomBarTypes = ActionButtonBuilder.getViewerBottomBarTypes(context);
+      final kebabTypes = ActionButtonBuilder.getViewerKebabMenuTypes(
+        context.copyWith(buttonPosition: ButtonPosition.kebabMenu),
+      );
+
+      expect(const ListEquality().equals(bottomBarTypes, expectedTypes), isTrue);
+      expect(bottomBarTypes.any(kebabTypes.contains), isFalse);
+    });
+  });
 }

open-api/typescript-sdk/package.json

@@ -19,7 +19,7 @@
     "@oazapfts/runtime": "^1.0.2"
   },
   "devDependencies": {
-    "@types/node": "^24.10.3",
+    "@types/node": "^24.10.1",
     "typescript": "^5.3.3"
   },
   "repository": {

pnpm-lock.yaml

@@ -63,7 +63,7 @@ importers:
         specifier: ^4.13.1
         version: 4.13.4
       '@types/node':
-        specifier: ^24.10.3
+        specifier: ^24.10.1
         version: 24.10.4
       '@vitest/coverage-v8':
         specifier: ^3.0.0
@@ -214,7 +214,7 @@ importers:
         specifier: ^3.4.2
         version: 3.7.1
       '@types/node':
-        specifier: ^24.10.3
+        specifier: ^24.10.1
         version: 24.10.4
       '@types/oidc-provider':
         specifier: ^9.0.0
@@ -299,7 +299,7 @@ importers:
         version: 1.1.0
     devDependencies:
       '@types/node':
-        specifier: ^24.10.3
+        specifier: ^24.10.1
         version: 24.10.4
       typescript:
         specifier: ^5.3.3
@@ -615,7 +615,7 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       '@types/node':
-        specifier: ^24.10.3
+        specifier: ^24.10.1
         version: 24.10.4
       '@types/nodemailer':
         specifier: ^7.0.0
@@ -16567,7 +16567,7 @@ snapshots:
 
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
-      '@types/express-serve-static-core': 5.1.0
+      '@types/express-serve-static-core': 4.19.7
       '@types/node': 24.10.4
 
   '@types/connect@3.4.38':
@@ -16813,7 +16813,7 @@ snapshots:
 
   '@types/pg-pool@2.0.6':
     dependencies:
-      '@types/pg': 8.16.0
+      '@types/pg': 8.15.6
 
   '@types/pg@8.15.6':
     dependencies:

server/package.json

@@ -134,7 +134,7 @@
     "@types/luxon": "^3.6.2",
     "@types/mock-fs": "^4.13.1",
     "@types/multer": "^2.0.0",
-    "@types/node": "^24.10.3",
+    "@types/node": "^24.10.1",
     "@types/nodemailer": "^7.0.0",
     "@types/picomatch": "^4.0.0",
     "@types/pngjs": "^6.0.5",

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

@@ -12,8 +12,6 @@
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -24,6 +22,7 @@
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
   import AlbumSummary from './album-summary.svelte';
+  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -111,7 +110,7 @@
     <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-          <Logo variant={mobileDevice.maxMd ? 'icon' : 'inline'} class="min-w-10" />
+          <Logo variant="inline" class="min-w-min" />
         </a>
       {/snippet}
 

web/src/lib/components/asset-viewer/activity-status.svelte

@@ -2,7 +2,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import type { ActivityResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
-  import { mdiCommentOutline, mdiThumbUp, mdiThumbUpOutline } from '@mdi/js';
+  import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
 
   interface Props {
     isLiked: ActivityResponseDto | null;
@@ -19,7 +19,7 @@
 <div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60">
   <button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}>
     <div class="flex gap-2 items-center justify-center">
-      <Icon icon={isLiked ? mdiThumbUp : mdiThumbUpOutline} size="24" class={isLiked ? 'text-primary' : 'text-fg'} />
+      <Icon icon={isLiked ? mdiHeart : mdiHeartOutline} size="24" class={isLiked ? 'text-red-400' : 'text-fg'} />
       {#if numberOfLikes}
         <div class="text-l">{numberOfLikes.toLocaleString($locale)}</div>
       {/if}

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

@@ -13,7 +13,7 @@
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, toastManager } from '@immich/ui';
-  import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiSend, mdiThumbUp } from '@mdi/js';
+  import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
   import * as luxon from 'luxon';
   import { t } from 'svelte-i18n';
   import UserAvatar from '../shared-components/user-avatar.svelte';
@@ -181,7 +181,7 @@
           {:else if reaction.type === ReactionType.Like}
             <div class="relative">
               <div class="flex py-3 ps-3 mt-3 gap-4 items-center text-sm">
-                <div class="text-primary"><Icon icon={mdiThumbUp} size="20" /></div>
+                <div class="text-red-600"><Icon icon={mdiHeart} size="20" /></div>
 
                 <div class="w-full" title={`${reaction.user.name} (${reaction.user.email})`}>
                   {$t('user_liked', {
@@ -254,7 +254,7 @@
                 shortcut: { key: 'Enter' },
                 onShortcut: () => handleSendComment(),
               }}
-              class="h-4.5 {disabled
+              class="h-[18px] {disabled
                 ? 'cursor-not-allowed'
                 : ''} w-full max-h-56 pe-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
             ></textarea>

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

@@ -9,7 +9,6 @@
   import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -109,7 +108,7 @@
       <ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
         {#snippet leading()}
           <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
-            <Logo variant={mobileDevice.maxMd ? 'icon' : 'inline'} class="min-w-10" />
+            <Logo variant="inline" />
           </a>
         {/snippet}
 

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

@@ -5,7 +5,7 @@
   import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
-  import { ContextMenuButton, MenuItemType, Text } from '@immich/ui';
+  import { Badge, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 
@@ -32,28 +32,6 @@
   };
 
   const { Edit, Copy, Delete } = $derived(getSharedLinkActions($t, sharedLink));
-
-  const capabilities = $derived.by(() => {
-    const items = [];
-
-    if (sharedLink.allowUpload) {
-      items.push($t('upload'));
-    }
-
-    if (sharedLink.allowDownload) {
-      items.push($t('download'));
-    }
-
-    if (sharedLink.showMetadata) {
-      items.push($t('exif'));
-    }
-
-    if (sharedLink.password) {
-      items.push($t('password'));
-    }
-
-    return items;
-  });
 </script>
 
 <div
@@ -66,41 +44,50 @@
   >
     <ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />
 
-    <div class="flex flex-col gap-4 justify-between">
-      <div class="flex flex-col">
-        <Text size="tiny" color={isExpired ? 'danger' : 'muted'} class="font-medium">
-          {#if isExpired}
-            {$t('expired')}
-          {:else if expiresAt}
+    <div class="flex flex-col gap-2">
+      <Text size="large" color="primary" class="flex place-items-center gap-2 break-all">
+        {#if sharedLink.type === SharedLinkType.Album}
+          {sharedLink.album?.albumName}
+        {:else if sharedLink.type === SharedLinkType.Individual}
+          {$t('individual_share')}
+        {/if}
+      </Text>
+
+      <div class="flex flex-wrap gap-1">
+        {#if isExpired}
+          <Badge size="small" color="danger">{$t('expired')}</Badge>
+        {:else if expiresAt}
+          <Badge size="small" color="secondary">
             {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
-          {:else}
-            {$t('expires_date', { values: { date: '∞' } })}
-          {/if}
-        </Text>
+          </Badge>
+        {:else}
+          <Badge size="small" color="secondary">{$t('expires_date', { values: { date: '∞' } })}</Badge>
+        {/if}
 
-        <Text size="large" color="primary" class="flex place-items-center gap-2 break-all font-medium">
-          {#if sharedLink.type === SharedLinkType.Album}
-            {sharedLink.album?.albumName}
-          {:else if sharedLink.type === SharedLinkType.Individual}
-            {$t('individual_share')}
-          {/if}
-        </Text>
+        {#if sharedLink.slug}
+          <Badge size="small" color="secondary">{$t('custom_url')}</Badge>
+        {/if}
 
-        {#if sharedLink.description}
-          <Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
+        {#if sharedLink.allowUpload}
+          <Badge size="small" color="secondary">{$t('upload')}</Badge>
+        {/if}
+
+        {#if sharedLink.showMetadata && sharedLink.allowDownload}
+          <Badge size="small" color="secondary">{$t('download')}</Badge>
+        {/if}
+
+        {#if sharedLink.showMetadata}
+          <Badge size="small" color="secondary">{$t('exif')}</Badge>
+        {/if}
+
+        {#if sharedLink.password}
+          <Badge size="small" color="secondary">{$t('password')}</Badge>
         {/if}
       </div>
 
-      <div class="flex flex-wrap items-center gap-2">
-        {#each capabilities as capability, index (index)}
-          <Text size="small" color="primary" class="font-medium">
-            {capability}
-          </Text>
-          {#if index < capabilities.length - 1}
-            <Text size="small" color="muted">•</Text>
-          {/if}
-        {/each}
-      </div>
+      {#if sharedLink.description}
+        <Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
+      {/if}
     </div>
   </svelte:element>
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">

web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte

@@ -3,7 +3,7 @@
   import { page } from '$app/state';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import SharedLinkCard from '$lib/components/sharedlinks-page/SharedLinkCard.svelte';
+  import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
   import { AppRoute } from '$lib/constants';
   import GroupTab from '$lib/elements/GroupTab.svelte';
   import SharedLinkUpdateModal from '$lib/modals/SharedLinkUpdateModal.svelte';