Update Favorites UI – My Places

[dmpr0]

Android task osmandapp/OsmAnd#16917

Task order:

1. Update UI – My Places #5292
2. Update Favorites UI – My Places #5293

Favorite, main folder. Figma

Main screen

• Show list of folders
• Tap on the folder, should open new screen with the list of favorite points
• Display Folder menu after long tap on item

NavBar

Main folder	Subfolder

• Title – Favorites
• Subtile
• • My Places - for main folder
• • Previous folder name for subfolders
• Leading action – Back. Go back to Map.
• Trailing actions:
• • Select – open Selection mode
• • Actions – show context menu with actions
• • • Use SF Symbol – ellipsis.circle

Additional

• Show Segmented Control for main Favorites folder
• Show Search bar as last item for Main and Subfodlers

Context menu

List of actions

• Add new folder
• • Icon – ic_custom_folder_add_outlined
• Import – works as now
• • Icon – ic_custom_import_outlined

Grouping

Example

• Use a List with .listStyle(.insetGrouped)
• Wrap the section content inside a DisclosureGroup
• The label of the DisclosureGroup should be styled to look like a prominent section header (large bold text, e.g., .font(.title2).weight(.bold)), and the chevron should point down when expanded
• Pinned - first group. Consists of pinned folders.
• • If 0 folders – hide group
• Visible – second group with the list of visible folders.
• Hidden – third group, containing hidden folders.
• • If 0 folders – hide group
• Apply selected sorting for each section separately.

Statistic

• Show Folder stats in the bottom part of each folder, format: Folders 2, points 38, Size 300 KB.

Sorting menu, Figma

Main folder	Sub folder

The Main Favorites folder can consist only of folders, so it has a reduced list of sorting options:

• Add Sorting button below Segmented view (The same we use in tracks.

Options, for main folder

• Last modified
• Name A – Z
• • Set By default
• Name Z – A
• Newest date first
• Oldest date first

Options for Subfolders:
Subfolders can consist of folders and favourite points, so we will add two additional sorting options.

• Nearest first, icon – ic_custom_sort_near
• Farthest first, ic_custom_sort_far

Folder item

Visible	Pinned	Hidden

• First line: display the folder name.
• • Use italic text style for hidden folders.
• • Max two lines
• Second line: display the date and points quantity, separated by a comma, in the format: 23 Apr, 13 points.
• Default icon – ic_custom_folder.
• • Color works as currently implemented.
• • Use – ic_custom_folder_hidden for hidden folders.
• • Use – ic_custom_folder_pin for pinned folders.
• Open Folder menu on the long tap

Folder menu. Figma

Folder menu	Add to

• Add new option to pin or unpin folder. Pinned folder should be moved inside Pinned group.
• • Pin folder, icon – ic_custom_drawing_pin
• • Unpin folder, icon – ic_custom_drawing_pin_disable
• Add new option Add to, show additional options on tap
• • Map markers – ic_custom_marker.
• • Track, icon – ic_custom_trip. Should allow to add favorites folder to the track
• • Navigation, icon – ic_custom_navigation_outlined
• • show Open track screen on tap
• Change items order:
• • Show on map
• • Pin folder
• • Rename, Appearance
• • Share, Move
• • Add to
• • Delete

Pinned folders:

• Read and store the pin state in <extensions>.

<extensions>
    <osmand:points_groups>
        <group name="personal" icon="special_building" background="circle" pinned="true"/>
    </osmand:points_groups>
</extensions>

Empty states

Main folder	Open folder

Main folder

• Icon – ic_custom_favorites
• Title – Add Favorites
• Description – Import Favorites or add them by marking points on the map.
• Button – Import, open system file picker

Open folder

• Icon – ic_custom_folder_open
• Title – Empty folder
• Description – This folder doesn’t have any points yet.
• Button – Import, open system file picker

Favorite point item

Default	Sort by date	Search

• Icon - without changes, same size.
• First line: show favorite name, max 2 lines

Second line
Items order depend on applied sorting

• Default – ↖︎ Distance • Address • Date. (Applies for all sorting variants except By date)

• • Example ↖︎ 1,56 km • Berlin, Street name • 14.03.2025

• Sorting by date – Date • ↖︎ Distance • Address.

• • Example 14.03.2025 • ↖︎ 1,56 km • Berlin, Street name

• Second line should take only one line.

Iteraction

• Single tap open items opens favorite context menu
• Long tap on item > shows action menu for the point

Search:

• Folder name should be visible in the second line in the search list.

Action menu, Figma

Main	Add to

• Edit – open edit favorite view
• • Icon - ic_custom_edit
• Move – open Select folder view, the same one we use for the Move action in Tracks
• • Icon - ic_custom_folder_move_outlined
• Share – open the default share sheet
• • Icon - ic_custom_export_outlined
• Add to – open submenu
• • Map markers – add the selected point to the markers list
• • • Icon - ic_custom_marker
• • Track – open Select track view, the same one we show on Follow track
• • • Icon - ic_custom_trip
• • Navigation – add the selected point to navigation
• • • Icon - ic_custom_navigation_outlined
• Delete – show confirmation alert
• • Icon - ic_custom_trash_outlined

Confirmation alert

• Title – Delete "[PointName]"?
• Description – This action cannot be undone
• Actions: Delete and Cancel

Search

Search	Empty state

• Show list of all favorites points after open
• Add Select action into ToolBar bottom
• • Tap on action should switch to Selection mode

Empty state:

• Icon – ic_custom_search
• Title – No results
• Description – Adjust your search or filters to see if that helps
• Action – Clear all, clear search phrase and filters.

Selection mode.

Mixed	Folders	Points

ToolBar

Toolbar will show main common actions. Additional actinos will be hiden and will be available depend on selection type: Points, Folders, Mixed selection.

Common actions:

• Share, icon – ic_custom_export_outlined
• Move, icon – ic_custom_folder_move_outlined
• Additional, icon – ic_custom_overflow_menu_stroke
• Delete, icon – ic_custom_trash_outlined

Mixed selection:

• Change Appearance, icon – ic_custom_appearance_outlined
• • Open Change appearance UI
• Add too
• • Show additional list of actions on tap

Folders:

• Hide from map, icon – ic_custom_show_outlined
• Pin folder, icon – ic_custom_drawing_pin
• Change Appearance, icon – ic_custom_appearance_outlined
• Add too
• • Show additional list of actions on tap

Add to:

• Map markers
• Track
• Navigation

Points:

• Change Appearance, icon – ic_custom_appearance_outlined
• Add too
• • Show additional list of actions on tap

Confirmation alert

We’ll need to modify the delete confirmation alert to indicate that different items have been selected.

Points	Folders	Mixed

Points:
Only favorite points are selected.

• Title – Delete 3 favorites? Indicate the quantity of favorites.
• Message – This action cannot be undone.

Folders:
Only folders are selected.

• Title – Delete 3 folders? Indicate the quantity of folders.
• Message – This will delete 3 folders and 34 points. This action cannot be undone. Indicate the quantity of folders and the points within them.

Mixed:
Both folders and points are selected.

• Title – Delete 5 items?
• Message – This will delete 3 folders and 2 points. This action cannot be undone. Indicate the quantity of folders and the total number of points.