refactor(web): on person thumbnail

* fix: upload file without extension

* chore: fix foreground upload

docs/docs/features/mobile-app.mdx

@@ -68,6 +68,56 @@ Now make sure that the local album is selected in the backup screen (steps 1-2 a
   title="Upload button after photos selection"
 />
 
+## Free Up Space
+
+The **Free Up Space** tool allows you to remove local media files from your device that have already been successfully backed up to your Immich server (and are not in the Immich trash). This helps reclaim storage on your mobile device without losing your memories.
+
+### How it works
+
+1.  **Configuration:**
+    - **Cutoff Date:** You can select a cutoff date. The tool will only look for photos and videos **on or before** this date.
+    - **Filter Options:** You can choose to remove **All** assets, or restrict removal to **Photos only** or **Videos only**.
+    - **Keep Favorites:** By default, local assets marked as favorites are preserved on your device, even if they match the cutoff date.
+2.  **Scan & Review:** Before any files are removed, you are presented with a review screen to verify which items will be deleted.
+3.  **Deletion:** Confirmed items are moved to your device's native Trash/Recycle Bin. They will be permanently removed by the OS based on your system settings (usually after 30 days).
+
+:::info Android Permissions
+For the smoothest experience on Android, you should grant Immich special delete privileges. Without this, you may be prompted to confirm deletion for every single image.
+
+Go to **Immich Settings > Advanced** and enable **"Media Management Access"**.
+:::
+
+### iCloud Photos (iOS Users)
+
+If you use **iCloud Photos** alongside Immich, it is vital to understand how deletion affects your data. iCloud utilizes a two-way sync; this means deleting a photo from your iPhone to free up space will **also delete it from iCloud**.
+
+:::warning iCloud & Backups
+If you rely on iCloud as a secondary backup (part of a 3-2-1 backup strategy), using the Free Up Space feature in Immich will remove the file from both your phone and iCloud.
+
+Once deleted, the photo will exist **only** on your Immich server (and your phone's "Recently Deleted" folder for 30 days).
+
+When you use iCloud Photos and delete a photo or video on one device, it's also deleted on all other devices where you're signed in with the same Apple Account.
+
+More information on the [Apple Support](https://support.apple.com/en-us/108922#iCloud_photo_library) website
+
+**Shared Albums**
+Assets that are part of an **iCloud Shared Album** are automatically excluded from the cleanup scan to ensure they remain viewable to others in the shared album.
+:::
+
+### External App Dependencies (WhatsApp, etc.)
+
+:::danger WhatsApp & Local Files
+Android applications like **WhatsApp** rely on local files to display media in chat history.
+
+If Immich backs up your WhatsApp folder and you run **Free Up Space**, the local copies of these images will be deleted. Consequently, **media in your WhatsApp chats will appear blurry or missing.** You will only be able to view these photos inside the Immich app; they will no longer be visible within the WhatsApp interface.
+
+**Recommendation:** If keeping chat history intact is important, please ensure you review the deletion list carefully or consider excluding WhatsApp folders from the backup if you intend to use this feature frequently.
+:::
+
+:::info reclaim storage
+You must empty the system/gallery trash manually to reclaim storage.
+:::
+
 ## Album Sync
 
 You can sync or mirror an album from your phone to the Immich server on your account. For example, if you select Recents, Camera and Videos album for backup, the corresponding album with the same name will be created on the server. Once the assets from those albums are uploaded, they will be put into the target albums automatically.

mobile/lib/presentation/widgets/timeline/fixed/row.dart

@@ -1,45 +1,27 @@
-import 'package:collection/collection.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
-class TimelineRow extends MultiChildRenderObjectWidget {
-  final double height;
-  final List<double> widths;
+class FixedTimelineRow extends MultiChildRenderObjectWidget {
+  final double dimension;
   final double spacing;
   final TextDirection textDirection;
 
-  const TimelineRow({
+  const FixedTimelineRow({
     super.key,
-    required this.height,
-    required this.widths,
+    required this.dimension,
     required this.spacing,
     required this.textDirection,
     required super.children,
   });
 
-  factory TimelineRow.fixed({
-    required double dimension,
-    required double spacing,
-    required TextDirection textDirection,
-    required List<Widget> children,
-  }) => TimelineRow(
-    height: dimension,
-    widths: List.filled(children.length, dimension),
-    spacing: spacing,
-    textDirection: textDirection,
-    children: children,
-  );
-
   @override
   RenderObject createRenderObject(BuildContext context) {
-    return RenderFixedRow(height: height, widths: widths, spacing: spacing, textDirection: textDirection);
+    return RenderFixedRow(dimension: dimension, spacing: spacing, textDirection: textDirection);
   }
 
   @override
   void updateRenderObject(BuildContext context, RenderFixedRow renderObject) {
-    renderObject.height = height;
-    renderObject.widths = widths;
+    renderObject.dimension = dimension;
     renderObject.spacing = spacing;
     renderObject.textDirection = textDirection;
   }
@@ -47,8 +29,7 @@ class TimelineRow extends MultiChildRenderObjectWidget {
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(DoubleProperty('height', height));
-    properties.add(DiagnosticsProperty<List<double>>('widths', widths));
+    properties.add(DoubleProperty('dimension', dimension));
     properties.add(DoubleProperty('spacing', spacing));
     properties.add(EnumProperty<TextDirection>('textDirection', textDirection));
   }
@@ -62,32 +43,21 @@ class RenderFixedRow extends RenderBox
         RenderBoxContainerDefaultsMixin<RenderBox, _RowParentData> {
   RenderFixedRow({
     List<RenderBox>? children,
-    required double height,
-    required List<double> widths,
+    required double dimension,
     required double spacing,
     required TextDirection textDirection,
-  }) : _height = height,
-       _widths = widths,
+  }) : _dimension = dimension,
        _spacing = spacing,
        _textDirection = textDirection {
     addAll(children);
   }
 
-  double get height => _height;
-  double _height;
+  double get dimension => _dimension;
+  double _dimension;
 
-  set height(double value) {
-    if (_height == value) return;
-    _height = value;
-    markNeedsLayout();
-  }
-
-  List<double> get widths => _widths;
-  List<double> _widths;
-
-  set widths(List<double> value) {
-    if (listEquals(_widths, value)) return;
-    _widths = value;
+  set dimension(double value) {
+    if (_dimension == value) return;
+    _dimension = value;
     markNeedsLayout();
   }
 
@@ -116,7 +86,7 @@ class RenderFixedRow extends RenderBox
     }
   }
 
-  double get intrinsicWidth => widths.sum + (spacing * (childCount - 1));
+  double get intrinsicWidth => dimension * childCount + spacing * (childCount - 1);
 
   @override
   double computeMinIntrinsicWidth(double height) => intrinsicWidth;
@@ -125,10 +95,10 @@ class RenderFixedRow extends RenderBox
   double computeMaxIntrinsicWidth(double height) => intrinsicWidth;
 
   @override
-  double computeMinIntrinsicHeight(double width) => height;
+  double computeMinIntrinsicHeight(double width) => dimension;
 
   @override
-  double computeMaxIntrinsicHeight(double width) => height;
+  double computeMaxIntrinsicHeight(double width) => dimension;
 
   @override
   double? computeDistanceToActualBaseline(TextBaseline baseline) {
@@ -148,8 +118,7 @@ class RenderFixedRow extends RenderBox
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(DoubleProperty('height', height));
-    properties.add(DiagnosticsProperty<List<double>>('widths', widths));
+    properties.add(DoubleProperty('dimension', dimension));
     properties.add(DoubleProperty('spacing', spacing));
     properties.add(EnumProperty<TextDirection>('textDirection', textDirection));
   }
@@ -162,25 +131,19 @@ class RenderFixedRow extends RenderBox
       return;
     }
     // Use the entire width of the parent for the row.
-    size = Size(constraints.maxWidth, height);
-
+    size = Size(constraints.maxWidth, dimension);
+    // Each tile is forced to be dimension x dimension.
+    final childConstraints = BoxConstraints.tight(Size(dimension, dimension));
     final flipMainAxis = textDirection == TextDirection.rtl;
-    int childIndex = 0;
-    double currentX = flipMainAxis ? size.width - (widths.firstOrNull ?? 0) : 0;
+    Offset offset = Offset(flipMainAxis ? size.width - dimension : 0, 0);
+    final dx = (flipMainAxis ? -1 : 1) * (dimension + spacing);
     // Layout each child horizontally.
-    while (child != null && childIndex < widths.length) {
-      final width = widths[childIndex];
-      final childConstraints = BoxConstraints.tight(Size(width, height));
+    while (child != null) {
       child.layout(childConstraints, parentUsesSize: false);
       final childParentData = child.parentData! as _RowParentData;
-      childParentData.offset = Offset(currentX, 0);
+      childParentData.offset = offset;
+      offset += Offset(dx, 0);
       child = childParentData.nextSibling;
-      childIndex++;
-
-      if (child != null && childIndex < widths.length) {
-        final nextWidth = widths[childIndex];
-        currentX += flipMainAxis ? -(spacing + nextWidth) : width + spacing;
-      }
     }
   }
 }

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -2,12 +2,10 @@ import 'dart:async';
 import 'dart:math' as math;
 
 import 'package:auto_route/auto_route.dart';
-import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/services/timeline.service.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.page.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail_tile.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
@@ -80,7 +78,6 @@ class FixedSegment extends Segment {
       assetCount: numberOfAssets,
       tileHeight: tileHeight,
       spacing: spacing,
-      columnCount: columnCount,
     );
   }
 }
@@ -90,32 +87,24 @@ class _FixedSegmentRow extends ConsumerWidget {
   final int assetCount;
   final double tileHeight;
   final double spacing;
-  final int columnCount;
 
   const _FixedSegmentRow({
     required this.assetIndex,
     required this.assetCount,
     required this.tileHeight,
     required this.spacing,
-    required this.columnCount,
   });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final isScrubbing = ref.watch(timelineStateProvider.select((s) => s.isScrubbing));
     final timelineService = ref.read(timelineServiceProvider);
-    final isDynamicLayout = columnCount <= (context.isMobile ? 2 : 3);
 
     if (isScrubbing) {
       return _buildPlaceholder(context);
     }
     if (timelineService.hasRange(assetIndex, assetCount)) {
-      return _buildAssetRow(
-        context,
-        timelineService.getAssets(assetIndex, assetCount),
-        timelineService,
-        isDynamicLayout,
-      );
+      return _buildAssetRow(context, timelineService.getAssets(assetIndex, assetCount), timelineService);
     }
 
     return FutureBuilder<List<BaseAsset>>(
@@ -124,7 +113,7 @@ class _FixedSegmentRow extends ConsumerWidget {
         if (snapshot.connectionState != ConnectionState.done) {
           return _buildPlaceholder(context);
         }
-        return _buildAssetRow(context, snapshot.requireData, timelineService, isDynamicLayout);
+        return _buildAssetRow(context, snapshot.requireData, timelineService);
       },
     );
   }
@@ -133,58 +122,23 @@ class _FixedSegmentRow extends ConsumerWidget {
     return SegmentBuilder.buildPlaceholder(context, assetCount, size: Size.square(tileHeight), spacing: spacing);
   }
 
-  Widget _buildAssetRow(
-    BuildContext context,
-    List<BaseAsset> assets,
-    TimelineService timelineService,
-    bool isDynamicLayout,
-  ) {
-    final children = [
-      for (int i = 0; i < assets.length; i++)
-        TimelineAssetIndexWrapper(
-          assetIndex: assetIndex + i,
-          segmentIndex: 0, // For simplicity, using 0 for now
-          child: _AssetTileWidget(
-            key: ValueKey(Object.hash(assets[i].heroTag, assetIndex + i, timelineService.hashCode)),
-            asset: assets[i],
+  Widget _buildAssetRow(BuildContext context, List<BaseAsset> assets, TimelineService timelineService) {
+    return FixedTimelineRow(
+      dimension: tileHeight,
+      spacing: spacing,
+      textDirection: Directionality.of(context),
+      children: [
+        for (int i = 0; i < assets.length; i++)
+          TimelineAssetIndexWrapper(
             assetIndex: assetIndex + i,
+            segmentIndex: 0, // For simplicity, using 0 for now
+            child: _AssetTileWidget(
+              key: ValueKey(Object.hash(assets[i].heroTag, assetIndex + i, timelineService.hashCode)),
+              asset: assets[i],
+              assetIndex: assetIndex + i,
+            ),
           ),
-        ),
-    ];
-
-    final widths = List.filled(assets.length, tileHeight);
-
-    if (isDynamicLayout) {
-      final aspectRatios = assets.map((e) => (e.width ?? 1) / (e.height ?? 1)).toList();
-      final meanAspectRatio = aspectRatios.sum / assets.length;
-
-      // 1: mean width
-      // 0.5: width < mean - threshold
-      // 1.5: width > mean + threshold
-      final arConfiguration = aspectRatios.map((e) {
-        if (e - meanAspectRatio > 0.3) return 1.5;
-        if (e - meanAspectRatio < -0.3) return 0.5;
-        return 1.0;
-      });
-
-      // Normalize to get width distribution
-      final sum = arConfiguration.sum;
-
-      int index = 0;
-      for (final ratio in arConfiguration) {
-        // Distribute the available width proportionally based on aspect ratio configuration
-        widths[index++] = ((ratio * assets.length) / sum) * tileHeight;
-      }
-    }
-
-    return TimelineDragRegion(
-      child: TimelineRow(
-        height: tileHeight,
-        widths: widths,
-        spacing: spacing,
-        textDirection: Directionality.of(context),
-        children: children,
-      ),
+      ],
     );
   }
 }

mobile/lib/presentation/widgets/timeline/segment_builder.dart

@@ -24,7 +24,7 @@ abstract class SegmentBuilder {
     Size size = kTimelineFixedTileExtent,
     double spacing = kTimelineSpacing,
   }) => RepaintBoundary(
-    child: TimelineRow.fixed(
+    child: FixedTimelineRow(
       dimension: size.height,
       spacing: spacing,
       textDirection: Directionality.of(context),

mobile/lib/services/background_upload.service.dart

@@ -285,7 +285,12 @@ class BackgroundUploadService {
       return null;
     }
 
-    final fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+    String fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+    final hasExtension = p.extension(fileName).isNotEmpty;
+    if (!hasExtension) {
+      fileName = p.setExtension(fileName, p.extension(asset.name));
+    }
+
     final originalFileName = entity.isLivePhoto ? p.setExtension(fileName, p.extension(file.path)) : fileName;
 
     String metadata = UploadTaskMetadata(

mobile/lib/services/foreground_upload.service.dart

@@ -315,7 +315,16 @@ class ForegroundUploadService {
         return;
       }
 
-      final fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+      String fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+
+      /// Handle special file name from DJI or Fusion app
+      /// If the file name has no extension, likely due to special renaming template by specific apps
+      /// we append the original extension from the asset name
+      final hasExtension = p.extension(fileName).isNotEmpty;
+      if (!hasExtension) {
+        fileName = p.setExtension(fileName, p.extension(asset.name));
+      }
+
       final originalFileName = entity.isLivePhoto ? p.setExtension(fileName, p.extension(file.path)) : fileName;
       final deviceId = Store.get(StoreKey.deviceId);
 

mobile/lib/widgets/settings/asset_list_settings/asset_list_layout_settings.dart

@@ -1,7 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -25,12 +24,11 @@ class LayoutSettings extends HookConsumerWidget {
           title: "asset_list_layout_sub_title".t(context: context),
           icon: Icons.view_module_outlined,
         ),
-        if (!Store.isBetaTimelineEnabled)
-          SettingsSwitchListTile(
-            valueNotifier: useDynamicLayout,
-            title: "asset_list_layout_settings_dynamic_layout_title".t(context: context),
-            onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
-          ),
+        SettingsSwitchListTile(
+          valueNotifier: useDynamicLayout,
+          title: "asset_list_layout_settings_dynamic_layout_title".t(context: context),
+          onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
+        ),
         SettingsSliderListTile(
           valueNotifier: tilesPerRow,
           text: 'theme_setting_asset_list_tiles_per_row_title'.tr(namedArgs: {'count': "${tilesPerRow.value}"}),

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { websocketEvents } from '$lib/stores/websocket';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { zoomImageToBase64 } from '$lib/utils/people-utils';
@@ -70,8 +70,8 @@
     isShowLoadingPeople = false;
   }
 
-  const onPersonThumbnail = (personId: string) => {
-    assetFaceGenerated.push(personId);
+  const onPersonThumbnailReady = ({ id }: { id: string }) => {
+    assetFaceGenerated.push(id);
     if (
       isEqual(assetFaceGenerated, peopleToCreate) &&
       loaderLoadingDoneTimeout &&
@@ -86,7 +86,6 @@
 
   onMount(() => {
     handlePromiseError(loadPeople());
-    return websocketEvents.on('on_person_thumbnail', onPersonThumbnail);
   });
 
   const isEqual = (a: string[], b: string[]): boolean => {
@@ -184,6 +183,8 @@
   };
 </script>
 
+<OnEvents {onPersonThumbnailReady} />
+
 <section
   transition:fly={{ x: 360, duration: 100, easing: linear }}
   class="absolute top-0 h-full w-90 overflow-x-hidden p-2 dark:text-immich-dark-fg bg-light"

web/src/lib/managers/event-manager.svelte.ts

@@ -44,6 +44,7 @@ export type Events = {
   AlbumUserDelete: [{ albumId: string; userId: string }];
 
   PersonUpdate: [PersonResponseDto];
+  PersonThumbnailReady: [{ id: string }];
 
   BackupDeleteStatus: [{ filename: string; isDeleting: boolean }];
   BackupDeleted: [{ filename: string }];

web/src/lib/stores/websocket.ts

@@ -76,6 +76,7 @@ websocket
   .on('on_new_release', (event) => eventManager.emit('ReleaseEvent', event))
   .on('on_session_delete', () => authManager.logout())
   .on('on_user_delete', (id) => eventManager.emit('UserAdminDeleted', { id }))
+  .on('on_person_thumbnail', (id) => eventManager.emit('PersonThumbnailReady', { id }))
   .on('on_notification', () => notificationManager.refresh())
   .on('connect_error', (e) => console.log('Websocket Connect Error', e));
 

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

@@ -1,15 +1,14 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
   import { Route } from '$lib/route';
-  import { websocketEvents } from '$lib/stores/websocket';
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
   import { AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import { mdiHeart } from '@mdi/js';
-  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
@@ -29,17 +28,17 @@
 
   let hasPeople = $derived(data.response.total > 0);
 
-  onMount(() => {
-    return websocketEvents.on('on_person_thumbnail', (personId: string) => {
-      people.map((person) => {
-        if (person.id === personId) {
-          person.updatedAt = Date.now().toString();
-        }
-      });
-    });
-  });
+  const onPersonThumbnailReady = ({ id }: { id: string }) => {
+    for (const person of people) {
+      if (person.id === id) {
+        person.updatedAt = new Date().toISOString();
+      }
+    }
+  };
 </script>
 
+<OnEvents {onPersonThumbnailReady} />
+
 <UserPageLayout title={data.meta.title}>
   {#if hasPeople}
     <div class="mb-6 mt-2">