Christoph/LockScreenWallpaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(immich): add Immich self-hosted import support

Browse Source 
Adds an ImmichClient for Android to connect to a self-hosted Immich
server, fetch albums and assets, and import selected images locally.
API keys are encrypted with Android Keystore and stored securely.
The plugin now exposes connect, disconnect and import actions and
is documented for Immich import usage.

- Encrypted Immich API keys with Android Keystore
- Exposed connect, disconnect and import actions in the plugin
- Updated docs and metadata to reflect Immich import flow
This commit is contained in:
Christoph
2026-08-21 20:29:26 +02:00
parent 6e43d52680
commit 8e5a53ade8
33 changed files with 1508 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+33
View File
@@ -77,6 +77,39 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.6px; }
.info { margin-top: 28px; padding: 20px; background: #eaf2e8; border-radius: 20px; }
.info h3 { color: var(--green); margin: 0 0 6px; font-size: 16px; }
.info p { margin: 0; font-size: 13px; line-height: 1.55; color: #526158; }
.immich-settings { margin-top: 24px; padding: 18px; border: 1px solid #d5dfd5; border-radius: 20px; background: white; box-shadow: 0 8px 24px rgba(24,56,35,.06); }
.immich-title { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.immich-title > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: white; background: var(--green); }
.immich-title svg { width: 22px; }
.immich-title h3 { margin: 0 0 3px; font-size: 18px; }
.immich-title p { margin: 0; color: #69736c; font-size: 12px; line-height: 1.4; }
.immich-field { display: block; margin-top: 13px; }
.immich-field > span { display: block; margin-bottom: 6px; color: #526158; font-size: 11px; font-weight: 750; }
.immich-field > div { position: relative; }
.immich-field svg { position: absolute; left: 12px; top: 50%; width: 17px; color: #63806b; transform: translateY(-50%); }
.immich-field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #c7d4c9; border-radius: 12px; color: #18201b; background: #fbfcfa; font-size: 13px; }
.immich-field div input { padding-left: 38px; }
.immich-field input:focus { outline: 2px solid rgba(20,93,50,.18); border-color: var(--green); }
.immich-help, .immich-warning { margin: 7px 2px 0; color: #748078; font-size: 10px; line-height: 1.4; }
.immich-warning { padding: 8px 10px; border-radius: 9px; color: #795518; background: #fff4d7; }
.immich-connect, .immich-open { width: 100%; height: 48px; margin-top: 15px; border: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; background: var(--green); font-size: 13px; font-weight: 800; }
.immich-connect:disabled, .immich-open:disabled, .immich-disconnect:disabled { opacity: .55; }
.immich-connect svg, .immich-open svg, .immich-disconnect svg { width: 18px; }
.immich-open svg:last-child { margin-left: auto; }
.immich-open { padding: 0 14px; }
.immich-connected { padding: 12px; border-radius: 12px; background: var(--sage); display: flex; flex-direction: column; gap: 3px; }
.immich-connected strong { color: var(--green); font-size: 12px; }
.immich-connected span { overflow: hidden; color: #647069; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.immich-disconnect { width: 100%; height: 40px; margin-top: 8px; border: 0; border-radius: 11px; color: #7a3434; background: #f5eaea; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; font-weight: 750; }
.immich-header .import-selection { color: white; background: var(--green); }
.immich-browser { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.immich-album-filter { display: block; margin-bottom: 10px; }
.immich-album-filter > span { display: block; margin: 0 0 6px 2px; color: #6a756d; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .8px; }
.immich-album-filter select { width: 100%; height: 45px; padding: 0 38px 0 12px; border: 1px solid #c8d5ca; border-radius: 13px; color: var(--green); background: white; font-size: 13px; font-weight: 750; }
.immich-grid article { aspect-ratio: 1; }
.immich-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #78907d; background: var(--sage); }
.immich-placeholder svg { width: 28px; }
.immich-import { position: sticky; z-index: 4; bottom: max(16px, env(safe-area-inset-bottom)); margin-bottom: 0; box-shadow: 0 10px 30px rgba(20,93,50,.3); }
nav { position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); height: calc(76px + env(safe-area-inset-bottom)); padding: 8px 34px env(safe-area-inset-bottom); background: rgba(248,250,247,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
nav button { border: 0; color: #657068; background: transparent; border-radius: 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; font-size: 11px; font-weight: 650; }
nav button.active { color: var(--green); background: var(--sage); }