feat: Add dark mode and album integration
Features: - Dark mode with system preference detection and manual toggle - Album integration via IMMICH_ALBUM_NAME environment variable - Auto-creates album if it doesn't exist - Adds uploaded assets to configured album - Shows album name in connection test - Fixed WebSocket disconnection error Updates: - Enhanced UI with dark mode support for all components - Updated README with new features and screenshot - Added configuration for album name in docker-compose.yml
This commit is contained in:
TTLequals0
75
README.md
75
README.md
@@ -2,6 +2,10 @@
|
||||
|
||||
A tiny, zero-login web app for collecting photos/videos into your **Immich** server.
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- **No accounts** — open the page, drop files, done
|
||||
- **Queue with progress** via WebSocket (success / duplicate / error)
|
||||
- **Duplicate prevention** (local SHA‑1 cache + optional Immich bulk‑check)
|
||||
@@ -9,16 +13,18 @@ A tiny, zero-login web app for collecting photos/videos into your **Immich** ser
|
||||
- **Mobile‑friendly**
|
||||
- **.env‑only config** (clean deploys) + Docker/Compose
|
||||
- **Privacy‑first**: never lists server media; UI only shows the current session
|
||||
- **Dark mode support** — automatically detects system preference, with manual toggle
|
||||
- **Album integration** — auto-adds uploads to a configured album (creates if needed)
|
||||
|
||||
---
|
||||
|
||||
## Table of contents
|
||||
- [Quick start](#Quick_start)
|
||||
- [Quick start](#quick-start)
|
||||
- [New Features](#new-features)
|
||||
- [Architecture](#architecture)
|
||||
- [Folder structure](#folder-structure)
|
||||
- [Requirements](#requirements)
|
||||
- [Configuration (.env)](#configuration-env)
|
||||
- [Quick start (Docker/Compose)](#quick-start-dockercompose)
|
||||
- [How it works](#how-it-works)
|
||||
- [Mobile notes](#mobile-notes)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
@@ -30,8 +36,9 @@ A tiny, zero-login web app for collecting photos/videos into your **Immich** ser
|
||||
## Quick start
|
||||
Copy the docker-compose.yml and the .env file to a common folder,
|
||||
update the .env file before executing the CLI commands to quick start the container.
|
||||
|
||||
### docker-compose.yml
|
||||
```
|
||||
```yaml
|
||||
version: "3.9"
|
||||
|
||||
services:
|
||||
@@ -41,6 +48,10 @@ services:
|
||||
container_name: immich-drop
|
||||
restart: unless-stopped
|
||||
|
||||
# Optional: Set album name for auto-adding uploads
|
||||
environment:
|
||||
IMMICH_ALBUM_NAME: dead-drop # Optional: uploads will be added to this album
|
||||
|
||||
# Load all variables from your repo's .env (PORT, IMMICH_BASE_URL, IMMICH_API_KEY, etc.)
|
||||
env_file:
|
||||
- ./.env
|
||||
@@ -64,6 +75,7 @@ services:
|
||||
volumes:
|
||||
immich_drop_data:
|
||||
```
|
||||
|
||||
### .env
|
||||
|
||||
```
|
||||
@@ -72,18 +84,42 @@ PORT=8080
|
||||
IMMICH_BASE_URL=http://REPLACE_ME:2283/api
|
||||
IMMICH_API_KEY=REPLACE_ME
|
||||
MAX_CONCURRENT=3
|
||||
IMMICH_ALBUM_NAME=dead-drop # Optional: auto-add uploads to this album
|
||||
STATE_DB=/data/state.db
|
||||
```
|
||||
|
||||
### CLI
|
||||
```
|
||||
```bash
|
||||
docker compose pull
|
||||
docker compose up -d
|
||||
```
|
||||
---
|
||||
|
||||
## New Features
|
||||
|
||||
### 🌙 Dark Mode
|
||||
- Automatically detects system dark/light preference on first visit
|
||||
- Manual toggle button in the header (sun/moon icon)
|
||||
- Preference saved in browser localStorage
|
||||
- Smooth color transitions for better UX
|
||||
- All UI elements properly themed for both modes
|
||||
|
||||
### 📁 Album Integration
|
||||
- Configure `IMMICH_ALBUM_NAME` environment variable to auto-add uploads to a specific album
|
||||
- Album is automatically created if it doesn't exist
|
||||
- Efficient caching of album ID to minimize API calls
|
||||
- Visual feedback showing which album uploads are being added to
|
||||
- Works seamlessly with existing duplicate detection
|
||||
|
||||
### 🐛 Bug Fixes
|
||||
- Fixed WebSocket disconnection error that occurred when clients closed connections
|
||||
- Improved error handling for edge cases
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
- **Frontend:** static HTML/JS (Tailwind). Drag & drop or “Choose files”, queue UI with progress and status chips.
|
||||
- **Frontend:** static HTML/JS (Tailwind). Drag & drop or "Choose files", queue UI with progress and status chips.
|
||||
- **Backend:** FastAPI + Uvicorn.
|
||||
- Proxies uploads to Immich `/assets`
|
||||
- Computes SHA‑1 and checks a local SQLite cache (`state.db`)
|
||||
@@ -132,6 +168,9 @@ IMMICH_BASE_URL=http://REPLACE_ME:2283/api
|
||||
IMMICH_API_KEY=REPLACE_ME
|
||||
MAX_CONCURRENT=3
|
||||
|
||||
# Optional: Album name for auto-adding uploads (creates if doesn't exist)
|
||||
IMMICH_ALBUM_NAME=dead-drop
|
||||
|
||||
# Local dedupe cache
|
||||
STATE_DB=./data/state.db # local dev -> ./state.db (data folder is created in docker image)
|
||||
# In Docker this is overridden to /data/state.db by docker-compose.yml
|
||||
@@ -142,23 +181,6 @@ You can keep a checked‑in `/.env.example` with the keys above for onboarding.
|
||||
|
||||
---
|
||||
|
||||
## Quick start (Docker/Compose)
|
||||
|
||||
1) Put your settings in **.env** at the repo root (see below).
|
||||
2) Build & run:
|
||||
|
||||
```bash
|
||||
docker compose build
|
||||
docker compose up -d
|
||||
# open http://localhost:8080
|
||||
```
|
||||
|
||||
A named volume stores `/data/state.db` so duplicates are remembered across container restarts.
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## How it works
|
||||
|
||||
1. **Queue** – Files selected in the browser are queued; each gets a client‑side ID.
|
||||
@@ -168,8 +190,9 @@ A named volume stores `/data/state.db` so duplicates are remembered across conta
|
||||
- `assetData`, `deviceAssetId`, `deviceId`,
|
||||
- `fileCreatedAt`, `fileModifiedAt` (from EXIF when available; else `lastModified`),
|
||||
- `isFavorite=false`, `filename`, and header `x-immich-checksum`.
|
||||
5. **Progress** – Backend streams progress via WebSocket to the same session.
|
||||
6. **Privacy** – UI shows only the current session’s items. It never lists server media.
|
||||
5. **Album** – If `IMMICH_ALBUM_NAME` is configured, adds the uploaded asset to the album (creates album if it doesn't exist).
|
||||
6. **Progress** – Backend streams progress via WebSocket to the same session.
|
||||
7. **Privacy** – UI shows only the current session's items. It never lists server media.
|
||||
|
||||
---
|
||||
|
||||
@@ -183,7 +206,7 @@ A named volume stores `/data/state.db` so duplicates are remembered across conta
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Uploads don’t start on phones / picker re‑opens**
|
||||
**Uploads don't start on phones / picker re‑opens**
|
||||
– Hard‑refresh; current UI suppresses ghost clicks and resets the input.
|
||||
– If using a PWA/WebView, test in Safari/Chrome directly to rule out container quirks.
|
||||
|
||||
@@ -224,4 +247,4 @@ The backend contains docstrings so you can generate docs later if desired.
|
||||
|
||||
## License
|
||||
|
||||
MIT.
|
||||
MIT.
|
||||
Reference in New Issue
Block a user