263 lines
15 KiB
Markdown
263 lines
15 KiB
Markdown
# Main Navigation
|
|
|
|
This document describes the main app navigation structure and the primary screens.
|
|
|
|
## Tab Navigation
|
|
|
|
The app uses a bottom tab bar with 4 main sections:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ Current Tab Content │
|
|
│ │
|
|
│ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Photos │ Search │ Albums │ Library │
|
|
│ 📷 │ 🔍 │ 📁 │ 📚 │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Tab Indices
|
|
| Index | Tab | Description |
|
|
|-------|-----|-------------|
|
|
| 0 | Photos | Main timeline view |
|
|
| 1 | Search | Smart search and explore |
|
|
| 2 | Albums | Album management |
|
|
| 3 | Library | Collections and utilities |
|
|
|
|
## Photos Tab (Timeline)
|
|
|
|
The primary view showing all photos and videos chronologically.
|
|
|
|
### Screen Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ App Bar [Avatar] ⚙️ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌───────────────────────────────────────────────────────┐ │
|
|
│ │ Memory Lane (Horizontal Scroll) │ │
|
|
│ │ [1 Year] [2 Years] [3 Years] [4 Years] │ │
|
|
│ └───────────────────────────────────────────────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ December 2024 │
|
|
│ ┌─────┬─────┬─────┬─────┐ │
|
|
│ │ │ │ │ │ │
|
|
│ │ 📷 │ 📷 │ 🎥 │ 📷 │ │
|
|
│ │ │ │ │ │ │
|
|
│ ├─────┼─────┼─────┼─────┤ │
|
|
│ │ │ │ │ │ │
|
|
│ │ 📷 │ 📷 │ 📷 │ 🎥 │ │
|
|
│ │ │ │ │ │ │
|
|
│ └─────┴─────┴─────┴─────┘ │
|
|
│ November 2024 │
|
|
│ ... │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Features
|
|
- **Memory Lane**: Shows photos from years past
|
|
- **Grouped by date**: Sections for each month/day
|
|
- **Pull to refresh**: Sync with server
|
|
- **Multi-select**: Long press to select multiple assets
|
|
- **Scroll scrubber**: Quick navigation by date
|
|
|
|
### App Bar Components
|
|
- **User avatar**: Tap to access user menu
|
|
- **Settings icon**: Navigate to settings
|
|
- **Shows backup status**: Indicator when backup active
|
|
|
|
### Memory Lane
|
|
- Horizontal scrollable cards
|
|
- Each card represents photos from X years ago
|
|
- Tapping opens memory viewer
|
|
- Only shows if user has memories enabled
|
|
|
|
## Search Tab
|
|
|
|
Smart search with filters and discovery features.
|
|
|
|
### Screen Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ← Back [ Search photos and videos... ] [Menu] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ [People] [Location] [Camera] [Date] [Type] [Display] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Search Results Grid │
|
|
│ OR │
|
|
│ Empty State with │
|
|
│ Quick Links: │
|
|
│ - Recently Taken │
|
|
│ - Videos │
|
|
│ - Favorites │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Search Types
|
|
| Type | Description | Example |
|
|
|------|-------------|---------|
|
|
| Context | AI-powered semantic search | "sunset on beach" |
|
|
| Filename | Search by filename | "IMG_2024" |
|
|
| Description | Search asset descriptions | "birthday party" |
|
|
| OCR | Search text in images | "receipt" |
|
|
|
|
### Filter Chips
|
|
- **People**: Filter by recognized faces
|
|
- **Location**: Filter by country/state/city
|
|
- **Camera**: Filter by camera make/model
|
|
- **Date**: Date range picker
|
|
- **Media Type**: Images, Videos, or All
|
|
- **Display Options**: Favorites, Archived, Not in Album
|
|
|
|
## Albums Tab
|
|
|
|
View and manage albums.
|
|
|
|
### Screen Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Albums [Grid] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ [Search albums...] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Sort: Recent ▼ [+ Create Album] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
|
│ │ │ │ │ │ │ │
|
|
│ │ [Thumb] │ │ [Thumb] │ │ [Thumb] │ │
|
|
│ │ │ │ │ │ │ │
|
|
│ │ Album 1 │ │ Album 2 │ │ Album 3 │ │
|
|
│ │ 24 items │ │ 12 items │ │ 8 items │ │
|
|
│ │ [Shared] │ │ │ │ │ │
|
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
|
│ │
|
|
│ ┌──────────────┐ ┌──────────────┐ │
|
|
│ │ │ │ │ │
|
|
│ │ [Thumb] │ │ [Thumb] │ │
|
|
│ │ │ │ │ │
|
|
│ │ Album 4 │ │ Album 5 │ │
|
|
│ │ 156 items │ │ 3 items │ │
|
|
│ └──────────────┘ └──────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Album Types
|
|
- **My Albums**: Albums you created
|
|
- **Shared Albums**: Albums shared with you
|
|
- **Local Albums**: Albums on device (not synced)
|
|
|
|
### Sort Options
|
|
- Recently Activity
|
|
- Album Name
|
|
- Most Items
|
|
- Last Modified
|
|
|
|
### Album Card Shows
|
|
- Thumbnail image
|
|
- Album name
|
|
- Item count
|
|
- Shared indicator (if applicable)
|
|
- Owner avatar (if shared)
|
|
|
|
## Library Tab
|
|
|
|
Collection of features and utilities.
|
|
|
|
### Screen Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ App Bar │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
|
│ │ ♥ Favorites │ │ 📦 Archive │ │
|
|
│ └─────────────────────┘ └─────────────────────┘ │
|
|
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
|
│ │ 🔗 Shared Links │ │ 🗑 Trash │ │
|
|
│ └─────────────────────┘ └─────────────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌────────────────────────────────────────────────────────┐ │
|
|
│ │ [People Grid] [Places Map] │ │
|
|
│ │ 4 face thumbnails Map preview │ │
|
|
│ │ │ │
|
|
│ │ People Places │ │
|
|
│ └────────────────────────────────────────────────────────┘ │
|
|
│ ┌────────────────────────────────────────────────────────┐ │
|
|
│ │ [Local Albums Grid] │ │
|
|
│ │ 4 album thumbnails │ │
|
|
│ │ │ │
|
|
│ │ On This Device │ │
|
|
│ └────────────────────────────────────────────────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌────────────────────────────────────────────────────────┐ │
|
|
│ │ 📁 Folders │ │
|
|
│ │ 🔒 Locked Folder │ │
|
|
│ │ 👥 Partners │ │
|
|
│ │ └─ Partner 1's photos │ │
|
|
│ │ └─ Partner 2's photos │ │
|
|
│ └────────────────────────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Quick Access Buttons
|
|
| Button | Description |
|
|
|--------|-------------|
|
|
| Favorites | View all favorited assets |
|
|
| Archive | View archived assets (hidden from timeline) |
|
|
| Shared Links | Manage public sharing links |
|
|
| Trash | View deleted items (before permanent deletion) |
|
|
|
|
### Collection Cards
|
|
- **People**: Face recognition results, shows top 4 faces
|
|
- **Places**: Map thumbnail, opens map view
|
|
- **On This Device**: Local albums on device
|
|
|
|
### Additional Features
|
|
- **Folders**: Browse by folder structure
|
|
- **Locked Folder**: PIN-protected private photos
|
|
- **Partners**: View photos shared by partners
|
|
|
|
## Navigation Guards
|
|
|
|
Routes are protected by guards that check:
|
|
|
|
| Guard | Purpose |
|
|
|-------|---------|
|
|
| AuthGuard | Requires valid authentication |
|
|
| DuplicateGuard | Prevents duplicate route pushes |
|
|
| BackupPermissionGuard | Requires gallery permission for backup |
|
|
| GalleryGuard | Checks gallery access |
|
|
| LockedGuard | Requires PIN for locked folder |
|
|
|
|
## Deep Linking
|
|
|
|
The app supports deep links for:
|
|
- `immich://` scheme for OAuth callbacks
|
|
- `my.immich.app` host for web-to-app links
|
|
- Specific routes like shared albums, memories
|
|
|
|
### Deep Link Examples
|
|
```
|
|
immich://oauth-callback?code=xxx&state=yyy
|
|
https://my.immich.app/share/xxx
|
|
https://my.immich.app/albums/xxx
|
|
```
|
|
|
|
## App Lifecycle
|
|
|
|
The app responds to lifecycle events:
|
|
|
|
| State | Action |
|
|
|-------|--------|
|
|
| Resumed | Refresh data, reconnect WebSocket |
|
|
| Inactive | Pause non-essential operations |
|
|
| Paused | Save state, disconnect WebSocket |
|
|
| Detached | Clean up resources |
|
|
| Hidden | Similar to paused |
|
|
|
|
---
|
|
|
|
[Previous: Authentication & Login](./login-flow.md) | [Next: Timeline & Photos](./timeline.md)
|