yusiboyz/platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Second Brain Platform

Browse Source 
Complete platform with unified design system and real API integration.

Apps: Dashboard, Fitness, Budget, Inventory, Trips, Reader, Media, Settings
Infrastructure: SvelteKit + Python gateway + Docker Compose
This commit is contained in:
Yusuf Suleman
2026-03-28 23:20:40 -05:00
commit d3e250e361
159 changed files with 44797 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend-v2/.dockerignore Normal file
View File

@@ -0,0 +1,4 @@
node_modules
.svelte-kit
build
.env

23
frontend-v2/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
node_modules
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
frontend-v2/.npmrc Normal file
View File

@@ -0,0 +1 @@
engine-strict=true

3
frontend-v2/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["svelte.svelte-vscode"]
}

324
frontend-v2/DESIGN_SYSTEM.md Normal file
View File

@@ -0,0 +1,324 @@
# Design System — Token Reference
> Source of truth: `src/app.css`
> Last updated: 2026-03-27
All UI values must come from these tokens unless listed under [Intentional Raw Values](#intentional-raw-values).
---
## Spacing
4px grid. Token name = multiplier (`--sp-3` = 3 × 4px = 12px).
| Token | Value | Use for |
|-------|-------|---------|
| `--sp-0` | 0px | Explicit zero |
| `--sp-px` | 1px | Borders, hairlines |
| `--sp-0.5` | 2px | Micro-nudge (margin-top on meta text) |
| `--sp-1` | 4px | Tight gap, field label gap, small padding |
| `--sp-1.5` | 6px | Badge gap, icon gap, footer gap |
| `--sp-2` | 8px | Compact gap, button group gap, inner padding |
| `--sp-3` | 12px | Standard gap, row padding, list item gap |
| `--sp-4` | 16px | Card padding (mobile), section margin, tab margin |
| `--sp-5` | 20px | Card padding (desktop), module gap, sidebar gap |
| `--sp-6` | 24px | Large padding, overlay padding, page container |
| `--sp-7` | 28px | Primary card padding, section group margin |
| `--sp-8` | 32px | Page top padding, empty state, desktop grid gap |
| `--sp-10` | 40px | Large elements (avatar width), empty list padding |
| `--sp-12` | 48px | Empty state padding, large spacing |
| `--sp-16` | 64px | Reserved |
| `--sp-20` | 80px | Page bottom padding (scroll clearance) |
### Semantic spacing aliases
| Token | Resolves to | Use for |
|-------|-------------|---------|
| `--section-gap` | `--sp-7` (28px) | Gap between major page sections |
| `--card-pad` | `--sp-5` (20px) | Default module/card padding |
| `--card-pad-primary` | `--sp-7` (28px) | Hero/primary module padding |
| `--card-pad-secondary` | `--sp-4` (16px) | Compact card padding |
| `--row-gap` | `--sp-3` (12px) | Gap between list rows |
| `--module-gap` | `--sp-5` (20px) | Gap between dashboard modules |
| `--row-pad-y` | 14px | Vertical padding inside data rows (off-grid, intentional) |
| `--row-pad-x` | `--sp-4` (16px) | Horizontal padding inside data rows |
| `--inner-gap` | `--sp-3` (12px) | Gap between items within a row |
### Mobile overrides (≤768px)
| Token | Desktop | Mobile |
|-------|---------|--------|
| `--card-pad` | 20px | 16px |
| `--card-pad-primary` | 28px | 20px |
| `--row-pad-y` | 14px | 16px |
| `--section-gap` | 28px | 20px |
---
## Radius
| Token | Value | Use for |
|-------|-------|---------|
| `--radius-xs` | 4px | Tiny pills, skeleton placeholders, kbd hints |
| `--radius-sm` | 6px | Badges, chips, nav links, danger buttons |
| `--radius-md` | 8px | Buttons, inputs, tabs, entry rows, icon containers |
| `--radius` | 12px | Cards, modals, panels, main containers |
| `--radius-lg` | 16px | Hero cards, action cards, pill chips, ImmichPicker modal |
| `--radius-full` | 9999px | Circles, toggles, avatars |
---
## Elevation (Shadows)
Light and dark mode have separate values. Dark mode uses higher opacity.
| Token | Light | Use for |
|-------|-------|---------|
| `--shadow-xs` | `0 1px 2px rgba(0,0,0,0.03)` | Row hover, active tabs, inner elements |
| `--shadow-sm` | `0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04)` | Secondary cards, inputs, budget tables |
| `--shadow-md` | `0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)` | Standard card elevation (default `.module`) |
| `--shadow-lg` | `0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.1)` | Hero cards, primary modules, dropdowns |
| `--shadow-xl` | `0 8px 24px rgba(0,0,0,0.08), 0 24px 60px rgba(0,0,0,0.15)` | Modals, overlay panels |
**Legacy aliases**: `--card-shadow` → `--shadow-md`, `--card-shadow-sm` → `--shadow-sm`
---
## Colors
### Surfaces (3-layer depth)
| Token | Light | Dark | Layer |
|-------|-------|------|-------|
| `--canvas` | `#F5F6F8` | `#09090b` | Page background — everything sits on this |
| `--surface` | `#FFFFFF` | `#0f0f12` | Sidebars, panels, slide-out sheets |
| `--surface-secondary` | `#FAFAFB` | `#111114` | Input backgrounds, secondary panels |
| `--card` | `#FFFFFF` | `#161619` | Content containers, elevated with shadow |
| `--card-secondary` | `#FAFAFB` | `#111114` | Secondary cards, button backgrounds |
| `--card-hover` | `#f0f0f3` | `#1c1c20` | Row hover, interactive feedback |
### Borders
| Token | Light | Dark |
|-------|-------|------|
| `--border` | `rgba(0,0,0,0.06)` | `rgba(255,255,255,0.06)` |
| `--border-strong` | `rgba(0,0,0,0.1)` | `rgba(255,255,255,0.1)` |
### Text hierarchy
| Token | Light | Dark | Use for |
|-------|-------|------|---------|
| `--text-1` | `#1a1a1f` | `#fafafa` | Headings, names, amounts — read first |
| `--text-2` | `#4a4a55` | `#a1a1aa` | Body text, descriptions — read second |
| `--text-3` | `#6b6b76` | `#71717a` | Labels, metadata, captions — supporting |
| `--text-4` | `#b4b4bd` | `#3f3f46` | Placeholders, disabled, timestamps — background |
### Accent (indigo / blue)
| Token | Light | Dark | Use for |
|-------|-------|------|---------|
| `--accent` | `#4F46E5` | `#3b82f6` | Primary actions, links, active states |
| `--accent-bg` | `#EEF2FF` | `rgba(59,130,246,0.1)` | Icon wells, strong highlight backgrounds |
| `--accent-dim` | `rgba(79,70,229,0.06)` | `rgba(59,130,246,0.08)` | Subtle hover, selection backgrounds, focus rings |
| `--accent-border` | `rgba(79,70,229,0.10)` | `rgba(59,130,246,0.12)` | Accent-tinted borders |
| `--accent-focus` | `rgba(79,70,229,0.12)` | `rgba(59,130,246,0.15)` | Active states, selection bars |
### Semantic colors
| Token | Light | Dark | Use for |
|-------|-------|------|---------|
| `--success` | `#16A34A` | `#22c55e` | Positive values, income, completed |
| `--success-bg` | `#F0FDF4` | `rgba(34,197,94,0.1)` | Icon wells |
| `--success-dim` | `rgba(34,197,94,0.08)` | `rgba(34,197,94,0.08)` | Badge backgrounds |
| `--error` | `#DC2626` | `#ef4444` | Errors, issues, delete actions |
| `--error-bg` | `#FEF2F2` | `rgba(239,68,68,0.1)` | Icon wells |
| `--error-dim` | `rgba(239,68,68,0.08)` | `rgba(239,68,68,0.08)` | Badge backgrounds |
| `--warning` | `#d97706` | `#f59e0b` | Warnings, pending states |
| `--warning-bg` | `rgba(245,158,11,0.08)` | `rgba(245,158,11,0.1)` | Badge backgrounds |
### Overlay
| Token | Light | Dark | Use for |
|-------|-------|------|---------|
| `--overlay` | `rgba(0,0,0,0.3)` | `rgba(0,0,0,0.6)` | Modal backdrop, reading pane overlay |
| `--overlay-strong` | `rgba(0,0,0,0.5)` | `rgba(0,0,0,0.75)` | Heavy overlays |
| `--nav-bg` | `rgba(255,255,255,0.9)` | `rgba(15,15,18,0.9)` | Navbar blur background |
---
## Typography
| Token | Desktop | Mobile (≤768px) | Use for |
|-------|---------|-----------------|---------|
| `--text-xs` | 11px | 12px | Badges, pills, tiny counters |
| `--text-sm` | 13px | 15px | Labels, meta, captions, button text |
| `--text-base` | 14px | 16px | Body text, list items, inputs |
| `--text-md` | 15px | 17px | Card titles, important rows (16px+ avoids iOS zoom) |
| `--text-lg` | 17px | 18px | Section headers, modal titles |
| `--text-xl` | 22px | 22px | Page titles |
| `--text-2xl` | 28px | 26px | Hero headings |
| `--text-3xl` | 36px | 32px | Large hero numbers |
### Line heights
| Token | Value | Use for |
|-------|-------|---------|
| `--leading-tight` | 1.2 | Headings, hero numbers |
| `--leading-snug` | 1.35 | Card titles, compact text |
| `--leading-normal` | 1.5 | Body text |
| `--leading-relaxed` | 1.65 | Article content |
| `--leading-loose` | 1.8 | Long-form reading |
### Fonts
| Token | Value |
|-------|-------|
| `--font` | `'Inter', -apple-system, system-ui, sans-serif` |
| `--mono` | `'JetBrains Mono', ui-monospace, monospace` |
---
## Global Component Classes
Defined in `app.css`, usable in any component without local `<style>` duplication.
| Class | Description |
|-------|-------------|
| `.module` | Card container (bg, border, shadow, padding) |
| `.module.primary` | Hero card (more padding + elevation) |
| `.module.flush` | No padding (for flush content) |
| `.module-header` | Flex header row (title left, action right) |
| `.module-title` | Uppercase label |
| `.module-action` | Accent link → "View all →" |
| `.data-row` | Standard list item with hover + zebra striping |
| `.badge` + `.error/.success/.warning/.accent/.muted` | Semantic status badges |
| `.tab-bar` + `.tab` + `.tab-badge` | Pill-style tab navigation |
| `.section-label` | Uppercase group header |
| `.btn-primary` / `.btn-primary.full` | Primary action buttons |
| `.btn-secondary` | Secondary action buttons |
| `.btn-icon` | Square icon button (36×36) |
| `.input` | Standard text input |
| `.skeleton` | Shimmer loading placeholder |
| `.page` / `.page-header` / `.page-title` / `.page-greeting` | Page-level layout |
| `.app-surface` | Centered max-width container |
---
## Intentional Raw Values
These values exist outside the token system by design. Do not convert them.
### Non-scale spacing
Values that don't land on the 4px grid. Used for optical tuning where grid steps are too coarse.
| Value | Where | Why |
|-------|-------|-----|
| `1px` | `margin-top` on meta text, feed separators | Sub-pixel nudge for vertical alignment |
| `3px` | Badge padding-y, kbd padding | Optical centering within small elements |
| `5px` | Pill padding-y, chip padding | Between sp-1 (4px) and sp-1.5 (6px), tuned per element |
| `7px` | View-btn padding-y, sidebar gap | Between sp-1.5 (6px) and sp-2 (8px) |
| `9px` | Nav item padding-y, suggestion row padding-y | Between sp-2 (8px) and 10px |
| `10px` | Input padding-y, dropdown padding, various gaps | Common "comfortable touch" size, between sp-2 and sp-3 |
| `11px` | Entry row padding-y, toggle btn padding-bottom | Asymmetric optical alignment |
| `13px` | FAB action padding-y, list row padding | Between sp-3 (12px) and 14px |
| `14px` | Button padding-x, row padding-x, modal gap, field row gap | Most common off-grid value. Used as standard horizontal rhythm for interactive elements. Also `--row-pad-y` for data rows. |
| `15px` | Transaction row padding-y | Between sp-3.5 and sp-4, tuned for readability |
| `18px` | Detail header margin-bottom, AI guide padding-top | Between sp-4 (16px) and sp-5 (20px) |
| `22px` | Trip stats padding-x, modal body padding | Between sp-5 (20px) and sp-6 (24px) |
### Non-scale border-radius
| Value | Where | Why |
|-------|-------|-----|
| `9px` | Status segment control inner radius | Between radius-md (8px) and radius (12px) |
| `10px` | Event cards, photo thumbnails, notes, modals, unscheduled items, food rows | Heavily used "soft card" radius. Between radius-md (8px) and radius (12px). |
| `14px` | CommandPalette box, toggle track | Large interactive controls |
| `20px` | Bottom sheet top corners | Extra-round for sheet feel |
| `50%` | Circular elements (cover nav dots, meal-number, image-delete) | True circle, differs from radius-full on non-square elements |
### Data visualization colors
These are visual category identifiers, not semantic UI colors. They must remain consistent within their visualization set, independent of theme.
**Fitness macros:**
| Color | Hex | Use |
|-------|-----|-----|
| Protein | `#8B5CF6` | Purple macro bar |
| Carbs | `#F59E0B` | Amber macro bar |
| Fat | `#3B82F6` | Blue macro bar |
**Fitness meal weights:**
| Color | Background | Text | Meaning |
|-------|------------|------|---------|
| Heavy | `rgba(239,68,68,0.1)` | `#DC2626` | High-calorie meal |
| Moderate | `rgba(245,158,11,0.1)` | `#B45309` | Medium-calorie meal |
| Light | `rgba(34,197,94,0.1)` | `#15803D` | Low-calorie meal |
**Trip categories:**
| Color | Background | Text | Category |
|-------|------------|------|----------|
| Hotel | `rgba(168,85,247,0.1)` | `#a855f7` | Lodging |
| Restaurant | `rgba(249,115,22,0.1)` | `#f97316` | Food & dining |
| Hike | `rgba(34,197,94,0.15)` | `#16a34a` | Outdoor activity |
| Logistics | `rgba(161,161,170,0.1)` | `--text-3` | Transport, other |
**Other:**
| Color | Hex | Use |
|-------|-----|-----|
| Favorite star | `#F59E0B` | Star icon fill (reader, fitness) |
| AI badge | `rgba(59,130,246,0.1)` / `#3B82F6` | AI-logged entry indicator |
| Transfer pill | `rgba(59,130,246,0.1)` / `#3b82f6` | Budget transfer indicator |
### Glass & overlay effects
Applied to elements layered over images. Not theme-switchable because they depend on photo content, not UI surface.
| Value | Where |
|-------|-------|
| `rgba(0,0,0,0.7)..0.1` | Cover image gradient (trips) |
| `rgba(255,255,255,0.15)` | Cover nav button background |
| `rgba(255,255,255,0.3)` | Cover nav button hover |
| `rgba(0,0,0,0.3)` / `rgba(0,0,0,0.5)` | Cover share button / hover |
| `rgba(0,0,0,0.35)` | Modal overlays (trips), detail overlay (inventory) |
| `rgba(0,0,0,0.5)` | Image delete button, search saving overlay |
### Directional panel shadows
Non-standard shadow directions for slide-in panels and bottom sheets. Cannot use elevation tokens.
| Value | Where |
|-------|-------|
| `0 -8px 32px rgba(0,0,0,0.12)` | FAB bottom sheet (fitness, trips) |
| `-12px 0 40px rgba(0,0,0,0.12)` | Detail slide-in sheet (inventory) |
| `-6px 0 28px rgba(0,0,0,0.08)` | Reading pane (reader) |
| `-8px 0 32px rgba(0,0,0,0.1)` | Edit sheet (trips) |
| `8px 0 24px rgba(0,0,0,0.08)` | Mobile sidebar (reader) |
### Accent-tinted FAB shadows
Colored shadows for floating action buttons. Not in the elevation scale because they use accent color, not black.
| Value | Where |
|-------|-------|
| `0 8px 24px rgba(79,70,229,0.3)` | FAB resting (fitness) |
| `0 12px 32px rgba(79,70,229,0.4)` | FAB hover (fitness) |
| `0 6px 20px rgba(79,70,229,0.3)` | FAB resting (trips) |
| `0 8px 28px rgba(79,70,229,0.4)` | FAB hover (trips) |
### Near-match shadows
Shadows that are close to tokens but intentionally differ in blur radius or opacity.
| Value | Nearest token | Diff |
|-------|--------------|------|
| `0 2px 6px rgba(0,0,0,0.05)` | `--shadow-xs` | Larger blur, higher opacity |
| `0 1px 2px rgba(0,0,0,0.04)` | `--shadow-xs` | Opacity 0.04 vs 0.03 |
| `0 1px 4px rgba(0,0,0,0.04)` | `--shadow-xs` | Larger blur |
| `0 1px 4px rgba(0,0,0,0.08)` | `--shadow-xs` | Larger blur + opacity |
| `0 16px 48px rgba(0,0,0,0.15)` | `--shadow-xl` | Single layer vs dual |
| `0 1px 3px rgba(0,0,0,0.06)` | `--shadow-xs` | Higher opacity |
| `0 8px 24px rgba(0,0,0,0.12)` | `--shadow-md` | Higher opacity |
| `0 20px 60px rgba(0,0,0,0.15)` | `--shadow-xl` | Single layer |
| `0 20px 60px rgba(0,0,0,0.2)` | `--shadow-xl` | Single layer, higher opacity |
| `0 1px 3px rgba(0,0,0,0.15)` | `--shadow-sm` | Toggle thumb, much higher opacity |

15
frontend-v2/Dockerfile Normal file
View File

@@ -0,0 +1,15 @@
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["node", "build"]

42
frontend-v2/README.md Normal file
View File

@@ -0,0 +1,42 @@
# sv
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```sh
# create a new project
npx sv create my-app
```
To recreate this project with the same configuration:
```sh
# recreate this project
npx sv@0.12.8 create --template minimal --types ts --no-install frontend-v2
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```sh
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```sh
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

2332
frontend-v2/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

31
frontend-v2/package.json Normal file
View File

@@ -0,0 +1,31 @@
{
"name": "frontend-v2",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^7.0.0",
"@sveltejs/kit": "^2.50.2",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"svelte": "^5.51.0",
"svelte-check": "^4.4.2",
"typescript": "^5.9.3",
"vite": "^7.3.1"
},
"dependencies": {
"@lucide/svelte": "^1.6.0",
"@sveltejs/adapter-node": "^5.5.4",
"@tailwindcss/vite": "^4.2.2",
"clsx": "^2.1.1",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2"
}
}

461
frontend-v2/src/app.css Normal file
View File

@@ -0,0 +1,461 @@
@import 'tailwindcss';
/* ═══════════════════════════════════════════════
DESIGN SYSTEM — Single source of truth
RULES:
1. No raw px in component <style> blocks — use tokens
2. No raw rgba/hex colors — use semantic tokens
3. No copy-pasting base component styles — use globals
4. Surface hierarchy: canvas → surface → card
5. Text hierarchy: text-1 → text-2 → text-3 → text-4
═══════════════════════════════════════════════ */
@layer base {
:root {
/* ── Fonts ── */
--font: 'Inter', -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
--transition: 180ms ease;
/* ── Spacing scale (4px grid) ──
* Use these everywhere: padding, margin, gap.
* Naming: --sp-{n} where value = n × 4px
*/
--sp-0: 0px;
--sp-px: 1px;
--sp-0.5: 2px;
--sp-1: 4px;
--sp-1.5: 6px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 28px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
/* Semantic spacing aliases */
--section-gap: var(--sp-7);
--card-pad: var(--sp-5);
--card-pad-primary: var(--sp-7);
--card-pad-secondary: var(--sp-4);
--row-gap: var(--sp-3);
--module-gap: var(--sp-5);
--row-pad-y: 14px;
--row-pad-x: var(--sp-4);
--inner-gap: var(--sp-3);
/* ── Radius scale ── */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-full: 9999px;
/* ── Elevation scale ──
* xs: barely visible (row hover, inner elements)
* sm: subtle lift (secondary cards, inputs)
* md: standard card elevation
* lg: elevated (dropdowns, popovers, hero cards)
* xl: overlay (modals, slide-out panels)
*/
--shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
--shadow-md: 0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.1);
--shadow-xl: 0 8px 24px rgba(0,0,0,0.08), 0 24px 60px rgba(0,0,0,0.15);
/* Legacy aliases */
--card-shadow: var(--shadow-md);
--card-shadow-sm: var(--shadow-sm);
/* ── Typography scale ──
* xs: badges, pills, tiny counters
* sm: labels, meta, captions, button text
* base: body text, list items, inputs
* md: card titles, important rows (16px avoids iOS zoom)
* lg: section headers, modal titles
* xl: page titles
* 2xl: hero headings
* 3xl: large hero numbers
*/
--text-xs: 11px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
/* Line heights */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--leading-loose: 1.8;
}
/* ── LIGHT MODE ── */
:root {
/* Surface hierarchy: canvas (page bg) → surface (sidebars, panels) → card (content containers) */
--canvas: #F5F6F8;
--surface: #FFFFFF;
--surface-secondary: #FAFAFB;
--card: #FFFFFF;
--card-secondary: #FAFAFB;
--card-hover: #f0f0f3;
/* Borders */
--border: rgba(0,0,0,0.06);
--border-strong: rgba(0,0,0,0.1);
/* Text hierarchy: 1 (headings/names) → 2 (body) → 3 (labels/meta) → 4 (placeholder/disabled) */
--text-1: #1a1a1f;
--text-2: #4a4a55;
--text-3: #6b6b76;
--text-4: #b4b4bd;
/* Accent — indigo */
--accent: #4F46E5;
--accent-bg: #EEF2FF;
--accent-dim: rgba(79,70,229,0.06);
--accent-border: rgba(79,70,229,0.10);
--accent-focus: rgba(79,70,229,0.12);
/* Semantic: success */
--success: #16A34A;
--success-bg: #F0FDF4;
--success-dim: rgba(34,197,94,0.08);
/* Semantic: error */
--error: #DC2626;
--error-bg: #FEF2F2;
--error-dim: rgba(239,68,68,0.08);
/* Semantic: warning */
--warning: #d97706;
--warning-bg: rgba(245,158,11,0.08);
/* Overlay */
--overlay: rgba(0,0,0,0.3);
--overlay-strong: rgba(0,0,0,0.5);
--nav-bg: rgba(255,255,255,0.9);
}
/* ── DARK MODE ── */
.dark {
--canvas: #09090b;
--surface: #0f0f12;
--surface-secondary: #111114;
--card: #161619;
--card-secondary: #111114;
--card-hover: #1c1c20;
--border: rgba(255,255,255,0.06);
--border-strong: rgba(255,255,255,0.1);
--text-1: #fafafa;
--text-2: #a1a1aa;
--text-3: #71717a;
--text-4: #3f3f46;
--accent: #3b82f6;
--accent-bg: rgba(59,130,246,0.1);
--accent-dim: rgba(59,130,246,0.08);
--accent-border: rgba(59,130,246,0.12);
--accent-focus: rgba(59,130,246,0.15);
--success: #22c55e;
--success-bg: rgba(34,197,94,0.1);
--success-dim: rgba(34,197,94,0.08);
--error: #ef4444;
--error-bg: rgba(239,68,68,0.1);
--error-dim: rgba(239,68,68,0.08);
--warning: #f59e0b;
--warning-bg: rgba(245,158,11,0.1);
--overlay: rgba(0,0,0,0.6);
--overlay-strong: rgba(0,0,0,0.75);
--nav-bg: rgba(15,15,18,0.9);
/* Dark shadows need higher opacity */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.1);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);
--shadow-md: 0 2px 6px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.12);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.2), 0 16px 40px rgba(0,0,0,0.2);
--shadow-xl: 0 8px 24px rgba(0,0,0,0.25), 0 24px 60px rgba(0,0,0,0.3);
}
/* ── Base resets ── */
html, body {
font-family: var(--font);
background: var(--canvas);
color: var(--text-1);
min-height: 100vh;
transition: background var(--transition), color var(--transition);
-webkit-font-smoothing: antialiased;
}
* { border-color: var(--border); }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
input { font-family: var(--font); }
}
/* ═══════════════════════════════════════════════
GLOBAL COMPONENT CLASSES
Use these in any component without re-declaring
═══════════════════════════════════════════════ */
/* ── Skeleton loader ── */
.skeleton {
background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-xs);
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── Buttons ── */
.btn-primary {
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-md);
background: var(--accent);
color: white;
border: none;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary.full {
width: 100%;
padding: var(--sp-3) var(--sp-4);
font-size: var(--text-md);
font-weight: 600;
border-radius: var(--radius);
}
.btn-secondary {
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-md);
background: var(--card-secondary);
color: var(--text-2);
border: 1px solid var(--border);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
}
.btn-secondary:hover { background: var(--card-hover); color: var(--text-1); }
.btn-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--card-secondary);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-3);
transition: all var(--transition);
flex-shrink: 0;
}
.btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
.btn-icon svg { width: var(--sp-4); height: var(--sp-4); }
/* ── Inputs ── */
.input {
width: 100%;
padding: 10px 14px;
border-radius: var(--radius-md);
background: var(--surface-secondary);
border: 1px solid var(--border);
color: var(--text-1);
font-size: var(--text-base);
font-family: var(--font);
outline: none;
transition: border-color var(--transition);
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-4); }
/* ── Module (card container) ──
* Use for any content block: dashboard widgets, data tables, etc.
* Variants: .primary (hero, more padding + elevation), .flush (no padding)
*/
.module {
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
padding: var(--card-pad);
}
.module.primary {
padding: var(--card-pad-primary);
box-shadow: var(--shadow-lg);
}
.module.flush { padding: 0; }
.module-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-5);
}
.module-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.module-action {
font-size: var(--text-sm);
color: var(--accent);
font-weight: 500;
cursor: pointer;
text-decoration: none;
}
.module-action:hover { text-decoration: underline; }
/* ── Data row ──
* Standard list item pattern: name + meta on left, value/badge on right.
* Use in transactions, inventory items, feed entries, etc.
*/
.data-row {
display: flex;
align-items: center;
gap: var(--inner-gap);
padding: var(--row-pad-y) var(--row-pad-x);
transition: background var(--transition);
}
.data-row:hover { background: var(--card-hover); }
.data-row + .data-row { border-top: 1px solid var(--border); }
.data-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
.data-row:nth-child(even):hover { background: var(--card-hover); }
/* ── Badges ──
* Semantic status badges. Variants: error, success, warning, accent, muted.
*/
.badge {
font-size: var(--text-xs);
font-weight: 500;
padding: 3px 10px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.badge.error { background: var(--error-dim); color: var(--error); }
.badge.success { background: var(--success-dim); color: var(--success); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.accent { background: var(--accent-dim); color: var(--accent); }
.badge.muted { background: var(--card-hover); color: var(--text-4); }
/* ── Tabs ──
* Pill-style tab bar.
*/
.tab-bar { display: flex; gap: var(--sp-1); }
.tab {
padding: var(--sp-2) 14px;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: 500;
color: var(--text-3);
background: none;
border: none;
cursor: pointer;
transition: all var(--transition);
font-family: var(--font);
display: flex;
align-items: center;
gap: var(--sp-1.5);
}
.tab:hover { color: var(--text-1); background: var(--card-hover); }
.tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.tab-badge {
font-size: var(--text-xs);
font-family: var(--mono);
background: var(--accent-dim);
color: var(--accent);
padding: 1px 6px;
border-radius: var(--radius-xs);
margin-left: var(--sp-1);
}
/* ── Section header ──
* Uppercase label above a group of content.
*/
.section-label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
margin-bottom: var(--sp-1.5);
}
/* ── Page wrapper ── */
.page { padding: var(--sp-8) 0 var(--sp-20); }
.page-header { margin-bottom: var(--section-gap); }
.page-title {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--sp-1);
}
.page-greeting {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: var(--leading-tight);
}
.page-greeting strong { font-weight: 600; }
/* ── App surface (centered container) ── */
.app-surface {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 var(--sp-6);
}
/* ── Responsive ── */
@media (max-width: 768px) {
:root {
--text-xs: 12px;
--text-sm: 15px;
--text-base: 16px;
--text-md: 17px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 26px;
--text-3xl: 32px;
--card-pad: var(--sp-4);
--card-pad-primary: var(--sp-5);
--row-pad-y: var(--sp-4);
--section-gap: var(--sp-5);
}
.page-greeting { font-size: var(--text-xl); }
.page { padding: var(--sp-5) 0 var(--sp-20); }
.app-surface { padding: 0 var(--sp-5); }
}

13
frontend-v2/src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

11
frontend-v2/src/app.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

194
frontend-v2/src/hooks.server.ts Normal file
View File

@@ -0,0 +1,194 @@
import type { Handle } from '@sveltejs/kit';
import { env } from '$env/dynamic/private';
const gatewayUrl = env.GATEWAY_URL || 'http://localhost:8100';
const immichUrl = env.IMMICH_URL || '';
const immichApiKey = env.IMMICH_API_KEY || '';
const karakeepUrl = env.KARAKEEP_URL || '';
const karakeepApiKey = env.KARAKEEP_API_KEY || '';
export const handle: Handle = async ({ event, resolve }) => {
// ── Immich API proxy (shared across all pages) ──
if (event.url.pathname.startsWith('/api/immich/') && immichUrl && immichApiKey) {
const immichPath = event.url.pathname.replace('/api/immich', '/api');
// Thumbnail/original image proxy — cache-friendly binary response
if (immichPath.includes('/thumbnail') || immichPath.includes('/original')) {
const assetId = event.url.pathname.split('/')[4]; // /api/immich/assets/{id}/thumbnail
const type = immichPath.includes('/original') ? 'original' : 'thumbnail';
try {
const response = await fetch(`${immichUrl}/api/assets/${assetId}/${type}`, {
headers: { 'x-api-key': immichApiKey }
});
return new Response(response.body, {
status: response.status,
headers: {
'Content-Type': response.headers.get('Content-Type') || 'image/webp',
'Cache-Control': 'public, max-age=86400'
}
});
} catch {
return new Response('', { status: 502 });
}
}
// JSON API proxy (search, timeline, etc.)
try {
const targetUrl = `${immichUrl}${immichPath}${event.url.search}`;
const reqHeaders: Record<string, string> = { 'x-api-key': immichApiKey };
const ct = event.request.headers.get('content-type');
if (ct) reqHeaders['content-type'] = ct;
const response = await fetch(targetUrl, {
method: event.request.method,
headers: reqHeaders,
body: event.request.method !== 'GET' && event.request.method !== 'HEAD'
? await event.request.arrayBuffer()
: undefined
});
// For search results, strip down to minimal fields to avoid huge payloads
if (immichPath.includes('/search/') && response.ok) {
const data = await response.json();
if (data.assets?.items) {
data.assets.items = data.assets.items.map((a: Record<string, unknown>) => ({
id: a.id,
type: a.type,
fileCreatedAt: a.fileCreatedAt,
originalFileName: a.originalFileName
}));
}
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' }
});
}
const responseHeaders = new Headers();
for (const [key, value] of response.headers.entries()) {
responseHeaders.append(key, value);
}
return new Response(response.body, { status: response.status, headers: responseHeaders });
} catch {
return new Response(JSON.stringify({ error: 'Immich unavailable' }), {
status: 502, headers: { 'Content-Type': 'application/json' }
});
}
}
// ── Karakeep API proxy (server-to-server) ──
if (event.url.pathname.startsWith('/api/karakeep/') && karakeepUrl && karakeepApiKey) {
const action = event.url.pathname.split('/').pop(); // 'save' or 'delete'
try {
const body = await event.request.json();
if (action === 'save' && body.url) {
const response = await fetch(`${karakeepUrl}/api/v1/bookmarks`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${karakeepApiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ type: 'link', url: body.url })
});
const data = await response.json();
if (response.ok) {
return new Response(JSON.stringify({ ok: true, id: data.id || '' }), {
status: 200, headers: { 'Content-Type': 'application/json' }
});
}
return new Response(JSON.stringify({ error: 'Save failed', status: response.status }), {
status: response.status, headers: { 'Content-Type': 'application/json' }
});
}
if (action === 'delete' && body.id) {
const response = await fetch(`${karakeepUrl}/api/v1/bookmarks/${body.id}`, {
method: 'DELETE',
headers: { 'Authorization': `Bearer ${karakeepApiKey}` }
});
return new Response(JSON.stringify({ ok: response.ok }), {
status: 200, headers: { 'Content-Type': 'application/json' }
});
}
return new Response(JSON.stringify({ error: 'Invalid request' }), {
status: 400, headers: { 'Content-Type': 'application/json' }
});
} catch (err) {
console.error('Karakeep proxy error:', err);
return new Response(JSON.stringify({ error: 'Karakeep unavailable', detail: String(err) }), {
status: 502, headers: { 'Content-Type': 'application/json' }
});
}
}
// Legacy trips-specific Immich thumbnail (keep for backward compat)
if (event.url.pathname.startsWith('/api/trips/immich/thumb/') && immichUrl && immichApiKey) {
const assetId = event.url.pathname.split('/').pop();
try {
const response = await fetch(`${immichUrl}/api/assets/${assetId}/thumbnail`, {
headers: { 'x-api-key': immichApiKey }
});
return new Response(response.body, {
status: response.status,
headers: {
'Content-Type': response.headers.get('Content-Type') || 'image/webp',
'Cache-Control': 'public, max-age=86400'
}
});
} catch {
return new Response('', { status: 502 });
}
}
// Proxy all /api/* requests to the gateway
if (event.url.pathname.startsWith('/api/') || event.url.pathname.startsWith('/images/')) {
// Rewrite /images/trips/* to /api/trips/images/* for gateway routing
let targetPath = event.url.pathname;
if (targetPath.startsWith('/images/trips/')) {
targetPath = '/api/trips' + targetPath.replace('/images/trips', '/images');
} else if (targetPath.startsWith('/images/fitness/')) {
targetPath = '/api/fitness' + targetPath.replace('/images/fitness', '/images');
}
const targetUrl = `${gatewayUrl}${targetPath}${event.url.search}`;
const headers = new Headers();
// Forward all relevant headers
for (const [key, value] of event.request.headers.entries()) {
if (['authorization', 'content-type', 'cookie', 'x-api-key', 'x-telegram-user-id'].includes(key.toLowerCase())) {
headers.set(key, value);
}
}
try {
const response = await fetch(targetUrl, {
method: event.request.method,
headers,
body: event.request.method !== 'GET' && event.request.method !== 'HEAD'
? await event.request.arrayBuffer()
: undefined
});
// Forward set-cookie headers from gateway
const responseHeaders = new Headers();
for (const [key, value] of response.headers.entries()) {
responseHeaders.append(key, value);
}
return new Response(response.body, {
status: response.status,
headers: responseHeaders
});
} catch (error) {
console.error('Gateway proxy error:', error);
return new Response(JSON.stringify({ error: 'Gateway unavailable' }), {
status: 502,
headers: { 'Content-Type': 'application/json' }
});
}
}
return resolve(event);
};

78
frontend-v2/src/lib/api/client.ts Normal file
View File

@@ -0,0 +1,78 @@
export type ApiClientOptions = {
basePath: string;
loginPath?: string;
};
export function createApiClient({ basePath, loginPath = '/login' }: ApiClientOptions) {
async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
const headers: Record<string, string> = {
...((options.headers as Record<string, string>) || {})
};
if (options.body && typeof options.body === 'string') {
headers['Content-Type'] = 'application/json';
}
const response = await fetch(`${basePath}${path}`, {
...options,
headers,
credentials: 'include' // sends platform_session cookie
});
if (response.status === 401) {
if (typeof window !== 'undefined') {
window.location.href = loginPath;
}
throw new Error('Unauthorized');
}
if (!response.ok) {
const err = await response.json().catch(() => ({ error: response.statusText }));
throw new Error(err.error || `HTTP ${response.status}`);
}
return response.json();
}
return {
get: <T>(path: string) => request<T>(path),
post: <T>(path: string, data: unknown) => request<T>(path, { method: 'POST', body: JSON.stringify(data) }),
patch: <T>(path: string, data: unknown) => request<T>(path, { method: 'PATCH', body: JSON.stringify(data) }),
put: <T>(path: string, data: unknown) => request<T>(path, { method: 'PUT', body: JSON.stringify(data) }),
del: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
// For raw fetch (file uploads etc)
fetch: (path: string, options: RequestInit = {}) =>
fetch(`${basePath}${path}`, { ...options, credentials: 'include' })
};
}
// Platform auth helpers
export const platformAuth = {
async login(username: string, password: string) {
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
credentials: 'include'
});
return res.json();
},
async logout() {
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
},
async me() {
const res = await fetch('/api/auth/me', { credentials: 'include' });
return res.json();
},
async isAuthenticated(): Promise<boolean> {
try {
const data = await this.me();
return data.authenticated === true;
} catch {
return false;
}
}
};

1
frontend-v2/src/lib/assets/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

114
frontend-v2/src/lib/components/dashboard/BudgetModule.svelte Normal file
View File

@@ -0,0 +1,114 @@
<script lang="ts">
import { onMount } from 'svelte';
let spending = $state('...');
let month = $state('');
let topCats = $state<{ name: string; amount: string; isIncome: boolean }[]>([]);
onMount(async () => {
try {
const res = await fetch('/api/budget/summary', { credentials: 'include' });
if (res.ok) {
const data = await res.json();
spending = '$' + Math.abs(data.spendingDollars || 0).toLocaleString('en-US');
const m = data.month || '';
if (m) {
const d = new Date(m + '-01');
month = d.toLocaleDateString('en-US', { month: 'long' });
}
const income = data.incomeDollars || 0;
const cats = (data.topCategories || []).map((c: any) => ({
name: c.name,
amount: '$' + Math.abs(c.amountDollars || 0).toLocaleString('en-US'),
isIncome: false
}));
if (income > 0) {
topCats = [{ name: 'Income', amount: '+$' + Math.abs(income).toLocaleString('en-US'), isIncome: true }, ...cats];
} else {
topCats = cats;
}
}
} catch { /* silent */ }
});
</script>
<div class="module primary">
<div class="module-header">
<div class="module-title">Budget{month ? ' · ' + month : ''}</div>
<a href="/budget" class="module-action">View all &rarr;</a>
</div>
<div class="budget-hero">
<div class="budget-amount">{spending}</div>
<div class="budget-label">spent this month</div>
</div>
<div class="budget-rows">
{#each topCats as cat}
<div class="budget-row">
<span class="budget-row-name">{cat.name}</span>
<span class="budget-row-amount" class:income={cat.isIncome}>{cat.amount}</span>
</div>
{/each}
</div>
</div>
<style>
/* No .module/.module-header/.module-title/.module-action — using globals from app.css */
.budget-hero {
margin-bottom: var(--sp-5);
}
.budget-amount {
font-size: var(--text-3xl);
font-weight: 500;
font-family: var(--mono);
color: var(--text-1);
line-height: 1;
}
.budget-label {
font-size: var(--text-base);
color: var(--text-3);
margin-top: var(--sp-1.5);
}
.budget-rows {
display: flex;
flex-direction: column;
}
.budget-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
}
.budget-row:last-child {
border-bottom: none;
}
.budget-row-name {
font-size: var(--text-base);
color: var(--text-2);
}
.budget-row-amount {
font-size: var(--text-base);
font-family: var(--mono);
color: var(--text-1);
}
.budget-row-amount.income {
color: var(--success);
}
@media (max-width: 768px) {
.budget-amount {
font-size: var(--text-2xl);
}
}
</style>

157
frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte Normal file
View File

@@ -0,0 +1,157 @@
<script lang="ts">
let {
title,
description,
action,
variant,
size = 'secondary',
href
}: {
title: string;
description: string;
action: string;
variant: 'budget' | 'inventory' | 'fitness';
size?: 'primary' | 'secondary';
href: string;
} = $props();
</script>
<a {href} class="action-card {size}">
<div class="action-card-left">
<div class="action-card-icon {variant}">
{#if variant === 'budget'}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
{:else if variant === 'inventory'}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 9.4l-9-5.19"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
{:else if variant === 'fitness'}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
{/if}
</div>
<div class="action-card-text">
<div class="action-card-title">{title}</div>
<div class="action-card-desc">{description}</div>
</div>
</div>
<div class="action-card-right">
{action}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
</div>
</a>
<style>
.action-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-5) var(--sp-5);
border-radius: var(--radius-lg);
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
transition: all var(--transition);
cursor: pointer;
text-decoration: none;
}
.action-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.action-card.primary {
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.action-card.primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.action-card-left {
display: flex;
align-items: center;
gap: var(--inner-gap);
flex: 1;
min-width: 0;
}
.action-card-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Icon variants — using semantic tokens for both themes */
.action-card-icon.budget { background: var(--accent-bg); color: var(--accent); }
.action-card-icon.inventory { background: var(--error-bg); color: var(--error); }
.action-card-icon.fitness { background: var(--success-bg); color: var(--success); }
.action-card-icon :global(svg) {
width: 18px;
height: 18px;
}
.action-card-text {
flex: 1;
min-width: 0;
}
.action-card-title {
font-size: var(--text-md);
font-weight: 600;
color: var(--text-1);
line-height: var(--leading-snug);
}
.action-card-desc {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: var(--sp-0.5);
line-height: 1.4;
}
.action-card-right {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
display: flex;
align-items: center;
gap: 1px;
flex-shrink: 0;
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-md);
transition: all var(--transition);
white-space: nowrap;
}
.action-card:hover .action-card-right {
color: var(--accent);
background: var(--accent-dim);
}
.action-card-right :global(svg) {
width: var(--sp-4);
height: var(--sp-4);
transition: transform var(--transition);
}
.action-card:hover .action-card-right :global(svg) {
transform: translateX(2px);
}
@media (max-width: 768px) {
.action-card {
padding: var(--sp-4);
gap: var(--sp-2);
}
.action-card-left {
gap: var(--sp-3);
}
}
</style>

199
frontend-v2/src/lib/components/dashboard/FitnessModule.svelte Normal file
View File

@@ -0,0 +1,199 @@
<script lang="ts">
import { onMount } from 'svelte';
let loading = $state(true);
let error = $state(false);
let notConnected = $state(false);
let eaten = $state(0);
let remaining = $state(0);
let percent = $state(0);
let calorieGoal = $state(0);
let proteinCurrent = $state(0);
let proteinGoal = $state(0);
let carbsCurrent = $state(0);
let carbsGoal = $state(0);
let fatCurrent = $state(0);
let fatGoal = $state(0);
function fmt(n: number): string {
return Math.round(n).toLocaleString();
}
onMount(async () => {
const n = new Date();
const today = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
try {
const [totalsRes, goalsRes] = await Promise.all([
fetch(`/api/fitness/entries/totals?date=${today}`),
fetch(`/api/fitness/goals/for-date?date=${today}`)
]);
if (totalsRes.status === 401 || goalsRes.status === 401) {
notConnected = true;
loading = false;
return;
}
if (!totalsRes.ok || (!goalsRes.ok && goalsRes.status !== 404)) {
error = true;
loading = false;
return;
}
const totals = await totalsRes.json();
eaten = totals.total_calories ?? 0;
proteinCurrent = totals.total_protein ?? 0;
carbsCurrent = totals.total_carbs ?? 0;
fatCurrent = totals.total_fat ?? 0;
if (goalsRes.ok) {
const goals = await goalsRes.json();
calorieGoal = goals.calories ?? 0;
proteinGoal = goals.protein ?? 0;
carbsGoal = goals.carbs ?? 0;
fatGoal = goals.fat ?? 0;
}
remaining = Math.max(0, calorieGoal - eaten);
percent = calorieGoal > 0 ? Math.min(100, Math.round((eaten / calorieGoal) * 100)) : 0;
loading = false;
} catch {
error = true;
loading = false;
}
});
</script>
<div class="module">
<div class="module-header">
<div class="module-title">Fitness &middot; Today</div>
<a href="/fitness" class="module-action">Details &rarr;</a>
</div>
{#if notConnected}
<div class="fitness-top">
<div class="fitness-avatar">Y</div>
<div>
<div class="fitness-name">Yusuf</div>
<div class="fitness-sub">Connect fitness to get started</div>
</div>
</div>
{:else}
<div class="fitness-top">
<div class="fitness-avatar">Y</div>
<div>
<div class="fitness-name">Yusuf</div>
<div class="fitness-sub">
{#if loading}...{:else if error}&mdash;{:else}{fmt(eaten)} cal &middot; {fmt(remaining)} remaining{/if}
</div>
</div>
</div>
<div class="fitness-bar">
<div class="fitness-bar-fill" style="width: {loading || error ? 0 : percent}%"></div>
</div>
<div class="fitness-macros">
<div class="fitness-macro">
<div class="fitness-macro-val">
{#if loading}...{:else if error}&mdash;{:else}{Math.round(proteinCurrent)}<span class="fitness-macro-unit">/{Math.round(proteinGoal)}g</span>{/if}
</div>
<div class="fitness-macro-label">protein</div>
</div>
<div class="fitness-macro">
<div class="fitness-macro-val">
{#if loading}...{:else if error}&mdash;{:else}{Math.round(carbsCurrent)}<span class="fitness-macro-unit">/{Math.round(carbsGoal)}g</span>{/if}
</div>
<div class="fitness-macro-label">carbs</div>
</div>
<div class="fitness-macro">
<div class="fitness-macro-val">
{#if loading}...{:else if error}&mdash;{:else}{Math.round(fatCurrent)}<span class="fitness-macro-unit">/{Math.round(fatGoal)}g</span>{/if}
</div>
<div class="fitness-macro-label">fat</div>
</div>
</div>
{/if}
</div>
<style>
/* No .module/.module-header/.module-title/.module-action — using globals from app.css */
.fitness-top {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.fitness-avatar {
width: var(--sp-10);
height: var(--sp-10);
border-radius: var(--radius-full);
background: var(--accent-dim);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-base);
font-weight: 600;
color: var(--accent);
flex-shrink: 0;
}
.fitness-name {
font-size: var(--text-md);
font-weight: 500;
color: var(--text-1);
}
.fitness-sub {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: 1px;
}
.fitness-bar {
height: var(--sp-1.5);
background: var(--border);
border-radius: 3px;
overflow: hidden;
margin-bottom: var(--sp-4);
}
.fitness-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
transition: width 0.5s ease;
}
.fitness-macros {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--row-gap);
}
.fitness-macro-val {
font-size: var(--text-md);
font-weight: 500;
font-family: var(--mono);
color: var(--text-1);
}
.fitness-macro-unit {
font-size: var(--text-sm);
font-weight: 400;
color: var(--text-3);
}
.fitness-macro-label {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: var(--sp-0.5);
}
</style>

113
frontend-v2/src/lib/components/dashboard/IssuesModule.svelte Normal file
View File

@@ -0,0 +1,113 @@
<script lang="ts">
import { onMount } from 'svelte';
interface Issue {
id: number;
item: string;
orderNumber: string;
}
let issues = $state<Issue[]>([]);
let loading = $state(true);
onMount(async () => {
try {
const res = await fetch('/api/inventory/summary', { credentials: 'include' });
if (res.ok) {
const data = await res.json();
issues = (data.issues || []).slice(0, 5);
}
} catch { /* silent */ }
loading = false;
});
</script>
<div class="module">
<div class="module-header">
<div class="module-title">Issues</div>
<a href="/inventory" class="module-action">View all &rarr;</a>
</div>
<div class="issue-rows">
{#if loading}
{#each [1, 2, 3] as _}
<div class="issue-row">
<div class="issue-info">
<div class="skeleton" style="width:160px;height:14px"></div>
<div class="skeleton" style="width:120px;height:12px;margin-top:var(--sp-1)"></div>
</div>
</div>
{/each}
{:else if issues.length === 0}
<div class="issue-empty">No issues found</div>
{:else}
{#each issues as issue}
<a href="/inventory?item={issue.id}" class="issue-row">
<div class="issue-info">
<div class="issue-name">{issue.item}</div>
<div class="issue-meta">Order #{issue.orderNumber || '—'}</div>
</div>
<span class="badge error" style="text-transform:uppercase;letter-spacing:0.02em;font-weight:600">Issue</span>
</a>
{/each}
{/if}
</div>
</div>
<style>
/* No .module/.module-header/.module-title/.module-action — using globals from app.css */
.issue-rows {
display: flex;
flex-direction: column;
}
.issue-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
border-left: 3px solid var(--error);
margin-left: calc(-1 * var(--sp-1));
transition: background var(--transition);
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
text-decoration: none;
color: inherit;
}
.issue-row:last-child {
border-bottom: none;
}
.issue-row:hover {
background: var(--card-hover);
}
.issue-info {
min-width: 0;
flex: 1;
}
.issue-name {
font-size: var(--text-base);
font-weight: 500;
color: var(--text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.issue-meta {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: var(--sp-0.5);
}
.issue-empty {
padding: var(--sp-5);
text-align: center;
font-size: var(--text-sm);
color: var(--text-3);
}
</style>

187
frontend-v2/src/lib/components/layout/CommandPalette.svelte Normal file
View File

@@ -0,0 +1,187 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { Search, Plus, Package, Clock } from '@lucide/svelte';
interface Props {
open: boolean;
onclose: () => void;
}
let { open = $bindable(), onclose }: Props = $props();
let query = $state('');
let selectedIndex = $state(0);
let inputEl: HTMLInputElement | undefined = $state();
const quickActions = [
{ icon: Plus, label: 'Log food', desc: 'Quick add calories', href: '/fitness' },
{ icon: Package, label: 'New inventory item', desc: 'Add a new item to track', href: '/inventory' },
{ icon: Clock, label: 'Go to Budget', desc: 'View transactions', href: '/budget' },
];
let filteredActions = $derived(
query.trim()
? quickActions.filter(a =>
a.label.toLowerCase().includes(query.toLowerCase()) ||
a.desc.toLowerCase().includes(query.toLowerCase())
)
: quickActions
);
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') {
onclose();
return;
}
if (e.key === 'ArrowDown') {
e.preventDefault();
selectedIndex = Math.min(selectedIndex + 1, filteredActions.length - 1);
}
if (e.key === 'ArrowUp') {
e.preventDefault();
selectedIndex = Math.max(selectedIndex - 1, 0);
}
if (e.key === 'Enter' && filteredActions[selectedIndex]) {
goto(filteredActions[selectedIndex].href);
onclose();
}
}
$effect(() => {
if (open) {
query = '';
selectedIndex = 0;
// Focus input after render
requestAnimationFrame(() => inputEl?.focus());
}
});
</script>
{#if open}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="cmd-overlay open" onclick={(e) => { if (e.target === e.currentTarget) onclose(); }} onkeydown={handleKeydown}>
<div class="cmd-box" role="dialog" aria-label="Command palette">
<div class="cmd-input-wrap">
<Search size={18} />
<input
class="cmd-input"
placeholder="Search transactions, items, or type a command..."
bind:value={query}
bind:this={inputEl}
onkeydown={handleKeydown}
/>
</div>
<div class="cmd-results">
{#each filteredActions as action, i}
<button
class="cmd-item"
class:selected={i === selectedIndex}
onclick={() => { goto(action.href); onclose(); }}
onmouseenter={() => selectedIndex = i}
>
<div class="cmd-item-icon">
<action.icon size={16} />
</div>
<div>
<div class="cmd-item-text">{action.label}</div>
<div class="cmd-item-desc">{action.desc}</div>
</div>
</button>
{/each}
</div>
<div class="cmd-footer">
<div class="cmd-hint"><kbd>&uarr;&darr;</kbd> navigate</div>
<div class="cmd-hint"><kbd>&crarr;</kbd> select</div>
<div class="cmd-hint"><kbd>esc</kbd> close</div>
</div>
</div>
</div>
{/if}
<style>
.cmd-overlay {
position: fixed;
inset: 0;
background: var(--overlay);
z-index: 100;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 20vh;
}
.cmd-box {
width: 560px;
max-width: 90vw;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 24px 48px rgba(0,0,0,0.2);
overflow: hidden;
}
.cmd-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.cmd-input-wrap :global(svg) { color: var(--text-3); flex-shrink: 0; }
.cmd-input {
flex: 1;
background: none;
border: none;
outline: none;
font-size: var(--text-md);
color: var(--text-1);
font-family: var(--font);
}
.cmd-input::placeholder { color: var(--text-4); }
.cmd-results { max-height: 300px; overflow-y: auto; }
.cmd-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 10px var(--sp-4);
cursor: pointer;
transition: background var(--transition);
width: 100%;
background: none;
border: none;
text-align: left;
}
.cmd-item:hover, .cmd-item.selected { background: var(--accent-dim); }
.cmd-item-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: var(--card-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cmd-item-icon :global(svg) { color: var(--text-3); }
.cmd-item-text { font-size: var(--text-base); color: var(--text-1); }
.cmd-item-desc { font-size: var(--text-sm); color: var(--text-3); }
.cmd-footer {
padding: var(--sp-2) var(--sp-4);
border-top: 1px solid var(--border);
display: flex;
gap: var(--sp-3);
}
.cmd-hint {
font-size: var(--text-xs);
color: var(--text-4);
display: flex;
align-items: center;
gap: var(--sp-1);
}
.cmd-hint kbd {
font-family: var(--mono);
font-size: var(--text-xs);
padding: 1px 4px;
border-radius: 3px;
background: var(--card-secondary);
border: 1px solid var(--border);
}
</style>

165
frontend-v2/src/lib/components/layout/MobileTabBar.svelte Normal file
View File

@@ -0,0 +1,165 @@
<script lang="ts">
import { page } from '$app/state';
import { LayoutDashboard, DollarSign, Package, Activity, MoreVertical, MapPin, BookOpen, Library, Settings } from '@lucide/svelte';
let moreOpen = $state(false);
function isActive(path: string): boolean {
if (path === '/') return page.url.pathname === '/';
return page.url.pathname.startsWith(path);
}
function closeMore() {
moreOpen = false;
}
</script>
<div class="mobile-tabbar">
<div class="mobile-tabbar-inner">
<a href="/" class="mobile-tab" class:active={isActive('/')}>
<LayoutDashboard size={22} />
Dashboard
</a>
<a href="/budget" class="mobile-tab" class:active={isActive('/budget')}>
<DollarSign size={22} />
Budget
</a>
<a href="/inventory" class="mobile-tab" class:active={isActive('/inventory')}>
<Package size={22} />
Inventory
</a>
<a href="/fitness" class="mobile-tab" class:active={isActive('/fitness')}>
<Activity size={22} />
Fitness
</a>
<button class="mobile-tab" class:active={moreOpen} onclick={() => moreOpen = true}>
<MoreVertical size={22} />
More
</button>
</div>
</div>
<!-- More sheet overlay -->
{#if moreOpen}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="more-sheet-overlay open" onclick={(e) => { if (e.target === e.currentTarget) closeMore(); }} onkeydown={() => {}}>
<div class="more-sheet">
<div class="more-sheet-handle"></div>
<a href="/trips" class="more-sheet-item" onclick={closeMore}>
<MapPin size={20} />
Trips
</a>
<a href="/reader" class="more-sheet-item" onclick={closeMore}>
<BookOpen size={20} />
Reader
</a>
<a href="/media" class="more-sheet-item" onclick={closeMore}>
<Library size={20} />
Media
</a>
<a href="/settings" class="more-sheet-item" onclick={closeMore}>
<Settings size={20} />
Settings
</a>
</div>
</div>
{/if}
<style>
.mobile-tabbar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 80;
background: var(--nav-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-tabbar-inner {
display: flex;
align-items: center;
justify-content: space-around;
height: 56px;
max-width: 500px;
margin: 0 auto;
}
.mobile-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-0.5);
background: none;
border: none;
color: var(--text-3);
font-size: var(--text-xs);
font-weight: 500;
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-md);
transition: all var(--transition);
min-width: 56px;
text-decoration: none;
}
.mobile-tab.active { color: var(--accent); }
.mobile-tab:hover { color: var(--text-1); }
/* More sheet */
.more-sheet-overlay {
position: fixed;
inset: 0;
background: var(--overlay);
z-index: 90;
}
.more-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 91;
background: var(--surface);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
padding: var(--sp-3) var(--sp-4) var(--sp-8);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.more-sheet-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--text-4);
margin: 0 auto var(--sp-4);
}
.more-sheet-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 14px var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--text-md);
font-weight: 500;
color: var(--text-1);
background: none;
border: none;
width: 100%;
text-align: left;
transition: background var(--transition);
text-decoration: none;
}
.more-sheet-item:hover { background: var(--card-hover); }
.more-sheet-item :global(svg) { color: var(--text-3); }
@media (max-width: 768px) {
.mobile-tabbar { display: block; }
}
@media (min-width: 769px) {
.mobile-tabbar { display: none !important; }
.more-sheet-overlay { display: none !important; }
}
</style>

215
frontend-v2/src/lib/components/layout/Navbar.svelte Normal file
View File

@@ -0,0 +1,215 @@
<script lang="ts">
import { page } from '$app/state';
import { toggleTheme, isDark } from '$lib/stores/theme.svelte';
import { Map, Sun, Moon, User, Search } from '@lucide/svelte';
interface Props {
onOpenCommand?: () => void;
}
let { onOpenCommand }: Props = $props();
let tripsOpen = $state(false);
let fitnessOpen = $state(false);
function isActive(path: string): boolean {
return page.url.pathname === path || page.url.pathname.startsWith(path + '/');
}
function closeDropdowns() {
tripsOpen = false;
fitnessOpen = false;
}
</script>
<svelte:window onclick={closeDropdowns} />
<nav class="navbar">
<div class="navbar-inner">
<a href="/" class="navbar-logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
Platform
</a>
<div class="navbar-links">
<a href="/" class="navbar-link" class:active={page.url.pathname === '/'}>Dashboard</a>
<!-- Trips dropdown -->
<a href="/trips" class="navbar-link" class:active={isActive('/trips')}>Trips</a>
<!-- Fitness dropdown -->
<div class="nav-dropdown" role="menu">
<button
class="navbar-link"
class:active={isActive('/fitness')}
onclick={(e) => { e.stopPropagation(); fitnessOpen = !fitnessOpen; tripsOpen = false; }}
>Fitness</button>
{#if fitnessOpen}
<div class="nav-dropdown-menu" onclick={(e) => e.stopPropagation()}>
<a href="/fitness" class="nav-dropdown-item" onclick={closeDropdowns}>Dashboard</a>
<a href="/fitness/foods" class="nav-dropdown-item" onclick={closeDropdowns}>Foods</a>
<a href="/fitness/goals" class="nav-dropdown-item" onclick={closeDropdowns}>Goals</a>
<a href="/fitness/templates" class="nav-dropdown-item" onclick={closeDropdowns}>Templates</a>
</div>
{/if}
</div>
<a href="/inventory" class="navbar-link" class:active={isActive('/inventory')}>Inventory</a>
<a href="/budget" class="navbar-link" class:active={isActive('/budget')}>Budget</a>
<a href="/reader" class="navbar-link" class:active={isActive('/reader')}>Reader</a>
<a href="/media" class="navbar-link" class:active={isActive('/media')}>Media</a>
</div>
<button class="search-trigger" onclick={onOpenCommand}>
<Search size={14} />
Search...
<kbd>&#8984;K</kbd>
</button>
<div class="navbar-right">
<button class="navbar-icon" onclick={toggleTheme} title="Toggle theme">
{#if isDark()}
<Sun size={18} />
{:else}
<Moon size={18} />
{/if}
</button>
<a href="/settings" class="navbar-icon" title="Settings">
<User size={18} />
</a>
</div>
</div>
</nav>
<style>
.navbar {
position: sticky;
top: 0;
z-index: 50;
background: var(--nav-bg);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.navbar-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
height: 56px;
padding: 0 var(--sp-6);
gap: var(--sp-6);
}
.navbar-logo {
font-weight: 600;
font-size: var(--text-md);
display: flex;
align-items: center;
gap: var(--sp-2);
color: var(--text-1);
flex-shrink: 0;
}
.navbar-logo svg { width: 20px; height: 20px; }
.navbar-links {
display: flex;
align-items: center;
gap: var(--sp-0.5);
flex: 1;
}
.navbar-link {
padding: 6px var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--text-base);
font-weight: 500;
color: var(--text-3);
transition: all var(--transition);
background: none;
border: none;
position: relative;
text-decoration: none;
}
.navbar-link:hover { color: var(--text-1); background: var(--accent-dim); }
.navbar-link.active { color: var(--text-1); background: var(--accent-dim); }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--card-shadow);
padding: var(--sp-1);
z-index: 60;
margin-top: var(--sp-1);
}
.nav-dropdown-item {
display: block;
width: 100%;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
background: none;
border: none;
text-align: left;
transition: all var(--transition);
cursor: pointer;
text-decoration: none;
}
.nav-dropdown-item:hover { background: var(--accent-dim); color: var(--text-1); }
.navbar-right {
display: flex;
align-items: center;
gap: var(--sp-1);
margin-left: auto;
}
.navbar-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--text-3);
transition: all var(--transition);
}
.navbar-icon:hover { color: var(--text-1); background: var(--accent-dim); }
.search-trigger {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 6px var(--sp-3);
border-radius: var(--radius-md);
background: var(--surface-secondary);
border: 1px solid var(--border);
color: var(--text-3);
font-size: var(--text-sm);
cursor: pointer;
transition: all var(--transition);
min-width: 200px;
}
.search-trigger:hover { border-color: var(--accent); color: var(--text-2); }
.search-trigger kbd {
margin-left: auto;
font-size: var(--text-xs);
font-family: var(--mono);
background: var(--canvas);
padding: 2px 6px;
border-radius: var(--radius-xs);
color: var(--text-4);
border: 1px solid var(--border);
}
@media (max-width: 768px) {
.navbar-links, .search-trigger { display: none !important; }
}
</style>

362
frontend-v2/src/lib/components/media/BookLibrary.svelte Normal file
View File

@@ -0,0 +1,362 @@
<script lang="ts">
import { onMount } from 'svelte';
interface BookloreBook {
id: number; title: string; authors: string[]; libraryId: number; libraryName: string;
categories: string[]; pageCount: number | null; publisher: string | null; addedOn: string;
isbn13: string | null; isbn10: string | null; googleId: string | null; format: string | null;
}
interface Library { id: number; name: string; }
interface KindleTarget { id: string; label: string; email: string; }
let books = $state<BookloreBook[]>([]);
let libraries = $state<Library[]>([]);
let loading = $state(true);
let searchQuery = $state('');
let selectedLibrary = $state<number | null>(null);
// Detail / Kindle
let selectedBook = $state<BookloreBook | null>(null);
let kindleTargets = $state<KindleTarget[]>([]);
let kindleConfigured = $state(false);
let sendingKindle = $state(false);
let kindleResult = $state<string | null>(null);
const filtered = $derived(() => {
let list = books;
if (selectedLibrary !== null) list = list.filter(b => b.libraryId === selectedLibrary);
if (searchQuery) {
const q = searchQuery.toLowerCase();
list = list.filter(b => b.title.toLowerCase().includes(q) || b.authors.some(a => a.toLowerCase().includes(q)));
}
return list;
});
onMount(async () => {
try {
const [booksRes, libsRes] = await Promise.all([
fetch('/api/booklore/books', { credentials: 'include' }),
fetch('/api/booklore/libraries', { credentials: 'include' }),
]);
if (booksRes.ok) { const data = await booksRes.json(); books = data.books || []; }
if (libsRes.ok) { const data = await libsRes.json(); libraries = (data.libraries || []).map((l: any) => ({ id: l.id, name: l.name })); }
} catch { /* silent */ }
loading = false;
// Lazy-resolve covers for books without ISBNs
const needsCover = books.filter(b => !b.isbn13 && !b.isbn10 && !b.googleId);
if (needsCover.length > 0) resolveCoversLazy(needsCover);
// Load Kindle targets
try {
const kRes = await fetch('/api/kindle/targets', { credentials: 'include' });
if (kRes.ok) {
const kData = await kRes.json();
kindleTargets = kData.targets || [];
kindleConfigured = kData.configured || false;
}
} catch { /* silent */ }
});
function openBook(book: BookloreBook) {
selectedBook = book;
kindleResult = null;
}
function closeBook() {
selectedBook = null;
kindleResult = null;
}
let lastKindleSendTime = 0;
async function sendToKindle(targetId: string) {
const now = Date.now();
if (!selectedBook || sendingKindle || now - lastKindleSendTime < 5000) return;
lastKindleSendTime = now;
sendingKindle = true;
kindleResult = null;
try {
const res = await fetch(`/api/booklore/books/${selectedBook.id}/send-to-kindle`, {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ target: targetId }),
});
const data = await res.json();
if (res.ok && data.success) {
kindleResult = `Sent "${data.title}" (${data.format}) to ${data.sentTo}`;
} else {
kindleResult = `Error: ${data.error || 'Failed to send'}`;
}
} catch {
kindleResult = 'Network error';
}
sendingKindle = false;
}
// Cover cache: bookId → cover URL, persisted in localStorage
const COVER_CACHE_KEY = 'booklore_covers';
const COVER_CACHE_MISS = 'booklore_covers_miss'; // IDs we already tried and found nothing
function loadCoverCache(): Record<string, string> {
try { return JSON.parse(localStorage.getItem(COVER_CACHE_KEY) || '{}'); } catch { return {}; }
}
function loadMissCache(): Record<string, boolean> {
try { return JSON.parse(localStorage.getItem(COVER_CACHE_MISS) || '{}'); } catch { return {}; }
}
function saveCoverCache(cache: Record<string, string>) {
try { localStorage.setItem(COVER_CACHE_KEY, JSON.stringify(cache)); } catch { /* silent */ }
}
function saveMissCache(cache: Record<string, boolean>) {
try { localStorage.setItem(COVER_CACHE_MISS, JSON.stringify(cache)); } catch { /* silent */ }
}
let resolvedCovers = $state<Record<string, string>>(loadCoverCache());
let missCache = loadMissCache();
function coverUrl(book: BookloreBook): string | null {
const isbn = book.isbn13 || book.isbn10;
if (isbn) return `https://covers.openlibrary.org/b/isbn/${isbn}-M.jpg`;
if (book.googleId) return `https://books.google.com/books/content?id=${book.googleId}&printsec=frontcover&img=1&zoom=1`;
if (resolvedCovers[book.id]) return resolvedCovers[book.id];
return null;
}
async function resolveCoversLazy(booksToResolve: BookloreBook[]) {
// Filter out books we already cached or tried
const todo = booksToResolve.filter(b => !resolvedCovers[b.id] && !missCache[b.id]);
if (todo.length === 0) return;
for (let i = 0; i < todo.length; i += 5) {
const batch = todo.slice(i, i + 5);
await Promise.all(batch.map(async (book) => {
try {
const q = encodeURIComponent(book.title);
const author = book.authors[0] ? `&author=${encodeURIComponent(book.authors[0])}` : '';
const res = await fetch(`https://openlibrary.org/search.json?title=${q}${author}&limit=1&fields=isbn,cover_edition_key`);
if (res.ok) {
const data = await res.json();
const doc = data.docs?.[0];
if (doc) {
const isbn = doc.isbn?.[0];
if (isbn) {
resolvedCovers = { ...resolvedCovers, [book.id]: `https://covers.openlibrary.org/b/isbn/${isbn}-M.jpg` };
saveCoverCache(resolvedCovers);
return;
}
const olid = doc.cover_edition_key;
if (olid) {
resolvedCovers = { ...resolvedCovers, [book.id]: `https://covers.openlibrary.org/b/olid/${olid}-M.jpg` };
saveCoverCache(resolvedCovers);
return;
}
}
}
// No cover found — mark as miss so we don't retry
missCache[book.id] = true;
saveMissCache(missCache);
} catch { /* silent */ }
}));
}
}
</script>
<div class="filter-row">
<div class="search-wrap">
<svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input class="s-input" type="text" placeholder="Search your library..." bind:value={searchQuery} />
</div>
{#if libraries.length > 1}
<div class="lib-pills">
<button class="lib-pill" class:active={selectedLibrary === null} onclick={() => selectedLibrary = null}>All ({books.length})</button>
{#each libraries as lib}
<button class="lib-pill" class:active={selectedLibrary === lib.id} onclick={() => selectedLibrary = selectedLibrary === lib.id ? null : lib.id}>{lib.name}</button>
{/each}
</div>
{/if}
</div>
{#if loading}
<div class="book-grid">
{#each Array(8) as _}
<div class="book-card"><div class="book-cover skeleton"></div><div class="book-info"><div class="skeleton" style="width:80%;height:14px"></div><div class="skeleton" style="width:60%;height:12px;margin-top:6px"></div></div></div>
{/each}
</div>
{:else if filtered().length === 0}
<div class="empty">{searchQuery ? `No books found for "${searchQuery}"` : 'No books in library'}</div>
{:else}
<div class="book-grid">
{#each filtered() as book (book.id)}
{@const cover = coverUrl(book)}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="book-card" onclick={() => openBook(book)}>
<div class="book-cover">
{#if cover}
<img src={cover} alt="" loading="lazy" onerror={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; (e.currentTarget as HTMLImageElement).nextElementSibling?.removeAttribute('style'); }} />
<span class="book-letter" style="display:none">{book.title.charAt(0)}</span>
{:else}
<span class="book-letter">{book.title.charAt(0)}</span>
{/if}
{#if book.format}
<span class="fmt-badge {book.format === 'EPUB' ? 'epub' : book.format === 'PDF' ? 'pdf' : 'other'}">{book.format}</span>
{/if}
</div>
<div class="book-info">
<div class="book-title">{book.title}</div>
<div class="book-author">{book.authors.join(', ') || 'Unknown'}</div>
<div class="book-meta-row">
<span class="book-lib">{book.libraryName}</span>
{#if book.pageCount}<span class="book-pages">{book.pageCount}p</span>{/if}
</div>
</div>
</div>
{/each}
</div>
{/if}
<!-- Book detail modal -->
{#if selectedBook}
{@const cover = coverUrl(selectedBook)}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" onclick={closeBook}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-sheet" onclick={(e) => e.stopPropagation()}>
<div class="modal-header">
<div class="modal-title">Book Details</div>
<button class="modal-close" onclick={closeBook}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body">
<div class="detail-top">
{#if cover}
<img class="detail-cover" src={cover} alt="" />
{:else}
<div class="detail-cover-placeholder">{selectedBook.title.charAt(0)}</div>
{/if}
<div class="detail-info">
<div class="detail-title">{selectedBook.title}</div>
<div class="detail-author">{selectedBook.authors.join(', ') || 'Unknown'}</div>
<div class="detail-meta">
{#if selectedBook.publisher}<span>{selectedBook.publisher}</span>{/if}
{#if selectedBook.pageCount}<span>{selectedBook.pageCount} pages</span>{/if}
</div>
<div class="detail-badges">
{#if selectedBook.format}
<span class="fmt-badge-inline {selectedBook.format === 'EPUB' ? 'epub' : selectedBook.format === 'PDF' ? 'pdf' : 'other'}">{selectedBook.format}</span>
{/if}
<span class="detail-lib">{selectedBook.libraryName}</span>
{#if selectedBook.categories.length > 0}
{#each selectedBook.categories.slice(0, 2) as cat}
<span class="detail-cat">{cat}</span>
{/each}
{/if}
</div>
</div>
</div>
{#if kindleConfigured && kindleTargets.length > 0}
<div class="kindle-section">
<div class="kindle-label">Send to Kindle</div>
<div class="kindle-actions">
{#each kindleTargets as target}
<button class="kindle-btn" onclick={() => sendToKindle(target.id)} disabled={sendingKindle}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
{sendingKindle ? 'Sending...' : target.label}
</button>
{/each}
</div>
{#if kindleResult}
<div class="kindle-result" class:error={kindleResult.startsWith('Error')}>{kindleResult}</div>
{/if}
</div>
{/if}
</div>
</div>
</div>
{/if}
<style>
.filter-row { margin-bottom: var(--sp-5); }
.search-wrap { position: relative; margin-bottom: var(--sp-3); }
.s-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.s-input { width: 100%; padding: 10px 14px 10px 40px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-md); font-family: var(--font); }
.s-input:focus { outline: none; border-color: var(--accent); }
.s-input::placeholder { color: var(--text-4); }
.lib-pills { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lib-pill { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font); transition: all var(--transition); }
.lib-pill:hover { color: var(--text-1); background: var(--card-hover); }
.lib-pill.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.book-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--module-gap); }
.book-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--transition); }
.book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.book-cover { width: 100%; aspect-ratio: 2/3; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-letter { font-size: var(--text-3xl); font-weight: 300; color: var(--text-4); user-select: none; }
.book-info { padding: var(--sp-3) 14px 14px; }
.book-title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-author { font-size: var(--text-sm); color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-meta-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.book-lib { font-size: var(--text-xs); font-weight: 500; padding: 2px var(--sp-2); border-radius: var(--radius-full); background: var(--accent-dim); color: var(--accent); }
.book-pages { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
.empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); }
.skeleton { background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-xs); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.book-card { cursor: pointer; }
.book-cover { position: relative; }
.fmt-badge { position: absolute; top: var(--sp-2); right: var(--sp-2); font-size: var(--text-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.fmt-badge.epub { background: var(--accent-dim); color: var(--accent); }
.fmt-badge.pdf { background: var(--error-dim); color: var(--error); }
.fmt-badge.other { background: var(--card-hover); color: var(--text-3); }
.fmt-badge-inline { font-size: var(--text-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--radius-xs); text-transform: uppercase; }
.fmt-badge-inline.epub { background: var(--accent-dim); color: var(--accent); }
.fmt-badge-inline.pdf { background: var(--error-dim); color: var(--error); }
.fmt-badge-inline.other { background: var(--card-hover); color: var(--text-3); }
/* Modal */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 70; display: flex; align-items: center; justify-content: center; animation: fadeIn 150ms ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet { width: 480px; max-width: 92vw; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-xl); animation: slideUp 200ms ease; }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.modal-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text-1); background: var(--card-hover); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: var(--sp-5); }
.detail-top { display: flex; gap: var(--sp-4); }
.detail-cover { width: 100px; height: 150px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.detail-cover-placeholder { width: 100px; height: 150px; border-radius: var(--radius-md); background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--text-3xl); font-weight: 300; color: var(--text-4); flex-shrink: 0; }
.detail-info { flex: 1; min-width: 0; }
.detail-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); line-height: 1.3; }
.detail-author { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--sp-1); }
.detail-meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--text-4); }
.detail-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.detail-lib { font-size: var(--text-xs); font-weight: 500; padding: 2px var(--sp-2); border-radius: var(--radius-full); background: var(--accent-dim); color: var(--accent); }
.detail-cat { font-size: var(--text-xs); padding: 2px var(--sp-2); border-radius: var(--radius-full); background: var(--card-hover); color: var(--text-3); }
.kindle-section { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.kindle-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: 0.04em; }
.kindle-actions { display: flex; gap: var(--sp-2); }
.kindle-btn { display: flex; align-items: center; gap: var(--sp-1.5); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
.kindle-btn:disabled { opacity: 0.5; cursor: default; }
.kindle-btn:hover:not(:disabled) { opacity: 0.9; }
.kindle-btn svg { width: 14px; height: 14px; }
.kindle-result { font-size: var(--text-sm); margin-top: var(--sp-3); color: var(--success); font-weight: 500; }
.kindle-result.error { color: var(--error); }
@media (max-width: 1024px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
.book-grid { grid-template-columns: repeat(2, 1fr); }
.detail-top { flex-direction: column; align-items: center; text-align: center; }
.detail-info { text-align: center; }
.detail-badges { justify-content: center; }
.kindle-actions { flex-direction: column; }
}
</style>

434
frontend-v2/src/lib/components/media/BookSearch.svelte Normal file
View File

@@ -0,0 +1,434 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
interface Release {
title: string; content_type: string; format: string; size: string;
source: string; source_id: string; info_url: string; language: string;
extra: { author?: string; preview?: string; publisher?: string; year?: string };
}
interface Download {
id: string; title: string; author: string; format: string; source: string;
status: string; status_message: string; progress: number; download_path: string;
content_type: string; added_time: string;
}
interface Library { id: number; name: string; paths: { id: number; path: string }[]; }
let query = $state('');
let results = $state<Release[]>([]);
let bookMeta = $state<{ title: string; authors: string[]; cover_url: string | null } | null>(null);
let searching = $state(false);
let searched = $state(false);
let downloads = $state<Record<string, Download>>({});
let libraries = $state<Library[]>([]);
let defaultLibraryId = $state<number | null>(null);
let downloadingIds = $state<Set<string>>(new Set());
let importingIds = $state<Set<string>>(new Set());
let importedIds = $state<Set<string>>(new Set());
let perBookLibrary = $state<Record<string, number>>({});
let prevCompleted = $state<Set<string>>(new Set());
let activeView = $state<'search' | 'downloads'>('search');
let poll: ReturnType<typeof setInterval> | null = null;
// Kindle auto-send
interface KindleTarget { id: string; label: string; email: string; }
let kindleTargets = $state<KindleTarget[]>([]);
let kindleConfigured = $state(false);
let autoKindleTarget = $state<string>('none');
let kindleSending = $state<Set<string>>(new Set());
let kindleSent = $state<Set<string>>(new Set());
const downloadCount = $derived(Object.keys(downloads).length);
const activeDownloads = $derived(
Object.values(downloads).filter(d => ['queued', 'downloading', 'locating', 'resolving'].includes(d.status))
);
async function search() {
if (!query.trim()) return;
searching = true; searched = true; results = []; bookMeta = null;
try {
const res = await fetch(`/api/books/releases?source=direct_download&query=${encodeURIComponent(query.trim())}&limit=40`, { credentials: 'include' });
if (res.ok) { const data = await res.json(); results = data.releases || []; bookMeta = data.book || null; }
} catch { /* silent */ }
searching = false;
}
async function download(release: Release) {
downloadingIds = new Set([...downloadingIds, release.source_id]);
try {
const res = await fetch('/api/books/releases/download', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ source: release.source, source_id: release.source_id, title: release.title, format: release.format, size: release.size, extra: release.extra })
});
if (res.ok) fetchStatus();
} catch { /* silent */ }
}
async function cancelDownload(id: string) {
try { await fetch(`/api/books/download/${id}/cancel`, { method: 'DELETE', credentials: 'include' }); fetchStatus(); } catch { /* silent */ }
}
async function retryDownload(id: string) {
try { await fetch(`/api/books/download/${id}/retry`, { method: 'POST', credentials: 'include' }); fetchStatus(); } catch { /* silent */ }
}
function getLibraryId(key: string): number | null {
return perBookLibrary[key] ?? defaultLibraryId;
}
async function importToBooklore(dl: Download, libraryId?: number | null) {
const libId = libraryId ?? defaultLibraryId;
if (!libId || importingIds.has(dl.id) || importedIds.has(dl.id)) return;
const lib = libraries.find(l => l.id === libId);
if (!lib || lib.paths.length === 0) return;
importingIds = new Set([...importingIds, dl.id]);
const fileName = dl.download_path?.split('/').pop() || dl.title;
try {
const res = await fetch('/api/booklore/import', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName, libraryId: lib.id, pathId: lib.paths[0].id })
});
if (res.ok) {
importedIds = new Set([...importedIds, dl.id]);
// Auto-send to Kindle if configured
if (autoKindleTarget !== 'none' && fileName && !kindleSent.has(dl.id)) {
sendFileToKindle(dl.id, fileName, dl.title || fileName, autoKindleTarget);
}
}
} catch { /* silent */ }
const next = new Set(importingIds); next.delete(dl.id); importingIds = next;
}
async function sendFileToKindle(dlId: string, filename: string, title: string, target: string) {
if (kindleSending.has(dlId) || kindleSent.has(dlId)) return;
kindleSending = new Set([...kindleSending, dlId]);
try {
const res = await fetch('/api/kindle/send-file', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ filename, title, target }),
});
if (res.ok) { kindleSent = new Set([...kindleSent, dlId]); }
} catch { /* silent */ }
const next = new Set(kindleSending); next.delete(dlId); kindleSending = next;
}
async function fetchStatus() {
try {
const res = await fetch('/api/books/status', { credentials: 'include' });
if (res.ok) {
const data = await res.json();
const all: Record<string, Download> = {};
for (const [groupName, group] of Object.entries(data) as [string, Record<string, Download>][]) {
if (group && typeof group === 'object') {
for (const [id, dl] of Object.entries(group)) {
if (['complete', 'error', 'cancelled'].includes(groupName)) dl.status = groupName;
else if (groupName === 'active') dl.status = dl.status_message?.toLowerCase().includes('download') ? 'downloading' : (dl.status || 'downloading');
all[id] = dl;
}
}
}
if (defaultLibraryId) {
for (const [id, dl] of Object.entries(all)) {
if (dl.status === 'complete' && !prevCompleted.has(id) && !importingIds.has(id) && !importedIds.has(id)) {
importToBooklore(dl, getLibraryId(id));
}
}
}
prevCompleted = new Set(Object.entries(all).filter(([_, d]) => d.status === 'complete').map(([id]) => id));
downloads = all;
}
} catch { /* silent */ }
}
async function fetchLibraries() {
try {
const res = await fetch('/api/booklore/libraries', { credentials: 'include' });
if (res.ok) {
const data = await res.json();
libraries = data.libraries || [];
if (libraries.length > 0 && defaultLibraryId === null) defaultLibraryId = libraries[0].id;
}
} catch { /* silent */ }
}
function coverUrl(release: Release): string | null {
const preview = release.extra?.preview;
if (!preview) return null;
if (preview.startsWith('/api/')) {
return `/api/books${preview.slice(4)}`;
}
return preview;
}
function fmtBadge(fmt: string): string {
const f = fmt?.toLowerCase();
if (f === 'epub') return 'accent'; if (f === 'pdf') return 'error'; if (f === 'mobi' || f === 'azw3') return 'warning'; return 'muted';
}
function statusClass(s: string): string {
if (s === 'complete') return 'success'; if (s === 'downloading' || s === 'locating' || s === 'resolving' || s === 'queued') return 'accent'; if (s === 'error') return 'error'; return 'muted';
}
onMount(async () => {
await fetchLibraries();
// Load Kindle targets
try {
const kRes = await fetch('/api/kindle/targets', { credentials: 'include' });
if (kRes.ok) { const kData = await kRes.json(); kindleTargets = kData.targets || []; kindleConfigured = kData.configured || false; }
} catch { /* silent */ }
const res = await fetch('/api/books/status', { credentials: 'include' }).catch(() => null);
if (res?.ok) {
const data = await res.json();
const ids: string[] = [];
for (const group of Object.values(data) as Record<string, Download>[]) {
if (group && typeof group === 'object') { for (const [id, dl] of Object.entries(group)) { if (dl.status === 'complete') ids.push(id); } }
}
prevCompleted = new Set(ids);
}
fetchStatus();
poll = setInterval(fetchStatus, 3000);
});
onDestroy(() => { if (poll) clearInterval(poll); });
</script>
<!-- Sub-tabs -->
<div class="sub-tabs">
<button class="sub-tab" class:active={activeView === 'search'} onclick={() => activeView = 'search'}>Search</button>
<button class="sub-tab" class:active={activeView === 'downloads'} onclick={() => activeView = 'downloads'}>
Downloads
{#if activeDownloads.length > 0}<span class="sub-badge">{activeDownloads.length}</span>{/if}
</button>
</div>
{#if kindleConfigured && kindleTargets.length > 0}
<div class="kindle-auto-row">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<span class="kindle-auto-label">After download, also send to</span>
<select class="kindle-auto-select" bind:value={autoKindleTarget}>
<option value="none">No one (just download)</option>
{#each kindleTargets as t}
<option value={t.id}>{t.label}</option>
{/each}
</select>
</div>
{/if}
{#if activeView === 'search'}
<!-- Search -->
<div class="search-bar">
<div class="search-wrap">
<svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input class="s-input" type="text" placeholder="Search books, authors, ISBNs..." bind:value={query} onkeydown={(e) => { if (e.key === 'Enter') search(); }} />
{#if query}
<button class="s-clear" onclick={() => { query = ''; results = []; searched = false; bookMeta = null; }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
{/if}
</div>
<button class="s-btn" onclick={search} disabled={searching || !query.trim()}>
{#if searching}<span class="spinner"></span>{:else}Search{/if}
</button>
</div>
{#if searching}
<div class="empty">Searching Anna's Archive, Libgen, Z-Library...</div>
{:else if searched && results.length === 0}
<div class="empty">No results found for "{query}"</div>
{:else if results.length > 0}
{#if bookMeta}<div class="result-count">{results.length} releases found</div>{/if}
<div class="results-grid">
{#each results as release (release.source_id)}
{@const cover = coverUrl(release)}
{@const isDl = downloadingIds.has(release.source_id) || !!downloads[release.source_id]}
<div class="r-card">
<div class="r-cover">
{#if cover}
<img src={cover} alt="" loading="lazy" onerror={(e) => (e.currentTarget as HTMLImageElement).style.display='none'} />
{/if}
<span class="fmt-badge {fmtBadge(release.format)}">{release.format.toUpperCase()}</span>
</div>
<div class="r-info">
<div class="r-title">{release.title}</div>
{#if release.extra?.author}<div class="r-author">{release.extra.author}</div>{/if}
<div class="r-meta">
{#if release.extra?.year}<span>{release.extra.year}</span>{/if}
{#if release.size}<span>{release.size}</span>{/if}
{#if release.language}<span>{release.language.toUpperCase()}</span>{/if}
</div>
</div>
<div class="r-actions">
{#if libraries.length > 0}
<select class="lib-select" value={perBookLibrary[release.source_id] ?? defaultLibraryId} onchange={(e) => { perBookLibrary[release.source_id] = Number((e.currentTarget as HTMLSelectElement).value); perBookLibrary = {...perBookLibrary}; }}>
{#each libraries as lib}<option value={lib.id}>{lib.name}</option>{/each}
</select>
{/if}
{#if isDl}
{@const dl = downloads[release.source_id]}
{#if dl}
<span class="dl-badge {statusClass(dl.status)}">{dl.status}</span>
{#if dl.progress > 0 && dl.progress < 100}
<div class="dl-bar"><div class="dl-fill" style="width:{dl.progress}%"></div></div>
{/if}
{:else}
<span class="dl-badge muted">Queued...</span>
{/if}
{:else}
<button class="dl-btn" onclick={() => download(release)}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Download
</button>
{/if}
</div>
</div>
{/each}
</div>
{:else}
<div class="empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="width:64px;height:64px;opacity:0.2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<div>Search for books</div>
<div class="empty-sub">Anna's Archive, Libgen, Z-Library</div>
</div>
{/if}
{:else}
<!-- Downloads -->
{#if downloadCount === 0}
<div class="empty">No downloads yet</div>
{:else}
<div class="dl-list">
{#each Object.entries(downloads) as [id, dl] (id)}
<div class="dl-row">
<div class="dl-info">
<div class="dl-title">{dl.title || id}</div>
{#if dl.author}<div class="dl-author">{dl.author}</div>{/if}
<div class="dl-meta-row">
{#if dl.format}<span class="fmt-badge sm {fmtBadge(dl.format)}">{dl.format.toUpperCase()}</span>{/if}
<span class="dl-badge {statusClass(dl.status)}">{dl.status}</span>
{#if dl.status_message}<span class="dl-msg">{dl.status_message}</span>{/if}
</div>
{#if dl.status === 'downloading' && dl.progress > 0}
<div class="dl-bar full"><div class="dl-fill" style="width:{dl.progress}%"></div></div>
{/if}
</div>
<div class="dl-actions">
{#if dl.status === 'complete'}
{#if kindleSent.has(id)}
<span class="dl-badge success">Sent to Kindle ✓</span>
{:else if kindleSending.has(id)}
<span class="dl-badge accent">Sending to Kindle...</span>
{/if}
{#if importedIds.has(id)}
<span class="dl-badge success">Imported ✓</span>
{:else if importingIds.has(id)}
<span class="dl-badge accent">Importing...</span>
{:else}
{#if libraries.length > 0}
<select class="lib-select" value={perBookLibrary[id] ?? defaultLibraryId} onchange={(e) => { perBookLibrary[id] = Number((e.currentTarget as HTMLSelectElement).value); perBookLibrary = {...perBookLibrary}; }}>
{#each libraries as lib}<option value={lib.id}>{lib.name}</option>{/each}
</select>
{/if}
<button class="action-btn" onclick={() => importToBooklore(dl, getLibraryId(id))}>Import</button>
{/if}
{:else if dl.status === 'error'}
<button class="action-btn" onclick={() => retryDownload(id)}>Retry</button>
<button class="action-btn danger" onclick={() => cancelDownload(id)}>Remove</button>
{:else if ['queued', 'downloading', 'locating', 'resolving'].includes(dl.status)}
<button class="action-btn danger" onclick={() => cancelDownload(id)}>Cancel</button>
{:else}
<button class="action-btn danger" onclick={() => cancelDownload(id)}>Remove</button>
{/if}
</div>
</div>
{/each}
</div>
{/if}
{/if}
<style>
.sub-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.sub-tab { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font); transition: all var(--transition); display: flex; align-items: center; gap: var(--sp-1.5); }
.sub-tab:hover { color: var(--text-1); background: var(--card-hover); }
.sub-tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.sub-badge { font-size: var(--text-xs); font-family: var(--mono); background: var(--accent); color: white; padding: 1px 6px; border-radius: var(--radius-xs); }
.search-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); align-items: stretch; }
.search-wrap { flex: 1; position: relative; }
.s-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.s-input { width: 100%; height: 42px; padding: 0 36px 0 40px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-base); font-family: var(--font); transition: all var(--transition); box-sizing: border-box; }
.s-input:focus { outline: none; border-color: var(--accent); }
.s-input::placeholder { color: var(--text-4); }
.s-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); }
.s-clear svg { width: 14px; height: 14px; }
.s-btn { height: 42px; padding: 0 var(--sp-5); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); white-space: nowrap; }
.s-btn:disabled { opacity: 0.4; cursor: default; }
.s-btn:hover:not(:disabled) { opacity: 0.9; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.empty-sub { font-size: var(--text-sm); color: var(--text-4); }
.result-count { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.r-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.r-cover { position: relative; width: 100%; aspect-ratio: 3/2; background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.r-cover img { width: 100%; height: 100%; object-fit: cover; }
.fmt-badge { position: absolute; top: var(--sp-2); right: var(--sp-2); font-size: var(--text-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.fmt-badge.accent { background: var(--accent-dim); color: var(--accent); }
.fmt-badge.error { background: var(--error-dim); color: var(--error); }
.fmt-badge.warning { background: var(--warning-bg); color: var(--warning); }
.fmt-badge.muted { background: var(--card-hover); color: var(--text-4); }
.fmt-badge.sm { position: static; }
.r-info { padding: var(--sp-3) var(--sp-4); flex: 1; }
.r-title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-author { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; }
.r-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--text-4); }
.r-actions { padding: var(--sp-2) var(--sp-4) var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.lib-select { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: var(--text-xs); font-family: var(--font); cursor: pointer; max-width: 120px; }
.dl-btn { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1.5) var(--sp-3); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
.dl-btn:hover { opacity: 0.9; }
.dl-btn svg { width: 14px; height: 14px; }
.dl-badge { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-xs); text-transform: uppercase; }
.dl-badge.success { background: var(--success-dim); color: var(--success); }
.dl-badge.accent { background: var(--accent-dim); color: var(--accent); }
.dl-badge.error { background: var(--error-dim); color: var(--error); }
.dl-badge.muted { background: var(--card-hover); color: var(--text-4); }
.dl-bar { width: 80px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.dl-bar.full { width: 100%; margin-top: var(--sp-2); }
.dl-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }
.dl-list { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.dl-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.dl-row:last-child { border-bottom: none; }
.dl-info { flex: 1; min-width: 0; }
.dl-title { font-size: var(--text-base); font-weight: 500; color: var(--text-1); }
.dl-author { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; }
.dl-meta-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.dl-msg { font-size: var(--text-xs); color: var(--text-4); }
.dl-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
.action-btn { padding: var(--sp-1.5) var(--sp-3); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); }
.action-btn.danger { background: none; border: 1px solid var(--error); color: var(--error); }
.action-btn.danger:hover { background: var(--error-dim); }
.kindle-auto-row {
display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4);
padding: var(--sp-2) var(--sp-3); background: var(--surface-secondary); border-radius: var(--radius-md); border: 1px solid var(--border);
}
.kindle-auto-row svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.kindle-auto-label { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.kindle-auto-select {
height: 32px; padding: 0 var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border);
background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-weight: 500; font-family: var(--font);
cursor: pointer; -webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px;
}
@media (max-width: 768px) {
.results-grid { grid-template-columns: 1fr; }
.dl-row { flex-direction: column; }
.dl-actions { width: 100%; }
}
</style>

276
frontend-v2/src/lib/components/media/MusicSearch.svelte Normal file
View File

@@ -0,0 +1,276 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
interface MusicTrack {
id: string; name: string; artists: { name: string }[];
album: { name: string; images: { url: string }[] };
duration_ms: number; type: string;
images?: { url: string }[]; owner?: { display_name: string };
tracks?: { total: number }; total_tracks?: number; release_date?: string; genres?: string[];
}
interface MusicTask {
task_id: string; status: string; download_type: string;
name?: string; artist?: string; progress?: number;
total_items?: number; completed_items?: number; speed?: string; eta?: string; error_message?: string;
}
let query = $state('');
let searchType = $state<'track' | 'album' | 'artist' | 'playlist'>('track');
let results = $state<MusicTrack[]>([]);
let tasks = $state<MusicTask[]>([]);
let searching = $state(false);
let searched = $state(false);
let downloading = $state<Set<string>>(new Set());
let activeView = $state<'search' | 'downloads'>('search');
let playingId = $state<string | null>(null);
let playingEmbed = $state<string | null>(null);
let poll: ReturnType<typeof setInterval> | null = null;
const activeTasks = $derived(tasks.filter(t => ['downloading', 'queued'].includes(t.status)));
function artistNames(t: MusicTrack): string { return t.artists?.map(a => a.name).join(', ') || ''; }
function albumArt(t: MusicTrack): string | null { return t.album?.images?.[0]?.url || t.images?.[0]?.url || null; }
function fmtDuration(ms: number): string { const m = Math.floor(ms / 60000); const s = Math.floor((ms % 60000) / 1000); return `${m}:${s.toString().padStart(2, '0')}`; }
async function search() {
if (!query.trim()) return;
searching = true; searched = true; results = [];
try {
const res = await fetch(`/api/music/api/search?q=${encodeURIComponent(query.trim())}&search_type=${searchType}&limit=30`, { credentials: 'include' });
if (res.ok) { const data = await res.json(); results = data.items || []; }
} catch { /* silent */ }
searching = false;
}
async function downloadItem(id: string, type: string) {
downloading = new Set([...downloading, id]);
try {
await fetch(`/api/music/api/${type}/download/${id}`, { credentials: 'include' });
fetchTasks();
} catch { /* silent */ }
}
async function fetchTasks() {
try {
const res = await fetch('/api/music/api/prgs/list', { credentials: 'include' });
if (res.ok) { const data = await res.json(); tasks = Array.isArray(data) ? data : (data.tasks || []); }
} catch { /* silent */ }
}
async function cancelTask(taskId: string) {
try { await fetch(`/api/music/api/prgs/cancel/${taskId}`, { method: 'POST', credentials: 'include' }); fetchTasks(); } catch { /* silent */ }
}
function togglePlay(id: string) {
if (playingId === id) { playingId = null; playingEmbed = null; }
else { playingId = id; playingEmbed = `https://open.spotify.com/embed/track/${id}?utm_source=generator&theme=0`; }
}
onMount(() => { fetchTasks(); poll = setInterval(fetchTasks, 3000); });
onDestroy(() => { if (poll) clearInterval(poll); });
</script>
<!-- Sub-tabs -->
<div class="sub-tabs">
<button class="sub-tab" class:active={activeView === 'search'} onclick={() => activeView = 'search'}>Search</button>
<button class="sub-tab" class:active={activeView === 'downloads'} onclick={() => activeView = 'downloads'}>
Downloads
{#if activeTasks.length > 0}<span class="sub-badge">{activeTasks.length}</span>{/if}
</button>
</div>
{#if activeView === 'search'}
<div class="search-bar">
<select class="type-select" bind:value={searchType}>
<option value="track">Tracks</option>
<option value="album">Albums</option>
<option value="artist">Artists</option>
<option value="playlist">Playlists</option>
</select>
<div class="search-wrap">
<svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input class="s-input" type="text" placeholder="Search songs, albums, artists..." bind:value={query} onkeydown={(e) => { if (e.key === 'Enter') search(); }} />
</div>
<button class="s-btn" onclick={search} disabled={searching || !query.trim()}>
{#if searching}<span class="spinner"></span>{:else}Search{/if}
</button>
</div>
{#if searching}
<div class="empty">Searching Spotify...</div>
{:else if searched && results.length === 0}
<div class="empty">No results for "{query}"</div>
{:else if results.length > 0}
{#if searchType === 'track'}
{#if playingEmbed}
<div class="player-wrap">
<iframe src={playingEmbed} width="100%" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media" title="Spotify player"></iframe>
</div>
{/if}
<div class="track-list">
{#each results as track (track.id)}
{@const art = albumArt(track)}
<div class="track-row">
<button class="play-btn" onclick={() => togglePlay(track.id)}>
{#if playingId === track.id}
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
{:else}
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
{/if}
</button>
{#if art}<img class="track-art" src={art} alt="" loading="lazy" />{/if}
<div class="track-info">
<div class="track-name">{track.name}</div>
<div class="track-artist">{artistNames(track)}{track.album?.name ? ` · ${track.album.name}` : ''}</div>
</div>
<span class="track-dur">{track.duration_ms ? fmtDuration(track.duration_ms) : ''}</span>
{#if downloading.has(track.id)}
<span class="dl-badge accent">Queued</span>
{:else}
<button class="dl-sm-btn" onclick={() => downloadItem(track.id, 'track')}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</button>
{/if}
</div>
{/each}
</div>
{:else}
<div class="card-grid">
{#each results as item (item.id)}
{@const art = albumArt(item)}
<div class="m-card">
<div class="m-card-img" class:round={searchType === 'artist'}>
{#if art}<img src={art} alt="" loading="lazy" />{:else}<div class="m-card-placeholder">♪</div>{/if}
</div>
<div class="m-card-name">{item.name}</div>
<div class="m-card-sub">
{#if searchType === 'playlist'}{item.owner?.display_name || ''}{item.tracks?.total ? ` · ${item.tracks.total} tracks` : ''}
{:else if searchType === 'album'}{artistNames(item)}{item.release_date ? ` · ${item.release_date.slice(0, 4)}` : ''}
{:else}{item.genres?.slice(0, 2).join(', ') || 'Artist'}{/if}
</div>
<button class="dl-card-btn" onclick={() => downloadItem(item.id, searchType)} disabled={downloading.has(item.id)}>
{downloading.has(item.id) ? 'Queued' : 'Download'}
</button>
</div>
{/each}
</div>
{/if}
{:else}
<div class="empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="width:64px;height:64px;opacity:0.2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
<div>Search for music</div>
<div class="empty-sub">Spotify tracks, albums, playlists</div>
</div>
{/if}
{:else}
<!-- Download Tasks -->
{#if tasks.length === 0}
<div class="empty">No music downloads</div>
{:else}
<div class="task-list">
{#each tasks as task (task.task_id)}
<div class="task-row">
<div class="task-info">
<div class="task-name">{task.name || task.task_id}</div>
{#if task.artist}<div class="task-artist">{task.artist}</div>{/if}
<div class="task-meta">
<span class="dl-badge {task.status === 'downloading' ? 'accent' : task.status === 'completed' ? 'success' : task.status === 'error' ? 'error' : 'muted'}">{task.status}</span>
{#if task.completed_items != null && task.total_items}<span class="task-progress-text">{task.completed_items}/{task.total_items} tracks</span>{/if}
{#if task.speed}<span class="task-speed">{task.speed}</span>{/if}
{#if task.eta}<span class="task-eta">ETA {task.eta}</span>{/if}
{#if task.error_message}<span class="task-error">{task.error_message}</span>{/if}
</div>
{#if task.progress != null && task.progress > 0}
<div class="dl-bar full"><div class="dl-fill" style="width:{task.progress}%"></div></div>
{/if}
</div>
{#if ['downloading', 'queued'].includes(task.status)}
<button class="action-btn danger" onclick={() => cancelTask(task.task_id)}>Cancel</button>
{/if}
</div>
{/each}
</div>
{/if}
{/if}
<style>
.sub-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.sub-tab { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font); transition: all var(--transition); display: flex; align-items: center; gap: var(--sp-1.5); }
.sub-tab:hover { color: var(--text-1); background: var(--card-hover); }
.sub-tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.sub-badge { font-size: var(--text-xs); font-family: var(--mono); background: var(--accent); color: white; padding: 1px 6px; border-radius: var(--radius-xs); }
.search-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); align-items: stretch; }
.type-select { height: 42px; padding: 0 var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-weight: 500; font-family: var(--font); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.type-select:focus { outline: none; border-color: var(--accent); }
.search-wrap { flex: 1; position: relative; }
.s-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.s-input { width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-base); font-family: var(--font); box-sizing: border-box; }
.s-input:focus { outline: none; border-color: var(--accent); }
.s-input::placeholder { color: var(--text-4); }
.s-btn { height: 42px; padding: 0 var(--sp-5); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.s-btn:disabled { opacity: 0.4; cursor: default; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.empty-sub { font-size: var(--text-sm); color: var(--text-4); }
.player-wrap { margin-bottom: var(--sp-3); border-radius: var(--radius); overflow: hidden; }
.track-list { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.track-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); transition: background var(--transition); }
.track-row:last-child { border-bottom: none; }
.track-row:hover { background: var(--card-hover); }
.play-btn { width: 32px; height: 32px; border-radius: var(--radius-full); background: none; border: none; cursor: pointer; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--transition); }
.play-btn:hover { color: var(--accent); }
.play-btn svg { width: 16px; height: 16px; }
.track-art { width: 40px; height: 40px; border-radius: var(--radius-xs); object-fit: cover; flex-shrink: 0; }
.track-info { flex: 1; min-width: 0; }
.track-name { font-size: var(--text-base); font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-dur { font-size: var(--text-sm); font-family: var(--mono); color: var(--text-4); flex-shrink: 0; }
.dl-sm-btn { width: 32px; height: 32px; border-radius: var(--radius-md); background: none; border: 1px solid var(--border); cursor: pointer; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition); }
.dl-sm-btn:hover { color: var(--accent); border-color: var(--accent); }
.dl-sm-btn svg { width: 14px; height: 14px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-4); }
.m-card { text-align: center; }
.m-card-img { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-secondary); margin-bottom: var(--sp-2); }
.m-card-img.round { border-radius: var(--radius-full); }
.m-card-img img { width: 100%; height: 100%; object-fit: cover; }
.m-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--text-3xl); color: var(--text-4); }
.m-card-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-card-sub { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.dl-card-btn { margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-xs); font-weight: 600; cursor: pointer; font-family: var(--font); }
.dl-card-btn:disabled { opacity: 0.4; }
.dl-badge { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-xs); text-transform: uppercase; }
.dl-badge.success { background: var(--success-dim); color: var(--success); }
.dl-badge.accent { background: var(--accent-dim); color: var(--accent); }
.dl-badge.error { background: var(--error-dim); color: var(--error); }
.dl-badge.muted { background: var(--card-hover); color: var(--text-4); }
.task-list { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.task-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-info { flex: 1; min-width: 0; }
.task-name { font-size: var(--text-base); font-weight: 500; color: var(--text-1); }
.task-artist { font-size: var(--text-sm); color: var(--text-3); margin-top: 2px; }
.task-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.task-progress-text { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-3); }
.task-speed { font-size: var(--text-xs); color: var(--text-4); }
.task-eta { font-size: var(--text-xs); color: var(--text-4); }
.task-error { font-size: var(--text-xs); color: var(--error); }
.dl-bar { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: var(--sp-2); }
.dl-bar.full { width: 100%; }
.dl-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }
.action-btn { padding: var(--sp-1.5) var(--sp-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); flex-shrink: 0; }
.action-btn.danger { background: none; border: 1px solid var(--error); color: var(--error); }
@media (max-width: 768px) {
.search-bar { flex-wrap: wrap; }
.type-select { width: 100%; }
.card-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>

161
frontend-v2/src/lib/components/shared/ActionCard.svelte Normal file
View File

@@ -0,0 +1,161 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { cn } from '$lib/utils';
type Variant = 'budget' | 'inventory' | 'fitness';
type Size = 'primary' | 'secondary';
let {
title,
description = '',
action,
variant,
size = 'primary' as Size,
icon,
onclick
}: {
title: string;
description?: string;
action: string;
variant: Variant;
size?: Size;
icon?: Snippet;
onclick?: () => void;
} = $props();
const variantClasses: Record<Variant, string> = {
budget: 'action-card-icon--budget',
inventory: 'action-card-icon--inventory',
fitness: 'action-card-icon--fitness'
};
</script>
<button
class={cn('action-card', size === 'secondary' && 'action-card--secondary')}
onclick={onclick}
type="button"
>
<div class="action-card-left">
<div class={cn('action-card-icon', variantClasses[variant])}>
{#if icon}
{@render icon()}
{/if}
</div>
<div>
<div class={cn('action-card-title', size === 'secondary' && 'action-card-title--sm')}>
{title}
</div>
{#if description}
<div class={cn('action-card-desc', size === 'secondary' && 'action-card-desc--sm')}>
{description}
</div>
{/if}
</div>
</div>
<div class="action-card-right">
<span>{action}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/>
</svg>
</div>
</button>
<style>
.action-card {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--radius, 12px);
background: var(--card);
box-shadow: var(--card-shadow);
transition: all var(--transition, 180ms ease);
cursor: pointer;
border: 1px solid var(--border);
padding: 20px 24px;
width: 100%;
text-align: left;
font-family: var(--font);
}
.action-card:hover {
transform: translateY(-1px);
box-shadow: var(--card-shadow), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.action-card--secondary {
padding: 14px 20px;
background: var(--card-secondary);
box-shadow: var(--card-shadow-sm);
}
.action-card-left {
display: flex;
align-items: center;
gap: 14px;
}
.action-card-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.action-card-icon :global(svg) {
width: 20px;
height: 20px;
}
.action-card-icon--budget {
background: var(--accent-bg);
color: var(--accent);
}
.action-card-icon--inventory {
background: var(--error-bg);
color: var(--error);
}
.action-card-icon--fitness {
background: var(--success-bg);
color: var(--success);
}
.action-card-title {
font-size: var(--text-md);
font-weight: 600;
color: var(--text-1);
}
.action-card-title--sm {
font-size: var(--text-base);
font-weight: 500;
}
.action-card-desc {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: 2px;
}
.action-card-desc--sm {
font-size: var(--text-sm);
}
.action-card-right {
font-size: var(--text-sm);
color: var(--text-3);
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.action-card-right svg {
width: 16px;
height: 16px;
}
</style>

61
frontend-v2/src/lib/components/shared/EmptyState.svelte Normal file
View File

@@ -0,0 +1,61 @@
<script lang="ts">
import type { Snippet } from 'svelte';
let {
icon,
title,
description = ''
}: {
icon?: Snippet;
title: string;
description?: string;
} = $props();
</script>
<div class="empty-state">
{#if icon}
<div class="empty-state-icon">
{@render icon()}
</div>
{/if}
<h3 class="empty-state-title">{title}</h3>
{#if description}
<p class="empty-state-desc">{description}</p>
{/if}
</div>
<style>
.empty-state {
text-align: center;
padding: var(--sp-12) var(--sp-6);
}
.empty-state-icon {
margin: 0 auto var(--sp-4);
width: 48px;
height: 48px;
border-radius: var(--radius);
background: var(--card-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.empty-state-icon :global(svg) {
width: 24px;
height: 24px;
color: var(--text-4);
}
.empty-state-title {
font-size: var(--text-md);
font-weight: 500;
color: var(--text-2);
margin-bottom: 4px;
}
.empty-state-desc {
font-size: var(--text-sm);
color: var(--text-3);
}
</style>

250
frontend-v2/src/lib/components/shared/ImmichPicker.svelte Normal file
View File

@@ -0,0 +1,250 @@
<script lang="ts">
import { onMount } from 'svelte';
interface ImmichAsset {
id: string;
type: string;
fileCreatedAt: string;
}
let {
open = $bindable(false),
multiple = true,
onselect
}: {
open: boolean;
multiple?: boolean;
onselect: (assetIds: string[]) => void;
} = $props();
let assets = $state<ImmichAsset[]>([]);
let loading = $state(true);
let currentPage = $state(1);
let hasMore = $state(true);
let selected = $state<Set<string>>(new Set());
let searchQuery = $state('');
let searchTimer: ReturnType<typeof setTimeout>;
let errorMsg = $state('');
async function loadAssets(reset = false) {
if (reset) { currentPage = 1; hasMore = true; assets = []; }
loading = true;
errorMsg = '';
try {
const body: Record<string, unknown> = {
type: 'IMAGE',
size: 20,
page: reset ? 1 : currentPage,
order: 'desc'
};
if (searchQuery.trim()) {
body.originalFileName = searchQuery.trim();
}
const res = await fetch('/api/immich/search/metadata', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(body)
});
if (res.ok) {
const data = await res.json();
const items = data.assets?.items || [];
assets = reset ? items : [...assets, ...items];
hasMore = items.length === 20;
currentPage = (reset ? 1 : currentPage) + 1;
} else {
errorMsg = 'Failed to load photos (' + res.status + ')';
}
} catch {
errorMsg = 'Could not connect to photo library';
}
finally { loading = false; }
}
function toggleSelect(id: string) {
const next = new Set(selected);
if (next.has(id)) next.delete(id);
else { if (!multiple) next.clear(); next.add(id); }
selected = next;
}
function confirmSelection() {
onselect(Array.from(selected));
selected = new Set();
open = false;
}
function close() {
selected = new Set();
open = false;
}
function onSearch() {
clearTimeout(searchTimer);
searchTimer = setTimeout(() => loadAssets(true), 400);
}
// Load photos as soon as this component mounts
onMount(() => { loadAssets(true); });
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="immich-overlay" onclick={close}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="immich-modal" onclick={(e) => e.stopPropagation()}>
<div class="immich-header">
<div class="immich-title">Choose from Photos</div>
<button class="immich-close" onclick={close} aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="immich-search">
<input type="text" class="immich-search-input" placeholder="Search photos..." bind:value={searchQuery} oninput={onSearch} />
</div>
<div class="immich-grid">
{#each assets as asset (asset.id)}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="immich-thumb" class:selected={selected.has(asset.id)} onclick={() => toggleSelect(asset.id)}>
<img src="/api/immich/assets/{asset.id}/thumbnail" alt="" loading="lazy" />
{#if selected.has(asset.id)}
<div class="immich-check">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
{/if}
</div>
{/each}
{#if loading}
{#each Array(8) as _}
<div class="immich-thumb skeleton"></div>
{/each}
{/if}
{#if !loading && assets.length === 0 && !errorMsg}
<div class="immich-empty">No photos found</div>
{/if}
{#if errorMsg}
<div class="immich-empty">{errorMsg}</div>
{/if}
</div>
{#if hasMore && !loading && assets.length > 0}
<button class="immich-load-more" onclick={() => loadAssets()}>Load more</button>
{/if}
<div class="immich-footer">
<span class="immich-count">{selected.size} selected</span>
<div class="immich-actions">
<button class="immich-btn-cancel" onclick={close}>Cancel</button>
<button class="immich-btn-confirm" onclick={confirmSelection} disabled={selected.size === 0}>
Use {selected.size} photo{selected.size !== 1 ? 's' : ''}
</button>
</div>
</div>
</div>
</div>
<style>
.immich-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 70;
display: flex; align-items: center; justify-content: center;
animation: imFadeIn 150ms ease;
}
@keyframes imFadeIn { from { opacity: 0; } to { opacity: 1; } }
.immich-modal {
background: var(--surface); border-radius: 16px;
width: 560px; max-width: 95vw; max-height: 85vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
animation: imSlideUp 200ms ease;
}
@keyframes imSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.immich-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.immich-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
.immich-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 4px; border-radius: 6px; transition: all 0.15s; }
.immich-close:hover { color: var(--text-1); background: var(--card-hover); }
.immich-close svg { width: 18px; height: 18px; }
.immich-search { padding: 12px 20px 0; }
.immich-search-input {
width: 100%; padding: 10px 14px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface-secondary);
color: var(--text-1); font-size: var(--text-md); font-family: var(--font);
}
.immich-search-input:focus { outline: none; border-color: var(--accent); }
.immich-search-input::placeholder { color: var(--text-4); }
.immich-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
padding: 12px 20px; overflow-y: auto; flex: 1; min-height: 200px;
}
.immich-thumb {
aspect-ratio: 1; border-radius: 8px; overflow: hidden;
cursor: pointer; position: relative; background: var(--card-hover);
transition: transform 0.1s;
}
.immich-thumb:hover { transform: scale(0.97); }
.immich-thumb.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.immich-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.immich-check {
position: absolute; top: 6px; right: 6px;
width: 24px; height: 24px; border-radius: 50%;
background: var(--accent); color: white;
display: flex; align-items: center; justify-content: center;
}
.immich-check svg { width: 14px; height: 14px; }
.immich-thumb.skeleton {
background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.immich-empty {
grid-column: 1 / -1; text-align: center; padding: 40px;
color: var(--text-3); font-size: var(--text-base);
}
.immich-load-more {
display: block; margin: 0 auto 8px; padding: 8px 20px;
border-radius: 8px; background: none; border: 1px solid var(--border);
font-size: var(--text-sm); font-weight: 500; color: var(--text-2);
cursor: pointer; font-family: var(--font); transition: all 0.15s;
}
.immich-load-more:hover { background: var(--card-hover); }
.immich-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-top: 1px solid var(--border);
}
.immich-count { font-size: var(--text-sm); color: var(--text-3); }
.immich-actions { display: flex; gap: 8px; }
.immich-btn-cancel {
padding: 8px 16px; border-radius: 8px; background: var(--card-secondary);
color: var(--text-2); border: 1px solid var(--border); font-size: var(--text-sm);
font-weight: 500; cursor: pointer; font-family: var(--font); transition: all 0.15s;
}
.immich-btn-cancel:hover { background: var(--card-hover); }
.immich-btn-confirm {
padding: 8px 16px; border-radius: 8px; background: var(--accent);
color: white; border: none; font-size: var(--text-sm); font-weight: 600;
cursor: pointer; font-family: var(--font); transition: opacity 0.15s;
}
.immich-btn-confirm:hover { opacity: 0.9; }
.immich-btn-confirm:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 768px) {
.immich-modal { max-height: 90vh; border-radius: 16px 16px 0 0; align-self: flex-end; width: 100%; max-width: 100%; }
.immich-grid { grid-template-columns: repeat(3, 1fr); }
}
</style>

69
frontend-v2/src/lib/components/shared/ModuleCard.svelte Normal file
View File

@@ -0,0 +1,69 @@
<script lang="ts">
import type { Snippet } from 'svelte';
let {
title,
action = '',
onaction,
children
}: {
title: string;
action?: string;
onaction?: () => void;
children: Snippet;
} = $props();
</script>
<div class="module">
<div class="module-header">
<h3 class="module-title">{title}</h3>
{#if action}
<button class="module-action" onclick={onaction} type="button">
{action}
</button>
{/if}
</div>
<div class="module-content">
{@render children()}
</div>
</div>
<style>
.module {
background: var(--card);
border-radius: var(--radius, 12px);
padding: var(--card-pad-primary, 20px);
box-shadow: var(--card-shadow);
border: 1px solid var(--border);
}
.module-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-5);
}
.module-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.module-action {
font-size: var(--text-sm);
color: var(--accent);
font-weight: 500;
cursor: pointer;
background: none;
border: none;
font-family: var(--font);
padding: 0;
}
.module-action:hover {
text-decoration: underline;
}
</style>

47
frontend-v2/src/lib/components/shared/PageHeader.svelte Normal file
View File

@@ -0,0 +1,47 @@
<script lang="ts">
let {
label,
title,
subtitle = ''
}: {
label: string;
title: string;
subtitle?: string;
} = $props();
</script>
<div class="page-header">
<p class="page-label">{label}</p>
<h1 class="page-title">{title}</h1>
{#if subtitle}
<p class="page-subtitle">{subtitle}</p>
{/if}
</div>
<style>
.page-header {
margin-bottom: var(--section-gap, 24px);
}
.page-label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--sp-1);
}
.page-title {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: 1.2;
}
.page-subtitle {
font-size: var(--text-base);
color: var(--text-3);
margin-top: var(--sp-1);
}
</style>

76
frontend-v2/src/lib/components/shared/PageTabs.svelte Normal file
View File

@@ -0,0 +1,76 @@
<script lang="ts">
import { cn } from '$lib/utils';
type Tab = {
label: string;
badge?: number;
active?: boolean;
};
let {
tabs,
onselect
}: {
tabs: Tab[];
onselect?: (index: number) => void;
} = $props();
</script>
<div class="page-tabs">
{#each tabs as tab, index}
<button
class={cn('page-tab', tab.active && 'page-tab--active')}
onclick={() => onselect?.(index)}
type="button"
>
{tab.label}
{#if tab.badge !== undefined}
<span class="badge">{tab.badge}</span>
{/if}
</button>
{/each}
</div>
<style>
.page-tabs {
display: flex;
gap: var(--sp-1);
margin-bottom: var(--section-gap, 24px);
}
.page-tab {
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-sm, 8px);
font-size: var(--text-base);
font-weight: 500;
color: var(--text-3);
background: none;
border: none;
transition: all var(--transition, 180ms ease);
cursor: pointer;
font-family: var(--font);
display: inline-flex;
align-items: center;
}
.page-tab:hover {
color: var(--text-1);
background: var(--card-secondary);
}
.page-tab--active {
color: var(--text-1);
background: var(--card);
box-shadow: var(--card-shadow-sm);
}
.badge {
font-size: var(--text-xs);
font-family: var(--mono);
background: var(--accent-dim);
color: var(--accent);
padding: 1px 6px;
border-radius: var(--radius-xs);
margin-left: var(--sp-1.5);
}
</style>

66
frontend-v2/src/lib/components/shared/SearchBar.svelte Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts">
let {
placeholder = 'Search...',
value = $bindable('')
}: {
placeholder?: string;
value?: string;
} = $props();
</script>
<div class="search-bar">
<div class="input-with-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
<input
class="input"
type="text"
{placeholder}
bind:value
/>
</div>
</div>
<style>
.search-bar {
margin-bottom: var(--section-gap, 24px);
}
.input-with-icon {
position: relative;
}
.input-with-icon svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-3);
pointer-events: none;
}
.input {
width: 100%;
padding: 10px 14px 10px 38px;
border-radius: var(--radius-sm, 8px);
background: var(--surface-secondary);
border: 1px solid var(--border);
color: var(--text-1);
font-size: var(--text-base);
font-family: var(--font);
outline: none;
transition: border-color var(--transition, 180ms ease);
}
.input:focus {
border-color: var(--accent);
}
.input::placeholder {
color: var(--text-4);
}
</style>

93
frontend-v2/src/lib/components/shared/SkeletonRow.svelte Normal file
View File

@@ -0,0 +1,93 @@
<script lang="ts">
let {
rows = 3,
variant = 'default' as 'default' | 'card'
}: {
rows?: number;
variant?: 'default' | 'card';
} = $props();
</script>
<div class="skeleton-rows">
{#each Array(rows) as _, i}
<div class="skeleton-row">
<div class="skeleton skeleton-circle"></div>
<div class="skeleton-text">
<div class="skeleton skeleton-line w-2-3"></div>
<div class="skeleton skeleton-line w-1-3"></div>
</div>
<div class="skeleton skeleton-line skeleton-amount"></div>
</div>
{/each}
</div>
<style>
.skeleton-rows {
display: flex;
flex-direction: column;
}
.skeleton-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
}
.skeleton-row + .skeleton-row {
border-top: 1px solid var(--border);
}
.skeleton {
background: linear-gradient(
90deg,
var(--card, #161619) 25%,
var(--card-hover, #1c1c20) 50%,
var(--card, #161619) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-sm);
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.skeleton-circle {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-text {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-1.5);
}
.skeleton-line {
height: 14px;
}
.w-2-3 {
width: 66%;
}
.w-1-3 {
width: 33%;
}
.skeleton-amount {
width: 64px;
height: 14px;
flex-shrink: 0;
}
</style>

95
frontend-v2/src/lib/components/shared/Toast.svelte Normal file
View File

@@ -0,0 +1,95 @@
<script lang="ts" module>
type ToastItem = {
id: number;
message: string;
variant: 'success' | 'error';
};
let toasts = $state<ToastItem[]>([]);
let nextId = 0;
export function toast(message: string, variant: 'success' | 'error' = 'success') {
const id = nextId++;
toasts.push({ id, message, variant });
setTimeout(() => {
toasts = toasts.filter((t) => t.id !== id);
}, 3000);
}
</script>
<script lang="ts">
import { cn } from '$lib/utils';
</script>
{#if toasts.length > 0}
<div class="toast-container">
{#each toasts as item (item.id)}
<div class={cn('toast', `toast--${item.variant}`)}>
{#if item.variant === 'success'}
<svg class="toast-icon toast-icon--success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
{:else}
<svg class="toast-icon toast-icon--error" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="15" y1="9" x2="9" y2="15"/>
<line x1="9" y1="9" x2="15" y2="15"/>
</svg>
{/if}
<span>{item.message}</span>
</div>
{/each}
</div>
{/if}
<style>
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 90;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.toast {
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-sm, 8px);
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--card-shadow);
font-size: var(--text-sm);
color: var(--text-1);
display: flex;
align-items: center;
gap: var(--sp-2);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.toast-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.toast-icon--success {
color: var(--success);
}
.toast-icon--error {
color: var(--error);
}
</style>

148
frontend-v2/src/lib/components/shared/TransactionRow.svelte Normal file
View File

@@ -0,0 +1,148 @@
<script lang="ts">
import { cn } from '$lib/utils';
type CategoryVariant = 'default' | 'uncat' | 'transfer';
let {
date,
payeeName,
payeeNote = '',
account,
category,
categoryVariant = 'default' as CategoryVariant,
amount,
isPositive = false
}: {
date: string;
payeeName: string;
payeeNote?: string;
account: string;
category: string;
categoryVariant?: CategoryVariant;
amount: string;
isPositive?: boolean;
} = $props();
const pillVariantClass: Record<CategoryVariant, string> = {
default: 'txn-cat-pill--default',
uncat: 'txn-cat-pill--uncat',
transfer: 'txn-cat-pill--transfer'
};
</script>
<div class="txn-row">
<div class="txn-date">{date}</div>
<div class="txn-payee">
<div class="txn-payee-name">{payeeName}</div>
{#if payeeNote}
<div class="txn-payee-note">{payeeNote}</div>
{/if}
</div>
<div class="txn-account">{account}</div>
<div class="txn-category">
<span class={cn('txn-cat-pill', pillVariantClass[categoryVariant])}>
{category}
</span>
</div>
<div class={cn('txn-amount', isPositive ? 'txn-amount--pos' : 'txn-amount--neg')}>
{amount}
</div>
</div>
<style>
.txn-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
transition: background var(--transition, 180ms ease);
cursor: default;
}
.txn-row:hover {
background: var(--card-hover);
}
.txn-row + :global(.txn-row) {
border-top: 1px solid var(--border);
}
.txn-date {
font-size: var(--text-sm);
color: var(--text-3);
width: 56px;
flex-shrink: 0;
}
.txn-payee {
flex: 1.5;
min-width: 0;
}
.txn-payee-name {
font-size: var(--text-base);
font-weight: 500;
color: var(--text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.txn-payee-note {
font-size: var(--text-sm);
color: var(--text-4);
margin-top: 1px;
}
.txn-account {
flex: 1;
font-size: var(--text-sm);
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.txn-category {
flex: 1;
}
.txn-cat-pill {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: var(--text-sm);
font-weight: 500;
}
.txn-cat-pill--default {
background: var(--accent-dim);
color: var(--accent);
}
.txn-cat-pill--uncat {
background: var(--warning-bg);
color: var(--warning);
}
.txn-cat-pill--transfer {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.txn-amount {
font-family: var(--mono);
font-size: var(--text-base);
font-weight: 500;
text-align: right;
min-width: 80px;
}
.txn-amount--pos {
color: var(--success);
}
.txn-amount--neg {
color: var(--error);
}
</style>

101
frontend-v2/src/lib/components/trips/CreateTripModal.svelte Normal file
View File

@@ -0,0 +1,101 @@
<script lang="ts">
let {
open = $bindable(false),
onCreated
}: {
open: boolean;
onCreated: (tripId: string) => void;
} = $props();
let name = $state('');
let description = $state('');
let startDate = $state('');
let endDate = $state('');
let saving = $state(false);
$effect(() => {
if (open) { name = ''; description = ''; startDate = ''; endDate = ''; }
});
function close() { open = false; }
async function create() {
if (!name.trim()) return;
saving = true;
try {
const res = await fetch('/api/trips/trip', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, description, start_date: startDate, end_date: endDate })
});
if (res.ok) {
const data = await res.json();
close();
onCreated(data.id);
}
} catch (e) { console.error('Create failed:', e); }
finally { saving = false; }
}
</script>
{#if open}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" onclick={close}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-sheet" onclick={(e) => e.stopPropagation()}>
<div class="modal-header">
<div class="modal-title">Plan a Trip</div>
<button class="modal-close" onclick={close}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body">
<div class="field">
<label class="field-label">Trip Name</label>
<input class="field-input" type="text" bind:value={name} placeholder="e.g. Tokyo 2027" autofocus />
</div>
<div class="field">
<label class="field-label">Description</label>
<textarea class="field-input field-textarea" bind:value={description} rows="2" placeholder="Optional..."></textarea>
</div>
<div class="field-row">
<div class="field"><label class="field-label">Start Date</label><input class="field-input" type="date" bind:value={startDate} /></div>
<div class="field"><label class="field-label">End Date</label><input class="field-input" type="date" bind:value={endDate} /></div>
</div>
</div>
<div class="modal-footer">
<div></div>
<div class="footer-right">
<button class="btn-cancel" onclick={close}>Cancel</button>
<button class="btn-save" onclick={create} disabled={saving || !name.trim()}>
{saving ? 'Creating...' : 'Create Trip'}
</button>
</div>
</div>
</div>
</div>
{/if}
<style>
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 70; display: flex; align-items: center; justify-content: center; animation: fade 150ms ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet { width: 440px; max-width: 92vw; background: var(--surface); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.15); animation: slideUp 200ms ease; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text-1); background: var(--card-hover); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.field-input { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-md); font-family: var(--font); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-textarea { resize: vertical; min-height: 50px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--border); }
.footer-right { display: flex; gap: var(--sp-2); }
.btn-cancel { padding: 8px 14px; border-radius: var(--radius-md); background: var(--card-secondary); color: var(--text-2); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); }
.btn-save { padding: 8px 18px; border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
.btn-save:disabled { opacity: 0.4; }
</style>

274
frontend-v2/src/lib/components/trips/ImageUpload.svelte Normal file
View File

@@ -0,0 +1,274 @@
<script lang="ts">
import ImmichPicker from '$lib/components/shared/ImmichPicker.svelte';
let {
entityType,
entityId,
images = [],
documents = [],
onUpload
}: {
entityType: string;
entityId: string;
images: any[];
documents?: any[];
onUpload: () => void;
} = $props();
let uploading = $state(false);
let deletingId = $state('');
let uploadingDoc = $state(false);
let deletingDocId = $state('');
let showImmich = $state(false);
// Image search
let showSearch = $state(false);
let searchQuery = $state('');
let searchResults = $state<{ url: string; thumbnail: string; title: string }[]>([]);
let searching = $state(false);
let savingUrl = $state('');
async function handleFileSelect(e: Event) {
const input = e.target as HTMLInputElement;
if (!input.files?.length || !entityId) return;
uploading = true;
try {
for (const file of input.files) {
const base64 = await new Promise<string>((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result as string);
reader.readAsDataURL(file);
});
await fetch('/api/trips/image/upload', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entity_type: entityType, entity_id: entityId, image_data: base64, filename: file.name })
});
}
onUpload();
} catch (e) { console.error('Upload failed:', e); }
finally { uploading = false; input.value = ''; }
}
async function deleteImage(imageId: string) {
deletingId = imageId;
try {
await fetch('/api/trips/image/delete', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: imageId })
});
onUpload();
} catch { /* silent */ }
finally { deletingId = ''; }
}
async function searchImages() {
if (!searchQuery.trim()) return;
searching = true;
try {
const res = await fetch('/api/trips/image/search', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: searchQuery })
});
if (res.ok) {
const data = await res.json();
searchResults = data.images || [];
}
} catch { searchResults = []; }
finally { searching = false; }
}
async function saveFromUrl(url: string) {
savingUrl = url;
try {
await fetch('/api/trips/image/upload-from-url', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entity_type: entityType, entity_id: entityId, url })
});
onUpload();
showSearch = false; searchResults = [];
} catch { /* silent */ }
finally { savingUrl = ''; }
}
async function handleDocSelect(e: Event) {
const input = e.target as HTMLInputElement;
if (!input.files?.length || !entityId) return;
uploadingDoc = true;
try {
for (const file of input.files) {
const formData = new FormData();
formData.append('entity_type', entityType);
formData.append('entity_id', entityId);
formData.append('file', file);
await fetch('/api/trips/document/upload', {
method: 'POST', credentials: 'include', body: formData
});
}
onUpload();
} catch { /* silent */ }
finally { uploadingDoc = false; input.value = ''; }
}
async function deleteDoc(docId: string) {
deletingDocId = docId;
try {
await fetch('/api/trips/document/delete', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ document_id: docId })
});
onUpload();
} catch { /* silent */ }
finally { deletingDocId = ''; }
}
async function handleImmichSelect(assetIds: string[]) {
// Download from Immich and upload to trips
for (const assetId of assetIds) {
try {
const imgRes = await fetch(`/api/immich/assets/${assetId}/thumbnail`);
if (!imgRes.ok) continue;
const blob = await imgRes.blob();
const base64 = await new Promise<string>((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result as string);
reader.readAsDataURL(blob);
});
await fetch('/api/trips/image/upload', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entity_type: entityType, entity_id: entityId, image_data: base64, filename: `immich-${assetId}.webp` })
});
} catch { /* silent */ }
}
showImmich = false;
onUpload();
}
</script>
<div class="upload-section">
<!-- Existing images -->
{#if images.length > 0}
<div class="image-strip">
{#each images as img}
<div class="image-thumb-wrap">
<img src={img.url || `/images/${img.file_path}`} alt="" class="image-thumb" />
<button class="image-delete" onclick={() => deleteImage(img.id)} disabled={deletingId === img.id}>
{#if deletingId === img.id}...{:else}×{/if}
</button>
</div>
{/each}
</div>
{/if}
<!-- Existing documents -->
{#if documents && documents.length > 0}
<div class="doc-list">
{#each documents as doc}
<div class="doc-row">
<svg class="doc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
<a href={doc.url || `/api/trips/documents/${doc.file_path}`} target="_blank" class="doc-name">{doc.file_name || doc.original_name || 'Document'}</a>
<button class="doc-delete" onclick={() => deleteDoc(doc.id)} disabled={deletingDocId === doc.id}>×</button>
</div>
{/each}
</div>
{/if}
<!-- Action buttons -->
{#if entityId}
<div class="upload-actions">
<label class="upload-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
{uploading ? 'Uploading...' : 'Photo'}
<input type="file" accept="image/*" multiple class="hidden-input" onchange={handleFileSelect} disabled={uploading} />
</label>
<button class="upload-btn" onclick={() => { showSearch = !showSearch; if (showSearch) searchImages(); }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
Search
</button>
<button class="upload-btn" onclick={() => showImmich = true}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
Immich
</button>
<label class="upload-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
{uploadingDoc ? 'Uploading...' : 'Document'}
<input type="file" accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png" multiple class="hidden-input" onchange={handleDocSelect} disabled={uploadingDoc} />
</label>
</div>
{:else}
<div class="upload-hint">Save first to add photos and documents</div>
{/if}
<!-- Search panel -->
{#if showSearch}
<div class="search-panel">
<div class="search-row">
<input class="search-input" type="text" placeholder="Search images..." bind:value={searchQuery}
onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); searchImages(); } }} />
<button class="search-btn" onclick={searchImages} disabled={searching}>{searching ? '...' : 'Search'}</button>
<button class="search-close" onclick={() => { showSearch = false; searchResults = []; }}>×</button>
</div>
{#if searchResults.length > 0}
<div class="search-grid">
{#each searchResults as result}
<button class="search-thumb" onclick={() => saveFromUrl(result.url)} disabled={savingUrl === result.url}>
<img src={result.thumbnail} alt={result.title} />
{#if savingUrl === result.url}<div class="search-saving">Saving...</div>{/if}
</button>
{/each}
</div>
{/if}
</div>
{/if}
</div>
{#if showImmich}
<ImmichPicker bind:open={showImmich} onselect={handleImmichSelect} />
{/if}
<style>
.upload-section { display: flex; flex-direction: column; gap: 10px; }
.image-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.image-thumb-wrap { position: relative; flex-shrink: 0; }
.image-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.image-delete {
position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
border-radius: 50%; background: rgba(0,0,0,0.5); color: white; border: none;
font-size: var(--text-sm); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.doc-list { display: flex; flex-direction: column; gap: 4px; }
.doc-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: var(--surface-secondary); }
.doc-icon { width: 14px; height: 14px; color: var(--text-4); flex-shrink: 0; }
.doc-name { flex: 1; font-size: var(--text-sm); color: var(--text-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name:hover { color: var(--accent); }
.doc-delete { background: none; border: none; color: var(--text-4); cursor: pointer; font-size: var(--text-base); padding: 2px 4px; }
.doc-delete:hover { color: var(--error); }
.upload-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.upload-btn {
display: flex; align-items: center; gap: 4px; padding: 6px 10px;
border-radius: 6px; background: none; border: 1px solid var(--border);
font-size: var(--text-sm); font-weight: 500; color: var(--text-3); cursor: pointer;
font-family: var(--font); transition: all var(--transition);
}
.upload-btn:hover { color: var(--text-1); border-color: var(--text-4); }
.upload-btn svg { width: 14px; height: 14px; }
.hidden-input { display: none; }
.upload-hint { font-size: var(--text-sm); color: var(--text-4); text-align: center; padding: 8px; }
.search-panel { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface-secondary); }
.search-row { display: flex; gap: 6px; margin-bottom: 8px; }
.search-input { flex: 1; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-family: var(--font); }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-btn { padding: 6px 12px; border-radius: 6px; background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
.search-close { background: none; border: none; color: var(--text-3); font-size: var(--text-md); cursor: pointer; padding: 4px 8px; }
.search-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 160px; overflow-y: auto; }
.search-thumb { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: none; cursor: pointer; padding: 0; background: var(--card-hover); }
.search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-saving { position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); }
</style>

368
frontend-v2/src/lib/components/trips/ItemModal.svelte Normal file
View File

@@ -0,0 +1,368 @@
<script lang="ts">
import PlacesAutocomplete from './PlacesAutocomplete.svelte';
import ImageUpload from './ImageUpload.svelte';
type ItemType = 'transportation' | 'lodging' | 'location' | 'note';
let {
open = $bindable(false),
tripId,
itemType = 'location',
editItem = null,
onSaved
}: {
open: boolean;
tripId: string;
itemType: ItemType;
editItem?: any;
onSaved: () => void;
} = $props();
let saving = $state(false);
let confirmDelete = $state(false);
// ── Form state ──
let name = $state('');
let description = $state('');
let category = $state('');
let date = $state('');
let endDate = $state('');
let startTime = $state('');
let endTime = $state('');
let flightNumber = $state('');
let fromLocation = $state('');
let toLocation = $state('');
let reservationNumber = $state('');
let link = $state('');
let costPoints = $state(0);
let costCash = $state(0);
let address = $state('');
let placeId = $state('');
let latitude = $state<number | null>(null);
let longitude = $state<number | null>(null);
let hikeDistance = $state('');
let hikeDifficulty = $state('');
let hikeTime = $state('');
let transportType = $state('plane');
let lodgingType = $state('hotel');
let content = $state('');
let isEdit = $derived(!!editItem?.id);
const locationCategories = ['restaurant', 'cafe', 'bar', 'attraction', 'hike', 'shopping', 'beach', 'museum', 'park'];
const transportTypes = ['plane', 'train', 'car', 'bus', 'ferry'];
const lodgingTypes = ['hotel', 'airbnb', 'hostel', 'resort', 'camping'];
$effect(() => {
if (open && editItem) {
name = editItem.name || '';
description = editItem.description || '';
date = editItem.date || editItem.visit_date || editItem.check_in?.slice(0, 10) || '';
endDate = editItem.end_date || editItem.check_out?.slice(0, 10) || '';
startTime = editItem.start_time || editItem.date || '';
endTime = editItem.end_time || editItem.end_date || '';
category = editItem.category || '';
flightNumber = editItem.flight_number || '';
fromLocation = editItem.from_location || '';
toLocation = editItem.to_location || '';
reservationNumber = editItem.reservation_number || '';
link = editItem.link || '';
costPoints = editItem.cost_points || 0;
costCash = editItem.cost_cash || 0;
address = editItem.address || editItem.location || '';
placeId = editItem.place_id || '';
latitude = editItem.latitude || editItem.from_lat || null;
longitude = editItem.longitude || editItem.from_lng || null;
hikeDistance = editItem.hike_distance || '';
hikeDifficulty = editItem.hike_difficulty || '';
hikeTime = editItem.hike_time || '';
transportType = editItem.type || 'plane';
lodgingType = editItem.type || 'hotel';
content = editItem.content || '';
} else if (open) {
resetForm();
}
confirmDelete = false;
});
function resetForm() {
name = ''; description = ''; category = ''; date = ''; endDate = '';
startTime = ''; endTime = ''; flightNumber = ''; fromLocation = '';
toLocation = ''; reservationNumber = ''; link = ''; costPoints = 0;
costCash = 0; address = ''; placeId = ''; latitude = null; longitude = null;
hikeDistance = ''; hikeDifficulty = ''; hikeTime = '';
transportType = 'plane'; lodgingType = 'hotel'; content = '';
}
function close() { open = false; resetForm(); confirmDelete = false; }
function handlePlaceSelect(details: any) {
if (details.name) name = details.name;
address = details.address || '';
placeId = details.place_id || '';
latitude = details.latitude;
longitude = details.longitude;
if (details.category && !category) category = details.category;
if (itemType === 'lodging') address = details.address || details.name || '';
}
async function save() {
saving = true;
try {
let endpoint: string;
let payload: Record<string, any> = { trip_id: tripId };
if (itemType === 'transportation') {
payload = { ...payload, name, description, type: transportType, flight_number: flightNumber, from_location: fromLocation, to_location: toLocation, date: startTime || date, end_date: endTime || endDate, link, cost_points: costPoints, cost_cash: costCash, from_place_id: placeId, from_lat: latitude, from_lng: longitude };
endpoint = isEdit ? '/api/trips/transportation/update' : '/api/trips/transportation';
} else if (itemType === 'lodging') {
payload = { ...payload, name, description, type: lodgingType, location: address, check_in: date, check_out: endDate, reservation_number: reservationNumber, link, cost_points: costPoints, cost_cash: costCash, place_id: placeId, latitude, longitude };
endpoint = isEdit ? '/api/trips/lodging/update' : '/api/trips/lodging';
} else if (itemType === 'note') {
payload = { ...payload, name, content: description || content, date };
endpoint = isEdit ? '/api/trips/note/update' : '/api/trips/note';
} else {
payload = { ...payload, name, description, category, visit_date: date, start_time: startTime, end_time: endTime, link, cost_points: costPoints, cost_cash: costCash, address, place_id: placeId, latitude, longitude, hike_distance: hikeDistance, hike_difficulty: hikeDifficulty, hike_time: hikeTime };
endpoint = isEdit ? '/api/trips/location/update' : '/api/trips/location';
}
if (isEdit) payload.id = editItem.id;
await fetch(endpoint, {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
close();
onSaved();
} catch (e) { console.error('Save failed:', e); }
finally { saving = false; }
}
async function doDelete() {
if (!isEdit) return;
saving = true;
try {
await fetch(`/api/trips/${itemType}/delete`, {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: editItem.id })
});
close();
onSaved();
} catch (e) { console.error('Delete failed:', e); }
finally { saving = false; }
}
const titles: Record<ItemType, string> = {
transportation: 'Transportation',
lodging: 'Accommodation',
location: 'Activity',
note: 'Note'
};
</script>
{#if open}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" onclick={close}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-sheet" onclick={(e) => e.stopPropagation()}>
<div class="modal-header">
<div class="modal-title">{isEdit ? 'Edit' : 'Add'} {titles[itemType]}</div>
<button class="modal-close" onclick={close}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body">
<!-- Name (with Places search for location & lodging) -->
{#if itemType === 'location' || itemType === 'lodging'}
<div class="field">
<label class="field-label">Name</label>
<PlacesAutocomplete bind:value={name} placeholder={itemType === 'lodging' ? 'Search hotel or address...' : 'Search place or type name...'} onSelect={handlePlaceSelect} />
</div>
{:else}
<div class="field">
<label class="field-label">Name</label>
<input class="field-input" type="text" bind:value={name} placeholder={itemType === 'note' ? 'Note title' : 'Name'} />
</div>
{/if}
<!-- Type selectors -->
{#if itemType === 'transportation'}
<div class="field">
<label class="field-label">Type</label>
<select class="field-input" bind:value={transportType}>
{#each transportTypes as t}<option value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>{/each}
</select>
</div>
{#if transportType === 'plane'}
<div class="field">
<label class="field-label">Flight Number</label>
<input class="field-input" type="text" bind:value={flightNumber} placeholder="UA 2341" />
</div>
{/if}
<div class="field-row">
<div class="field"><label class="field-label">From</label><input class="field-input" type="text" bind:value={fromLocation} /></div>
<div class="field"><label class="field-label">To</label><input class="field-input" type="text" bind:value={toLocation} /></div>
</div>
<div class="field-row">
<div class="field"><label class="field-label">Departure</label><input class="field-input" type="datetime-local" bind:value={startTime} /></div>
<div class="field"><label class="field-label">Arrival</label><input class="field-input" type="datetime-local" bind:value={endTime} /></div>
</div>
{:else if itemType === 'lodging'}
<div class="field">
<label class="field-label">Type</label>
<select class="field-input" bind:value={lodgingType}>
{#each lodgingTypes as t}<option value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>{/each}
</select>
</div>
<div class="field-row">
<div class="field"><label class="field-label">Check-in</label><input class="field-input" type="date" bind:value={date} /></div>
<div class="field"><label class="field-label">Check-out</label><input class="field-input" type="date" bind:value={endDate} /></div>
</div>
<div class="field">
<label class="field-label">Reservation #</label>
<input class="field-input" type="text" bind:value={reservationNumber} />
</div>
{:else if itemType === 'location'}
<div class="field">
<label class="field-label">Category</label>
<select class="field-input" bind:value={category}>
<option value="">Select...</option>
{#each locationCategories as c}<option value={c}>{c.charAt(0).toUpperCase() + c.slice(1)}</option>{/each}
</select>
</div>
<div class="field">
<label class="field-label">Visit Date</label>
<input class="field-input" type="date" bind:value={date} />
</div>
<div class="field-row">
<div class="field"><label class="field-label">Start Time</label><input class="field-input" type="datetime-local" bind:value={startTime} /></div>
<div class="field"><label class="field-label">End Time</label><input class="field-input" type="datetime-local" bind:value={endTime} /></div>
</div>
{#if category === 'hike'}
<div class="field-row">
<div class="field"><label class="field-label">Distance</label><input class="field-input" type="text" bind:value={hikeDistance} placeholder="5.2 miles" /></div>
<div class="field">
<label class="field-label">Difficulty</label>
<select class="field-input" bind:value={hikeDifficulty}>
<option value="">Select...</option>
<option value="easy">Easy</option>
<option value="moderate">Moderate</option>
<option value="hard">Hard</option>
<option value="strenuous">Strenuous</option>
</select>
</div>
<div class="field"><label class="field-label">Duration</label><input class="field-input" type="text" bind:value={hikeTime} placeholder="3 hours" /></div>
</div>
{/if}
{:else if itemType === 'note'}
<div class="field">
<label class="field-label">Date</label>
<input class="field-input" type="date" bind:value={date} />
</div>
{/if}
<!-- Description / Content -->
{#if itemType === 'note'}
<div class="field">
<label class="field-label">Content</label>
<textarea class="field-input field-textarea" bind:value={content} rows="6" placeholder="Write your note..."></textarea>
</div>
{:else}
<div class="field">
<label class="field-label">Description</label>
<textarea class="field-input field-textarea" bind:value={description} rows="3" placeholder="Details..."></textarea>
</div>
{/if}
<!-- Images & Documents (edit mode only) -->
{#if isEdit && itemType !== 'note'}
<div class="field">
<label class="field-label">Photos & Documents</label>
<ImageUpload
entityType={itemType}
entityId={editItem.id}
images={(editItem.images || []).map((i: any) => ({ ...i, url: `/images/${i.file_path}` }))}
documents={(editItem.documents || []).map((d: any) => ({ ...d, url: `/api/trips/documents/${d.file_path}` }))}
onUpload={onSaved}
/>
</div>
{/if}
<!-- Link -->
{#if itemType !== 'note'}
<div class="field">
<label class="field-label">Link</label>
<input class="field-input" type="url" bind:value={link} placeholder="https://..." />
</div>
<div class="field-row">
<div class="field"><label class="field-label">Points</label><input class="field-input" type="number" bind:value={costPoints} /></div>
<div class="field"><label class="field-label">Cash ($)</label><input class="field-input" type="number" step="0.01" bind:value={costCash} /></div>
</div>
{/if}
</div>
<div class="modal-footer">
{#if isEdit}
{#if confirmDelete}
<div class="delete-confirm">
<span class="delete-msg">Delete this item?</span>
<button class="btn-danger" onclick={doDelete} disabled={saving}>Yes, delete</button>
<button class="btn-cancel" onclick={() => confirmDelete = false}>Cancel</button>
</div>
{:else}
<button class="btn-delete" onclick={() => confirmDelete = true}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
</button>
{/if}
{:else}
<div></div>
{/if}
<div class="footer-right">
<button class="btn-cancel" onclick={close}>Cancel</button>
<button class="btn-save" onclick={save} disabled={saving || !name.trim()}>
{saving ? 'Saving...' : isEdit ? 'Save' : 'Add'}
</button>
</div>
</div>
</div>
</div>
{/if}
<style>
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 70; display: flex; justify-content: flex-end; animation: modalFade 150ms ease; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet { width: 480px; max-width: 100%; height: 100%; background: var(--surface); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,0.1); animation: modalSlide 200ms ease; }
@keyframes modalSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.modal-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text-1); background: var(--card-hover); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.field-input { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-base); font-family: var(--font); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-textarea { resize: vertical; min-height: 60px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border); }
.footer-right { display: flex; gap: var(--sp-2); }
.btn-cancel { padding: 8px 14px; border-radius: var(--radius-md); background: var(--card-secondary); color: var(--text-2); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); }
.btn-save { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
.btn-save:disabled { opacity: 0.4; cursor: default; }
.btn-delete { width: 34px; height: 34px; border-radius: var(--radius-md); background: none; border: 1px solid var(--error); color: var(--error); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-delete:hover { background: var(--error-bg); }
.btn-delete svg { width: 16px; height: 16px; }
.delete-confirm { display: flex; align-items: center; gap: var(--sp-2); }
.delete-msg { font-size: var(--text-sm); color: var(--error); font-weight: 500; }
.btn-danger { padding: 6px var(--sp-3); border-radius: var(--radius-sm); background: var(--error); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
@media (max-width: 768px) { .modal-sheet { width: 100%; } }
</style>

95
frontend-v2/src/lib/components/trips/PlacesAutocomplete.svelte Normal file
View File

@@ -0,0 +1,95 @@
<script lang="ts">
interface Prediction {
place_id: string;
name: string;
address: string;
types: string[];
}
let {
value = $bindable(''),
placeholder = 'Search for a place...',
onSelect
}: {
value: string;
placeholder?: string;
onSelect: (details: { place_id: string; name: string; address: string; latitude: number | null; longitude: number | null; category: string }) => void;
} = $props();
let predictions = $state<Prediction[]>([]);
let showDropdown = $state(false);
let debounceTimer: ReturnType<typeof setTimeout>;
async function search(query: string) {
if (query.length < 2) { predictions = []; showDropdown = false; return; }
try {
const res = await fetch('/api/trips/places/autocomplete', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query })
});
if (res.ok) {
const data = await res.json();
predictions = data.predictions || [];
showDropdown = predictions.length > 0;
}
} catch { predictions = []; }
}
function onInput() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => search(value), 250);
}
async function selectPlace(pred: Prediction) {
showDropdown = false;
value = pred.name;
try {
const res = await fetch(`/api/trips/places/details?place_id=${encodeURIComponent(pred.place_id)}`, { credentials: 'include' });
const details = await res.json();
onSelect({ ...details, place_id: pred.place_id });
} catch {
onSelect({ place_id: pred.place_id, name: pred.name, address: pred.address, latitude: null, longitude: null, category: '' });
}
}
</script>
<div class="places-wrap">
<input type="text" class="places-input" {placeholder} bind:value oninput={onInput}
onfocus={() => { if (predictions.length > 0) showDropdown = true; }}
onblur={() => setTimeout(() => showDropdown = false, 200)} />
{#if showDropdown}
<div class="places-dropdown">
{#each predictions as pred}
<button class="places-option" onmousedown={() => selectPlace(pred)}>
<span class="places-name">{pred.name}</span>
{#if pred.address}<span class="places-addr">{pred.address}</span>{/if}
</button>
{/each}
</div>
{/if}
</div>
<style>
.places-wrap { position: relative; }
.places-input {
width: 100%; padding: 10px 12px; border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface-secondary);
color: var(--text-1); font-size: var(--text-base); font-family: var(--font);
}
.places-input:focus { outline: none; border-color: var(--accent); }
.places-dropdown {
position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--sp-1);
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--card-shadow); z-index: 50; max-height: 200px; overflow-y: auto;
}
.places-option {
display: flex; flex-direction: column; width: 100%; padding: 10px 14px;
background: none; border: none; border-bottom: 1px solid var(--border);
text-align: left; cursor: pointer; transition: background var(--transition); font-family: var(--font);
}
.places-option:last-child { border-bottom: none; }
.places-option:hover { background: var(--card-hover); }
.places-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-1); }
.places-addr { font-size: var(--text-xs); color: var(--text-3); margin-top: 1px; }
</style>

193
frontend-v2/src/lib/components/trips/TripEditModal.svelte Normal file
View File

@@ -0,0 +1,193 @@
<script lang="ts">
let {
open = $bindable(false),
tripData,
onSaved
}: {
open: boolean;
tripData: any;
onSaved: () => void;
} = $props();
let saving = $state(false);
let confirmDelete = $state(false);
let sharing = $state(false);
let shareUrl = $state('');
let copied = $state(false);
let name = $state('');
let description = $state('');
let startDate = $state('');
let endDate = $state('');
$effect(() => {
if (open && tripData) {
name = tripData.name || '';
description = tripData.description || '';
startDate = tripData.start_date || '';
endDate = tripData.end_date || '';
shareUrl = tripData.share_token ? `${typeof window !== 'undefined' ? window.location.origin : ''}/trips/view/${tripData.share_token}` : '';
confirmDelete = false;
copied = false;
}
});
function close() { open = false; }
async function save() {
saving = true;
try {
await fetch('/api/trips/trip/update', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: tripData.id, name, description, start_date: startDate, end_date: endDate })
});
close();
onSaved();
} catch (e) { console.error('Save failed:', e); }
finally { saving = false; }
}
async function doDelete() {
saving = true;
try {
await fetch('/api/trips/trip/delete', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: tripData.id })
});
window.location.href = '/trips';
} catch (e) { console.error('Delete failed:', e); }
finally { saving = false; }
}
async function toggleShare() {
sharing = true;
try {
if (shareUrl) {
await fetch('/api/trips/share/delete', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ trip_id: tripData.id })
});
shareUrl = '';
} else {
const res = await fetch('/api/trips/share/create', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ trip_id: tripData.id })
});
const data = await res.json();
shareUrl = `${window.location.origin}/trips/view/${data.share_token}`;
}
} catch { /* silent */ }
finally { sharing = false; }
}
async function copyUrl() {
await navigator.clipboard.writeText(shareUrl);
copied = true;
setTimeout(() => copied = false, 2000);
}
</script>
{#if open}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" onclick={close}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-sheet" onclick={(e) => e.stopPropagation()}>
<div class="modal-header">
<div class="modal-title">Edit Trip</div>
<button class="modal-close" onclick={close}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body">
<div class="field">
<label class="field-label">Trip Name</label>
<input class="field-input" type="text" bind:value={name} />
</div>
<div class="field">
<label class="field-label">Description</label>
<textarea class="field-input field-textarea" bind:value={description} rows="3"></textarea>
</div>
<div class="field-row">
<div class="field"><label class="field-label">Start Date</label><input class="field-input" type="date" bind:value={startDate} /></div>
<div class="field"><label class="field-label">End Date</label><input class="field-input" type="date" bind:value={endDate} /></div>
</div>
<!-- Sharing -->
<div class="share-section">
<div class="share-header">
<span class="field-label">Sharing</span>
<button class="share-toggle" onclick={toggleShare} disabled={sharing}>
{shareUrl ? 'Revoke Link' : 'Create Share Link'}
</button>
</div>
{#if shareUrl}
<div class="share-link-row">
<input class="field-input share-url" type="text" readonly value={shareUrl} />
<button class="copy-btn" onclick={copyUrl}>{copied ? 'Copied!' : 'Copy'}</button>
</div>
{/if}
</div>
</div>
<div class="modal-footer">
{#if confirmDelete}
<div class="delete-confirm">
<span class="delete-msg">Delete this trip permanently?</span>
<button class="btn-danger" onclick={doDelete} disabled={saving}>Yes, delete</button>
<button class="btn-cancel" onclick={() => confirmDelete = false}>Cancel</button>
</div>
{:else}
<button class="btn-delete-text" onclick={() => confirmDelete = true}>Delete Trip</button>
{/if}
<div class="footer-right">
<button class="btn-cancel" onclick={close}>Cancel</button>
<button class="btn-save" onclick={save} disabled={saving || !name.trim()}>
{saving ? 'Saving...' : 'Save'}
</button>
</div>
</div>
</div>
</div>
{/if}
<style>
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 70; display: flex; justify-content: flex-end; animation: modalFade 150ms ease; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet { width: 480px; max-width: 100%; height: 100%; background: var(--surface); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,0.1); animation: modalSlide 200ms ease; }
@keyframes modalSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.modal-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text-1); background: var(--card-hover); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.field-input { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-base); font-family: var(--font); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-textarea { resize: vertical; min-height: 60px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: var(--sp-1); }
.share-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.share-toggle { font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: none; border: none; cursor: pointer; font-family: var(--font); }
.share-toggle:hover { opacity: 0.7; }
.share-link-row { display: flex; gap: var(--sp-2); }
.share-url { flex: 1; font-size: var(--text-sm); font-family: var(--mono); }
.copy-btn { padding: 8px 14px; border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--sp-5); border-top: 1px solid var(--border); }
.footer-right { display: flex; gap: var(--sp-2); }
.btn-cancel { padding: 8px 14px; border-radius: var(--radius-md); background: var(--card-secondary); color: var(--text-2); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); }
.btn-save { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
.btn-save:disabled { opacity: 0.4; }
.btn-delete-text { font-size: var(--text-sm); color: var(--error); background: none; border: none; cursor: pointer; font-weight: 500; font-family: var(--font); }
.btn-delete-text:hover { opacity: 0.7; }
.delete-confirm { display: flex; align-items: center; gap: var(--sp-2); }
.delete-msg { font-size: var(--text-sm); color: var(--error); font-weight: 500; }
.btn-danger { padding: 6px var(--sp-3); border-radius: var(--radius-sm); background: var(--error); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
@media (max-width: 768px) { .modal-sheet { width: 100%; } }
</style>

1
frontend-v2/src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

26
frontend-v2/src/lib/stores/theme.svelte.ts Normal file
View File

@@ -0,0 +1,26 @@
let theme = $state<'light' | 'dark'>('light');
export function initTheme() {
if (typeof window === 'undefined') return;
const stored = localStorage.getItem('theme') as 'light' | 'dark' | null;
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
theme = stored ?? (prefersDark ? 'dark' : 'light');
applyTheme();
}
function applyTheme() {
if (typeof document === 'undefined') return;
const root = document.documentElement;
root.classList.remove('light', 'dark');
root.classList.add(theme);
}
export function toggleTheme() {
theme = theme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', theme);
applyTheme();
}
export function isDark(): boolean {
return theme === 'dark';
}

6
frontend-v2/src/lib/utils.ts Normal file
View File

@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

28
frontend-v2/src/routes/(app)/+layout.server.ts Normal file
View File

@@ -0,0 +1,28 @@
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';
import { env } from '$env/dynamic/private';
const gatewayUrl = env.GATEWAY_URL || 'http://localhost:8100';
export const load: LayoutServerLoad = async ({ cookies, url }) => {
const session = cookies.get('platform_session');
if (!session) {
throw redirect(302, `/login?redirect=${encodeURIComponent(url.pathname)}`);
}
// Validate session is still active
try {
const res = await fetch(`${gatewayUrl}/api/auth/me`, {
headers: { Cookie: `platform_session=${session}` }
});
if (res.ok) {
const data = await res.json();
if (data.authenticated) {
return { user: data.user };
}
}
} catch { /* gateway down — let client handle */ }
// Invalid/expired session
throw redirect(302, `/login?redirect=${encodeURIComponent(url.pathname)}`);
};

58
frontend-v2/src/routes/(app)/+layout.svelte Normal file
View File

@@ -0,0 +1,58 @@
<script lang="ts">
import Navbar from '$lib/components/layout/Navbar.svelte';
import MobileTabBar from '$lib/components/layout/MobileTabBar.svelte';
import CommandPalette from '$lib/components/layout/CommandPalette.svelte';
let { children } = $props();
let commandOpen = $state(false);
function openCommand() {
commandOpen = true;
}
function closeCommand() {
commandOpen = false;
}
function handleKeydown(e: KeyboardEvent) {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
commandOpen = !commandOpen;
}
}
</script>
<svelte:window onkeydown={handleKeydown} />
<div class="app">
<Navbar onOpenCommand={openCommand} />
<main>
{@render children()}
</main>
<MobileTabBar />
<CommandPalette bind:open={commandOpen} onclose={closeCommand} />
</div>
<style>
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
padding: 16px;
width: 100%;
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 768px) {
main {
padding: 20px;
max-width: 1200px;
}
}
</style>

127
frontend-v2/src/routes/(app)/+page.svelte Normal file
View File

@@ -0,0 +1,127 @@
<script lang="ts">
import { onMount } from 'svelte';
import DashboardActionCard from '$lib/components/dashboard/DashboardActionCard.svelte';
import BudgetModule from '$lib/components/dashboard/BudgetModule.svelte';
import FitnessModule from '$lib/components/dashboard/FitnessModule.svelte';
import IssuesModule from '$lib/components/dashboard/IssuesModule.svelte';
let inventoryIssueCount = $state(0);
let inventoryReviewCount = $state(0);
let budgetUncatCount = $state(0);
let budgetSpending = $state('');
let budgetIncome = $state('');
let fitnessCalRemaining = $state(0);
let fitnessCalLogged = $state(0);
let fitnessProtein = $state(0);
let fitnessCarbs = $state(0);
onMount(async () => {
const n = new Date();
const today = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
try {
const [invRes, budgetRes, uncatRes, fitTotalsRes, fitGoalsRes] = await Promise.all([
fetch('/api/inventory/summary', { credentials: 'include' }),
fetch('/api/budget/summary', { credentials: 'include' }),
fetch('/api/budget/uncategorized-count', { credentials: 'include' }),
fetch(`/api/fitness/entries/totals?date=${today}`, { credentials: 'include' }),
fetch(`/api/fitness/goals/for-date?date=${today}`, { credentials: 'include' }),
]);
if (invRes.ok) {
const data = await invRes.json();
inventoryIssueCount = data.issueCount || 0;
inventoryReviewCount = data.reviewCount || 0;
}
if (budgetRes.ok) {
const data = await budgetRes.json();
budgetSpending = '$' + Math.abs(data.spendingDollars || 0).toLocaleString('en-US');
budgetIncome = '$' + Math.abs(data.incomeDollars || 0).toLocaleString('en-US');
}
if (uncatRes.ok) {
const data = await uncatRes.json();
budgetUncatCount = data.count || 0;
}
if (fitTotalsRes.ok) {
const t = await fitTotalsRes.json();
fitnessCalLogged = Math.round(t.total_calories || 0);
fitnessProtein = Math.round(t.total_protein || 0);
fitnessCarbs = Math.round(t.total_carbs || 0);
}
if (fitGoalsRes.ok) {
const g = await fitGoalsRes.json();
fitnessCalRemaining = Math.max(0, (g.calories || 2000) - fitnessCalLogged);
}
} catch { /* silent */ }
});
</script>
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="page-title">Dashboard</div>
<div class="page-greeting">Good to see you, <strong>Yusuf</strong></div>
</div>
<div class="action-cards">
<DashboardActionCard
title="{budgetUncatCount} uncategorized transactions"
description="{budgetSpending} spent &middot; {budgetIncome} income"
action="Review"
variant="budget"
size="primary"
href="/budget"
/>
<DashboardActionCard
title="{inventoryIssueCount} issue{inventoryIssueCount !== 1 ? 's' : ''} · {inventoryReviewCount} needs review"
description="{inventoryIssueCount + inventoryReviewCount} items need attention"
action="View"
variant="inventory"
href="/inventory"
/>
<DashboardActionCard
title="{fitnessCalRemaining.toLocaleString()} calories remaining today"
description="{fitnessCalLogged.toLocaleString()} cal logged &middot; {fitnessProtein}g protein &middot; {fitnessCarbs}g carbs"
action="Log food"
variant="fitness"
href="/fitness"
/>
</div>
<div class="modules-grid">
<BudgetModule />
<div class="right-stack">
<FitnessModule />
<IssuesModule />
</div>
</div>
</div>
</div>
<style>
.action-cards {
display: flex;
flex-direction: column;
gap: var(--section-gap);
margin-bottom: calc(var(--section-gap) + 8px);
padding-top: 4px;
}
.modules-grid {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: var(--module-gap);
align-items: start;
}
.right-stack {
display: flex;
flex-direction: column;
gap: var(--module-gap);
}
@media (max-width: 768px) {
.modules-grid {
grid-template-columns: 1fr;
}
}
</style>

763
frontend-v2/src/routes/(app)/budget/+page.svelte Normal file
View File

@@ -0,0 +1,763 @@
<script lang="ts">
import { onMount } from 'svelte';
// ── State (same names as template binds) ──
let activeView = $state<'transactions' | 'budget'>('transactions');
let activeTab = $state('all');
let accountsOpen = $state(false);
let selected = $state<Set<string>>(new Set());
let lastCategory = $state('');
let bulkCategoryOpen = $state(false);
let focusedRowId = $state('');
let loading = $state(true);
let saving = $state(false);
// ── Data (populated from API) ──
let budgetGroups = $state<{ name: string; categories: { name: string; budgeted: number; spent: number; available: number }[] }[]>([]);
let categories = $state<string[]>([]);
let categoryMap = $state<Record<string, string>>({}); // name → id
let accounts = $state<{ name: string; balance: number; positive: boolean; id?: string }[]>([]);
let offBudgetAccounts = $state<{ name: string; balance: number; positive: boolean; id?: string }[]>([]);
let suggestedTransfers = $state<any[]>([]);
let transactions = $state<{ id: string; date: string; payee: string; note: string; account: string; category: string; categoryType: string; amount: number; categoryId?: string; accountId?: string }[]>([]);
// ── Pagination ──
let hasMore = $state(true);
let loadingMore = $state(false);
let activeAccountId = $state<string | null>(null);
const PAGE_SIZE = 100;
// ── Header stats ──
let headerSpending = $state('...');
let headerIncome = $state('...');
let currentMonthLabel = $state('');
// Sort categories with last-used first
let sortedCategories = $derived(() => {
if (!lastCategory) return categories;
const rest = categories.filter(c => c !== lastCategory);
return [lastCategory, ...rest];
});
let canTransfer = $derived(selected.size === 2);
const filteredTransactions = $derived(() => {
if (activeTab === 'uncategorized') return transactions.filter(t => t.categoryType === 'uncat');
if (activeTab === 'categorized') return transactions.filter(t => t.categoryType !== 'uncat');
return transactions;
});
let totalUncatCount = $state(0);
const uncatCount = $derived(activeAccountId
? transactions.filter(t => t.categoryType === 'uncat').length
: totalUncatCount
);
// ── API helper ──
async function api(path: string, opts: RequestInit = {}) {
const res = await fetch(`/api/budget${path}`, { credentials: 'include', ...opts });
if (!res.ok) throw new Error(`${res.status}`);
return res.json();
}
// ── Load data ──
async function loadAccounts() {
try {
const data = await api('/accounts');
const onBudget: typeof accounts = [];
const offBudget: typeof offBudgetAccounts = [];
for (const a of data) {
if (a.closed) continue;
const entry = {
name: a.name,
balance: Math.round(a.balanceDollars),
positive: a.balanceDollars >= 0,
id: a.id
};
if (a.offbudget) offBudget.push(entry);
else onBudget.push(entry);
}
accounts = onBudget;
offBudgetAccounts = offBudget;
} catch { /* silent */ }
}
async function loadCategories() {
try {
const data = await api('/categories');
const allCats: string[] = [];
const map: Record<string, string> = {};
for (const group of data) {
for (const cat of group.categories) {
if (cat.name !== 'Starting Balances') {
allCats.push(cat.name);
map[cat.name] = cat.id;
}
}
}
categories = allCats;
categoryMap = map;
if (!lastCategory && allCats.length > 0) lastCategory = allCats[0];
} catch { /* silent */ }
}
function mapTransaction(t: any) {
return {
id: t.id,
date: formatDateShort(t.date),
payee: t.payeeName || t.payee || '',
note: t.notes || '',
account: t.accountName || '',
accountId: t.accountId || '',
category: t.categoryName || '',
categoryType: t.transfer_id ? 'transfer' : (t.categoryName ? 'normal' : 'uncat'),
amount: t.amountDollars || 0,
categoryId: t.categoryId || ''
};
}
async function loadTransactions(append = false) {
if (loadingMore) return;
if (!append) { loading = true; transactions = []; hasMore = true; }
else loadingMore = true;
try {
let data: any[];
if (activeAccountId) {
// Per-account: supports offset/limit pagination
const offset = append ? transactions.length : 0;
const resp = await api(`/transactions?accountId=${activeAccountId}&limit=${PAGE_SIZE}&offset=${offset}`);
data = resp.transactions || resp || [];
} else {
// All accounts: /recent doesn't support offset
// Load more when viewing uncategorized to capture all of them
const limit = activeTab === 'uncategorized'
? Math.max(500, (append ? transactions.length + PAGE_SIZE : PAGE_SIZE))
: (append ? transactions.length + PAGE_SIZE : PAGE_SIZE);
data = await api(`/transactions/recent?limit=${limit}`);
if (append) {
const existingIds = new Set(transactions.map(t => t.id));
data = data.filter((t: any) => !existingIds.has(t.id));
}
}
const mapped = (Array.isArray(data) ? data : []).map(mapTransaction);
if (append) {
transactions = [...transactions, ...mapped];
} else {
transactions = mapped;
}
hasMore = mapped.length >= PAGE_SIZE;
} catch { /* silent */ }
finally { loading = false; loadingMore = false; }
}
function loadMore() {
if (hasMore && !loadingMore) loadTransactions(true);
}
function selectAccount(accountId: string | null) {
activeAccountId = accountId;
loadTransactions();
}
async function loadBudget() {
try {
const now = new Date();
const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
const data = await api(`/budget/${month}`);
budgetGroups = (data.categoryGroups || [])
.filter((g: any) => g.categories?.length > 0)
.map((g: any) => ({
name: g.name,
categories: g.categories
.filter((c: any) => c.name !== 'Starting Balances')
.map((c: any) => ({
name: c.name,
budgeted: Math.round(c.budgeted / 100),
spent: Math.round(Math.abs(c.spent) / 100),
available: Math.round(c.balance / 100)
}))
}))
.filter((g: any) => g.categories.length > 0);
} catch { /* silent */ }
}
async function loadSuggested() {
try {
const data = await api('/suggested-transfers');
suggestedTransfers = data.map((s: any) => ({
id: s.from.id + '-' + s.to.id,
from: { account: s.from.account, payee: s.from.payee },
to: { account: s.to.account, payee: s.to.payee },
amount: s.amountDollars,
confidence: s.confidence,
fromId: s.from.id,
toId: s.to.id
}));
} catch { /* silent */ }
}
// ── Actions ──
async function categorize(id: string, category: string) {
if (!category) return;
lastCategory = category;
let catId = categoryMap[category];
// If category ID not found, refresh category map and retry
if (!catId) {
await loadCategories();
catId = categoryMap[category];
if (!catId) return; // Still not found, bail
}
// Save previous state for revert
const prev = transactions.find(t => t.id === id);
const prevCat = prev?.category || '';
const prevType = prev?.categoryType || 'uncat';
// Optimistic update
const wasUncat = prevType === 'uncat';
transactions = transactions.map(t =>
t.id === id ? { ...t, category, categoryType: 'normal', categoryId: catId } : t
);
if (wasUncat) totalUncatCount = Math.max(0, totalUncatCount - 1);
// Persist to backend
try {
await api(`/transactions/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ category: catId })
});
} catch {
// Revert on failure
transactions = transactions.map(t =>
t.id === id ? { ...t, category: prevCat, categoryType: prevType, categoryId: '' } : t
);
if (wasUncat) totalUncatCount++;
}
}
async function bulkCategorize(category: string) {
if (!category) return;
lastCategory = category;
const catId = categoryMap[category];
const ids = Array.from(selected).filter(id => {
const t = transactions.find(tx => tx.id === id);
return t && t.categoryType === 'uncat';
});
// Optimistic update
transactions = transactions.map(t =>
ids.includes(t.id) ? { ...t, category, categoryType: 'normal', categoryId: catId } : t
);
totalUncatCount = Math.max(0, totalUncatCount - ids.length);
selected = new Set();
bulkCategoryOpen = false;
// Persist each to backend
for (const id of ids) {
try {
await api(`/transactions/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ category: catId })
});
} catch { /* silent - optimistic already applied */ }
}
}
async function makeTransfer(fromId: string, toId: string) {
saving = true;
try {
await api('/make-transfer', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ transactionId1: fromId, transactionId2: toId })
});
// Reload transactions to reflect transfer state
await loadTransactions();
} catch { /* silent */ }
finally { saving = false; }
}
async function linkSelectedAsTransfer() {
if (selected.size !== 2) return;
const ids = Array.from(selected);
await makeTransfer(ids[0], ids[1]);
selected = new Set();
}
async function linkSuggestedTransfer(suggestion: any) {
await makeTransfer(suggestion.fromId, suggestion.toId);
suggestedTransfers = suggestedTransfers.filter(s => s.id !== suggestion.id);
}
function dismissSuggestion(id: string) {
suggestedTransfers = suggestedTransfers.filter(s => s.id !== id);
}
function toggleSelect(id: string) {
const next = new Set(selected);
if (next.has(id)) next.delete(id); else next.add(id);
selected = next;
}
function handleRowKeydown(e: KeyboardEvent, txnId: string) {
if (e.key === 'c' || e.key === 'C') {
e.preventDefault();
const row = (e.target as HTMLElement).closest('.txn-row');
const select = row?.querySelector('.cat-select') as HTMLSelectElement | null;
if (select) { select.focus(); select.click(); }
}
}
// ── Formatters ──
function formatDateShort(dateStr: string): string {
const d = new Date(dateStr + 'T00:00:00');
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
function formatBudgetAmount(amount: number): string {
return '$' + Math.abs(amount).toLocaleString('en-US');
}
function formatBalance(balance: number): string {
const abs = Math.abs(balance);
return (balance < 0 ? '-' : '') + '$' + abs.toLocaleString('en-US');
}
function formatAmount(amount: number): string {
const abs = Math.abs(amount);
const formatted = '$' + abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
return amount >= 0 ? '+' + formatted : '-' + formatted;
}
async function loadSummary() {
try {
const [summary, uncat] = await Promise.all([
api('/summary'),
api('/uncategorized-count')
]);
headerSpending = '$' + Math.abs(summary.spendingDollars || 0).toLocaleString('en-US');
headerIncome = '$' + Math.abs(summary.incomeDollars || 0).toLocaleString('en-US');
totalUncatCount = uncat.count || 0;
const m = summary.month || '';
if (m) {
const d = new Date(m + '-01');
currentMonthLabel = d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
}
} catch { /* silent */ }
}
// ── Init ──
onMount(async () => {
await Promise.all([loadAccounts(), loadCategories(), loadTransactions(), loadBudget(), loadSuggested(), loadSummary()]);
loading = false;
});
</script>
<div class="budget-page">
<div class="budget-layout">
<!-- Desktop sidebar -->
<aside class="budget-sidebar desktop-only">
<div class="sidebar-header">Budget</div>
<div class="sidebar-nav">
<button class="sidebar-nav-item" class:active={activeView === 'transactions' && !activeAccountId} onclick={() => { activeView = 'transactions'; selectAccount(null); }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
All Transactions
{#if uncatCount > 0}<span class="sidebar-badge">{uncatCount}</span>{/if}
</button>
<button class="sidebar-nav-item" class:active={activeView === 'budget'} onclick={() => activeView = 'budget'}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
Budget
</button>
</div>
<div class="sidebar-accounts">
<div class="acct-group-header"><span>Budget</span><span class="acct-group-total positive">{formatBalance(accounts.reduce((s, a) => s + a.balance, 0))}</span></div>
{#each accounts as acct}
<button class="acct-row" class:active={activeAccountId === acct.id} onclick={() => { activeView = 'transactions'; selectAccount(acct.id || null); }}><span class="acct-name">{acct.name}</span><span class="acct-bal" class:positive={acct.positive} class:negative={!acct.positive}>{formatBalance(acct.balance)}</span></button>
{/each}
<div class="acct-group-header" style="margin-top:8px"><span>Off Budget</span><span class="acct-group-total">{formatBalance(offBudgetAccounts.reduce((s, a) => s + a.balance, 0))}</span></div>
{#each offBudgetAccounts as acct}
<button class="acct-row" class:active={activeAccountId === acct.id} onclick={() => { activeView = 'transactions'; selectAccount(acct.id || null); }}><span class="acct-name">{acct.name}</span><span class="acct-bal positive">{formatBalance(acct.balance)}</span></button>
{/each}
</div>
</aside>
<!-- Main workspace -->
<div class="budget-main">
<div class="budget-header">
<div>
{#if activeAccountId}
<button class="back-to-all" onclick={() => selectAccount(null)}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
All Transactions
</button>
<div class="budget-title">{accounts.find(a => a.id === activeAccountId)?.name || offBudgetAccounts.find(a => a.id === activeAccountId)?.name || 'Account'}</div>
{:else}
<div class="budget-label">Budget</div>
<div class="budget-title">{currentMonthLabel} · <strong>{headerSpending}</strong> spent</div>
<div class="budget-meta">{headerIncome} income · {uncatCount} uncategorized</div>
{/if}
</div>
<button class="accounts-trigger mobile-only" onclick={() => accountsOpen = !accountsOpen}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
Accounts
<svg viewBox="0 0 10 6" fill="none" class="chevron" class:open={accountsOpen}><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
<!-- Mobile view toggle -->
<div class="view-toggle mobile-only">
<button class="view-btn" class:active={activeView === 'transactions'} onclick={() => activeView = 'transactions'}>Transactions</button>
<button class="view-btn" class:active={activeView === 'budget'} onclick={() => activeView = 'budget'}>Budget</button>
</div>
{#if accountsOpen}
<div class="mobile-accounts">
<div class="acct-group-header"><span>Budget</span><span class="acct-group-total positive">{formatBalance(accounts.reduce((s, a) => s + a.balance, 0))}</span></div>
{#each accounts as acct}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="mobile-acct-row" onclick={() => { selectAccount(acct.id || null); accountsOpen = false; }}><span class="acct-name">{acct.name}</span><span class="acct-bal" class:positive={acct.positive} class:negative={!acct.positive}>{formatBalance(acct.balance)}</span></div>
{/each}
<div class="acct-group-header" style="margin-top:8px"><span>Off Budget</span><span class="acct-group-total">{formatBalance(offBudgetAccounts.reduce((s, a) => s + a.balance, 0))}</span></div>
{#each offBudgetAccounts as acct}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="mobile-acct-row" onclick={() => { selectAccount(acct.id || null); accountsOpen = false; }}><span class="acct-name">{acct.name}</span><span class="acct-bal positive">{formatBalance(acct.balance)}</span></div>
{/each}
</div>
{/if}
{#if activeView === 'transactions'}
<!-- Suggested Transfers -->
{#if suggestedTransfers.length > 0}
<div class="suggestions">
<div class="suggestions-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;color:var(--accent)"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
<span class="suggestions-title">Suggested Transfers</span>
<span class="suggestions-count">{suggestedTransfers.length}</span>
</div>
{#each suggestedTransfers as s}
<div class="suggestion-row">
<div class="suggestion-pair">
<div class="suggestion-acct">{s.from.account}</div>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;color:var(--text-4);flex-shrink:0"><path d="M5 12h14"/><polyline points="12 5 19 12 12 19"/></svg>
<div class="suggestion-acct">{s.to.account}</div>
</div>
<div class="suggestion-amount">${s.amount.toLocaleString('en-US', { minimumFractionDigits: 2 })}</div>
<div class="suggestion-actions">
<button class="sug-btn link" onclick={() => linkSuggestedTransfer(s)}>Link</button>
<button class="sug-btn skip" onclick={() => dismissSuggestion(s.id)}>Skip</button>
</div>
</div>
{/each}
</div>
{/if}
<!-- Selection bar -->
{#if selected.size > 0}
<div class="selection-bar">
<span class="selection-count">{selected.size} selected</span>
{#if canTransfer}
<button class="transfer-btn" onclick={linkSelectedAsTransfer}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
Make Transfer
</button>
{/if}
<div class="bulk-cat">
{#if bulkCategoryOpen}
<select class="bulk-cat-select" onchange={(e) => bulkCategorize((e.target as HTMLSelectElement).value)}>
<option value="">Apply category...</option>
{#each sortedCategories() as cat}
<option value={cat}>{cat}</option>
{/each}
</select>
{:else}
<button class="bulk-cat-btn" onclick={() => bulkCategoryOpen = true}>
Set Category
</button>
{/if}
</div>
<button class="clear-btn" onclick={() => { selected = new Set(); bulkCategoryOpen = false; }}>Clear</button>
</div>
{/if}
<!-- Tabs -->
<div class="budget-tabs">
<button class="tab" class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadTransactions(); }}>All</button>
<button class="tab" class:active={activeTab === 'uncategorized'} onclick={() => { activeTab = 'uncategorized'; loadTransactions(); }}>Uncategorized <span class="tab-badge">{uncatCount}</span></button>
<button class="tab" class:active={activeTab === 'categorized'} onclick={() => { activeTab = 'categorized'; loadTransactions(); }}>Categorized</button>
</div>
<!-- Transactions -->
<div class="txn-card">
{#each filteredTransactions() as txn (txn.id)}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="txn-row"
class:txn-uncat={txn.categoryType === 'uncat'}
class:txn-selected={selected.has(txn.id)}
tabindex="0"
onkeydown={(e) => handleRowKeydown(e, txn.id)}
>
<input type="checkbox" class="txn-check" checked={selected.has(txn.id)} onchange={() => toggleSelect(txn.id)} />
<div class="txn-date">{txn.date}</div>
<div class="txn-payee">
{#if txn.categoryType === 'transfer'}
<div class="txn-name transfer-name">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;flex-shrink:0"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
{txn.payee}
</div>
{:else}
<div class="txn-name">{txn.payee}</div>
{#if txn.note}<div class="txn-note">{txn.note}</div>{/if}
{/if}
</div>
<div class="txn-account">{txn.account}</div>
<div class="txn-category">
{#if txn.categoryType === 'transfer'}
<span class="cat-pill transfer">Transfer</span>
{:else if txn.categoryType === 'uncat'}
<select class="cat-select" onchange={(e) => categorize(txn.id, (e.target as HTMLSelectElement).value)}>
<option value="">Select category</option>
{#each sortedCategories() as cat}
<option value={cat}>{cat}</option>
{/each}
</select>
{:else}
<span class="cat-pill">{txn.category}</span>
{/if}
</div>
<div class="txn-amount" class:pos={txn.amount >= 0} class:neg={txn.amount < 0}>{formatAmount(txn.amount)}</div>
</div>
{/each}
{#if hasMore}
<button class="load-more-btn" onclick={loadMore} disabled={loadingMore}>
{loadingMore ? 'Loading...' : 'Load more transactions'}
</button>
{/if}
</div>
{:else}
<!-- Budget Overview -->
<div class="budget-overview">
{#each budgetGroups as group}
<div class="budget-group">
<div class="budget-group-header">{group.name}</div>
<div class="budget-table">
<div class="budget-table-header">
<span class="bt-name">Category</span>
<span class="bt-val">Budgeted</span>
<span class="bt-val">Spent</span>
<span class="bt-val">Available</span>
</div>
{#each group.categories as cat}
<div class="budget-table-row" class:overspent={cat.available < 0}>
<span class="bt-name">{cat.name}</span>
<span class="bt-val">{formatBudgetAmount(cat.budgeted)}</span>
<span class="bt-val spent">{formatBudgetAmount(cat.spent)}</span>
<span class="bt-val" class:positive={cat.available > 0} class:negative={cat.available < 0}>{cat.available < 0 ? '-' : ''}{formatBudgetAmount(Math.abs(cat.available))}</span>
</div>
{/each}
</div>
</div>
{/each}
</div>
{/if}
</div>
</div>
</div>
<style>
.budget-page { padding: 0; margin: -16px; }
.budget-layout { display: flex; min-height: calc(100vh - 56px); }
.desktop-only { display: none; }
@media (min-width: 768px) { .desktop-only { display: flex; } }
.mobile-only { display: flex; }
@media (min-width: 768px) { .mobile-only { display: none; } }
/* ── Sidebar ── */
.budget-sidebar { width: 250px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface); flex-direction: column; overflow-y: auto; }
.sidebar-header { font-size: var(--text-md); font-weight: 600; padding: var(--sp-5) var(--sp-4) var(--sp-3); color: var(--text-1); }
.sidebar-nav { padding: 0 var(--sp-2) var(--sp-2); }
.sidebar-nav-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 9px 12px; background: none; border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-3); cursor: pointer; transition: all 150ms; text-align: left; font-family: var(--font); }
.sidebar-nav-item:hover { color: var(--text-1); background: var(--card-hover); }
.sidebar-nav-item.active { color: var(--text-1); background: var(--accent-dim); }
.sidebar-nav-item :global(svg) { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-badge { margin-left: auto; font-size: var(--text-xs); font-family: var(--mono); background: var(--accent-dim); color: var(--accent); padding: 1px 6px; border-radius: var(--radius-xs); }
.sidebar-accounts { padding: var(--sp-2) 0; border-top: 1px solid var(--border); flex: 1; }
.acct-group-header { display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); }
.acct-group-total { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-3); }
.acct-group-total.positive { color: var(--success); }
.acct-row { display: flex; align-items: center; width: 100%; padding: 6px 16px; background: none; border: none; font-size: var(--text-sm); color: var(--text-2); cursor: pointer; transition: background 150ms; text-align: left; font-family: var(--font); }
.acct-row:hover { background: var(--card-hover); }
.acct-row.active { background: var(--accent-dim); color: var(--accent); }
.load-more-btn {
display: block; width: 100%; padding: var(--sp-3); margin-top: var(--sp-1);
background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm);
font-size: var(--text-sm); font-weight: 500; color: var(--text-3); cursor: pointer;
font-family: var(--font); transition: all var(--transition);
}
.load-more-btn:hover { background: var(--card-hover); color: var(--text-1); }
.load-more-btn:disabled { opacity: 0.5; cursor: default; }
.acct-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-bal { margin-left: auto; font-family: var(--mono); font-size: var(--text-sm); flex-shrink: 0; }
.acct-bal.positive { color: var(--success); }
.acct-bal.negative { color: var(--error); }
/* ── Main ── */
.budget-main { flex: 1; min-width: 0; padding: var(--sp-6); overflow-y: auto; }
.budget-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); }
.budget-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1); }
.back-to-all {
display: inline-flex; align-items: center; gap: var(--sp-1);
font-size: var(--text-sm); color: var(--text-3); background: none; border: none;
cursor: pointer; font-family: var(--font); padding: 0; margin-bottom: var(--sp-1);
transition: color var(--transition);
}
.back-to-all:hover { color: var(--accent); }
.back-to-all svg { width: 14px; height: 14px; }
.budget-title { font-size: var(--text-xl); font-weight: 300; color: var(--text-1); line-height: 1.2; }
.budget-meta { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--sp-1); }
/* Mobile trigger */
.accounts-trigger { align-items: center; gap: var(--sp-1.5); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; color: var(--text-2); cursor: pointer; font-family: var(--font); transition: all var(--transition); flex-shrink: 0; }
.accounts-trigger:hover { background: var(--card-hover); }
.accounts-trigger :global(svg) { width: 16px; height: 16px; }
.chevron { width: 10px; height: 10px; transition: transform 200ms; }
.chevron.open { transform: rotate(180deg); }
.mobile-accounts { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.mobile-acct-row { display: flex; justify-content: space-between; padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--text-2); cursor: pointer; transition: color var(--transition); }
.mobile-acct-row:hover { color: var(--text-1); }
/* ── Suggested Transfers ── */
.suggestions { margin-bottom: var(--sp-4); padding: 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent-dim) 60%, transparent); border: 1px solid var(--accent-border); }
.suggestions-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 10px; }
.suggestions-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.suggestions-count { font-size: var(--text-xs); font-family: var(--mono); background: var(--accent); color: white; padding: 1px 5px; border-radius: var(--radius-xs); }
.suggestion-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 12px; border-radius: var(--radius-md); background: var(--card); margin-bottom: var(--sp-1); transition: background var(--transition); }
.suggestion-row:last-child { margin-bottom: 0; }
.suggestion-row:hover { background: var(--card-hover); }
.suggestion-pair { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.suggestion-acct { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-amount { font-family: var(--mono); font-size: var(--text-sm); font-weight: 500; color: var(--text-3); flex-shrink: 0; }
.suggestion-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.sug-btn { padding: 5px 11px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; border: none; cursor: pointer; font-family: var(--font); transition: all var(--transition); }
.sug-btn.link { background: var(--accent); color: white; }
.sug-btn.link:hover { opacity: 0.9; }
.sug-btn.skip { background: none; color: var(--text-4); }
.sug-btn.skip:hover { color: var(--text-2); }
/* ── Selection bar ── */
.selection-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--radius); background: var(--accent-dim); border: 1px solid var(--accent-focus); }
.selection-count { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
.selection-hint { font-size: var(--text-sm); color: var(--text-3); }
.transfer-btn { display: flex; align-items: center; gap: var(--sp-1.5); padding: 6px 14px; border-radius: var(--radius-sm); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
.bulk-cat { display: flex; align-items: center; }
.bulk-cat-btn { padding: 6px 14px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; color: var(--text-2); cursor: pointer; font-family: var(--font); transition: all var(--transition); }
.bulk-cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.bulk-cat-select { padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--accent); background: var(--card); color: var(--text-1); font-family: var(--font); cursor: pointer; min-width: 140px; }
.bulk-cat-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.clear-btn { margin-left: auto; background: none; border: none; font-size: var(--text-sm); color: var(--text-3); cursor: pointer; font-family: var(--font); }
.clear-btn:hover { color: var(--text-1); }
/* ── Tabs ── */
.budget-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.tab { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; transition: all var(--transition); font-family: var(--font); }
.tab:hover { color: var(--text-1); background: var(--card-hover); }
.tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.tab-badge { font-size: var(--text-xs); font-family: var(--mono); background: var(--accent-dim); color: var(--accent); padding: 1px 6px; border-radius: var(--radius-xs); margin-left: var(--sp-1); }
/* ── Transaction card ── */
.txn-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; }
.txn-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; transition: background var(--transition); }
.txn-row:hover { background: var(--card-hover); }
.txn-row + .txn-row { border-top: 1px solid var(--border); }
.txn-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
.txn-row:nth-child(even):hover { background: var(--card-hover); }
.txn-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.txn-uncat { border-left: 4px solid var(--warning); }
.txn-selected { background: color-mix(in srgb, var(--accent) 6%, var(--card)) !important; border-left: 4px solid var(--accent); }
.txn-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.txn-date { font-size: var(--text-sm); color: var(--text-4); width: 48px; flex-shrink: 0; }
.txn-payee { flex: 1.5; min-width: 0; }
.txn-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transfer-name { display: flex; align-items: center; gap: var(--sp-1.5); color: var(--accent); font-weight: 500; }
.txn-note { font-size: var(--text-xs); color: var(--text-4); margin-top: var(--sp-0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txn-account { flex: 0.7; font-size: var(--text-sm); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txn-category { flex: 0.9; padding-right: var(--sp-2); }
.cat-pill { display: inline-block; padding: var(--sp-1) 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; background: var(--accent-dim); color: var(--accent); }
.cat-pill.transfer { background: var(--accent-dim); color: var(--accent); font-weight: 500; }
.cat-select {
padding: 8px 10px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border));
background: color-mix(in srgb, var(--warning) 2%, var(--card));
color: var(--text-1);
font-family: var(--font);
cursor: pointer;
width: 100%;
max-width: 160px;
min-height: 38px;
transition: all var(--transition);
}
.cat-select:hover { border-color: var(--accent); background: var(--card); }
.cat-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background: var(--card); }
.txn-amount { font-family: var(--mono); font-size: var(--text-base); font-weight: 600; text-align: right; min-width: 90px; padding-left: var(--sp-2); }
.txn-amount.pos { color: var(--success); }
.txn-amount.neg { color: var(--error); }
/* ── Sidebar refinement ── */
.acct-row { padding: 5px 16px; font-size: var(--text-xs); }
.acct-bal { font-size: var(--text-xs); }
/* ── View toggle (mobile) ── */
.view-toggle { gap: var(--sp-0.5); padding: 3px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); margin-bottom: var(--sp-4); }
.view-btn { flex: 1; padding: 7px 0; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; border: none; background: none; color: var(--text-3); cursor: pointer; font-family: var(--font); transition: all var(--transition); }
.view-btn.active { background: var(--card); color: var(--text-1); box-shadow: var(--shadow-xs); }
/* ── Budget Overview ── */
.budget-overview { display: flex; flex-direction: column; gap: var(--sp-6); }
.budget-group-header { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); margin-bottom: var(--sp-2); }
.budget-table { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.budget-table-header { display: flex; padding: 10px 16px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); border-bottom: 1px solid var(--border); }
.budget-table-row { display: flex; padding: 14px 16px; cursor: default; }
.budget-table-row + .budget-table-row { border-top: 1px solid var(--border); }
.budget-table-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 55%, var(--card)); }
.budget-table-row.overspent { border-left: 3px solid var(--error); }
.bt-name { flex: 1.5; font-size: var(--text-base); font-weight: 400; color: var(--text-2); }
.budget-table-header .bt-name { font-size: var(--text-xs); font-weight: 600; color: var(--text-4); }
.bt-val { flex: 1; text-align: right; font-family: var(--mono); font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
.budget-table-header .bt-val { font-family: var(--font); font-size: var(--text-xs); font-weight: 600; color: var(--text-4); }
.bt-val.spent { color: var(--error); }
.bt-val.positive { color: var(--success); font-weight: 600; }
.bt-val.negative { color: var(--error); font-weight: 600; }
/* ── Mobile ── */
@media (max-width: 767px) {
.budget-page { margin: -16px; }
.budget-main { padding: var(--sp-4) var(--sp-4) var(--sp-20); }
.txn-account { display: none; }
.txn-row { gap: 10px; padding: 16px 14px; }
.txn-payee { flex: 1.2; }
.txn-category { flex: 1; }
.txn-date { width: 42px; font-size: var(--text-sm); }
.txn-name { font-size: var(--text-base); }
.txn-amount { min-width: 75px; font-size: var(--text-sm); }
.cat-select { max-width: none; min-height: 40px; font-size: var(--text-base); }
.suggestion-pair { flex-direction: column; align-items: flex-start; gap: var(--sp-0.5); }
.suggestion-row { flex-wrap: wrap; }
.selection-bar { flex-wrap: wrap; gap: var(--sp-2); }
}
@media (min-width: 768px) {
.budget-page { margin: -20px; }
.mobile-accounts { display: none; }
}
</style>

1605
frontend-v2/src/routes/(app)/fitness/+page.svelte Normal file
View File

File diff suppressed because it is too large Load Diff

149
frontend-v2/src/routes/(app)/fitness/foods/+page.svelte Normal file
View File

@@ -0,0 +1,149 @@
<script lang="ts">
import { onMount } from 'svelte';
interface FoodItem { id: string; name: string; info: string; calories: number; }
let searchQuery = $state('');
let foods = $state<FoodItem[]>([]);
let loading = $state(true);
function mapFood(f: any): FoodItem {
const id = f.id || f.food_id || '';
const name = f.name || f.snapshot_food_name || 'Unknown';
const brand = f.brand ? `${f.brand} · ` : '';
const unit = f.base_unit === '100g' ? '100g' : (f.servings?.[0]?.label || f.base_unit || 'serving');
return { id, name, info: `${brand}${unit}`, calories: Math.round(f.calories_per_base || 0) };
}
async function loadFoods(query?: string) {
loading = true;
try {
const url = query
? `/api/fitness/foods/search?q=${encodeURIComponent(query)}&limit=50`
: `/api/fitness/foods?limit=50`;
const res = await fetch(url, { credentials: 'include' });
if (res.ok) {
const raw = await res.json();
foods = (Array.isArray(raw) ? raw : []).map(mapFood);
}
} catch { /* silent */ }
loading = false;
}
let debounceTimer: ReturnType<typeof setTimeout>;
$effect(() => {
const q = searchQuery;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => loadFoods(q || undefined), q ? 300 : 0);
});
const filteredFoods = $derived(foods);
</script>
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="page-title">FITNESS</div>
<div class="page-subtitle">Food Library</div>
</div>
<div class="search-bar">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input
class="input search-input"
type="text"
placeholder="Search foods..."
bind:value={searchQuery}
/>
</div>
<div class="food-list">
{#each filteredFoods as food (food.name)}
<div class="food-row">
<div class="food-info">
<div class="food-name">{food.name}</div>
<div class="food-meta">{food.info}</div>
</div>
<div class="food-right">
<span class="food-cal">{food.calories}</span>
<button class="btn-icon add-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
</div>
</div>
{/each}
</div>
</div>
</div>
<style>
.page-subtitle {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: 1.2;
}
.search-bar {
position: relative;
margin-bottom: var(--section-gap);
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-3);
pointer-events: none;
}
.search-input {
padding-left: 40px;
}
.food-list {
display: flex;
flex-direction: column;
gap: 0;
}
.food-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.food-row:last-child { border-bottom: none; }
.food-name {
font-size: var(--text-base);
font-weight: 500;
color: var(--text-1);
}
.food-meta {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: var(--sp-0.5);
}
.food-right {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-shrink: 0;
}
.food-cal {
font-size: var(--text-base);
font-family: var(--mono);
color: var(--text-1);
}
.add-btn {
width: 32px;
height: 32px;
}
@media (max-width: 768px) {
.page-subtitle { font-size: var(--text-xl); }
}
</style>

157
frontend-v2/src/routes/(app)/fitness/goals/+page.svelte Normal file
View File

@@ -0,0 +1,157 @@
<script lang="ts">
import { onMount } from 'svelte';
let goals = $state([
{ label: 'Calories', value: '...', unit: 'kcal/day' },
{ label: 'Protein', value: '...', unit: 'grams/day' },
{ label: 'Carbs', value: '...', unit: 'grams/day' },
{ label: 'Fat', value: '...', unit: 'grams/day' }
]);
let startDate = $state('');
onMount(async () => {
try {
const n = new Date();
const today = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
const res = await fetch(`/api/fitness/goals/for-date?date=${today}`, { credentials: 'include' });
if (res.ok) {
const g = await res.json();
goals = [
{ label: 'Calories', value: (g.calories || 0).toLocaleString(), unit: 'kcal/day' },
{ label: 'Protein', value: String(g.protein || 0), unit: 'grams/day' },
{ label: 'Carbs', value: String(g.carbs || 0), unit: 'grams/day' },
{ label: 'Fat', value: String(g.fat || 0), unit: 'grams/day' },
];
if (g.start_date) {
const d = new Date(g.start_date + 'T00:00:00');
startDate = d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
}
}
} catch { /* silent */ }
});
</script>
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="page-title">FITNESS</div>
<div class="page-subtitle">Daily Goals</div>
</div>
<div class="module">
<div class="module-header">
<div class="module-title">CURRENT GOALS</div>
<button class="module-action">Edit Goals</button>
</div>
<div class="goals-grid">
{#each goals as goal}
<div class="goal-card">
<div class="goal-label">{goal.label}</div>
<div class="goal-value">{goal.value}</div>
<div class="goal-unit">{goal.unit}</div>
</div>
{/each}
</div>
<div class="start-date">
<span class="start-date-label">Start date</span>
<span class="start-date-value">{startDate || '—'}</span>
</div>
</div>
</div>
</div>
<style>
.page-subtitle {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: 1.2;
}
.module {
background: var(--card);
border-radius: var(--radius);
padding: var(--card-pad-primary);
box-shadow: var(--card-shadow);
border: 1px solid var(--border);
}
.module-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-5);
}
.module-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.module-action {
font-size: var(--text-sm);
color: var(--accent);
font-weight: 500;
cursor: pointer;
background: none;
border: none;
padding: 0;
}
.module-action:hover { text-decoration: underline; }
.goals-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--row-gap);
margin-bottom: var(--sp-5);
}
.goal-card {
background: var(--surface-secondary);
border-radius: var(--radius-sm);
padding: var(--sp-4);
border: 1px solid var(--border);
}
.goal-label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--sp-2);
}
.goal-value {
font-size: var(--text-xl);
font-weight: 500;
font-family: var(--mono);
color: var(--text-1);
line-height: 1;
}
.goal-unit {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: var(--sp-1);
}
.start-date {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
.start-date-label {
font-size: var(--text-sm);
color: var(--text-3);
}
.start-date-value {
font-size: var(--text-sm);
color: var(--text-2);
font-weight: 500;
}
@media (max-width: 768px) {
.page-subtitle { font-size: var(--text-xl); }
}
</style>

136
frontend-v2/src/routes/(app)/fitness/templates/+page.svelte Normal file
View File

@@ -0,0 +1,136 @@
<script lang="ts">
import { onMount } from 'svelte';
interface Template { id: string; name: string; calories: number; items: number; meal: string; }
let templates = $state<Template[]>([]);
let loading = $state(true);
function mealIcon(meal: string): string {
if (meal === 'breakfast') return '🥣';
if (meal === 'lunch') return '🍗';
if (meal === 'dinner') return '🍽️';
return '🥤';
}
onMount(async () => {
try {
const res = await fetch('/api/fitness/templates', { credentials: 'include' });
if (res.ok) {
const raw = await res.json();
templates = (Array.isArray(raw) ? raw : []).map((t: any) => {
const items = t.items || [];
const totalCal = items.reduce((s: number, i: any) => s + (i.snapshot_calories || 0) * (i.quantity || 1), 0);
return { id: t.id, name: t.name, calories: Math.round(totalCal), items: items.length, meal: t.meal_type || 'snack' };
});
}
} catch { /* silent */ }
loading = false;
});
</script>
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="header-row">
<div>
<div class="page-title">FITNESS</div>
<div class="page-subtitle">Meal Templates</div>
</div>
<button class="btn-primary">+ New Template</button>
</div>
</div>
<div class="template-list">
{#if loading}
<div class="template-empty">Loading...</div>
{:else if templates.length === 0}
<div class="template-empty">No meal templates yet</div>
{:else}
{#each templates as tpl}
<div class="template-row">
<div class="template-icon">{mealIcon(tpl.meal)}</div>
<div class="template-info">
<div class="template-name">{tpl.name}</div>
<div class="template-meta">{tpl.calories} cal &middot; {tpl.items} items</div>
</div>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
</div>
{/each}
{/if}
</div>
</div>
</div>
<style>
.header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
}
.page-subtitle {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: 1.2;
}
.template-list {
display: flex;
flex-direction: column;
gap: var(--row-gap);
}
.template-row {
display: flex;
align-items: center;
gap: 14px;
padding: var(--sp-4) var(--sp-5);
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--card-shadow-sm);
cursor: pointer;
transition: all var(--transition);
}
.template-row:hover {
transform: translateY(-1px);
box-shadow: var(--card-shadow);
}
.template-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--surface-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
flex-shrink: 0;
}
.template-info {
flex: 1;
min-width: 0;
}
.template-name {
font-size: var(--text-base);
font-weight: 500;
color: var(--text-1);
}
.template-meta {
font-size: var(--text-sm);
color: var(--text-3);
margin-top: var(--sp-0.5);
}
.template-empty { padding: var(--sp-8); text-align: center; color: var(--text-3); font-size: var(--text-base); }
.chevron {
width: 16px;
height: 16px;
color: var(--text-3);
flex-shrink: 0;
}
@media (max-width: 768px) {
.page-subtitle { font-size: var(--text-xl); }
}
</style>

902
frontend-v2/src/routes/(app)/inventory/+page.svelte Normal file
View File

@@ -0,0 +1,902 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/state';
import ImmichPicker from '$lib/components/shared/ImmichPicker.svelte';
// ── Types matching NocoDB fields ──
interface InventoryItem {
id: number;
name: string;
order: string;
sku: string;
serial: string;
status: string;
price: number;
tax: number;
total: number;
qty: number;
tracking: string;
vendor: string;
buyerName: string;
date: string;
notes: string;
photos: number;
photoUrls: string[];
}
interface ItemDetailRaw {
Id: number;
Item: string;
'Order Number': string;
'Serial Numbers': string;
SKU: string;
Received: string;
'Price Per Item': number;
Tax: number;
Total: number;
QTY: number;
'Tracking Number': string;
Source: string;
Name: string;
Date: string;
Notes: string;
photos: any[];
[key: string]: any;
}
// ── State ──
let activeTab = $state<'issues' | 'review' | 'all'>('issues');
let searchQuery = $state('');
let detailOpen = $state(false);
let selectedItem = $state<InventoryItem | null>(null);
let selectedDetail = $state<ItemDetailRaw | null>(null);
let nocodbUrl = $state('');
let recentItems = $state<InventoryItem[]>([]);
let issueItems = $state<InventoryItem[]>([]);
let reviewItems = $state<InventoryItem[]>([]);
let recentLoaded = $state(false);
let loading = $state(true);
let searching = $state(false);
let searchResults = $state<InventoryItem[] | null>(null);
let saving = $state(false);
let debounceTimer: ReturnType<typeof setTimeout>;
// ── Derived ──
const issueCount = $derived(issueItems.length);
const reviewCount = $derived(reviewItems.length);
const displayedItems = $derived(() => {
if (searchResults !== null) return searchResults;
if (activeTab === 'issues') return issueItems;
if (activeTab === 'review') return reviewItems;
return recentItems;
});
// ── Map API response to our item shape ──
function mapIssue(raw: any): InventoryItem {
return {
id: raw.id,
name: raw.item || '',
order: raw.orderNumber || '',
sku: raw.sku || '',
serial: raw.serialNumbers || '',
status: normalizeStatus(raw.received || ''),
price: 0,
tax: 0,
total: 0,
qty: 1,
tracking: raw.trackingNumber || '',
vendor: '',
buyerName: '',
date: '',
notes: raw.notes || '',
photos: 0,
photoUrls: []
};
}
const NOCODB_BASE = 'https://noco.quadjourney.com';
function extractPhotoUrls(photos: any[]): string[] {
if (!Array.isArray(photos)) return [];
return photos
.filter((p: any) => p && p.signedPath)
.map((p: any) => `${NOCODB_BASE}/${p.signedPath}`);
}
function mapDetail(raw: ItemDetailRaw): InventoryItem {
const photoUrls = extractPhotoUrls(raw.photos);
return {
id: raw.Id,
name: raw.Item || '',
order: raw['Order Number'] || '',
sku: raw.SKU || '',
serial: raw['Serial Numbers'] || '',
status: normalizeStatus(raw.Received || ''),
price: raw['Price Per Item'] || 0,
tax: raw.Tax || 0,
total: raw.Total || 0,
qty: raw.QTY || 1,
tracking: raw['Tracking Number'] || '',
vendor: raw.Source || '',
buyerName: raw.Name || '',
date: raw.Date || '',
notes: raw.Notes || '',
photos: Array.isArray(raw.photos) ? raw.photos.length : 0,
photoUrls
};
}
function normalizeStatus(received: string): string {
if (!received) return 'Pending';
const lower = received.toLowerCase();
if (lower === 'issue' || lower === 'issues') return 'Issue';
if (lower === 'needs review') return 'Needs Review';
if (lower === 'pending') return 'Pending';
if (lower === 'closed') return 'Closed';
// Any date string or other value = Received
return 'Received';
}
// ── API calls ──
async function loadSummary() {
try {
const res = await fetch('/api/inventory/summary', { credentials: 'include' });
if (res.ok) {
const data = await res.json();
issueItems = (data.issues || []).map(mapIssue);
reviewItems = (data.needsReview || []).map(mapIssue);
}
} catch { /* silent */ }
}
function mapSearchResult(r: any): InventoryItem {
return {
id: r.id,
name: r.item || '',
order: '', sku: '', serial: '',
status: normalizeStatus(r.received || ''),
price: 0, tax: 0, total: 0, qty: 1,
tracking: '', vendor: '', buyerName: '', date: '',
notes: '', photos: 0, photoUrls: []
};
}
async function loadRecent() {
if (recentLoaded) return;
try {
const res = await fetch('/api/inventory/recent?limit=30', { credentials: 'include' });
if (res.ok) {
const data = await res.json();
recentItems = (data.items || []).map(mapSearchResult);
recentLoaded = true;
}
} catch { /* silent */ }
}
async function searchItems(query: string) {
if (!query.trim()) { searchResults = null; return; }
searching = true;
try {
const res = await fetch(`/api/inventory/search-records?q=${encodeURIComponent(query)}`, { credentials: 'include' });
if (res.ok) {
const data = await res.json();
searchResults = (data.results || []).map((r: any) => ({
id: r.id,
name: r.item || '',
order: '', sku: '', serial: '',
status: normalizeStatus(r.received || ''),
price: 0, tax: 0, total: 0, qty: 1,
tracking: '', vendor: '', buyerName: '', date: '',
notes: '', photos: 0
}));
}
} catch { searchResults = []; }
finally { searching = false; }
}
async function loadItemDetail(id: number) {
try {
const res = await fetch(`/api/inventory/item-details/${id}`, { credentials: 'include' });
if (res.ok) {
const data = await res.json();
selectedDetail = data.item;
selectedItem = mapDetail(data.item);
nocodbUrl = data.nocodb_url || '';
detailOpen = true;
}
} catch { /* silent */ }
}
async function updateField(field: string, value: string | number) {
if (!selectedItem) return;
saving = true;
try {
const res = await fetch(`/api/inventory/item/${selectedItem.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ [field]: value }),
credentials: 'include'
});
if (res.ok && selectedDetail) {
(selectedDetail as any)[field] = value;
selectedItem = mapDetail(selectedDetail);
// Update in lists
updateItemInLists(selectedItem);
}
} catch { /* silent */ }
finally { saving = false; }
}
function updateItemInLists(item: InventoryItem) {
const issueIdx = issueItems.findIndex(i => i.id === item.id);
const allIdx = allItems.findIndex(i => i.id === item.id);
if (allIdx >= 0) allItems[allIdx] = item;
// Add/remove from issues based on status
if (item.status === 'Issue') {
if (issueIdx < 0) issueItems = [...issueItems, item];
else issueItems[issueIdx] = item;
} else {
if (issueIdx >= 0) issueItems = issueItems.filter(i => i.id !== item.id);
}
}
// ── Event handlers ──
function onSearchInput() {
clearTimeout(debounceTimer);
if (!searchQuery.trim()) { searchResults = null; return; }
debounceTimer = setTimeout(() => searchItems(searchQuery), 300);
}
function openDetail(item: InventoryItem) {
loadItemDetail(item.id);
}
function closeDetail() {
detailOpen = false;
selectedItem = null;
selectedDetail = null;
}
const statusOptions = ['Issue', 'Needs Review', 'Pending', 'Received', 'Closed'];
// Maps our status to NocoDB "Received" field values
function statusToReceived(status: string): string {
if (status === 'Issue') return 'Issues';
if (status === 'Needs Review') return 'Needs Review';
if (status === 'Pending') return 'Pending';
if (status === 'Closed') return 'Closed';
// For "Received", we set today's date
return new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}
async function changeStatus(newStatus: string) {
if (!selectedItem) return;
const receivedValue = statusToReceived(newStatus);
await updateField('Received', receivedValue);
}
function statusColor(status: string) {
if (status === 'Issue' || status === 'Issues') return 'error';
if (status === 'Needs Review') return 'warning';
if (status === 'Received') return 'success';
if (status === 'Pending') return 'warning';
if (status === 'Closed') return 'muted';
return 'muted';
}
function formatPrice(n: number) {
return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
// ── Inline editing ──
let editingField = $state('');
let editValue = $state('');
// NocoDB field name → our display label + item property
const editableFields: Record<string, { nocoField: string; type: 'text' | 'number' }> = {
'Item': { nocoField: 'Item', type: 'text' },
'Price Per Item': { nocoField: 'Price Per Item', type: 'number' },
'Tax': { nocoField: 'Tax', type: 'number' },
'Total': { nocoField: 'Total', type: 'number' },
'QTY': { nocoField: 'QTY', type: 'number' },
'SKU': { nocoField: 'SKU', type: 'text' },
'Serial Numbers': { nocoField: 'Serial Numbers', type: 'text' },
'Order Number': { nocoField: 'Order Number', type: 'text' },
'Source': { nocoField: 'Source', type: 'text' },
'Name': { nocoField: 'Name', type: 'text' },
'Date': { nocoField: 'Date', type: 'text' },
'Tracking Number': { nocoField: 'Tracking Number', type: 'text' },
'Notes': { nocoField: 'Notes', type: 'text' },
};
function startEdit(nocoField: string, currentValue: any) {
editingField = nocoField;
editValue = currentValue != null ? String(currentValue) : '';
}
async function saveEdit() {
if (!editingField || !selectedItem) return;
const field = editableFields[editingField];
const value = field?.type === 'number' ? Number(editValue) || 0 : editValue;
await updateField(editingField, value);
editingField = '';
editValue = '';
}
function cancelEdit() {
editingField = '';
editValue = '';
}
function handleEditKeydown(e: KeyboardEvent) {
if (e.key === 'Enter') saveEdit();
if (e.key === 'Escape') cancelEdit();
}
// Get raw NocoDB value for a field
function rawField(field: string): any {
return selectedDetail ? (selectedDetail as any)[field] : '';
}
// ── Action handlers ──
async function duplicateItem() {
if (!selectedItem) return;
saving = true;
try {
const res = await fetch(`/api/inventory/duplicate/${selectedItem.id}`, {
method: 'POST', credentials: 'include'
});
if (res.ok) {
const data = await res.json();
const newId = data.newId || data.id;
if (newId) loadItemDetail(newId);
}
} catch { /* silent */ }
finally { saving = false; }
}
async function sendToPhone() {
if (!selectedItem) return;
saving = true;
try {
await fetch('/api/inventory/send-to-phone', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ rowId: selectedItem.id }),
credentials: 'include'
});
} catch { /* silent */ }
finally { saving = false; }
}
// ── Photo upload ──
let fileInput: HTMLInputElement;
let uploading = $state(false);
let uploadMenuOpen = $state(false);
function triggerUpload() {
fileInput?.click();
}
async function handleFileSelect(e: Event) {
const input = e.target as HTMLInputElement;
if (!input.files?.length || !selectedItem) return;
uploading = true;
try {
const formData = new FormData();
formData.append('rowId', String(selectedItem.id));
for (const file of input.files) {
formData.append('photos', file);
}
const res = await fetch('/api/inventory/upload', {
method: 'POST',
body: formData,
credentials: 'include'
});
if (res.ok) {
// Reload item to get updated photos
loadItemDetail(selectedItem.id);
}
} catch { /* silent */ }
finally {
uploading = false;
input.value = '';
}
}
// ── Immich picker ──
let immichOpen = $state(false);
async function handleImmichSelect(assetIds: string[]) {
if (!selectedItem || !assetIds.length) return;
uploading = true;
try {
// Server-to-server: inventory service downloads from Immich and uploads to NocoDB
const res = await fetch('/api/inventory/upload-from-immich', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({
rowId: selectedItem.id,
assetIds,
deleteAfter: true
})
});
if (res.ok) {
const data = await res.json();
console.log(`Uploaded ${data.uploadedCount} photos, deleted ${data.deletedCount} from Immich`);
}
// Reload to show new photos
loadItemDetail(selectedItem.id);
} catch { /* silent */ }
finally { uploading = false; }
}
async function createNewItem() {
saving = true;
try {
const res = await fetch('/api/inventory/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ Item: 'New Item' }),
credentials: 'include'
});
if (res.ok) {
const data = await res.json();
if (data.id) loadItemDetail(data.id);
}
} catch { /* silent */ }
finally { saving = false; }
}
// ── Init ──
onMount(async () => {
await loadSummary();
loading = false;
// Auto-open from query param
const itemId = page.url.searchParams.get('item');
if (itemId) loadItemDetail(Number(itemId));
});
</script>
{#snippet editableRow(nocoField: string, displayValue: string, classes: string)}
{#if editingField === nocoField}
<div class="detail-row editing">
<span class="field-label">{nocoField}</span>
<input
class="edit-input {classes}"
type={editableFields[nocoField]?.type === 'number' ? 'number' : 'text'}
bind:value={editValue}
onkeydown={handleEditKeydown}
onblur={saveEdit}
autofocus
/>
</div>
{:else}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="detail-row editable" onclick={() => startEdit(nocoField, rawField(nocoField))}>
<span class="field-label">{nocoField}</span>
<span class="field-value {classes}">{displayValue}</span>
</div>
{/if}
{/snippet}
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="header-row">
<div>
<div class="page-title">INVENTORY</div>
<div class="page-subtitle">{loading ? 'Loading...' : ''}<strong>{issueCount} issues</strong> · {reviewCount} needs review</div>
</div>
<button class="btn-primary" onclick={createNewItem}>+ New Item</button>
</div>
</div>
<!-- Search -->
<div class="search-wrap">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input
type="text"
class="search-input"
placeholder="Search by item name, order number, serial number, SKU..."
bind:value={searchQuery}
oninput={onSearchInput}
/>
{#if searchQuery}
<button class="search-clear" onclick={() => { searchQuery = ''; searchResults = null; }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
{/if}
</div>
<!-- Tabs (hidden during search) -->
{#if !searchQuery && searchResults === null}
<div class="tabs">
<button class="tab" class:active={activeTab === 'issues'} onclick={() => activeTab = 'issues'}>
Issues <span class="tab-badge">{issueCount}</span>
</button>
<button class="tab" class:active={activeTab === 'review'} onclick={() => activeTab = 'review'}>
Needs Review <span class="tab-badge review">{reviewCount}</span>
</button>
<button class="tab" class:active={activeTab === 'all'} onclick={() => { activeTab = 'all'; loadRecent(); }}>
Recent
</button>
</div>
{:else}
<div class="search-results-label">{displayedItems().length} result{displayedItems().length !== 1 ? 's' : ''} for "{searchQuery}"</div>
{/if}
<!-- Item rows -->
<div class="items-card">
{#each displayedItems() as item (item.id)}
<button class="item-row" class:has-issue={item.status === 'Issue'} class:has-review={item.status === 'Needs Review'} onclick={() => openDetail(item)}>
<div class="item-info">
<div class="item-name">{item.name}</div>
<div class="item-meta">Order #{item.order} · SKU: {item.sku}</div>
</div>
<span class="status-badge {statusColor(item.status)}">{item.status}</span>
<svg class="row-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
{/each}
{#if displayedItems().length === 0}
<div class="empty">No items found</div>
{/if}
</div>
</div>
</div>
<!-- Detail sheet/modal -->
{#if detailOpen && selectedItem}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="detail-overlay" onclick={closeDetail}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="detail-sheet" onclick={(e) => e.stopPropagation()}>
<!-- 1. Title (editable) -->
<div class="detail-header">
{#if editingField === 'Item'}
<input
class="edit-input detail-title-edit"
type="text"
bind:value={editValue}
onkeydown={handleEditKeydown}
onblur={saveEdit}
autofocus
/>
{:else}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="detail-title editable" onclick={() => startEdit('Item', rawField('Item'))}>{selectedItem.name}</div>
{/if}
<button class="detail-close" onclick={closeDetail}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<!-- 2. Status control (segmented) -->
<div class="status-control">
{#each statusOptions as status}
<button
class="status-seg"
class:active={selectedItem.status === status}
data-status={status}
onclick={() => changeStatus(status)}
>
{status}
</button>
{/each}
</div>
<!-- 3. Photos -->
<div class="detail-photos">
{#if selectedItem.photoUrls.length > 0}
{#each selectedItem.photoUrls as url}
<img class="photo-img" src={url} alt="Item photo" loading="lazy" />
{/each}
{:else}
<div class="photo-placeholder empty-photo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
<span>No photos yet</span>
</div>
{/if}
</div>
<!-- 4. Actions -->
<div class="actions-group">
<div class="actions-row">
<input type="file" accept="image/*" multiple class="hidden-input" bind:this={fileInput} onchange={handleFileSelect} />
<button class="action-btn primary" onclick={() => uploadMenuOpen = !uploadMenuOpen} disabled={uploading}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
{uploading ? 'Uploading...' : 'Upload Photos'}
</button>
{#if uploadMenuOpen}
<div class="upload-menu">
<button class="upload-option" onclick={() => { uploadMenuOpen = false; triggerUpload(); }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
From device
</button>
<button class="upload-option" onclick={() => { uploadMenuOpen = false; immichOpen = true; }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
From Immich
</button>
</div>
{/if}
<button class="action-btn" onclick={sendToPhone}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
Phone
</button>
</div>
<div class="actions-row secondary">
<button class="action-btn sm" onclick={duplicateItem}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
Duplicate
</button>
<a class="action-btn sm ghost" href={nocodbUrl || '#'} target="_blank" rel="noopener">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
NocoDB
</a>
</div>
</div>
<!-- Purchase -->
<div class="section-group">
<div class="section-label">Purchase</div>
<div class="detail-fields">
{@render editableRow('Price Per Item', formatPrice(selectedItem.price), 'mono')}
{@render editableRow('Tax', formatPrice(selectedItem.tax), 'mono')}
{@render editableRow('Total', formatPrice(selectedItem.total), 'mono strong')}
{@render editableRow('QTY', String(selectedItem.qty), '')}
</div>
</div>
<!-- Item Info -->
<div class="section-group">
<div class="section-label">Item Info</div>
<div class="detail-fields">
{@render editableRow('SKU', selectedItem.sku || '—', 'mono')}
{@render editableRow('Serial Numbers', selectedItem.serial || '—', 'mono')}
</div>
</div>
<!-- Order -->
<div class="section-group">
<div class="section-label">Order</div>
<div class="detail-fields">
{@render editableRow('Order Number', selectedItem.order || '—', 'mono')}
{@render editableRow('Source', selectedItem.vendor || '—', '')}
{@render editableRow('Name', selectedItem.buyerName || '—', '')}
{@render editableRow('Date', selectedItem.date || '—', '')}
</div>
</div>
<!-- Shipping -->
<div class="section-group">
<div class="section-label">Shipping</div>
<div class="detail-fields">
{@render editableRow('Tracking Number', selectedItem.tracking || '—', 'mono')}
</div>
</div>
<!-- Notes -->
<div class="section-group">
<div class="section-label">Notes</div>
<div class="detail-fields">
{#if editingField === 'Notes'}
<div class="detail-row">
<textarea
class="edit-input edit-textarea"
bind:value={editValue}
onkeydown={handleEditKeydown}
onblur={saveEdit}
rows="3"
></textarea>
</div>
{:else}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="detail-row editable" onclick={() => startEdit('Notes', rawField('Notes'))}>
<span class="field-value" style="text-align:left;font-weight:400;color:var(--text-2);width:100%">{selectedItem.notes || 'Add notes...'}</span>
</div>
{/if}
</div>
</div>
</div>
</div>
{/if}
{#if immichOpen}
<ImmichPicker bind:open={immichOpen} onselect={handleImmichSelect} />
{/if}
<style>
.header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.page-subtitle { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.2; }
.btn-primary { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
.btn-primary:hover { opacity: 0.9; }
/* ── Search ── */
.search-wrap { position: relative; margin-bottom: var(--sp-4); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-4); pointer-events: none; transition: color var(--transition); }
.search-input { width: 100%; padding: var(--sp-3) var(--sp-10) var(--sp-3) 42px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--card); color: var(--text-1); font-size: var(--text-md); font-family: var(--font); transition: all var(--transition); box-shadow: var(--shadow-xs); }
.search-input::placeholder { color: var(--text-4); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim), var(--shadow-sm); }
.search-input:focus ~ .search-icon { color: var(--accent); }
.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); border-radius: var(--radius-xs); }
.search-clear:hover { color: var(--text-2); background: var(--card-hover); }
.search-clear svg { width: 16px; height: 16px; }
.search-results-label { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
/* ── Tabs ── */
.tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.tab { padding: var(--sp-2) 14px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; transition: all var(--transition); font-family: var(--font); display: flex; align-items: center; gap: var(--sp-1.5); }
.tab:hover { color: var(--text-1); background: var(--card-hover); }
.tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.tab-badge { font-size: var(--text-xs); font-weight: 600; background: var(--error); color: white; padding: 1px 7px; border-radius: 10px; }
.tab-badge.review { background: var(--warning); }
.tab-count { font-size: var(--text-xs); color: var(--text-4); }
/* ── Item rows ── */
.items-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; }
.item-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; width: 100%; background: none; border: none; cursor: pointer; transition: background var(--transition); text-align: left; font-family: var(--font); color: inherit; }
.item-row:hover { background: var(--card-hover); }
.item-row + .item-row { border-top: 1px solid var(--border); }
.item-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 68%, var(--card)); }
.item-row:nth-child(even):hover { background: var(--card-hover); }
.item-row.has-issue { border-left: 4px solid var(--error); }
.item-row.has-review { border-left: 4px solid var(--warning); }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { font-size: var(--text-sm); color: var(--text-2); margin-top: 3px; letter-spacing: 0.01em; }
.status-badge { font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--radius-sm); flex-shrink: 0; }
.status-badge.error { background: var(--error-dim); color: var(--error); }
.status-badge.success { background: var(--success-dim); color: var(--success); }
.status-badge.warning { background: var(--warning-bg); color: var(--warning); }
.status-badge.muted { background: var(--card-hover); color: var(--text-4); }
.row-chevron { width: 14px; height: 14px; color: var(--text-4); flex-shrink: 0; opacity: 0.5; }
.item-row:hover .row-chevron { opacity: 1; }
.empty { padding: var(--sp-12); text-align: center; color: var(--text-3); font-size: var(--text-base); }
/* ── Detail sheet ── */
.detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 60; display: flex; justify-content: flex-end; animation: fadeIn 150ms ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.detail-sheet { width: 520px; max-width: 100%; height: 100%; background: var(--surface); overflow-y: auto; padding: var(--sp-7); box-shadow: -12px 0 40px rgba(0,0,0,0.12); animation: slideIn 200ms ease; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: 18px; }
.detail-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); line-height: 1.35; flex: 1; min-width: 0; }
/* ── Status segmented control ── */
.status-control {
display: flex;
justify-content: center;
gap: 0;
margin: 0 8px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 3px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.status-seg {
flex: 1;
padding: 8px 0;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
background: none;
border: none;
border-radius: 9px;
cursor: pointer;
font-family: var(--font);
transition: all var(--transition);
text-align: center;
}
.status-seg:hover { color: var(--text-2); }
.status-seg.active { color: var(--text-1); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.status-seg.active[data-status="Issue"] { background: var(--error-dim); color: var(--error); }
.status-seg.active[data-status="Pending"] { background: var(--warning-bg); color: var(--warning); }
.status-seg.active[data-status="Received"] { background: var(--success-dim); color: var(--success); }
.status-seg.active[data-status="Closed"] { background: var(--card); color: var(--text-2); }
.detail-close { background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1.5); border-radius: var(--radius-md); transition: all var(--transition); }
.detail-close:hover { color: var(--text-1); background: var(--card-hover); }
.detail-close svg { width: 18px; height: 18px; }
/* ── Photos ── */
.detail-photos { display: flex; gap: 10px; margin-bottom: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-1); }
.detail-photos::-webkit-scrollbar { height: 4px; }
.detail-photos::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.photo-img { width: 140px; height: 105px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--card-hover); }
.photo-placeholder { width: 140px; height: 105px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, var(--card)); border: 1px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1.5); flex-shrink: 0; color: var(--text-4); }
.photo-placeholder svg { width: 22px; height: 22px; opacity: 0.5; }
.empty-photo { width: 100%; height: 90px; border-radius: 10px; }
.empty-photo span { font-size: var(--text-sm); color: var(--text-4); }
/* ── Actions ── */
.actions-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-7); }
.actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.actions-row.secondary { grid-template-columns: repeat(2, 1fr); }
.action-btn {
display: flex; align-items: center; justify-content: center; gap: 5px;
padding: 8px 14px; border-radius: var(--radius-md); height: 34px; width: 100%;
background: var(--card); border: 1px solid var(--border);
font-size: var(--text-sm); font-weight: 500; color: var(--text-3);
cursor: pointer; font-family: var(--font);
transition: all var(--transition);
}
.action-btn:hover { border-color: var(--text-4); color: var(--text-1); }
.action-btn:active { transform: scale(0.97); }
.action-btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.action-btn.primary:hover { opacity: 0.9; border-color: var(--accent); color: white; }
.action-btn.sm { padding: 6px 11px; font-size: var(--text-sm); height: 30px; }
.action-btn.ghost { border-color: transparent; color: var(--text-4); background: none; }
.action-btn.ghost:hover { color: var(--text-2); background: var(--card-hover); border-color: transparent; }
.action-btn svg { width: 14px; height: 14px; }
.action-btn.sm svg { width: 13px; height: 13px; }
/* ── Section groups ── */
.section-group { margin-bottom: var(--sp-7); }
.section-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: var(--sp-1.5); }
/* ── Detail fields ── */
.detail-fields { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.detail-row + .detail-row { border-top: 1px solid var(--border); }
.detail-row:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, var(--card)); }
.field-label { font-size: var(--text-sm); color: var(--text-1); opacity: 0.65; letter-spacing: 0.01em; }
.field-value { font-size: var(--text-base); font-weight: 400; color: var(--text-1); text-align: right; letter-spacing: -0.01em; }
/* ── Inline editing ── */
.detail-row.editable { cursor: pointer; }
.detail-row.editable:hover { background: var(--card-hover); }
.detail-title.editable { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; }
.detail-title.editable:hover { background: var(--card-hover); }
.edit-input {
width: 100%; padding: 6px 10px; border-radius: var(--radius-sm);
border: 1px solid var(--accent); background: var(--surface-secondary);
color: var(--text-1); font-size: var(--text-base); font-family: var(--font);
text-align: right; outline: none;
box-shadow: 0 0 0 3px var(--accent-border);
}
.edit-input.mono { font-family: var(--mono); }
.edit-input[type="number"] { font-family: var(--mono); }
.detail-title-edit {
font-size: var(--text-lg); font-weight: 600; text-align: left;
flex: 1; min-width: 0;
}
.edit-textarea {
text-align: left; resize: vertical; min-height: 60px;
width: 100%; font-size: var(--text-sm); line-height: 1.5;
}
.detail-row.editing { background: var(--accent-dim); }
.hidden-input { display: none; }
.upload-menu {
position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sp-1); z-index: 10;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden;
}
.upload-option {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 12px 16px; background: none; border: none; border-bottom: 1px solid var(--border);
font-size: var(--text-base); font-weight: 500; color: var(--text-1); cursor: pointer;
font-family: var(--font); transition: background var(--transition); text-align: left;
}
.upload-option:last-child { border-bottom: none; }
.upload-option:hover { background: var(--card-hover); }
.upload-option svg { width: 18px; height: 18px; color: var(--text-3); }
.actions-row { position: relative; }
.field-value.mono { font-family: var(--mono); }
.field-value.strong { font-weight: 600; color: var(--text-1); }
/* ── Mobile ── */
@media (max-width: 768px) {
.page-subtitle { font-size: var(--text-xl); }
.detail-sheet { width: 100%; padding: var(--sp-5); }
.detail-photos { gap: var(--sp-2); }
.photo-img { width: 120px; height: 90px; }
.photo-placeholder { width: 120px; height: 90px; }
.detail-title { font-size: var(--text-lg); }
}
</style>

170
frontend-v2/src/routes/(app)/inventory/item/+page.svelte Normal file
View File

@@ -0,0 +1,170 @@
<script lang="ts">
const details = [
{ label: 'Order #', value: '33A77277RK' },
{ label: 'Serial #', value: '019284756301' },
{ label: 'SKU', value: 'SURF-LT-1TB' },
{ label: 'Purchase Price', value: '$423.00' },
{ label: 'List Price', value: '$899.99' },
{ label: 'Status', value: 'Used - Like New' },
{ label: 'Condition', value: '—' },
{ label: 'Tracking #', value: '—' },
{ label: 'Notes', value: '—' }
];
</script>
<div class="page">
<div class="app-surface">
<a href="/inventory" class="back-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
Back to Inventory
</a>
<div class="detail-header">
<h1 class="detail-title">Microsoft Surface Laptop Studio - 1TB TBolt</h1>
<span class="badge-error">Needs Attention</span>
</div>
<!-- Photos -->
<div class="photos">
{#each [1, 2, 3] as _}
<div class="photo-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="8.5" cy="8.5" r="1.5"/>
<polyline points="21 15 16 10 5 21"/>
</svg>
</div>
{/each}
</div>
<!-- Actions -->
<div class="actions">
<button class="btn-secondary">Upload Photos</button>
<button class="btn-secondary">Pin</button>
<button class="btn-secondary">Send to Phone</button>
<button class="btn-secondary">Duplicate</button>
<button class="btn-secondary">Open in NocoDB</button>
</div>
<!-- Details -->
<div class="module">
<div class="module-header">
<div class="module-title">Details</div>
</div>
{#each details as row}
<div class="detail-row">
<span class="detail-label">{row.label}</span>
<span class="detail-value">{row.value}</span>
</div>
{/each}
</div>
</div>
</div>
<style>
.back-link {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--text-sm);
color: var(--text-3);
margin-bottom: var(--sp-5);
transition: color var(--transition);
}
.back-link:hover { color: var(--text-1); }
.back-link svg { width: 16px; height: 16px; }
.detail-header {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
margin-bottom: var(--section-gap);
}
.detail-title {
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-1);
margin: 0;
}
.badge-error {
font-size: var(--text-sm);
font-weight: 600;
color: var(--error);
background: var(--error-bg);
padding: 4px 10px;
border-radius: var(--radius-sm);
}
/* Photos */
.photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--row-gap);
margin-bottom: var(--section-gap);
}
.photo-placeholder {
aspect-ratio: 4/3;
background: var(--card-secondary);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
}
.photo-placeholder svg {
width: 32px;
height: 32px;
color: var(--text-4);
}
/* Actions */
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--section-gap);
}
/* Module */
.module {
background: var(--card);
border-radius: var(--radius);
padding: var(--card-pad-primary);
box-shadow: var(--card-shadow);
border: 1px solid var(--border);
}
.module-header {
margin-bottom: var(--sp-4);
}
.module-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
font-size: var(--text-base);
color: var(--text-3);
}
.detail-value {
font-size: var(--text-base);
font-family: var(--mono);
color: var(--text-1);
}
@media (max-width: 768px) {
.photos { grid-template-columns: repeat(2, 1fr); }
.detail-title { font-size: var(--text-xl); }
}
</style>

75
frontend-v2/src/routes/(app)/media/+page.svelte Normal file
View File

@@ -0,0 +1,75 @@
<script lang="ts">
import { page } from '$app/state';
import BookSearch from '$lib/components/media/BookSearch.svelte';
import MusicSearch from '$lib/components/media/MusicSearch.svelte';
import BookLibrary from '$lib/components/media/BookLibrary.svelte';
type MediaTab = 'books' | 'music' | 'library';
const urlMode = page.url.searchParams.get('mode');
let activeTab = $state<MediaTab>(urlMode === 'music' ? 'music' : urlMode === 'library' ? 'library' : 'books');
</script>
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="page-title">MEDIA</div>
<div class="page-subtitle">
{#if activeTab === 'books'}Book Downloads
{:else if activeTab === 'music'}Music Downloads
{:else}Book Library{/if}
</div>
</div>
<div class="media-tabs">
<button class="tab" class:active={activeTab === 'books'} onclick={() => activeTab = 'books'}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
Books
</button>
<button class="tab" class:active={activeTab === 'music'} onclick={() => activeTab = 'music'}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
Music
</button>
<button class="tab" class:active={activeTab === 'library'} onclick={() => activeTab = 'library'}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
Library
</button>
</div>
{#if activeTab === 'books'}
<BookSearch />
{:else if activeTab === 'music'}
<MusicSearch />
{:else}
<BookLibrary />
{/if}
</div>
</div>
<style>
.page-subtitle {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: 1.2;
}
.media-tabs {
display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5);
border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.tab {
display: flex; align-items: center; gap: var(--sp-2);
flex: 1; padding: 10px var(--sp-2) 12px; font-size: var(--text-base); font-weight: 500;
color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent;
cursor: pointer; font-family: var(--font); transition: all var(--transition);
text-align: center; justify-content: center; margin-bottom: -1px;
}
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; }
.tab svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 768px) {
.page-subtitle { font-size: var(--text-xl); }
}
</style>

880
frontend-v2/src/routes/(app)/reader/+page.svelte Normal file
View File

@@ -0,0 +1,880 @@
<script lang="ts">
import { onMount } from 'svelte';
// ── Types ──
interface Feed { name: string; count: number; id?: number; }
interface FeedCategory { name: string; feeds: Feed[]; expanded: boolean; id?: number; }
interface Article {
id: number; title: string; feed: string; timeAgo: string; readingTime: string;
content: string; thumbnail?: string; starred: boolean; read: boolean;
author?: string; url?: string;
}
// ── State ──
let navItems = $state([
{ label: 'Today', count: 0, icon: 'calendar' },
{ label: 'Starred', count: 0, icon: 'star' },
{ label: 'History', count: 0, icon: 'clock' }
]);
let feedCategories = $state<FeedCategory[]>([]);
let articles = $state<Article[]>([]);
let activeNav = $state('Today');
let activeFeedId = $state<number | null>(null);
let selectedArticle = $state<Article | null>(null);
let filterMode = $state<'unread' | 'all'>('unread');
let sidebarOpen = $state(false);
let autoScrollActive = $state(false);
let autoScrollSpeed = $state(1.5);
let articleListEl: HTMLDivElement;
let scrollRAF: number | null = null;
let loading = $state(true);
let loadingMore = $state(false);
let hasMore = $state(true);
let totalUnread = $state(0);
const LIMIT = 50;
let feedCounters: Record<string, number> = {};
// ── Helpers ──
function timeAgo(dateStr: string): string {
const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
if (mins < 1) return 'now';
if (mins < 60) return `${mins}m ago`;
const hrs = Math.floor(mins / 60);
if (hrs < 24) return `${hrs}h ago`;
const days = Math.floor(hrs / 24);
return `${days}d ago`;
}
function extractThumb(html: string): string | null {
const match = html?.match(/<img[^>]+src=["']([^"']+)["']/i);
if (!match) return null;
return match[1].replace(/&amp;/g, '&');
}
function stripHtml(html: string): string {
if (!html) return '';
return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
}
function mapEntry(e: any): Article {
return {
id: e.id, title: e.title, feed: e.feed?.title || '', url: e.url,
timeAgo: timeAgo(e.published_at), readingTime: `${e.reading_time || 1} min`,
content: e.content || '', thumbnail: extractThumb(e.content),
starred: e.starred || false, read: e.status === 'read',
author: e.author || ''
};
}
// ── API ──
async function api(path: string, opts: RequestInit = {}) {
const res = await fetch(`/api/reader${path}`, { credentials: 'include', ...opts });
if (!res.ok) throw new Error(`${res.status}`);
return res.json();
}
async function loadSidebar() {
try {
const [cats, feeds, counters] = await Promise.all([
api('/categories'), api('/feeds'), api('/feeds/counters')
]);
feedCounters = counters.unreads || {};
totalUnread = Object.values(feedCounters).reduce((s: number, c: any) => s + (c as number), 0);
feedCategories = cats.map((c: any) => ({
id: c.id, name: c.title,
expanded: false,
feeds: feeds
.filter((f: any) => f.category.id === c.id)
.map((f: any) => ({ id: f.id, name: f.title, count: feedCounters[String(f.id)] || 0 }))
})).filter((c: FeedCategory) => c.feeds.length > 0);
// Expand first category
if (feedCategories.length > 0) feedCategories[0].expanded = true;
// Update nav counts
navItems[0].count = totalUnread;
try {
const [starred, history] = await Promise.all([
api('/entries?starred=true&limit=1'),
api('/entries?status=read&limit=1')
]);
navItems[1].count = starred.total || 0;
navItems[2].count = history.total || 0;
} catch { /* silent */ }
} catch { /* silent */ }
}
async function loadEntries(append = false) {
if (loadingMore) return;
if (!append) { loading = true; articles = []; hasMore = true; }
else loadingMore = true;
try {
let params = `limit=${LIMIT}&direction=desc&order=published_at`;
if (!append) params += '&offset=0';
else params += `&offset=${articles.length}`;
if (activeFeedId) {
params += `&feed_id=${activeFeedId}`;
}
if (activeNav === 'Today') {
params += '&status=unread';
} else if (activeNav === 'Starred') {
params += '&starred=true';
} else if (activeNav === 'History') {
params += '&status=read';
}
const data = await api(`/entries?${params}`);
const mapped = (data.entries || []).map(mapEntry);
if (append) {
articles = [...articles, ...mapped];
} else {
articles = mapped;
}
hasMore = mapped.length === LIMIT;
} catch { /* silent */ }
finally { loading = false; loadingMore = false; }
}
async function markEntryRead(id: number) {
try {
await api('/entries', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entry_ids: [id], status: 'read' })
});
} catch { /* silent */ }
}
async function markEntryUnread(id: number) {
try {
await api('/entries', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entry_ids: [id], status: 'unread' })
});
} catch { /* silent */ }
}
async function toggleStarAPI(id: number) {
try {
await api(`/entries/${id}/bookmark`, { method: 'PUT' });
} catch { /* silent */ }
}
async function markAllReadAPI() {
const ids = articles.filter(a => !a.read).map(a => a.id);
if (!ids.length) return;
try {
await api('/entries', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entry_ids: ids, status: 'read' })
});
} catch { /* silent */ }
}
// ── Karakeep ──
let karakeepIds = $state<Record<number, string>>({});
let savingToKarakeep = $state<Set<number>>(new Set());
async function toggleKarakeep(article: Article, e?: Event) {
e?.stopPropagation();
e?.preventDefault();
if (savingToKarakeep.has(article.id)) return;
const articleUrl = article.url || '';
console.log('Karakeep: saving', article.id, articleUrl);
if (!articleUrl && !karakeepIds[article.id]) {
console.log('Karakeep: no URL, skipping');
return;
}
savingToKarakeep = new Set([...savingToKarakeep, article.id]);
try {
if (karakeepIds[article.id]) {
const res = await fetch('/api/karakeep/delete', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: karakeepIds[article.id] })
});
console.log('Karakeep delete:', res.status);
const next = { ...karakeepIds };
delete next[article.id];
karakeepIds = next;
} else {
const res = await fetch('/api/karakeep/save', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: articleUrl })
});
const text = await res.text();
console.log('Karakeep save:', res.status, text);
try {
const data = JSON.parse(text);
if (res.ok && data.ok) {
karakeepIds = { ...karakeepIds, [article.id]: data.id };
console.log('Karakeep: saved as', data.id);
}
} catch { console.error('Karakeep: bad JSON response'); }
}
} catch (err) {
console.error('Karakeep error:', err);
} finally {
const next = new Set(savingToKarakeep);
next.delete(article.id);
savingToKarakeep = next;
}
}
// ── Touch to stop auto-scroll ──
function handleScrollInterrupt() {
if (autoScrollActive) stopAutoScroll();
}
// ── Event handlers ──
function decrementUnread(count = 1) {
totalUnread = Math.max(0, totalUnread - count);
navItems[0].count = totalUnread;
navItems = [...navItems];
}
const filteredArticles = $derived(articles);
const currentIndex = $derived(
selectedArticle ? filteredArticles.findIndex(a => a.id === selectedArticle!.id) : -1
);
function selectArticle(article: Article) {
selectedArticle = article;
if (!article.read) {
article.read = true;
articles = [...articles];
markEntryRead(article.id);
decrementUnread();
}
}
function closeArticle() { selectedArticle = null; }
function toggleStar(article: Article, e?: Event) {
e?.stopPropagation();
article.starred = !article.starred;
articles = [...articles];
toggleStarAPI(article.id);
}
function toggleRead(article: Article) {
const wasRead = article.read;
article.read = !article.read;
articles = [...articles];
if (article.read) { markEntryRead(article.id); decrementUnread(); }
else { markEntryUnread(article.id); totalUnread++; navItems[0].count = totalUnread; navItems = [...navItems]; }
}
function markAllRead() {
const unreadCount = articles.filter(a => !a.read).length;
markAllReadAPI();
articles = articles.map(a => ({ ...a, read: true }));
decrementUnread(unreadCount);
}
function goNext() {
if (currentIndex < filteredArticles.length - 1) selectArticle(filteredArticles[currentIndex + 1]);
}
function goPrev() {
if (currentIndex > 0) selectArticle(filteredArticles[currentIndex - 1]);
}
function toggleCategory(index: number) {
feedCategories[index].expanded = !feedCategories[index].expanded;
}
function selectFeed(feedId: number) {
activeFeedId = feedId;
activeNav = '';
sidebarOpen = false;
loadEntries();
}
function selectNav(label: string) {
activeNav = label;
activeFeedId = null;
sidebarOpen = false;
loadEntries();
}
// ── Auto-scroll (requestAnimationFrame for smoothness) ──
function startAutoScroll() {
if (scrollRAF) cancelAnimationFrame(scrollRAF);
if (!articleListEl) return;
autoScrollActive = true;
function step() {
if (!autoScrollActive || !articleListEl) return;
articleListEl.scrollTop += autoScrollSpeed;
scrollRAF = requestAnimationFrame(step);
}
scrollRAF = requestAnimationFrame(step);
}
function stopAutoScroll() {
autoScrollActive = false;
if (scrollRAF) { cancelAnimationFrame(scrollRAF); scrollRAF = null; }
}
function toggleAutoScroll() {
if (autoScrollActive) stopAutoScroll();
else startAutoScroll();
}
function adjustSpeed(delta: number) {
autoScrollSpeed = Math.max(0.5, Math.min(5, +(autoScrollSpeed + delta).toFixed(1)));
}
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); goNext(); }
if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); goPrev(); }
if (e.key === 'Escape' && selectedArticle) { closeArticle(); }
if (e.key === 's' && selectedArticle) { toggleStar(selectedArticle); }
if (e.key === 'm' && selectedArticle) { toggleRead(selectedArticle); }
}
// ── Mark-as-read on scroll (throttled to avoid jitter) ──
let pendingReadIds: number[] = [];
let flushTimer: ReturnType<typeof setTimeout> | null = null;
let scrollCheckTimer: ReturnType<typeof setTimeout> | null = null;
function handleListScroll() {
// Throttle: only check every 400ms
if (scrollCheckTimer) return;
scrollCheckTimer = setTimeout(() => {
scrollCheckTimer = null;
checkScrolledCards();
}, 400);
}
function checkScrolledCards() {
if (!articleListEl) return;
// Infinite scroll — load more when near bottom
const { scrollTop, scrollHeight, clientHeight } = articleListEl;
if (hasMore && !loadingMore && scrollHeight - scrollTop - clientHeight < 300) {
loadEntries(true);
}
const listTop = articleListEl.getBoundingClientRect().top;
const cards = articleListEl.querySelectorAll('[data-entry-id]');
let newlyRead = 0;
cards.forEach(card => {
if (card.getBoundingClientRect().bottom < listTop + 20) {
const id = Number(card.getAttribute('data-entry-id'));
if (!id) return;
const article = articles.find(a => a.id === id);
if (article && !article.read) {
article.read = true;
pendingReadIds.push(id);
newlyRead++;
}
}
});
if (newlyRead > 0) {
articles = [...articles];
decrementUnread(newlyRead);
if (flushTimer) clearTimeout(flushTimer);
flushTimer = setTimeout(flushPendingReads, 1000);
}
}
async function flushPendingReads() {
if (!pendingReadIds.length) return;
const ids = [...pendingReadIds];
pendingReadIds = [];
try {
await api('/entries', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ entry_ids: ids, status: 'read' })
});
} catch { /* silent */ }
}
// ── Init ──
onMount(() => {
loadSidebar();
loadEntries();
return () => {
if (flushTimer) clearTimeout(flushTimer);
};
});
</script>
<svelte:window onkeydown={handleKeydown} />
<div class="reader-layout">
<!-- Left Sidebar -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<aside class="reader-sidebar" class:open={sidebarOpen}>
<div class="sidebar-header">
<svg class="rss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
<span class="sidebar-title">Reader</span>
</div>
<nav class="sidebar-nav">
{#each navItems as item}
<button
class="nav-item"
class:active={activeNav === item.label}
onclick={() => selectNav(item.label)}
>
<div class="nav-icon">
{#if item.icon === 'inbox'}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
{:else if item.icon === 'calendar'}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
{:else if item.icon === 'star'}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
{:else}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
{/if}
</div>
<span class="nav-label">{item.label}</span>
{#if item.count > 0}
<span class="nav-count">{item.count}</span>
{/if}
</button>
{/each}
</nav>
<div class="sidebar-separator"></div>
<div class="feeds-section">
<div class="feeds-header">Feeds</div>
{#each feedCategories as cat, i}
<div class="feed-category">
<button class="category-toggle" onclick={() => toggleCategory(i)}>
<svg class="expand-icon" class:expanded={cat.expanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
<span class="category-name">{cat.name}</span>
<span class="category-count">{cat.feeds.reduce((s, f) => s + f.count, 0)}</span>
</button>
{#if cat.expanded}
<div class="feed-list">
{#each cat.feeds as feed}
<button class="feed-item" onclick={() => selectFeed(feed.id || 0)}>
<span class="feed-name">{feed.name}</span>
{#if feed.count > 0}
<span class="feed-count">{feed.count}</span>
{/if}
</button>
{/each}
</div>
{/if}
</div>
{/each}
</div>
</aside>
<!-- Sidebar overlay for mobile -->
{#if sidebarOpen}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
{/if}
<!-- Middle Panel: Article List -->
<div class="reader-list">
<div class="list-header">
<div class="list-header-top">
<button class="mobile-menu" onclick={() => sidebarOpen = !sidebarOpen} aria-label="Toggle sidebar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="list-view-name">{activeFeedId ? feedCategories.flatMap(c => c.feeds).find(f => f.id === activeFeedId)?.name || 'Feed' : activeNav} <span class="list-count">{activeNav === 'Today' && !activeFeedId ? totalUnread : filteredArticles.length}</span></div>
<div class="list-actions">
<button class="btn-icon" title="Refresh">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
</button>
<button class="btn-icon" title="Mark all read" onclick={markAllRead}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
</button>
<button class="btn-icon" class:active-icon={autoScrollActive} onclick={toggleAutoScroll} title="Auto-scroll feed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
</button>
{#if autoScrollActive}
<div class="speed-control">
<button class="speed-btn" onclick={() => adjustSpeed(-0.5)}>-</button>
<span class="speed-value">{autoScrollSpeed}x</span>
<button class="speed-btn" onclick={() => adjustSpeed(0.5)}>+</button>
</div>
{/if}
</div>
</div>
</div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="article-list" bind:this={articleListEl} ontouchstart={handleScrollInterrupt} onwheel={handleScrollInterrupt} onscroll={handleListScroll}>
{#each filteredArticles as article (article.id)}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="article-card"
class:selected={selectedArticle?.id === article.id}
class:is-read={article.read}
data-entry-id={article.id}
onclick={() => selectArticle(article)}
>
<!-- Card header: source + time + actions -->
<div class="card-header">
<div class="card-source">
<svg class="card-rss" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
<span class="card-feed-name">{article.feed}</span>
{#if article.author}
<span class="card-author">· {article.author}</span>
{/if}
</div>
<div class="card-header-right">
<button class="bookmark-btn" class:saved={!!karakeepIds[article.id]} onclick={(e) => toggleKarakeep(article, e)} title={karakeepIds[article.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
{#if savingToKarakeep.has(article.id)}
<svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
{:else}
<svg viewBox="0 0 24 24" fill={karakeepIds[article.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
{/if}
</button>
<span class="card-time">{article.timeAgo}</span>
</div>
</div>
<!-- Title -->
<div class="card-title">{article.title}</div>
<!-- Banner image -->
{#if article.thumbnail}
<div class="card-banner" style="background-image:url('{article.thumbnail}')"></div>
{/if}
<!-- Preview text -->
<div class="card-preview">{stripHtml(article.content).slice(0, 200)}</div>
<!-- Footer -->
<div class="card-footer">
<span class="card-reading-time">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
{article.readingTime}
</span>
</div>
</div>
{/each}
{#if filteredArticles.length === 0}
<div class="list-empty">No articles to show</div>
{/if}
</div>
</div>
</div>
<!-- Reading pane — slide-in overlay -->
{#if selectedArticle}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="pane-overlay" onclick={closeArticle}>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="pane-sheet" onclick={(e) => e.stopPropagation()}>
<div class="pane-toolbar">
<div class="pane-nav">
<button class="pane-nav-btn" onclick={closeArticle} title="Close (Esc)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
<button class="pane-nav-btn" onclick={goPrev} disabled={currentIndex <= 0} title="Previous (k)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
</button>
<span class="pane-nav-pos">{currentIndex + 1} / {filteredArticles.length}</span>
<button class="pane-nav-btn" onclick={goNext} disabled={currentIndex >= filteredArticles.length - 1} title="Next (j)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
<div class="pane-actions">
<button class="pane-action-btn" class:saved-karakeep={!!karakeepIds[selectedArticle.id]} onclick={() => toggleKarakeep(selectedArticle!)} title={karakeepIds[selectedArticle.id] ? 'Saved to Karakeep' : 'Save to Karakeep'}>
{#if savingToKarakeep.has(selectedArticle.id)}
<svg class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
{:else}
<svg viewBox="0 0 24 24" fill={karakeepIds[selectedArticle.id] ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
{/if}
</button>
<button class="pane-action-btn" onclick={() => toggleRead(selectedArticle!)} title="Toggle read (m)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
</button>
{#if selectedArticle.url}
<a href={selectedArticle.url} target="_blank" rel="noopener" class="pane-action-btn" title="Open original">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
</a>
{/if}
</div>
</div>
<div class="pane-scroll">
<div class="pane-content">
<h1 class="pane-title">{selectedArticle.title}</h1>
<div class="pane-meta">
<span class="pane-source">{selectedArticle.feed}</span>
<span class="pane-dot"></span>
<span>{selectedArticle.timeAgo}</span>
<span class="pane-dot"></span>
<span>{selectedArticle.readingTime} read</span>
{#if selectedArticle.author}
<span class="pane-dot"></span>
<span class="pane-author">by {selectedArticle.author}</span>
{/if}
</div>
<div class="pane-body">
{@html selectedArticle.content}
</div>
</div>
</div>
</div>
</div>
{/if}
<style>
.reader-layout {
display: flex; height: calc(100vh - 56px);
overflow: hidden; position: relative;
}
/* ── Mobile menu ── */
.mobile-menu {
display: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
background: none; border: 1px solid var(--border);
align-items: center; justify-content: center; cursor: pointer;
flex-shrink: 0; transition: all var(--transition);
}
.mobile-menu:hover { background: var(--card-hover); }
.mobile-menu svg { width: 16px; height: 16px; color: var(--text-3); }
/* ── Sidebar ── */
.reader-sidebar {
width: 220px; flex-shrink: 0; background: var(--surface);
border-right: 1px solid var(--border); display: flex;
flex-direction: column; overflow-y: auto; padding: var(--sp-4) 0 var(--sp-3);
}
.sidebar-header { display: flex; align-items: center; gap: 7px; padding: 0 16px 12px; }
.rss-icon { width: 16px; height: 16px; color: var(--accent); }
.sidebar-title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
.sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-0.5); padding: 0 10px; }
.nav-item {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) 10px; border-radius: var(--radius-sm); background: none; border: none;
font-size: var(--text-sm); color: var(--text-3); cursor: pointer;
transition: all var(--transition); text-align: left; width: 100%; font-family: var(--font);
}
.nav-item:hover { background: var(--card-hover); color: var(--text-1); }
.nav-item.active { background: none; color: var(--accent); font-weight: 600; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: 8px; }
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
.nav-icon svg { width: 15px; height: 15px; }
.nav-label { flex: 1; }
.nav-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
.nav-item.active .nav-count { color: var(--accent); opacity: 0.7; }
.sidebar-separator { height: 1px; background: var(--border); margin: 10px 16px; }
.feeds-section { padding: 0 10px; flex: 1; }
.feeds-header { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); padding: 4px 10px 6px; }
.feed-category { margin-bottom: 1px; }
.category-toggle {
display: flex; align-items: center; gap: 5px; width: 100%;
padding: 5px 10px; background: none; border: none; font-size: var(--text-sm);
font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: var(--radius-sm);
transition: all var(--transition); font-family: var(--font);
}
.category-toggle:hover { background: var(--card-hover); }
.category-name { flex: 1; text-align: left; }
.category-count { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); }
.expand-icon { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; color: var(--text-4); }
.expand-icon.expanded { transform: rotate(90deg); }
.feed-list { padding-left: var(--sp-4); }
.feed-item {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 4px 10px; background: none; border: none; font-size: var(--text-sm);
color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm);
transition: all var(--transition); text-align: left; font-family: var(--font);
}
.feed-item:hover { background: var(--card-hover); color: var(--text-1); }
.feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-count { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-4); flex-shrink: 0; margin-left: var(--sp-1.5); }
.sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 39; }
/* ── Feed list panel ── */
.reader-list {
flex: 1; min-width: 0;
display: flex; flex-direction: column; background: var(--canvas);
}
.list-header { padding: 12px 20px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.list-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.list-view-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: var(--sp-1.5); }
.list-count { font-size: var(--text-xs); font-weight: 400; color: var(--text-4); font-family: var(--mono); }
.list-actions { display: flex; gap: var(--sp-1); }
.btn-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: none; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--transition); }
.btn-icon:hover { color: var(--text-1); background: var(--card-hover); }
.btn-icon.active-icon { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.btn-icon svg { width: 14px; height: 14px; }
.list-filters { display: flex; gap: var(--sp-1); }
.filter-btn {
padding: 4px 10px 6px; border-radius: 0; background: none;
border: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); font-weight: 500;
color: var(--text-3); cursor: pointer; transition: all var(--transition); font-family: var(--font);
position: relative;
}
.filter-btn:hover { color: var(--text-2); }
.filter-btn.active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--accent); }
.speed-control { display: flex; align-items: center; gap: var(--sp-0.5); margin-left: var(--sp-1); }
.speed-btn {
width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--card);
border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600;
color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.speed-btn:hover { color: var(--text-1); }
.speed-value { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-2); min-width: 24px; text-align: center; }
/* ── Article cards (feed style) ── */
.article-list { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-5) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-2); }
.article-card {
padding: 14px 16px; border-radius: var(--radius);
background: var(--card); border: none;
box-shadow: var(--card-shadow-sm);
cursor: pointer; transition: all var(--transition);
}
.article-card:hover { box-shadow: var(--card-shadow); transform: translateY(-1px); }
.article-card.selected { box-shadow: 0 0 0 1.5px var(--accent); }
.article-card.is-read { opacity: 0.6; }
.article-card.is-read .card-title { color: var(--text-3); }
.article-card.is-read .card-preview { color: var(--text-4); }
.article-card.is-read:hover { opacity: 0.8; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.card-source { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--text-3); font-weight: 500; min-width: 0; }
.card-rss { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; }
.card-feed-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-author { color: var(--text-4); font-weight: 400; white-space: nowrap; }
.card-header-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.card-time { font-size: var(--text-xs); color: var(--text-4); }
.star-btn {
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
transition: all var(--transition); opacity: 0;
}
.article-card:hover .star-btn { opacity: 1; }
.star-btn.starred { opacity: 1; color: #F59E0B; }
.star-btn:hover { color: #F59E0B; }
.star-btn svg { width: 13px; height: 13px; }
.bookmark-btn {
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer; color: var(--text-4); border-radius: var(--radius-sm);
transition: all var(--transition); opacity: 0.5;
}
.article-card:hover .bookmark-btn { opacity: 0.8; }
.bookmark-btn.saved { opacity: 1; color: #F59E0B; }
.bookmark-btn:hover { opacity: 1; color: #F59E0B; }
.bookmark-btn svg { width: 13px; height: 13px; }
.spinning { animation: spin 0.8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.card-title { font-size: var(--text-md); font-weight: 600; color: var(--text-1); line-height: 1.35; margin-bottom: var(--sp-1.5); }
.card-banner { width: 100%; height: 160px; border-radius: var(--radius-md); background: var(--card-hover) center/cover no-repeat; margin-bottom: var(--sp-2); }
.card-preview { font-size: var(--text-sm); color: var(--text-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--sp-1); }
.card-footer { display: flex; align-items: center; gap: var(--sp-2); }
.card-reading-time { display: flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--text-4); }
.card-reading-time svg { width: 11px; height: 11px; }
.list-empty { padding: var(--sp-10); text-align: center; color: var(--text-3); font-size: var(--text-sm); }
/* ── Reading pane (slide-in sheet) ── */
.pane-overlay {
position: fixed; inset: 0; background: var(--overlay); z-index: 60;
display: flex; justify-content: flex-end; animation: paneFadeIn 150ms ease;
}
@keyframes paneFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pane-sheet {
width: 620px; max-width: 100%; height: 100%; background: var(--card);
display: flex; flex-direction: column;
border-left: 1px solid var(--border);
box-shadow: -6px 0 28px rgba(0,0,0,0.08);
animation: paneSlideIn 200ms ease;
}
@keyframes paneSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.pane-scroll { flex: 1; overflow-y: auto; }
.pane-toolbar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); flex-shrink: 0;
}
.pane-nav { display: flex; align-items: center; gap: var(--sp-1); }
.pane-nav-btn {
width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-3); transition: all var(--transition);
}
.pane-nav-btn:hover { color: var(--text-1); background: var(--card-hover); }
.pane-nav-btn:disabled { opacity: 0.25; cursor: default; }
.pane-nav-btn svg { width: 14px; height: 14px; }
.pane-nav-pos { font-size: var(--text-xs); color: var(--text-4); font-family: var(--mono); min-width: 44px; text-align: center; }
.pane-actions { display: flex; align-items: center; gap: var(--sp-0.5); }
.pane-action-btn {
width: 32px; height: 32px; border-radius: var(--radius-sm); background: none;
border: none; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-3); transition: all var(--transition); text-decoration: none;
}
.pane-action-btn:hover { color: var(--text-1); background: var(--card-hover); }
.pane-action-btn.active { color: var(--accent); }
.pane-action-btn.saved-karakeep { color: #F59E0B; }
.pane-action-btn svg { width: 15px; height: 15px; }
.pane-content { max-width: 640px; margin: 0 auto; padding: var(--sp-8) 36px var(--sp-20); }
.pane-title { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--text-1); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
.pane-meta {
display: flex; align-items: center; gap: var(--sp-1.5); flex-wrap: wrap;
font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-6);
padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
}
.pane-source { font-weight: 500; color: var(--text-2); }
.pane-author { font-style: italic; }
.pane-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
.pane-body { font-size: var(--text-md); line-height: 1.85; color: var(--text-3); }
.pane-body :global(p) { margin-bottom: 18px; }
.pane-body :global(img) { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-3) 0; }
.pane-body :global(a) { color: var(--accent); text-decoration: underline; }
.pane-body :global(a:hover) { opacity: 0.8; }
.pane-body :global(blockquote) { border-left: 3px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: var(--text-3); font-style: italic; }
.pane-body :global(pre) { background: var(--surface-secondary); padding: 14px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); font-family: var(--mono); margin: var(--sp-4) 0; }
.pane-body :global(code) { font-family: var(--mono); font-size: 0.9em; }
.pane-body :global(h1), .pane-body :global(h2), .pane-body :global(h3) { color: var(--text-1); margin: 20px 0 10px; }
.pane-body :global(ul), .pane-body :global(ol) { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.pane-body :global(li) { margin-bottom: var(--sp-1.5); }
/* ── Responsive ── */
@media (max-width: 1024px) {
.reader-sidebar { display: none; }
.reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); }
.mobile-menu { display: flex; }
}
@media (max-width: 768px) {
.reader-layout { height: calc(100vh - 56px); }
.reader-sidebar { display: none; }
.reader-sidebar.open { display: flex; position: fixed; left: 0; top: 56px; bottom: 0; z-index: 40; box-shadow: 8px 0 24px rgba(0,0,0,0.08); width: 260px; }
.mobile-menu { display: flex; }
.article-list { padding: var(--sp-1.5) var(--sp-3) var(--sp-20); gap: var(--sp-1.5); }
.article-card { padding: 12px 14px; }
.card-title { font-size: var(--text-base); }
.card-banner { height: 130px; border-radius: var(--radius-sm); }
.card-preview { -webkit-line-clamp: 2; }
.pane-sheet { width: 100%; }
.pane-content { padding: 20px 18px 80px; }
.pane-title { font-size: var(--text-lg); }
.pane-body { font-size: var(--text-md); line-height: 1.75; }
.pane-toolbar { padding: 8px 14px; }
.list-header { padding: 10px 14px 8px; }
}
</style>

328
frontend-v2/src/routes/(app)/settings/+page.svelte Normal file
View File

@@ -0,0 +1,328 @@
<script lang="ts">
import { onMount } from 'svelte';
interface App {
id: string;
name: string;
icon: string;
route_prefix: string;
connected: boolean;
}
let user = $state<{ username: string; display_name: string } | null>(null);
let apps = $state<App[]>([]);
let loading = $state(true);
let darkMode = $state(false);
// Connect form state
let showConnectForm = $state('');
let connectToken = $state('');
let connectUser = $state('');
let connectPass = $state('');
let connectError = $state('');
let connectingService = $state('');
const iconMap: Record<string, string> = {
'map': '🗺️', 'bar-chart': '📊', 'package': '📦', 'book': '📚',
'music': '🎵', 'rss': '📰', 'wallet': '💰',
};
onMount(async () => {
// Check theme
darkMode = document.documentElement.classList.contains('dark');
try {
const [meRes, appsRes] = await Promise.all([
fetch('/api/auth/me', { credentials: 'include' }),
fetch('/api/apps', { credentials: 'include' }),
]);
if (meRes.ok) {
const data = await meRes.json();
if (data.authenticated) user = data.user;
}
if (appsRes.ok) {
const data = await appsRes.json();
apps = data.apps || [];
}
} catch { /* silent */ }
loading = false;
});
async function connectService(serviceId: string) {
connectError = '';
connectingService = serviceId;
let token = '';
if (serviceId === 'fitness' && connectUser && connectPass) {
try {
const res = await fetch(`/api/${serviceId}/auth/login`, {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: connectUser, password: connectPass }),
});
const data = await res.json();
if (data.token) { token = data.token; }
else { connectError = data.error || 'Login failed'; connectingService = ''; return; }
} catch { connectError = 'Connection failed'; connectingService = ''; return; }
} else {
token = connectToken;
}
if (!token) { connectError = 'Token required'; connectingService = ''; return; }
try {
const res = await fetch('/api/me/connections', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ service: serviceId, token, auth_type: 'bearer' }),
});
const data = await res.json();
if (data.success) {
apps = apps.map(a => a.id === serviceId ? { ...a, connected: true } : a);
showConnectForm = ''; connectToken = ''; connectUser = ''; connectPass = '';
} else { connectError = data.error || 'Failed to connect'; }
} catch { connectError = 'Connection failed'; }
connectingService = '';
}
async function disconnectService(serviceId: string) {
await fetch('/api/me/connections', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ service: serviceId, action: 'disconnect' }),
});
apps = apps.map(a => a.id === serviceId ? { ...a, connected: false } : a);
}
function toggleTheme() {
darkMode = !darkMode;
document.documentElement.classList.toggle('dark', darkMode);
}
async function logout() {
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
window.location.href = '/login';
}
</script>
<div class="page">
<div class="app-surface">
<div class="page-header">
<div class="page-title">SETTINGS</div>
<div class="page-subtitle">Preferences</div>
</div>
{#if loading}
<div class="loading-state">Loading...</div>
{:else}
<!-- Account -->
<section class="settings-section">
<div class="section-title">Account</div>
<div class="settings-card">
<div class="setting-row">
<div class="setting-label">Username</div>
<div class="setting-value">{user?.username || '—'}</div>
</div>
<div class="setting-row">
<div class="setting-label">Display Name</div>
<div class="setting-value">{user?.display_name || '—'}</div>
</div>
<div class="setting-row">
<div></div>
<button class="btn-danger" onclick={logout}>Sign Out</button>
</div>
</div>
</section>
<!-- Appearance -->
<section class="settings-section">
<div class="section-title">Appearance</div>
<div class="settings-card">
<div class="setting-row">
<div>
<div class="setting-label">Theme</div>
<div class="setting-hint">Switch between light and dark mode</div>
</div>
<button class="theme-toggle" class:dark={darkMode} onclick={toggleTheme} aria-label="Toggle theme">
<div class="toggle-track">
<div class="toggle-thumb">
{#if darkMode}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
{:else}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
{/if}
</div>
</div>
</button>
</div>
</div>
</section>
<!-- Service Connections -->
<section class="settings-section">
<div class="section-title">Service Connections</div>
<div class="settings-card">
{#each apps as app}
<div class="setting-row">
<div class="service-info">
<span class="service-icon">{iconMap[app.icon] || '📱'}</span>
<div>
<div class="setting-label">{app.name}</div>
<div class="setting-hint">{app.route_prefix}</div>
</div>
</div>
{#if app.connected}
<div class="service-actions">
<span class="conn-badge connected">Connected</span>
<button class="btn-text-danger" onclick={() => disconnectService(app.id)}>Disconnect</button>
</div>
{:else}
<button class="btn-connect" onclick={() => { showConnectForm = app.id; connectError = ''; }}>Connect</button>
{/if}
</div>
{#if showConnectForm === app.id && !app.connected}
<div class="connect-form">
{#if connectError}
<div class="connect-error">{connectError}</div>
{/if}
{#if app.id === 'fitness'}
<input type="text" class="connect-input" placeholder="Fitness username" bind:value={connectUser} />
<input type="password" class="connect-input" placeholder="Fitness password" bind:value={connectPass} />
{:else}
<input type="password" class="connect-input" placeholder="API Token" bind:value={connectToken} />
{/if}
<div class="connect-actions">
<button class="btn-connect" onclick={() => connectService(app.id)} disabled={connectingService === app.id}>
{connectingService === app.id ? 'Connecting...' : 'Connect'}
</button>
<button class="btn-cancel" onclick={() => showConnectForm = ''}>Cancel</button>
</div>
</div>
{/if}
{/each}
{#if apps.length === 0}
<div class="empty-state">No services configured</div>
{/if}
</div>
</section>
{/if}
</div>
</div>
<style>
.page-subtitle {
font-size: var(--text-2xl);
font-weight: 300;
color: var(--text-1);
line-height: 1.2;
}
.loading-state { padding: var(--sp-12); text-align: center; color: var(--text-3); }
.settings-section { margin-bottom: var(--section-gap); }
.section-title {
font-size: var(--text-sm); font-weight: 600; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3);
}
.settings-card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden;
}
.setting-row {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: var(--text-base); font-weight: 500; color: var(--text-1); }
.setting-value { font-size: var(--text-base); color: var(--text-2); }
.setting-hint { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--sp-0.5); }
.service-info { display: flex; align-items: center; gap: var(--sp-3); }
.service-icon { font-size: var(--text-xl); }
.service-actions { display: flex; align-items: center; gap: var(--sp-2); }
.conn-badge {
font-size: var(--text-sm); font-weight: 600; padding: 3px var(--sp-3);
border-radius: 10px; line-height: 1.5;
}
.conn-badge.connected { background: var(--success-bg); color: var(--success); }
.btn-connect {
padding: var(--sp-1.5) var(--sp-4); border-radius: var(--radius-md);
background: var(--accent); color: white; border: none;
font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font);
transition: opacity var(--transition);
}
.btn-connect:hover { opacity: 0.9; }
.btn-connect:disabled { opacity: 0.5; }
.btn-cancel {
padding: var(--sp-1.5) var(--sp-4); border-radius: var(--radius-md);
background: var(--card-secondary); color: var(--text-2); border: 1px solid var(--border);
font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font);
}
.btn-text-danger {
background: none; border: none; color: var(--error); font-size: var(--text-sm);
font-weight: 500; cursor: pointer; font-family: var(--font);
transition: opacity var(--transition);
}
.btn-text-danger:hover { opacity: 0.7; }
.btn-danger {
padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
background: none; border: 1px solid var(--error); color: var(--error);
font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font);
transition: all var(--transition);
}
.btn-danger:hover { background: var(--error-dim); }
.connect-form {
padding: var(--sp-3) var(--sp-5) var(--sp-4);
border-bottom: 1px solid var(--border);
display: flex; flex-direction: column; gap: var(--sp-2);
}
.connect-input {
width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface-secondary);
color: var(--text-1); font-size: var(--text-sm); font-family: var(--font);
}
.connect-input:focus { outline: none; border-color: var(--accent); }
.connect-input::placeholder { color: var(--text-4); }
.connect-actions { display: flex; gap: var(--sp-2); }
.connect-error {
font-size: var(--text-sm); color: var(--error); background: var(--error-dim);
padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
}
.empty-state { padding: var(--sp-8); text-align: center; color: var(--text-3); font-size: var(--text-sm); }
/* Theme Toggle */
.theme-toggle { background: none; border: none; padding: 0; cursor: pointer; }
.toggle-track {
width: 48px; height: 28px; border-radius: 14px;
background: var(--border-strong); position: relative; transition: background var(--transition);
}
.theme-toggle.dark .toggle-track { background: var(--accent); }
.toggle-thumb {
width: 22px; height: 22px; border-radius: 50%; background: white;
position: absolute; top: 3px; left: 3px;
transition: transform var(--transition);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.theme-toggle.dark .toggle-thumb { transform: translateX(20px); }
.toggle-thumb svg { width: 14px; height: 14px; color: var(--text-3); }
.theme-toggle.dark .toggle-thumb svg { color: var(--accent); }
@media (max-width: 768px) {
.page-subtitle { font-size: var(--text-xl); }
.setting-row { flex-wrap: wrap; gap: var(--sp-2); }
}
</style>

368
frontend-v2/src/routes/(app)/trips/+page.svelte Normal file
View File

@@ -0,0 +1,368 @@
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import CreateTripModal from '$lib/components/trips/CreateTripModal.svelte';
let createOpen = $state(false);
interface Trip {
id: string;
name: string;
dates: string;
daysAway: string;
status: 'active' | 'upcoming' | 'completed';
cover: string;
duration: string;
cities: string[];
points?: number;
cash?: number;
shareToken?: string;
sortDate: string;
}
let searchQuery = $state('');
let upcoming = $state<Trip[]>([]);
let past = $state<Trip[]>([]);
let stats = $state({ trips: 0, cities: 0, countries: 0, points: 0 });
let loading = $state(true);
const allTrips = $derived([...upcoming, ...past]);
const filteredTrips = $derived(
searchQuery.trim()
? allTrips.filter(t =>
t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
t.cities.some(c => c.toLowerCase().includes(searchQuery.toLowerCase()))
)
: null
);
// ── Helpers ──
function formatPoints(n: number): string {
if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
if (n >= 1000) return Math.round(n / 1000) + 'K';
return n.toString();
}
function formatDateRange(start: string, end: string): string {
if (!start) return '';
const s = new Date(start + 'T00:00:00');
const e = new Date(end + 'T00:00:00');
const sMonth = s.toLocaleDateString('en-US', { month: 'short' });
const eMonth = e.toLocaleDateString('en-US', { month: 'short' });
const sYear = s.getFullYear();
const eYear = e.getFullYear();
if (sMonth === eMonth && sYear === eYear) {
return `${sMonth} ${s.getDate()} – ${e.getDate()}, ${sYear}`;
}
if (sYear === eYear) {
return `${sMonth} ${s.getDate()} – ${eMonth} ${e.getDate()}, ${sYear}`;
}
return `${sMonth} ${s.getDate()}, ${sYear} – ${eMonth} ${e.getDate()}, ${eYear}`;
}
function daysBetween(dateStr: string): string {
const d = new Date(dateStr + 'T00:00:00');
const now = new Date();
now.setHours(0, 0, 0, 0);
const diff = Math.ceil((d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
if (diff <= 0) return '';
if (diff === 1) return '1 day';
return `${diff} days`;
}
function durationDays(start: string, end: string): string {
if (!start || !end) return '';
const s = new Date(start + 'T00:00:00');
const e = new Date(end + 'T00:00:00');
const days = Math.ceil((e.getTime() - s.getTime()) / (1000 * 60 * 60 * 24)) + 1;
return `${days} days`;
}
function coverUrl(trip: any): string {
if (trip.cover_image) return trip.cover_image;
return '';
}
function mapTrip(raw: any): Trip {
const now = new Date().toISOString().slice(0, 10);
const isActive = raw.start_date <= now && raw.end_date >= now;
const isUpcoming = raw.start_date > now;
return {
id: raw.id,
name: raw.name,
dates: formatDateRange(raw.start_date, raw.end_date),
daysAway: isUpcoming ? daysBetween(raw.start_date) : '',
status: isActive ? 'active' : isUpcoming ? 'upcoming' : 'completed',
cover: coverUrl(raw),
duration: durationDays(raw.start_date, raw.end_date),
cities: [],
points: 0,
cash: 0,
shareToken: raw.share_token || '',
sortDate: raw.start_date || ''
};
}
// ── Load ──
onMount(async () => {
try {
const [tripsRes, statsRes] = await Promise.all([
fetch('/api/trips/trips', { credentials: 'include' }),
fetch('/api/trips/stats', { credentials: 'include' })
]);
if (tripsRes.ok) {
const data = await tripsRes.json();
const now = new Date().toISOString().slice(0, 10);
const all = (data.trips || []).map(mapTrip);
upcoming = all.filter(t => t.status === 'active' || t.status === 'upcoming')
.sort((a, b) => a.sortDate.localeCompare(b.sortDate));
past = all.filter(t => t.status === 'completed')
.sort((a, b) => b.sortDate.localeCompare(a.sortDate));
}
if (statsRes.ok) {
const data = await statsRes.json();
stats = {
trips: data.total_trips || 0,
cities: data.cities_visited || 0,
countries: data.countries_visited || 0,
points: data.total_points_redeemed || 0
};
// Enrich trips with cities from stats
const citiesByCountry = data.cities_by_country || {};
// Can't easily map cities to individual trips from stats alone
// Cities will come from trip detail when opened
}
} catch { /* silent */ }
finally { loading = false; }
});
</script>
<div class="page">
<div class="app-surface">
<!-- Header -->
<div class="header-row">
<div>
<div class="page-title">TRIPS</div>
<div class="page-subtitle">Your Adventures</div>
</div>
<button class="btn-primary" onclick={() => createOpen = true}>+ Plan Trip</button>
</div>
<!-- Stats Bar -->
<div class="stats-bar">
<div class="stat-box">
<div class="stat-value">{stats.trips}</div>
<div class="stat-label">Trips</div>
</div>
<div class="stat-box">
<div class="stat-value">{stats.cities}</div>
<div class="stat-label">Cities</div>
</div>
<div class="stat-box">
<div class="stat-value">{stats.countries}</div>
<div class="stat-label">Countries</div>
</div>
<div class="stat-box">
<div class="stat-value">{formatPoints(stats.points)}</div>
<div class="stat-label">Points Used</div>
</div>
</div>
<!-- Search -->
<div class="search-wrap">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input class="input search-input" type="text" placeholder="Search trips, cities, hotels, flights..." bind:value={searchQuery} />
{#if searchQuery}
<button class="search-clear" onclick={() => searchQuery = ''}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
{/if}
</div>
{#if filteredTrips}
<!-- Search results -->
<div class="search-results-label">{filteredTrips.length} result{filteredTrips.length !== 1 ? 's' : ''}</div>
<div class="trip-grid">
{#each filteredTrips as trip (trip.id)}
<a href="/trips/trip?id={trip.id}" class="trip-card" class:muted={trip.status === 'completed'}>
<div class="trip-photo" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
{#if !trip.cover}
<div class="photo-empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
</div>
{/if}
</div>
<div class="trip-body">
<div class="trip-name">{trip.name}</div>
{#if trip.dates}<div class="trip-dates">{trip.dates}</div>{/if}
{#if trip.cities.length > 0}<div class="trip-cities">{trip.cities.join(' · ')}</div>{/if}
<div class="trip-footer">
{#if trip.status === 'active'}<span class="badge active">Active</span>{/if}
{#if trip.status === 'completed'}<span class="badge completed">Completed</span>{/if}
{#if trip.daysAway}<span class="trip-countdown">{trip.daysAway}</span>{/if}
{#if trip.points}
<span class="trip-points">{formatPoints(trip.points)} pts</span>
{/if}
</div>
</div>
</a>
{/each}
</div>
{:else}
<!-- Upcoming -->
<section class="section">
<div class="section-title">UPCOMING</div>
<div class="trip-grid">
{#each upcoming as trip (trip.id)}
<a href="/trips/trip?id={trip.id}" class="trip-card">
<div class="trip-photo" style="background-image:url('{trip.cover}')">
{#if trip.shareToken}
<button class="share-btn" title="Share trip">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
</button>
{/if}
</div>
<div class="trip-body">
<div class="trip-name">{trip.name}</div>
<div class="trip-dates">{trip.dates} · {trip.duration}</div>
<div class="trip-cities">{trip.cities.join(' · ')}</div>
<div class="trip-footer">
{#if trip.status === 'active'}<span class="badge active">Active</span>{/if}
<span class="trip-countdown">{trip.daysAway}</span>
{#if trip.points}
<span class="trip-points">{formatPoints(trip.points)} pts</span>
{/if}
</div>
</div>
</a>
{/each}
</div>
</section>
<!-- Past -->
<section class="section">
<div class="section-title">PAST ADVENTURES</div>
<div class="trip-grid">
{#each past as trip (trip.id)}
<a href="/trips/trip?id={trip.id}" class="trip-card muted">
<div class="trip-photo" style={trip.cover ? `background-image:url('${trip.cover}')` : ''}>
{#if !trip.cover}
<div class="photo-empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
</div>
{/if}
{#if trip.shareToken}
<button class="share-btn" title="Share trip">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
</button>
{/if}
</div>
<div class="trip-body">
<div class="trip-name">{trip.name}</div>
{#if trip.dates}<div class="trip-dates">{trip.dates} · {trip.duration}</div>{/if}
{#if trip.cities.length > 0}<div class="trip-cities">{trip.cities.join(' · ')}</div>{/if}
<div class="trip-footer">
<span class="badge completed">Completed</span>
{#if trip.points}
<span class="trip-points">{formatPoints(trip.points)} pts</span>
{/if}
{#if trip.cash}
<span class="trip-cash">${trip.cash.toLocaleString()}</span>
{/if}
</div>
</div>
</a>
{/each}
</div>
</section>
{/if}
</div>
</div>
<CreateTripModal bind:open={createOpen} onCreated={(id) => goto(`/trips/trip?id=${id}`)} />
<style>
/* ── Stats Bar ── */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: 14px; }
.stat-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) 6px; text-align: center; }
.stat-value { font-size: var(--text-md); font-weight: 700; font-family: var(--mono); color: var(--text-1); line-height: 1.1; }
.stat-label { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-0.5); text-transform: uppercase; letter-spacing: 0.05em; }
/* ── Header ── */
.header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.page-subtitle { font-size: var(--text-2xl); font-weight: 300; color: var(--text-1); line-height: 1.15; margin-top: -1px; }
.btn-primary { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity var(--transition); }
.btn-primary:hover { opacity: 0.9; }
/* ── Search ── */
.search-wrap { position: relative; margin-bottom: var(--sp-4); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.search-input { padding-left: 40px; font-size: var(--text-md); }
.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-4); padding: var(--sp-1); }
.search-clear svg { width: 16px; height: 16px; }
.search-results-label { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }
/* ── Sections ── */
.section { margin-bottom: var(--section-gap); }
.section-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); }
/* ── Trip Grid ── */
.trip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
/* ── Trip Card ── */
.trip-card {
background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
box-shadow: var(--card-shadow-sm); overflow: hidden; transition: all var(--transition);
text-decoration: none; color: inherit; display: block;
}
.trip-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
.trip-card.muted { opacity: 0.6; }
.trip-card.muted:hover { opacity: 0.85; }
.trip-photo {
width: 100%; height: 180px; background: var(--card-hover) center/cover no-repeat;
position: relative;
}
.photo-empty {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
color: var(--text-4);
}
.photo-empty svg { width: 28px; height: 28px; opacity: 0.3; }
.share-btn {
position: absolute; top: var(--sp-2); right: var(--sp-2);
width: 28px; height: 28px; border-radius: 50%;
background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
border: none; color: white; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all var(--transition); opacity: 0;
}
.trip-card:hover .share-btn { opacity: 1; }
.share-btn:hover { background: rgba(0,0,0,0.55); }
.share-btn svg { width: 13px; height: 13px; }
.trip-body { padding: 8px 14px 10px; }
.trip-name { font-size: var(--text-base); font-weight: 600; color: var(--text-1); line-height: 1.3; }
.trip-dates { font-size: var(--text-xs); color: var(--text-3); margin-top: 3px; }
.trip-cities { font-size: var(--text-xs); color: var(--text-3); margin-top: 1px; opacity: 0.7; }
.trip-footer { display: flex; align-items: center; gap: var(--sp-1.5); margin-top: var(--sp-1.5); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-1.5); }
.trip-countdown { font-size: var(--text-xs); color: var(--text-3); font-family: var(--mono); }
.trip-points { font-size: var(--text-xs); font-family: var(--mono); color: var(--accent); font-weight: 500; }
.trip-cash { font-size: var(--text-xs); font-family: var(--mono); color: var(--text-3); }
/* ── Badges ── */
.badge { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-sm); line-height: 1.5; }
.badge.active { background: var(--accent-bg); color: var(--accent); }
.badge.completed { background: var(--surface-secondary); color: var(--text-3); }
@media (max-width: 768px) {
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.trip-grid { grid-template-columns: 1fr; }
.page-subtitle { font-size: var(--text-xl); }
.trip-photo { height: 160px; }
.trip-body { padding: 10px 16px 12px; }
.trip-name { font-size: var(--text-md); }
}
</style>

1041
frontend-v2/src/routes/(app)/trips/trip/+page.svelte Normal file
View File

File diff suppressed because it is too large Load Diff

9
frontend-v2/src/routes/(auth)/+layout.svelte Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts">
let { children } = $props();
</script>
<svelte:head>
<title>Login — Platform</title>
</svelte:head>
{@render children()}

128
frontend-v2/src/routes/(auth)/login/+page.svelte Normal file
View File

@@ -0,0 +1,128 @@
<script lang="ts">
import { platformAuth } from '$lib/api/client';
import { page } from '$app/state';
let username = $state('');
let password = $state('');
let error = $state('');
let loading = $state(false);
async function handleLogin(e: Event) {
e.preventDefault();
error = '';
loading = true;
try {
const res = await platformAuth.login(username, password);
if (res.error) {
error = res.error;
} else {
const redirectTo = page.url.searchParams.get('redirect') || '/';
window.location.href = redirectTo;
}
} catch {
error = 'Unable to connect to server';
} finally {
loading = false;
}
}
</script>
<div class="login-wrapper">
<div class="login-card">
<div class="login-logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
Platform
</div>
<div class="login-subtitle">Sign in to your account</div>
<form onsubmit={handleLogin}>
{#if error}
<div class="login-error">{error}</div>
{/if}
<div class="login-field">
<label class="login-label" for="username">Username</label>
<input
id="username"
class="input"
type="text"
placeholder="Enter username"
bind:value={username}
autocomplete="username"
required
/>
</div>
<div class="login-field">
<label class="login-label" for="password">Password</label>
<input
id="password"
class="input"
type="password"
placeholder="Enter password"
bind:value={password}
autocomplete="current-password"
required
/>
</div>
<button class="btn-primary full" type="submit" disabled={loading}>
{loading ? 'Signing in...' : 'Sign in'}
</button>
</form>
</div>
</div>
<style>
.login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--canvas);
}
.login-card {
width: 100%;
max-width: 380px;
background: var(--card);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--card-shadow);
border: 1px solid var(--border);
}
.login-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 8px;
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-1);
}
.login-subtitle {
text-align: center;
font-size: var(--text-base);
color: var(--text-3);
margin-bottom: 28px;
}
.login-field {
margin-bottom: 16px;
}
.login-label {
display: block;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
margin-bottom: 6px;
}
.login-error {
font-size: var(--text-sm);
color: var(--error);
background: var(--error-bg);
padding: 10px 14px;
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
</style>

20
frontend-v2/src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
import '../app.css';
import { onMount } from 'svelte';
import { initTheme } from '$lib/stores/theme.svelte';
let { children } = $props();
onMount(() => {
initTheme();
});
</script>
<svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<title>Platform</title>
</svelte:head>
{@render children()}

3
frontend-v2/static/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# allow crawling everything by default
User-agent: *
Disallow:

14
frontend-v2/svelte.config.js Normal file
View File

@@ -0,0 +1,14 @@
import adapter from '@sveltejs/adapter-node';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
},
vitePlugin: {
dynamicCompileOptions: ({ filename }) =>
filename.includes('node_modules') ? undefined : { runes: true }
}
};
export default config;

20
frontend-v2/tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"rewriteRelativeImportExtensions": true,
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
//
// To make changes to top-level options such as include and exclude, we recommend extending
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
}

10
frontend-v2/vite.config.ts Normal file
View File

@@ -0,0 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss(), sveltekit()],
server: {
allowedHosts: ['test.quadjourney.com']
}
});