cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #509 from AtalayaLabs/chore/remove-legacy-frontend

Browse Source 
chore(frontend): remove the legacy vanilla-JS frontend and its tooling
This commit is contained in:
Dionisio Pozo
2026-06-21 03:26:33 +02:00
committed by GitHub
parent 6be3c99580 54639d466a
commit 5bf81e4653
211 changed files with 171 additions and 53965 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.dockerignore
+1 -1
View File
@@ -27,7 +27,7 @@ LICENSE
CODEOWNERS CODEOWNERS
# Project assets and tooling not needed by the build # Project assets and tooling not needed by the build
# (the Dockerfile only COPYs src, static, migrations, templates, build.rs, # (the Dockerfile only COPYs src, migrations, templates, build.rs,
# Cargo.*, and entrypoint.sh; everything else is dead weight in the context) # Cargo.*, and entrypoint.sh; everything else is dead weight in the context)
images/ images/
charts/ charts/
Cargo.lock
Generated
+51 -1050
View File
File diff suppressed because it is too large Load Diff
Cargo.toml
-9
View File
@@ -123,15 +123,6 @@ path = "src/bin/load-seed.rs"
# and load-nightly.yml build it explicitly with --features load_seed_bin. # and load-nightly.yml build it explicitly with --features load_seed_bin.
required-features = ["load_seed_bin"] required-features = ["load_seed_bin"]
[build-dependencies]
oxc_allocator = "0.125.0"
oxc_parser = "0.125.0"
oxc_semantic = "0.125.0"
oxc_span = "0.125.0"
oxc_codegen = "0.125.0"
oxc_minifier = "0.125.0"
lightningcss = "1.0.0-alpha.71"
[profile.release] [profile.release]
lto = "thin" lto = "thin"
codegen-units = 1 codegen-units = 1
Dockerfile
+4 -6
View File
@@ -20,9 +20,8 @@ RUN npm run build
FROM base AS cacher FROM base AS cacher
WORKDIR /app WORKDIR /app
COPY Cargo.toml Cargo.lock ./ COPY Cargo.toml Cargo.lock ./
# build.rs + static/ are needed so the build script can run and set OUT_DIR # build.rs runs during the dependency build; it only injects git metadata.
COPY build.rs ./ COPY build.rs ./
COPY static static
# Create a minimal project to download and cache dependencies # Create a minimal project to download and cache dependencies
RUN mkdir -p src/bin && \ RUN mkdir -p src/bin && \
echo 'fn main() { println!("Dummy build for caching dependencies"); }' > src/main.rs && \ echo 'fn main() { println!("Dummy build for caching dependencies"); }' > src/main.rs && \
@@ -37,10 +36,9 @@ WORKDIR /app
# Copy cached dependencies (only target dir and cargo registry) # Copy cached dependencies (only target dir and cargo registry)
COPY --from=cacher /app/target target COPY --from=cacher /app/target target
COPY --from=cacher /usr/local/cargo/registry /usr/local/cargo/registry COPY --from=cacher /usr/local/cargo/registry /usr/local/cargo/registry
# Copy source, build script, and static assets # Copy source, build script, and migrations
COPY Cargo.toml Cargo.lock build.rs ./ COPY Cargo.toml Cargo.lock build.rs ./
COPY src src COPY src src
COPY static static
COPY migrations migrations COPY migrations migrations
# askama templates — read at *compile time* by the derive macro, so # askama templates — read at *compile time* by the derive macro, so
# they must be present in the build stage even though they're embedded # they must be present in the build stage even though they're embedded
@@ -52,8 +50,8 @@ ARG DATABASE_URL="postgres://postgres:postgres@localhost/oxicloud"
# test-only bins (e.g. load-seed) even if `required-features` gating # test-only bins (e.g. load-seed) even if `required-features` gating
# changes upstream. # changes upstream.
RUN DATABASE_URL="${DATABASE_URL}" cargo build --release --bin oxicloud --bin generate-openapi --bin migrate-nfc-filenames RUN DATABASE_URL="${DATABASE_URL}" cargo build --release --bin oxicloud --bin generate-openapi --bin migrate-nfc-filenames
# The SPA is built by the frontend stage; bring it in for the runtime copy below. # The SPA is built by the Vite frontend stage; bring it in for the runtime copy
# (build.rs no longer generates static-dist unless OXICLOUD_RUST_ASSETS=1.) # below (build.rs has no asset pipeline — it only injects git metadata).
COPY --from=frontend /static-dist ./static-dist COPY --from=frontend /static-dist ./static-dist
# ─── Stage 4: Minimal runtime image ────────────────────────────────────────── # ─── Stage 4: Minimal runtime image ──────────────────────────────────────────
biome.json
-63
View File
@@ -1,63 +0,0 @@
{
"assist": {
"actions": {
"source": {
"organizeImports": "on"
}
}
},
"files": {
"includes": ["static/**/*.js", "static/**/*.css", "static/**/*.json", "!static/js/vendors"]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 4,
"lineWidth": 160,
"lineEnding": "lf"
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"correctness": {
"noUnusedVariables": "warn",
"noUndeclaredVariables": "error",
"noUnreachable": "warn",
"noUnsafeFinally": "error"
},
"nursery": {
"useExplicitType": "error"
},
"security": {
"noGlobalEval": "error"
},
"style": {
"noDescendingSpecificity": "off"
},
"complexity": {
"noImportantStyles": "off"
}
}
},
"javascript": {
"formatter": {
"indentStyle": "space",
"indentWidth": 4,
"quoteStyle": "single",
"semicolons": "always",
"trailingCommas": "none",
"bracketSameLine": false,
"bracketSpacing": true,
"operatorLinebreak": "after"
}
},
"css": {
"linter": {
"enabled": true
},
"formatter": {
"enabled": true
}
}
}
build.rs
+5 -1196
View File
File diff suppressed because it is too large Load Diff
docs/DESIGN-SYSTEM.md
+6 -6
View File
@@ -9,7 +9,7 @@ and [UIUX-ROADMAP.md](UIUX-ROADMAP.md) (the work plan).
## 1. Design tokens ## 1. Design tokens
Everything visual routes through a token in Everything visual routes through a token in
[`static/css/base/variables.css`](../static/css/base/variables.css). Six scales, [`static/css/base/variables.css`](../frontend/src/lib/styles/base/variables.css). Six scales,
plus a curated color system. **Never hand-write a raw px/hex for these** — consume plus a curated color system. **Never hand-write a raw px/hex for these** — consume
a token so the next change happens in one place. a token so the next change happens in one place.
@@ -40,7 +40,7 @@ These are enforced/aided by CI scripts and must hold for every new surface.
- **Keyboard.** Everything interactive is reachable and operable by keyboard. - **Keyboard.** Everything interactive is reachable and operable by keyboard.
Use `<button>`/`<a>` (not clickable `<div>`s). Nav exposes `aria-current="page"`. Use `<button>`/`<a>` (not clickable `<div>`s). Nav exposes `aria-current="page"`.
- **Focus.** A global `:focus-visible` ring lives in - **Focus.** A global `:focus-visible` ring lives in
[`base/a11y.css`](../static/css/base/a11y.css). Never `outline: none` without a [`base/a11y.css`](../frontend/src/lib/styles/base/a11y.css). Never `outline: none` without a
paired `:focus-visible` style. Mouse focus stays ring-free; keyboard focus never. paired `:focus-visible` style. Mouse focus stays ring-free; keyboard focus never.
- **Contrast.** Every text/background pair clears 4.5:1 in **light AND dark** — - **Contrast.** Every text/background pair clears 4.5:1 in **light AND dark** —
`node scripts/check-contrast.mjs` fails the build otherwise. `node scripts/check-contrast.mjs` fails the build otherwise.
@@ -52,7 +52,7 @@ These are enforced/aided by CI scripts and must hold for every new surface.
globally. Also honor `prefers-contrast` and `forced-colors`. globally. Also honor `prefers-contrast` and `forced-colors`.
- **Dialogs.** `role="dialog"` + `aria-modal` + `aria-labelledby`, focus trapped - **Dialogs.** `role="dialog"` + `aria-modal` + `aria-labelledby`, focus trapped
while open, focus restored to the trigger on close (see while open, focus restored to the trigger on close (see
[`modal.js`](../static/js/components/modal.js)). [`modal.js`](../frontend/src/lib/components/Modal.svelte)).
- **Icon-only buttons.** Always an `aria-label`; decorative icons get - **Icon-only buttons.** Always an `aria-label`; decorative icons get
`aria-hidden="true"`. `aria-hidden="true"`.
- **Touch targets.** ≥44×44px on phones. - **Touch targets.** ≥44×44px on phones.
@@ -61,7 +61,7 @@ These are enforced/aided by CI scripts and must hold for every new surface.
## 3. Brand ## 3. Brand
- **Mark.** The cloud glyph ([`logo-plain.svg`](../static/logo/logo-plain.svg)). - **Mark.** The cloud glyph ([`logo-plain.svg`](../frontend/static/logo/logo-plain.svg)).
Always rendered from the real SVG (never a stock `fa-cloud`). On surfaces it Always rendered from the real SVG (never a stock `fa-cloud`). On surfaces it
sits in an accent-gradient tile via the `.brand-mark` component. sits in an accent-gradient tile via the `.brand-mark` component.
- **Wordmark.** "OxiCloud", weight 700, tight tracking. The accent-coloured - **Wordmark.** "OxiCloud", weight 700, tight tracking. The accent-coloured
@@ -74,8 +74,8 @@ These are enforced/aided by CI scripts and must hold for every new surface.
the mark; don't render the wordmark below ~16px. the mark; don't render the wordmark below ~16px.
- **Don't:** recolor the mark, stretch it, place it on a low-contrast background, - **Don't:** recolor the mark, stretch it, place it on a low-contrast background,
or introduce a second "primary" hue. or introduce a second "primary" hue.
- **Maskable / OG.** [`logo-maskable.svg`](../static/logo/logo-maskable.svg) (PWA, - **Maskable / OG.** [`logo-maskable.svg`](../frontend/static/logo/logo-maskable.svg) (PWA,
safe-zone) and [`og-image.svg`](../static/logo/og-image.svg) (social). Export safe-zone) and [`og-image.svg`](../frontend/static/logo/og-image.svg) (social). Export
both to PNG for full platform support (see roadmap). both to PNG for full platform support (see roadmap).
--- ---
docs/TOKENS.md
+30 -8
View File
@@ -1,9 +1,9 @@
# Design tokens # Design tokens
> Auto-generated from `static/css/base/variables.css` by `scripts/gen-token-docs.mjs`. > Auto-generated from `frontend/src/lib/styles/base/variables.css` by `scripts/gen-token-docs.mjs`.
> Do not edit by hand — re-run the generator after changing tokens. > Do not edit by hand — re-run the generator after changing tokens.
**430 tokens** across 20 groups. **447 tokens** across 21 groups.
## Spacing (4px grid) ## Spacing (4px grid)
@@ -175,16 +175,16 @@
| `--color-text` | `light-dark(#2d3748, #e2e8f0)` | | `--color-text` | `light-dark(#2d3748, #e2e8f0)` |
| `--color-text-heading` | `light-dark(#1e293b, #f1f5f9)` | | `--color-text-heading` | `light-dark(#1e293b, #f1f5f9)` |
| `--color-text-secondary` | `light-dark(#475569, #cbd5e1)` | | `--color-text-secondary` | `light-dark(#475569, #cbd5e1)` |
| `--color-text-muted` | `light-dark(#5e6a78, #9fadbe)` | | `--color-text-muted` | `light-dark(#586472, #b2c0d0)` |
| `--color-text-subtle` | `light-dark(#5e6a78, #9fadbe)` | | `--color-text-subtle` | `light-dark(#5e6a78, #a6b4c6)` |
| `--color-text-faint` | `light-dark(#5e6a78, #9fadbe)` | | `--color-text-faint` | `light-dark(#647082, #9fadbe)` |
| `--color-text-dark` | `var(--color-text-secondary)` | | `--color-text-dark` | `var(--color-text-secondary)` |
| `--color-text-dim` | `var(--color-text-secondary)` | | `--color-text-dim` | `var(--color-text-secondary)` |
| `--color-text-black` | `var(--color-text)` | | `--color-text-black` | `var(--color-text)` |
| `--color-text-gray` | `var(--color-text-muted)` | | `--color-text-gray` | `var(--color-text-muted)` |
| `--color-text-medium` | `var(--color-text-muted)` | | `--color-text-medium` | `var(--color-text-muted)` |
| `--color-text-faint2` | `var(--color-text-faint)` | | `--color-text-faint2` | `var(--color-text-faint)` |
| `--color-text-light` | `var(--color-text-faint)` | | `--color-text-light` | `var(--color-on-accent)` |
| `--color-text-placeholder` | `var(--color-text-faint)` | | `--color-text-placeholder` | `var(--color-text-faint)` |
| `--color-text-navy` | `#1a1a2e` | | `--color-text-navy` | `#1a1a2e` |
@@ -238,6 +238,8 @@
| `--color-accent-ring-strong` | `rgba(255, 94, 58, 0.2)` | | `--color-accent-ring-strong` | `rgba(255, 94, 58, 0.2)` |
| `--color-accent-ring-xl` | `rgba(255, 94, 58, 0.4)` | | `--color-accent-ring-xl` | `rgba(255, 94, 58, 0.4)` |
| `--color-accent-ring-xs` | `rgba(255, 94, 58, 0.05)` | | `--color-accent-ring-xs` | `rgba(255, 94, 58, 0.05)` |
| `--color-accent-glow` | `rgba(255, 94, 58, 0.2)` |
| `--color-accent-glow-soft` | `rgba(255, 94, 58, 0.1)` |
| `--color-primary` | `var(--color-accent)` | | `--color-primary` | `var(--color-accent)` |
| `--color-primary-hover` | `var(--color-accent-hover)` | | `--color-primary-hover` | `var(--color-accent-hover)` |
| `--color-accent-second` | `#ff2d55` | | `--color-accent-second` | `#ff2d55` |
@@ -452,13 +454,14 @@
| Token | Value | | Token | Value |
| --- | --- | | --- | --- |
| `--color-scrim-control` | `light-dark(rgba(255, 255, 255, 0.92), rgba(15, 23, 42, 0.82))` |
| `--color-item` | `var(--color-bg-surface)` | | `--color-item` | `var(--color-bg-surface)` |
| `--color-item-hover` | `var(--color-bg-hover)` | | `--color-item-hover` | `var(--color-bg-hover)` |
| `--color-item-active` | `light-dark(#f8d2ae, #5a5047)` | | `--color-item-active` | `light-dark(#f8d2ae, #5a5047)` |
| `--color-item-selected` | `light-dark(#fff8f6, #39281a)` | | `--color-item-selected` | `light-dark(#fff8f6, #39281a)` |
| `--color-item-hover-accent` | `light-dark(#fff0ec, #3d342c)` | | `--color-item-hover-accent` | `light-dark(#fff0ec, #3d342c)` |
| `--color-item-hover-blue` | `#f0f8ff` | | `--color-item-hover-blue` | `light-dark(#f0f8ff, #18293f)` |
| `--color-item-hover-sky` | `#e0f2fe` | | `--color-item-hover-sky` | `light-dark(#e0f2fe, #103048)` |
| `--color-multiselect-bg` | `#1e293b` | | `--color-multiselect-bg` | `#1e293b` |
| `--color-multiselect-border` | `#334155` | | `--color-multiselect-border` | `#334155` |
| `--color-multiselect-text` | `#ffffff` | | `--color-multiselect-text` | `#ffffff` |
@@ -535,3 +538,22 @@
| `--color-music-public-bg` | `rgba(74, 144, 217, 0.12)` | | `--color-music-public-bg` | `rgba(74, 144, 217, 0.12)` |
| `--color-video-play` | `#ffffff` | | `--color-video-play` | `#ffffff` |
| `--color-video-play-shadow` | `#000000` | | `--color-video-play-shadow` | `#000000` |
## Other
| Token | Value |
| --- | --- |
| `--brand-ambient` | `radial-gradient(55% 50% at 8% 4%, var(--color-accent-glow), transparent 60%), radial-gradient(55% 55% at 95% 98%, var(--color-accent-glow), transparent 58%), radial-gradient(48% 48% at 88% 12%, var(--color-accent-glow-soft), transparent 55%), radial-gradient(50% 45% at 6% 92%, var(--color-accent-glow-soft), transparent 55%), radial-gradient(78% 64% at 50% 33%, var(--color-bg-surface), transparent 70%), var(--color-bg-page)` |
| `--brand-grain` | `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>")` |
| `--file-kind-folder` | `light-dark(#3b82f6, #60a5fa)` |
| `--file-kind-pdf` | `light-dark(#ef4444, #f87171)` |
| `--file-kind-doc` | `light-dark(#2563eb, #60a5fa)` |
| `--file-kind-sheet` | `light-dark(#16a34a, #4ade80)` |
| `--file-kind-slides` | `light-dark(#ea580c, #fb923c)` |
| `--file-kind-archive` | `light-dark(#d97706, #fbbf24)` |
| `--file-kind-code` | `light-dark(#7c3aed, #a78bfa)` |
| `--file-kind-image` | `light-dark(#0891b2, #22d3ee)` |
| `--file-kind-video` | `light-dark(#c026d3, #e879f9)` |
| `--file-kind-audio` | `light-dark(#db2777, #f472b6)` |
| `--file-kind-text` | `light-dark(#475569, #94a3b8)` |
| `--file-kind-generic` | `light-dark(#64748b, #94a3b8)` |
docs/plan/External-User.md
-315
View File
@@ -1,315 +0,0 @@
# Plan — Magic-link external authentication
## Context
The UserLifecycleHook plan (PRs 1-5) shipped: `is_external` flag, `User::new_external`, lifecycle dispatcher with five hooks, `ExternalIdentityLifecycleHook` registered as a no-op stub awaiting this work. The DB CHECK `users_external_no_storage` and `users_external_not_admin` are in place. The `auth.users` table can already hold external recipients; nothing addresses them yet.
This plan implements the recipient-side flow: an internal user shares a resource by email; the server resolves the email to an existing user OR creates an external user on the fly; an invitation email is sent; the recipient clicks the magic link and lands on the resource (deep link) or on `/shared-with-me` (generic email login). External users have no password and authenticate exclusively via magic link until they later set a credential (password / OIDC / future webauthn), at which point magic-link silently becomes unavailable for that account.
The end state: OxiCloud can share with people who don't have accounts yet, with the same authz semantics as any other grant; the sharer cannot enumerate who already has an account (uniform API response shape); admin holds a kill switch (`OXICLOUD_ALLOW_EXTERNAL_USERS=false`).
## Design decisions (locked in)
### Security model — "Option A, nuanced"
A user is **magic-link-eligible** iff they have no other authentication method configured. Encapsulated in:
```rust
impl User {
pub fn has_login_credential(&self) -> bool {
self.password_hash != "__EXTERNAL_NO_PASSWORD__"
&& self.password_hash != "__OIDC_NO_PASSWORD__"
|| self.oidc_subject.is_some()
}
}
```
The placeholder-string approach is a known smell — a proper `auth.user_auth_methods` side-table is the future evolution path, listed in "Future work" below. Today every magic-link-eligibility check goes through `has_login_credential()`, so the migration to the side-table only touches that method's body.
State graph (verified by `has_login_credential()`):
| State | password_hash | oidc_subject | Magic-link eligible |
|---|---|---|---|
| External, freshly invited | `__EXTERNAL_NO_PASSWORD__` | NULL | yes |
| External who set password | real argon2 hash | NULL | no |
| External who linked OIDC | `__OIDC_NO_PASSWORD__` | set | no |
| Internal, password | real argon2 hash | NULL | no |
| Internal, OIDC-only | `__OIDC_NO_PASSWORD__` | set | no |
Internal users who receive a "Bob shared FILE with you" mail get a notification-only link that deep-links to the OxiCloud login page with a return URL — no auto-auth, no mailbox-as-2FA-bypass.
### Identity: username = email for external users
- External users get `username = normalized_email`.
- `auth.users.username` length cap widened from 32 to 254 (RFC 5321 maximum).
- Login form accepts username OR email; lookup tries `username` first, falls back to `email`.
- Username becomes mutable (post-create), via a new endpoint. The home folder name (`"My Folder - alice"`) is **not** renamed when username changes — it was display text at creation; semantically the folder is owned by `user_id`.
- New columns `auth.users.given_name` and `auth.users.family_name`, both `TEXT NULL` — populated from OIDC standard claims at JIT provisioning; external users get NULL initially; users can set them later via a profile-edit endpoint.
### Email normalization
```rust
fn normalize_email(input: &str) -> Result<String, ValidationError> {
let trimmed = input.trim();
let (local, domain) = trimmed.rsplit_once('@').ok_or(Malformed)?;
let local_lower = local.to_lowercase();
let domain_ascii = idna::domain_to_ascii(&domain.to_lowercase())
.map_err(|_| InvalidDomain)?;
Ok(format!("{}@{}", local_lower, domain_ascii))
}
```
Stored form is always ASCII (punycode for IDN domains). UI can reverse for display via `idna::domain_to_unicode`. Local-part case-folding to lower; Gmail `+tag` and `.` insensitivity are NOT special-cased (treat strings as opaque post-normalization).
### Internal virtual group finally narrowed
`pg_acl_engine.rs::expand_user` today inserts `INTERNAL_GROUP_ID` unconditionally with a TODO: *"Once the external-users work lands this will narrow to `if !user.is_external { ... }`."* Now's the time. External users do NOT belong to the Internal virtual group. The group's name finally honours its semantics.
### Magic-link tokens — mirror `auth.device_codes`
The closest existing pattern is `auth.device_codes` (entity at `src/domain/entities/device_code.rs`, repo at `src/infrastructure/repositories/pg/device_code_pg_repository.rs`). Status enum with PostgreSQL custom type, plain-text token, indexed on `expires_at WHERE pending`, `delete_expired()` cleanup helper. Copy verbatim.
New table:
```sql
CREATE TYPE auth.magic_link_status AS ENUM ('pending', 'used', 'expired');
CREATE TABLE auth.magic_link_tokens (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
token TEXT NOT NULL UNIQUE, -- 32 random bytes, base64url
user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
status auth.magic_link_status NOT NULL DEFAULT 'pending',
issued_at TIMESTAMPTZ NOT NULL DEFAULT now(),
expires_at TIMESTAMPTZ NOT NULL,
used_at TIMESTAMPTZ,
-- Optional deep-link target. NULL → generic "login via email" flow,
-- lands on /shared-with-me. NOT NULL → invitation, lands directly.
resource_type TEXT CHECK (resource_type IN ('file', 'folder')),
resource_id UUID,
CHECK ((resource_type IS NULL) = (resource_id IS NULL))
);
CREATE INDEX ON auth.magic_link_tokens (expires_at) WHERE status = 'pending';
CREATE INDEX ON auth.magic_link_tokens (user_id, status);
```
Token lifetime: env-driven `OXICLOUD_MAGIC_LINK_TTL_HOURS` (default 24).
### Sharing flow extends `POST /api/grants`
New shape for the request body's `subject`:
```json
{
"subject": { "type": "email", "email": "Alice@Example.COM" },
"resource": { "type": "folder", "id": "..." },
"role": "viewer",
"expires_at": "...",
"notify": true,
"message": "Hi Alice, here's the report."
}
```
Server flow (uniform response shape to defeat enumeration):
1. Validate `email` regex.
2. Normalize (lowercase + punycode).
3. Look up by normalized email (case-insensitive query against `auth.users.email`).
4. If found: use existing `user_id`. If not: respect `OXICLOUD_ALLOW_EXTERNAL_USERS`. If false: 403. Else: `User::new_external(email_as_username, email)` and `dispatch_created`.
5. Build grant with `subject = User(uuid)`.
6. If `notify` (required `true` in v1): issue magic-link token targeting the resource, send email via `EmailSender` port.
7. Return standard `GrantDto` with the resolved `user_id`.
Latency is the enumeration risk: existing user is a single SELECT; new user is SELECT + INSERT + INSERT + SMTP. The SMTP send goes through `tokio::spawn` (fire-and-forget) so the API response timing doesn't differ meaningfully between the two paths. Server logs the SMTP failure (if any) but the response stays uniform.
`notify = false` is rejected with 400 in v1 (no way for the recipient to access otherwise). Reserved for future "I'll send the URL myself via Slack" flow.
### Landing UX
```
Magic link in invitation mail (resource_type/id NOT NULL)
↓
/magic/v1/{token}
↓ (validate, mark used, emit session)
↓
Redirect to /folders/{id} or /files/{id} — direct to the resource
```
```
"Login via email" form on /login (user types their email)
↓
POST /api/auth/magic-link/send (uniform response)
↓ (if user has no credential, issue token with NULL resource, send mail)
↓
User clicks /magic/v1/{token}
↓ (validate, mark used, emit session)
↓
Redirect to /shared-with-me — their home for incoming grants
```
Same redemption endpoint, different landing logic keyed on whether the token has a resource target.
### Configuration
```
OXICLOUD_SMTP_HOST=smtp.example.com
OXICLOUD_SMTP_PORT=587
OXICLOUD_SMTP_USER=oxicloud@example.com
OXICLOUD_SMTP_PASS=...
OXICLOUD_SMTP_FROM="OxiCloud <noreply@example.com>"
OXICLOUD_SMTP_TLS=starttls # starttls | tls | none
OXICLOUD_MAGIC_LINK_TTL_HOURS=24
OXICLOUD_ALLOW_EXTERNAL_USERS=true # set false to disable the whole feature
OXICLOUD_PUBLIC_URL=https://oxicloud.example.com # for building link URLs
```
`EmailSender` is `Option<Arc<dyn EmailSender>>` in DI — `None` when SMTP isn't configured. Endpoints that require email return 503 in that state with a clear "SMTP not configured" message.
### Rate limits
Reusing the existing `RateLimiter` at `src/interfaces/middleware/rate_limit.rs` (moka cache + counter, sliding window). Two new limiters:
- **Per-sharer email invitation**: 50 / hour, keyed by `caller_id`. Defends against an admin or compromised account spamming invites.
- **Per-target-email resend**: 5 / hour, keyed by the normalized email being resent to. Defends against the resend endpoint being used as an email-bombing primitive.
### Defense in depth — boundary protections for external users
External users are a new principal kind. Several existing surfaces implicitly assume "all users are internal employees of this instance" and would leak / over-share once externals show up. **PR 6 closes all of these gaps** (alongside the schema groundwork) so subsequent PRs in this sequence don't accidentally surface external users where they don't belong.
**Already protected (by PR 2 of the lifecycle work — verified)**:
- DB CHECK `users_external_not_admin`: an external user cannot hold admin role. Three-layer enforcement (DB + entity factory + handler).
- DB CHECK `users_external_no_storage`: an external user's `storage_used_bytes` must always be 0.
- `HomeFolderLifecycleHook::provision_if_needed` short-circuits on `user.is_external()` — no home folder for externals.
- `INTERNAL_GROUP_ID` is immutable (membership is implicit, additions/removals rejected as `VirtualImmutable` at the service layer).
**Already-existing gaps this work must close (PR 6)**:
1. **Subject groups admit external users today.** `subject_group_service.rs::add_member` (line 238) protects the `Internal` virtual group but does **not** reject `GroupMember::User(uuid)` where the candidate has `is_external = TRUE`. Concrete attack: admin adds `alice@example.com` (external) to the "Engineering" group; "Engineering" later gets a grant on internal-only resources; alice silently gains access. **Fix**: in `add_member`, after the `INTERNAL_GROUP_ID` guard, fetch the candidate user and reject with `DomainError::AccessDenied` if `user.is_external()` is true. Error message: "External users cannot be members of subject groups; share resources with them directly." Mirrors the no-external-admins enforcement style.
2. **System-contacts endpoint surfaces every user.** `contacts_handler::list_contacts(book_id=SYSTEM_BOOK_ID)` (line 447) calls `auth_service.list_users` which returns all users including externals. The share modal autocomplete (via `addressBook.searchContacts(q, [SYSTEM_BOOK_ID])`) would then suggest external users as recipients — wrong UX, and also leaks external identities to other internal users. **Fix**: `auth_service.list_users` and `auth_service.search_users` accept an `include_external: bool` parameter, defaulting to `false`. SQL adds `WHERE is_external = FALSE` when the flag is off. Existing call sites pass `false`. A new admin-list-users endpoint can pass `true` if the admin UI ever needs to show externals (handled in a future PR; not in scope here).
3. **`expand_user` adds external users to `INTERNAL_GROUP_ID`.** The TODO in `pg_acl_engine.rs:141` (*"narrow to if !user.is_external"*). **Fix**: include the conditional. External users get an expansion of `{their_uid}` only, no implicit Internal membership. This protects every Internal-group grant from inadvertent leakage to externals.
**Considered and intentionally deferred to a future hardening PR** (documented in "Out of scope"):
- **External users with `Permission::Share` resharing to create more externals.** Today nothing stops an external `Share`-grantee from invoking the email-grant flow and minting new external users. Policy question: should we forbid externals from being a `granted_by` value? Possible env flag: `OXICLOUD_EXTERNAL_USERS_CAN_RESHARE=false`. Not in this work.
- **Shorter session/refresh-token TTL for external users.** Today refresh-token expiry is global. The plan keeps it that way for v1; future env `OXICLOUD_EXTERNAL_REFRESH_TOKEN_EXPIRY_DAYS` for differentiated lifetimes.
- **`session_kind` tagging on sessions emitted from magic-link.** Could enable scoped sessions later (Option B from the security discussion). Not in v1.
**Magic-link-specific protections built into PR 8/9**:
- Tokens are 32-byte random base64url, generated via the OS CSPRNG (same pattern as `device_codes`).
- Single-use via `status = 'used'` + `used_at` stamp; second redemption attempt rejected with 400 ("link already used").
- TTL-enforced at the redemption endpoint (`expires_at < NOW()` → 400 "link expired").
- Redemption endpoint is `GET /magic/v1/{token}` (token in URL path, not query string, to keep it out of `Referer` headers). On successful redemption the server immediately 302s to the resource — the magic-link URL is replaced in the address bar before the user can navigate further.
- Uniform response on `POST /api/auth/magic-link/send` (`"If we have an account, a link will be sent"`) regardless of whether the email exists. Per-target-email rate limit prevents using the endpoint as an enumeration oracle by latency.
## PR sequence
| PR | Subject | Why land separately |
|---|---|---|
| **6** | Prelude: `has_login_credential()`, narrow `INTERNAL_GROUP_ID`, widen username, add `given_name`/`family_name`, make username mutable, **+ defense-in-depth: subject groups reject external members, `list_users`/`search_users` filter externals, `expand_user` excludes externals from Internal** | Entity + schema groundwork **plus the three boundary protections enumerated in "Defense in depth"**. Verifiable in isolation by running the existing Hurl suite — no new behaviour for internal users, just protections that activate once externals exist. |
| **7** | SMTP infrastructure: `EmailSender` port + `lettre`-backed impl + env config | Pure infrastructure. Mocked in tests. No user-visible feature yet. |
| **8** | `auth.magic_link_tokens` table + repo + redemption endpoint `/magic/v1/{token}` + `ExternalIdentityLifecycleHook` populated | The magic-link plumbing. Tokens can be manually fabricated for unit tests; sharer flow still pending. |
| **9** | Extend `POST /api/grants` for `subject.type = "email"` + email normalization + lazy external-user creation + invitation email + Hurl coverage of the invite path | The sharer side, end-to-end. The Hurl test creates an unknown email, claims the resulting magic link, lands on the resource. |
| **10** | Login-via-email endpoint (`POST /api/auth/magic-link/send`) with uniform response + landing on `/shared-with-me` for NULL-resource tokens | The recovery / no-password-yet path. Lands the existing user back into their incoming-grants view. |
| **11** | Frontend: share-modal accepts arbitrary email + login page "Login with email link" section | UI changes alone. Pure frontend PR for clean review. |
| **12** | Rate limits + comprehensive Hurl coverage + architecture doc + sidebar | Hardening + acceptance gate. `docs/architecture/magic-link-auth.md` + sidebar entry. Updated `share-integration.md`. |
## Critical files
**New files**:
- PR 6: `migrations/20260612000003_users_username_email_login.sql` (widen username, add given_name/family_name, mutable username)
- PR 7: `Cargo.toml` (+lettre), `src/application/ports/email_sender.rs`, `src/infrastructure/services/smtp_email_sender.rs`
- PR 8: `migrations/20260612000004_magic_link_tokens.sql`, `src/domain/entities/magic_link_token.rs`, `src/infrastructure/repositories/pg/magic_link_token_pg_repository.rs`, `src/interfaces/api/handlers/magic_link_handler.rs`
- PR 9: `src/domain/services/email_normalize.rs` (small utility), invitation email template inline in `external_identity_service.rs`
- PR 12: `docs/architecture/magic-link-auth.md`
**Modified files**:
- PR 6: `src/domain/entities/user.rs` (`has_login_credential`, username mutability getter/setter), `src/infrastructure/services/pg_acl_engine.rs` (drop the unconditional `INTERNAL_GROUP_ID` insert when `user.is_external()` — closes protection gap #3), `src/application/services/auth_application_service.rs` (login lookup tries email fallback; `list_users` / `search_users` gain `include_external: bool` defaulting to false — closes protection gap #2), `src/application/services/subject_group_service.rs` (`add_member` rejects external user members — closes protection gap #1), `src/application/dtos/user_dto.rs` (given_name/family_name fields), `src/infrastructure/repositories/pg/user_pg_repository.rs` (`list_users` / `search_users` SQL gains `WHERE is_external = FALSE` when filter is on)
- PR 7: `src/common/di.rs` (wire `EmailSender`), `src/common/config.rs` (parse SMTP env vars)
- PR 8: `src/application/services/external_identity_service.rs` (populate the PR-5 stub), `src/common/di.rs` (wire magic_link_repo into external_identity hook)
- PR 9: `src/interfaces/api/handlers/grant_handler.rs` (extend `POST /api/grants` request parsing), `src/application/dtos/grant_dto.rs` (new SubjectTypeDto variant; or accept email-as-string in existing SubjectDto), `src/interfaces/api/routes.rs`
- PR 10: `src/interfaces/api/routes.rs` (register `/api/auth/magic-link/send`), `src/application/services/auth_application_service.rs` (login-via-email use case)
- PR 11: `static/js/components/shareModal.js` (free-text email input), `static/login.html` (new section), `static/js/features/auth/auth.js` (POST flow + success UI), i18n keys in 16 locales
- PR 12: `src/interfaces/middleware/rate_limit.rs` (two new limiter constructors), `tests/api/magic_link.hurl` (new test file), `docs/.vitepress/config.mts` (sidebar entry), `docs/architecture/share-integration.md` (cross-reference)
## Existing patterns to reuse (with paths)
- **Rate limiter**: `src/interfaces/middleware/rate_limit.rs` — `RateLimiter::new(max_requests, window_secs, max_entries)` + `check_and_increment(&key)`. Two new factory functions (`rate_limit_email_invite`, `rate_limit_magic_link_send`).
- **Token storage pattern**: `src/domain/entities/device_code.rs` + `src/infrastructure/repositories/pg/device_code_pg_repository.rs`. Status enum (pending/used/expired) with PostgreSQL custom type; `delete_expired()` cleanup helper.
- **Lifecycle hook**: `ExternalIdentityLifecycleHook` already registered in DI (PR 5). Body filled in here.
- **Audit pattern**: `tracing::info!(target: "audit", event = "...")` — same convention as `subject_group_service.rs` and `user_lifecycle_service.rs`.
- **Email-input UX in share modal**: Today autocomplete-only (lines 350-391 of `shareModal.js`). Add a third "external email" suggestion type alongside `ContactItem` and `GroupSuggestion` — uses the same staging/chip rendering machinery.
- **Login page extensibility**: `static/login.html` lines 59-121 + `static/js/features/auth/auth.js::initLoginElements` lines 758-810. New section mirrors the OIDC button pattern.
- **Idna for punycode**: add `idna` crate to Cargo.toml; standard Rust crate for IDN handling.
## Verification
Per-PR (all PRs):
```bash
cargo fmt --all
cargo clippy --all-features --all-targets -- -D warnings
cargo test --workspace
bash tests/api/run.sh # 13 existing Hurl files must still pass
```
End-to-end gate after PR 9:
1. Login as admin in browser. Share a folder with `newly-invited@example.com`. Confirm:
- HTTP 201 + grant_id returned.
- `auth.users` has a new row, `is_external = TRUE`, `username = 'newly-invited@example.com'`, no password_hash (placeholder).
- `auth.magic_link_tokens` has a new row pointing at that user and the folder.
- SMTP relay receives one mail (use MailHog or `OXICLOUD_SMTP_HOST=localhost` + a netcat trap).
2. Open the magic-link URL from the captured mail. Confirm:
- Session cookie issued; redirected to the folder URL.
- Token row's `status = 'used'`, `used_at` set.
3. Reload the URL. Confirm 400 "link already used".
4. Wait past TTL on a fresh token; confirm 400 "link expired" + "Resend" UI.
End-to-end gate after PR 10:
5. Log out. Go to `/login`. Click "Login with email link". Enter the same email. Confirm:
- HTTP 200 with uniform "If we have an account, a link will be sent" body.
- Fresh magic-link token in DB (no resource target this time).
- Mail received. Click → land on `/shared-with-me`. Confirm the previously shared folder is in the list.
End-to-end gate after PR 12:
6. Issue 60 invitations from one admin in a minute → confirm 50 succeed and 10 are rate-limited with 429.
7. POST `/api/auth/magic-link/send` 10× for the same email in 10 minutes → confirm 5 succeed and 5 are rate-limited with 429.
8. Hurl suite `tests/api/magic_link.hurl` covers: invite-new-email, invite-existing-email (no duplicate user), token redemption, expired token, resend uniform response, rate-limit triggers.
## Out of scope (do NOT bundle)
- **Auth-method side-table refactor.** Acknowledged smell with the placeholder strings (`__EXTERNAL_NO_PASSWORD__` etc.). Future PR introduces `auth.user_auth_methods` with rows per `(user_id, method_type, credentials)`. The `has_login_credential()` method is the single migration point; refactor changes its body without rippling.
- **Email template engine + i18n localization of emails.** v1 ships English-only hardcoded templates. Template engine (handlebars / askama) + recipient-locale detection is a future PR.
- **MX-record validation at share time.** Regex only; bad domains discover themselves via SMTP bounce.
- **Periodic cleanup of dormant external users.** A sweeper that purges users with no `last_login_at` for 13+ months. Future PR; the GDPR-sweeper variant `DeletionMode::GdprPurge` (already in the trait) is its hook entry point.
- **Per-instance allowlist of external email domains** (e.g. only `*@my-company.com`). Future env var `OXICLOUD_EXTERNAL_EMAIL_DOMAINS`. Kill switch (`OXICLOUD_ALLOW_EXTERNAL_USERS=false`) ships in PR 6 as a coarser tool.
- **WebAuthn / passkey enrolment for external users after first login.** Distinct future feature; the magic-link bootstrap is the prerequisite.
- **`OXICLOUD_EXTERNAL_USERS_CAN_RESHARE=false`** env flag forbidding externals from being a grant's `granted_by`. Today an external user with `Permission::Share` can mint more external users via the email-grant flow. Soft policy; deferred.
- **Differentiated session lifetime for externals** (`OXICLOUD_EXTERNAL_REFRESH_TOKEN_EXPIRY_DAYS`). Today refresh-token TTL is uniform across all users. Deferred until operational data shows it matters.
- **`session_kind` discriminator on sessions emitted from magic-link.** Enables Option B-style scoped sessions (magic-link sessions only access granted resources, not the user's own home folder). Today every authenticated session is full-tier; magic-link only happens for users without home folders (externals), so the practical exposure is small. Deferred.
- **Admin-list-users surface that includes externals.** PR 6 makes `list_users` filter externals by default. The admin endpoint at `GET /api/admin/users` will eventually want an `include_external` query param so admins can manage externals (rename, deactivate, see grants). Not in scope of this work — the admin UI for externals is its own future PR.
- **Open Cloud Mesh (OCM) federation.** External users via OCM (federated partner servers) are a separate path; magic-link is one of several future external-identity providers. `ExternalIdentityLifecycleHook::on_user_created` design accommodates the `source` discriminator (`magic_link` / `oidc` / `ocm`).
## Recommended future event triggers (DON'T ship in this work)
Same convention as the lifecycle plan: a future event ships only when there's a concrete consumer.
| Future event | What would force it |
|---|---|
| `on_external_user_credential_set` | When an external user sets a password OR links OIDC — useful for an audit event ("alice@example.com is no longer magic-link-eligible") and for invalidating any outstanding magic-link tokens she has. Today the new tokens are simply unused; reaping them via this event would be cleaner. |
| `on_magic_link_resent` | If audit consumers want to see resend traffic distinguishable from invite traffic. Today the resend goes through the same code path as the initial issuance; an audit-distinguishable event isn't worth the trait surface yet. |
| `on_email_bounce` | When SMTP delivery fails permanently. Useful for surfacing "this user's email is dead" in admin UI. Requires a bounce-tracking infrastructure (SES-style webhook, custom bounce-mailbox monitoring) — out of scope. |
These are doc-only; their absence doesn't block anything.
## Two open questions I want to confirm via AskUserQuestion
None at this point — the conversation pinned every design decision. Proceeding straight to ExitPlanMode.
docs/plan/FileLifeCycle-BlobLifecycle.plan.md
-213
View File
@@ -1,213 +0,0 @@
# Plan: Unified lifecycle hooks (file + blob)
## Context
The file and blob lifecycle hook systems are partially built but inconsistently wired:
- `FileLifecycleService` only fans out `on_file_deleted`; created/updated hooks are wired directly on `FileUploadService`.
- `AudioMetadataService` implements no hook traits — called raw from 4 handler files.
- `ThumbnailRefreshHook` (file created/updated) and `ThumbnailService` (file deleted, blob deleted) are separate registrations for the same concern.
- `copy_file()` fires no hooks — copied files never get audio metadata (confirmed gap: `audio.file_metadata` is keyed by `file_id`, not `blob_hash`).
- Blob lifecycle has the same structural problem: two separate traits and two separate vecs in `DedupService`.
Goal: one `FileLifecycleHook` + one `BlobLifecycleHook` trait, each with a composite dispatcher, all side-effects wired through them, handlers reduced to protocol translators.
---
## Design decisions
### Synchronous trait methods
Hooks are fire-and-notify: every implementation either spawns a `tokio::spawn` internally or does nothing. Sync trait = no `Box::pin`, no `async_trait`, genuine one-liner noops.
```rust
// application/ports/file_lifecycle.rs
pub trait FileLifecycleHook: Send + Sync {
fn on_file_created(&self, file_id: &str, blob_hash: &str, content_type: &str, is_new_blob: bool);
fn on_file_updated(&self, file_id: &str, blob_hash: &str, content_type: &str);
fn on_file_copied(&self, file_id: &str, blob_hash: &str, content_type: &str, source_id: &str)
// not information if the blob still exists, up to implementor to use BlobLifecycleHook if needed
fn on_file_deleted(&self, file_id: &str);
}
// application/ports/blob_lifecycle.rs
pub trait BlobLifecycleHook: Send + Sync {
fn on_blob_created(&self, blob_hash: &str, content_type: Option<&str>);
fn on_blob_deleted(&self, blob_hash: &str);
}
```
**No default methods** — explicit noops required (forces developer acknowledgement of all events).
### `is_new_blob: bool` on `on_file_created`
Tells the implementor whether the underlying blob is genuinely new (fresh upload, no dedup hit) or already existed (copy, dedup hit on re-upload). This prevents implementors from re-scanning/re-generating work that can be shared or cloned from an existing record:
- `ThumbnailRefreshHook`: if `!is_new_blob`, the `blob_hash` thumbnail already exists on disk — skip scheduling generation entirely.
- `AudioMetadataService`: if `!is_new_blob`, clone the existing metadata row for the `blob_hash` (fast DB copy) instead of re-parsing the blob.
**Where `is_new_blob` comes from**: `FileUploadService` gets the dedup result from `FileBlobWriteRepository.save_file_from_temp()` (already computed during upload). For `copy_file()`, always `false` — same blob by definition.
### Old traits removed entirely
Six old traits (`FileCreatedHook`, `FileUpdatedHook`, `FileDeletedHook`, `BlobCreationHook`, `BlobDeletionHook`) removed. All implementors migrate to the two new traits.
### Why `on_file_deleted` can be sync
`ThumbnailService.delete_thumbnails` is currently awaited by the caller. It moves to `tokio::spawn` internally — thumbnail cleanup is best-effort, callers don't depend on it completing.
---
## Thumbnail storage model (context)
- **Disk**: keyed by `blob_hash` → `thumbnails_root/{size}/{blob_hash}.jpg` — shared between all files with the same content.
- **Moka cache**: keyed by `(file_id, size)` — cold-misses on first request for a new `file_id`, then reads from disk.
- **External thumbnails** (video frames): keyed by `file_id` → `ext-{file_id}.jpg`.
Image copy is safe: disk thumbnail exists for the `blob_hash`, no regeneration needed (`is_new_blob = false` will skip it).
---
## Files to change
### 1. `src/application/ports/file_lifecycle.rs`
Replace three separate async traits with one sync `FileLifecycleHook` trait (3 methods + `is_new_blob` on created, no defaults).
### 2. `src/application/ports/blob_lifecycle.rs`
Replace two separate async traits with one sync `BlobLifecycleHook` trait (2 methods, no defaults).
### 3. `src/application/services/file_lifecycle_service.rs`
- One `Vec<Arc<dyn FileLifecycleHook>>`.
- One builder: `.with_hook(hook)`.
- `impl FileLifecycleHook`: plain `for` loops, no async, forwards `is_new_blob`.
### 4. New: `src/application/services/blob_lifecycle_service.rs`
Mirror of `FileLifecycleService` for blob events:
- `Vec<Arc<dyn BlobLifecycleHook>>`, `.with_hook()` builder, `impl BlobLifecycleHook` fan-out.
### 5. `src/infrastructure/services/thumbnail_service.rs`
Consolidate all thumbnail hook logic into `ThumbnailRefreshHook`, implementing **both** new traits:
**`impl FileLifecycleHook for ThumbnailRefreshHook`**:
- `on_file_created`: if `!is_new_blob` or unsupported content type → return early (blob thumbnail already on disk). Otherwise spawn generation.
- `on_file_updated`: spawn thumbnail invalidation + regeneration (existing logic).
- `on_file_deleted`: `tokio::spawn({ thumbnail.delete_thumbnails(file_id).await })`.
**`impl BlobLifecycleHook for ThumbnailRefreshHook`**:
- `on_blob_created`: explicit noop — thumbnail gen is handled at file level via `on_file_created`.
- `on_blob_deleted`: `tokio::spawn({ thumbnail.delete_blob_thumbnails(blob_hash).await })`.
Remove: `impl FileDeletedHook for ThumbnailService`, `impl BlobDeletionHook for ThumbnailService`.
### 6. `src/infrastructure/services/audio_metadata_service.rs`
**New method**: `clone_or_extract_background(service: Arc<Self>, new_file_id: Uuid, blob_hash: String)`
- Spawns a task that runs:
```sql
INSERT INTO audio.file_metadata (file_id, title, artist, album, album_artist,
genre, track_number, disc_number, year, duration_secs, format)
SELECT $new_file_id, title, artist, album, album_artist, genre,
track_number, disc_number, year, duration_secs, format
FROM audio.file_metadata am
JOIN storage.files sf ON sf.id = am.file_id
WHERE sf.blob_hash = $blob_hash
LIMIT 1
ON CONFLICT (file_id) DO NOTHING
```
- If 0 rows inserted (original not yet processed), falls back to `extract_and_save`.
**`impl FileLifecycleHook for AudioMetadataService`**:
- `on_file_created`: if `is_audio_file(content_type)` → parse UUID, then:
- `is_new_blob = true` → `spawn_extraction_background(file_id, blob_path(blob_hash))`
- `is_new_blob = false` → `clone_or_extract_background(file_id, blob_hash)`
- `on_file_updated`: if audio → `spawn_extraction_with_delete_background`.
- `on_file_deleted`: explicit one-liner noop + comment: `audio.file_metadata` has `ON DELETE CASCADE`, DB handles cleanup.
### 7. `src/application/services/file_upload_service.rs`
- Replace `file_created_hooks: Vec<Arc<dyn FileCreatedHook>>` + `file_updated_hooks` with `file_lifecycle_hook: Option<Arc<dyn FileLifecycleHook>>`.
- Builder: `.with_file_lifecycle_hook(hook)`.
- Sync calls replacing async fan-out loops. Pass `is_new_blob` from the dedup result already available at this layer.
### 8. `src/application/services/file_management_service.rs`
- Replace `Arc<dyn FileDeletedHook>` with `Arc<dyn FileLifecycleHook>`.
- `on_file_deleted` call becomes sync.
- **Fix copy gap**: after `file_repository.copy_file()` returns the new file DTO, call `self.file_lifecycle.on_file_created(new_id, blob_hash, mime_type, false)`.
### 9. `src/application/services/trash_service.rs`
- Replace `Arc<dyn FileDeletedHook>` with `Arc<dyn FileLifecycleHook>`.
- `on_file_deleted` calls become sync.
### 10. `src/infrastructure/services/dedup_service.rs`
- Replace `blob_creation_hooks: Vec<Arc<dyn BlobCreationHook>>` + `blob_hooks: Vec<Arc<dyn BlobDeletionHook>>` with `blob_lifecycle: Option<Arc<BlobLifecycleService>>`.
- Builder: `.with_blob_lifecycle(hook)`.
- Sync calls replacing async fan-outs.
### 11. `src/common/di.rs`
```rust
let thumbnail_hook = Arc::new(ThumbnailRefreshHook::new(
core.thumbnail_service.clone(),
dedup.clone(),
));
let file_lifecycle = Arc::new(
FileLifecycleService::new()
.with_hook(thumbnail_hook.clone())
.with_hook(audio_metadata_service.clone()) // if Some
);
let blob_lifecycle = Arc::new(
BlobLifecycleService::new()
.with_hook(thumbnail_hook.clone())
);
dedup_service.with_blob_lifecycle(blob_lifecycle)
file_upload_service.with_file_lifecycle_hook(file_lifecycle.clone())
file_management_service.with_file_lifecycle_hook(file_lifecycle.clone())
trash_service.with_file_lifecycle_hook(file_lifecycle.clone())
```
### 12. Handler cleanup — 4 files (deletes only)
| File | Remove |
|---|---|
| `src/interfaces/api/handlers/file_handler.rs` | direct `thumbnail_service.generate_all_sizes_background_from_bytes(...)` + `AudioMetadataService::spawn_extraction_background(...)` |
| `src/interfaces/nextcloud/webdav_handler.rs` | `AudioMetadataService::spawn_extraction_background(...)` (create) + `AudioMetadataService::spawn_extraction_with_delete_background(...)` (update) |
| `src/interfaces/nextcloud/uploads_handler.rs` | `AudioMetadataService::spawn_extraction_background(...)` |
| `src/interfaces/api/handlers/webdav_handler.rs` | `AudioMetadataService::spawn_extraction_background(...)` |
---
## Execution order
1. `file_lifecycle.rs` — new trait
2. `blob_lifecycle.rs` — new trait
3. `file_lifecycle_service.rs` — updated composite
4. New `blob_lifecycle_service.rs`
5. `thumbnail_service.rs` — merged impl of both traits
6. `audio_metadata_service.rs` — new method + `FileLifecycleHook` impl
7. `file_upload_service.rs` — unified hook field + `is_new_blob` plumbing
8. `file_management_service.rs` — type update + copy hook
9. `trash_service.rs` — type update
10. `dedup_service.rs` — unified blob hook field
11. `di.rs` — rewire
12. Handler cleanups (4 files, independent)
---
## Verification
```bash
cargo fmt --all
cargo clippy --all-features --all-targets -- -D warnings # zero warnings
cargo test --workspace # all ~208 tests green
```
Smoke-test manually:
- Upload an image → thumbnail appears.
- Upload same image again (dedup hit) → no thumbnail re-generation.
- Upload an audio file via Nextcloud WebDAV → audio metadata present.
- Copy an image file → copy has thumbnail served instantly from blob_hash path.
- Copy a music file → copy has audio metadata (cloned row, no blob re-parse).
- Delete a file → thumbnails cleared; audio metadata gone (DB cascade).
- Overwrite file via WebDAV PUT → thumbnail refreshes.
- Delete last copy of a blob → blob-hash thumbnail file removed from disk.
docs/plan/Groups-version1.md
-671
View File
@@ -1,671 +0,0 @@
# Plan — ReBAC Subject Groups (v1)
## Context
OxiCloud's `storage.access_grants` table already declares `subject_type IN
('user', 'group', 'token', 'external')` and `expires_at TIMESTAMPTZ`, but no
schema, code, or UI exists today for the `'group'` subject. This plan
implements that: a nested, root-owned group subject with cascading
authorization, cycle protection, and a global namespace.
After this lands:
- `Subject::Group(Id)` can be granted permissions on files/folders, with
membership cascading through nested groups.
- A `Subject::User(Id)` is reached via direct grant **OR** via membership in
any group (transitively) that holds a grant.
- One predefined immutable virtual group `Internal` represents *all internal
users* (`is_external = false`), the way "Everyone in your org" works in
Google Workspace.
- Groups are admin-managed (creation, naming, membership).
- Group names are RFC 5321 local-part compliant so the door to a future
mailing-list / email-addressable feature stays open.
- Performance: recursive CTE for transitive expansion, fronted by a 30s Moka
cache keyed by user_id. Designed so a future closure-table migration is a
swap-in behind one function.
**Decisions accepted earlier in the conversation (encoded in this plan):**
- Max nesting depth: **8**.
- Cycle detection: **at write time** (rejects mutations).
- Cascade-delete grants when a group is deleted.
- No `Everyone` virtual group; external users are only reached via explicit
per-grant action.
- `UseAsSubject` permission acknowledged as future work — v1 ships
admin-only group management (anyone can target any group in a grant).
- Audit events emit via `tracing::info!(target = "audit", ...)`; a syslog
subscriber hook is documented but its concrete wiring is a follow-up.
## Scope
### In scope (v1)
1. New tables `auth.subject_groups` + `auth.subject_group_members`.
2. Predefined `Internal` virtual group (well-known UUID, immutable).
3. CRUD REST API at `/api/groups/...` (admin-only).
4. Membership add/remove with cycle + depth checks.
5. Transitive-expansion function in `AuthorizationEngine`, Moka-cached.
6. Cascade queries in `pg_acl_engine.rs` updated to use `subject_id = ANY(...)`.
7. Share-dialog autocomplete: extend to also return groups (via the new
authenticated `/api/groups/search` endpoint).
8. Audit logging via structured `tracing::info!(target = "audit", ...)`.
9. Minimal i18n: API-returned error message keys only.
### Out of scope (v2 / later)
- **Admin UI for group management.** v1 is API-only — `POST /api/groups`,
member add/remove, etc. are reachable via curl / Hurl until a dedicated
admin tab is added in a follow-up. The autocomplete extension in the
*share dialog* (file/folder sharing UX) is the only UI change in v1.
- `Manage` and `UseAsSubject` permissions on groups themselves (delegated
group admin requires adding `subject_group` to the `access_grants`
resource_type CHECK and per-group authz).
- Mailing-list dispatcher (the RFC-compliant naming preserves the door).
- Concrete syslog appender wiring (env-var driven `tracing-syslog` or
`tracing-journald` subscriber — code emits structured events today,
operators choose a sink).
- Closure table for transitive membership (Moka cache is enough; future
swap behind `expand_subject()`).
## Schema migration
New file: `migrations/20260612000000_subject_groups.sql`.
```sql
-- ── auth.subject_groups: root-owned authorization principals ─────────────
CREATE TABLE IF NOT EXISTS auth.subject_groups (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
name CITEXT NOT NULL,
description TEXT,
is_virtual BOOLEAN NOT NULL DEFAULT FALSE,
created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
-- RFC 5321 local-part: starts alnum, then alnum/dot/dash/underscore,
-- max 64 chars. Future-proofs `group@instance` mailing-list addressing.
CONSTRAINT subject_groups_name_rfc5321
CHECK (name ~ '^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$'),
CONSTRAINT subject_groups_name_uq UNIQUE (name)
);
CREATE INDEX IF NOT EXISTS idx_subject_groups_is_virtual
ON auth.subject_groups (is_virtual) WHERE is_virtual = TRUE;
-- ── auth.subject_group_members: edges (user→group or group→group) ────────
CREATE TABLE IF NOT EXISTS auth.subject_group_members (
group_id UUID NOT NULL REFERENCES auth.subject_groups(id) ON DELETE CASCADE,
member_user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
member_group_id UUID REFERENCES auth.subject_groups(id) ON DELETE CASCADE,
added_at TIMESTAMPTZ NOT NULL DEFAULT now(),
added_by UUID NOT NULL REFERENCES auth.users(id),
-- Exactly one of the two member columns is set.
CONSTRAINT subject_group_members_xor CHECK (
(member_user_id IS NOT NULL)::int + (member_group_id IS NOT NULL)::int = 1
),
-- A group can't contain itself directly.
CONSTRAINT subject_group_members_no_self CHECK (
member_group_id IS NULL OR member_group_id <> group_id
)
);
CREATE UNIQUE INDEX IF NOT EXISTS idx_subject_group_members_user
ON auth.subject_group_members (group_id, member_user_id)
WHERE member_user_id IS NOT NULL;
CREATE UNIQUE INDEX IF NOT EXISTS idx_subject_group_members_group
ON auth.subject_group_members (group_id, member_group_id)
WHERE member_group_id IS NOT NULL;
-- For transitive expansion: "all groups a user belongs to directly"
CREATE INDEX IF NOT EXISTS idx_subject_group_members_by_user
ON auth.subject_group_members (member_user_id)
WHERE member_user_id IS NOT NULL;
-- For cycle check: "what groups does group X contain (immediate children)"
CREATE INDEX IF NOT EXISTS idx_subject_group_members_by_child_group
ON auth.subject_group_members (member_group_id, group_id)
WHERE member_group_id IS NOT NULL;
-- ── Seed the predefined `Internal` virtual group ─────────────────────────
-- Well-known UUID hard-coded in Rust so application code can reference it
-- without a runtime lookup: 00000000-0000-0000-0000-000000000001.
INSERT INTO auth.subject_groups (id, name, description, is_virtual)
VALUES (
'00000000-0000-0000-0000-000000000001',
'Internal',
'All internal users (is_external = false). Membership is implicit; no rows in subject_group_members.',
TRUE
)
ON CONFLICT (id) DO NOTHING;
```
**Notes on the schema:**
- `CITEXT` extension is already enabled elsewhere — confirm via
`\dx` against a dev DB; if not, the migration must `CREATE EXTENSION IF NOT
EXISTS citext;` first.
- The two member columns (`member_user_id`, `member_group_id`) form a tagged
union enforced by the XOR check. Simpler than polymorphic FKs.
- The `is_virtual = TRUE` flag distinguishes the immutable `Internal` group;
the service layer rejects member mutations on it.
- No `created_by` column — groups have no owner by design. `added_by` on
*memberships* still records who performed the edit, for audit.
## Domain layer
New file: `src/domain/entities/subject_group.rs`.
```rust
pub struct SubjectGroup {
pub id: Uuid,
pub name: String,
pub description: Option<String>,
pub is_virtual: bool,
pub created_at: DateTime<Utc>,
pub updated_at: DateTime<Utc>,
}
pub enum GroupMember {
User(Uuid),
Group(Uuid),
}
impl SubjectGroup {
pub fn new(name: &str, description: Option<String>) -> Result<Self, DomainError> {
Self::validate_name(name)?;
// ...
}
/// Enforce RFC 5321 local-part shape at the domain layer too (defence in
/// depth — the DB CHECK constraint is the authority).
fn validate_name(name: &str) -> Result<(), DomainError> {
static RE: Lazy<Regex> = Lazy::new(|| {
Regex::new(r"^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$").unwrap()
});
if !RE.is_match(name) { return Err(DomainError::invalid("group.name.rfc5321")); }
Ok(())
}
}
pub const INTERNAL_GROUP_ID: Uuid = uuid!("00000000-0000-0000-0000-000000000001");
pub const MAX_GROUP_DEPTH: u8 = 8;
```
New file: `src/domain/repositories/subject_group_repository.rs` (trait).
Methods:
- `create(group: SubjectGroup) -> Result<SubjectGroup, DomainError>`
- `get_by_id(id: Uuid) -> Result<Option<SubjectGroup>, DomainError>`
- `get_by_name(name: &str) -> Result<Option<SubjectGroup>, DomainError>` (case-insensitive via CITEXT)
- `list(limit, offset, name_query: Option<&str>) -> Result<(Vec<SubjectGroup>, u64 /*total*/), DomainError>`
- `rename(id: Uuid, new_name: &str) -> Result<SubjectGroup, DomainError>`
- `delete(id: Uuid) -> Result<(), DomainError>` (cascade-deletes grants via FK from access_grants — TODO confirm; if no FK exists, also delete grants in the same transaction)
- `add_member(group_id: Uuid, member: GroupMember, added_by: Uuid) -> Result<(), DomainError>`
- `remove_member(group_id: Uuid, member: GroupMember) -> Result<(), DomainError>`
- `list_direct_members(group_id: Uuid) -> Result<Vec<GroupMember>, DomainError>`
- `list_transitive_users(group_id: Uuid) -> Result<Vec<Uuid>, DomainError>` (debug/audit)
- `groups_for_user(user_id: Uuid) -> Result<HashSet<Uuid>, DomainError>` (the hot path — recursive CTE)
- `would_introduce_cycle(parent: Uuid, candidate_child_group: Uuid) -> Result<bool, DomainError>`
- `current_depth(group_id: Uuid) -> Result<u8, DomainError>` (longest path from this group to any leaf)
## Infrastructure layer
New file:
`src/infrastructure/repositories/pg/subject_group_pg_repository.rs`.
Two queries deserve attention because the rest are straight CRUD.
### Cycle detection (write-time)
```sql
-- Adding member_group_id=$candidate to group_id=$parent introduces a cycle
-- iff $parent is reachable from $candidate by walking child-edges.
WITH RECURSIVE descendants AS (
SELECT member_group_id AS g
FROM auth.subject_group_members
WHERE group_id = $candidate AND member_group_id IS NOT NULL
UNION -- de-dup; the union of disjoint paths is OK
SELECT m.member_group_id
FROM auth.subject_group_members m
JOIN descendants d ON m.group_id = d.g
WHERE m.member_group_id IS NOT NULL
)
SELECT 1 FROM descendants WHERE g = $parent LIMIT 1;
```
If this returns a row → reject with `DomainError::invalid("group.cycle")`.
### Transitive expansion: groups_for_user
```sql
WITH RECURSIVE user_groups AS (
-- Base: direct memberships
SELECT group_id FROM auth.subject_group_members
WHERE member_user_id = $1
UNION
-- Recursive: groups containing those groups
SELECT m.group_id
FROM auth.subject_group_members m
JOIN user_groups ug ON m.member_group_id = ug.group_id
)
SELECT group_id FROM user_groups;
```
The depth cap (`MAX_GROUP_DEPTH = 8`) is enforced at *write* time, so this
recursion is bounded by the data — Postgres has no depth limit on the CTE
itself.
### Depth check (write-time)
```sql
-- The depth of group $parent after adding $child as a member group =
-- depth-of($parent before mutation) + (1 + depth-of-subtree-rooted-at($child))
-- Simpler: compute longest path from $parent across the proposed graph and
-- reject if it would exceed 8.
WITH RECURSIVE path AS (
SELECT group_id AS g, 1 AS depth
FROM auth.subject_group_members WHERE group_id = $parent
UNION
SELECT m.group_id, p.depth + 1
FROM auth.subject_group_members m
JOIN path p ON m.member_group_id = p.g
)
SELECT COALESCE(MAX(depth), 0) FROM path;
```
If the post-mutation projection of this would exceed `MAX_GROUP_DEPTH = 8`,
reject with `DomainError::invalid("group.depth_exceeded")`.
In practice both checks can be combined in the same transaction, run with
`FOR UPDATE` on the parent group row to prevent concurrent racing mutations
from each squeezing under the limit individually.
## Application services
New file: `src/application/services/subject_group_service.rs`.
Methods mirror the repository trait, plus:
- Each mutator emits one structured audit event (`tracing::info!(target = "audit", ...)`).
- `add_member` runs cycle + depth checks in the same transaction as the insert.
- `delete` is guarded against removing `is_virtual = TRUE` groups.
- Service exposes one fast path: `is_user_in_group(user_id, group_id) -> bool`,
used by the `Internal` group check (special-cased as
`!user.is_external` — no DB hit).
Wire the service into `AppState::services` in `src/common/di.rs` alongside
the other application services.
## AuthorizationEngine extension
Modify `src/application/ports/authorization_ports.rs`:
Add a new helper on the trait (default impl can be provided in the trait,
overridden by `PgAclEngine`):
```rust
/// Returns the caller plus the IDs of every group they belong to transitively,
/// plus the predefined `INTERNAL_GROUP_ID` when the caller is not external.
/// This is the single place transitive membership is walked — all v1
/// callers, and the future closure-table swap-in, go through this function.
async fn expand_subject(&self, user_id: Uuid) -> Result<Arc<HashSet<Uuid>>, DomainError>;
```
Modify `src/infrastructure/services/pg_acl_engine.rs`:
1. Add a Moka cache field on the struct:
```rust
user_groups_cache: moka::future::Cache<Uuid, Arc<HashSet<Uuid>>>,
```
constructed with:
```rust
Cache::builder()
.max_capacity(50_000)
.time_to_live(Duration::from_secs(30))
.build();
```
2. Implement `expand_subject`:
```rust
async fn expand_subject(&self, user_id: Uuid) -> Result<Arc<HashSet<Uuid>>, DomainError> {
if let Some(cached) = self.user_groups_cache.get(&user_id).await {
return Ok(cached);
}
let direct = self.repo.groups_for_user(user_id).await?; // recursive CTE
let mut set = HashSet::with_capacity(direct.len() + 2);
set.insert(user_id);
set.extend(direct);
// Internal virtual group: implicit for every non-external user.
if !self.users.is_external(user_id).await? {
set.insert(INTERNAL_GROUP_ID);
}
let arc = Arc::new(set);
self.user_groups_cache.insert(user_id, arc.clone()).await;
Ok(arc)
}
```
3. Modify the existing cascade queries (`folder_cascade_grant_exists` at
lines 92–121 and `file_cascade_grant_exists` at lines 125–168 of
`pg_acl_engine.rs`):
Replace `g.subject_id = $2` with `g.subject_id = ANY($2)` and bind a
`Vec<Uuid>` produced by `expand_subject(user_id).await?.iter().copied().collect()`.
Subject_type must also be relaxed: today the query passes
`subject_type = 'user'`. With groups, the helper should match against
`subject_type IN ('user', 'group')`. (Tokens and externals are not part
of this path; they have their own auth flows.)
The shape of the rest of the query — and the folder/file ltree cascade — is
unchanged. The closure-table migration (future) will only re-implement
`groups_for_user` against a precomputed table; callers stay the same.
## REST API
New file: `src/interfaces/api/handlers/subject_group_handler.rs`.
Wire into `src/interfaces/api/routes.rs` alongside `admin_handler`.
| Method | Route | Body / Query | Guard |
|---|---|---|---|
| POST | `/api/groups` | `{ name, description? }` | admin only |
| GET | `/api/groups` | `?limit&offset&q` | admin only |
| GET | `/api/groups/{id}` | — | admin only |
| PATCH | `/api/groups/{id}` | `{ name?, description? }` | admin only |
| DELETE | `/api/groups/{id}` | — | admin only |
| POST | `/api/groups/{id}/members` | `{ user_id?, group_id? }` (XOR) | admin only |
| GET | `/api/groups/{id}/members` | direct members | admin only |
| GET | `/api/groups/{id}/effective-members` | transitive resolved users | admin only |
| DELETE | `/api/groups/{id}/members/user/{uid}` | — | admin only |
| DELETE | `/api/groups/{id}/members/group/{gid}` | — | admin only |
| GET | `/api/groups/{id}/grants` | grants where this group is subject | admin only |
| GET | `/api/groups/{id}/path-to-user/{uid}` | audit: explain membership | admin only |
Plus the share-dialog endpoint extension:
| Method | Route | Body / Query | Guard |
|---|---|---|---|
| GET | `/api/groups/search` | `?q=` returns non-virtual groups whose name matches | authenticated |
This new search endpoint is **authenticated, not admin-gated** — any user can
discover groups to share with. Returns name + id only (no membership list).
Admin guard implementation: mirror `admin_handler.rs:64-100` exactly (extract
JWT, check `claims.role == "admin"`, 403 otherwise). Extract into a shared
helper `require_admin(state, headers) -> Result<(Uuid, String), AppError>`
in `interfaces/middleware/` so the new handler and `admin_handler` both use
the same code path.
## Audit logging
Convention: every mutating service-layer action emits one
`tracing::info!(target = "audit", ...)` event with structured fields.
Example:
```rust
tracing::info!(
target: "audit",
event = "group.member_added",
group_id = %group_id,
member_user_id = ?member_user_id,
member_group_id = ?member_group_id,
added_by = %caller_id,
);
```
Events to emit:
- `group.created` { group_id, name, created_by }
- `group.renamed` { group_id, old_name, new_name, by }
- `group.deleted` { group_id, name, by }
- `group.member_added` { group_id, member, by }
- `group.member_removed` { group_id, member, by }
- `group.cycle_rejected` { parent, candidate_child, by } (security-relevant)
- `group.depth_exceeded` { parent, by, attempted_depth }
The plan does *not* wire a syslog appender; downstream operators add a
`tracing-syslog` or `tracing-journald` subscriber via env-var-driven config.
A follow-up issue should be opened for that.
## Debug instrumentation (perf observability)
Distinct from the audit log: every authorization check emits one structured
`tracing::debug!` line with timing and cache-hit telemetry so the closure-
table-vs-cache decision (Option 2 → Option 3 in the design doc) can be made
on real data rather than speculation.
Implementation: wrap each call to `AuthorizationEngine::check` /
`AuthorizationEngine::expand_subject` in a tracing span and increment
per-call counters. Suggested shape:
```rust
impl PgAclEngine {
async fn check(&self, subject: Subject, perm: Permission, resource: Resource)
-> Result<bool, DomainError>
{
let start = std::time::Instant::now();
let counters = QueryCounters::default();
let result = self.check_inner(subject, perm, resource, &counters).await;
tracing::debug!(
event = "authz.check",
subject = ?subject,
permission = ?perm,
resource = ?resource,
allowed = result.as_ref().ok().copied().unwrap_or(false),
duration_us = start.elapsed().as_micros() as u64,
cache_hit = counters.cache_hit.load(Ordering::Relaxed),
sql_queries = counters.sql_queries.load(Ordering::Relaxed),
expanded_groups = counters.expanded_group_count.load(Ordering::Relaxed),
);
result
}
}
```
Where `QueryCounters` is a tiny struct of `AtomicU32`s passed through the
call chain, incremented at each `sqlx::query*` call site inside the authz
path. `cache_hit` is set by `expand_subject` based on whether the Moka
`Cache::get` returned `Some`.
**What this gives you:**
| Field | Use |
|---|---|
| `duration_us` | latency histogram per check; alert on p99 regression |
| `cache_hit` | hit-rate metric → decide when to extend TTL or switch to closure table |
| `sql_queries` | 0 on cache hit; 1 on cache miss + grant lookup; 2 if cache miss + transitive expansion + grant lookup — confirms the query plan in production |
| `expanded_groups` | size of the user's transitive group set; if this stays small in practice, the recursive CTE is more than enough |
**Cost:** sub-microsecond per check (atomic increments + a single
`tracing::debug!` emission, which becomes a no-op when the subscriber is at
INFO or higher). No runtime cost in production unless debug logging is
explicitly enabled.
**Recommended deployment hook:** an env var `OXICLOUD_AUTHZ_DEBUG=true` that
flips the subscriber filter to allow `target="oxicloud::authz" level=debug`
events through. Operators turn it on temporarily when investigating
performance issues; default is INFO and emits nothing from this path.
## Share dialog extension
Modify `static/js/components/shareModal.js` around line 310.
Currently it calls `addressBook.searchContacts(q, [SYSTEM_BOOK_ID])`. Add a
parallel call to `fetch('/api/groups/search?q=' + encodeURIComponent(q))`.
Merge the two result lists, tag each item by source (`user` vs `group`
vs `contact`), and render with the appropriate icon (user avatar /
`fa-layer-group` / contact card).
On selection, dispatch to the existing grant-creation flow with the
correct `subject_type`:
- `user` → `subject_type = 'user'`, `subject_id = user.id`
- `group` → `subject_type = 'group'`, `subject_id = group.id`
- `contact` → resolved through the existing address-book mapper to the
matching user_id (no change from today)
## i18n
Add to `static/locales/en.json` (errors surfaced by the API + share-dialog):
```json
"errors": {
"group_name_invalid": "Group name must match the email-prefix format (letters, digits, dot, dash, underscore; 1–64 chars).",
"group_cycle": "This member would create a circular group reference.",
"group_depth_exceeded": "This nesting depth exceeds the maximum allowed (8).",
"group_virtual_immutable": "The 'Internal' group is system-managed and cannot be modified.",
"group_not_found": "Group not found."
}
```
These keys are referenced by `ApiError` payloads from the new handler and
by the share-dialog UI when a target group is invalid. Sync the 15 locale
files using the Python script pattern from the earlier i18n turn.
The full set of admin-table labels (`admin.tab_groups`, `admin.col_*`, etc.)
is **deferred to the v2 admin UI work** along with the rest of the admin
surface for groups.
## Tests
### Unit tests
Module: `src/infrastructure/repositories/pg/subject_group_pg_repository.rs#tests`
1. `test_create_group_validates_name_rfc5321` — names with spaces / emojis
rejected; valid names accepted.
2. `test_group_name_unique_case_insensitive` — "Engineering" and
"engineering" collide (CITEXT).
3. `test_cycle_check_rejects_direct_loop` — adding A to A rejected by the
`no_self` CHECK or by the cycle CTE.
4. `test_cycle_check_rejects_two_step_loop` — A∋B, B∋C, attempting C∋A
rejected.
5. `test_cycle_check_rejects_eight_step_loop` — same with longer chain.
6. `test_depth_cap_at_8` — adding a 9th level rejected.
7. `test_transitive_expansion_includes_indirect_groups` — A∋B, B∋C, U∈A
returns {A, B, C} (plus U and Internal).
8. `test_internal_group_implicit_for_internal_users` — non-external user's
expansion contains `INTERNAL_GROUP_ID`; external user's doesn't.
9. `test_virtual_group_cannot_be_deleted` — service rejects delete on the
Internal group.
10. `test_member_can_be_user_or_group_but_not_both` — XOR check.
### Integration tests
11. `test_authz_cascades_through_group` — Alice in group G; G has read grant
on file F; AuthorizationEngine::check returns Allow.
12. `test_authz_cascades_through_nested_group` — Alice in B, B in A, A has
grant. Expect Allow.
13. `test_grant_revoked_when_group_deleted` — delete G; previous
G-mediated grants no longer apply (FK CASCADE).
14. `test_user_removed_from_group_loses_access_after_cache_ttl` — remove
Alice from G; within 30s old answer may persist; after TTL, denied.
15. `test_internal_group_grant_visible_to_all_internal` — grant `read` on
file F to `INTERNAL_GROUP_ID`; every internal user can read F; no
external user can.
### API tests (Hurl)
16. `tests/api/groups_admin_only.hurl` — non-admin POST /api/groups → 403.
17. `tests/api/groups_crud_happy_path.hurl` — create, list, get, rename,
delete.
18. `tests/api/groups_member_lifecycle.hurl` — add user, add nested
group, remove user, remove nested group.
19. `tests/api/groups_invalid_name.hurl` — name with space → 400.
## Verification
Pre-commit:
```bash
cargo fmt --all
cargo clippy --all-features --all-targets -- -D warnings
cargo test --workspace
biome check --fix static/js/
stylelint static/css/
tsc -p jsconfig.json --noEmit
```
End-to-end smoke test (manual; v1 is API-driven):
1. `docker compose up -d postgres`.
2. `cargo run`.
3. Obtain an admin JWT (log in via the existing login flow, copy the access
token).
4. Create a group:
```
curl -X POST /api/groups -H 'Authorization: Bearer …' \
-d '{"name":"engineering"}'
```
5. Confirm name validation rejects `Engineering Team` (returns 400 with
`error_code: group_name_invalid`).
6. Add yourself as a member:
```
curl -X POST /api/groups/<gid>/members -d '{"user_id":"<you>"}'
```
7. Create a second group `qa`, then add `engineering` as a nested member of
`qa`. Confirm with `GET /api/groups/<qa_id>/members`.
8. Attempt to add `qa` as a member of `engineering` — expect 400 with
`error_code: group_cycle`.
9. In the browser, open a file → share dialog → type `eng`. The
`engineering` group should appear with the layer-group icon. Pick it
and grant `read`.
10. Log in as a user who is a member of `engineering` (directly or via
`qa` cascading) — confirm the file is accessible.
11. `DELETE /api/groups/<gid>/members/user/<uid>`. After 30 seconds (cache
TTL), confirm access is denied.
12. Grant `read` on a file to the `Internal` virtual group (`subject_id`
= `00000000-0000-0000-0000-000000000001`). Confirm every internal user
has access. Confirm an external user (if available) does not.
13. `journalctl -t oxicloud | grep audit` (or equivalent log inspection) —
confirm one structured log line per group mutation, with the
`target="audit"` and `event="group.*"` fields.
## Critical files to be modified
**New files:**
- `migrations/20260612000000_subject_groups.sql`
- `src/domain/entities/subject_group.rs`
- `src/domain/repositories/subject_group_repository.rs`
- `src/infrastructure/repositories/pg/subject_group_pg_repository.rs`
- `src/application/services/subject_group_service.rs`
- `src/interfaces/api/handlers/subject_group_handler.rs`
- `tests/api/groups_*.hurl`
**Modified files:**
- `src/application/ports/authorization_ports.rs` — add `expand_subject`.
- `src/infrastructure/services/pg_acl_engine.rs` — add Moka cache field,
implement `expand_subject`, modify `folder_cascade_grant_exists` (lines
92–121) and `file_cascade_grant_exists` (lines 125–168) to use
`subject_id = ANY($caller_plus_groups)`.
- `src/common/di.rs` — wire `SubjectGroupService` into `AppState`, pass
user-repo into `PgAclEngine` constructor.
- `src/interfaces/api/routes.rs` — register the new handler.
- `src/interfaces/middleware/` — extract `require_admin` shared helper
from `admin_handler.rs:64-100`.
- `static/js/components/shareModal.js` — parallel `/api/groups/search`
call around line 310 to surface groups in the recipient autocomplete.
- `static/locales/en.json` + 15 locale files — new `errors.group_*` keys
for API error rendering.
(No changes to `static/admin.html` or `static/js/views/admin/admin.js` in
v1 — admin UI is v2 work.)
## Reused utilities
- `AppState.authorization` (Arc<PgAclEngine>) — existing DI wiring.
- `admin_handler::admin_guard` pattern (`admin_handler.rs:64-100`) — extract
shared.
- `moka` 0.12.15 (`Cargo.toml:38`) — already present.
- `tracing::info!` — existing observability pipeline; just add the
`target: "audit"` convention.
- `ResourceListComponent` and `userVignette` — already used by other
admin tables; reuse for the Groups admin table.
- Recursive CTE pattern — new to OxiCloud but standard Postgres.
- `auth.users.role = 'admin'` ENUM check — admin guard.
docs/plan/User-Image-support.md
-298
View File
@@ -1,298 +0,0 @@
# Plan: User Avatar / Image Support
## Context
Users need to be able to set a profile photo (avatar). The image must:
- Be stored as a URL (`https://…`, `http://…`) or data URI (`data:image/(png|webp|jpeg);base64,…`)
- Match the CardDAV `PHOTO` format so the system address book exports it correctly
- Be editable **only** for local (username+password) accounts
- Be **synced automatically from OIDC** `picture` claim on every login for OIDC accounts
- Surface in `userVignette` components (owner column, ShareModal member rows)
Currently: no `image` column on `auth.users`, no `picture` claim extraction in OIDC, profile page shows initials only, `user_to_contact()` hardcodes `photo_url: None`.
---
## Execution order
### 1. DB Migration
**New file:** `migrations/20260526000000_add_user_image.sql`
```sql
ALTER TABLE auth.users ADD COLUMN IF NOT EXISTS image TEXT;
```
---
### 2. Domain Entity
**`src/domain/entities/user.rs`**
- Add `image: Option<String>` field
- `User::new()` and `User::new_oidc()` — initialise to `None`
- Add getter `pub fn image(&self) -> Option<&str>`
- Add setter `pub fn set_image(&mut self, image: Option<String>)`
- Add owned getter for persistence `pub fn image_owned(&self) -> Option<String>`
---
### 3. User Repository
**`src/infrastructure/repositories/pg/user_pg_repository.rs`**
- Add `image` to every `SELECT` that builds a `User` (row-mapper)
- Extend the `UPDATE` SQL in `update_user()` to include `image = $11`
- Add dedicated: `async fn update_image(&self, user_id: Uuid, image: Option<String>) -> Result<(), DomainError>`
---
### 4. OIDC: extract `picture` claim
**`src/application/ports/auth_ports.rs`**
- Add `pub picture: Option<String>` to `OidcIdClaims`
**`src/infrastructure/services/oidc_service.rs`**
- Add `picture: Option<String>` to both `IdTokenClaims` and `UserInfoResponse` structs
- Pass `picture` into the returned `OidcIdClaims`
**`src/application/services/auth_application_service.rs`** — in `oidc_callback()`:
- **Create path**: pass `claims.picture` to `User::new_oidc()`
(or call `user.set_image(claims.picture.clone())` before persisting)
- **Update path**: always call `user.set_image(claims.picture.clone())` then persist
(OIDC image is always authoritative — overwrite even if user had set one before)
---
### 5. User DTO
**`src/application/dtos/user_dto.rs`**
Add two fields to `UserDto`:
```rust
pub image: Option<String>,
pub can_edit_image: bool, // true iff !user.is_oidc_user()
```
Populate in `UserDto::from(user)`.
---
### 6. Validation helper (shared)
In the auth application service (or a small `validation.rs` module in `src/common/`):
```rust
fn validate_image_url(image: &str) -> bool {
image.starts_with("https://")
|| image.starts_with("http://")
|| image.starts_with("data:image/png;base64,")
|| image.starts_with("data:image/webp;base64,")
|| image.starts_with("data:image/jpeg;base64,")
}
```
Max length for data URIs: **10 KB** (10 608 bytes) to prevent DB abuse — a 1à4×104 WebP at quality 0.85 is well under this; a raw PNG could exceed it so the client must resize/compress first.
---
### 7. Auth Application Service — new method
**`src/application/services/auth_application_service.rs`**
```rust
pub async fn update_user_image(
&self,
caller_id: Uuid,
image: Option<String>,
) -> Result<(), AppError>
```
Logic:
1. Load user from repository
2. If `user.is_oidc_user()` → return `AppError::Forbidden`
3. If `image.is_some()` → validate format + length; return `AppError::Validation` if invalid
4. Call `user_repository.update_image(caller_id, image).await`
---
### 8. Auth Handler + Route
**`src/interfaces/api/handlers/auth_handler.rs`**
New DTO (inline or in a dto file):
```rust
#[derive(Deserialize)]
pub struct UpdateUserImageDto {
pub image: Option<String>, // None = clear the image
}
```
New handler `update_user_image` — pattern mirrors `change_password`:
- Extract `CurrentUserId`, JSON body
- Call service method
- Map `AppError::Forbidden` → 403, `AppError::Validation` → 422, else 200
**`src/interfaces/api/routes.rs`** — in `auth_protected_routes()`:
```rust
.route("/me/image", put(update_user_image))
```
---
### 9. System Address Book
**`src/interfaces/api/handlers/contacts_handler.rs`** — `user_to_contact()`:
```rust
photo_url: user.image.clone(), // was: None
```
---
### 10. Frontend — `systemUsers.js`
**`static/js/model/systemUsers.js`**
- Add `let _photoIndex = null;` (`Map<string, string|null>`)
- In `_ensureIndex()`: build `_photoIndex` from `c.photo_url` alongside the name map
- Inject current user's photo from `localStorage.getItem('oxicloud_user')?.image`
- Add `async function getPhoto(userId): Promise<string|null>`
- Export `{ prefetch, getDisplayName, getPhoto, isAvailable }`
---
### 11. Frontend — `userVignette.js`
**`static/js/components/userVignette.js`**
In `createUserVignette(userId, size)`:
- After async name resolves, also await `systemUsers.getPhoto(userId)`
- If photo URL is truthy: replace the initials text with `<img src="…" alt="…">` inside `user-vignette__avatar`
- Wire `onerror` on the img to fall back to initials (guard against broken URLs)
CSS addition in `userVignette.css`:
```css
.user-vignette__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
```
---
### 12. Frontend — User Menu (top-right)
**`static/js/app/userMenu.js`** — `updateUserMenuData()`:
- Read `user.image` from the stored `oxicloud_user` in localStorage
- `#user-avatar` (38 px circle): if `user.image` is set, replace inner HTML with `<img src="…" alt="…">` instead of initials text; wire `onerror` fallback to initials
- `#user-menu-avatar` (48 px circle in dropdown): same treatment
- When `profile.js` saves a new image successfully, it must also refresh the stored `oxicloud_user` in localStorage (re-fetch `/api/auth/me` and update) then call `updateUserMenuData()`
**`static/css/components/userMenu.css`** — add inside the file:
```css
.user-avatar img,
.user-menu-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
```
---
### 13. Frontend — Image resize helper (new shared utility)
**`static/js/utils/imageResize.js`** — new file
```js
/**
* Load a File/Blob as an Image, draw it on a Canvas, resize to fit within
* MAX_SIZE × MAX_SIZE, and return a data URI.
*
* @param {File} file
* @param {number} [maxSize=102]
* @returns {Promise<string>} data:image/webp;base64,… (or jpeg fallback)
*/
export async function resizeImageToDataUrl(file, maxSize = 104)
```
Logic:
1. Read file with `FileReader` → data URL
2. Create `<img>` element and wait for `onload`
3. Compute output dimensions: scale down proportionally if either dimension > `maxSize`; never scale up
4. Draw onto `OffscreenCanvas` (or regular `<canvas>`) at the computed size
5. Export with `canvas.toBlob('image/webp', 0.85)` (fallback to `image/jpeg` if WebP not supported)
6. Convert Blob → base64 data URI via `FileReader`
Accepts only MIME types: `image/png`, `image/webp`, `image/jpeg` — reject others with a thrown `Error`.
---
### 14. Frontend — Profile Page
**`static/profile.html`**
- Make `#p-avatar` support both `<img>` and initials text
- Add edit button (pencil icon) visible only when `user.can_edit_image === true`
- Add collapsible edit panel with **two input modes** (tabs or toggle):
- **URL tab**: `<input type="url" id="p-image-url" placeholder="https://…">` with validation hint
- **Upload tab**: `<input type="file" id="p-image-file" accept="image/png,image/jpeg,image/webp">` + live preview thumbnail
- Save / Cancel / Remove (clear) buttons
**`static/js/views/profile/profile.js`**
*Display:*
- If `user.image`: set `#p-avatar` to `<img src="…">` (with `onerror` → initials fallback)
- If `user.can_edit_image`: show edit pencil
- For OIDC users: show photo if `user.image` set; show "Managed by your identity provider" note; no edit controls
*URL mode save:*
- Validate prefix client-side (`https://`, `http://`, `data:image/…;base64,`)
- `PUT /api/auth/me/image` with `{ image: url || null }`
*Upload mode save:*
- On file selection: call `resizeImageToDataUrl(file, 104)` from the new utility
- Show preview in a `<img id="p-image-preview">` (hidden until file chosen)
- On Save: send resulting data URI via `PUT /api/auth/me/image` with `{ image: dataUri }`
- Show progress indicator during resize + upload (data URIs for a 104×104 WebP are ~2-5 kB)
*After successful save (both modes):*
- Re-fetch `/api/auth/me`, update `oxicloud_user` in localStorage
- Call `updateUserMenuData()` to refresh top-right avatar immediately
- Collapse the edit panel and update `#p-avatar` in-place
---
## Files to modify / create
| File | Action |
|---|---|
| `migrations/20260526000000_add_user_image.sql` | **CREATE** |
| `src/domain/entities/user.rs` | add `image` field + getter/setter |
| `src/infrastructure/repositories/pg/user_pg_repository.rs` | add to SELECT/UPDATE + `update_image()` |
| `src/application/ports/auth_ports.rs` | add `picture` to `OidcIdClaims` |
| `src/infrastructure/services/oidc_service.rs` | add `picture` to claims structs |
| `src/application/services/auth_application_service.rs` | OIDC sync + `update_user_image()` |
| `src/application/dtos/user_dto.rs` | add `image`, `can_edit_image` |
| `src/interfaces/api/handlers/auth_handler.rs` | `update_user_image` handler |
| `src/interfaces/api/routes.rs` | register `PUT /auth/me/image` |
| `src/interfaces/api/handlers/contacts_handler.rs` | `user_to_contact()` maps `image` → `photo_url` |
| `static/js/model/systemUsers.js` | add `_photoIndex`, `getPhoto()` |
| `static/js/components/userVignette.js` | render `<img>` when photo available |
| `static/css/components/userVignette.css` | add `img` rule inside avatar |
| `static/js/utils/imageResize.js` | **CREATE** — Canvas resize → WebP/JPEG data URI |
| `static/profile.html` | avatar image + URL input + file upload + preview |
| `static/js/views/profile/profile.js` | photo display + URL/upload edit flow + post-save menu refresh |
| `static/js/app/userMenu.js` | render `<img>` in both avatar circles when `user.image` present |
| `static/css/components/userMenu.css` | add `img` cover rule for `.user-avatar` and `.user-menu-avatar` |
---
## Verification
```bash
# Backend
cargo fmt --all
cargo clippy --all-features --all-targets -- -D warnings
cargo test
# Frontend
biome lint static/js/
tsc -p jsconfig.json --noEmit
stylelint static/css/
```
**Smoke tests:**
1. Local user → profile page → edit image → paste `https://example.com/me.jpg` → Save → avatar shows photo
2. Local user → paste `data:image/png;base64,…` → Save → works
3. Local user → paste invalid string → Save → 422 error shown
4. Local user → clear image (empty) → Save → avatar reverts to initials
5. OIDC user → `picture` claim present → after login, `GET /api/auth/me` returns `image` → profile shows photo, no edit button
6. OIDC user → `picture` claim absent → `image` is null → profile shows initials
7. SharedWithMe owner column → users with photos show `<img>`, others show initials
8. ShareModal People section → member avatars show photos where available
9. CardDAV client sync → system address book contact has `PHOTO` property set
10. After saving a photo on the profile page → top-right avatar button and dropdown header both update immediately without a page reload
11. Upload a large PNG (e.g. 2000×2000) → client resizes to 104×104 WebP, preview appears, Save sends data URI, backend accepts (< 10 KB)
12. Upload a 300×300 image → client does NOT upscale, stores at original dimensions
13. Upload a non-image file (PDF) → rejected client-side before any network call
docs/plan/User-Lifecycle.md
-358
View File
@@ -1,358 +0,0 @@
# Plan — `UserLifecycleHook` + `is_external` flag
## Context
Today four code paths in `auth_application_service.rs` each call `create_personal_folder()` immediately after inserting an `auth.users` row: public `register`, `setup_create_admin`, admin `create_user`, and OIDC JIT (lines 283, 360, 832, 1277). A fifth self-heal at `folder_service.rs:350-365` retries home-folder creation when listing root folders returns empty. Five places, one concern, no shared abstraction — and adding a future service (calendar, address book, GPG keyring, external-user provenance for the upcoming magic-link feature) would have to touch all five again.
Separately, the upcoming "share with `external@example.com`" feature needs `auth.users` to distinguish recipients-with-no-storage from real internal users. The codebase already declares `Subject::External` (`domain/services/authorization.rs`) but no DB representation exists yet.
This plan introduces a `UserLifecycleHook` trait (mirroring the existing `FileLifecycleHook` / `BlobLifecycleHook` pattern at `application/ports/file_lifecycle.rs`), wires a dispatcher into the four lifecycle events, migrates the scattered eager work into services that own their own lifecycle (each implementing the trait with explicit no-ops for events they don't care about), and adds the `is_external` boolean to `auth.users` so hooks can short-circuit for non-internal users. The change is purely a refactor at first — behaviour is preserved — but it sets up the v2 external-user flow to land as a hook impl rather than a new auth code path.
## Design
### Trait shape
The trait diverges from `FileLifecycleHook`'s sync fire-and-forget model on purpose: file events fire on every upload (hot path, fire-and-forget appropriate); user events are rare (login is seconds-per-user, not requests-per-second) and some require synchronous semantics (provisioning must finish before the session token is returned; deletion cleanup must commit atomically with the user DELETE). The trait is async; the dispatcher decides per-event whether errors abort the flow.
```rust
// src/application/ports/user_lifecycle.rs (new)
#[async_trait]
pub trait UserLifecycleHook: Send + Sync {
/// Short identifier used in tracing / error logs. e.g. "home_folder".
fn name(&self) -> &'static str;
/// Fires once after INSERT into auth.users succeeds, regardless of path.
async fn on_user_created(&self, user: &User) -> Result<(), DomainError>;
/// Fires after every successful authentication, before the session
/// token is returned. MUST be idempotent (safety net for services
/// added after the user existed).
async fn on_user_login(&self, user: &User) -> Result<(), DomainError>;
/// Fires on every session termination. `reason` lets hooks
/// distinguish causes (audit cares; cache invalidation does not).
async fn on_user_logout(&self, user: &User, reason: LogoutReason)
-> Result<(), DomainError>;
/// Fires inside the same transaction as the auth.users DELETE.
/// Returning Err aborts the deletion. `mode` distinguishes admin
/// delete (policy-driven cleanup) from GDPR purge (force everything).
async fn on_user_deleted(
&self,
user: &User,
mode: DeletionMode,
tx: &mut sqlx::Transaction<'_, sqlx::Postgres>,
) -> Result<(), DomainError>;
}
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum LogoutReason {
UserInitiated, // explicit logout
SessionExpired, // TTL hit
AdminRevoked, // single-session revocation by admin
AccountDisabled, // user.active flipped to FALSE → all sessions revoked
PasswordChanged, // sibling sessions invalidated by a password change
TokenReused, // session-family reuse detection (existing feature)
}
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum DeletionMode { AdminDelete, GdprPurge }
```
**No default impls.** Every hook must declare all four methods. Use explicit `Ok(())` for events you don't care about — matches the FileLifecycleHook convention and forces conscious acknowledgement.
### Dispatcher
```rust
// src/application/services/user_lifecycle_service.rs (new)
pub struct UserLifecycleService {
hooks: Vec<Arc<dyn UserLifecycleHook>>,
}
impl UserLifecycleService {
pub fn new() -> Self { Self { hooks: Vec::new() } }
pub fn with_hook(mut self, hook: Arc<dyn UserLifecycleHook>) -> Self {
self.hooks.push(hook); self
}
// Per-event dispatchers with event-specific failure semantics:
/// Created: log-and-continue. Next login's `on_user_login` retries
/// idempotently if anything fails here.
pub async fn dispatch_created(&self, user: &User) {
for h in &self.hooks {
if let Err(e) = h.on_user_created(user).await {
tracing::error!(target: "user_lifecycle",
hook = h.name(), user_id = %user.id(), error = %e,
"on_user_created failed; will retry on next login");
}
}
}
/// Login: log-and-continue. Same reasoning.
pub async fn dispatch_login(&self, user: &User) { /* same shape */ }
/// Logout: fire-and-forget (spawned), errors logged. The HTTP
/// response shouldn't wait for cache flushes.
pub fn dispatch_logout(&self, user: User, reason: LogoutReason) {
let hooks = self.hooks.clone();
tokio::spawn(async move {
for h in &hooks {
if let Err(e) = h.on_user_logout(&user, reason).await {
tracing::error!(target: "user_lifecycle",
hook = h.name(), reason = ?reason,
user_id = %user.id(), error = %e,
"on_user_logout failed");
}
}
});
}
/// Deleted: propagate first Err to abort the transaction.
pub async fn dispatch_deleted(
&self,
user: &User,
mode: DeletionMode,
tx: &mut sqlx::Transaction<'_, sqlx::Postgres>,
) -> Result<(), DomainError> {
for h in &self.hooks {
h.on_user_deleted(user, mode, tx).await?;
}
Ok(())
}
}
```
### `is_external` flag (additive migration)
New migration `migrations/20260612000002_auth_users_is_external.sql`:
```sql
-- Adds the is_external flag distinguishing storage-owning internal users
-- from grant-only external users (magic-link / OIDC-only / future OCM).
ALTER TABLE auth.users
ADD COLUMN IF NOT EXISTS is_external BOOLEAN NOT NULL DEFAULT FALSE;
-- Partial index — most queries are "list internal users" or "list
-- external users for GDPR purge", never an unfiltered scan.
CREATE INDEX IF NOT EXISTS idx_users_is_external_login
ON auth.users (is_external, last_login_at)
WHERE is_external = TRUE;
-- Guard against accidental storage attribution to external users.
ALTER TABLE auth.users
ADD CONSTRAINT users_external_no_storage
CHECK (NOT is_external OR storage_used_bytes = 0);
```
User entity (`src/domain/entities/user.rs`):
- Add `is_external: bool` field
- Add getter `pub fn is_external(&self) -> bool`
- Add factory `User::new_external(username, email, ...)` for the magic-link flow
- Existing factories (`User::new(...)`) default `is_external = false`
The `Subject::External(uuid)` variant in `domain/services/authorization.rs` becomes redundant once external users live in `auth.users` and are addressed as `Subject::User(uuid)`. Deprecate it in a follow-up — out of scope here to avoid scope creep.
### Concrete hook implementations
**Each hook impl lives in the module of the service that owns the work**, matching the existing convention (`ThumbnailRefreshHook` lives in `src/infrastructure/services/thumbnail_service.rs`; `AudioMetadataService impl FileLifecycleHook` lives in `audio_metadata_service.rs`). There is **no centralised `lifecycle/` directory** — that would invert ownership and make "lifecycle" look like the owner of folder-creation policy when really the folder service owns it.
All four trait methods are explicit per impl; no-ops are `Ok(())` one-liners.
| Hook | Lives in | Responsibility |
|---|---|---|
| `HomeFolderLifecycleHook` | `src/application/services/folder_service.rs` (same module as `FolderService`) | Replaces the 4 eager `create_personal_folder` calls + the self-heal. `on_user_created` & `on_user_login`: if `!user.is_external()` and home folder missing, create "My Folder - {username}". `on_user_deleted` (AdminDelete): trash the home folder. `on_user_deleted` (GdprPurge): hard-delete folder + files. `on_user_logout`: `Ok(())`. |
| `AuthzCacheLifecycleHook` | `src/infrastructure/services/pg_acl_engine.rs` (same module as the Moka cache it invalidates) | Wraps `Arc<PgAclEngine>`. `on_user_logout` & `on_user_deleted`: `engine.invalidate_user_groups_cache(user.id())` (new public method on the engine — one line `self.user_groups_cache.invalidate(id).await`). `on_user_created` & `on_user_login`: `Ok(())`. |
| `AuditLifecycleHook` | `src/application/services/user_lifecycle_service.rs` (co-located with the dispatcher — cross-cutting, no domain owner) | All four events: `tracing::info!(target: "audit", event = "user.{created\|login\|logout\|deleted}", user_id = %user.id(), is_external = user.is_external(), ...)`. Stays one place for user-lifecycle audit. |
| `SessionRevocationLifecycleHook` | The session-service module (e.g. `src/application/services/session_service.rs` or wherever `revoke_all_user_sessions` lives — verify at PR-write time) | `on_user_deleted`: explicit `session_storage.revoke_all_user_sessions(user.id(), tx)` for traceable audit (the FK CASCADE would do it but produces no per-session audit event). `on_user_logout` / `on_user_login` / `on_user_created`: `Ok(())`. |
| `ExternalIdentityLifecycleHook` *(stubbed; populated by the magic-link PR later)* | A future external-identity service module (created with the magic-link PR sequence; for the stub PR, place it in `src/application/services/external_identity_service.rs` as a new module) | `on_user_login`: if `user.is_external()`, bump a `last_verified_at` column on a future `auth.user_external_identity` side-table. Other events: `Ok(())`. Lands as no-op now so the slot exists. |
**Why owner-located, not lifecycle-located**: it preserves the rule that "code about folders lives in the folder module". A future maintainer reading the folder service sees the lifecycle reactions next to the rest of the folder logic. It also makes a future workspace split (see "Crate-split note" at the end of this plan) almost free — each domain takes its hooks with it.
### Tips for hook implementors
These belong in the module-level docstring of `application/ports/user_lifecycle.rs` so the next maintainer reading the trait sees them in IDE hover.
1. **First-ever login detection.** `on_user_login` fires after credentials validate but **before** `user.last_login_at` is updated for this session. So `user.last_login_at().is_none()` is a reliable "this is the first login since account creation" signal. Use it for welcome emails, one-shot default-folder seeding, "complete your profile" prompts, etc.
2. **External-user short-circuit.** Every hook that provisions or manages user-owned resources (folders, calendars, address books) should start with `if user.is_external() { return Ok(()); }`. External users are grant-only; they don't own storage. The `CHECK (NOT is_external OR storage_used_bytes = 0)` constraint catches violations at the DB level.
3. **Idempotency is mandatory.** `on_user_login` fires on every successful authentication. A hook that creates a resource must first check whether the resource already exists. Examples: `HomeFolderLifecycleHook` does `if folder_exists(user_id) { return Ok(()); }` before calling `create_home_folder`. `AuthzCacheLifecycleHook::on_user_logout` is naturally idempotent (cache `invalidate` is a no-op on a missing key).
4. **First call after `is_external = TRUE → FALSE`.** When admin converts an external user to internal (`UPDATE auth.users SET is_external = FALSE`), the user's next login fires `on_user_login` with the new flag value. The home-folder hook sees `!is_external` and that no folder exists → creates it. No special "convert" event needed; idempotency carries the load.
5. **Per-session logout firing.** Disabling a user revokes N sessions in a loop. The dispatcher fires `on_user_logout` **once per session revoked**, all with `reason = AccountDisabled`. Hook implementors must accept N redundant calls (idempotent invalidation, idempotent audit) — do **not** assume "one logout = one user state change". The same applies to `revoke_all_user_sessions` on password change.
6. **Failure swallowing on create/login.** If your hook returns `Err`, the user is still created / logged in; only your hook's effect is delayed. Log enough detail (`tracing::error!`) that a subsequent investigation can identify the user and retry manually. Failure on `on_user_deleted` aborts the transaction — be conservative about returning Err there.
7. **No transaction handle on create/login/logout.** Only `on_user_deleted` gets `&mut Transaction` because deletion is the only event with hard atomic-with-DB requirements. Other hooks open their own connections / pools as needed. This keeps the trait surface minimal.
8. **Hook registration is at DI time.** Hook order is registration order; document this in the DI factory if you ever add an ordering dependency (e.g., HomeFolderLifecycleHook before any future hook that wants to write to that folder).
## Documentation
A new architecture page `docs/architecture/user-lifecycle.md` lands alongside the trait (in PR 1) and grows incrementally with each subsequent PR. Mirrors the structure of the existing `docs/architecture/file-and-blob-lifecycle.md` so readers familiar with the file-side pattern can navigate the user-side analog.
**Outline** (~150 lines):
1. **Context** — why hooks (replaces 4 scattered `create_personal_folder` calls + the self-heal; sets up the magic-link / external-user flow as a pluggable concern).
2. **The trait** — full signature, the 4 events, `LogoutReason` / `DeletionMode` enums.
3. **Dispatcher semantics** — per-event failure model (log-and-continue for created/login, fire-and-forget spawn for logout, abort-on-Err for deleted-in-transaction). Diagram.
4. **Implementation tips** (verbatim from the "Tips for hook implementors" section of this plan — first-login detection via `last_login_at.is_none()`, idempotency, external-user short-circuit, per-session logout firing, …).
5. **Owner-located convention** — explains why hooks live with their service module rather than a centralised `lifecycle/` directory, with the FileLifecycleHook precedent.
6. **Concrete hooks shipped today** — table of `HomeFolderLifecycleHook` / `AuthzCacheLifecycleHook` / `AuditLifecycleHook` / `SessionRevocationLifecycleHook` / `ExternalIdentityLifecycleHook` (stub) with one-line summaries and where each lives.
7. **Recommended future triggers** — the "future triggers" table from this plan (`on_user_password_changed`, `on_user_role_changed`, etc.) so v2 contributors see the design door.
8. **File map** — same shape as the file map at the bottom of `rebac-authorization.md`.
**VitePress sidebar update** in `docs/.vitepress/config.mts`. The Architecture section already lists "File and Blob lifecycle" (line 104); add immediately after:
```ts
{ text: "User lifecycle", link: "/architecture/user-lifecycle" },
```
**Incidental fix while we're in the file**: `docs/architecture/rebac-authorization.md` (created in a previous session) is missing from the sidebar. Add it in the same edit:
```ts
{ text: "ReBAC Authorization", link: "/architecture/rebac-authorization" },
```
Place it logically — probably right before "Share Integration" since shares depend on ReBAC concepts.
**Per-PR doc growth**:
- PR 1: sections 1, 2, 3, 4, 5 (trait, dispatcher, conventions) + the AuditLifecycleHook entry in section 6
- PR 2: short subsection in section 4 explaining the `is_external` short-circuit pattern
- PR 3: HomeFolderLifecycleHook entry in section 6, plus a worked example "what happens when a brand-new user logs in"
- PR 4: AuthzCacheLifecycleHook + SessionRevocationLifecycleHook entries, plus the `DeletionMode` section
- PR 5: ExternalIdentityLifecycleHook entry + a "this is a placeholder for the upcoming magic-link feature" note
Sidebar entry lands in PR 1; subsequent PRs only edit the markdown content.
## Migration sequencing (5 PRs)
**PR 1: trait + dispatcher + audit hook only.**
Lands the trait at `application/ports/user_lifecycle.rs`, the dispatcher at `application/services/user_lifecycle_service.rs`, and `AuditLifecycleHook` as the lone registered hook. Wires `dispatch_created` / `dispatch_login` / `dispatch_logout` / `dispatch_deleted` into the existing 4 auth code paths (no behaviour change for users; only audit log gains four new event types). Zero risk; validates plumbing.
**PR 2: `is_external` column + entity field.**
Migration `20260612000002_auth_users_is_external.sql`, `User::is_external` getter, factory variant, DTO field. All existing rows have `is_external = FALSE` from the column default; no breaking changes. New `POST /api/admin/users` accepts `is_external` (default `false`).
**PR 3: `HomeFolderLifecycleHook`.**
Register the hook. Remove the 4 eager `create_personal_folder` calls in `auth_application_service.rs:283 / 360 / 832 / 1277`. Remove the self-heal at `folder_service.rs:350-365`. Existing test suite should pass — folder still gets created, just by the hook now. The Hurl suite at `tests/api/run.sh` is the canary.
**PR 4: `AuthzCacheLifecycleHook` + `SessionRevocationLifecycleHook` + `on_user_deleted` policy.**
Adds the `pub fn invalidate_user_groups_cache(&self, id: Uuid)` method on `PgAclEngine`. Wires the two hooks. Adds `DeletionMode` switching to `HomeFolderLifecycleHook::on_user_deleted` (trash vs hard-delete). Admin-delete endpoint now passes `mode = AdminDelete`; a (future) GDPR sweeper passes `GdprPurge`.
**PR 5: `ExternalIdentityLifecycleHook` stub.**
Empty no-op hook landed in advance of the magic-link feature so the registration slot exists in DI. Populated in the magic-link PR sequence later.
After PR 3, the cleanup of `create_personal_folder` from `auth_application_service.rs` is complete and the service stops importing `FolderService` for that purpose.
## Recommended future triggers (DON'T ship now)
These are the events users / consumers will eventually want. Each has a "what would make us add it" rationale; absent that, **don't add the method to the trait** — every method adds a no-op to every hook impl forever.
| Future event | Why someone might want it | What would force adding it |
|---|---|---|
| `on_user_password_changed` | Notify the user via email; invalidate any cached credentials; trigger TOTP re-enrolment | A real per-user notification service. Today the password-change handler explicitly calls `revoke_all_user_sessions` which fires `on_user_logout(PasswordChanged)` for each session — sufficient for current consumers. |
| `on_user_role_changed` | Admin grants admin role → audit + maybe send "you're now an admin" email; admin demotion → revoke admin-only sessions | A multi-role system (today only `admin` / `user` exist). Currently a one-liner audit log at the admin handler covers it. |
| `on_user_email_changed` | External users: re-verify the new email via magic-link before trusting it; internal: notify both old and new addresses; update OIDC mapping | When external users start changing their email. Today email is immutable in the API. |
| `on_user_username_changed` | Update display names in audit logs that captured the old username; rename the home folder if it embeds the username | When username changes ship. Today username is immutable. |
| `on_user_avatar_changed` | Bust thumbnail caches downstream; sync to federated servers (OCM) | When OCM federation ships and remote partners need to learn about avatar changes. Today no downstream consumer. |
| `on_user_quota_changed` | Future per-service quota counters react to admin-changed limits | When quota becomes per-service (today it's a single global counter per user). |
| `on_user_disabled` / `on_user_enabled` | Audit-distinguishable state changes; pause per-user scheduled jobs | When per-user scheduled jobs land. Today `on_user_logout(AccountDisabled)` covers the only real consumer (sessions). Re-enable triggers `on_user_login` naturally. |
| `on_user_external_to_internal_converted` | Welcome email; provision the catalog of internal-only resources at conversion time rather than on next login | If admins routinely promote external users and the next-login lag is unacceptable. Today the idempotent `on_user_login` recheck handles conversion fine. |
| `on_user_oidc_linked` / `on_user_oidc_unlinked` | Audit; sync remote profile data | When users can link/unlink OIDC identities post-creation. Today OIDC linkage is fixed at user-creation time. |
| `on_user_2fa_enabled` / `on_user_2fa_disabled` | Audit; force re-login of other sessions | When 2FA ships. |
**Rule of thumb for adding any of these later**: add the trait method with a default `Ok(())` body so existing hooks don't need to declare it explicitly (one-time exception to the "no defaults" rule, paid forever after by IDE-discoverable docstrings on the new method). Make sure the docstring states whether it's await-or-spawn semantics and whether failure aborts the parent operation.
## Critical files
**New files** (per PR):
- PR 1: `src/application/ports/user_lifecycle.rs` (trait + `LogoutReason` + `DeletionMode` enums), `src/application/services/user_lifecycle_service.rs` (dispatcher + `AuditLifecycleHook` co-located inside), `docs/architecture/user-lifecycle.md` (architecture doc, outline above)
- PR 2: `migrations/20260612000002_auth_users_is_external.sql`
- PR 3: No new files — `HomeFolderLifecycleHook` is added as a new `impl UserLifecycleHook for ...` block inside the **existing** `src/application/services/folder_service.rs` (or a sibling `folder_lifecycle.rs` if folder_service.rs gets too large; verify line count at PR-write time)
- PR 4: No new files — `AuthzCacheLifecycleHook` added inside the existing `src/infrastructure/services/pg_acl_engine.rs`; `SessionRevocationLifecycleHook` added inside the session-service module
- PR 5: `src/application/services/external_identity_service.rs` (new module hosting the stub hook)
**Modified files**:
- `src/domain/entities/user.rs` (PR 2): add `is_external` field + getter + factory
- `src/application/services/auth_application_service.rs` (PRs 1, 3): wire dispatcher into the 4 create / 3 login / 2 logout / 1 delete sites; remove the 4 eager folder-creation calls in PR 3
- `src/application/services/folder_service.rs` (PR 3): add the `HomeFolderLifecycleHook` impl; remove the self-heal at lines 350-365 (now handled by the hook on next login)
- `src/infrastructure/services/pg_acl_engine.rs` (PR 4): add `pub fn invalidate_user_groups_cache(&self, id: Uuid)` exposing `user_groups_cache.invalidate(id)`; add the `AuthzCacheLifecycleHook` impl
- `src/common/di.rs` (PRs 1, 3, 4, 5): construct the `UserLifecycleService` with builder chain, mirror the `FileLifecycleService` registration pattern at lines 264-301
- `src/application/dtos/user_dto.rs` (PR 2): add `is_external: bool` field
- `src/interfaces/api/handlers/admin_handler.rs` (PR 2): accept `is_external` in `POST /api/admin/users` request body
- `docs/.vitepress/config.mts` (PR 1): add "User lifecycle" entry to the Architecture sidebar (line ~104). Also incidentally add the missing "ReBAC Authorization" entry that pre-dated this work
- `docs/architecture/user-lifecycle.md` (PRs 2, 3, 4, 5): grow the doc incrementally as each hook lands — `is_external` short-circuit note in PR 2, HomeFolderLifecycleHook section in PR 3, etc.
**Existing patterns to reuse**:
- Hook trait + dispatcher pattern: `src/application/ports/file_lifecycle.rs` + `src/application/services/file_lifecycle_service.rs` (the closest analog)
- DI builder chain: `src/common/di.rs:264-301` (FileLifecycleService construction)
- Audit tracing convention: `target: "audit"` events emitted by `src/application/services/subject_group_service.rs::create / rename / delete / add_member / remove_member`
- Per-cache invalidation method on engine: model after how `user_groups_cache` is accessed today in `src/infrastructure/services/pg_acl_engine.rs::expand_user`
## Verification
```bash
cargo fmt --all
cargo clippy --all-features --all-targets -- -D warnings
cargo test --workspace
biome check --fix static/js/
tsc -p jsconfig.json --noEmit
```
After PR 1 (smoke test the plumbing):
1. `cargo run`, then via the UI: register a new user, log in, log out, delete via admin.
2. `journalctl -t oxicloud | grep "target=user_lifecycle"` (or `RUST_LOG=user_lifecycle=info`) — exactly one event line per action.
After PR 3 (the migration of folder creation):
1. Hurl suite: `bash tests/api/run.sh` — all 13 test files still pass. `permissions.hurl` is the most relevant (it creates `bob` and verifies the home folder).
2. Manual: register a fresh user via the UI → home folder appears in the file list immediately. Then drop the home folder via SQL (`DELETE FROM storage.folders WHERE user_id = $1`), log out, log back in → folder reappears (the safety-net path).
3. Confirm via tracing that `dispatch_login` actually ran for an existing user whose folder was already there → no folder creation attempt, no error, just one `on_user_login` audit event.
After PR 4:
1. Authz cache: create a user, log them in, log them out. Inspect `RUST_LOG=oxicloud::infrastructure::services::pg_acl_engine=debug` — cache entry should be invalidated immediately on logout, not after 30s TTL.
2. User deletion: admin-deletes a user → verify (via audit log) that `on_user_deleted` ran inside the transaction and all sessions were revoked before the `auth.users` row vanished.
After PR 5: no functional change; just confirm `external_identity_hook.rs` compiles and registers in DI as a no-op.
## Out of scope (do NOT bundle into these 5 PRs)
- **The magic-link external-user flow itself.** Lands in a later sequence; this plan only prepares the schema (`is_external`) and the hook slot (`ExternalIdentityLifecycleHook` stub).
- **Removing `Subject::External` from the domain.** It's currently unused; the cleanup is a separate small PR after PR 2 demonstrates that external users live in `auth.users`.
- **GDPR sweeper.** The `DeletionMode::GdprPurge` variant exists in PR 4 but no sweeper is wired up — admin-delete uses `AdminDelete`. A scheduled sweeper is its own future work.
- **Moving the `active` flag transitions through a hook.** PR 4's `on_user_logout(AccountDisabled)` covers it; no `on_user_disabled` method is added (see "future triggers" section).
- **Side-table for OIDC/OCM provenance** (`auth.user_external_identity`). Lands with the magic-link PR; not needed for `is_external` alone.
## Crate-split note (forward-looking, NOT in this work)
OxiCloud is currently a single Rust crate (~50 kLOC). The lifecycle-hook restructuring above intentionally aligns with the natural domain boundaries (each hook lives with its service) so that a future workspace split is incremental rather than a rewrite. **Not on the table for this work, but worth recording the intended split axis** so subsequent refactors don't paint into a corner:
- **Split by domain bounded context, NOT by hexagonal layer.** Layered split (`oxicloud-domain` / `oxicloud-application` / etc.) makes the common case painful: adding a field to an entity touches 4 crates. Domain split (`oxicloud-files`, `oxicloud-auth`, `oxicloud-rebac`, …) makes the common case stay in one crate.
- Target shape, illustrative:
```
oxicloud-kernel ← errors, DI primitives, common port traits (incl. UserLifecycleHook)
oxicloud-auth ← users, sessions, OIDC, app passwords; dispatcher lives here
oxicloud-rebac ← groups, grants, engine; registers AuthzCacheLifecycleHook
oxicloud-files ← files, folders, blobs, dedup, thumbnails; registers HomeFolderLifecycleHook
oxicloud-sharing ← shares, magic-link, external identity
oxicloud-calendar ← caldav
oxicloud-contacts ← carddav
oxicloud-server ← Axum wire-up, the binary, DI composition root
```
Each domain crate is internally layered. Cross-crate communication goes through `oxicloud-kernel` port traits. The DI factory at `oxicloud-server` is where crates compose into the full application.
- **What today's lifecycle work buys for that future split**: zero rework on hook locations. `HomeFolderLifecycleHook` already lives next to `FolderService`, so it moves with `oxicloud-files`. `AuthzCacheLifecycleHook` moves with `oxicloud-rebac`. The dispatcher in `oxicloud-auth` only knows the trait, never the impls.
- **Cheap things to do now that help the future split**, but are NOT bundled here:
- Tighten visibility: prefer `pub(crate)` over `pub` wherever a type isn't intentionally part of the public surface. Catches accidental cross-module reaches at compile time.
- Per-domain port traits: today `application/ports/file_lifecycle.rs` is a file-concern port living in the layer dir; eventually it should live under the files-domain module. Refactor when adjacent ports are touched, not as a one-shot move.
- Avoid expanding `src/common/` — it tends to absorb anything-shared and become hard to split later.
These are convention recommendations for future PRs, not work items for this plan.
static/favicon.ico → frontend/static/favicon.ico
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 235 B

After

Width:  |  Height:  |  Size: 235 B

static/logo/apple-touch-icon.png → frontend/static/logo/apple-touch-icon.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

static/logo/logo-maskable.svg → frontend/static/logo/logo-maskable.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

static/logo/logo-plain.svg → frontend/static/logo/logo-plain.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 863 B

After

Width:  |  Height:  |  Size: 863 B

static/logo/maskable-192.png → frontend/static/logo/maskable-192.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

static/logo/maskable-512.png → frontend/static/logo/maskable-512.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

static/logo/og-image.png → frontend/static/logo/og-image.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

static/logo/og-image.svg → frontend/static/logo/og-image.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

static/manifest.webmanifest → frontend/static/manifest.webmanifest
View File
identifier.sh
-8
View File
@@ -1,8 +0,0 @@
while IFS= read -r -d '' file; do
if grep -Iq . "$file"; then
echo "===== $file ====="
cat "$file"
echo -e "\n"
fi
done < <(find . -type f -print0)
jsconfig.json
-25
View File
@@ -1,25 +0,0 @@
{
"compilerOptions": {
// Enable type checking on all JS files (equivalent to @ts-check globally)
"checkJs": true,
"allowJs": true,
"strict": true,
"noEmit": true,
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strictFunctionTypes": true,
"lib": ["ES2022", "DOM"],
// Treat all JS files as modules
"moduleDetection": "force",
"strictNullChecks": false, // too much pedantic...
"moduleResolution": "bundler",
"skipLibCheck": true,
"target": "ESNext"
},
"include": ["static/js/**/*.js" ],
"exclude": ["static/js/vendors/**", "static/js/vendors/**/*.mjs", "static/js/vendors/**/*.js" ]
}
justfile
+8 -38
View File
@@ -100,36 +100,10 @@ db:
db-down: db-down:
docker compose down docker compose down
# start OxiCloud with static assets in no-cache mode # Frontend design-system / a11y guardrails (pure Node, no deps). The entry
front-dev: # point the UI/UX workflow uses; delegates to `front-design`.
PROFILE=dev cargo run
# front: check all (linter, format, type, icons, translations...)
front-check: front-fmt front-lint front-type front-rules front-check-icons front-check-i18n frontend-check
# kept for compatibility
frontend-check: front-design frontend-check: front-design
front-fmt:
biome format static/
front-lint:
biome lint static/
# test types (JSDOC), using typescript
front-type:
tsc -p jsconfig.json --noEmit
# check CSS rules
front-rules:
stylelint static/css/
front-check-icons:
tools/check-icons.py --check-only
front-check-i18n:
tools/check-missing-translations.py --check-only
# end-to-end Playwright tests # end-to-end Playwright tests
front-test: front-test:
cd tests/e2e && npm test cd tests/e2e && npm test
@@ -138,14 +112,11 @@ front-test:
front-test-update-snapshot: front-test-update-snapshot:
cd tests/e2e && npm test -- --update-snapshots=all cd tests/e2e && npm test -- --update-snapshots=all
# Frontend design-system / a11y guardrails — pure Node, no extra deps. # Frontend design-system guardrails — pure Node, no extra deps, run against the
# Single gate: WCAG contrast, heading order, locale completeness, dead tokens, # SvelteKit frontend (frontend/). Locale completeness, dead-token report, and
# brand-mark drift. # brand-mark drift. For the full svelte-check/eslint/stylelint/prettier gate use
# (Also run `stylelint static/css/**/*.css`, `biome check`, `tsc -p jsconfig.json # `just fe-check` (needs the frontend devDependencies installed).
# --noEmit` once node_modules is installed — those need devDependencies.)
front-design: front-design:
node scripts/check-contrast.mjs
node scripts/check-headings.mjs
node scripts/check-locales.mjs node scripts/check-locales.mjs
node scripts/check-dead-tokens.mjs node scripts/check-dead-tokens.mjs
node scripts/check-brand-drift.mjs node scripts/check-brand-drift.mjs
@@ -157,9 +128,8 @@ api-test:
bash tests/webdav/run.sh bash tests/webdav/run.sh
# --------------------------------------------------------------------------- # ---------------------------------------------------------------------------
# New SvelteKit frontend (frontend/). The original vanilla frontend (static/) # SvelteKit frontend (frontend/) — the only frontend. These `fe-*` recipes
# and its `front-*` recipes remain until the Phase 5 cutover; these `fe-*` # drive its dev server, build, lint and tests.
# recipes drive the rewrite in the meantime.
# --------------------------------------------------------------------------- # ---------------------------------------------------------------------------
# install frontend dependencies # install frontend dependencies
scripts/check-brand-drift.mjs
+3 -3
View File
@@ -19,12 +19,12 @@ const sha16 = (s) => createHash('sha256').update(s).digest('hex').slice(0, 16);
// ── Locked baseline ───────────────────────────────────────────────────────── // ── Locked baseline ─────────────────────────────────────────────────────────
// Update INTENTIONALLY when the brand changes (and only then). // Update INTENTIONALLY when the brand changes (and only then).
const LOCK = { const LOCK = {
logoHash: '7fbd2016e9caeac1', // sha256(static/logo/logo-plain.svg)[:16] logoHash: '7fbd2016e9caeac1', // sha256(frontend/static/logo/logo-plain.svg)[:16]
gradient: 'linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%)' // --color-logo-gradient gradient: 'linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%)' // --color-logo-gradient
}; };
const logo = readFileSync(join(repo, 'static/logo/logo-plain.svg'), 'utf8'); const logo = readFileSync(join(repo, 'frontend/static/logo/logo-plain.svg'), 'utf8');
const vars = readFileSync(join(repo, 'static/css/base/variables.css'), 'utf8'); const vars = readFileSync(join(repo, 'frontend/src/lib/styles/base/variables.css'), 'utf8');
const gradMatch = vars.match(/--color-logo-gradient:\s*([^;]+);/); const gradMatch = vars.match(/--color-logo-gradient:\s*([^;]+);/);
const gradient = gradMatch ? gradMatch[1].trim().replace(/\s+/g, ' ') : '(token missing!)'; const gradient = gradMatch ? gradMatch[1].trim().replace(/\s+/g, ' ') : '(token missing!)';
scripts/check-contrast.mjs
-103
View File
@@ -1,103 +0,0 @@
#!/usr/bin/env node
// WCAG AA contrast guardrail.
//
// Resolves every text/background design token (through light-dark() and var()
// aliases) and fails (exit 1) if any text-on-surface or semantic text-on-tint
// pair drops below 4.5:1 in either light or dark mode. Keeps the palette from
// silently regressing into unreadable greys.
//
// node scripts/check-contrast.mjs
import { readFileSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const varsPath = join(
dirname(fileURLToPath(import.meta.url)),
'..',
'static',
'css',
'base',
'variables.css'
);
const src = readFileSync(varsPath, 'utf8');
/** First (\:root) definition of each token. */
const raw = {};
for (const m of src.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/gi)) {
if (!(m[1] in raw)) raw[m[1]] = m[2].trim();
}
function resolve(val, mode, depth = 0) {
if (depth > 12 || val == null) return null;
val = String(val).trim();
let m = val.match(/^light-dark\(\s*(.+?),\s*(.+)\)\s*$/);
if (m) return resolve(mode === 'light' ? m[1] : m[2], mode, depth + 1);
m = val.match(/^var\(\s*(--[a-z0-9-]+)\s*\)/);
if (m) return resolve(raw[m[1]], mode, depth + 1);
m = val.match(/^#([0-9a-fA-F]{3,8})\b/);
if (m) {
let h = m[1];
if (h.length === 3)
h = [...h].map((c) => c + c).join('');
return '#' + h.slice(0, 6).toLowerCase();
}
if (val === 'white') return '#ffffff';
if (val === 'black') return '#000000';
return null;
}
const lin = (c) => {
c /= 255;
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
};
const lum = (h) =>
0.2126 * lin(parseInt(h.slice(1, 3), 16)) +
0.7152 * lin(parseInt(h.slice(3, 5), 16)) +
0.0722 * lin(parseInt(h.slice(5, 7), 16));
const ratio = (fg, bg) => {
const a = lum(fg);
const b = lum(bg);
return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
};
const texts = [
'--color-text', '--color-text-heading', '--color-text-secondary', '--color-text-muted',
'--color-text-subtle', '--color-text-faint', '--color-text-placeholder', '--color-text-gray',
'--color-text-medium', '--color-text-light', '--color-text-faint2', '--color-text-dim', '--color-text-dark'
];
const bgs = [
'--color-bg-surface', '--color-bg-page', '--color-bg-hover', '--color-bg-input',
'--color-bg-subtle', '--color-bg-muted', '--color-bg-input-alt'
];
const semantic = [
['--color-success-text', '--color-success-bg'],
['--color-error-text', '--color-error-bg'],
['--color-warning-text', '--color-warning-bg'],
['--color-info-text', '--color-info-bg'],
['--color-accent-text', '--color-bg-surface'],
['--color-accent-text', '--color-bg-page'],
['--color-accent-text', '--color-bg-muted']
];
const fails = [];
for (const mode of ['light', 'dark']) {
for (const t of texts)
for (const b of bgs) {
const fg = resolve(raw[t], mode);
const bg = resolve(raw[b], mode);
if (fg && bg && ratio(fg, bg) < 4.5)
fails.push(`${mode}: ${t}(${fg}) on ${b}(${bg}) = ${ratio(fg, bg).toFixed(2)}`);
}
for (const [t, b] of semantic) {
const fg = resolve(raw[t], mode);
const bg = resolve(raw[b], mode);
if (fg && bg && ratio(fg, bg) < 4.5)
fails.push(`${mode}: ${t}(${fg}) on ${b}(${bg}) = ${ratio(fg, bg).toFixed(2)}`);
}
}
if (fails.length) {
console.error('✖ WCAG AA contrast failures (<4.5:1):\n ' + fails.join('\n '));
process.exit(1);
}
console.log('✓ All text/background token pairs pass WCAG AA (4.5:1) in light and dark.');
scripts/check-dead-tokens.mjs
+4 -4
View File
@@ -1,6 +1,6 @@
#!/usr/bin/env node #!/usr/bin/env node
// Dead-token report (informational, exit 0): design tokens defined in // Dead-token report (informational, exit 0): design tokens defined in
// variables.css but never referenced via var() anywhere in static/. // variables.css but never referenced via var() anywhere in frontend/src.
// //
// NOTE: a cleanup AID, not a hard gate — some tokens (file-type / calendar // NOTE: a cleanup AID, not a hard gate — some tokens (file-type / calendar
// colours) are referenced by JS string construction, so excluded prefixes are // colours) are referenced by JS string construction, so excluded prefixes are
@@ -11,17 +11,17 @@ import { readFileSync, readdirSync, statSync } from 'node:fs';
import { join, dirname } from 'node:path'; import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url'; import { fileURLToPath } from 'node:url';
const root = join(dirname(fileURLToPath(import.meta.url)), '..', 'static'); const root = join(dirname(fileURLToPath(import.meta.url)), '..', 'frontend', 'src');
const EXCLUDE_PREFIX = ['--color-ft-', '--color-cal-']; // referenced dynamically from JS const EXCLUDE_PREFIX = ['--color-ft-', '--color-cal-']; // referenced dynamically from JS
const varsSrc = readFileSync(join(root, 'css', 'base', 'variables.css'), 'utf8'); const varsSrc = readFileSync(join(root, 'lib', 'styles', 'base', 'variables.css'), 'utf8');
const defined = [...varsSrc.matchAll(/(--[a-z0-9-]+)\s*:/gi)].map((m) => m[1]); const defined = [...varsSrc.matchAll(/(--[a-z0-9-]+)\s*:/gi)].map((m) => m[1]);
function walk(dir, files = []) { function walk(dir, files = []) {
for (const name of readdirSync(dir)) { for (const name of readdirSync(dir)) {
const p = join(dir, name); const p = join(dir, name);
if (statSync(p).isDirectory()) walk(p, files); if (statSync(p).isDirectory()) walk(p, files);
else if (/\.(css|js|html|webmanifest)$/.test(name)) files.push(p); else if (/\.(css|svelte|ts|js|html|webmanifest)$/.test(name)) files.push(p);
} }
return files; return files;
} }
scripts/check-headings.mjs
-35
View File
@@ -1,35 +0,0 @@
#!/usr/bin/env node
// Heading-order guardrail: each page has at least one <h1> and never skips a
// level going deeper (e.g. h1 → h3 without an h2). Fails (exit 1) on violations.
//
// node scripts/check-headings.mjs
import { readFileSync, readdirSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const staticDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'static');
const pages = readdirSync(staticDir).filter((f) => f.endsWith('.html'));
let problems = 0;
for (const page of pages) {
const html = readFileSync(join(staticDir, page), 'utf8');
const levels = [...html.matchAll(/<h([1-6])\b/gi)].map((m) => Number(m[1]));
if (!levels.length) continue; // heading-less shells (error pages) are fine
const issues = [];
if (!levels.includes(1)) issues.push('no <h1>');
let prev = 0;
for (const lvl of levels) {
if (prev && lvl > prev + 1) issues.push(`skips h${prev}→h${lvl}`);
prev = lvl;
}
if (issues.length) {
problems++;
console.error(`${page}: ${issues.join(', ')} [order: ${levels.join(',')}]`);
}
}
if (problems) {
console.error(`\n✖ ${problems} page(s) with heading-order issues.`);
process.exit(1);
}
console.log('✓ All pages have an h1 and no skipped heading levels.');
scripts/check-locales.mjs
+7 -1
View File
@@ -10,7 +10,13 @@ import { readFileSync, readdirSync } from 'node:fs';
import { join, dirname } from 'node:path'; import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url'; import { fileURLToPath } from 'node:url';
const localesDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'static', 'locales'); const localesDir = join(
dirname(fileURLToPath(import.meta.url)),
'..',
'frontend',
'static',
'locales'
);
/** Flatten a nested translation object to dotted keys. */ /** Flatten a nested translation object to dotted keys. */
function flat(obj, prefix = '', out = {}) { function flat(obj, prefix = '', out = {}) {
scripts/gen-token-docs.mjs
+6 -3
View File
@@ -1,13 +1,16 @@
#!/usr/bin/env node #!/usr/bin/env node
// Generates docs/TOKENS.md — a grouped reference of every design token defined // Generates docs/TOKENS.md — a grouped reference of every design token defined
// in static/css/base/variables.css. Run after changing tokens: // in frontend/src/lib/styles/base/variables.css. Run after changing tokens:
// node scripts/gen-token-docs.mjs // node scripts/gen-token-docs.mjs
import { readFileSync, writeFileSync } from 'node:fs'; import { readFileSync, writeFileSync } from 'node:fs';
import { join, dirname } from 'node:path'; import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url'; import { fileURLToPath } from 'node:url';
const repo = join(dirname(fileURLToPath(import.meta.url)), '..'); const repo = join(dirname(fileURLToPath(import.meta.url)), '..');
const src = readFileSync(join(repo, 'static', 'css', 'base', 'variables.css'), 'utf8'); const src = readFileSync(
join(repo, 'frontend', 'src', 'lib', 'styles', 'base', 'variables.css'),
'utf8'
);
const tokens = []; const tokens = [];
for (const m of src.matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gim)) { for (const m of src.matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gim)) {
@@ -46,7 +49,7 @@ for (const [name, value] of tokens) {
let md = `# Design tokens let md = `# Design tokens
> Auto-generated from \`static/css/base/variables.css\` by \`scripts/gen-token-docs.mjs\`. > Auto-generated from \`frontend/src/lib/styles/base/variables.css\` by \`scripts/gen-token-docs.mjs\`.
> Do not edit by hand — re-run the generator after changing tokens. > Do not edit by hand — re-run the generator after changing tokens.
**${tokens.length} tokens** across ${[...buckets].filter(([, v]) => v.length).length} groups. **${tokens.length} tokens** across ${[...buckets].filter(([, v]) => v.length).length} groups.
src/common/di.rs
-1
View File
@@ -405,7 +405,6 @@ impl AppServiceFactory {
Arc::new(FileBlobWriteRepository::new( Arc::new(FileBlobWriteRepository::new(
db_pool.clone(), db_pool.clone(),
core.dedup_service.clone(), core.dedup_service.clone(),
folder_repo_concrete.clone(),
// Shared blob-hash cache: the write side invalidates entries // Shared blob-hash cache: the write side invalidates entries
// on content swaps/deletes so reads never serve stale blobs. // on content swaps/deletes so reads never serve stale blobs.
file_read_repository.blob_hash_cache(), file_read_repository.blob_hash_cache(),
src/infrastructure/repositories/pg/file_blob_write_repository.rs
-9
View File
@@ -19,7 +19,6 @@ use crate::common::errors::DomainError;
use crate::domain::entities::file::File; use crate::domain::entities::file::File;
use crate::domain::services::path_service::StoragePath; use crate::domain::services::path_service::StoragePath;
use super::folder_db_repository::FolderDbRepository;
use super::transaction_utils::retry_on_deadlock; use super::transaction_utils::retry_on_deadlock;
use crate::infrastructure::services::dedup_service::DedupService; use crate::infrastructure::services::dedup_service::DedupService;
@@ -27,11 +26,6 @@ use crate::infrastructure::services::dedup_service::DedupService;
pub struct FileBlobWriteRepository { pub struct FileBlobWriteRepository {
pool: Arc<PgPool>, pool: Arc<PgPool>,
dedup: Arc<DedupService>, dedup: Arc<DedupService>,
/// Retained on the struct after D0-8 inlined parent-folder lookups
/// directly via SQL; kept for now so D0's diff stays scoped to drive_id
/// + provenance plumbing. Slated for removal in a follow-up cleanup.
#[allow(dead_code)]
folder_repo: Arc<FolderDbRepository>,
/// Shared handle to `FileBlobReadRepository`'s file_id → blob_hash /// Shared handle to `FileBlobReadRepository`'s file_id → blob_hash
/// cache. Content swaps and hard deletes invalidate the mapping here /// cache. Content swaps and hard deletes invalidate the mapping here
/// so the read side can never serve a stale blob after a PUT update. /// so the read side can never serve a stale blob after a PUT update.
@@ -42,13 +36,11 @@ impl FileBlobWriteRepository {
pub fn new( pub fn new(
pool: Arc<PgPool>, pool: Arc<PgPool>,
dedup: Arc<DedupService>, dedup: Arc<DedupService>,
folder_repo: Arc<FolderDbRepository>,
hash_cache: Cache<String, String>, hash_cache: Cache<String, String>,
) -> Self { ) -> Self {
Self { Self {
pool, pool,
dedup, dedup,
folder_repo,
hash_cache, hash_cache,
} }
} }
@@ -65,7 +57,6 @@ impl FileBlobWriteRepository {
.unwrap(), .unwrap(),
), ),
dedup: Arc::new(DedupService::new_stub()), dedup: Arc::new(DedupService::new_stub()),
folder_repo: Arc::new(super::folder_db_repository::FolderDbRepository::new_stub()),
hash_cache: Cache::builder().max_capacity(10_000).build(), hash_cache: Cache::builder().max_capacity(10_000).build(),
} }
} }
src/interfaces/api/handlers/folder_handler.rs
+1 -145
View File
@@ -1,12 +1,10 @@
use axum::{ use axum::{
Json, Json,
body::Body,
extract::{Path, Query, State}, extract::{Path, Query, State},
http::{HeaderMap, Response, StatusCode, header}, http::{Response, StatusCode, header},
response::IntoResponse, response::IntoResponse,
}; };
use std::collections::HashMap; use std::collections::HashMap;
use std::hash::{Hash, Hasher};
use std::sync::Arc; use std::sync::Arc;
use tokio_util::io::ReaderStream; use tokio_util::io::ReaderStream;
@@ -18,10 +16,8 @@ use crate::application::dtos::folder_dto::{
CreateFolderDto, FolderDto, FolderResourceItemDto, FolderResourcesDto, FolderResourcesQuery, CreateFolderDto, FolderDto, FolderResourceItemDto, FolderResourcesDto, FolderResourcesQuery,
ListResourcesOptions, MoveFolderDto, RenameFolderDto, ListResourcesOptions, MoveFolderDto, RenameFolderDto,
}; };
use crate::application::dtos::folder_listing_dto::FolderListingDto;
use crate::application::dtos::grant_dto::{ResourceContentDto, ResourceTypeDto}; use crate::application::dtos::grant_dto::{ResourceContentDto, ResourceTypeDto};
use crate::application::dtos::pagination::PaginationRequestDto; use crate::application::dtos::pagination::PaginationRequestDto;
use crate::application::ports::file_ports::FileRetrievalUseCase;
use crate::application::ports::folder_ports::FolderUseCase; use crate::application::ports::folder_ports::FolderUseCase;
use crate::application::ports::trash_ports::TrashUseCase; use crate::application::ports::trash_ports::TrashUseCase;
use crate::application::services::folder_service::FolderService; use crate::application::services::folder_service::FolderService;
@@ -138,123 +134,6 @@ impl FolderHandler {
} }
} }
/// Compute a lightweight ETag from the maximum `modified_at` timestamp
/// and item count. No body buffering required.
fn compute_listing_etag(
folders: &[crate::application::dtos::folder_dto::FolderDto],
files: &[crate::application::dtos::file_dto::FileDto],
favorite_ids: &[String],
shared_ids: &[String],
) -> String {
let max_mod = folders
.iter()
.map(|f| f.modified_at)
.chain(files.iter().map(|f| f.modified_at))
.max()
.unwrap_or(0);
let count = folders.len() + files.len();
let mut hasher = std::collections::hash_map::DefaultHasher::new();
max_mod.hash(&mut hasher);
count.hash(&mut hasher);
// Badge state is part of the representation — fold it in (both slices are
// sorted, so the hash is stable) so a favorite/share change busts the ETag.
favorite_ids.hash(&mut hasher);
shared_ids.hash(&mut hasher);
format!("\"{:x}\"", hasher.finish())
}
/// Returns both sub-folders and files for a given folder in a single
/// response, eliminating the double-fetch the frontend used to make.
///
/// Both queries run concurrently via `tokio::join!`.
/// Supports `If-None-Match` / ETag for conditional responses (304).
pub(super) async fn list_folder_listing_impl(
State(state): State<Arc<GlobalAppState>>,
auth_user: AuthUser,
headers: HeaderMap,
Path(id): Path<String>,
) -> axum::response::Response {
let folder_service = &state.applications.folder_service;
let file_service = &state.applications.file_retrieval_service;
// Run both queries concurrently — no sequential wait.
let (folders_result, files_result) = tokio::join!(
folder_service.list_folders_with_perms(Some(&id), auth_user.id),
file_service.list_files_with_perms(Some(&id), auth_user.id)
);
match (folders_result, files_result) {
(Ok(folders), Ok(files)) => {
// Badge enrichment for this listing: which items the caller has
// favorited / shared. Two batched, index-backed queries (run
// concurrently) replace the client's old per-navigation global
// favorites + outgoing-shares fetches — correct (no 200-item
// ceiling) and scoped to just the items on screen.
let fav_pairs: Vec<(&str, &str)> = folders
.iter()
.map(|f| (f.id.as_str(), "folder"))
.chain(files.iter().map(|f| (f.id.as_str(), "file")))
.collect();
let resource_uuids: Vec<uuid::Uuid> = folders
.iter()
.map(|f| f.id.as_str())
.chain(files.iter().map(|f| f.id.as_str()))
.filter_map(|s| uuid::Uuid::parse_str(s).ok())
.collect();
let (favorited, shared) = tokio::join!(
async {
match &state.favorites_service {
Some(svc) => svc
.favorited_ids(auth_user.id, &fav_pairs)
.await
.unwrap_or_default(),
None => Default::default(),
}
},
state
.authorization
.shared_resource_ids(auth_user.id, &resource_uuids)
);
let mut favorite_ids: Vec<String> = favorited.into_iter().collect();
favorite_ids.sort();
let mut shared_ids: Vec<String> = shared
.unwrap_or_default()
.into_iter()
.map(|u| u.to_string())
.collect();
shared_ids.sort();
let etag = Self::compute_listing_etag(&folders, &files, &favorite_ids, &shared_ids);
// 304 Not Modified if the client already has this version
if let Some(inm) = headers.get(header::IF_NONE_MATCH)
&& let Ok(client_etag) = inm.to_str()
&& client_etag == etag
{
return Response::builder()
.status(StatusCode::NOT_MODIFIED)
.header(header::ETAG, &etag)
.body(Body::empty())
.unwrap()
.into_response();
}
let listing = FolderListingDto {
folders,
files,
favorite_ids,
shared_ids,
};
let mut resp = (StatusCode::OK, Json(listing)).into_response();
resp.headers_mut()
.insert(header::ETAG, header::HeaderValue::from_str(&etag).unwrap());
resp
}
(Err(err), _) | (_, Err(err)) => AppError::from(err).into_response(),
}
}
/// Renames a folder (ownership enforced). /// Renames a folder (ownership enforced).
pub(super) async fn rename_folder_impl( pub(super) async fn rename_folder_impl(
State(service): State<AppState>, State(service): State<AppState>,
@@ -517,29 +396,6 @@ pub async fn list_root_folders_paginated(
FolderHandler::list_root_folders_paginated_impl(state, auth_user, pagination).await FolderHandler::list_root_folders_paginated_impl(state, auth_user, pagination).await
} }
#[deprecated = "Use /api/folders/{id}/resources instead"]
#[utoipa::path(
get,
path = "/api/folders/{id}/listing",
params(("id" = String, Path, description = "Folder ID")),
responses(
(status = 200, description = "Folder listing (sub-folders + files)", body = FolderListingDto),
(status = 304, description = "Not modified"),
(status = 404, description = "Folder not found"),
),
security(("bearerAuth" = [])),
tag = "folders"
)]
#[allow(deprecated)]
pub async fn list_folder_listing(
state: State<Arc<GlobalAppState>>,
auth_user: AuthUser,
headers: HeaderMap,
path: Path<String>,
) -> axum::response::Response {
FolderHandler::list_folder_listing_impl(state, auth_user, headers, path).await
}
#[utoipa::path( #[utoipa::path(
put, put,
path = "/api/folders/{id}/rename", path = "/api/folders/{id}/rename",
src/interfaces/api/mod.rs
-1
View File
@@ -100,7 +100,6 @@ use crate::interfaces::api::handlers::file_handler::MoveFilePayload;
handlers::folder_handler::list_root_folders, handlers::folder_handler::list_root_folders,
handlers::folder_handler::list_root_folders_paginated, handlers::folder_handler::list_root_folders_paginated,
handlers::folder_handler::list_folder_resources, handlers::folder_handler::list_folder_resources,
handlers::folder_handler::list_folder_listing,
handlers::folder_handler::rename_folder, handlers::folder_handler::rename_folder,
handlers::folder_handler::move_folder, handlers::folder_handler::move_folder,
handlers::folder_handler::delete_folder_with_trash, handlers::folder_handler::delete_folder_with_trash,
src/interfaces/api/routes.rs
+2 -10
View File
@@ -64,7 +64,7 @@ use crate::interfaces::api::handlers::file_handler::{
}; };
#[allow(deprecated)] #[allow(deprecated)]
use crate::interfaces::api::handlers::folder_handler::{ use crate::interfaces::api::handlers::folder_handler::{
create_folder, delete_folder_with_trash, download_folder_zip, get_folder, list_folder_listing, create_folder, delete_folder_with_trash, download_folder_zip, get_folder,
list_folder_resources, list_root_folders, list_root_folders_paginated, move_folder, list_folder_resources, list_root_folders, list_root_folders_paginated, move_folder,
rename_folder, rename_folder,
}; };
@@ -208,21 +208,13 @@ pub fn create_api_routes(app_state: &Arc<AppState>) -> Router<Arc<AppState>> {
.route("/{id}/download", get(download_folder_zip)) .route("/{id}/download", get(download_folder_zip))
.with_state(app_state.clone()); .with_state(app_state.clone());
// Combined listing endpoint: returns both sub-folders AND files in one
// response. Needs full AppState because it calls both FolderService
// and FileRetrievalService concurrently.
let folder_listing_router = Router::new()
.route("/{id}/listing", get(list_folder_listing))
.with_state(app_state.clone());
// Create folder operations that use trash (requires full AppState) // Create folder operations that use trash (requires full AppState)
let folders_ops_router = Router::new().route("/{id}", delete(delete_folder_with_trash)); let folders_ops_router = Router::new().route("/{id}", delete(delete_folder_with_trash));
// Merge the routers // Merge the routers
let folders_router = folders_basic_router let folders_router = folders_basic_router
.merge(folders_ops_router) .merge(folders_ops_router)
.merge(folder_zip_router) .merge(folder_zip_router);
.merge(folder_listing_router);
// Create file routes for basic operations and trash-enabled delete // Create file routes for basic operations and trash-enabled delete
let basic_file_router = Router::new() let basic_file_router = Router::new()
src/interfaces/nextcloud/login_v2_handler.rs
+6 -7
View File
@@ -31,8 +31,7 @@ struct DrivePickerTemplate {
/// The Nextcloud Login Flow v2 "Grant Access" page. Rendered server-side via /// The Nextcloud Login Flow v2 "Grant Access" page. Rendered server-side via
/// askama (no template variables — the username/password are collected by the /// askama (no template variables — the username/password are collected by the
/// embedded form) instead of `include_str!` so the build no longer depends on /// embedded form); the template is embedded at compile time by the derive macro.
/// the legacy `build.rs` static-asset pipeline / `OUT_DIR`.
#[derive(Template)] #[derive(Template)]
#[template(path = "nextcloud/login.html")] #[template(path = "nextcloud/login.html")]
struct NextcloudLoginTemplate; struct NextcloudLoginTemplate;
@@ -264,7 +263,7 @@ pub async fn handle_login_submit(
// Flow token vanished (TTL?) between password submit and // Flow token vanished (TTL?) between password submit and
// here — extremely unlikely but treat the same as any // here — extremely unlikely but treat the same as any
// session-expired case. // session-expired case.
return axum::response::Redirect::to("/nextcloud-error.html?type=session-expired") return axum::response::Redirect::to("/nextcloud/error?type=session-expired")
.into_response(); .into_response();
} }
return render_drive_picker(&token, &drives); return render_drive_picker(&token, &drives);
@@ -365,7 +364,7 @@ async fn complete_flow(
user = %user.username, user = %user.username,
"Login Flow v2: complete() returned false — flow token not found" "Login Flow v2: complete() returned false — flow token not found"
); );
axum::response::Redirect::to("/nextcloud-error.html?type=session-expired").into_response() axum::response::Redirect::to("/nextcloud/error?type=session-expired").into_response()
} }
} }
@@ -402,7 +401,7 @@ pub async fn handle_drive_pick(
reason = "no_pending_user", reason = "no_pending_user",
"👮🏻‍♂️ NC drive pick rejected: flow has no pending user (replay or unknown token)" "👮🏻‍♂️ NC drive pick rejected: flow has no pending user (replay or unknown token)"
); );
return axum::response::Redirect::to("/nextcloud-error.html?type=session-expired") return axum::response::Redirect::to("/nextcloud/error?type=session-expired")
.into_response(); .into_response();
} }
}; };
@@ -516,7 +515,7 @@ pub async fn handle_login_oidc(
// Verify the NC login flow token exists // Verify the NC login flow token exists
if !nextcloud.login_flow.flow_exists(&token) { if !nextcloud.login_flow.flow_exists(&token) {
return axum::response::Redirect::to("/nextcloud-error.html?type=session-expired") return axum::response::Redirect::to("/nextcloud/error?type=session-expired")
.into_response(); .into_response();
} }
@@ -549,7 +548,7 @@ pub async fn handle_login_oidc(
} }
fn login_failed_response(_err: DomainError) -> Response { fn login_failed_response(_err: DomainError) -> Response {
axum::response::Redirect::to("/nextcloud-error.html?type=invalid-credentials").into_response() axum::response::Redirect::to("/nextcloud/error?type=invalid-credentials").into_response()
} }
fn parse_form(body: &str) -> HashMap<String, String> { fn parse_form(body: &str) -> HashMap<String, String> {
src/interfaces/web/mod.rs
+18 -30
View File
@@ -14,26 +14,19 @@ use tower_http::set_header::SetResponseHeaderLayer;
/// Resolve the directory the SPA is actually served from. /// Resolve the directory the SPA is actually served from.
/// ///
/// Release builds prefer the Vite output next to the configured static path — /// Prefers the Vite build output (`static-dist/`) sitting next to the configured
/// `static-dist/`, or `static/` under `PROFILE=dev` — falling back to the /// static path, falling back to the configured path itself — the container ships
/// configured path when that build dir is absent. Debug builds always use the /// the built SPA straight to `OXICLOUD_STATIC_PATH` (default `./static`), so there
/// configured path. Shared with the CSP layer in `main.rs` so the inline-script /// the fallback is what serves. Shared with the CSP layer in `main.rs` so the
/// hashes are computed from exactly the bytes that get served. /// inline-script hashes are computed from exactly the bytes that get served.
pub fn resolve_static_path(config: &AppConfig) -> PathBuf { pub fn resolve_static_path(config: &AppConfig) -> PathBuf {
// `PROFILE=dev` (the `just front-dev`/legacy path) serves the unbuilt source let dist = config
// dir; normal release serves the Vite output in `static-dist/`. .static_path
let is_dev = std::env::var("PROFILE").is_ok_and(|profile| profile == "dev"); .parent()
let assets_dir = if is_dev { "static" } else { "static-dist" }; .unwrap_or(Path::new("."))
.join("static-dist");
if cfg!(not(debug_assertions)) { if dist.exists() {
let dist = config return dist;
.static_path
.parent()
.unwrap_or(Path::new("."))
.join(assets_dir);
if dist.exists() {
return dist;
}
} }
config.static_path.clone() config.static_path.clone()
} }
@@ -50,7 +43,6 @@ pub fn resolve_static_path(config: &AppConfig) -> PathBuf {
/// can't leave a stale app pinned in browsers. /// can't leave a stale app pinned in browsers.
pub fn create_web_routes() -> Router<Arc<AppState>> { pub fn create_web_routes() -> Router<Arc<AppState>> {
let config = AppConfig::from_env(); let config = AppConfig::from_env();
let is_dev = std::env::var("PROFILE").is_ok_and(|profile| profile == "dev");
let static_path = resolve_static_path(&config); let static_path = resolve_static_path(&config);
// SPA fallback: serve the file if it exists, else the app shell. // SPA fallback: serve the file if it exists, else the app shell.
@@ -59,12 +51,6 @@ pub fn create_web_routes() -> Router<Arc<AppState>> {
// Hashed, immutable assets (SvelteKit emits these under /_app/immutable). // Hashed, immutable assets (SvelteKit emits these under /_app/immutable).
let app_immutable = ServeDir::new(static_path.join("_app").join("immutable")); let app_immutable = ServeDir::new(static_path.join("_app").join("immutable"));
let shell_cache = if is_dev {
"max-age=0, no-cache, no-store"
} else {
"no-cache"
};
Router::new() Router::new()
.nest_service( .nest_service(
"/_app/immutable", "/_app/immutable",
@@ -75,10 +61,12 @@ pub fn create_web_routes() -> Router<Arc<AppState>> {
) )
.fallback_service(spa) .fallback_service(spa)
.layer(CompressionLayer::new().br(true).gzip(true)) .layer(CompressionLayer::new().br(true).gzip(true))
// `if_not_present` so the immutable assets above keep their long cache. // `if_not_present` so the immutable assets above keep their long cache;
// the shell itself must always revalidate so a deploy can't pin a stale
// app in browsers.
.layer(SetResponseHeaderLayer::if_not_present( .layer(SetResponseHeaderLayer::if_not_present(
CACHE_CONTROL, CACHE_CONTROL,
HeaderValue::from_static(shell_cache), HeaderValue::from_static("no-cache"),
)) ))
} }
@@ -148,8 +136,8 @@ pub fn content_security_policy(config: &AppConfig) -> String {
/// each shell is read verbatim and that slice hashed. Scripts carrying a `src` /// each shell is read verbatim and that slice hashed. Scripts carrying a `src`
/// attribute are external (already allowed by `'self'`) and skipped. Only the /// attribute are external (already allowed by `'self'`) and skipped. Only the
/// directory root is scanned — the SPA is client-rendered (SSR/prerender off), /// directory root is scanned — the SPA is client-rendered (SSR/prerender off),
/// so the only inline-script shell is `index.html`; any legacy pages sit beside /// so the only inline-script shell is `index.html`. Returns a deduplicated,
/// it. Returns a deduplicated, sorted list; empty when the dir is unreadable /// sorted list; empty when the dir is unreadable
/// (e.g. a Vite dev server serving HTML on its own port instead). /// (e.g. a Vite dev server serving HTML on its own port instead).
fn inline_script_csp_hashes(static_path: &Path) -> Vec<String> { fn inline_script_csp_hashes(static_path: &Path) -> Vec<String> {
let Ok(entries) = std::fs::read_dir(static_path) else { let Ok(entries) = std::fs::read_dir(static_path) else {
src/main.rs
+19 -11
View File
@@ -59,7 +59,7 @@ use common::di::AppServiceFactory;
use infrastructure::db::create_database_pools; use infrastructure::db::create_database_pools;
use interfaces::{ use interfaces::{
create_api_routes, create_health_routes, create_public_api_routes, create_api_routes, create_health_routes, create_public_api_routes,
web::{content_security_policy, create_web_routes}, web::{content_security_policy, create_web_routes, resolve_static_path},
}; };
fn parse_addr(host: &str, port: u16) -> Result<SocketAddr, String> { fn parse_addr(host: &str, port: u16) -> Result<SocketAddr, String> {
@@ -277,17 +277,25 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
None None
}; };
// Locales directory for i18n. Derived from the configured static path // Locales directory for i18n. Resolved from wherever the SPA is actually
// (OXICLOUD_STATIC_PATH, defaults to ./static) so deployments that ship // served (the Vite `static-dist/` build, or the configured static path in
// assets from a non-default location — or the build.rs-bundled // the container) so deployments find their locale files correctly. A source
// `./static-dist` in release — find their locale files correctly. // checkout without a built SPA still has the canonical locales under the
// frontend static assets, so fall back to those for `just dev`.
// //
// Read-only at runtime: locales ship as static assets (build.rs bundles // Read-only at runtime: locales ship as static assets (Vite copies
// them into static-dist, the Dockerfile copies them into /app/static). // `frontend/static/locales` into the build, the Dockerfile copies that into
// Fail-fast if the path is missing rather than silently creating an // /app/static). Fail-fast if the path is missing rather than silently
// empty directory and limping along with a "translation missing" error // creating an empty directory and limping along with a "translation missing"
// on every request later. // error on every request later.
let locales_path = config.static_path.join("locales"); let locales_path = {
let served = resolve_static_path(&config).join("locales");
if served.is_dir() {
served
} else {
std::path::PathBuf::from("frontend/static/locales")
}
};
if !locales_path.is_dir() { if !locales_path.is_dir() {
panic!( panic!(
"FATAL: locales directory not found at {}. \ "FATAL: locales directory not found at {}. \
static/admin.html
-1006
View File
File diff suppressed because it is too large Load Diff
static/basemaps/.gitignore
-5
View File
@@ -1,5 +0,0 @@
# The vector basemap is large (tens of MB) and operator-provided — never
# commit it to the repo. Drop a Protomaps `.pmtiles` here as `basemap.pmtiles`
# and the existing static file server (tower-http ServeDir, Range-capable)
# will serve it to the Places map. See README.md.
*.pmtiles
static/basemaps/README.md
-33
View File
@@ -1,33 +0,0 @@
# Places basemap (optional)
The **Places** photo map renders your geotagged photos as clusters. It works
out of the box **without** a basemap (clusters on a plain background). To get a
real street/terrain backdrop, drop a self-hosted vector basemap here — no
third-party tile API, fully offline.
## How it works (Approach "A")
OxiCloud already serves `static/` through `tower-http`'s `ServeDir`, which
honours **HTTP Range** requests. A [PMTiles](https://docs.protomaps.com/pmtiles/)
basemap is a *single file* read directly by the browser via Range — so the
basemap is just a static file the app already knows how to serve. No extra
backend, no tile server, no API keys.
## Enabling it
1. Get a Protomaps `.pmtiles` basemap (vector, ODbL OpenStreetMap data):
- Whole planet z0–15 (~120 GB) or a smaller global `z0-6` (~60 MB), or
- A **regional extract** (recommended — only the area you need, a few MB):
```sh
# one-time, downloads only your bounding box from the remote planet
pmtiles extract https://build.protomaps.com/<DATE>.pmtiles basemap.pmtiles \
--bbox=<west>,<south>,<east>,<north>
```
See https://docs.protomaps.com/basemaps/downloads
2. Place it here as **`static/basemaps/basemap.pmtiles`** (this path is
git-ignored on purpose — see `.gitignore`).
3. Reload the Places view. The map will pick it up automatically.
The bundled style is **label-light** (water / land / roads / buildings, no
text) so it needs no glyph/sprite assets. Attribution “© OpenStreetMap”
(ODbL) is shown automatically when a basemap is present.
static/css/admin.css
-1
View File
@@ -1 +0,0 @@
@import url("./views/admin.css");
static/css/auth.css
-1
View File
@@ -1 +0,0 @@
@import url("./views/auth.css");
static/css/base/a11y.css
-146
View File
@@ -1,146 +0,0 @@
/* ============================================================
* Accessibility baseline — keyboard focus.
*
* Pointer / programmatic focus stays ring-free (no "ring on every
* click" noise); KEYBOARD focus (:focus-visible) always gets a clear
* accent ring. Every interactive element inherits this automatically,
* so components only need their own :focus-visible rule when they want
* a custom ring — and must never strip it for keyboard users.
*
* The outline follows the element's border-radius in modern browsers,
* so rounded controls get a rounded ring for free.
* ============================================================ */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* Skip link — visually hidden until focused, then slides in at top-left.
Lets keyboard users jump straight to <main id="main">. */
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: var(--z-max);
padding: var(--space-2) var(--space-4);
background: var(--color-bg-surface);
color: var(--color-text);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
transform: translateY(-150%);
transition: transform var(--motion-fast) var(--ease-standard);
}
.skip-link:focus {
transform: translateY(0);
}
/* ── prefers-reduced-motion ──────────────────────────────────
Vestibular safety: near-instant transitions/animations and no
smooth scroll for users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── prefers-contrast: more ──────────────────────────────────
Collapse the muted text tiers up to the stronger secondary tier and
thicken the focus ring. The high-contrast border ramp (raw colour) lives
in base/variables.css — the token layer — so this file stays hex-free. */
@media (prefers-contrast: more) {
:root {
--color-text-muted: var(--color-text-secondary);
--color-text-subtle: var(--color-text-secondary);
--color-text-faint: var(--color-text-secondary);
}
:focus-visible {
outline-width: 3px;
}
}
/* ── forced-colors (Windows High Contrast) ───────────────────
Custom colors are overridden by the OS; ensure the keyboard
focus ring uses a real system colour. */
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}
/* ── Global error-boundary toast (js/core/errorBoundary.js) ─── */
.error-toast {
position: fixed;
bottom: var(--space-5);
left: 50%;
z-index: var(--z-toast);
max-width: min(90vw, 420px);
padding: var(--space-3) var(--space-4);
background: var(--color-error-bg);
color: var(--color-error-text);
border: 1px solid var(--color-badge-error-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
font-size: var(--text-sm);
transform: translate(-50%, calc(100% + var(--space-5)));
transition: transform var(--motion-base) var(--ease-standard);
}
.error-toast.is-visible {
transform: translate(-50%, 0);
}
/* ── Print: drop the app chrome, show clean content ────────── */
@media print {
.sidebar,
.sidebar-overlay,
.top-bar,
.actions-bar,
.page-sticky-header,
.cmdk-overlay,
.skip-link,
.error-toast {
display: none !important;
}
.content-area,
.main-content {
overflow: visible !important;
}
* {
box-shadow: none !important;
}
}
/* ── Touch targets ───────────────────────────────────────────
≥44px hit areas for the key controls on touch/phone widths. */
@media (max-width: 768px) {
.sidebar-toggle,
.search-toggle-btn,
.search-back-btn,
.notif-bell-btn,
.user-avatar-btn {
min-width: 44px;
min-height: 44px;
}
.nav-item {
min-height: 44px;
}
.files-list-view .file-item {
min-height: 48px;
}
}
static/css/base/animations.css
-18
View File
@@ -1,18 +0,0 @@
/* ============================================================
* Canonical keyframes — single source for shared animations.
*
* Loaded early via main.css so every component and view reuses
* these by name instead of redefining them. This file replaced
* 6 duplicate `@keyframes spin` definitions (spinner / admin /
* music / photos / profile / share-public).
*
* NOTE: `oxi-spin` (icons.css) and `smdSpin` (shareModal.css) are
* still defined locally — folding them in needs touching their
* `animation-name` consumers, deferred to Fase 1.
* ============================================================ */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
static/css/base/forms.css
-60
View File
@@ -1,60 +0,0 @@
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: var(--space-2);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-base);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.button {
padding: var(--space-2) var(--space-4);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-size: var(--text-base);
transition: background-color 0.2s;
}
.primary {
background-color: var(--color-accent);
color: var(--color-danger-text);
}
.primary:hover {
background-color: var(--color-accent-hover);
}
.secondary {
background-color: var(--color-border);
color: var(--color-text-secondary);
}
.secondary:hover {
background-color: var(--color-border-medium);
}
.danger {
background-color: var(--color-danger-bg);
color: var(--color-danger-text);
}
.danger:hover {
background-color: var(--color-danger-bg-hover);
}
static/css/base/reset.css
-58
View File
@@ -1,58 +0,0 @@
/* Honor the user's browser font-size / zoom preference (rem-relative). */
html {
font-size: 100%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
body {
display: flex;
height: 100vh; /* fallback for browsers without dvh */
/* biome-ignore lint/suspicious/noDuplicateProperties: explicit fallback */
height: 100dvh;
font-size: var(--text-base);
line-height: var(--leading-normal);
background-color: var(--color-bg-page);
overflow: hidden;
}
html[dir="rtl"] .fa-arrow-left::before {
content: "\f061";
}
html[dir="rtl"] .fa-sign-out-alt {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/* Utility: hide elements without inline style="" (CSP-safe) */
.hidden {
display: none !important;
}
/* Brand-tinted text selection + caret. */
::selection {
background: var(--color-accent-ring-strong);
color: var(--color-text-heading);
}
:root {
caret-color: var(--color-accent);
}
/* Visually hidden but exposed to assistive tech (a11y-only labels/headings). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
static/css/base/typography.css
-82
View File
@@ -1,82 +0,0 @@
/* ============================================================
* Typography utilities — Fase 0 foundations.
*
* Semantic heading roles DECOUPLED from element level, so any
* h1–h6 can carry the correct visual weight while the document
* keeps a correct, accessible heading order. All values route
* through the type/leading/weight/tracking tokens in variables.css.
*
* Views are migrated onto these classes in Fase 1 (replacing the
* per-page raw font-size/weight headings the audit flagged).
* ============================================================ */
/* Page title — one per page (the h1 role). */
.heading-page {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
color: var(--color-text-heading);
}
/* Section heading. */
.heading-section {
font-size: var(--text-xl);
line-height: var(--leading-snug);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
color: var(--color-text-heading);
}
/* Card / panel heading. */
.heading-card {
font-size: var(--text-md);
line-height: var(--leading-snug);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
/* Eyebrow / overline label (uppercase caps with tracking). */
.heading-eyebrow {
font-size: var(--text-xs);
line-height: var(--leading-normal);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Constrain running text to a comfortable measure (~65ch). */
.prose {
max-width: var(--measure-prose);
}
/* Headings wrap with balanced line lengths (no single orphan word). */
h1,
h2,
h3,
.heading-page,
.heading-section,
.heading-card,
.page-title {
text-wrap: balance;
}
/* Running prose wraps "pretty" (avoids orphans and short last lines). */
.prose,
.empty-state p,
.about-description,
.auth-subtitle,
.auth-hint,
.language-subtitle {
text-wrap: pretty;
}
/* Tabular figures for numeric UI so digits align and don't jitter as they
change (storage readouts, badges, stat counters). */
.storage-info,
.user-menu-storage-text,
.notif-badge,
.stat-value {
font-variant-numeric: tabular-nums;
}
static/css/base/variables.css
-694
View File
@@ -1,694 +0,0 @@
/*
* OxiCloud design tokens.
*
* Single source of truth for light + dark colours. Each token whose value
* differs between modes uses `light-dark(LIGHT, DARK)`, which the browser
* resolves against the page's `color-scheme`.
*
* Mode switching:
* • `<meta name="color-scheme" content="light dark">` in <head> declares
* both schemes are supported.
* • `:root { color-scheme: light dark }` (default) lets the UA follow the
* OS preference (`prefers-color-scheme`).
* • `html[data-color-scheme="light"]` / `…="dark"` force a specific mode.
* `theme-init.js` sets the attribute from localStorage.
*
* Fallback: browsers that don't support `light-dark()` (Chrome < 123 /
* Safari < 17.5 / Firefox < 120) hit a `@supports not (...)` block in
* `themes/dark.css` that still applies the old `[data-theme="dark"]` overrides.
*/
:root {
/* Default: follow the OS preference. Overridden by html[data-color-scheme]. */
color-scheme: light dark;
/* ════════════════════════════════════════════════════════════════
* NON-COLOR DESIGN SCALES (Fase 0 — fundamentos)
*
* Single source of truth for spacing, radius, typography, z-index,
* motion, elevation, breakpoints and density. Components are migrated
* onto these in Fase 1; until then raw px still coexist. Do NOT add
* raw px for spacing/radius/font-size in new code — consume a token.
* ════════════════════════════════════════════════════════════════ */
/* ── Layout shell ──────────────────────────────────────────── */
/* Fluid sidebar: tracks viewport but clamped to a sane band. */
--sidebar-width: clamp(220px, 18vw, 280px);
--sidebar-width-min: 200px; /* resizable rail floor (Fase 1) */
--sidebar-width-max: 320px; /* resizable rail ceiling (Fase 1) */
--sidebar-width-collapsed: 72px; /* icon-rail mode (Fase 1) */
--gutter: var(--space-6); /* shared topbar/content horizontal gutter (drops to 16px on phones) */
--grid-card-min: 200px; /* min width of a grid card (tightens on phones) */
/* ── Spacing — 4px grid ────────────────────────────────────── */
/* Direct steps are multiples of 4; half-steps (0-5/1-5/2-5/3-5)
* cover the high-frequency 2/6/10/14px raw values found in audit. */
--space-0: 0;
--space-px: 1px;
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-2-5: 10px;
--space-3: 12px;
--space-3-5: 14px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Radius ─────────────────────────────────────────────────── */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 10px;
--radius-2xl: 12px;
--radius-3xl: 16px;
--radius-4xl: 20px;
--radius-full: 9999px;
/* Semantic default — resolves the legacy `var(--radius, 12px)` fallbacks
* in share-public.css / device-verify.css (token was never defined). */
--radius: var(--radius-2xl);
/* ── Typography ────────────────────────────────────────────── */
/* Font families (single source — reset.css `*` consumes --font-sans). */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Modular size scale in rem (root = 16px) so it honors user zoom.
* --text-base (14px) is the app body default. */
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px */
--text-md: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.75rem; /* 28px */
--text-4xl: 2rem; /* 32px */
--text-5xl: 2.5rem; /* 40px */
--text-6xl: 3rem; /* 48px */
/* Line-heights (leading) — unitless ratios. */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 1.8;
/* Font weights — numeric only (no bold/normal keywords). */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Letter-spacing (tracking) — em-relative. */
--tracking-tighter: -0.02em;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.04em;
--tracking-widest: 0.08em;
/* Prose measure — comfortable line length for running text. */
--measure-prose: 65ch;
/* Icon glyph sizing — separate axis from the text scale. */
--icon-xs: 12px;
--icon-sm: 14px;
--icon-md: 16px;
--icon-lg: 20px;
--icon-xl: 24px;
/* ── Z-index — semantic stacking layers ────────────────────── */
/* Gaps left between layers so new surfaces slot in without renumber. */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-dropdown: 1000;
--z-overlay: 2000;
--z-drawer: 2500;
--z-modal: 3000;
--z-popover: 3500;
--z-toast: 4000;
--z-tooltip: 5000;
--z-notification: 6000;
--z-max: 9999;
/* ── Motion — durations + easing curves ────────────────────── */
--motion-instant: 0ms;
--motion-fast: 120ms;
--motion-base: 160ms;
--motion-moderate: 200ms;
--motion-slow: 300ms;
--motion-slower: 500ms;
--motion-spinner: 1s;
--spin-duration: var(--motion-spinner);
/* Decelerate is the default for entrances / positive feedback. */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ── Elevation — composed box-shadow recipes ───────────────── */
/* Full recipes (not bare alphas) layered on the --color-shadow-*
* alpha tokens below, so they adapt to light/dark automatically. */
--shadow-xs: 0 1px 2px var(--color-shadow-xs);
--shadow-sm: 0 1px 3px var(--color-shadow-sm), 0 1px 2px var(--color-shadow-xs);
--shadow-md: 0 4px 6px var(--color-shadow-sm), 0 2px 4px var(--color-shadow-xs);
--shadow-lg: 0 10px 15px var(--color-shadow-md), 0 4px 6px var(--color-shadow-sm);
--shadow-xl: 0 20px 25px var(--color-shadow-md), 0 8px 10px var(--color-shadow-sm);
--shadow-2xl: 0 25px 50px var(--color-shadow-lg);
/* ── Breakpoints (reference tokens) ────────────────────────── */
/* NOTE: @media cannot consume custom properties. These are the canonical
* values for JS (matchMedia) and documentation; consuming them in @media
* needs @custom-media via a postcss build step — pending dep approval. */
--bp-xs: 480px;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
/* ── Density — comfortable (default) vs compact ────────────── */
/* Gated by html[data-density="compact"] below. Consumed by list rows
* and controls in Fase 1. */
--density-row-py: var(--space-3); /* 12px */
--density-row-px: var(--space-3-5); /* 14px */
--density-gap: var(--space-3);
--density-control-h: 40px;
/* Backgrounds */
--color-bg-page: light-dark(#f5f7fa, #0f172a);
--color-bg-surface: light-dark(#ffffff, #1e293b);
--color-bg-input: light-dark(#f9fafb, #0f172a);
--color-bg-hover: light-dark(#f8fafc, #334155);
--color-bg-muted: light-dark(#f0f3f7, #1a2540);
--color-bg-subtle: light-dark(#f8f9fa, #162032);
--color-bg-alt: light-dark(#f7fafc, #0f172a);
--color-bg-input-alt: light-dark(#edf2f7, #253045);
--color-bg-empty: light-dark(#f0f0f0, #253045);
/* Borders */
--color-border: light-dark(#e2e8f0, #334155);
--color-border-light: light-dark(#f1f5f9, #334155);
--color-border-medium: light-dark(#cbd5e0, #475569);
--color-border-faint: light-dark(#e0e6ed, #2a3650);
--color-border-subtle: light-dark(#e0e5e8, #2a3650);
--color-border-xfaint: light-dark(#f0f0f0, #1e293b);
--color-border-ddd: light-dark(#ddd, #334155);
/* Text — collapsed to a few AA-passing tiers; every legacy name is kept as
* an alias so no consumer breaks (migration to the canonical names → Fase 1).
* Each tier clears WCAG AA 4.5:1 on #fff AND the page bg, light and dark. The
* muted/faint/placeholder tiers used to FAIL (2.3–4.0:1) and are now darkened. */
--color-text: light-dark(#2d3748, #e2e8f0); /* primary body */
--color-text-heading: light-dark(#1e293b, #f1f5f9); /* headings */
--color-text-secondary: light-dark(#475569, #cbd5e1); /* strong secondary */
/* muted/subtle/faint converge: AA 4.5:1 on the grayish page/muted bgs AND
* on the lighter dark hover bg leaves only a narrow passing window. */
--color-text-muted: light-dark(#5e6a78, #9fadbe); /* muted */
--color-text-subtle: light-dark(#5e6a78, #9fadbe); /* subtle */
--color-text-faint: light-dark(#5e6a78, #9fadbe); /* faintest still-AA */
/* legacy aliases → one of the tiers above */
--color-text-dark: var(--color-text-secondary);
--color-text-dim: var(--color-text-secondary);
--color-text-black: var(--color-text);
--color-text-gray: var(--color-text-muted);
--color-text-medium: var(--color-text-muted);
--color-text-faint2: var(--color-text-faint);
--color-text-light: var(--color-text-faint);
--color-text-placeholder: var(--color-text-faint);
/* Accent (orange) — mostly mode-agnostic. */
--color-accent: #ff5e3a;
--color-accent-hover: light-dark(#e04520, #ff7a5c);
/* AA-compliant accent for TEXT/LINKS: bare #ff5e3a only reaches 3.04:1 on
* white. Link/toggle-link consumers migrate onto this in Fase 2. */
--color-accent-text: light-dark(#cc3a16, #ff8a5c);
/* Solid foreground on accent fills (replaces reusing --color-danger-text). */
--color-on-accent: #ffffff;
/* Canonical keyboard focus-ring color (applied globally in Fase 2). */
--color-focus-ring: #ff5e3a;
/* Canonical logo gradient — unifies the divergent sidebar (#ff5e3a→#ff8a5c)
* vs accent (#ff5e3a→#ff2d55) logo fills. Consumers migrate in Fase 1. */
--color-logo-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%);
--color-accent-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%);
--color-accent-shadow: rgba(255, 94, 58, 0.3);
--color-accent-ring: light-dark(rgba(255, 94, 58, 0.1), rgba(255, 94, 58, 0.15));
--color-accent-tint: light-dark(#fff5f3, #2a1a15);
--color-accent-mid: #ff8a5c;
--color-accent-shadow-lg: rgba(255, 94, 58, 0.4);
--color-accent-bg: rgba(255, 94, 58, 0.06);
--color-accent-bg-sm: rgba(255, 94, 58, 0.08);
--color-accent-ring-dark: rgba(255, 94, 58, 0.15);
--color-accent-ring-strong: rgba(255, 94, 58, 0.2);
--color-accent-ring-xl: rgba(255, 94, 58, 0.4);
--color-accent-ring-xs: rgba(255, 94, 58, 0.05);
--color-accent-glow: rgba(255, 94, 58, 0.2);
--color-accent-glow-soft: rgba(255, 94, 58, 0.1);
/* Ambient brand backdrop — shared by the external surfaces (login / share /
device). A centred "spotlight" (surface is brighter than page in BOTH
light and dark) seats the card in a pool of light; four warm brand blobs
fill the field so it reads as a deliberate, dimensional canvas rather than
flat near-white. Resolves through light-dark() automatically. */
--brand-ambient:
radial-gradient(55% 50% at 8% 4%, var(--color-accent-glow), transparent 60%),
radial-gradient(55% 55% at 95% 98%, var(--color-accent-glow), transparent 58%),
radial-gradient(48% 48% at 88% 12%, var(--color-accent-glow-soft), transparent 55%),
radial-gradient(50% 45% at 6% 92%, var(--color-accent-glow-soft), transparent 55%),
radial-gradient(78% 64% at 50% 33%, var(--color-bg-surface), transparent 70%), var(--color-bg-page);
/* Desaturated fractal-noise grain — kills gradient banding and adds a
tactile, "expensive" film. No colour inside the data-URI (token-safe);
applied via a low-opacity overlay pseudo-element. */
--brand-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
/* Feedback — success unified to one restrained emerald; the 6 green variants
* now alias the canonical bg/text. (error-* is the danger tint, kept.) */
--color-error-bg: light-dark(#fee2e2, #3b1111);
--color-error-text: light-dark(#b91c1c, #fca5a5);
--color-success-bg: light-dark(#dcfce7, #052e16);
--color-success-text: light-dark(#15803d, #86efac);
--color-success-border: #16a34a;
--color-success-alt: #16a34a;
--color-success-bg-alt: var(--color-success-bg);
--color-success-text-alt: var(--color-success-text);
--color-success-bg-green: var(--color-success-bg);
--color-success-text-green: var(--color-success-text);
/* Dangerous actions — unified on #ef4444 / #dc2626; danger text-alt now uses
* the AA-passing error-text instead of a sub-4.5:1 red. */
--color-danger-bg: #ef4444;
--color-danger-text: #ffffff;
--color-danger-bg-hover: #dc2626;
--color-danger-alt: #ef4444;
--color-danger-ring: rgba(239, 68, 68, 0.3);
--color-danger-ring-lg: rgba(239, 68, 68, 0.4);
--color-danger-light-bg: light-dark(#fef2f2, #2a0c0c);
--color-danger-lighter: light-dark(#fef2f2, #2a0c0c);
--color-danger-text-alt: var(--color-error-text);
--color-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
/* Warning — unified to one restrained amber. Text tier (#b45309) clears AA;
* the bright #ffc107 gold is replaced by amber-500 for borders/fills. Legacy
* orange/amber variants alias the canonical tokens. */
--color-warning-bg: light-dark(#fef3c7, #2a2410);
--color-warning-text: light-dark(#b45309, #fbbf24);
--color-warning-border: #f59e0b;
--color-warning-bg-dark: light-dark(#fde68a, #3d2e00);
--color-warning-ring: rgba(245, 158, 11, 0.12);
--color-warning-shadow: rgba(245, 158, 11, 0.4);
--color-warning-orange-bg: var(--color-warning-bg);
--color-warning-orange-border: var(--color-warning-border);
--color-warning-orange-text: var(--color-warning-text);
--color-warning-bg-light: var(--color-warning-bg);
--color-warning-text-amber: var(--color-warning-text);
--color-warning-bg-orange: var(--color-warning-bg);
--color-warning-text-orange: var(--color-warning-text);
/* Info — unified to one blue (AA text #1d4ed8, with a light-dark dark tier).
* Variants alias the canonical tokens. */
--color-info-bg: light-dark(#eff6ff, #0c2d48);
--color-info-text: light-dark(#1d4ed8, #93c5fd);
--color-info-border: #3b82f6;
--color-info-blue: #3b82f6;
--color-info-bg-alt: var(--color-info-bg);
--color-info-text-alt: var(--color-info-text);
--color-info-surface: var(--color-info-bg);
/* Shadows — stronger in dark mode for parity. Dark values form a
* deliberate progression (base 0.3 < md 0.34 < lg 0.38) so elevation
* levels stay perceptually distinct; they used to all collapse to 0.3. */
--color-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
--color-shadow-lg: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.38));
--color-shadow-xs: rgba(0, 0, 0, 0.05);
--color-shadow-sm: rgba(0, 0, 0, 0.08);
--color-shadow-md: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.34));
--color-shadow-xl: rgba(0, 0, 0, 0.2);
--color-shadow-2xl: rgba(0, 0, 0, 0.25);
--color-shadow-3xl: rgba(0, 0, 0, 0.3);
--color-shadow-4xl: rgba(0, 0, 0, 0.4);
/* Overlays — same in both modes; they sit on top of arbitrary content. */
--color-overlay: rgba(0, 0, 0, 0.5);
/* Frosted scrim behind overlay controls (favorite/kebab/checkbox) so they
stay legible on top of any thumbnail, light or dark. */
--color-scrim-control: light-dark(rgba(255, 255, 255, 0.92), rgba(15, 23, 42, 0.82));
--color-overlay-light: rgba(0, 0, 0, 0.45);
--color-overlay-heavy: rgba(0, 0, 0, 0.85);
--color-overlay-darkest: rgba(0, 0, 0, 0.92);
--color-overlay-shadow: rgba(0, 0, 0, 0.6);
/* Foreground / control surfaces on top of dark overlays */
--color-on-overlay: rgba(255, 255, 255, 0.95);
--color-on-overlay-muted: rgba(255, 255, 255, 0.9);
--color-overlay-button: rgba(255, 255, 255, 0.12);
--color-overlay-button-hover: rgba(255, 255, 255, 0.22);
/* Items */
--color-item: var(--color-bg-surface);
--color-item-hover: var(--color-bg-hover);
--color-item-active: light-dark(#f8d2ae, #5a5047);
--color-item-selected: light-dark(#fff8f6, #39281a);
--color-item-hover-accent: light-dark(#fff0ec, #3d342c);
--color-item-hover-blue: #f0f8ff;
--color-item-hover-sky: #e0f2fe;
/* Sidebar — already dark-leaning in both modes; dark mode goes deeper. */
--color-sidebar-bg-from: light-dark(#2a3042, #0f172a);
--color-sidebar-bg-to: light-dark(#232838, #0c1322);
--color-sidebar-text: rgba(255, 255, 255, 0.65);
--color-sidebar-text-hover: rgba(255, 255, 255, 0.9);
--color-sidebar-text-active: #ffffff;
--color-sidebar-active-bg: rgba(255, 94, 58, 0.12);
--color-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
--color-sidebar-separator: rgba(255, 255, 255, 0.07);
--color-sidebar-overlay: rgba(0, 0, 0, 0.5);
--color-sidebar-storage-bg: rgba(255, 255, 255, 0.05);
--color-sidebar-storage-border: rgba(255, 255, 255, 0.07);
--color-sidebar-storage-text: rgba(255, 255, 255, 0.8);
--color-sidebar-storage-bar: rgba(255, 255, 255, 0.1);
--color-sidebar-storage-faint: rgba(255, 255, 255, 0.5);
--color-sidebar-logo-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%);
--color-sidebar-progress: linear-gradient(90deg, #ff5e3a 0%, #ff8a5c 100%);
--color-sidebar-shadow: rgba(255, 94, 58, 0.35);
--color-sidebar-shadow-lg: rgba(255, 94, 58, 0.45);
/* Calendar dots — regenerated at fixed S=55% L=62%, hues evenly around the
* wheel, so they read as one curated family (not confetti). These also tint
* the sidebar nav icons (sidebar.css :nth-child rules). */
--color-cal-1: #d36868;
--color-cal-2: #d3a268;
--color-cal-3: #c9d368;
--color-cal-4: #8fd368;
--color-cal-5: #68d37c;
--color-cal-6: #68d3b6;
--color-cal-7: #68b6d3;
--color-cal-8: #687cd3;
--color-cal-9: #8f68d3;
--color-cal-10: #c968d3;
--color-cal-11: #d368a2;
/* File type badge colors */
--color-ft-html: #e34c26;
--color-ft-js: #2965f1;
--color-ft-python: #3776ab;
--color-ft-typescript: #3178c6;
--color-ft-rust: #dea584;
--color-ft-go: #00add8;
--color-ft-java: #e76f00;
--color-ft-shell: #555555;
--color-ft-csharp: #68217a;
--color-ft-php: #8892be;
--color-ft-ruby: #cc342d;
--color-ft-swift: #fa7343;
--color-ft-kotlin: #7f52ff;
--color-ft-scala: #e38c00;
--color-ft-angular: #cb171e;
--color-ft-cpp: #9c4221;
--color-ft-docker: #083fa1;
--color-ft-generic-blue: #556ee6;
--color-ft-generic-green: #4eaa25;
--color-ft-generic-gray: #a0aec0;
--color-ft-orange-light: #ffb86c;
--color-ft-yellow: #ffd43b;
--color-ft-orange-alt: #e34c26;
--color-ft-coffeescript: #9c4221;
/* File type icon background/text pairs */
--color-ft-folder-bg: #ffeaa7;
--color-ft-folder-tab: #fdcb6e;
--color-ft-doc-bg: #e0ecff;
--color-ft-doc-text: #3171d8;
--color-ft-pdf-bg: #fee2e2;
--color-ft-pdf-text: #e53e3e;
--color-ft-image-bg: #e0f2fe;
--color-ft-image-text: #3b82f6;
--color-ft-video-bg-from: #ede9fe;
--color-ft-video-bg-to: #fce7f3;
--color-ft-video-text: #8b5cf6;
--color-ft-audio-bg: #fef3c7;
--color-ft-audio-text: #f59e0b;
--color-ft-audio-alt-bg: #fff3e0;
--color-ft-spreadsheet-bg: #e6f4ea;
--color-ft-spreadsheet-text: #0d904f;
--color-ft-presentation-bg: #fef3e2;
--color-ft-presentation-text: #d04423;
--color-ft-archive-bg: #f5f0eb;
--color-ft-archive-text: #8d6e63;
--color-ft-installer-bg: #f3e8ff;
--color-ft-installer-text: #7c3aed;
--color-ft-script-bg: #e8f5e9;
--color-ft-script-text: #4eaa25;
--color-ft-config-bg: #f1f3f5;
--color-ft-config-text: #718096;
/* Multiselect bar — always dark */
--color-multiselect-bg: #1e293b;
--color-multiselect-border: #334155;
--color-multiselect-text: #ffffff;
--color-multiselect-text-faint: rgba(255, 255, 255, 0.7);
--color-multiselect-hover-bg: rgba(255, 255, 255, 0.1);
--color-multiselect-action-text: #ffffff;
--color-multiselect-action-hover: rgba(255, 255, 255, 0.2);
--color-multiselect-danger-bg: rgba(239, 68, 68, 0.25);
--color-multiselect-danger-text: #fca5a5;
--color-multiselect-danger-active: rgba(239, 68, 68, 0.4);
--color-multiselect-danger-text-active: #ffffff;
/* Notification */
--color-notification-bg: light-dark(#ffffff, #1e293b);
--color-notification-badge: #ff3b30;
--color-notification-success: #34c759;
--color-notification-error: #ff3b30;
/* Photos lightbox — always dark overlay */
--color-lightbox-overlay: rgba(0, 0, 0, 0.92);
--color-lightbox-btn-bg: rgba(255, 255, 255, 0.12);
--color-lightbox-btn-text: #ffffff;
--color-lightbox-btn-hover: rgba(255, 255, 255, 0.25);
--color-lightbox-gradient-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
--color-lightbox-gradient-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
--color-lightbox-text-faint: rgba(255, 255, 255, 0.5);
--color-lightbox-text-muted: rgba(255, 255, 255, 0.7);
/* (Removed: the --color-purple-* family had zero consumers. The music
* gradient and the video file-type purple are separate, retained tokens.) */
/* OIDC / auth */
--color-oidc-bg: var(--color-info-blue);
--color-oidc-shadow: rgba(79, 70, 229, 0.3);
--color-oidc-shadow-lg: rgba(79, 70, 229, 0.4);
/* Device verify */
--color-device-verify-text: #ffc107;
--color-device-verify-shadow: rgba(255, 193, 7, 0.5);
--color-device-verify-drop-shadow: rgba(255, 193, 7, 0.4);
--color-device-verify-border: #ffc107;
--color-device-verify-muted: #6c757d;
--color-device-verify-dim: #ccc;
/* Content area */
--color-content-muted: #888;
--color-content-bg-warn: light-dark(#ffeaa7, #3d2e00);
--color-content-bg-warn-dark: light-dark(#fdcb6e, #5a4200);
/* User menu */
--color-user-menu-header-bg: light-dark(linear-gradient(135deg, #fef5f3 0%, #fdf2f8 100%), linear-gradient(135deg, #1a2332 0%, #1e2940 100%));
--color-user-menu-header-border: light-dark(#fce7e1, #3a2520);
/* Share dialog */
--color-share-link-text: var(--color-info-text);
--color-share-link-hover: var(--color-info-text);
--color-share-remove-text: #b71c1c;
--color-share-owner-text: #757575;
/* Primary (style.css) */
/* Demoted: orange is the sole brand/primary — primary now aliases the accent
* (was a competing blue #2563eb). Flips device-verify / share / userMenu to brand. */
--color-primary: var(--color-accent);
--color-primary-hover: var(--color-accent-hover);
/* Recent view */
--color-recent-muted: #6c757d;
--color-recent-border: #6c757d;
/* Star colors */
--color-star-text: #fbbf24;
--color-star-text-hover: #f59e0b;
--color-star-active: #d97706;
/* Card drop target */
--color-card-drop-tint: rgba(230, 126, 34, 0.08);
--color-card-drop-border: #e67e22;
/* Neutral backgrounds */
--color-neutral-warm-bg: #f5f0eb;
--color-neutral-warm-text: #8d6e63;
--color-neutral-bg: #f1f3f5;
/* Admin/profile blue accent */
--color-admin-blue: #60a5fa;
--color-admin-blue-bg: rgba(59, 130, 246, 0.1);
--color-admin-blue-bg-sm: rgba(59, 130, 246, 0.15);
/* Danger hover bg (for logout etc.) */
--color-danger-hover-bg: rgba(239, 68, 68, 0.1);
/* Additional success rings */
--color-success-ring: rgba(72, 187, 120, 0.1);
--color-success-ring-dark: rgba(72, 187, 120, 0.15);
--color-success-text-strong: #2f855a;
--color-success-ring-vivid: rgba(74, 222, 128, 0.1);
--color-success-text-vivid: #86efac;
--color-success-ring-vivid-lg: rgba(74, 222, 128, 0.15);
--color-success-icon-vivid: #4ade80;
--color-secret-green: #059669;
/* Additional overlays */
--color-overlay-mid: rgba(0, 0, 0, 0.6);
--color-overlay-video: rgba(0, 0, 0, 0.55);
/* Progress overlays */
--color-progress-overlay: rgba(255, 255, 255, 0.95);
--color-progress-overlay-dark: rgba(30, 41, 59, 0.95);
/* Misc */
--color-black: #000000;
--color-info-border-light: #90cdf4;
--color-notification-error-ring: rgba(255, 59, 48, 0.1);
--color-accent-second: #ff2d55;
--color-warning-ring-xs: rgba(255, 193, 7, 0.05);
/* Avatar / profile */
--color-avatar-gradient: linear-gradient(135deg, #3b82f6, #6366f1);
--color-text-navy: #1a1a2e;
--color-role-admin-bg: #dbeafe;
--color-role-admin-text: #1d4ed8;
--color-dark-mid: #475569;
--color-role-admin-dark-bg: #1e3a5f;
/* Photo tile */
--color-photo-check-border: rgba(255, 255, 255, 0.8);
/* Accent shadow (smaller) */
--color-accent-shadow-sm: rgba(255, 94, 58, 0.25);
/* Warning faint background */
--color-warning-bg-faint: #fffbeb;
/* Storage progress fill gradients */
--color-storage-fill-green: linear-gradient(90deg, #059669, #10b981);
--color-storage-fill-orange: linear-gradient(90deg, #d97706, #f59e0b);
--color-storage-fill-red: linear-gradient(90deg, #dc2626, #ef4444);
/* Error text (dark shade) — light-mode is dark red, dark-mode is light red. */
--color-error-text-dark: light-dark(#991b1b, #f87171);
/* Stat warning border */
--color-stat-warn-border: #fbbf24;
/* Status badge — success/emerald */
--color-badge-success-bg: #ecfdf5;
--color-badge-success-bg-medium: #d1fae5;
--color-badge-success-text: #065f46;
--color-badge-success-border: #a7f3d0;
--color-badge-success-fill: #047857;
--color-badge-success-fill-dark: #064e27;
--color-badge-success-fill-faint: #f0fdf4;
--color-badge-green-bg: #ecfdf5;
--color-badge-green-text: #065f46;
/* Status badge — orange/coral (used by role-chip & user-vignette) */
--color-badge-orange-bg: light-dark(#fff5f3, #2a1814);
--color-badge-orange-text: light-dark(#ff5e3a, #ff8a65);
/* Status badge — error/red */
--color-badge-error-border: #fecaca;
/* Status badge — warning/amber */
--color-badge-warning-text: #92400e;
--color-badge-warning-border: #fde68a;
--color-badge-amber-bg: #fef3c7;
--color-badge-amber-text: #f59e0b;
/* Status badge — indigo/purple */
--color-badge-indigo-bg: #ede9fe;
--color-badge-indigo-text: #6d28d9;
/* Status badge — blue (used by role-chip & user-vignette) */
--color-badge-blue-bg: light-dark(#eff6ff, #0c2d48);
--color-badge-blue-text: light-dark(#1e40af, #93c5fd);
--color-badge-blue-border: #bfdbfe;
/* Status badge — gray/disabled */
--color-badge-gray: #d1d5db;
/* (Removed: the legacy dark-mode badge tokens that lived here had zero
* consumers — the light-dark() badge tokens above are the single source.) */
/* Dark structural */
--color-dark-footer: #162032;
--color-scrollbar-dark: rgba(255, 255, 255, 0.15);
--color-border-dark-faint: rgba(255, 255, 255, 0.03);
/* Misc */
--color-bg-off-white: #fafbfd;
--color-danger-shadow: rgba(220, 38, 38, 0.2);
--color-danger-shadow-lg: rgba(220, 38, 38, 0.3);
--color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--color-music-background: var(--color-bg-surface);
--color-music-public-bg: rgba(74, 144, 217, 0.12);
--color-video-play: #ffffff;
--color-video-play-shadow: #000000;
}
/* Explicit user choice overrides the OS preference. `theme-init.js` writes
* the attribute from localStorage on render-blocking startup. */
html[data-color-scheme="light"] {
color-scheme: light;
}
html[data-color-scheme="dark"] {
color-scheme: dark;
}
/* Compact density — tighter rows/controls. Toggled by writing
* data-density="compact" on <html>; consumed by list/control CSS in Fase 1. */
html[data-density="compact"] {
--density-row-py: var(--space-2); /* 8px */
--density-row-px: var(--space-2-5); /* 10px */
--density-gap: var(--space-2);
--density-control-h: 32px;
}
/* High-contrast border ramp (prefers-contrast: more). Lives here in the token
* layer — the only place raw colour values belong — so the "no raw hex outside
* variables/themes" invariant holds. The matching text-tier collapse + focus
* ring (token/outline only) stay in base/a11y.css. */
@media (prefers-contrast: more) {
:root {
--color-border: light-dark(#64748b, #94a3b8);
--color-border-light: light-dark(#64748b, #94a3b8);
--color-border-medium: light-dark(#475569, #cbd5e1);
}
}
static/css/components/batchToolbar.css
-101
View File
@@ -1,101 +0,0 @@
/* Multi-Select – batch action toolbar
* Per-item checkbox styles (.file-item .checkbox-cell, .list-header.selection-mode)
* live in resourceList.css alongside the item renderer. */
.batch-selection-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-width: 0;
}
.batch-selection-bar {
display: flex;
align-items: center;
background: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-2xl);
overflow: hidden;
margin-right: var(--space-3);
height: 60px;
transform: translateY(-8px);
transition:
opacity 0.2s,
max-height 0.25s,
transform 0.2s,
margin 0.2s,
padding 0.2s;
pointer-events: auto;
}
.batch-bar-close {
background: none;
border: none;
color: var(--color-multiselect-text-faint);
cursor: pointer;
font-size: var(--text-base);
padding: var(--space-1) var(--space-1-5);
border-radius: var(--radius-md);
transition:
background 0.15s,
color 0.15s;
}
.batch-bar-close:hover {
background: var(--color-multiselect-hover-bg);
color: var(--color-multiselect-text);
}
.batch-bar-count {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.batch-bar-actions {
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.batch-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: 7px var(--space-3-5);
border: none;
border-radius: var(--radius-lg);
background: var(--color-multiselect-hover-bg);
color: var(--color-multiselect-action-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.batch-btn:hover {
background: var(--color-multiselect-action-hover);
}
.batch-btn-danger {
background: var(--color-multiselect-danger-bg);
color: var(--color-multiselect-danger-text);
}
.batch-btn-danger:hover {
background: var(--color-multiselect-danger-active);
color: var(--color-multiselect-danger-text-active);
}
@media (max-width: 640px) {
.batch-btn span {
display: none;
}
.batch-btn {
padding: 7px var(--space-2-5);
}
}
static/css/components/brandLogo.css
-24
View File
@@ -1,24 +0,0 @@
/* ============================================================
* Canonical brand mark — the OxiCloud cloud glyph on the accent
* gradient tile. Reusable lockup for external surfaces (share,
* device-verify) so they present the real mark, not text/emoji.
* Uses the single --color-logo-gradient token.
* ============================================================ */
.brand-mark {
width: 56px;
height: 56px;
border-radius: var(--radius-3xl);
background: var(--color-logo-gradient);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
box-shadow: 0 4px 14px var(--color-accent-shadow);
}
.brand-mark svg {
width: 32px;
height: 32px;
fill: var(--color-on-accent);
}
static/css/components/breadcrumb.css
-65
View File
@@ -1,65 +0,0 @@
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 15px;
font-size: var(--text-base);
color: var(--color-text-medium);
gap: var(--space-0-5);
}
.breadcrumb-item {
padding: var(--space-0-5) var(--space-1);
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition:
background 0.15s,
color 0.15s;
}
.breadcrumb-link {
cursor: pointer;
color: var(--color-text-muted);
}
.breadcrumb-link.drop-target {
background-color: var(--color-warning-ring);
border: 2px dashed var(--color-warning-border);
}
.breadcrumb-link:hover {
text-decoration: underline;
color: var(--color-accent);
background: var(--color-accent-bg);
}
.breadcrumb-current {
font-weight: var(--weight-semibold);
color: var(--color-text-black);
cursor: default;
}
.breadcrumb-separator {
margin: 0 var(--space-1);
color: var(--color-text-faint);
font-size: var(--text-xs);
user-select: none;
}
.breadcrumb-home {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
}
.breadcrumb-home i {
font-size: var(--text-xs);
}
.breadcrumb-home.breadcrumb-link:hover {
background: var(--color-accent-ring);
}
static/css/components/buttons.css
-259
View File
@@ -1,259 +0,0 @@
.btn {
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-2xl);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-base);
font-weight: var(--weight-medium);
gap: var(--space-2);
transition: all 0.2s ease;
}
.btn i {
font-size: 15px;
}
.btn-primary {
background: var(--color-accent-gradient);
color: var(--color-danger-text);
box-shadow: 0 4px 15px var(--color-accent-shadow);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--color-accent-shadow-lg);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 10px var(--color-accent-shadow);
}
.btn-secondary {
background-color: var(--color-bg-hover);
color: var(--color-text-secondary);
border: 2px solid var(--color-border);
}
.btn-secondary:hover {
background-color: var(--color-bg-input-alt);
border-color: var(--color-border-medium);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--color-shadow-sm);
}
.btn-secondary:active {
transform: translateY(0);
background-color: var(--color-border);
}
.btn-danger {
background: var(--color-danger-gradient);
color: var(--color-danger-text);
box-shadow: 0 4px 15px var(--color-danger-ring);
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--color-danger-ring-lg);
}
.btn-danger:active {
transform: translateY(0);
box-shadow: 0 2px 10px var(--color-danger-ring);
}
/* ── State matrix: focus / disabled / loading ───────────────── */
/* Keyboard focus ring (explicit so the gradient variants get a crisp ring;
mirrors the global a11y baseline). */
.btn:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* Disabled — dimmed, no hover lift, non-interactive. */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
pointer-events: none;
}
/* Loading — hide the label, show an inline spinner, block interaction.
Toggle with the `.is-loading` class or `aria-busy="true"`. */
.btn.is-loading,
.btn[aria-busy="true"] {
position: relative;
color: transparent;
pointer-events: none;
}
.btn.is-loading::after,
.btn[aria-busy="true"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid var(--color-on-accent);
border-top-color: transparent;
border-radius: var(--radius-full);
animation: spin var(--spin-duration) linear infinite;
}
/* The secondary button's text isn't white — tint its spinner to the text. */
.btn-secondary.is-loading::after,
.btn-secondary[aria-busy="true"]::after {
border-color: var(--color-text-secondary);
border-top-color: transparent;
}
/* View Toggle Buttons */
.view-toggle {
display: flex;
gap: var(--space-0-5);
padding: 3px;
background-color: var(--color-bg-muted);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
}
.toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 32px;
background-color: transparent;
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--color-text-faint);
font-size: var(--text-base);
transition: all 0.2s ease;
}
.toggle-btn:hover {
background-color: var(--color-border);
color: var(--color-text-subtle);
}
.toggle-btn.active {
background-color: var(--color-border);
color: var(--color-accent);
box-shadow: 0 1px 3px var(--color-shadow);
}
.toggle-btn i {
pointer-events: none;
}
/* ── Group-by selector (inside .view-toggle) ────────────── */
.view-toggle-separator {
width: 1px;
height: 20px;
background: var(--color-border-medium);
align-self: center;
margin: 0 var(--space-0-5);
}
.view-toggle-separator.hidden {
display: none;
}
.group-by-selector {
display: flex;
align-items: center;
position: relative;
}
.group-by-selector.hidden {
display: none;
}
.group-by-btn.active {
color: var(--color-accent);
}
/* Sort direction button — rotate the SVG icon when order is reversed */
.sort-dir-btn .oxi-icon {
transition: transform 0.2s ease;
}
.sort-dir-btn.active .oxi-icon {
transform: rotate(180deg);
}
/* Active label shown inline next to the icon */
.group-by-label {
display: none;
font-size: 0.78rem;
font-weight: var(--weight-semibold);
white-space: nowrap;
}
/* When a group-by is selected the label has text — expand the button to fit */
.group-by-btn:has(.group-by-label:not(:empty)) {
width: auto;
padding: 0 var(--space-2);
gap: 5px;
}
.group-by-btn:has(.group-by-label:not(:empty)) .group-by-label {
display: inline;
}
.group-by-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 200;
min-width: 140px;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px var(--color-shadow);
padding: var(--space-1);
display: flex;
flex-direction: column;
gap: var(--space-0-5);
}
.group-by-menu.hidden {
display: none;
}
.group-by-option {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-2-5);
border: none;
background: transparent;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.85rem;
color: var(--color-text);
text-align: left;
width: 100%;
}
.group-by-option:hover {
background: var(--color-border);
}
.group-by-option.active {
color: var(--color-accent);
font-weight: var(--weight-semibold);
}
static/css/components/commandPalette.css
-106
View File
@@ -1,106 +0,0 @@
/* ============================================================
* Command palette (Cmd / Ctrl + K). Injected into <body> by
* js/app/commandPalette.js. Motion respects reduced-motion via
* the global guard; focus rings via the global :focus-visible.
* ============================================================ */
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12vh var(--space-4) var(--space-4);
background: var(--color-overlay);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity var(--motion-base) var(--ease-standard);
}
.cmdk-overlay.active {
opacity: 1;
}
.cmdk-overlay.hidden {
display: none;
}
.cmdk-panel {
width: min(560px, 92vw);
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-2xl);
overflow: hidden;
transform: translateY(-8px) scale(0.98);
transition: transform var(--motion-base) var(--ease-standard);
}
.cmdk-overlay.active .cmdk-panel {
transform: none;
}
.cmdk-search {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.cmdk-search i {
color: var(--color-text-muted);
}
.cmdk-input {
flex: 1;
min-width: 0;
border: none;
background: none;
font-size: var(--text-md);
color: var(--color-text);
outline: none;
}
.cmdk-input::placeholder {
color: var(--color-text-faint);
}
.cmdk-list {
list-style: none;
margin: 0;
padding: var(--space-1-5);
max-height: 56vh;
overflow-y: auto;
}
.cmdk-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--color-text);
}
.cmdk-item i {
width: 20px;
text-align: center;
color: var(--color-text-muted);
}
.cmdk-item.is-active {
background: var(--color-accent-bg-sm);
}
.cmdk-item.is-active i {
color: var(--color-accent);
}
.cmdk-empty {
padding: var(--space-5);
text-align: center;
color: var(--color-text-muted);
}
static/css/components/contextMenu.css
-76
View File
@@ -1,76 +0,0 @@
/* Context menu */
.context-menu {
position: absolute;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow:
0 10px 36px var(--color-shadow-lg),
0 0 0 1px var(--color-shadow-xs);
padding: var(--space-1-5);
min-width: 200px;
z-index: 2000;
display: block;
animation: contextMenuIn 0.15s ease-out;
}
@keyframes contextMenuIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.context-menu-item {
padding: var(--space-2-5) var(--space-3-5);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text-dark);
font-size: var(--text-base);
border-radius: var(--radius-lg);
transition: background 0.12s ease;
}
.context-menu-item:hover {
background: var(--color-border-light);
}
.context-menu-item:active {
background: var(--color-border);
}
.context-menu-item i {
width: 18px;
text-align: center;
font-size: var(--text-base);
color: var(--color-text-subtle);
[dir="rtl"] & {
margin-left: 0;
margin-right: 0;
}
}
.context-menu-item-danger {
color: var(--color-danger-alt);
}
.context-menu-item-danger:hover {
background: var(--color-danger-light-bg);
}
.context-menu-item-danger i {
color: var(--color-danger-alt);
}
.context-menu-separator {
height: 1px;
background: var(--color-border-light);
margin: var(--space-1) var(--space-2);
}
static/css/components/csp-utilities.css
-171
View File
@@ -1,171 +0,0 @@
/* CSP-compliant utility classes — replaces inline style="" attributes */
/* ── Empty state icons (large, muted) ── */
.empty-state-icon {
font-size: var(--text-6xl);
color: var(--color-accent);
margin-bottom: var(--space-4);
opacity: 0.9;
}
.empty-state-icon.error {
color: var(--color-danger-text-alt);
}
.empty-state-icon.spinner {
color: var(--color-text-medium);
}
/* ── Dialog header icons (accent color) ── */
.dialog-header-icon {
color: var(--color-accent);
}
/* ── Icon spacing ── */
.icon-mr {
margin-right: 5px;
}
.icon-ml {
margin-left: var(--space-1);
font-size: var(--text-xs);
}
/* ── Success check icon ── */
.check-icon {
color: var(--color-success-border);
}
/* ── Move dialog ── */
.move-dialog-hint {
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-base);
}
.folder-select-container {
max-height: 220px;
overflow-y: auto;
}
/* ── Share dialog sections ── */
.share-section {
margin: 15px 0;
}
/* ── Search spinner ── */
.search-spinner {
margin-right: var(--space-2);
}
/* ── Search empty state text ── */
.search-empty-text {
color: var(--text-secondary, var(--color-text-subtle));
}
/* ── Notification upload current file ── */
.notif-upload-current {
font-size: var(--text-2xs);
color: var(--color-text-subtle);
margin: 3px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Login auth hint ── */
.auth-hint {
color: var(--text-secondary, var(--color-text-medium));
margin-top: var(--space-1);
display: block;
}
/* ── About modal (userMenu.js profile popup) ── */
.about-modal-body {
max-width: 380px;
}
.about-modal-header {
text-align: center;
padding: var(--space-5) var(--space-5) 0;
}
.about-modal-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-avatar-gradient);
color: var(--color-danger-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-3);
}
.about-modal-username {
margin: 0;
font-size: var(--text-lg);
color: var(--color-text-navy);
}
.about-modal-email {
margin: var(--space-1) 0 0;
font-size: var(--text-sm);
color: var(--color-text-subtle);
}
.about-modal-role {
display: inline-block;
margin-top: var(--space-2);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-xl);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
}
.about-modal-role-admin {
background: var(--color-role-admin-bg);
color: var(--color-role-admin-text);
}
.about-modal-role-user {
background: var(--color-border-light);
color: var(--color-text-subtle);
}
.about-modal-storage {
padding: var(--space-4) var(--space-5);
}
.about-modal-storage-label {
font-size: var(--text-xs);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-1-5);
}
.about-modal-storage-label i {
margin-right: var(--space-1);
}
.about-modal-bar-bg {
background: var(--color-border-light);
border-radius: var(--radius-md);
height: 8px;
overflow: hidden;
margin-bottom: var(--space-1);
}
.about-modal-bar-fill {
height: 100%;
border-radius: var(--radius-md);
transition: width 0.3s;
}
.about-modal-bar-text {
font-size: var(--text-xs);
color: var(--color-text-subtle);
text-align: right;
}
.about-modal-footer {
padding: 0 var(--space-5) var(--space-4);
display: flex;
justify-content: center;
}
.about-modal-close-btn {
padding: var(--space-2) var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
color: var(--color-text-dark);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background 0.15s;
}
static/css/components/dialogs.css
-662
View File
@@ -1,662 +0,0 @@
/* Dialog animations */
@keyframes modalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modalSlideIn {
from {
transform: scale(0.95) translateY(-10px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
/* Dialog (Rename / Move / Confirm) — Modern Style */
.rename-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
backdrop-filter: blur(2px);
animation: modalFadeIn 0.2s ease;
}
.rename-dialog-content {
background-color: var(--color-bg-surface);
border-radius: var(--radius-3xl);
width: 420px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
overflow: hidden;
animation: modalSlideIn 0.25s ease;
}
.rename-dialog-header {
font-size: 17px;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: var(--space-3);
}
.rename-dialog-body {
padding: var(--space-6);
}
.rename-dialog input {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
font-size: 15px;
background: var(--color-bg-hover);
color: var(--color-text-heading);
transition: all 0.15s ease;
outline: none;
}
.rename-dialog input:focus {
border-color: var(--color-accent);
background: var(--color-bg-surface);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.rename-dialog input--error {
border-color: var(--color-error-text);
}
.rename-dialog-buttons {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.rename-dialog-buttons .btn-outline {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-medium);
}
.rename-dialog-buttons .btn-outline:hover {
background: var(--color-bg-alt);
border-color: var(--color-text-placeholder);
}
/* Share Dialog — Modern Style */
.share-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
backdrop-filter: blur(2px);
animation: modalFadeIn 0.2s ease;
}
.share-dialog-content {
background-color: var(--color-bg-surface);
border-radius: var(--radius-3xl);
width: 480px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
overflow: hidden;
animation: modalSlideIn 0.25s ease;
max-height: 85vh;
overflow-y: auto;
}
.share-dialog-header {
font-size: 17px;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: var(--space-3);
}
.share-dialog input,
.share-dialog textarea {
width: 100%;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-input);
color: var(--color-text-heading);
transition: all 0.15s ease;
outline: none;
}
.share-dialog input:focus,
.share-dialog textarea:focus {
border-color: var(--color-accent);
background: var(--color-bg-surface);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.share-dialog-buttons {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.shared-item-info {
padding: var(--space-3) var(--space-6);
background: var(--color-bg-hover);
border-bottom: 1px solid var(--color-border);
font-size: var(--text-base);
}
.share-options {
padding: var(--space-5) var(--space-6) var(--space-5);
}
.share-options > #share-confirm-btn {
display: block;
margin-left: auto;
margin-top: var(--space-4);
}
.share-options h3,
#existing-shares-section h3,
#new-share-section h3 {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-2-5);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
#existing-shares-section,
#new-share-section {
padding: 0 var(--space-6);
}
.share-dialog .form-group {
padding: 0;
}
/* Shared View Dialog (edit/notification dialogs inside sharedView component) */
.shared-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
backdrop-filter: blur(2px);
animation: modalFadeIn 0.2s ease;
}
.shared-dialog-content {
background-color: var(--color-bg-surface);
border-radius: var(--radius-3xl);
width: 480px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
overflow: hidden;
animation: modalSlideIn 0.25s ease;
max-height: 85vh;
overflow-y: auto;
padding: 0;
}
.shared-dialog-header {
font-size: 17px;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: var(--space-3);
}
.shared-dialog-header .close-dialog-btn {
margin-left: auto;
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--color-text-muted);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
transition: all 0.15s;
}
.shared-dialog-header .close-dialog-btn:hover {
background: var(--color-bg-empty);
color: var(--color-text-heading);
}
.shared-dialog .share-link-section,
.shared-dialog .share-permissions-section,
.shared-dialog .share-password-section,
.shared-dialog .share-expiration-section,
.shared-dialog .notification-form {
padding: var(--space-4) var(--space-6);
}
.shared-dialog .share-link-section label,
.shared-dialog .share-permissions-section h4,
.shared-dialog .notification-form label {
display: block;
font-weight: var(--weight-semibold);
margin-bottom: var(--space-2);
color: var(--color-text);
font-size: var(--text-base);
}
.shared-dialog .share-link-input {
display: flex;
gap: var(--space-2);
}
.shared-dialog .share-link-input input {
flex: 1;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
background: var(--color-bg-hover);
color: var(--color-text-heading);
}
.shared-dialog .share-permissions-section label,
.shared-dialog .share-password-section label,
.shared-dialog .share-expiration-section label {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
font-size: var(--text-base);
color: var(--color-text-secondary);
}
.shared-dialog .password-input-group {
display: flex;
gap: var(--space-2);
margin-top: var(--space-2);
}
.shared-dialog .password-input-group input {
flex: 1;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
background: var(--color-bg-hover);
}
.shared-dialog .share-expiration-section input[type="date"] {
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
background: var(--color-bg-hover);
margin-top: var(--space-2);
}
.shared-dialog .share-actions,
.shared-dialog .notification-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.shared-dialog .notification-form input,
.shared-dialog .notification-form textarea {
width: 100%;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
color: var(--color-text-heading);
outline: none;
transition: all 0.15s ease;
box-sizing: border-box;
}
.shared-dialog .notification-form input:focus,
.shared-dialog .notification-form textarea:focus {
border-color: var(--color-accent);
background: var(--color-bg-surface);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.shared-dialog .notification-form .form-group {
padding: 0;
margin-bottom: 15px;
}
/* Move dialog breadcrumb navigation */
.move-dialog-breadcrumb {
display: none; /* Hidden by default, shown via JS when navigating into subfolders */
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-hover);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
font-size: var(--text-sm);
overflow-x: auto;
}
.move-breadcrumb-item {
color: var(--color-text-secondary);
cursor: pointer;
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
transition: all 0.15s ease;
white-space: nowrap;
}
.move-breadcrumb-item:hover {
background: var(--color-bg-hover);
color: var(--color-text-heading);
}
.move-breadcrumb-item.current {
color: var(--color-accent);
font-weight: var(--weight-semibold);
cursor: default;
}
.move-breadcrumb-separator {
color: var(--color-text-placeholder);
margin: 0 var(--space-0-5);
}
/* Folder select items in move dialog */
.folder-select-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.15s ease;
color: var(--color-text-secondary);
font-size: var(--text-base);
}
.folder-select-item:hover {
background-color: var(--color-bg-hover);
}
.folder-select-item.selected {
background-color: var(--color-accent-ring);
color: var(--color-accent);
font-weight: var(--weight-semibold);
}
.folder-select-item i {
color: var(--color-cal-1);
font-size: var(--text-md);
}
.folder-select-item.selected i {
color: var(--color-accent);
}
/* "Select this folder" option */
.folder-select-item.folder-select-current {
background-color: var(--color-success-ring);
color: var(--color-success-text-strong);
font-weight: var(--weight-medium);
}
.folder-select-item.folder-select-current:hover {
background-color: var(--color-success-ring-dark);
}
.folder-select-item.folder-select-current i {
color: var(--color-success-border);
}
/* Navigate up option */
.folder-select-item.folder-navigate-up {
color: var(--color-text-muted);
font-style: italic;
}
.folder-select-item.folder-navigate-up:hover {
color: var(--color-text-secondary);
}
.folder-select-item.folder-navigate-up i {
color: var(--color-text-placeholder);
}
/* Folder navigation item (click to enter) */
.folder-select-item.folder-navigate {
justify-content: space-between;
}
.folder-select-item.folder-navigate .folder-name {
flex: 1;
}
.folder-select-item.folder-navigate .folder-navigate-icon {
color: var(--color-text-placeholder);
font-size: var(--text-xs);
opacity: 0;
transition: opacity 0.15s ease;
}
.folder-select-item.folder-navigate:hover .folder-navigate-icon {
opacity: 1;
}
/* Empty folder message */
.folder-select-empty {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-6);
color: var(--color-text-placeholder);
font-size: var(--text-base);
}
.folder-select-empty i {
font-size: var(--text-xl);
}
/* Playlist track count in selector */
.playlist-track-count {
margin-left: auto;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Custom confirm dialog */
.confirm-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay-light);
display: flex;
align-items: center;
justify-content: center;
z-index: 4000;
backdrop-filter: blur(2px);
animation: modalFadeIn 0.2s ease;
}
.confirm-dialog.active {
display: flex;
opacity: 1;
}
.confirm-dialog-content {
background: var(--color-bg-surface);
border-radius: var(--radius-3xl);
width: 400px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
overflow: hidden;
animation: modalSlideIn 0.25s ease;
text-align: center;
}
.confirm-dialog-icon {
padding: var(--space-7) var(--space-6) var(--space-3);
}
.confirm-dialog-icon i {
font-size: var(--text-5xl);
color: var(--color-danger-bg);
}
.confirm-dialog-title {
font-size: 17px;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: 0 var(--space-6) var(--space-2);
}
.confirm-dialog-message {
font-size: var(--text-base);
color: var(--color-text-muted);
padding: 0 var(--space-6) var(--space-5);
line-height: var(--leading-normal);
}
.confirm-dialog-buttons {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
justify-content: flex-end;
}
.confirm-dialog-buttons .btn-danger {
background: linear-gradient(135deg, var(--color-danger-bg) 0%, var(--color-danger-bg-hover) 100%);
color: var(--color-danger-text);
border: none;
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-xl);
font-weight: var(--weight-medium);
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 8px var(--color-danger-ring);
}
.confirm-dialog-buttons .btn-danger:hover {
box-shadow: 0 4px 12px var(--color-danger-ring-lg);
transform: translateY(-1px);
}
/* Dialog styles */
.dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.dialog-content {
background-color: var(--color-bg-surface);
border-radius: var(--radius-xl);
box-shadow: 0 10px 25px var(--color-shadow);
width: 500px;
max-width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.dialog-header {
padding: 15px var(--space-5);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.dialog-header h3 {
font-size: var(--text-lg);
color: var(--color-text);
margin: 0;
}
.close-dialog-btn {
background: none;
border: none;
font-size: var(--text-2xl);
cursor: pointer;
color: var(--color-text-placeholder);
}
.dialog-body {
padding: var(--space-5);
}
.share-item-info {
display: flex;
align-items: center;
gap: var(--space-2-5);
margin-bottom: var(--space-5);
}
.share-link-container {
display: flex;
gap: var(--space-2-5);
}
.share-link-container input {
flex-grow: 1;
padding: var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-base);
}
static/css/components/expiryChip.css
-63
View File
@@ -1,63 +0,0 @@
/*
* Shared expiry chip — used by My Shares (link expiration), Trash
* (remaining lifetime), and any future expiry display.
*
* Produced by `formatExpiryChip(value)` in `core/formatters.js`.
* Six tiers map a date to an urgency colour:
*
* never → null value — neutral, infinity icon
* normal → > 30 days away — neutral grey
* caution → 8–30 days — soft amber
* soon → 2–7 days — soft orange
* urgent → today or tomorrow — soft red
* expired → past — deeper red, warning icon
*
* Colours are pastel/tinted on purpose: the chip should give an
* at-a-glance cue without competing visually with surrounding content.
*/
.expiry-chip {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: var(--space-1);
padding: var(--space-0-5) 7px;
border-radius: var(--radius-xl);
font-size: var(--text-2xs);
white-space: nowrap;
}
.expiry-chip__icon {
font-size: 10px;
opacity: 0.7;
}
.expiry-chip--never {
background-color: var(--color-bg-muted);
color: var(--color-text-faint);
}
.expiry-chip--normal {
background-color: var(--color-bg-muted);
color: var(--color-text-muted);
}
.expiry-chip--caution {
background-color: var(--color-warning-bg-light);
color: var(--color-warning-text-amber);
}
.expiry-chip--soon {
background-color: var(--color-warning-orange-bg);
color: var(--color-warning-orange-text);
}
.expiry-chip--urgent {
background-color: var(--color-danger-light-bg);
color: var(--color-danger-text-alt);
}
.expiry-chip--expired {
background-color: var(--color-error-bg);
color: var(--color-error-text-dark);
}
static/css/components/fileManager.css
-17
View File
@@ -1,17 +0,0 @@
/* File-manager page shell — layout concerns specific to the file-manager section.
* Item rendering (grid cards, list rows, drag ghost) lives in resourceList.css. */
.files-container {
padding-top: 3px; /* cards animate on hover; sticky header has positive z-index */
}
/* Rubber band / lasso selection rectangle */
.selection-rect {
position: fixed;
border: 1.5px solid var(--primary-color, var(--color-card-drop-border));
background-color: var(--color-card-drop-tint);
pointer-events: none;
z-index: 1000;
border-radius: 3px;
display: none;
}
static/css/components/fileType.css
-167
View File
@@ -1,167 +0,0 @@
/* -------------------------- file's type to icons --------------------------------------- */
.folder-icon {
background-color: var(--color-ft-folder-bg);
}
.folder-icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 22%;
background-color: var(--color-ft-folder-tab);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* don't use FontAwesome / svg for folders and prefer CSS trick */
.folder-icon > i,
.folder-icon > svg {
display: none !important;
}
.pdf-icon {
background-color: var(--color-ft-pdf-bg);
color: var(--color-ft-pdf-text);
}
.doc-icon {
background-color: var(--color-ft-doc-bg);
color: var(--color-ft-doc-text);
}
.script-icon {
background-color: var(--color-ft-script-bg);
color: var(--color-ft-script-text);
}
.config-icon {
background-color: var(--color-ft-config-bg);
color: var(--color-ft-config-text);
}
.image-icon {
background-color: var(--color-ft-image-bg);
color: var(--color-ft-image-text);
}
.video-icon {
background: linear-gradient(135deg, var(--color-ft-video-bg-from), var(--color-ft-video-bg-to));
color: var(--color-ft-video-text);
}
/* special case for vidao, add ▶ over the thumbnail (only if not hidden = thumb loaded) */
.video-icon:has(img:not(.hidden))::before {
content: "▶";
color: var(--color-video-play);
text-shadow: 0 0 3px var(--color-video-play-shadow);
z-index: 2; /* above the img */
font-weight: var(--weight-bold);
}
.code-icon {
background-color: var(--color-border);
}
.json-icon {
border-top-color: var(--color-ft-orange-light);
}
.js-icon {
border-top-color: var(--color-ft-yellow);
}
.html-icon {
border-top-color: var(--color-ft-html);
}
.css-icon {
border-top-color: var(--color-ft-js);
}
.py-icon {
border-top-color: var(--color-ft-python);
}
.ts-icon {
border-top-color: var(--color-ft-typescript);
}
.rust-icon {
border-top-color: var(--color-ft-rust);
}
.go-icon {
border-top-color: var(--color-ft-go);
}
.java-icon {
border-top-color: var(--color-ft-java);
}
.c-icon {
border-top-color: var(--color-ft-shell);
}
.cs-icon {
border-top-color: var(--color-ft-csharp);
}
.php-icon {
border-top-color: var(--color-ft-php);
}
.ruby-icon {
border-top-color: var(--color-ft-ruby);
}
.swift-icon {
border-top-color: var(--color-ft-swift);
}
.kotlin-icon {
border-top-color: var(--color-ft-kotlin);
}
.sql-icon {
border-top-color: var(--color-ft-scala);
}
.yaml-icon {
border-top-color: var(--color-ft-angular);
}
.toml-icon {
border-top-color: var(--color-ft-cpp);
}
.md-icon {
border-top-color: var(--color-ft-docker);
}
.spreadsheet-icon {
background-color: var(--color-ft-spreadsheet-bg);
color: var(--color-ft-spreadsheet-text);
}
.presentation-icon {
background-color: var(--color-ft-presentation-bg);
color: var(--color-ft-presentation-text);
}
.audio-icon {
/* background-color: var(--color-ft-audio-alt-bg);*/
background-color: var(--color-ft-audio-bg);
color: var(--color-ft-audio-text);
}
.archive-icon {
background-color: var(--color-ft-archive-bg);
color: var(--color-ft-archive-text);
}
.installer-icon {
background-color: var(--color-ft-installer-bg);
color: var(--color-ft-installer-text);
}
static/css/components/groupsModal.css
-308
View File
@@ -1,308 +0,0 @@
/* ── Groups management modal — content styles ─────────────────────────────────
*
* Hosted by Modal.openPanel(). Only this file's content scrolls; the overlay,
* container, header and footer come from modals.css.
*
* Two states share the same body: list (rows of groups + Create button) and
* detail (single-group editor). Switching is a body-level replaceChildren
* call; the modal frame stays open.
*
* BEM root: `.groups-modal`. All colours via design tokens.
* ───────────────────────────────────────────────────────────────────────── */
.groups-modal {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
}
/* ── Common ─────────────────────────────────────────────────────────────── */
.groups-modal__status,
.groups-modal__empty-line {
color: var(--color-text-subtle);
font-size: var(--text-sm);
padding: var(--space-2) 0;
}
.groups-modal__error {
color: var(--color-danger-text);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-alt);
border-radius: var(--radius-md);
padding: var(--space-2-5) var(--space-3);
font-size: var(--text-sm);
}
.groups-modal__inline-error {
margin: 0 0 var(--space-2) 0;
color: var(--color-danger-text);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-alt);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.groups-modal__section-title {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-2);
}
/* ── List view ──────────────────────────────────────────────────────────── */
.groups-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.groups-modal__subtitle {
font-size: var(--text-base);
color: var(--color-text-secondary);
}
.groups-modal__create-btn {
flex-shrink: 0;
}
.groups-modal__list {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 60vh;
overflow-y: auto;
}
.groups-modal__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background-color 0.12s ease;
}
.groups-modal__row:hover,
.groups-modal__row:focus-visible {
background: var(--color-bg-hover);
outline: none;
}
.groups-modal__row-main {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
min-width: 0;
}
.groups-modal__row-desc {
color: var(--color-text-subtle);
font-size: var(--text-xs);
margin-left: var(--space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
}
.groups-modal__row-badge {
background: var(--color-bg-muted);
color: var(--color-text-subtle);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-xl);
text-transform: uppercase;
letter-spacing: 0.03em;
flex-shrink: 0;
margin-left: var(--space-2);
}
.groups-modal__row-count {
color: var(--color-text-subtle);
font-size: var(--text-xs);
flex-shrink: 0;
margin-left: auto;
padding-left: var(--space-2);
white-space: nowrap;
}
.groups-modal__load-more {
align-self: center;
margin-top: var(--space-3);
}
.groups-modal__empty {
text-align: center;
color: var(--color-text-subtle);
padding: var(--space-8) var(--space-3);
}
.groups-modal__empty-icon {
font-size: var(--text-4xl);
color: var(--color-text-faint);
margin-bottom: var(--space-2);
display: block;
}
/* ── Detail view ────────────────────────────────────────────────────────── */
.groups-modal__detail-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.groups-modal__back-btn {
flex-shrink: 0;
}
.groups-modal__detail-title-wrap {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
}
.groups-modal__members {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 40vh;
overflow-y: auto;
}
.groups-modal__member-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-md);
transition: background-color 0.12s ease;
}
.groups-modal__member-row:hover {
background: var(--color-bg-hover);
}
.groups-modal__member-remove {
flex-shrink: 0;
color: var(--color-text-subtle);
width: 28px;
height: 28px;
padding: 0;
border-radius: 50%;
}
.groups-modal__member-remove:hover {
color: var(--color-danger-text);
background: var(--color-danger-bg);
}
/* ── Add-member row ─────────────────────────────────────────────────────── */
.groups-modal__add-row {
position: relative;
margin-top: var(--space-2);
}
.groups-modal__add-input {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text);
font-size: var(--text-sm);
}
.groups-modal__add-input:focus {
outline: 2px solid var(--color-accent-ring);
outline-offset: -1px;
border-color: var(--color-accent);
}
.groups-modal__add-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px var(--color-shadow);
max-height: 240px;
overflow-y: auto;
z-index: 10;
}
.groups-modal__add-dropdown.hidden {
display: none;
}
.groups-modal__add-item {
padding: var(--space-2) var(--space-3);
cursor: pointer;
transition: background-color 0.12s ease;
}
.groups-modal__add-item:hover,
.groups-modal__add-item:focus-visible {
background: var(--color-bg-hover);
outline: none;
}
/* ── Destructive footer ─────────────────────────────────────────────────── */
.groups-modal__footer {
display: flex;
justify-content: flex-start;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
margin-top: var(--space-2);
}
/* ── Inline create / rename / confirm-delete forms ──────────────────────── */
/* Modal is a singleton; nesting Modal.prompt inside an open openPanel()
* can't surface its input. We render the form inside the panel body
* instead, swapping back to list / detail on submit or cancel. */
.groups-modal__form {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.groups-modal__form-label {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
}
.groups-modal__form-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-1);
}
.groups-modal__inline-error.hidden {
display: none;
}
static/css/components/icons.css
-23
View File
@@ -1,23 +0,0 @@
/* SVG icon base styles (replaces inline <style> from icons.js) */
.oxi-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
overflow: hidden;
flex-shrink: 0;
}
.oxi-icon-spin {
animation: oxi-spin 1s linear infinite;
}
@keyframes oxi-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
static/css/components/itemTooltip.css
-92
View File
@@ -1,92 +0,0 @@
/* ── Item tooltip — "technical sheet" ─────────────────────────────────────── */
/* */
/* Absolutely overlays `.search-slot` in the top-bar. The search bar stays in */
/* place underneath; only the tooltip's opacity is animated, so there is no */
/* second element to keep in sync and no display:none flicker between rapid */
/* hover transitions. RTL just works (inset:0). */
/* */
/* 3-column CSS grid: [icon] [label] [value] */
/* All values start at the same x position regardless of label width. */
.path-tooltip {
/* Cover the search slot, sit above it (later in DOM order). */
position: absolute;
inset: 0;
/* Opaque background so the search bar underneath is fully masked. */
background-color: var(--color-bg-surface);
display: grid;
grid-template-columns: 1em max-content 1fr;
column-gap: 0.6em;
row-gap: var(--space-1-5);
align-items: center;
color: var(--color-text-muted);
font-size: var(--text-xs);
pointer-events: none;
/* Show instantly. The hide direction (.hidden) overrides this with a
1s delay so the tooltip lingers after the mouse leaves an item;
rapid item-to-item moves cancel the pending fade before it fires. */
opacity: 1;
transition: opacity 0.2s ease 0s;
}
/* Hidden state — override the global `.hidden { display:none !important }`
so we can fade with opacity instead of snapping to display:none. */
.path-tooltip.hidden {
display: grid !important;
opacity: 0;
transition-delay: 1s;
}
/* Icon column */
.path-tooltip__icon {
color: var(--color-text-faint);
font-size: 0.7rem;
text-align: center;
justify-self: center;
}
/* Label column */
.path-tooltip__label {
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
white-space: nowrap;
}
.path-tooltip__label::after {
content: ":";
}
/* Value column */
.path-tooltip__value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Path value uses monospace to read folder separators clearly */
.path-tooltip__value--path {
font-family: monospace;
}
/* "?" placeholder when data is absent */
.path-tooltip__value--unknown {
color: var(--color-text-faint);
font-style: italic;
}
/* ── Vignette inside tooltip ─────────────────────────────────────────────── */
/* The vignette name hard-codes 14px; scale it down to match the tooltip. */
.path-tooltip .user-vignette {
overflow: hidden;
min-width: 0;
}
.path-tooltip .user-vignette__name {
font-size: var(--text-xs);
}
static/css/components/languageSelector.css
-175
View File
@@ -1,175 +0,0 @@
/* Language Selector - Custom Dropdown */
.language-selector {
position: relative;
}
.language-selector-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3-5);
background-color: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: 50px;
cursor: pointer;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
transition: all 0.2s ease;
user-select: none;
}
.language-selector-toggle:hover {
background-color: var(--color-border);
border-color: var(--color-border-medium);
}
.language-selector-toggle i {
font-size: var(--text-base);
color: var(--color-text-muted);
}
.language-selector-toggle .lang-code {
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.language-selector-toggle .dropdown-arrow {
font-size: 10px;
color: var(--color-text-muted);
transition: transform 0.2s ease;
margin-left: var(--space-0-5);
}
.language-selector.open .dropdown-arrow {
transform: rotate(180deg);
}
.language-selector-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
max-height: 420px;
overflow-y: auto;
background-color: var(--color-bg-surface);
border-radius: var(--radius-2xl);
box-shadow: 0 4px 20px var(--color-shadow-lg);
border: 1px solid var(--color-border);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1000;
}
.language-selector.open .language-selector-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-3) var(--space-4);
cursor: pointer;
font-size: var(--text-base);
color: var(--color-text-secondary);
transition: background-color 0.15s ease;
}
.language-option:hover {
background-color: var(--color-bg-hover);
}
.language-option.active {
background-color: var(--color-accent-bg-sm);
color: var(--color-accent-text);
}
.language-option .lang-flag {
font-size: var(--text-lg);
line-height: var(--leading-none);
}
.language-option .lang-name {
flex: 1;
}
.language-option .lang-check {
color: var(--color-accent);
font-size: var(--text-xs);
opacity: 0;
}
.language-option.active .lang-check {
opacity: 1;
}
/* ── Language selector inside user menu ── */
.user-menu .language-selector {
width: 100%;
}
/* Match user-menu-item appearance exactly */
.user-menu .language-selector-toggle {
width: 100%;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--space-3) var(--space-5);
gap: var(--space-3);
color: var(--color-text-dark);
font-size: var(--text-base);
cursor: pointer;
}
.user-menu .language-selector-toggle:hover,
.user-menu .language-selector-toggle:focus {
background: var(--color-bg-hover) !important;
border: none !important;
}
.user-menu .language-selector-toggle i.fa-globe {
width: 20px;
text-align: center;
font-size: 15px;
color: var(--color-text-subtle);
}
.user-menu .language-selector-toggle .lang-code {
font-weight: var(--weight-medium);
font-size: var(--text-sm);
color: var(--color-text-dark);
}
/* Inline accordion — no floating */
.user-menu .language-selector-dropdown {
position: static !important;
box-shadow: none !important;
border: none !important;
border-top: 1px solid var(--color-border-light);
border-radius: 0 !important;
background: var(--color-bg-muted);
max-height: 0;
overflow: hidden;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: max-height 0.25s ease;
z-index: auto !important;
}
.user-menu .language-selector.open .language-selector-dropdown {
max-height: 260px;
overflow-y: auto;
}
/* Language options inside user menu — compact rows */
.user-menu .language-option {
padding: var(--space-2-5) var(--space-5) var(--space-2-5) var(--space-7);
font-size: 13.5px;
}
static/css/components/linkChip.css
-46
View File
@@ -1,46 +0,0 @@
/* ── Link chip ───────────────────────────────────────────────────────────────
*
* Inline clickable element representing a share link.
* Usage: buildLinkChip(grant) → HTMLButtonElement with class .link-chip
* ─────────────────────────────────────────────────────────────────────────── */
.link-chip {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: var(--space-0-5) 0;
border: none;
background: transparent;
color: var(--color-text);
cursor: pointer;
font-size: var(--text-sm);
text-align: left;
transition: color 0.12s;
}
.link-chip:hover {
color: var(--color-accent);
}
.link-chip:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.link-chip__icon {
font-size: var(--text-xs);
color: var(--color-text-faint);
flex-shrink: 0;
transition: color 0.12s;
}
.link-chip:hover .link-chip__icon {
color: var(--color-accent);
}
.link-chip__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
static/css/components/modals.css
-331
View File
@@ -1,331 +0,0 @@
/* About Modal */
.about-modal-overlay {
display: flex;
position: fixed;
inset: 0;
background: var(--color-overlay);
backdrop-filter: blur(4px);
z-index: 3000;
justify-content: center;
align-items: center;
}
.about-modal {
background: var(--color-bg-surface);
border-radius: var(--radius-4xl);
padding: var(--space-10);
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px var(--color-shadow-xl);
animation: userMenuIn 0.25s ease-out;
}
.about-modal-logo {
width: 72px;
height: 72px;
background: var(--color-logo-gradient);
border-radius: var(--radius-4xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5);
box-shadow: 0 8px 24px var(--color-accent-shadow);
}
.about-modal-logo svg {
width: 36px;
height: 36px;
fill: var(--color-on-accent);
}
.about-modal h2 {
font-size: 22px;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
margin-bottom: var(--space-1-5);
}
.about-modal .about-version {
font-size: var(--text-sm);
color: var(--color-text-faint);
margin-bottom: var(--space-5);
}
.about-modal .about-description {
font-size: var(--text-base);
color: var(--color-text-subtle);
line-height: 1.6;
margin-bottom: var(--space-6);
}
.about-modal .about-tech {
display: flex;
justify-content: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
.about-modal .about-tech-badge {
padding: var(--space-1) var(--space-3);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-4xl);
font-size: var(--text-xs);
color: var(--color-text-subtle);
font-weight: var(--weight-medium);
}
.about-modal .about-links {
display: flex;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.about-modal .about-link {
display: flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--text-sm);
color: var(--color-accent-text);
text-decoration: none;
font-weight: var(--weight-medium);
transition: opacity 0.2s;
}
.about-modal .about-link:hover {
opacity: 0.8;
}
.about-modal .about-close-btn {
padding: var(--space-2-5) var(--space-8);
background: var(--color-accent-gradient);
color: var(--color-danger-text);
border: none;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition:
transform 0.2s,
box-shadow 0.2s;
box-shadow: 0 4px 15px var(--color-accent-shadow);
}
.about-modal .about-close-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px var(--color-accent-shadow-lg);
}
/* Modern Modal Overlay */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay);
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
opacity: 0;
transition: opacity 0.2s ease;
}
.modal-overlay.active {
display: flex;
opacity: 1;
}
.modal-container {
background-color: var(--color-bg-surface);
border-radius: var(--radius-3xl);
width: 420px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-3xl);
transform: scale(0.9) translateY(-20px);
transition: transform 0.2s ease;
overflow: hidden;
}
.modal-overlay.active .modal-container {
transform: scale(1) translateY(0);
}
.modal-header {
display: flex;
align-items: center;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
position: relative;
}
.modal-icon {
width: 44px;
height: 44px;
background: var(--color-accent-gradient);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3-5);
flex-shrink: 0;
[dir="rtl"] & {
margin-left: var(--space-3-5);
margin-right: unset;
}
}
.modal-icon i {
color: var(--color-danger-text);
font-size: var(--text-xl);
}
.modal-header h2,
.modal-header h3 {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
margin: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modal-close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: var(--color-bg-muted);
border-radius: var(--radius-lg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-subtle);
transition: all 0.15s ease;
[dir="rtl"] & {
left: 16px;
right: unset;
}
}
.modal-close-btn:hover {
background: var(--color-border);
color: var(--color-text-heading);
}
.modal-body {
padding: var(--space-6);
}
.modal-body label {
display: block;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.modal-input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: 15px;
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-bg-hover);
color: var(--color-text-heading);
transition: all 0.15s ease;
outline: none;
}
.modal-input:focus {
border-color: var(--color-accent);
background: var(--color-bg-surface);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.modal-input::placeholder {
color: var(--color-text-placeholder);
}
.modal-input--error {
border-color: var(--color-error-text);
}
.modal-error {
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--color-error-text);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.modal-footer .btn {
padding: var(--space-2-5) var(--space-5);
font-size: var(--text-base);
font-weight: var(--weight-medium);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.15s ease;
}
.modal-footer .btn-secondary {
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.modal-footer .btn-secondary:hover {
background: var(--color-bg-muted);
border-color: var(--color-border-medium);
}
.modal-footer .btn-primary {
background: var(--color-accent-gradient);
border: none;
color: var(--color-danger-text);
box-shadow: 0 2px 8px var(--color-accent-shadow);
}
.modal-footer .btn-primary:hover {
box-shadow: 0 4px 12px var(--color-accent-shadow-lg);
transform: translateY(-1px);
}
.modal-footer .btn-primary:active {
transform: translateY(0);
}
/* ── Panel mode (ShareModal, etc.) ─────────────────────────────────────────── */
/* Wider, taller container; body becomes a zero-padding scrollable slot. */
.modal-container--panel {
width: 620px;
max-width: 96vw;
max-height: 88vh;
display: flex;
flex-direction: column;
}
.modal-container--panel .modal-body {
padding: 0;
overflow-y: auto;
flex: 1;
}
static/css/components/notifications.css
-371
View File
@@ -1,371 +0,0 @@
/* Notification */
.notification {
position: absolute;
top: 70px;
right: 20px;
background-color: var(--color-notification-bg);
width: 250px;
border-radius: var(--radius-lg);
box-shadow: 0 5px 15px var(--color-shadow);
padding: 15px;
border-left: 4px solid var(--color-accent);
z-index: 1000;
display: none;
[dir="rtl"] & {
left: 20px;
border-right: 4px solid var(--color-accent);
right: unset;
border-left: unset;
}
}
.notification-title {
font-weight: var(--weight-bold);
font-size: var(--text-base);
margin-bottom: 5px;
color: var(--color-text);
}
.notification-message {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Notification banner */
.notification-banner {
position: fixed;
top: 20px;
right: 20px;
padding: 15px var(--space-5);
background-color: var(--color-notification-bg);
border-radius: var(--radius-lg);
box-shadow: 0 4px 12px var(--color-shadow);
display: flex;
align-items: center;
justify-content: space-between;
max-width: 400px;
z-index: 2000;
transform: translateY(-100px);
opacity: 0;
transition:
transform 0.3s,
opacity 0.3s;
}
.notification-banner.active {
transform: translateY(0);
opacity: 1;
}
.notification-banner.success {
border-left: 4px solid var(--color-success-border);
}
.notification-banner.error {
border-left: 4px solid var(--color-danger-bg);
}
.close-notification-btn {
background: none;
border: none;
font-size: var(--text-lg);
cursor: pointer;
color: var(--color-text-placeholder);
margin-left: var(--space-2-5);
}
/* Notification Bell */
.notif-wrapper {
position: relative;
}
.notif-bell-btn {
background: none;
border: none;
cursor: pointer;
font-size: var(--text-lg);
color: var(--color-text-subtle);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
position: relative;
}
.notif-bell-btn:hover {
background: var(--color-accent-bg-sm);
color: var(--color-accent);
}
.notif-bell-btn.active {
color: var(--color-accent);
background: var(--color-accent-ring);
}
.notif-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
line-height: 16px;
border-radius: var(--radius-lg);
background: var(--color-notification-badge);
color: var(--color-notification-bg);
font-size: 10px;
font-weight: var(--weight-bold);
text-align: center;
padding: 0 var(--space-1);
pointer-events: none;
}
@keyframes bellRing {
0%,
100% {
transform: rotate(0deg);
}
13% {
transform: rotate(22deg);
}
26% {
transform: rotate(-22deg);
}
39% {
transform: rotate(14deg);
}
52% {
transform: rotate(-14deg);
}
65% {
transform: rotate(8deg);
}
78% {
transform: rotate(-8deg);
}
91% {
transform: rotate(3deg);
}
}
.notif-bell-btn.ring {
animation: bellRing 1s ease;
}
.notif-panel {
display: none;
position: absolute;
top: calc(100% + 10px);
right: -40px;
width: 380px;
max-height: 480px;
background: var(--color-notification-bg);
border-radius: var(--radius-3xl);
box-shadow:
0 12px 40px var(--color-shadow-md),
0 0 0 1px var(--color-shadow-xs);
z-index: 2000;
overflow: hidden;
animation: notifPanelIn 0.2s ease-out;
}
.notif-wrapper.open .notif-panel {
display: flex;
flex-direction: column;
}
@keyframes notifPanelIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.notif-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--color-border-xfaint);
}
.notif-panel-title {
font-weight: var(--weight-semibold);
font-size: 15px;
color: var(--color-text-heading);
}
.notif-clear-btn {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-faint);
font-size: var(--text-base);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
transition: all 0.15s;
}
.notif-clear-btn:hover {
color: var(--color-accent);
background: var(--color-accent-bg-sm);
}
.notif-panel-body {
flex: 1;
overflow-y: auto;
max-height: 400px;
/* Thin, neutral scrollbar — replaces the heavy global accent bar that read
as amateur in the panel. */
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.notif-panel-body::-webkit-scrollbar {
width: 6px;
}
.notif-panel-body::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
.notif-panel-body::-webkit-scrollbar-track {
background: transparent;
}
.notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-10) var(--space-5);
color: var(--color-text-faint);
gap: var(--space-2);
}
.notif-empty i {
font-size: var(--text-3xl);
opacity: 0.5;
}
.notif-empty span {
font-size: var(--text-base);
}
.notif-item {
display: flex;
align-items: flex-start;
padding: var(--space-3) var(--space-4);
gap: var(--space-3);
border-bottom: 1px solid var(--color-bg-subtle);
transition: background 0.15s;
cursor: default;
}
.notif-item:last-child {
border-bottom: none;
}
.notif-item:hover {
background: var(--color-bg-hover);
}
.notif-item-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--text-base);
}
.notif-item-icon.upload {
background: var(--color-accent-ring);
color: var(--color-accent);
}
.notif-item-icon.success {
background: var(--color-success-ring);
color: var(--color-notification-success);
}
.notif-item-icon.error {
background: var(--color-notification-error-ring);
color: var(--color-notification-error);
}
.notif-item-body {
flex: 1;
min-width: 0;
}
.notif-item-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
margin-bottom: var(--space-0-5);
}
.notif-item-text {
font-size: var(--text-xs);
color: var(--color-text-subtle);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-item-time {
font-size: var(--text-2xs);
color: var(--color-text-faint);
margin-top: 3px;
}
.notif-upload-progress {
margin-top: var(--space-1-5);
}
.notif-upload-bar {
height: 3px;
background: var(--color-bg-empty);
border-radius: var(--radius-xs);
overflow: hidden;
}
.notif-upload-fill {
height: 100%;
background: var(--color-accent);
width: 0%;
transition: width 0.2s ease;
border-radius: var(--radius-xs);
}
.notif-upload-fill.done {
background: var(--color-notification-success);
}
.notif-upload-fill.error {
background: var(--color-notification-error);
}
.notif-upload-detail {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3px;
}
.notif-upload-pct,
.notif-upload-stats {
font-size: var(--text-2xs);
color: var(--color-text-faint);
}
static/css/components/resourceList.css
-1087
View File
File diff suppressed because it is too large Load Diff
static/css/components/roleChip.css
-46
View File
@@ -1,46 +0,0 @@
/*
* Shared role chip — used by My Shares (and any other surface that
* needs to display a permission role with consistent styling).
*
* Produced by `formatRoleChip(role)` / `buildRoleChip(role)` in
* `components/roleChip.js`. Three tiers:
*
* manage → orange (admin)
* edit → blue (editor)
* view → muted (viewer)
*
* Sized to match `.expiry-chip` so the role and expiry chips line up
* visually side by side.
*/
.role-chip {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: var(--space-1);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-xl);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.role-chip__icon {
font-size: 10px;
opacity: 0.85;
}
.role-chip--manage {
background: var(--color-badge-orange-bg);
color: var(--color-badge-orange-text);
}
.role-chip--edit {
background: var(--color-badge-blue-bg);
color: var(--color-badge-blue-text);
}
.role-chip--view {
background: var(--color-bg-muted);
color: var(--color-text-muted);
}
static/css/components/search.css
-45
View File
@@ -1,45 +0,0 @@
/* Styles for search results */
.search-results-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2-5) 0;
margin-bottom: 15px;
border-bottom: 1px solid var(--color-bg-empty);
width: 100%;
flex-wrap: wrap;
gap: var(--space-2);
}
.search-results-header h3 {
margin: 0;
font-size: var(--text-md);
color: var(--color-text-dim);
}
.search-results-header .search-time {
font-size: var(--text-xs);
font-weight: var(--weight-normal);
color: var(--color-text-light);
}
.search-controls {
display: flex;
align-items: center;
gap: var(--space-2);
}
.search-sort-select {
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border-ddd);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
background: var(--color-bg-surface);
color: var(--color-text-black);
cursor: pointer;
outline: none;
}
.search-sort-select:focus {
border-color: var(--primary-color, var(--color-accent));
}
static/css/components/shareDialog.css
-68
View File
@@ -1,68 +0,0 @@
.permission-options {
display: flex;
gap: 15px;
margin-top: 5px;
}
.permission-option {
display: flex;
align-items: center;
gap: 5px;
}
.existing-share-item {
background-color: var(--color-bg-subtle);
border-radius: var(--radius-sm);
padding: var(--space-2-5);
margin-bottom: var(--space-2-5);
}
.share-url {
font-size: var(--text-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 5px;
color: var(--color-share-link-text);
}
.share-info {
font-size: var(--text-2xs);
display: flex;
gap: 15px;
margin-bottom: var(--space-2-5);
color: var(--color-share-owner-text);
}
.share-protected {
color: var(--color-share-link-text);
}
.share-expiration {
color: var(--color-share-remove-text);
}
.share-actions {
display: flex;
gap: 5px;
justify-content: flex-end;
}
.share-link-actions {
display: flex;
gap: var(--space-2-5);
margin-top: 5px;
}
.btn-small {
font-size: var(--text-xs);
padding: 5px var(--space-2-5);
}
#notification-message {
width: 100%;
padding: var(--space-2-5);
border: 1px solid var(--color-border-ddd);
border-radius: var(--radius-sm);
resize: vertical;
}
static/css/components/shareModal.css
-568
View File
@@ -1,568 +0,0 @@
/* ── Share Modal — content styles ──────────────────────────────────────────────
*
* The overlay, container, header, footer, and animations come from modals.css
* (via Modal.openPanel()). This file only covers the body content: sections,
* member rows, chips, role selects, link rows, and new-link form.
*
* All colours use CSS custom properties. No raw hex/rgb/named values outside
* of :root declarations.
* ─────────────────────────────────────────────────────────────────────────── */
/* ── Body wrapper ────────────────────────────────────────────────────────────── */
.smd-body {
display: flex;
flex-direction: column;
}
/* ── Sections ────────────────────────────────────────────────────────────────── */
.smd-section {
border-top: 0.5px solid var(--color-border);
padding: var(--space-4) var(--space-5);
}
.smd-section:first-child {
border-top: none;
}
.smd-section-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-3);
}
/* ── Loading skeleton ────────────────────────────────────────────────────────── */
.smd-skeleton {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
}
.smd-skeleton-line {
height: 14px;
background: var(--color-bg-muted);
border-radius: var(--radius-md);
animation: smdSkeletonPulse 1.4s ease-in-out infinite;
}
.smd-skeleton-line--short {
width: 40%;
}
.smd-skeleton-line--medium {
width: 65%;
}
@keyframes smdSkeletonPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
/* ── Search row ──────────────────────────────────────────────────────────────── */
.smd-search-row {
display: flex;
gap: var(--space-2);
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.smd-search-wrap {
position: relative;
flex: 1;
min-width: 180px;
}
.smd-search-input {
width: 100%;
padding: 9px var(--space-3);
font-size: var(--text-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-hover);
color: var(--color-text-heading);
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.smd-search-input:focus {
border-color: var(--color-accent);
background: var(--color-bg-surface);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
/* Suggestion dropdown */
.smd-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-surface);
border: 0.5px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px var(--color-shadow-xl);
z-index: 100;
overflow: hidden;
}
.smd-suggestion-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: 9px var(--space-3);
cursor: pointer;
transition: background 0.1s;
}
.smd-suggestion-item:hover,
.smd-suggestion-item:focus {
background: var(--color-bg-hover);
}
/* Vignette fills the row; name + email stack vertically inside .user-vignette__info. */
.smd-suggestion-item .user-vignette {
flex: 1;
min-width: 0;
}
/* "Invite by email" synthetic suggestion (PR 11.3). The hint label sits
to the right of the pending-email vignette and stays muted so the
row reads as auxiliary — the action it commits is more consequential
than a regular contact pick. */
.smd-suggestion-item--email {
border-top: 1px solid var(--color-border);
}
.smd-suggestion-hint {
margin-left: auto;
color: var(--color-text-faint);
font-size: var(--text-xs);
font-style: italic;
flex-shrink: 0;
}
/* Role picker beside the search box */
.smd-role-select {
padding: 9px var(--space-2-5);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-hover);
color: var(--color-text-heading);
cursor: pointer;
max-width: 120px;
}
/* Add button */
.smd-add-btn {
min-height: 36px;
min-width: 44px;
padding: var(--space-2) var(--space-3-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-lg);
}
/* ── Staged chips ────────────────────────────────────────────────────────────── */
.smd-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1-5);
margin-bottom: var(--space-2);
}
.smd-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
border: 0.5px solid var(--color-border-medium);
border-radius: var(--radius-4xl);
background: var(--color-bg-hover);
font-size: var(--text-base);
color: var(--color-text-heading);
}
.smd-chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: none;
background: none;
cursor: pointer;
color: var(--color-text-faint);
padding: 0;
border-radius: 50%;
transition:
background 0.1s,
color 0.1s;
}
.smd-chip-remove:hover {
background: var(--color-bg-muted);
color: var(--color-text-heading);
}
/* ── Member group headings ───────────────────────────────────────────────────── */
.smd-group {
margin-top: var(--space-3);
}
.smd-group:first-child {
margin-top: 0;
}
.smd-group-header {
display: flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-1-5);
}
.smd-group-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
background: var(--color-bg-muted);
color: var(--color-text-subtle);
}
/* ── Member rows ─────────────────────────────────────────────────────────────── */
.smd-member-row {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: 7px 0;
}
/* Vignette grows to fill the member row; role-select + action stay right-aligned. */
.smd-member-row .user-vignette {
flex: 1;
min-width: 0;
}
.smd-member-role-select {
font-size: var(--text-sm);
padding: var(--space-1) var(--space-2);
border: 0.5px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-hover);
color: var(--color-text-heading);
cursor: pointer;
max-width: 33%;
}
.smd-row-action {
display: flex;
align-items: center;
justify-content: center;
min-height: 32px;
min-width: 32px;
border: none;
background: none;
cursor: pointer;
color: var(--color-text-faint);
border-radius: var(--radius-md);
padding: 0;
transition:
background 0.1s,
color 0.1s;
}
.smd-row-action:hover {
background: var(--color-bg-hover);
color: var(--color-error-text);
}
/* ── Avatar colour palette ───────────────────────────────────────────────────── */
/* Colours are provided by .uv-color-0..4 in userVignette.css (shared palette). */
/* ── Fallback when user-directory is unavailable ────────────────────────────── */
.smd-directory-unavailable {
font-size: var(--text-sm);
color: var(--color-text-faint);
font-style: italic;
padding: var(--space-1) 0 var(--space-2);
}
/* ── Link rows ───────────────────────────────────────────────────────────────── */
.smd-link-row {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-2) 0;
}
.smd-link-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-bg-muted);
border: 0.5px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-subtle);
flex-shrink: 0;
font-size: var(--text-base);
}
.smd-link-info {
flex: 1;
overflow: hidden;
}
.smd-link-name {
flex: 1;
min-width: 0;
font-size: var(--text-base);
color: var(--color-text-heading);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.smd-link-tags {
display: flex;
gap: var(--space-1-5);
margin-top: 3px;
flex-wrap: wrap;
}
.smd-link-tag {
font-size: var(--text-2xs);
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
background: var(--color-bg-muted);
color: var(--color-text-subtle);
border: 0.5px solid var(--color-border);
white-space: nowrap;
}
.smd-link-actions {
display: flex;
gap: var(--space-0-5);
flex-shrink: 0;
}
/* ── Inline edit sub-panel ───────────────────────────────────────────────────── */
.smd-edit-panel {
margin: var(--space-1) 0 var(--space-2) 42px;
padding: var(--space-3);
background: var(--color-bg-hover);
border: 0.5px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: var(--space-2-5);
}
.smd-edit-panel label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
display: block;
margin-bottom: var(--space-1);
}
.smd-edit-input {
width: 100%;
padding: var(--space-2) var(--space-2-5);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text-heading);
outline: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.smd-edit-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.smd-edit-panel-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
/* ── New-link creation button + form ─────────────────────────────────────────── */
.smd-new-link-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2-5);
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-subtle);
background: none;
border: 1.5px dashed var(--color-border-medium);
border-radius: var(--radius-lg);
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
}
.smd-new-link-btn:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent);
color: var(--color-accent);
}
/* ── Password toggle row ─────────────────────────────────────────────────────── */
.smd-pw-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
cursor: pointer;
user-select: none;
}
/* ── Apply spinner ────────────────────────────────────────────────────────────── */
.smd-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: smdSpin 0.6s linear infinite;
vertical-align: middle;
margin-left: var(--space-1-5);
}
@keyframes smdSpin {
to {
transform: rotate(360deg);
}
}
/* ── Expiry chip toggle ──────────────────────────────────────────────────────── */
/*
* The wrapper reserves a fixed width equal to the date input so that toggling
* between chip and input never shifts the surrounding flex row.
*/
.smd-expiry-chip-wrap {
display: inline-flex;
align-items: stretch;
flex-shrink: 0;
width: 130px;
}
.smd-expiry-chip {
display: inline-flex;
align-items: center;
gap: 5px;
width: 100%;
box-sizing: border-box;
padding: var(--space-1) var(--space-2);
font-size: var(--text-base);
border: 1px dashed var(--color-border-medium);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-faint);
cursor: pointer;
white-space: nowrap;
transition:
border-color 0.15s,
color 0.15s,
background 0.15s;
}
.smd-expiry-chip:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-bg-hover);
}
.smd-expiry-chip--set {
border-style: solid;
border-color: var(--color-border);
background: var(--color-bg-muted);
color: var(--color-text-secondary);
}
.smd-expiry-chip--set:hover {
border-color: var(--color-border-medium);
color: var(--color-text-heading);
background: var(--color-bg-hover);
}
.smd-expiry-chip-clear {
font-size: var(--text-sm);
line-height: var(--leading-none);
color: var(--color-text-faint);
margin-left: auto;
padding: 0;
transition: color 0.1s;
}
.smd-expiry-chip-clear:hover {
color: var(--color-error-text);
}
.smd-expiry-date-input {
width: 100%;
box-sizing: border-box;
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text-heading);
outline: none;
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
/* In the search row the chip/input must match the height of the role select and
Add button (both use padding: 9px, font-size: 13px). */
.smd-search-row .smd-expiry-chip,
.smd-search-row .smd-expiry-date-input {
padding: 9px var(--space-2-5);
font-size: var(--text-sm);
}
static/css/components/skeleton.css
Vendored
-93
View File
@@ -1,93 +0,0 @@
/* ============================================================
* Reusable loading-skeleton primitive.
*
* A `.skeleton` element pulses; modifiers shape it into lines,
* list rows (mirroring the file-list grid), or grid tiles. Used to
* hold layout during first load instead of a centred spinner that
* makes the list flash empty. Honors reduced-motion via the global
* guard in base/a11y.css.
*
* (shareModal's bespoke .smd-skeleton predates this and can migrate
* onto it when its loader is next touched.)
* ============================================================ */
.skeleton {
background: var(--color-bg-muted);
border-radius: var(--radius-md);
animation: skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton-line {
height: 14px;
}
.skeleton-line--short {
width: 40%;
}
.skeleton-line--medium {
width: 65%;
}
.skeleton-line--full {
width: 100%;
}
/* A loading row shaped like a file-list row (inherits the list's grid
columns; falls back to icon + name + meta when used standalone). */
.skeleton-row {
display: grid;
grid-template-columns: var(--files-list-columns, 36px 1fr 90px);
column-gap: var(--space-3);
align-items: center;
padding: var(--space-3) 15px;
border-bottom: 1px solid var(--color-border-xfaint);
}
/* A square loading tile for the photo/file grid. */
.skeleton-tile {
aspect-ratio: 1;
width: 100%;
border-radius: var(--radius-lg);
}
/* File-grid loading card — mirrors the real grid card (4:3 thumbnail tile +
name line + meta line). The card frame itself doesn't pulse; its inner
`.skeleton` elements do. Dropped straight into `.files-grid-view`. */
.skeleton-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-2xl);
}
.skeleton-card .skeleton-thumb {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
margin-bottom: var(--space-2);
}
.skeleton-card .skeleton-line {
align-self: center;
}
/* Small leading icon block for list-row skeletons. */
.skeleton-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
}
@keyframes skeletonPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
static/css/components/spinner.css
-96
View File
@@ -1,96 +0,0 @@
/* Loading spinner overlay */
.files-loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-20) var(--space-5);
gap: var(--space-4);
grid-column: 1 / -1;
}
.files-loading-spinner .spinner {
width: 36px;
height: 36px;
border: 3px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
.files-loading-spinner span {
font-size: var(--text-base);
color: var(--color-text-placeholder);
font-weight: var(--weight-medium);
}
/* Full-area drop overlay. Hidden by default; shown over the content region
(right of the sidebar) while files are dragged into the Files section
(toggled in ui.js). Frosted backdrop + dashed border = a clear "drop here"
affordance instead of a small inline box. */
.dropzone {
position: fixed;
top: var(--space-4);
right: var(--space-4);
bottom: var(--space-4);
left: calc(var(--sidebar-width) + var(--space-4));
z-index: var(--z-overlay);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
border: 3px dashed var(--color-border-medium);
border-radius: var(--radius-3xl);
background: var(--color-scrim-control);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--color-text-secondary);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
text-align: center;
}
/* Children don't catch pointer events, so moving over the icon/text doesn't
fire dragleave on the overlay (avoids show/hide flicker). */
.dropzone > * {
pointer-events: none;
}
.dropzone-icon {
font-size: var(--text-6xl);
color: var(--color-accent);
}
.dropzone.active {
border-color: var(--color-accent);
color: var(--color-accent-text);
}
@media (max-width: 768px) {
.dropzone {
left: var(--space-4);
}
}
.upload-progress {
margin-top: 15px;
width: 100%;
display: block;
}
.progress-bar {
background-color: var(--color-bg-empty);
height: 6px;
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--color-accent);
width: 0%;
transition: width 0.3s;
}
static/css/components/tooltip.css
-95
View File
@@ -1,95 +0,0 @@
/* ── Tooltip primitive ─────────────────────────────────────────────
*
* Generic on-hover tooltip used app-wide. Two flavours:
*
* 1. Single-line label, content from `data-tooltip="…"` on the trigger.
* Use `attachTooltip(el, text)` from `static/js/utils/tooltip.js`.
* 2. Rich popover with a DOM subtree, populated lazily on first hover.
* Use `attachRichTooltip(el, populateAsync)` for things like the
* group-vignette member list.
*
* Both are portal'd to `document.body` (the JS helper creates a child
* of body and positions it with `position: fixed`) so they escape the
* `overflow: hidden` clipping that lives on lane wrappers, list rows,
* and any other "contain my children" ancestor. Without the portal,
* tooltips near the edges of those containers get cropped — exactly
* the bug that prompted this refactor.
*
* Hover-intent timing is asymmetric on purpose:
* - Entry: 250 ms delay before the fade-in starts. Short enough to
* feel responsive (much faster than the browser-native `title`
* delay, which is ~500–1500 ms), long enough to suppress flicker
* on accidental mouseovers.
* - Exit: 0 ms delay. The tooltip dismisses immediately when the
* user moves away.
*
* The class toggle is JS-driven (mouseenter/leave + focusin/out
* listeners on the trigger); the visible transition lives entirely
* in CSS so a setTimeout never gates the visual change.
*/
.oxi-tooltip-popover {
position: fixed;
min-width: 0;
max-width: 280px;
padding: var(--space-1-5) var(--space-2-5);
background-color: var(--color-text);
color: var(--color-bg-page);
font-size: var(--text-xs);
line-height: var(--leading-normal);
text-align: left;
border-radius: var(--radius-md);
box-shadow: 0 2px 8px var(--color-shadow);
pointer-events: none;
opacity: 0;
/* Default (no `--visible`): fast hide, no delay. */
transition: opacity 100ms ease-out 0ms;
z-index: 10000;
}
/* Simple (data-tooltip) flavour — keeps the label on one line so it
reads as a short caption, not a paragraph. Used by short labels
like a user vignette's email-on-hover. */
.oxi-tooltip-popover--simple {
white-space: nowrap;
max-width: none;
}
/* Visible state overrides the transition to add the hover-intent
delay on the *entry* path. Removing the class falls back to
the default rule above (no delay → immediate fade-out). */
.oxi-tooltip-popover--visible {
opacity: 1;
transition: opacity 100ms ease-out 250ms;
}
/* ── Rich-popover layout helpers ────────────────────────────────── */
.oxi-tooltip-popover__line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* "+N" overflow badge — small pill at the end of a list of items when
there are more than the tooltip cares to show. Lighter background
so the count reads as meta-information, not just another line. */
.oxi-tooltip-popover__overflow {
display: inline-block;
margin-top: var(--space-1);
padding: 1px 7px;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
color: var(--color-bg-page);
background-color: var(--color-text-faint);
border-radius: var(--radius-full);
}
/* Placeholder line shown briefly between the first hover and the
populate() callback's resolve (e.g. while `/api/groups/{id}/members`
is in flight). Italic + dimmed so the user perceives it as a
transitional state, not real content. */
.oxi-tooltip-popover__placeholder {
color: var(--color-text-faint);
font-style: italic;
}
static/css/components/uploadDropdown.css
-76
View File
@@ -1,76 +0,0 @@
/* Upload Dropdown */
.upload-dropdown {
position: relative;
display: inline-block;
}
.upload-dropdown .btn-primary {
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.upload-dropdown-menu {
display: block;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
background: var(--color-bg-surface);
border-radius: var(--radius-2xl);
box-shadow: 0 8px 30px var(--color-shadow-md);
border: 1px solid var(--color-border);
z-index: 1000;
overflow: hidden;
animation: dropdownFadeIn 0.15s ease-out;
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.upload-dropdown-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) var(--space-4);
border: none;
background: none;
color: var(--color-text-dark);
font-size: var(--text-base);
cursor: pointer;
transition: background 0.15s ease;
text-align: left;
}
.upload-dropdown-item:hover {
background: var(--color-border-light);
}
.upload-dropdown-item:active {
background: var(--color-border);
}
.upload-dropdown-item i {
width: 20px;
text-align: center;
color: var(--color-text-subtle);
font-size: 15px;
}
.upload-dropdown-item:first-child {
border-bottom: 1px solid var(--color-border-light);
}
.upload-caret {
margin-left: var(--space-1);
font-size: var(--text-xs);
}
static/css/components/userMenu.css
-294
View File
@@ -1,294 +0,0 @@
/* User Menu */
.user-menu-wrapper {
position: relative;
}
.user-avatar-btn {
background: none;
border: none;
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: transform var(--motion-base) var(--ease-standard);
display: flex;
align-items: center;
justify-content: center;
}
/* Premium hover: ONE soft accent ring hugging the avatar + a gentle warm glow
+ a subtle pop — replaces the old heavy double halo (button border ring with
a gap + a second avatar ring). */
.user-avatar-btn:hover {
transform: scale(1.05);
}
.user-avatar-btn:hover .user-vignette__avatar {
box-shadow:
0 0 0 3px var(--color-accent-ring),
0 3px 12px -2px var(--color-accent-shadow);
}
/* Menu open: a slightly firmer ring (same clean single-ring language). */
.user-menu-wrapper.open .user-avatar-btn .user-vignette__avatar {
box-shadow: 0 0 0 3px var(--color-accent-ring-strong);
}
/* ── Avatar vignette overrides ────────────────────────────────────────────── */
/* The toolbar button and dropdown header mount avatar-only userVignette
components. Sizing is owned by userVignette.css (--menu / --xl variants);
the rules below add the decoration that is specific to this context. */
.user-avatar-btn .user-vignette__avatar {
letter-spacing: 0.5px;
user-select: none;
/* Animate the ring/glow smoothly in AND out (transition on the base, not
:hover). */
transition: box-shadow var(--motion-base) var(--ease-standard);
}
.user-menu-header .user-vignette__avatar {
letter-spacing: 0.5px;
box-shadow: 0 4px 12px var(--color-accent-shadow);
}
.user-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
left: auto;
width: 300px;
background: var(--color-bg-surface);
border-radius: var(--radius-3xl);
box-shadow:
0 12px 40px var(--color-shadow-md),
0 0 0 1px var(--color-shadow-xs);
z-index: 2000;
overflow: hidden;
animation: userMenuIn 0.2s ease-out;
}
.user-menu-wrapper.open .user-menu {
display: block;
}
[dir="rtl"] .user-menu {
right: auto;
left: 0;
}
@keyframes userMenuIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.user-menu-header {
display: flex;
align-items: center;
gap: var(--space-3-5);
padding: var(--space-5) var(--space-5) var(--space-4);
background: var(--color-user-menu-header-bg);
border-bottom: 1px solid var(--color-user-menu-header-border);
}
/* The header vignette (xl, name + email) fills the available width. */
.user-menu-header .user-vignette {
flex: 1;
min-width: 0;
}
/* Increase name prominence relative to the base vignette style. */
.user-menu-header .user-vignette__name {
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.user-menu-header .user-vignette__email {
font-size: 12.5px;
margin-top: 1px;
}
.user-menu-storage {
padding: var(--space-3-5) var(--space-5);
}
.user-menu-storage-label {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-2);
}
.user-menu-storage-label i {
font-size: var(--text-2xs);
color: var(--color-text-faint);
}
.user-menu-storage-bar {
height: 6px;
background: var(--color-border-light);
border-radius: 3px;
overflow: hidden;
margin-bottom: var(--space-1-5);
}
.user-menu-storage-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-second));
border-radius: 3px;
width: 0%;
transition: width 0.5s ease;
}
.user-menu-storage-text {
font-size: 11.5px;
color: var(--color-text-faint);
}
.user-menu-divider {
height: 1px;
background: var(--color-border-light);
margin: var(--space-1) 0;
}
.user-menu-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) var(--space-5);
border: none;
background: none;
color: var(--color-text-dark);
font-size: var(--text-base);
cursor: pointer;
transition: background 0.15s ease;
text-align: left;
}
.user-menu-item:hover,
.user-menu-item:focus-visible {
background: var(--color-bg-hover);
}
.user-menu-item i {
width: 20px;
text-align: center;
font-size: 15px;
color: var(--color-text-subtle);
}
/* The appearance row is a plain container, not a button — the inner
* segmented control captures the clicks. Match the height of other
* .user-menu-item rows so the row reads as part of the same list. */
.user-menu-item--theme {
cursor: default;
}
.user-menu-item--theme:hover {
background: transparent;
}
/* Light / Like OS / Dark — three-option pill, active option highlighted
* with the accent colour. Sits at the right edge of the row. */
.theme-segmented {
margin-left: auto;
display: inline-flex;
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: var(--space-0-5);
gap: var(--space-0-5);
}
.theme-segmented__opt {
width: 28px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--color-text-subtle);
border-radius: var(--radius-full);
cursor: pointer;
font-size: var(--text-2xs);
padding: 0;
transition:
background 0.15s ease,
color 0.15s ease;
}
.theme-segmented__opt:hover {
color: var(--color-text);
}
.theme-segmented__opt--active {
background: var(--color-accent);
color: var(--color-danger-text);
}
.theme-segmented__opt--active:hover {
color: var(--color-danger-text);
}
.user-menu-admin {
color: var(--color-primary);
}
.user-menu-admin i {
color: var(--color-info-blue);
}
.user-menu-admin:hover {
background: var(--color-info-bg-alt);
}
.user-menu-role-badge {
padding: 0 var(--space-5) var(--space-1);
}
.role-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-xl);
}
.role-badge-admin {
background: var(--color-info-surface);
color: var(--color-primary);
}
.role-badge i {
font-size: 10px;
}
.user-menu-logout {
color: var(--color-danger-alt);
margin-bottom: var(--space-1);
}
.user-menu-logout i {
color: var(--color-danger-alt);
}
.user-menu-logout:hover {
background: var(--color-danger-lighter);
}
static/css/components/userVignette.css
-257
View File
@@ -1,257 +0,0 @@
/* ── User Vignette — avatar circle + name inline component ────────────────────
*
* Reusable component that pairs a coloured initials circle with a display
* name resolved asynchronously. Used in:
* • Owner column (list view, SharedWithMe & Favorites sections)
* • ShareModal member rows, chips, suggestion items
* • User-menu toolbar button and dropdown header (avatar-only mode)
*
* Sizes: --xs (20 px) · --sm (24 px) · --list (36 px) · --md (32 px)
* --lg (40 px) · --menu (38 px) · --xl (48 px)
* Colours: .uv-color-0..4 (applied by JS via _colorIndex(userId) % 5)
*
* All colours use CSS custom properties — no raw hex / rgb / named values.
* ─────────────────────────────────────────────────────────────────────────── */
.user-vignette {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
overflow: hidden;
}
/* The on-hover email tooltip (used by `createUserVignette` when the
email is set) and the rich group-members popover both live in
`components/tooltip.css` and are attached at runtime via
`static/js/utils/tooltip.js` — kept generic so other surfaces
(role chips, link chips, action buttons) can opt in the same way. */
.user-vignette__avatar {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--weight-bold);
flex-shrink: 0;
/* Diameter comes from `--avatar-size`, declared per size variant on
the wrapper so the origin badge (a wrapper sibling or an avatar
child) can size off the same value. Default fallback is `--sm`. */
width: var(--avatar-size, 24px);
height: var(--avatar-size, 24px);
font-size: 10px;
/* Anchor for `__origin--overlay` (the avatar-only-mode badge that
sits on the bottom-right corner of the picture). Harmless when
no overlay child is present. */
position: relative;
}
.user-vignette__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-base);
color: var(--color-text-secondary);
}
/* ── Email mode (showEmail: true) ─────────────────────────────────────────── */
/* Column wrapper used when both name and email are shown. */
.user-vignette__info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
overflow: hidden;
flex: 1;
}
.user-vignette__email {
font-size: var(--text-xs);
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Size variants ─────────────────────────────────────────────────────────── */
/* `--avatar-size` is the single source of truth for the diameter. The
`__avatar` element reads it for width/height; the `__origin` badge
reads it (via the wrapper's inheritance scope) to scale itself to a
fixed proportion of the avatar regardless of variant. The avatar's
own `font-size` (used for initials) stays per-variant because the
initials-to-avatar ratio is a deliberate design choice, not a fixed
fraction. */
.user-vignette--xs {
--avatar-size: 20px;
}
.user-vignette--xs .user-vignette__avatar {
font-size: 9px;
}
.user-vignette--sm {
--avatar-size: 24px;
}
.user-vignette--sm .user-vignette__avatar {
font-size: 10px;
}
.user-vignette--list {
--avatar-size: 36px;
}
.user-vignette--list .user-vignette__avatar {
font-size: var(--text-sm);
}
.user-vignette--md {
--avatar-size: 32px;
}
.user-vignette--md .user-vignette__avatar {
font-size: var(--text-xs);
}
.user-vignette--lg {
--avatar-size: 40px;
}
.user-vignette--lg .user-vignette__avatar {
font-size: 15px;
}
.user-vignette--menu {
--avatar-size: 38px;
}
.user-vignette--menu .user-vignette__avatar {
font-size: var(--text-base);
}
.user-vignette--xl {
--avatar-size: 48px;
}
.user-vignette--xl .user-vignette__avatar {
font-size: 17px;
}
/* ── Colour palette ────────────────────────────────────────────────────────── */
/* Colours are shared with the ShareModal avatar palette.
Each class maps to a distinct hue via design-token variables. */
.uv-color-0 {
background: var(--color-badge-indigo-bg);
color: var(--color-badge-indigo-text);
}
.uv-color-1 {
background: var(--color-badge-green-bg);
color: var(--color-badge-green-text);
}
.uv-color-2 {
background: var(--color-badge-orange-bg);
color: var(--color-badge-orange-text);
}
.uv-color-3 {
background: var(--color-badge-blue-bg);
color: var(--color-badge-blue-text);
}
.uv-color-4 {
background: var(--color-badge-amber-bg);
color: var(--color-badge-amber-text);
}
/* ── Photo rendering ───────────────────────────────────────────────────────── */
/* When a photo is available the JS replaces the initials text with an <img>.
The avatar <span> keeps its background color as a fallback while loading.
The `:not(.user-vignette__origin)` carve-out excludes the overlay badge
(avatar-only mode) which is also an `.oxi-icon` inside `.__avatar`
after SVG conversion — without the carve-out it would inherit the
100% / 100% sizing and fill the whole circle. */
.user-vignette__avatar img,
.user-vignette__avatar .oxi-icon:not(.user-vignette__origin) {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* ── Group variant ──────────────────────────────────────────────────────────
* `.user-vignette-group` is built by `components/groupVignette.js`. It reuses
* the user-vignette layout + size modifiers (`--xs/sm/md/list/lg/menu/xl`)
* so a row built from a group can swap in for a user without layout shift.
*
* The avatar circle is filled with a neutral surface colour and contains a
* `fa-user-group` icon instead of initials/photo. Single hue for every group
* (rather than the deterministic palette user avatars use) — this is a quick
* visual signal that the row represents a group, not a person. */
.user-vignette-group .user-vignette__avatar {
background: var(--color-badge-blue-bg);
color: var(--color-badge-blue-text);
}
.user-vignette-group .user-vignette__avatar i {
/* Scale the inline-SVG icon (oxi-icon, replaced by icons.js) to fit the
circle. The base `<i>` is 1em — adjust so it sits centred with a small
padding inside the badge regardless of size modifier. */
width: 62%;
height: 62%;
}
.user-vignette-group .user-vignette__avatar .oxi-icon {
width: 100%;
height: 100%;
}
/* ── Origin badge (external-user marker) ───────────────────────────────────
* Inline-flex sibling rendered to the right of the avatar + name. Shown
* ONLY for external users — internal users render the bare vignette
* (Ed's "external only" preference: quiet UI for the common case).
*
* Earlier iterations placed this inside `.__avatar` as an absolute-
* positioned corner badge. The corner approach failed once the avatar
* showed a user photo — the `<img>` masked the badge out. Pulling it
* out to a sibling keeps it visible regardless of avatar content. */
.user-vignette__origin {
flex-shrink: 0;
line-height: var(--leading-none);
/* Default (sibling mode, with name): track the avatar's font-size
so the badge matches the row's text scale. The overlay mode
overrides this below with the explicit 30%-of-avatar-diameter
rule. */
font-size: 1em;
}
.user-vignette__origin--external {
color: var(--color-warning-orange-text);
}
/* Avatar-only renders (the user-menu toolbar button is the canonical
case) have no sibling row to anchor the badge against. The
`--overlay` modifier puts it on the bottom-right corner of the
picture at exactly 30% of the avatar diameter, regardless of size
variant. `--avatar-size` is declared per variant on the wrapper and
inherits to the badge via the cascade. Halo ring lifts the icon off
coloured avatars + the user's photo so it stays readable across the
palette. */
.user-vignette__origin--overlay {
position: absolute;
right: -2px;
bottom: -2px;
/* `.oxi-icon` (the SVG that replaces the original `<i>`) is
`width: 1em; height: 1em`, so font-size IS the rendered size. */
font-size: calc(var(--avatar-size, 24px) * 0.3);
background: var(--color-bg-surface);
border-radius: 50%;
box-shadow: 0 0 0 1.5px var(--color-bg-surface);
}
.user-vignette__origin.hidden {
display: none;
}
static/css/favorites.css
-1
View File
@@ -1 +0,0 @@
@import url("./views/favorites.css");
static/css/inlineViewer.css
-1
View File
@@ -1 +0,0 @@
@import url("./views/inlineViewer.css");
static/css/layout/content.css
-113
View File
@@ -1,113 +0,0 @@
/* ── Scrollbar ── */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-surface);
}
::-webkit-scrollbar-thumb {
background: var(--color-accent);
border-radius: 3px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-accent) var(--color-bg-surface);
}
/* Content area */
.content-area {
flex-grow: 1;
padding: var(--space-5) var(--gutter);
overflow-y: scroll;
scrollbar-gutter: stable;
}
/* Phones: tighten the shared gutter and let the actions bar wrap. */
@media (max-width: 640px) {
:root {
--gutter: var(--space-4);
}
/* Mobile uses overlay scrollbars — don't reserve a phantom gutter. */
.content-area {
scrollbar-gutter: auto;
}
.actions-bar {
flex-wrap: wrap;
height: auto;
gap: var(--space-2);
}
}
.page-title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-5);
color: var(--color-text);
}
.page-sticky-header {
position: sticky;
margin: 0px;
padding: var(--space-2-5) 0px;
top: -20px; /* due to padding top of content-area */
background-color: var(--color-bg-page);
z-index: 100; /* ensure header is above image preview */
}
.actions-bar {
display: flex;
justify-content: space-between;
margin: 0 0 var(--space-3);
height: 60px;
padding: var(--space-2-5);
}
.action-buttons {
display: flex;
flex: auto;
gap: var(--space-3);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-muted);
width: 100%;
min-height: 320px;
grid-column: 1 / -1;
}
.empty-state p {
margin: 0;
max-width: 42ch;
color: var(--color-text-muted);
}
/* First paragraph acts as the title. */
.empty-state p:first-of-type {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
/* Call-to-action button spacing. */
.empty-state .btn {
margin-top: var(--space-4);
}
/* invisible element, permits building of drag element without altering display */
.drag-preview {
position: absolute;
top: -9999px;
left: -9999px;
pointer-events: none;
width: 360px;
}
static/css/layout/sidebar.css
-258
View File
@@ -1,258 +0,0 @@
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
background: linear-gradient(180deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
color: var(--color-sidebar-text-active);
display: flex;
flex-direction: column;
height: 100%;
flex-shrink: 0;
box-shadow: 2px 0 12px var(--color-shadow-md);
transition: transform var(--motion-slow) var(--ease-emphasized);
}
/* Sidebar overlay for mobile */
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-sidebar-overlay);
z-index: 998;
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar-overlay.active {
display: block;
opacity: 1;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: 0;
top: 0;
z-index: 999;
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
[dir="rtl"] .sidebar {
left: auto;
right: 0;
transform: translateX(100%);
}
[dir="rtl"] .sidebar.open {
transform: translateX(0);
}
}
.logo-container {
padding: 22px var(--space-5);
display: flex;
align-items: center;
border-bottom: 1px solid var(--color-sidebar-separator);
margin-bottom: var(--space-2);
text-decoration: none;
color: inherit;
}
.logo {
width: 40px;
height: 40px;
background: var(--color-sidebar-logo-gradient);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
box-shadow: 0 3px 10px var(--color-sidebar-shadow);
transition:
transform 0.2s,
box-shadow 0.2s;
[dir="rtl"] & {
margin-left: var(--space-3);
margin-right: unset;
}
}
.logo:hover {
transform: scale(1.05);
box-shadow: 0 4px 14px var(--color-sidebar-shadow-lg);
}
.logo svg {
width: 22px;
height: 22px;
fill: var(--color-sidebar-text-active);
}
.app-name {
font-size: 19px;
font-weight: var(--weight-bold);
color: var(--color-sidebar-text-active);
letter-spacing: 0.3px;
}
.nav-menu {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: var(--space-2) var(--space-3);
gap: var(--space-0-5);
}
.nav-item {
display: flex;
align-items: center;
width: 100%;
padding: 11px var(--space-3-5);
border-radius: var(--radius-xl);
cursor: pointer;
color: var(--color-sidebar-text);
font-size: 14.5px;
font-weight: var(--weight-medium);
/* Button resets — .nav-item is a <button> (keyboard-operable nav). */
font-family: inherit;
text-align: left;
appearance: none;
background: none;
transition: all 0.2s ease;
position: relative;
border: none;
border-left: 3px solid transparent;
[dir="rtl"] & {
border-left: none;
border-right: 3px solid transparent;
}
}
.nav-item:hover {
background-color: var(--color-sidebar-hover-bg);
color: var(--color-sidebar-text-hover);
}
.nav-item.active {
background-color: var(--color-sidebar-active-bg);
color: var(--color-sidebar-text-active);
border-left-color: var(--color-accent);
font-weight: var(--weight-semibold);
[dir="rtl"] & {
border-left-color: transparent;
border-right-color: var(--color-accent);
}
}
.nav-item i,
.nav-item .nav-icon,
.nav-item .oxi-icon {
margin-right: var(--space-3-5);
width: 20px;
height: 20px;
text-align: center;
font-size: var(--text-md);
transition:
color 0.2s,
transform 0.2s;
flex-shrink: 0;
[dir="rtl"] & {
margin-left: var(--space-3-5);
margin-right: unset;
}
}
/* Colored icons per section */
.nav-item:nth-child(1) i,
.nav-item:nth-child(1) .oxi-icon {
color: var(--color-cal-1);
} /* Files - orange */
.nav-item:nth-child(2) i,
.nav-item:nth-child(2) .oxi-icon {
color: var(--color-cal-2);
} /* Shared - blue */
.nav-item:nth-child(3) i,
.nav-item:nth-child(3) .oxi-icon {
color: var(--color-cal-3);
} /* Recent - teal */
.nav-item:nth-child(4) i,
.nav-item:nth-child(4) .oxi-icon {
color: var(--color-cal-4);
} /* Favorites - gold */
.nav-item:nth-child(5) i,
.nav-item:nth-child(5) .oxi-icon {
color: var(--color-cal-5);
} /* Photos - pink */
.nav-item:nth-child(6) i,
.nav-item:nth-child(6) .oxi-icon {
color: var(--color-cal-6);
} /* Trash - red */
/* Colourful icons at rest, but the ACTIVE item is always accent — one
coherent active state instead of a colour that changes per item.
Same specificity as the per-child rest rules, so source order (this comes
after them) makes it win for the active item. */
.nav-item.active i,
.nav-item.active .oxi-icon {
color: var(--color-accent);
}
.nav-item:hover i,
.nav-item:hover .oxi-icon {
transform: scale(1.1);
}
/* Storage indicator */
.storage-container {
margin: auto var(--space-3) var(--space-4) var(--space-3);
background: var(--color-sidebar-storage-bg);
border: 1px solid var(--color-sidebar-storage-border);
border-radius: var(--radius-2xl);
padding: var(--space-4);
}
.storage-title {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1-5);
margin-bottom: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-sidebar-storage-text);
letter-spacing: 0.3px;
}
.storage-bar {
height: 6px;
background-color: var(--color-sidebar-storage-bar);
border-radius: 3px;
overflow: hidden;
margin-bottom: var(--space-2-5);
}
.storage-fill {
height: 100%;
background: var(--color-sidebar-progress);
border-radius: 3px;
width: 0%;
transition: width 0.8s ease;
}
.storage-info {
text-align: center;
font-size: 11.5px;
color: var(--color-sidebar-storage-faint);
font-weight: var(--weight-normal);
}
static/css/layout/topbar.css
-257
View File
@@ -1,257 +0,0 @@
/* Main content */
.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Top bar */
.top-bar {
height: 70px;
min-height: 70px;
max-height: 70px;
background-color: var(--color-bg-surface);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
padding: 0 var(--gutter);
justify-content: space-between;
flex-shrink: 0;
}
/* Sidebar toggle button (hidden on desktop) */
.sidebar-toggle {
display: none;
background: none;
border: none;
padding: var(--space-2-5);
cursor: pointer;
color: var(--color-text-secondary);
border-radius: var(--radius-lg);
transition:
background-color 0.2s,
color 0.2s;
margin-right: var(--space-3);
flex-shrink: 0;
}
.sidebar-toggle:hover {
background-color: var(--color-border);
border-color: var(--color-border-medium);
}
.sidebar-toggle i {
font-size: var(--text-xl);
}
/* Mobile search toggle button — hidden on desktop */
.search-toggle-btn {
display: none;
background: none;
border: none;
padding: var(--space-2-5);
cursor: pointer;
color: var(--color-text-secondary);
border-radius: var(--radius-lg);
font-size: var(--text-lg);
transition:
background-color 0.2s,
color 0.2s;
flex-shrink: 0;
}
.search-toggle-btn:hover {
background-color: var(--color-border);
}
/* Back button inside expanded mobile search — hidden everywhere by default */
.search-back-btn {
display: none;
background: none;
border: none;
padding: var(--space-2-5);
cursor: pointer;
color: var(--color-text-secondary);
border-radius: var(--radius-lg);
font-size: var(--text-lg);
transition:
background-color 0.2s,
color 0.2s;
flex-shrink: 0;
}
.search-back-btn:hover {
background-color: var(--color-border);
color: var(--color-text-heading);
}
/* Slot wrapping .search-container + #path-tooltip — it owns the flex slot
so the tooltip can absolutely overlay the search bar via inset:0 instead
of viewport-fixed positioning. */
.search-slot {
flex-grow: 1;
max-width: 600px;
margin-right: var(--space-5);
position: relative;
display: flex;
align-items: center;
[dir="rtl"] & {
margin-left: var(--space-5);
margin-right: unset;
}
}
.search-container {
flex-grow: 1;
position: relative;
display: flex;
align-items: center;
}
.search-container input {
width: 100%;
padding: var(--space-3) 50px var(--space-3) var(--space-11);
border-radius: var(--radius-2xl);
border: 2px solid var(--color-border);
background-color: var(--color-bg-input);
font-size: var(--text-base);
height: 46px;
color: var(--color-text-heading);
transition: all 0.2s ease;
}
.search-container input:hover {
border-color: var(--color-border-medium);
background-color: var(--color-bg-surface);
}
.search-container input:focus {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-bg-surface);
box-shadow: 0 0 0 4px var(--color-accent-ring);
}
.search-container input::placeholder {
color: var(--color-text-placeholder);
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-placeholder);
font-size: var(--text-md);
pointer-events: none;
transition: color 0.2s ease;
[dir="rtl"] & {
right: 16px;
left: unset;
}
}
.search-container input:focus + .search-icon,
.search-container:focus-within .search-icon {
color: var(--color-accent);
}
.search-button {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: var(--color-accent-gradient);
color: var(--color-danger-text);
border: none;
border-radius: var(--radius-xl);
width: 36px;
height: 36px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 8px var(--color-accent-shadow);
[dir="rtl"] & {
left: 6px;
right: unset;
}
}
.search-button:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: 0 4px 12px var(--color-accent-shadow-lg);
}
.search-button:active {
transform: translateY(-50%) scale(0.98);
}
.search-button i {
font-size: var(--text-base);
}
.user-controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Mobile responsive styles for top bar */
@media (max-width: 768px) {
.top-bar {
padding: 0 var(--space-4);
}
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
}
/* Hide full search slot on mobile by default */
.search-slot {
display: none;
}
/* Show icon-only search button; push it to the right before user-controls */
.search-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
/* Expanded mobile search: full-width overlay of the top bar */
.top-bar--search-active .search-back-btn {
display: flex;
align-items: center;
justify-content: center;
}
.top-bar--search-active .search-slot {
display: flex;
flex-grow: 1;
max-width: none;
margin: 0;
}
.top-bar--search-active .search-icon {
display: none;
}
.top-bar--search-active .search-container input {
padding-left: var(--space-4);
}
.top-bar--search-active .sidebar-toggle,
.top-bar--search-active .search-toggle-btn,
.top-bar--search-active .user-controls {
display: none;
}
}
static/css/main.css
-47
View File
@@ -1,47 +0,0 @@
/* Base */
@import url("./base/variables.css");
@import url("./base/reset.css");
@import url("./base/typography.css");
@import url("./base/animations.css");
@import url("./base/a11y.css");
@import url("./base/forms.css");
/* Layout */
@import url("./layout/sidebar.css");
@import url("./layout/topbar.css");
@import url("./layout/content.css");
/* Components */
@import url("./components/brandLogo.css");
@import url("./components/breadcrumb.css");
@import url("./components/buttons.css");
@import url("./components/fileType.css");
@import url("./components/fileManager.css");
@import url("./components/resourceList.css");
@import url("./components/expiryChip.css");
@import url("./components/roleChip.css");
@import url("./components/contextMenu.css");
@import url("./components/dialogs.css");
@import url("./components/modals.css");
@import url("./components/shareDialog.css");
@import url("./components/shareModal.css");
@import url("./components/groupsModal.css");
@import url("./components/tooltip.css");
@import url("./components/userVignette.css");
@import url("./components/linkChip.css");
@import url("./components/uploadDropdown.css");
@import url("./components/notifications.css");
@import url("./components/userMenu.css");
@import url("./components/languageSelector.css");
@import url("./components/batchToolbar.css");
@import url("./components/spinner.css");
@import url("./components/skeleton.css");
@import url("./components/search.css");
@import url("./components/icons.css");
@import url("./components/csp-utilities.css");
@import url("./components/itemTooltip.css");
@import url("./components/commandPalette.css");
/* Theme */
@import url("./themes/dark.css");
static/css/profile.css
-1
View File
@@ -1 +0,0 @@
@import url("./views/profile.css");
static/css/recent.css
-1
View File
@@ -1 +0,0 @@
@import url("./views/recent.css");
static/css/style.css
-1
View File
@@ -1 +0,0 @@
@import url("./main.css");
static/css/themes/dark.css
-150
View File
@@ -1,150 +0,0 @@
/*
* Legacy dark-mode fallback for browsers that don't support `light-dark()`
* (Chrome < 123 / Safari < 17.5 / Firefox < 120, all from early 2024).
*
* Modern browsers skip this entire stylesheet at parse time thanks to the
* `@supports not (color: light-dark(white, black))` gate — the merged tokens
* in `base/variables.css` handle dark mode declaratively via the
* `color-scheme` CSS property.
*
* On capable browsers this file becomes dead code; once the supported
* baseline raises beyond the cut-off, it can be deleted.
*
* The selector matches BOTH attribute names so the fallback works during
* the transitional window (when some users may still have `data-theme`
* stamped from cached app state):
* • [data-theme="dark"] — legacy attribute, never set by new code
* • html[data-color-scheme="dark"] — new attribute set by theme-init.js
*/
@supports not (color: light-dark(white, black)) {
[data-theme="dark"],
html[data-color-scheme="dark"] {
/* Backgrounds */
--color-bg-page: #0f172a;
--color-bg-surface: #1e293b;
--color-bg-input: #0f172a;
--color-bg-hover: #334155;
--color-bg-muted: #1a2540;
--color-bg-subtle: #162032;
--color-bg-alt: #0f172a;
--color-bg-input-alt: #253045;
--color-bg-empty: #253045;
/* Borders */
--color-border: #334155;
--color-border-light: #334155;
--color-border-medium: #475569;
--color-border-faint: #2a3650;
--color-border-subtle: #2a3650;
--color-border-xfaint: #1e293b;
--color-border-ddd: #334155;
/* Text */
--color-text: #e2e8f0;
--color-text-heading: #f1f5f9;
--color-text-muted: #94a3b8;
--color-text-faint: #7a8a9f;
--color-text-secondary: #cbd5e1;
--color-text-subtle: #94a3b8;
--color-text-dark: #cbd5e1;
--color-text-placeholder: #64748b;
--color-text-gray: #94a3b8;
--color-text-medium: #94a3b8;
--color-text-faint2: #64748b;
--color-text-light: #64748b;
--color-text-black: #e2e8f0;
--color-text-dim: #94a3b8;
/* Accent */
--color-accent: #ff5e3a;
--color-accent-hover: #ff7a5c;
--color-accent-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%);
--color-accent-shadow: rgba(255, 94, 58, 0.3);
--color-accent-ring: rgba(255, 94, 58, 0.15);
--color-accent-tint: #2a1a15;
/* Feedback */
--color-error-bg: #3b1111;
--color-error-text: #fca5a5;
--color-success-bg: #052e16;
--color-success-text: #86efac;
/* Shadows (stronger on dark mode) */
--color-shadow: rgba(0, 0, 0, 0.3);
--color-shadow-lg: rgba(0, 0, 0, 0.3);
--color-shadow-md: rgba(0, 0, 0, 0.3);
/* Additional dark overrides */
--color-warning-bg: #3d2e00;
--color-warning-bg-dark: #5a4200;
--color-notification-bg: #1e293b;
--color-user-menu-header-bg: linear-gradient(135deg, #1a2332 0%, #1e2940 100%);
--color-user-menu-header-border: #3a2520;
--color-info-bg: #0c1e35;
--color-info-bg-alt: #0c1e35;
--color-info-surface: #0c1e35;
--color-danger-light-bg: #2a0c0c;
--color-danger-lighter: #2a0c0c;
--color-error-text-dark: #f87171;
/* Pastel chip backgrounds need dark equivalents — otherwise the light
* cream / white-blue / pink-cream backdrops glow against dark surfaces
* and the saturated text colours become unreadable on the now-dark fill.
* Same pattern: dark tinted background + lighter pastel text. */
--color-badge-orange-bg: #2a1814;
--color-badge-orange-text: #ff8a65;
--color-badge-blue-bg: #0c2d48;
--color-badge-blue-text: #93c5fd;
--color-warning-bg-light: #2a2410;
--color-warning-text-amber: #fbbf24;
--color-warning-orange-bg: #2a1c10;
--color-warning-orange-text: #fb923c;
--color-success-bg-alt: #0a2015;
--color-success-bg-green: #0a2015;
--color-content-bg-warn: #3d2e00;
--color-content-bg-warn-dark: #5a4200;
/* Sidebar */
--color-sidebar-bg-from: #0f172a;
--color-sidebar-bg-to: #0c1322;
/* Items */
--color-item-active: #5a5047;
--color-item-selected: #39281a;
--color-item-hover-accent: #3d342c;
/* Primary */
/* TODO: rename into primary-blue ? */
--color-primary: #60a5fa;
--color-primary-hover: #6fa8ee;
}
/* ------------ */
/* Native form controls need explicit dark styling on browsers without
* `color-scheme` — on capable browsers the UA does this automatically
* once `color-scheme: dark` is in effect. */
[data-theme="dark"] select,
html[data-color-scheme="dark"] select {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] select:hover,
html[data-color-scheme="dark"] select:hover {
border-color: #475569;
}
[data-theme="dark"] select:focus,
html[data-color-scheme="dark"] select:focus {
border-color: #ff5e3a;
background-color: #1e293b;
}
[data-theme="dark"] .smd-expiry-date-input::-webkit-calendar-picker-indicator,
html[data-color-scheme="dark"] .smd-expiry-date-input::-webkit-calendar-picker-indicator {
filter: invert(1);
}
}
static/css/views/admin.css
-1237
View File
File diff suppressed because it is too large Load Diff
static/css/views/auth.css
-852
View File
@@ -1,852 +0,0 @@
/* ============================================================
Auth styles for OxiCloud — design tokens from variables.css
============================================================ */
.auth-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
width: 100%;
position: relative;
/* Spotlight + warm brand blobs — seats the card in a pool of light
instead of a flat near-white field. */
background: var(--brand-ambient);
}
/* Fine film grain over the backdrop (not the card). `overlay` neutralises the
mid-grey noise so it adds texture without shifting brightness; works in both
light and dark. Tune the whole effect with `opacity`. */
.auth-container::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--brand-grain);
background-size: 180px 180px;
opacity: 0.6;
mix-blend-mode: overlay;
}
/* Keep the card (and every panel) above the grain layer. */
.auth-panel {
position: relative;
z-index: 1;
}
.auth-panel {
width: 420px;
max-width: 90%;
margin: 0 auto;
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: var(--space-9);
text-align: center;
}
.auth-logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
}
.auth-logo-icon {
width: 52px;
height: 52px;
background: var(--color-accent-gradient);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
/* Tighter glow (negative spread) reads more premium than a wide halo. */
box-shadow: 0 4px 14px -4px var(--color-accent-shadow);
}
.auth-logo-icon svg {
width: 30px;
height: 30px;
fill: var(--color-on-accent);
}
.auth-logo-text {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.auth-title {
font-size: 22px;
font-weight: var(--weight-bold);
margin-bottom: var(--space-7);
color: var(--color-text-heading);
}
.auth-form {
width: 100%;
text-align: left;
[dir="rtl"] & {
text-align: right;
}
}
.auth-input-group {
margin-bottom: var(--space-5);
}
.auth-label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-base);
color: var(--color-text-heading);
font-weight: var(--weight-semibold);
}
.auth-input {
width: 100%;
padding: var(--space-3-5) 18px;
border-radius: var(--radius-2xl);
/* Stronger resting border so fields read as crafted, not flat fills. */
border: 2px solid var(--color-border-medium);
font-size: 15px;
background-color: var(--color-bg-input);
color: var(--color-text);
transition: all 0.2s ease;
}
.auth-input::placeholder {
color: var(--color-text-muted);
}
.auth-input:hover {
border-color: var(--color-accent);
background-color: var(--color-bg-surface);
}
.auth-input:focus {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-bg-surface);
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.auth-input[readonly] {
cursor: default;
/* A locked value, not a placeholder: full-strength text on a subtly
distinct "locked" fill (no dimming that reads as empty). */
color: var(--color-text);
font-weight: var(--weight-semibold);
background-color: var(--color-bg-input-alt);
}
.auth-button {
width: 100%;
padding: var(--space-3-5) 18px;
border-radius: var(--radius-2xl);
background: var(--color-accent-gradient);
color: var(--color-on-accent);
font-weight: var(--weight-bold);
border: none;
cursor: pointer;
font-size: var(--text-md);
transition: all 0.3s ease;
margin-top: var(--space-3);
box-shadow: 0 4px 12px var(--color-accent-shadow);
}
.auth-button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px var(--color-accent-shadow-lg);
filter: brightness(1.05);
}
.auth-button:active {
/* Tactile press — the button dips slightly under the resting plane. */
transform: translateY(1px);
box-shadow: 0 2px 8px var(--color-accent-shadow);
}
.auth-button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
filter: none;
}
/* Loading — hide the label, show an inline spinner (toggled via .is-loading /
aria-busy by auth.js on submit). */
.auth-button.is-loading,
.auth-button[aria-busy="true"] {
color: transparent;
pointer-events: none;
position: relative;
}
.auth-button.is-loading::after,
.auth-button[aria-busy="true"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid var(--color-on-accent);
border-top-color: transparent;
border-radius: var(--radius-full);
animation: spin var(--spin-duration) linear infinite;
}
.auth-subtitle {
margin: var(--space-5) 0;
color: var(--color-text-muted);
font-size: var(--text-base);
}
.auth-action-wrap {
margin-top: var(--space-5);
}
/* SSO / OIDC button */
.auth-button-oidc {
background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%);
box-shadow: 0 4px 12px var(--color-shadow-3xl);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2-5);
}
.auth-button-oidc:hover {
box-shadow: 0 6px 20px var(--color-shadow-4xl);
}
.auth-button-sso {
background: var(--color-oidc-bg);
box-shadow: 0 4px 12px var(--color-oidc-shadow);
}
.auth-button-sso:hover {
box-shadow: 0 6px 20px var(--color-oidc-shadow-lg);
}
.auth-button-oidc i {
font-size: var(--text-base);
}
/* Helper text above the magic-link form ("No password? Enter your
email…"). Quieter visual weight than the form labels. */
.auth-hint {
margin: 0 0 var(--space-3);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-text-secondary);
}
/* Status banner under the magic-link form. Uniform anti-enumeration
message rendered on every successful 2xx; error variant only used
for the 503-not-configured branch or network failures. */
.auth-status {
margin-top: var(--space-3);
padding: var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
line-height: 1.4;
}
.auth-status-success {
background: var(--color-bg-hover);
color: var(--color-text);
border-left: 3px solid var(--color-warning-orange-text);
}
.auth-status-error {
background: var(--color-bg-hover);
color: var(--color-text);
border-left: 3px solid var(--color-warning-orange-text);
}
/* Divider between password and SSO login */
.auth-divider {
display: flex;
align-items: center;
margin: var(--space-5) 0;
color: var(--color-text-faint);
font-size: var(--text-sm);
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.auth-divider span {
padding: 0 var(--space-3);
/* Quiet, deliberate label rather than a stray lowercase letter. */
text-transform: uppercase;
letter-spacing: var(--tracking-wide, 0.08em);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
}
/* OIDC-only mode: hide password form */
.auth-form.hidden {
display: none;
}
.auth-toggle {
margin-top: 22px;
font-size: var(--text-base);
color: var(--color-text-muted);
}
.auth-toggle-link {
color: var(--color-accent-text);
cursor: pointer;
text-decoration: none;
font-weight: var(--weight-medium);
}
.auth-toggle-link:hover {
text-decoration: underline;
}
.auth-error {
background-color: var(--color-error-bg);
color: var(--color-error-text);
padding: var(--space-3) 18px;
border-radius: var(--radius-2xl);
margin-bottom: var(--space-5);
font-size: var(--text-base);
display: none;
}
.auth-success {
background-color: var(--color-success-bg);
color: var(--color-success-text);
padding: var(--space-3) 18px;
border-radius: var(--radius-2xl);
margin-bottom: var(--space-5);
font-size: var(--text-base);
display: none;
}
/* Admin setup panel styles — visibility controlled via .hidden class */
.setup-steps {
margin-bottom: var(--space-7);
/* 3 equal columns → circle centres land at 1/6, 1/2, 5/6, so the
connector track can be placed deterministically between them. */
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
}
/* Connector track behind the step circles (z-index 0; circles sit above). */
.setup-steps::before {
content: "";
position: absolute;
top: 17px; /* half of the 34px circle */
left: 16.667%;
right: 16.667%;
height: 2px;
background: var(--color-border);
z-index: 0;
}
.setup-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.step-number {
width: 34px;
height: 34px;
background-color: var(--color-bg-input);
border: 2px solid var(--color-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-faint);
font-weight: var(--weight-bold);
font-size: var(--text-base);
margin-bottom: var(--space-1-5);
transition: all 0.2s ease;
}
.step-number.active {
background: var(--color-accent-gradient);
border-color: transparent;
color: var(--color-on-accent);
/* Subtle halo lifts the active step off the connector track. */
box-shadow:
0 0 0 4px var(--color-accent-ring),
0 4px 12px var(--color-accent-shadow);
}
.step-title {
font-size: var(--text-xs);
color: var(--color-text-faint);
font-weight: var(--weight-medium);
}
.step-title.active {
color: var(--color-text-heading);
font-weight: var(--weight-semibold);
}
/* Language selector panel styles */
.language-selector-panel {
text-align: center;
}
.language-subtitle {
color: var(--color-text-muted);
font-size: var(--text-md);
margin-bottom: var(--space-6);
}
/* ====== Compact Language Picker ====== */
.lang-picker {
position: relative;
margin-bottom: var(--space-6);
text-align: left;
}
.lang-picker-selected {
display: flex;
align-items: center;
padding: var(--space-3-5) 18px;
border: 2px solid var(--color-border);
border-radius: var(--radius-2xl);
cursor: pointer;
background-color: var(--color-bg-input);
transition: all 0.2s ease;
user-select: none;
}
.lang-picker-selected:hover {
border-color: var(--color-accent);
background-color: var(--color-bg-surface);
}
.lang-picker.open .lang-picker-selected {
border-color: var(--color-accent);
background-color: var(--color-bg-surface);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.lang-picker-flag {
font-size: 26px;
margin-right: var(--space-3-5);
flex-shrink: 0;
}
.lang-picker-name {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
flex: 1;
}
.lang-picker-arrow {
color: var(--color-text-faint);
font-size: var(--text-sm);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.lang-picker.open .lang-picker-arrow {
transform: rotate(180deg);
}
/* Dropdown */
.lang-picker-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-surface);
border: 2px solid var(--color-accent);
border-top: 1px solid var(--color-border-light);
border-bottom-left-radius: var(--radius-2xl);
border-bottom-right-radius: var(--radius-2xl);
box-shadow: 0 12px 32px var(--color-shadow-lg);
z-index: 100;
overflow: hidden;
}
.lang-picker.open .lang-picker-dropdown {
display: block;
animation: langPickerSlideDown 0.2s ease;
}
@keyframes langPickerSlideDown {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Search inside dropdown */
.lang-picker-search {
position: relative;
padding: var(--space-2-5) var(--space-3-5);
border-bottom: 1px solid var(--color-border-light);
}
.lang-picker-search i {
position: absolute;
left: 26px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-faint);
font-size: var(--text-sm);
}
.lang-picker-search input {
width: 100%;
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
font-size: var(--text-base);
outline: none;
box-sizing: border-box;
background-color: var(--color-bg-input);
color: var(--color-text);
transition: border-color 0.2s;
}
.lang-picker-search input::placeholder {
color: var(--color-text-faint);
}
.lang-picker-search input:focus {
border-color: var(--color-accent);
}
/* Scrollable list */
.lang-picker-list {
max-height: 240px;
overflow-y: auto;
padding: var(--space-1-5);
}
/* Language item in dropdown */
.lang-picker-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.12s ease;
}
.lang-picker-item:hover {
background: var(--color-bg-hover);
}
.lang-picker-item.selected {
background: var(--color-accent-tint);
}
.lang-picker-item-flag {
font-size: 22px;
flex-shrink: 0;
}
.lang-picker-item-name {
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--color-text-heading);
}
.lang-picker-item-english {
font-size: var(--text-sm);
color: var(--color-text-faint);
margin-left: auto;
}
.lang-picker-item-check {
color: var(--color-accent);
font-size: var(--text-sm);
flex-shrink: 0;
}
.lang-picker-empty {
text-align: center;
color: var(--color-text-faint);
padding: var(--space-5);
font-size: var(--text-base);
}
@media (max-width: 480px) {
.auth-panel {
width: 95%;
padding: var(--space-6);
}
.lang-picker-selected {
padding: var(--space-3) var(--space-3-5);
}
.lang-picker-list {
max-height: 200px;
}
}
/* ============================================================
Premium polish — brand lockup, CTA hierarchy, field icons,
password reveal, progressive disclosure, match feedback.
Icons are token-safe CSS masks (no inline SVG, no raw colour):
the glyph alpha comes from the data-URI, the colour from a token.
============================================================ */
/* — Brand wordmark: the ownable "Oxi" accent lockup (DESIGN-SYSTEM §3) — */
.brand-oxi {
background: var(--color-accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* — CTA hierarchy: exactly one primary per screen. The secondary action
(magic-link, etc.) is a quiet tinted/ghost button, never a 2nd gradient. — */
.auth-button-secondary {
background: var(--color-accent-tint);
color: var(--color-accent-text);
border: 1.5px solid var(--color-border-medium);
box-shadow: none;
}
.auth-button-secondary:hover {
background: var(--color-bg-surface);
border-color: var(--color-accent);
box-shadow: none;
filter: none;
transform: translateY(-1px);
}
.auth-button-secondary:active {
transform: translateY(1px);
box-shadow: none;
}
/* — Leading field icons (user / mail / lock) via masked pseudo-element — */
.auth-input-wrap {
position: relative;
}
.auth-input-wrap .auth-input {
padding-left: 44px;
}
.auth-input-wrap.has-toggle .auth-input {
padding-right: 44px;
}
.auth-input-wrap::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background-color: var(--color-text-muted);
pointer-events: none;
z-index: 1;
transition: background-color 0.2s ease;
-webkit-mask: var(--icon-url, none) center / contain no-repeat;
mask: var(--icon-url, none) center / contain no-repeat;
}
.auth-input-wrap:focus-within::before {
background-color: var(--color-accent);
}
.auth-input-wrap--user {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.auth-input-wrap--mail {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>");
}
.auth-input-wrap--lock {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
/* — Password show/hide toggle — */
.auth-pw-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.auth-pw-toggle::before {
content: "";
width: 18px;
height: 18px;
background-color: var(--color-text-muted);
transition: background-color 0.2s ease;
--eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
-webkit-mask: var(--eye) center / contain no-repeat;
mask: var(--eye) center / contain no-repeat;
}
.auth-pw-toggle:hover::before {
background-color: var(--color-accent);
}
.auth-pw-toggle[aria-pressed="true"]::before {
--eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.9 4.2A9 9 0 0 1 12 4c6.5 0 10 7 10 7a13 13 0 0 1-2 2.7M6.6 6.6A13 13 0 0 0 2 11s3.5 7 10 7a9 9 0 0 0 3.6-.7'/><path d='m2 2 20 20'/></svg>");
}
/* — Progressive disclosure of the magic-link form — */
.auth-magic-toggle {
display: block;
width: 100%;
margin-top: var(--space-1);
padding: var(--space-2);
background: none;
border: none;
color: var(--color-accent-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
text-align: center;
}
.auth-magic-toggle:hover {
text-decoration: underline;
}
.auth-magic-reveal {
margin-top: var(--space-3);
}
.auth-magic-reveal:not(.hidden) {
animation: langPickerSlideDown 0.2s ease;
}
/* — Live password-match feedback (sits inside the confirm field group) — */
.auth-match {
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
display: none;
align-items: center;
gap: var(--space-1-5);
}
.auth-match.show {
display: flex;
}
.auth-match::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--match-icon) center / contain no-repeat;
mask: var(--match-icon) center / contain no-repeat;
}
.auth-match--ok {
color: var(--color-success-text);
--match-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.auth-match--bad {
color: var(--color-error-text);
--match-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
}
/* "Caps Lock is on" hint under a password field (toggled by auth.js). */
.auth-caps-warning {
display: flex;
align-items: center;
gap: var(--space-1-5);
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-warning-orange-text);
}
/* Nextcloud drive picker — radio list of drives the authenticated user
can select for this app-password binding. */
.auth-drive-option {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
margin-bottom: 8px;
border: 1px solid var(--color-border);
border-radius: 12px;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.auth-drive-option:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent);
}
.auth-drive-option input[type="radio"] {
margin: 0;
accent-color: var(--color-accent);
}
.auth-drive-option input[type="radio"]:checked ~ .auth-drive-name {
font-weight: 600;
}
.auth-drive-name {
flex: 1;
color: var(--color-text);
font-size: 15px;
}
.auth-drive-badge {
padding: 2px 10px;
border-radius: 999px;
background: var(--color-accent-gradient);
color: var(--color-danger-text);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
static/css/views/device-verify.css
-145
View File
@@ -1,145 +0,0 @@
/* device-verify.css — stand-alone styles for the device authorization page */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Shared brand backdrop (centralised in --brand-ambient). */
background: var(--brand-ambient);
color: var(--color-text-heading);
display: flex;
justify-content: center;
align-items: center;
min-height: 100dvh;
padding: 1rem;
}
.dag-card {
background: var(--color-bg-surface);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: 2.5rem;
max-width: 440px;
width: 100%;
}
.dag-logo {
text-align: center;
margin-bottom: 1.5rem;
}
.dag-logo h1 {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.dag-logo span {
color: var(--color-primary);
}
h2 {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
p.subtitle {
color: var(--color-text-gray);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
label {
display: block;
font-weight: var(--weight-semibold);
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
input[type="text"] {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1.4rem;
letter-spacing: 0.15em;
text-align: center;
text-transform: uppercase;
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
outline: none;
transition: border-color 0.2s;
}
input[type="text"]:focus {
border-color: var(--color-primary);
}
.device-info {
background: var(--color-border-light);
border-radius: var(--radius-lg);
padding: 1rem;
margin: 1rem 0;
}
.device-info .row {
display: flex;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.device-info .label {
color: var(--color-text-gray);
font-size: 0.85rem;
}
.device-info .value {
font-weight: var(--weight-semibold);
font-size: 0.85rem;
}
.actions {
display: flex;
gap: 0.75rem;
margin-top: 1.25rem;
}
button {
flex: 1;
padding: 0.75rem;
border: none;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background 0.2s;
}
.btn-approve {
background: var(--color-primary);
color: var(--color-on-accent);
}
.btn-approve:hover {
background: var(--color-primary-hover);
}
.btn-deny {
background: var(--color-danger-bg);
color: var(--color-on-accent);
}
.btn-deny:hover {
background: var(--color-danger-bg-hover);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.status {
text-align: center;
padding: 1rem;
border-radius: var(--radius-lg);
margin-top: 1rem;
font-weight: var(--weight-semibold);
}
.status.success {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.status.denied {
background: var(--color-danger-light-bg);
color: var(--color-error-text);
}
.status.error {
background: var(--color-danger-light-bg);
color: var(--color-error-text);
}
.error-text {
color: var(--color-error-text);
font-size: 0.85rem;
margin-top: 0.5rem;
}
.hidden {
display: none !important;
}
static/css/views/favorites.css
-110
View File
@@ -1,110 +0,0 @@
/* Styles for the favorites feature */
/* Favorite indicator */
.favorite-indicator {
position: absolute;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--color-device-verify-dim);
cursor: pointer;
z-index: 5;
transition: all 0.2s ease;
[dir="rtl"] & {
left: 10px;
right: unset;
}
}
.favorite-indicator:hover {
transform: scale(1.1);
}
.favorite-indicator.active {
color: var(--color-warning-text);
text-shadow: 0 0 5px var(--color-warning-shadow);
}
/* Item modifier rules (.file-item.favorite-item) → resourceList.css */
.favorite-item {
position: relative;
}
/* Adjustments for list view header (page-level, not item-level) */
.list-header.favorites-header {
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}
/* Styles for the favorites-specific empty state */
.favorites-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px var(--space-5);
text-align: center;
color: var(--color-text-gray);
}
.favorites-empty-state i {
font-size: var(--text-6xl);
color: var(--color-warning-text);
margin-bottom: var(--space-5);
opacity: 0.6;
}
.favorites-empty-state p {
margin-bottom: var(--space-2-5);
max-width: 400px;
}
/* Animation for the favorite star */
@keyframes favorite-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.favorite-indicator.active {
animation: favorite-pulse 0.3s ease;
}
/* ── Star badge on file/folder cards (normal view) ── */
/* Grid view: keep interactive star button behavior from style.css */
.file-item .favorite-star {
pointer-events: auto;
z-index: 12;
}
.file-item .favorite-star.active i,
.file-item .favorite-star.active svg {
animation: favorite-pulse 0.3s ease;
}
/* List view: small star next to the name */
.favorite-star-inline {
color: var(--color-warning-text);
font-size: var(--text-2xs);
margin-left: var(--space-1-5);
vertical-align: middle;
filter: drop-shadow(0 0 1px var(--color-device-verify-drop-shadow));
[dir="rtl"] & {
margin-left: 0;
margin-right: var(--space-1-5);
}
}
static/css/views/inlineViewer.css
-345
View File
@@ -1,345 +0,0 @@
/* OxiCloud Inline Viewer Styles */
.inline-viewer-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: var(--color-overlay-heavy);
display: none;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.inline-viewer-modal.active {
display: flex !important;
opacity: 1;
align-items: center;
justify-content: center;
pointer-events: all;
}
.inline-viewer-content {
width: 90%;
height: 90%;
max-width: 1200px;
background-color: var(--color-bg-surface);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px var(--color-shadow-3xl);
}
.inline-viewer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-border);
}
.inline-viewer-title {
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inline-viewer-close {
background: none;
border: none;
font-size: var(--text-lg);
cursor: pointer;
color: var(--color-text-muted);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.inline-viewer-close:hover {
background-color: var(--color-border);
color: var(--color-text-secondary);
}
.inline-viewer-container {
flex-grow: 1;
overflow: auto;
background-color: var(--color-bg-muted);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.inline-viewer-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
}
.inline-viewer-download {
background-color: var(--color-accent);
color: var(--color-danger-text);
border: none;
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-4);
font-size: var(--text-base);
font-weight: var(--weight-medium);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-2);
transition: background-color 0.2s;
}
.inline-viewer-download:hover {
background-color: var(--color-danger-alt);
}
.inline-viewer-controls {
display: flex;
gap: var(--space-2);
}
.inline-viewer-controls button {
background-color: var(--color-border-light);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-subtle);
transition: all 0.2s;
}
.inline-viewer-controls button:hover {
background-color: var(--color-border);
color: var(--color-text-dark);
}
/* Image viewer */
.inline-viewer-image {
max-width: 100%;
max-height: 100%;
/* The image is a flex item; without min-* = 0 the flexbox `min-width: auto`
default keeps it at its natural size, so `max-width: 100%` is ignored and
wide images overflow → a stray horizontal scrollbar and the picture only
partly visible (looked like it "repeated" while scrolling). */
min-width: 0;
min-height: 0;
object-fit: contain;
transform-origin: center;
transition: transform 0.2s ease;
}
/* Subtle, thin scrollbar inside the viewer (shown only when zoomed in to pan) —
replaces the heavy global accent scrollbar. */
.inline-viewer-container {
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.inline-viewer-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.inline-viewer-container::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
.inline-viewer-container::-webkit-scrollbar-track {
background: transparent;
}
/* PDF viewer */
.inline-viewer-pdf,
.inline-viewer-pdf-fallback {
width: 100%;
height: 100%;
border: none;
}
/* Only show fallback if object fails */
.inline-viewer-pdf + .inline-viewer-pdf-fallback {
display: none;
}
.inline-viewer-pdf:not([data]),
.inline-viewer-pdf[data=""] + .inline-viewer-pdf-fallback {
display: block;
}
/* Loading indicator */
.inline-viewer-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
color: var(--color-text-subtle);
}
/* Download progress container */
.inline-viewer-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-progress-overlay);
border-radius: var(--radius-lg);
box-shadow: 0 2px 8px var(--color-shadow);
}
/* Progress bar track */
.inline-viewer-progress-bar {
width: 200px;
height: 8px;
background: var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
/* Progress bar fill */
.inline-viewer-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-info-blue), var(--color-admin-blue));
border-radius: var(--radius-sm);
transition: width 0.2s ease;
}
/* Progress percentage text */
.inline-viewer-progress-text {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Error and unsupported message */
.inline-viewer-message {
padding: var(--space-8);
text-align: center;
max-width: 400px;
}
.inline-viewer-icon {
font-size: 64px;
color: var(--color-text-dark);
margin-bottom: var(--space-6);
}
.inline-viewer-text {
color: var(--color-text-subtle);
line-height: 1.6;
}
.inline-viewer-text p {
margin: 0 0 var(--space-4);
}
/* Text viewer */
.inline-viewer-text-content {
width: 100%;
height: 100%;
margin: 0;
padding: var(--space-4) var(--space-6);
font-family: "Courier New", Consolas, Monaco, monospace;
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg-surface);
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
box-sizing: border-box;
text-align: left;
tab-size: 4;
}
/* Video viewer */
.inline-viewer-video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius-sm);
background-color: var(--color-black);
}
/* Audio viewer */
.inline-viewer-audio-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
padding: var(--space-12) var(--space-8);
max-width: 500px;
width: 100%;
}
.inline-viewer-audio-icon {
font-size: 80px;
color: var(--color-text-faint);
animation: audio-pulse 2s ease-in-out infinite;
}
@keyframes audio-pulse {
0%,
100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
.inline-viewer-audio-name {
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
text-align: center;
word-break: break-word;
max-width: 100%;
}
.inline-viewer-audio {
width: 100%;
max-width: 460px;
border-radius: var(--radius-lg);
outline: none;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.inline-viewer-content {
width: 100%;
height: 100%;
border-radius: 0;
}
.inline-viewer-controls {
display: none;
}
}
static/css/views/music.css
-1370
View File
File diff suppressed because it is too large Load Diff
static/css/views/mySharesView.css
-290
View File
@@ -1,290 +0,0 @@
/* ── My Shares view ─────────────────────────────────────────────────────────
*
* BEM classes for the row-per-grant MySharesList component.
* All colors via var(--*). Mobile-first layout.
* ─────────────────────────────────────────────────────────────────────────── */
/* ── Load-more wrapper ───────────────────────────────────────────────────── */
.ms-load-more-wrapper {
display: flex;
justify-content: center;
padding: var(--space-4) 0 var(--space-2);
}
.ms-load-more-wrapper.hidden {
display: none;
}
/* ── Container: dissolve when lanes are present ──────────────────────────── */
.files-list-view:has(.ms-lane) {
background-color: transparent;
box-shadow: none;
border-radius: 0;
overflow: visible;
gap: var(--space-2-5);
display: flex;
flex-direction: column;
}
/* ── Lane (swimlane card) ────────────────────────────────────────────────── */
.ms-lane {
background-color: var(--color-item);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px var(--color-shadow-xs);
overflow: hidden;
}
.ms-lane__header {
background: var(--color-bg-muted);
border-bottom: 1px solid var(--color-border-faint);
}
/* Vignette lane headers need the same padding as the resource row */
.ms-lane__header .user-vignette {
padding: var(--space-2-5) var(--space-3-5);
font-weight: var(--weight-semibold);
}
.ms-lane__header .user-vignette .user-vignette__name {
font-size: var(--text-sm);
color: var(--color-text-heading);
font-weight: var(--weight-semibold);
}
.ms-lane__body {
/* rows are direct children */
}
/* ── Resource lane header (items mode) ───────────────────────────────────── */
.ms-resource-row {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3-5);
}
/* Size the shared .file-icon component for inline use in myShares rows */
.ms-resource-row .file-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
font-size: var(--text-base);
flex-shrink: 0;
}
/* Smaller icon for child grant rows and inline resource links */
.ms-grant-row__identity .file-icon,
.ms-link-identity__resource .file-icon {
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
font-size: var(--text-2xs);
flex-shrink: 0;
}
.ms-resource-row__name {
flex: 1;
font-weight: var(--weight-semibold);
color: var(--color-text);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ms-resource-row__name:hover {
color: var(--color-accent);
text-decoration: underline;
}
.ms-resource-row__edit {
flex-shrink: 0;
font-size: var(--text-xs);
padding: 3px var(--space-2);
opacity: 0.6;
transition: opacity 0.15s;
}
.ms-resource-row__edit:hover {
opacity: 1;
}
/* ── Subject lane header (sharedWith mode — link bucket) ─────────────────── */
.ms-link-lane-label {
display: flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-2) var(--space-3-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
}
.ms-link-lane-label__icon {
color: var(--color-text-faint);
font-size: var(--text-xs);
}
/* ── Grant row ───────────────────────────────────────────────────────────── */
/* Four-column grid so the role pill and expiry chip line up vertically
* across every row in a lane. Reserved widths fit the longest expected
* label ("Can manage" → ~110px, "Expires Mar 5, 2026" → ~180px). */
.ms-grant-row {
display: grid;
grid-template-columns: 1fr 110px 180px auto;
align-items: center;
gap: var(--space-2);
padding: 7px var(--space-3-5) 7px var(--space-7);
border-bottom: 1px solid var(--color-border-faint);
transition: background 0.1s;
}
/* Pill / chip sit at the start of their column rather than stretching
* to fill it — keeps the natural rounded shape. */
.ms-grant-row > .role-chip,
.ms-grant-row > .expiry-chip {
justify-self: start;
}
.ms-grant-row:last-child {
border-bottom: none;
}
.ms-grant-row:hover {
background: var(--color-bg-hover);
}
.ms-grant-row--expired {
opacity: 0.6;
}
/* ── Grant row — identity ─────────────────────────────────────────────────── */
.ms-grant-row__identity {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.ms-identity__name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ms-identity__resource-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ms-identity__resource-name:hover {
color: var(--color-accent);
text-decoration: underline;
}
/* Token in sharedWith mode: arrow + resource link */
.ms-link-identity__arrow {
font-size: var(--text-2xs);
color: var(--color-text-faint);
flex-shrink: 0;
}
.ms-link-identity__resource {
font-size: var(--text-xs);
color: var(--color-text-secondary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ms-link-identity__resource:hover {
color: var(--color-accent);
text-decoration: underline;
}
/* Role chip styles moved to components/roleChip.css (shared component).
* Expiry chip styles moved to components/expiryChip.css (shared with Trash). */
/* ── Kebab / icon buttons ────────────────────────────────────────────────── */
.ms-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: var(--text-2xs);
flex-shrink: 0;
transition:
background 0.12s,
color 0.12s;
}
.ms-btn-icon:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}
.ms-btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ms-kebab-btn {
margin-left: auto;
}
/* ── Context menu current-item indicator ─────────────────────────────────── */
.ms-menu-item--current {
font-weight: var(--weight-semibold);
}
/* ── Context menu expiry row ─────────────────────────────────────────────── */
.ms-menu-expiry-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
}
.ms-menu-expiry-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Stretch the chip to fill remaining space in the expiry row */
.ms-menu-expiry-row .smd-expiry-chip-wrap {
flex: 1;
min-width: 0;
}
static/css/views/people.css
-112
View File
@@ -1,112 +0,0 @@
/* People (faces) view */
.people-container {
display: none;
}
.people-container.active {
display: block;
padding: var(--space-2);
}
/* Grid of person tiles */
.people-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: var(--space-4);
padding: var(--space-2);
}
.person-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
background: none;
border: none;
cursor: pointer;
border-radius: var(--radius-lg);
}
.person-tile:hover {
background: var(--color-bg-muted);
}
.person-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: var(--color-bg-muted);
border: 2px solid var(--color-border);
}
.person-name {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
}
.person-count {
font-size: var(--text-xs);
color: var(--color-text-faint);
}
/* Single-person header */
.people-toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2);
}
.people-toolbar .people-title {
flex: 1;
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.people-back,
.people-rename {
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: none;
color: var(--color-text-subtle);
font-size: var(--text-base);
cursor: pointer;
}
.people-back:hover,
.people-rename:hover {
background: var(--color-bg-muted);
}
/* Loading / empty states */
.people-loading,
.people-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-20) var(--space-5);
color: var(--color-text-faint);
}
.people-empty i {
font-size: 48px;
color: var(--color-border-medium);
}
.people-loading i {
animation: spin 1s linear infinite;
}
static/css/views/photos.css
-334
View File
@@ -1,334 +0,0 @@
/* Photos timeline view */
.photos-container {
padding: 0;
display: none;
}
.photos-container.active {
display: block;
}
/* Virtualized timeline: each date-group is a <section>; its grid is
materialized (tiles inserted) only while near the viewport — see photos.js. */
.photos-group {
display: block;
}
/* Toolbar with group mode toggle */
.photos-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-2) var(--space-2) var(--space-1);
}
/* Toggle buttons — wider for text labels */
.photos-toolbar .toggle-btn {
width: auto;
padding: 0 var(--space-3-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
/* Group header */
.photos-day-header {
padding: var(--space-4) var(--space-2) var(--space-2-5);
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.photos-day-header .photos-day-count {
font-weight: var(--weight-normal);
color: var(--color-text-faint);
font-size: var(--text-sm);
margin-left: var(--space-2);
}
/* Photo grid — base (daily mode) */
.photos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-3);
padding: 0 var(--space-2);
margin-bottom: var(--space-4);
}
/* Justified (aspect-preserving) layout — the grid becomes a column of rows;
tile sizes are set inline by photos.js (see _justifiedRows). */
.photos-layout-justified .photos-grid {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.photos-jrow {
display: flex;
flex-direction: row;
gap: var(--space-2);
}
.photos-layout-justified .photo-tile {
aspect-ratio: auto;
flex: 0 0 auto;
}
/* Monthly mode — larger tiles, more breathing room */
.photos-group-monthly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3-5);
}
.photos-group-monthly .photos-day-header {
font-size: 17px;
padding: var(--space-5) var(--space-2) var(--space-3);
}
/* Yearly mode — smaller tiles, more items visible */
.photos-group-yearly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: var(--space-2-5);
}
.photos-group-yearly .photos-day-header {
font-size: var(--text-xl);
padding: var(--space-6) var(--space-2) var(--space-3-5);
}
/* Individual photo tile */
.photo-tile {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-2xl);
border: 2px solid var(--color-border);
cursor: pointer;
background: var(--color-bg-muted);
box-shadow: 0 1px 3px var(--color-shadow-xs);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.photo-tile img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-xl);
opacity: 0;
transition:
opacity 0.4s ease,
transform 0.2s ease;
}
.photo-tile img.is-loaded {
opacity: 1;
}
.photo-tile:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--color-shadow-sm);
border-color: var(--color-border-medium);
}
.photo-tile:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.photo-tile:hover img {
transform: scale(1.03);
}
/* Selection checkbox */
.photo-tile .photo-check {
position: absolute;
top: 6px;
left: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--color-photo-check-border);
background: var(--color-shadow-2xl);
opacity: 0;
transition: opacity 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-size: var(--text-2xs);
z-index: 2;
}
.photo-tile:hover .photo-check,
.photo-tile.selected .photo-check {
opacity: 1;
}
.photo-tile.selected .photo-check {
background: var(--color-accent);
border-color: var(--color-accent);
}
.photo-tile.selected {
border-color: var(--color-accent);
background: var(--color-item-selected);
box-shadow:
0 0 0 1px var(--color-accent-ring-dark),
0 4px 12px var(--color-accent-ring);
}
.photo-tile.selected img {
transform: scale(0.95);
}
/* Video badge */
.photo-tile .video-badge {
position: absolute;
bottom: 6px;
right: 6px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-overlay-video);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-size: var(--text-xs);
z-index: 2;
}
/* Duration badge for videos */
.photo-tile .video-duration {
position: absolute;
bottom: 6px;
left: 6px;
font-size: var(--text-2xs);
color: var(--color-danger-text);
background: var(--color-overlay-video);
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
z-index: 2;
}
/* Empty state */
.photos-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-20) var(--space-5);
text-align: center;
color: var(--color-text-faint);
}
.photos-empty i {
font-size: 56px;
margin-bottom: var(--space-4);
color: var(--color-border-medium);
}
.photos-empty p {
margin: var(--space-1) 0;
font-size: 15px;
}
.photos-empty .photos-empty-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
}
/* Infinite scroll sentinel */
.photos-sentinel {
height: 1px;
width: 100%;
}
/* Loading spinner */
.photos-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
color: var(--color-text-faint);
font-size: var(--text-base);
gap: var(--space-2);
}
.photos-loading i {
animation: spin 1s linear infinite;
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* Selection bar */
.photos-selection-bar {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
gap: var(--space-4);
box-shadow: 0 8px 30px var(--color-shadow-3xl);
z-index: 1000;
font-size: var(--text-base);
}
.photos-selection-bar button {
background: none;
border: none;
color: var(--color-multiselect-text);
cursor: pointer;
padding: var(--space-1-5) var(--space-2-5);
border-radius: var(--radius-md);
font-size: var(--text-base);
transition: background 0.15s;
}
.photos-selection-bar button:hover {
background: var(--color-multiselect-action-hover);
}
.photos-selection-bar .selection-count {
font-weight: var(--weight-semibold);
}
/* Responsive */
@media (max-width: 768px) {
.photos-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: var(--space-0-5);
padding: 0 var(--space-0-5);
margin-bottom: var(--space-2);
}
.photos-group-monthly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.photos-group-yearly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.photo-tile .photo-check {
opacity: 1;
}
.photos-day-header {
font-size: var(--text-base);
padding: var(--space-2-5) var(--space-1) var(--space-1-5);
}
.photos-toolbar {
padding: var(--space-1-5) var(--space-1) var(--space-0-5);
}
}
static/css/views/photosLightbox.css
-233
View File
@@ -1,233 +0,0 @@
/* Photos lightbox overlay */
.photos-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--color-lightbox-overlay);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.photos-lightbox.active {
opacity: 1;
pointer-events: auto;
}
/* Main content area */
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-content img,
.lightbox-content video {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius-sm);
user-select: none;
}
/* Navigation arrows */
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: var(--text-xl);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
z-index: 10001;
}
.lightbox-nav:hover {
background: var(--color-lightbox-btn-hover);
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
/* Close button */
.lightbox-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: var(--text-lg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
z-index: 10001;
}
.lightbox-close:hover {
background: var(--color-lightbox-btn-hover);
}
/* Top info bar */
.lightbox-info {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: var(--space-4) 70px var(--space-4) var(--space-5);
background: var(--color-lightbox-gradient-top);
color: var(--color-lightbox-btn-text);
z-index: 10001;
}
.lightbox-filename {
font-size: 15px;
font-weight: var(--weight-semibold);
margin-bottom: var(--space-0-5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lightbox-meta {
font-size: var(--text-xs);
color: var(--color-lightbox-text-muted);
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Bottom toolbar */
.lightbox-toolbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-4) var(--space-5);
background: var(--color-lightbox-gradient-bottom);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
z-index: 10001;
}
.lightbox-toolbar button {
background: var(--color-lightbox-btn-bg);
border: none;
color: var(--color-lightbox-btn-text);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-md);
transition: background 0.15s;
}
.lightbox-toolbar button:hover {
background: var(--color-lightbox-btn-hover);
}
.lightbox-toolbar button.active {
color: var(--color-accent);
}
/* Counter */
.lightbox-counter {
position: absolute;
bottom: 16px;
left: 20px;
color: var(--color-lightbox-text-faint);
font-size: var(--text-sm);
z-index: 10001;
}
/* EXIF info panel */
.lightbox-infopanel {
position: absolute;
top: 64px;
right: var(--space-4);
max-width: 320px;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
z-index: 10001;
}
.lightbox-infopanel.hidden {
display: none;
}
.lb-info-row {
display: flex;
align-items: center;
gap: var(--space-2);
word-break: break-word;
}
.lb-info-row i {
width: 18px;
text-align: center;
opacity: 0.8;
}
/* Zoomed photo shows a grab cursor for panning */
.lightbox-content img.is-zoomed {
cursor: grab;
}
/* Responsive */
@media (max-width: 768px) {
.lightbox-nav {
width: 36px;
height: 36px;
font-size: var(--text-md);
}
.lightbox-prev {
left: 8px;
}
.lightbox-next {
right: 8px;
}
.lightbox-content img,
.lightbox-content video {
max-width: 100vw;
max-height: 80vh;
}
}
static/css/views/places.css
-90
View File
@@ -1,90 +0,0 @@
/* Photos sub-navigation (Moments | Places) */
.photos-subnav {
display: flex;
gap: var(--space-1);
padding: var(--space-2) var(--space-2) 0;
}
.photos-subnav.hidden {
display: none;
}
.photos-subnav-tab {
background: none;
border: none;
padding: var(--space-2) var(--space-3);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-faint);
cursor: pointer;
border-radius: var(--radius-md);
border-bottom: 2px solid transparent;
}
.photos-subnav-tab:hover {
color: var(--color-text);
}
.photos-subnav-tab.active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* Map view */
.places-container {
display: none;
}
.places-container.active {
display: flex;
flex-direction: column;
height: calc(100vh - 150px);
min-height: 360px;
padding: var(--space-2);
}
.places-map {
flex: 1 1 auto;
width: 100%;
border-radius: var(--radius-2xl);
overflow: hidden;
}
.places-loading,
.places-error {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
color: var(--color-text-faint);
}
.places-loading i {
animation: spin 1s linear infinite;
}
/* Cluster markers — a circular photo thumbnail with a count badge */
.places-cluster {
background-size: cover;
background-position: center;
background-color: var(--color-bg-muted);
border-radius: 50%;
border: 2px solid var(--color-bg-surface);
box-shadow: 0 2px 8px var(--color-shadow-sm);
cursor: pointer;
display: flex;
align-items: flex-end;
justify-content: center;
}
.places-cluster-count {
background: var(--color-accent);
color: var(--color-danger-text);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
line-height: 1;
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-full);
transform: translateY(35%);
}

Some files were not shown because too many files have changed in this diff Show More