feat(mobile): add read only mode

[Sud-Puth]

Description

Introduces a "Read-only Mode" feature.

• Read-only Mode state is persisted in app settings.
• Added a new app setting allowUserAvatarOverride to toggle read-only mode via the user avatar icon.
• Updated translations.
• Added a message in the app bar dialog indicating when read-only mode is active.
• When Kid Mode is enabled,
  • Disables selecting the multigrid & the bottom bar
  • Removes the top bar from view

In total just enables the users to give the Immich app on their mobile to their little loved ones without them deleting nor pressing something that they shouldn't have.

How Has This Been Tested?

• Tested using installing the debug app on an Android 16 phone & the SDK emulator

Checklist:

• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR.
• I have confirmed that any new dependencies are strictly necessary.
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code
• All code in src/services/ uses repositories implementations for database calls, filesystem operations, etc.
• All code in src/repositories/ is pretty basic/simple and does not have any immich specific logic (that belongs in src/services/)

[alextran1502]

Thank you for the PR, however, we are likely not going to accept this as it is quite a niche use case

[Sud-Puth]

ha fair enough but can we maybe just see if people want it ? I get it that it's on the app bar settings page where it is very center and distracting but is there somewhere else that I can put this with ? This would really make a nice differentiating feature from all the current apps (not that they can implement it for themselves) but this is coming in from a few folks that I've had interactions with and there is immich which is widely being adopted & my daily driver now. Is there maybe a way just to ask more people either on discord or somewhere else to see if we can have it ?

[alextran1502]

Let's call this a read-only mode, and brainstorm on where to put a quick toggle that is still having a good UI

[bwees]

@Sud-Puth This is great! I had a few ideas on ways we can compromise on feature visibility and quick access to the setting for parents. I am thinking that it would be best to put a toggle in the advanced settings pane that controls the setting. Beneath the title, we can put a little description that explains an easier method to quickly enable/disable it.

That "easier" method would then be something akin to double-tapping the user icon would toggle the read-only mode. We would put a small banner in the user dialog saying "Read-only mode enabled" with a description "Double-tap the user icon to exit". This allows us to keep the user dialog simple while still having a quick way to enable and disable it when a parent gives their phone to their kid.

[Sud-Puth]

@bwees -- love that idea ! will push those changes up soon

[bwees]

Thank you! I will work with you on this to get it polished then we can get Alex for the final review.

[Sud-Puth]

OK so latest update - 2 settings in Advanced & Text notification based in the dialog based on which mode is selected.

[Sud-Puth]

@bwees - give it a whirl now

[bwees]

Thanks for making these changes!

A few notes:

1. Let's make it so the double tap to exit is always enabled. There really isn't a need to have a whole setting just to enable/disable this functionality. We can adjust the explainer text to include information about the hidden double-tap.

2. I think it would be best if the "read only mode enabled" in the user dialog was a little more prominent. Maybe a light red background or red text would be best here.

3. In addition to the text, I think it would be good to show some form of icon to know that you are in readonly mode. Right now when you look at the interface when in readonly mode, there is no clear indication readonly mode is active. Maybe an icon in the top bar or a persistent "Read only mode activated" SnackBar. We should make it clear to the user that readonly mode is active if they accidentally get into the state.

4. There are still icons visible in the bottom of the screen when in readonly mode. We should not show a button if it does not do anything (or show a disabled state) so it does not confuse the user.

This is coming along great. Thanks for working with us to get this ready!

[Sud-Puth]

So I don't like the Red color for background nor text -

• It just deters the look and styling of the application, I just went with the theme colors and I think this is better-
  let me know what you think -
  
  vs
  

2. having the snackbar - cause we call to clear the snackbar on some activities like casting and there maybe other uses for the snackbar that the snackbar is not supposed to be used for, I tried to use materialbanner but it was going to be again too much of a theme digression.
   I opted for a simple - edit_off icon and when the user taps on that - we display the snackbar with the same text as on the dialog page
   

Check the latest commit - 0ae277a

[bwees]

I agree, it doesn't look great with the red. I made some changes to the user dialog message styling to make it fit in with the dialog better. If you could replace the buildReadonlyMessage() with the following:

buildReadonlyMessage() {
      if (isReadonlyModeEnabled) {
        return Padding(
          padding: const EdgeInsets.only(
            left: 10.0,
            right: 10.0,
          ),
          child: ListTile(
            dense: true,
            visualDensity: VisualDensity.standard,
            contentPadding: const EdgeInsets.only(left: 20, right: 20),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            minLeadingWidth: 20,
            tileColor: theme.primaryColor.withAlpha(80),
            title: Text(
              "profile_drawer_readonly_mode",
              style: theme.textTheme.labelLarge?.copyWith(
                color: theme.textTheme.labelLarge?.color?.withAlpha(250),
              ),
              textAlign: TextAlign.center,
            ).tr(),
          ),
        );
      } else {
        return const SizedBox.shrink();
      }

    }

It should looks like this after moving the build to above the action buttons:

Lets also add one more snack bar to the UI so when you double tap the user icon or toggle the switch in advanced settings, it says either the "Read only mode enabled. Double-tap...." or "Read only mode disabled". That way there is a clear indication outside of the icon showing/hiding.

We should also hide the cloud button next to the user avatar when in readonly mode.

This is super close, we are just down to the polishing and user interaction stuff now. Thanks for working through these changes with us!

[Sud-Puth]

@bwees - Check it out - made those updates

[bwees]

Thank you!

I think we are good to hide the select icon for the rows when in readonly. You should be able to add a conditional in group_divider_tile.dart:

immich/mobile/lib/widgets/asset_grid/group_divider_title.dart

Line 72 in 62fa84c

GestureDetector(

I also posted a few code review changes to match our code style a bit better. Once these are complete I think its good for Alex to review!

[Sud-Puth]

@bwees -- Thanks for the review - that makes the code much cleaner & easy to read. I made all those changes in 1 go rather than committing in each time.
Also modified & tested the select on the group_divider_tile - all good now - please check bf175fc

[bwees]

Awesome thanks! I will take a look at this first thing tomorrow and let you know if there are any last changes before final review

[bwees]

Looks like the translation file needs alphabetized, can you run npm run format:i18n from the web directory to make the tests pass?

[Sud-Puth]

@bwees - all done - will monitor for sometime for the checks & will come back later. Thanks for all the things !

[Sud-Puth]

@bwees - one last change for the dart analysis -
The code that I have is https://github.com/immich-app/immich/pull/19368/files#diff-53a59687e96c23aed66051a271aa747b36be4586b84627b1766d0f60df17b23aR276

          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),

• I am changing it to

          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          )

not sure why the local dart analysis wouldn't fail fwiw

[bwees]

@bwees - one last change for the dart analysis - The code that I have is https://github.com/immich-app/immich/pull/19368/files#diff-53a59687e96c23aed66051a271aa747b36be4586b84627b1766d0f60df17b23aR276

          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),

• I am changing it to

          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          )

not sure why the local dart analysis wouldn't fail fwiw

Awesome thanks, we just added DCM rules to out CI actions yesterday so your local machine might not be setup to run them. This should fix it.

[alextran1502]

Just testing the PR, and I have a few comments

1. The info sheet in gallery view still displays the edit options for date, description, and location.
2. Instead of having a cross-out pencil icon button to indicate read-only mode, perhaps changing the color of the app bar would be nicer

[Sud-Puth]

1. Thanks for pointing that out - Made changes to the info sheet on detail panel.
2. What color do we prefer ? I just feel like that it would take the theme of the app into a different state/look. We tried to put the message rather than the icon on the app bar but that also did not look nice. Please let me know.
   

For now I pushed up the update with the cross-out pencil button removed but the app bar having a color change with read-only mode.