Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ginnoir
|
a12208d2fe | ||
|
ginnoir
|
14175d3faa | ||
|
ginnoir
|
c3e78932fe | ||
|
ginnoir
|
a332935ba7 | ||
|
ginnoir
|
51c8d3c92d | ||
|
ginnoir
|
62c3d33350 | ||
|
ginnoir
|
2408d37f8e | ||
|
ginnoir
|
f47c1c3a23 | ||
|
ginnoir
|
6e92648a41 | ||
|
ginnoir
|
6802ae08db | ||
|
ginnoir
|
b935ff209c | ||
|
ginnoir
|
3fb5ddc5dd | ||
|
ginnoir
|
ca536b5c33 | ||
|
ginnoir
|
ec2f3930ad | ||
|
ginnoir
|
10cad3df17 | ||
|
ginnoir
|
77db935329 | ||
|
ginnoir
|
c6a34f7471 | ||
|
ginnoir
|
076e35aced | ||
|
ginnoir
|
8bf00c326d | ||
|
ginnoir
|
6a1ec8bb7b | ||
|
ginnoir
|
fe4673f1cd | ||
|
ginnoir
|
4ec1f34150 | ||
|
ginnoir
|
7938425850 | ||
|
ginnoir
|
13d94b3751 | ||
|
ginnoir
|
aae3e30843 | ||
|
ginnoir
|
23a14e1650 | ||
|
ginnoir
|
cce3bac5b2 | ||
|
ginnoir
|
31c5805b34 | ||
|
ginnoir
|
989bae8f1e | ||
|
ginnoir
|
090366422d | ||
|
ginnoir
|
4049a73c6b | ||
|
ginnoir
|
272d3cbbe6 | ||
|
ginnoir
|
b5a966e3a9 |
+2
-2
@@ -1,5 +1,5 @@
|
||||
# Public app URL (used for OIDC redirect URIs, share links, etc.)
|
||||
NEXT_PUBLIC_APP_URL=https://fam.ginnoir.com
|
||||
NEXT_PUBLIC_APP_URL=https://fam.yourdomain.com
|
||||
|
||||
# Postgres
|
||||
DATABASE_URL=postgres://famapp:famapp@localhost:5432/famapp
|
||||
@@ -15,7 +15,7 @@ DEV_LOGIN_NAME=Dev User
|
||||
DEV_HOUSEHOLD_NAME=Home
|
||||
|
||||
# OIDC (Authentik)
|
||||
AUTH_OIDC_ISSUER=https://auth.ginnoir.com/application/o/famapp/
|
||||
AUTH_OIDC_ISSUER=https://auth.yourdomain.com/application/o/famapp/
|
||||
AUTH_OIDC_CLIENT_ID=replace-me
|
||||
AUTH_OIDC_CLIENT_SECRET=replace-me
|
||||
|
||||
|
||||
+23
-17
@@ -1,51 +1,57 @@
|
||||
# ── famapp ────────────────────────────────────────────────────────────────────
|
||||
# These vars are consumed by the famapp service in docker-compose.yml.
|
||||
|
||||
# Image tag to deploy. Pin to a specific version after first deploy
|
||||
# (e.g. ghcr.io/ginnoir/famapp:v0.1.0). `latest` is fine for staging/initial.
|
||||
FAMAPP_IMAGE=ghcr.io/ginnoir/famapp:latest
|
||||
# `always` pulls on every `up`; set `missing` if you want to skip pulls.
|
||||
FAMAPP_PULL_POLICY=always
|
||||
# Authentik image tag. Bump in lockstep with Authentik release notes.
|
||||
AUTHENTIK_IMAGE_TAG=2024.12.3
|
||||
# Run drizzle migrations on container start. Leave true.
|
||||
RUN_MIGRATIONS=true
|
||||
|
||||
# Public URL for the app — used by Auth.js for OIDC redirect URIs.
|
||||
AUTH_URL=https://fam.ginnoir.com
|
||||
# Public URL for the app
|
||||
AUTH_URL=https://fam.yourdomain.com
|
||||
|
||||
# famapp Postgres credentials (used to build DATABASE_URL inside compose.yaml)
|
||||
# famapp Postgres
|
||||
FAMAPP_DB_USER=famapp
|
||||
FAMAPP_DB_PASSWORD=replace-with-strong-password
|
||||
FAMAPP_DB_NAME=famapp
|
||||
|
||||
# Auth.js session secret — generate with: openssl rand -base64 32
|
||||
# NOTE: Reactive Resume uses RESUME_AUTH_SECRET; AUTH_SECRET is famapp-only.
|
||||
|
||||
AUTH_SECRET=replace-with-openssl-rand-base64-32
|
||||
|
||||
# OIDC provider (Authentik) — fill in after bootstrapping Authentik
|
||||
AUTH_OIDC_ISSUER=https://auth.ginnoir.com/application/o/famapp/
|
||||
AUTH_OIDC_ISSUER=https://auth.yourdomain.com/application/o/famapp/
|
||||
AUTH_OIDC_CLIENT_ID=replace-me
|
||||
AUTH_OIDC_CLIENT_SECRET=replace-me
|
||||
|
||||
# Web Push VAPID keys — generate with: pnpm vapid:generate (run from the repo)
|
||||
# Web Push VAPID keys — generate with: pnpm vapid:generate
|
||||
VAPID_PUBLIC_KEY=
|
||||
VAPID_PRIVATE_KEY=
|
||||
# Must be "mailto:<address>" or a URL
|
||||
VAPID_SUBJECT=mailto:3nigma.matt@gmail.com
|
||||
VAPID_SUBJECT=mailto:your-email@example.com
|
||||
|
||||
# ntfy push fallback — uses your existing ntfy instance at ntfy.ginnoir.com
|
||||
# Leave NTFY_URL blank to disable ntfy fanout.
|
||||
NTFY_URL=https://ntfy.ginnoir.com
|
||||
# ntfy push fallback
|
||||
NTFY_URL=https://ntfy.yourdomain.com
|
||||
NTFY_TOPIC=famapp
|
||||
|
||||
# Log level: error | warn | info | debug
|
||||
LOG_LEVEL=info
|
||||
|
||||
# ── Authentik ─────────────────────────────────────────────────────────────────
|
||||
# MinIO object storage (garden image uploads)
|
||||
famapp_MINIO_ROOT_USER=famapp
|
||||
famapp_MINIO_ROOT_PASSWORD=replace-with-strong-password
|
||||
famapp_MINIO_BUCKET=garden
|
||||
|
||||
# Authentik Postgres credentials (separate DB per Matt's rule)
|
||||
# OpenPlantBook API (optional — used for plant species lookup)
|
||||
famapp_OPENPLANTBOOK_CLIENT_ID=
|
||||
famapp_OPENPLANTBOOK_CLIENT_SECRET=
|
||||
|
||||
# ── Authentik ─────────────────────────────────────────────────────────────────
|
||||
AUTHENTIK_DB_USER=authentik
|
||||
AUTHENTIK_DB_PASSWORD=replace-with-strong-password
|
||||
AUTHENTIK_DB_NAME=authentik
|
||||
|
||||
# Authentik secret key — generate with: openssl rand -base64 60
|
||||
AUTHENTIK_SECRET_KEY=replace-with-openssl-rand-base64-60
|
||||
|
||||
# ── Cloudflare (Caddy DNS-01 TLS) ─────────────────────────────────────────────
|
||||
CF_API_TOKEN=replace-with-cloudflare-api-token
|
||||
|
||||
@@ -17,7 +17,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22
|
||||
node-version: 24
|
||||
cache: pnpm
|
||||
|
||||
- run: pnpm install --frozen-lockfile
|
||||
@@ -39,7 +39,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22
|
||||
node-version: 24
|
||||
cache: pnpm
|
||||
|
||||
- run: pnpm install --frozen-lockfile
|
||||
|
||||
@@ -49,5 +49,13 @@ tests/.auth/
|
||||
# Backups
|
||||
deploy/backups/data/
|
||||
|
||||
# Production configs and deploy scripts — maintainer-specific, never commit
|
||||
deploy/.prod/
|
||||
deploy/compose.yaml
|
||||
deploy/Caddyfile
|
||||
deploy/Caddyfile.dev.snippet
|
||||
scripts/apply-compose.ps1
|
||||
scripts/sync-prod.ps1
|
||||
|
||||
# Design handoff bundle (reference only, not committed)
|
||||
.design-tmp/
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
"release": true,
|
||||
"releaseName": "v${version}"
|
||||
},
|
||||
"hooks": {
|
||||
"before:git:release": "echo 'Check: README.md reflects current modules and env vars before tagging'"
|
||||
},
|
||||
"plugins": {
|
||||
"@release-it/conventional-changelog": {
|
||||
"preset": {
|
||||
|
||||
@@ -31,7 +31,7 @@ Codex and Claude Code both work on this project. Keep `AGENTS.md`, `CLAUDE.md`,
|
||||
| Realtime | Postgres `LISTEN/NOTIFY` → SSE | Simpler than WebSockets, fine for two users |
|
||||
| Reverse proxy | Caddy (existing) | `fam.ginnoir.com` → famapp:3000, `auth.ginnoir.com` → authentik |
|
||||
| Package manager | pnpm | Fast, content-addressed store, strict deps |
|
||||
| Runtime | Node 22 LTS | In `node:22-alpine` container |
|
||||
| Runtime | Node 24 LTS | In `node:24-alpine` container |
|
||||
| Host | Ubuntu Server 24.04 x64, Docker + Compose | Existing self-host stack |
|
||||
|
||||
Domain: `fam.ginnoir.com`. SSO: `auth.ginnoir.com`.
|
||||
@@ -106,7 +106,7 @@ All household-scoped entity tables include `household_id`. Sub-entities (`calend
|
||||
```yaml
|
||||
# compose.yaml (sketch — final lives in /deploy)
|
||||
services:
|
||||
famapp: # node:22-alpine, Next.js
|
||||
famapp: # node:24-alpine, Next.js
|
||||
famapp-db: # postgres:16
|
||||
authentik-server:
|
||||
authentik-worker:
|
||||
|
||||
@@ -1,5 +1,65 @@
|
||||
# Changelog
|
||||
|
||||
## [0.5.3](https://github.com/ginnoir/famapp/compare/v0.5.2...v0.5.3) (2026-06-04)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- use next_public_app_url for share link base url instead of localhost fallback ([14175d3](https://github.com/ginnoir/famapp/commit/14175d3faa146ebff7c825848837c75047a8eb71))
|
||||
|
||||
## [0.5.2](https://github.com/ginnoir/famapp/compare/v0.5.1...v0.5.2) (2026-06-03)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **dashboard:** render greeting and date client-side so local timezone is used instead of server UTC
|
||||
|
||||
## [0.5.1](https://github.com/ginnoir/famapp/compare/v0.5.0...v0.5.1) (2026-06-03)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **dashboard:** always show tab strip and add-dashboard button regardless of dashboard count
|
||||
- **search:** show Ctrl+K on Windows/Linux instead of ⌘K
|
||||
- **mobile:** add search icon button in topbar for mobile viewports
|
||||
- **mobile:** lock html/body overflow and use 100dvh to prevent topbar scrolling off-screen
|
||||
|
||||
## [0.5.0](https://github.com/ginnoir/famapp/compare/v0.4.10...v0.5.0) (2026-06-03)
|
||||
|
||||
### Features
|
||||
|
||||
- **mobile:** full mobile experience overhaul — bottom nav, touch targets, calendar mobile layout with day/week/agenda views and calendars bottom sheet, bidirectional swipe gestures on list items (right to complete, left to delete), iOS safe-area and keyboard support, input zoom prevention
|
||||
- **mobile:** settings navigation replaced with 2-column icon grid (no horizontal scroll)
|
||||
- **mobile:** remove floating action button in favour of persistent topbar quick-add button
|
||||
|
||||
## [0.4.10](https://github.com/ginnoir/famapp/compare/v0.4.9...v0.4.10) (2026-06-03)
|
||||
|
||||
## [0.4.8](https://github.com/ginnoir/famapp/compare/v0.4.6...v0.4.8) (2026-06-03)
|
||||
|
||||
### Features
|
||||
|
||||
- **garden:** add share button to plant and container detail views ([989bae8](https://github.com/ginnoir/famapp/commit/989bae8f1e2d5577da3e8777b6a35320c6da274c))
|
||||
- share links visible on plants/containers; container image gallery ([c6a34f7](https://github.com/ginnoir/famapp/commit/c6a34f74717505e39ac4a88077728efa9fc50478))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **deploy:** separate reactive resume auth_secret from famapp ([aae3e30](https://github.com/ginnoir/famapp/commit/aae3e30843f54406244b637073aaf5e9ccc6b1d3))
|
||||
|
||||
### Documentation
|
||||
|
||||
- add contributing guide, env reference, and operations runbook ([076e35a](https://github.com/ginnoir/famapp/commit/076e35aced9303973da71ddd0ebded13f6c98833))
|
||||
- add professional readme with full feature coverage and release pipeline hook ([6a1ec8b](https://github.com/ginnoir/famapp/commit/6a1ec8bb7be7ce64e82e5a4cee6b9f4ef92c7af8))
|
||||
- update decisions index and task index for garden module and adr backfill ([8bf00c3](https://github.com/ginnoir/famapp/commit/8bf00c326db591851bdf8eee2fcedbfbed53d076))
|
||||
|
||||
## [0.4.6](https://github.com/ginnoir/famapp/compare/v0.4.5...v0.4.6) (2026-06-02)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **garden:** accept relative urls for plant image uploads ([6ca2e52](https://github.com/ginnoir/famapp/commit/6ca2e52e0a63d94826d9b1e208bcdded9c75fb07))
|
||||
|
||||
## [0.4.5](https://github.com/ginnoir/famapp/compare/v0.4.4...v0.4.5) (2026-06-02)
|
||||
|
||||
### Features
|
||||
|
||||
- **bangs:** add bang counter dashboard widget ([c850521](https://github.com/ginnoir/famapp/commit/c850521f3e993a5410f37cf29eb635cbc9540fd1))
|
||||
|
||||
## [0.4.4](https://github.com/ginnoir/famapp/compare/v0.4.3...v0.4.4) (2026-06-02)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
@@ -31,7 +31,7 @@ Codex and Claude Code both work on this project. Keep `AGENTS.md`, `CLAUDE.md`,
|
||||
| Realtime | Postgres `LISTEN/NOTIFY` → SSE | Simpler than WebSockets, fine for two users |
|
||||
| Reverse proxy | Caddy (existing) | `fam.ginnoir.com` → famapp:3000, `auth.ginnoir.com` → authentik |
|
||||
| Package manager | pnpm | Fast, content-addressed store, strict deps |
|
||||
| Runtime | Node 22 LTS | In `node:22-alpine` container |
|
||||
| Runtime | Node 24 LTS | In `node:24-alpine` container |
|
||||
| Host | Ubuntu Server 24.04 x64, Docker + Compose | Existing self-host stack |
|
||||
|
||||
Domain: `fam.ginnoir.com`. SSO: `auth.ginnoir.com`.
|
||||
@@ -106,7 +106,7 @@ All household-scoped entity tables include `household_id`. Sub-entities (`calend
|
||||
```yaml
|
||||
# compose.yaml (sketch — final lives in /deploy)
|
||||
services:
|
||||
famapp: # node:22-alpine, Next.js
|
||||
famapp: # node:24-alpine, Next.js
|
||||
famapp-db: # postgres:16
|
||||
authentik-server:
|
||||
authentik-worker:
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
# syntax=docker/dockerfile:1
|
||||
|
||||
# ── Stage 1: fetch dependencies ───────────────────────────────────────────────
|
||||
FROM node:22-alpine AS deps
|
||||
FROM node:24-alpine AS deps
|
||||
RUN corepack enable && corepack prepare pnpm@10.33.3 --activate
|
||||
WORKDIR /app
|
||||
COPY package.json pnpm-lock.yaml .npmrc ./
|
||||
@@ -20,7 +20,7 @@ RUN --mount=type=cache,id=famapp-nextjs,target=/app/.next/cache \
|
||||
pnpm build
|
||||
|
||||
# ── Stage 3: production runtime ───────────────────────────────────────────────
|
||||
FROM node:22-alpine AS runner
|
||||
FROM node:24-alpine AS runner
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
|
||||
@@ -1,8 +1,158 @@
|
||||
# famapp
|
||||
|
||||
Self-hosted family coordination: shared calendar, lists, notes.
|
||||
Self-hosted family coordination web app. Shared calendar, lists, notes, and garden tracker — installable as a PWA, protected by OIDC single sign-on.
|
||||
|
||||
- **Plan & architecture:** [`CLAUDE.md`](CLAUDE.md)
|
||||
- **Current progress:** [`STATUS.md`](STATUS.md)
|
||||
- **Task briefs (for sub-sessions):** [`docs/tasks/`](docs/tasks/)
|
||||
- **Architecture decisions:** [`docs/decisions/`](docs/decisions/)
|
||||
[](https://github.com/ginnoir/famapp/actions/workflows/ci.yml)
|
||||
[](https://github.com/ginnoir/famapp/releases)
|
||||
[](https://github.com/ginnoir/famapp/pkgs/container/famapp)
|
||||
[](https://nodejs.org)
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
### Modules
|
||||
|
||||
| Module | What it does |
|
||||
| ------------ | ------------------------------------------------------------------------------------------ |
|
||||
| **Calendar** | Month / week / day views, drag-to-create, household and private calendars, event reminders |
|
||||
| **Lists** | Shopping and task lists with real-time sync, reorder, keyboard-first item entry |
|
||||
| **Notes** | Markdown notes with pinning, safe preview, and optional remind-at scheduling |
|
||||
| **Garden** | Plant and container tracking, care schedules, care logs, species lookup via OpenPlantBook |
|
||||
|
||||
### Platform capabilities
|
||||
|
||||
| Capability | Detail |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| **Dashboard** | Per-user named dashboards, drag-resize widget grid, configurable widget instances |
|
||||
| **Quick-add** | `Cmd/Ctrl+K` command palette and `+` FAB — every module registers its own actions |
|
||||
| **Share links** | Any entity produces a temporary public link (`/s/<token>`), scoped read or read-write |
|
||||
| **Activity log** | Household-scoped feed of every create / update / delete across all modules |
|
||||
| **Reminders** | Generic reminder engine ticked every 30 s; notes and calendar events both use it |
|
||||
| **Push notifications** | VAPID web push + in-app inbox + optional ntfy fallback |
|
||||
| **Themes** | Two palettes (`default` / `warm`) × light / dark / system, zero flash on load |
|
||||
| **PWA / offline** | Installable on iOS and Android, offline shell, stale-while-revalidate caching |
|
||||
| **Structured logging** | JSON logs via pino in production, pretty-printed in dev, `LOG_LEVEL` configurable |
|
||||
| **Nightly backups** | `pg_dump` cron for both databases, 14-day daily / 8-week weekly / 6-month monthly retention |
|
||||
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
- **Docker** with the Compose plugin (v2)
|
||||
- **Caddy** (or any reverse proxy that handles HTTPS)
|
||||
- **Authentik** — famapp delegates all authentication to an Authentik OIDC provider; see the [bootstrap guide](deploy/authentik/README.md)
|
||||
- A domain with DNS pointing to your host
|
||||
|
||||
---
|
||||
|
||||
## Quick start
|
||||
|
||||
Full details are in [`deploy/README.md`](deploy/README.md). The short version:
|
||||
|
||||
```bash
|
||||
# 1. Clone and enter the repo
|
||||
git clone https://github.com/ginnoir/famapp.git /srv/famapp
|
||||
cd /srv/famapp
|
||||
|
||||
# 2. Create your environment file
|
||||
cp .env.production.example deploy/.env
|
||||
# Edit deploy/.env — see Configuration below for required values
|
||||
|
||||
# 3. Configure your reverse proxy
|
||||
# Add deploy/Caddyfile.snippet to your Caddyfile, then reload Caddy
|
||||
|
||||
# 4. Bootstrap Authentik and record the OIDC client id/secret in deploy/.env
|
||||
# See deploy/authentik/README.md
|
||||
|
||||
# 5. Start the stack
|
||||
docker compose -f deploy/compose.example.yaml up -d
|
||||
```
|
||||
|
||||
The container runs database migrations automatically on start. The first user to sign in becomes the household owner; a second sign-in joins the same household as a member.
|
||||
|
||||
Pin `FAMAPP_IMAGE` in `deploy/.env` after the first deploy:
|
||||
|
||||
```
|
||||
FAMAPP_IMAGE=ghcr.io/ginnoir/famapp:v0.4.7
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Development setup
|
||||
|
||||
Requires Node ≥ 22 and pnpm 10.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/ginnoir/famapp.git
|
||||
cd famapp
|
||||
pnpm install
|
||||
|
||||
# Copy the example env and fill in dev values (set ENABLE_DEV_LOGIN=true)
|
||||
cp .env.example .env
|
||||
|
||||
# Start the local database, run migrations, seed, and launch the dev server
|
||||
pnpm dev:local
|
||||
```
|
||||
|
||||
Then open `http://localhost:3000/login` and click **Dev login**.
|
||||
|
||||
Additional dev commands:
|
||||
|
||||
| Command | Purpose |
|
||||
| --------------------- | ---------------------------------------------- |
|
||||
| `pnpm dev:reset` | Drop and reseed the local database |
|
||||
| `pnpm db:studio` | Open Drizzle Studio against the local database |
|
||||
| `pnpm db:generate` | Generate a new migration after schema changes |
|
||||
| `pnpm typecheck` | Run `tsc --noEmit` |
|
||||
| `pnpm lint` | ESLint |
|
||||
| `pnpm test:e2e` | Playwright E2E suite |
|
||||
| `pnpm vapid:generate` | Print VAPID key env vars to stdout |
|
||||
| `pnpm gen:icons` | Regenerate PWA icons from `public/icon.svg` |
|
||||
|
||||
See [`docs/dev-login.md`](docs/dev-login.md) for push notification and E2E testing setup.
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
Copy `.env.production.example` to `deploy/.env` and fill in values. Key variables:
|
||||
|
||||
| Variable | Required | How to generate |
|
||||
| -------------------------------- | -------- | -------------------------------------------------------------------- |
|
||||
| `AUTH_URL` | Yes | Public HTTPS URL for the app (e.g. `https://fam.yourdomain.com`) |
|
||||
| `AUTH_SECRET` | Yes | `openssl rand -base64 32` |
|
||||
| `AUTH_OIDC_ISSUER` | Yes | From Authentik — `https://auth.yourdomain.com/application/o/famapp/` |
|
||||
| `AUTH_OIDC_CLIENT_ID` | Yes | From Authentik application |
|
||||
| `AUTH_OIDC_CLIENT_SECRET` | Yes | From Authentik application |
|
||||
| `FAMAPP_DB_PASSWORD` | Yes | Strong random password |
|
||||
| `AUTHENTIK_DB_PASSWORD` | Yes | Strong random password |
|
||||
| `AUTHENTIK_SECRET_KEY` | Yes | `openssl rand -base64 60` |
|
||||
| `VAPID_PUBLIC_KEY` | Push | `pnpm vapid:generate` |
|
||||
| `VAPID_PRIVATE_KEY` | Push | `pnpm vapid:generate` |
|
||||
| `VAPID_SUBJECT` | Push | `mailto:your-email@example.com` |
|
||||
| `NTFY_URL` / `NTFY_TOPIC` | Optional | ntfy push fallback |
|
||||
| `famapp_OPENPLANTBOOK_CLIENT_ID` | Optional | OpenPlantBook API — plant species lookup |
|
||||
| `LOG_LEVEL` | Optional | `error` / `warn` / `info` / `debug` (default: `info`) |
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
famapp uses an extensibility-first module system: every feature lives under `src/modules/<name>/` and declares its tables, routes, dashboard widgets, quick-add actions, and share/reminder/search behaviors via a manifest. Core services (sharing, push, reminders, activity log, search) operate generically — adding a new module does not require touching core code.
|
||||
|
||||
See [`CLAUDE.md`](CLAUDE.md) for the full architecture brief and [`docs/decisions/`](docs/decisions/) for ADRs.
|
||||
|
||||
---
|
||||
|
||||
## Deployment
|
||||
|
||||
| Resource | Link |
|
||||
| -------------------- | -------------------------------------------------------------------------------- |
|
||||
| Full host setup | [`deploy/README.md`](deploy/README.md) |
|
||||
| Authentik bootstrap | [`deploy/authentik/README.md`](deploy/authentik/README.md) |
|
||||
| Backup / restore | [`deploy/backups/README.md`](deploy/backups/README.md) |
|
||||
| Pre-deploy checklist | [`docs/tasks/09-pre-deploy-checklist.md`](docs/tasks/09-pre-deploy-checklist.md) |
|
||||
| Changelog | [`CHANGELOG.md`](CHANGELOG.md) |
|
||||
|
||||
Cutting a release: tag `vX.Y.Z` on `main` and push — CI builds and pushes `ghcr.io/ginnoir/famapp:vX.Y.Z` automatically.
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
# famapp — paste into your existing Caddyfile.
|
||||
# famapp runs on 3010, authentik-server on 9200 (both bound to the host by deploy/compose.yaml).
|
||||
# Add these blocks to your existing Caddyfile.
|
||||
# Assumes famapp and authentik-server are reachable by Caddy
|
||||
# (e.g. on a shared Docker network).
|
||||
|
||||
fam.ginnoir.com {
|
||||
reverse_proxy 192.168.1.69:3010
|
||||
fam.yourdomain.com {
|
||||
reverse_proxy famapp:3000
|
||||
}
|
||||
|
||||
auth.ginnoir.com {
|
||||
reverse_proxy 192.168.1.69:9200
|
||||
auth.yourdomain.com {
|
||||
reverse_proxy authentik-server:9000
|
||||
}
|
||||
|
||||
+19
-5
@@ -2,16 +2,30 @@
|
||||
|
||||
Trunk-based: `main` is always green. Production deploys only from version tags (`vX.Y.Z`). The dev-login flow is retained for local development behind a double gate (`NODE_ENV !== "production"` **and** `ENABLE_DEV_LOGIN=true`); a startup assertion in `src/lib/dev-login-config.ts` makes a misconfigured prod fail loud instead of silently exposing it.
|
||||
|
||||
## Files in this directory
|
||||
|
||||
| File | Purpose |
|
||||
| ----------------------- | -------------------------------------------------------------------------- |
|
||||
| `compose.example.yaml` | **Start here.** Standalone famapp + Authentik stack for new deployments. |
|
||||
| `compose.yaml` | Maintainer's production compose (full homelab monolith — not a template). |
|
||||
| `Caddyfile.snippet` | Reverse proxy blocks to add to your Caddyfile. |
|
||||
| `Caddyfile.dev.snippet` | Dev machine proxy block (maintainer-specific). |
|
||||
| `Caddyfile` | Maintainer's full production Caddyfile (not a template). |
|
||||
| `authentik/README.md` | Authentik bootstrap guide. |
|
||||
| `backups/` | Backup container scripts (used by `famapp-backup` in the example compose). |
|
||||
|
||||
## One-time host setup
|
||||
|
||||
1. Install Docker + Compose plugin on the host.
|
||||
2. `git clone` this repo to e.g. `/srv/famapp`.
|
||||
3. Copy `.env.production.example` → `/srv/famapp/deploy/.env` and fill in real values.
|
||||
3. Copy `deploy/compose.example.yaml` → `/srv/famapp/deploy/compose.yaml`.
|
||||
4. Copy `.env.production.example` → `/srv/famapp/deploy/.env` and fill in real values.
|
||||
- `openssl rand -base64 32` for `AUTH_SECRET`.
|
||||
- `openssl rand -base64 60` for `AUTHENTIK_SECRET_KEY`.
|
||||
- `pnpm vapid:generate` (locally) for the three VAPID lines.
|
||||
4. Bootstrap Authentik per `deploy/authentik/README.md`. Save the OIDC client id/secret into `.env`.
|
||||
5. Wire Caddy with `deploy/Caddyfile.snippet`.
|
||||
- `openssl rand -hex 64` for the MinIO passwords.
|
||||
- `pnpm vapid:generate` (locally, from the repo) for the three VAPID lines.
|
||||
5. Bootstrap Authentik per `deploy/authentik/README.md`. Save the OIDC client id/secret into `.env`.
|
||||
6. Wire Caddy (or any reverse proxy) using `deploy/Caddyfile.snippet`.
|
||||
|
||||
## Cutting a release
|
||||
|
||||
@@ -28,7 +42,7 @@ git push origin v0.1.0
|
||||
```bash
|
||||
cd /srv/famapp/deploy
|
||||
# pin to the tag you just cut
|
||||
echo 'FAMAPP_IMAGE=ghcr.io/ginnoir/famapp:v0.1.0' >> .env # or edit in place
|
||||
sed -i 's|FAMAPP_IMAGE=.*|FAMAPP_IMAGE=ghcr.io/ginnoir/famapp:v0.1.0|' .env
|
||||
docker compose pull famapp
|
||||
docker compose up -d famapp
|
||||
docker compose logs -f famapp # watch migrations + boot
|
||||
|
||||
@@ -6,13 +6,13 @@ Run these steps once after the first `docker compose up -d` in the `deploy/` dir
|
||||
|
||||
## 1. Set the admin password
|
||||
|
||||
Visit `https://auth.ginnoir.com/if/flow/initial-setup/` and set the **akadmin** password.
|
||||
Visit `https://auth.yourdomain.com/if/flow/initial-setup/` and set the **akadmin** password.
|
||||
|
||||
---
|
||||
|
||||
## 2. Create the OIDC provider
|
||||
|
||||
1. Log in to the Authentik Admin UI at `https://auth.ginnoir.com/if/admin/`.
|
||||
1. Log in to the Authentik Admin UI at `https://auth.yourdomain.com/if/admin/`.
|
||||
2. Go to **Applications → Providers → Create**.
|
||||
3. Choose **OAuth2/OpenID Provider**.
|
||||
4. Configure:
|
||||
@@ -21,7 +21,7 @@ Visit `https://auth.ginnoir.com/if/flow/initial-setup/` and set the **akadmin**
|
||||
- **Client type:** `Confidential`
|
||||
- **Client ID:** (auto-generated — copy this)
|
||||
- **Client Secret:** (auto-generated — copy this)
|
||||
- **Redirect URIs:** `https://fam.ginnoir.com/api/auth/callback/authentik`
|
||||
- **Redirect URIs:** `https://fam.yourdomain.com/api/auth/callback/authentik`
|
||||
- **Signing Key:** `authentik Self-signed Certificate`
|
||||
- **Token validity:** 24 hours (or your preference)
|
||||
5. Save and note the **Issuer URL** shown on the provider detail page.
|
||||
@@ -29,13 +29,13 @@ Visit `https://auth.ginnoir.com/if/flow/initial-setup/` and set the **akadmin**
|
||||
The issuer URL will look like:
|
||||
|
||||
```
|
||||
https://auth.ginnoir.com/application/o/famapp/
|
||||
https://auth.yourdomain.com/application/o/famapp/
|
||||
```
|
||||
|
||||
Set this (and the client ID/secret) in famapp's `.env` / production secrets:
|
||||
|
||||
```env
|
||||
AUTH_OIDC_ISSUER=https://auth.ginnoir.com/application/o/famapp/
|
||||
AUTH_OIDC_ISSUER=https://auth.yourdomain.com/application/o/famapp/
|
||||
AUTH_OIDC_CLIENT_ID=<client-id>
|
||||
AUTH_OIDC_CLIENT_SECRET=<client-secret>
|
||||
```
|
||||
@@ -49,7 +49,7 @@ AUTH_OIDC_CLIENT_SECRET=<client-secret>
|
||||
- **Name:** `famapp`
|
||||
- **Slug:** `famapp`
|
||||
- **Provider:** select the `famapp` provider created above
|
||||
- **Launch URL:** `https://fam.ginnoir.com`
|
||||
- **Launch URL:** `https://fam.yourdomain.com`
|
||||
3. Save.
|
||||
|
||||
---
|
||||
@@ -68,7 +68,7 @@ AUTH_OIDC_CLIENT_SECRET=<client-secret>
|
||||
|
||||
Each user can enroll a passkey from their Authentik profile:
|
||||
|
||||
1. Sign in as the user at `https://auth.ginnoir.com`.
|
||||
1. Sign in as the user at `https://auth.yourdomain.com`.
|
||||
2. Go to **Settings → MFA Devices → Add → WebAuthn Device**.
|
||||
3. Follow the browser prompt to register a Touch ID / Face ID / hardware key.
|
||||
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
# Standalone famapp deployment template.
|
||||
# Copy this to compose.yaml (or reference with -f), fill in .env from
|
||||
# .env.production.example, then: docker compose up -d
|
||||
#
|
||||
# Caddy (or any reverse proxy) should sit in front — see Caddyfile.snippet.
|
||||
# If Caddy runs in a separate compose stack, add famapp to that stack's
|
||||
# external network instead of exposing ports directly.
|
||||
|
||||
name: famapp
|
||||
|
||||
networks:
|
||||
famapp_net:
|
||||
|
||||
volumes:
|
||||
famapp_db_data:
|
||||
authentik_db_data:
|
||||
authentik_redis_data:
|
||||
garden_uploads:
|
||||
backups:
|
||||
|
||||
services:
|
||||
famapp:
|
||||
image: ${FAMAPP_IMAGE:-ghcr.io/ginnoir/famapp:latest}
|
||||
pull_policy: ${FAMAPP_PULL_POLICY:-always}
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
NODE_ENV: production
|
||||
AUTH_URL: ${AUTH_URL}
|
||||
DATABASE_URL: postgres://${FAMAPP_DB_USER}:${FAMAPP_DB_PASSWORD}@famapp-db:5432/${FAMAPP_DB_NAME}
|
||||
AUTH_SECRET: ${AUTH_SECRET}
|
||||
AUTH_OIDC_ISSUER: ${AUTH_OIDC_ISSUER}
|
||||
AUTH_OIDC_CLIENT_ID: ${AUTH_OIDC_CLIENT_ID}
|
||||
AUTH_OIDC_CLIENT_SECRET: ${AUTH_OIDC_CLIENT_SECRET}
|
||||
VAPID_PUBLIC_KEY: ${VAPID_PUBLIC_KEY}
|
||||
VAPID_PRIVATE_KEY: ${VAPID_PRIVATE_KEY}
|
||||
VAPID_SUBJECT: ${VAPID_SUBJECT}
|
||||
NTFY_URL: ${NTFY_URL:-}
|
||||
NTFY_TOPIC: ${NTFY_TOPIC:-}
|
||||
LOG_LEVEL: ${LOG_LEVEL:-info}
|
||||
RUN_MIGRATIONS: ${RUN_MIGRATIONS:-true}
|
||||
MINIO_ENDPOINT: http://famapp-minio:9000
|
||||
MINIO_ROOT_USER: ${famapp_MINIO_ROOT_USER}
|
||||
MINIO_ROOT_PASSWORD: ${famapp_MINIO_ROOT_PASSWORD}
|
||||
MINIO_BUCKET: ${famapp_MINIO_BUCKET:-garden}
|
||||
OPENPLANTBOOK_CLIENT_ID: ${famapp_OPENPLANTBOOK_CLIENT_ID:-}
|
||||
OPENPLANTBOOK_CLIENT_SECRET: ${famapp_OPENPLANTBOOK_CLIENT_SECRET:-}
|
||||
ports:
|
||||
- "${FAMAPP_PORT:-3000}:3000"
|
||||
depends_on:
|
||||
famapp-db:
|
||||
condition: service_healthy
|
||||
famapp-minio:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- famapp_net
|
||||
|
||||
famapp-db:
|
||||
image: postgres:16-alpine
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
POSTGRES_USER: ${FAMAPP_DB_USER}
|
||||
POSTGRES_PASSWORD: ${FAMAPP_DB_PASSWORD}
|
||||
POSTGRES_DB: ${FAMAPP_DB_NAME}
|
||||
volumes:
|
||||
- famapp_db_data:/var/lib/postgresql/data
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U ${FAMAPP_DB_USER} -d ${FAMAPP_DB_NAME}"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
networks:
|
||||
- famapp_net
|
||||
|
||||
famapp-minio:
|
||||
image: minio/minio:latest
|
||||
command: server /data --console-address ":9001"
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
MINIO_ROOT_USER: ${famapp_MINIO_ROOT_USER}
|
||||
MINIO_ROOT_PASSWORD: ${famapp_MINIO_ROOT_PASSWORD}
|
||||
volumes:
|
||||
- garden_uploads:/data
|
||||
ports:
|
||||
- "9000:9000"
|
||||
- "9001:9001"
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "curl -sf http://localhost:9000/minio/health/live || exit 1"]
|
||||
interval: 30s
|
||||
timeout: 20s
|
||||
retries: 3
|
||||
start_period: 30s
|
||||
networks:
|
||||
- famapp_net
|
||||
|
||||
famapp-backup:
|
||||
image: alpine:3.20
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
FAMAPP_DB_HOST: famapp-db
|
||||
FAMAPP_DB_PORT: "5432"
|
||||
FAMAPP_DB_USER: ${FAMAPP_DB_USER}
|
||||
FAMAPP_DB_PASSWORD: ${FAMAPP_DB_PASSWORD}
|
||||
FAMAPP_DB_NAME: ${FAMAPP_DB_NAME}
|
||||
AUTHENTIK_DB_HOST: authentik-db
|
||||
AUTHENTIK_DB_PORT: "5432"
|
||||
AUTHENTIK_DB_USER: ${AUTHENTIK_DB_USER:-authentik}
|
||||
AUTHENTIK_DB_PASSWORD: ${AUTHENTIK_DB_PASSWORD}
|
||||
AUTHENTIK_DB_NAME: ${AUTHENTIK_DB_NAME:-authentik}
|
||||
volumes:
|
||||
- backups:/backups
|
||||
- ./backups:/scripts:ro
|
||||
depends_on:
|
||||
famapp-db:
|
||||
condition: service_healthy
|
||||
authentik-db:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- famapp_net
|
||||
entrypoint: ["sh", "/scripts/entrypoint.sh"]
|
||||
|
||||
authentik-server:
|
||||
image: ghcr.io/goauthentik/server:${AUTHENTIK_IMAGE_TAG:-2024.12.3}
|
||||
restart: unless-stopped
|
||||
command: server
|
||||
environment:
|
||||
AUTHENTIK_REDIS__HOST: authentik-redis
|
||||
AUTHENTIK_POSTGRESQL__HOST: authentik-db
|
||||
AUTHENTIK_POSTGRESQL__USER: ${AUTHENTIK_DB_USER:-authentik}
|
||||
AUTHENTIK_POSTGRESQL__PASSWORD: ${AUTHENTIK_DB_PASSWORD}
|
||||
AUTHENTIK_POSTGRESQL__NAME: ${AUTHENTIK_DB_NAME:-authentik}
|
||||
AUTHENTIK_SECRET_KEY: ${AUTHENTIK_SECRET_KEY}
|
||||
AUTHENTIK_ERROR_REPORTING__ENABLED: "false"
|
||||
ports:
|
||||
- "9200:9000"
|
||||
depends_on:
|
||||
authentik-db:
|
||||
condition: service_healthy
|
||||
authentik-redis:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- famapp_net
|
||||
|
||||
authentik-worker:
|
||||
image: ghcr.io/goauthentik/server:${AUTHENTIK_IMAGE_TAG:-2024.12.3}
|
||||
restart: unless-stopped
|
||||
command: worker
|
||||
environment:
|
||||
AUTHENTIK_REDIS__HOST: authentik-redis
|
||||
AUTHENTIK_POSTGRESQL__HOST: authentik-db
|
||||
AUTHENTIK_POSTGRESQL__USER: ${AUTHENTIK_DB_USER:-authentik}
|
||||
AUTHENTIK_POSTGRESQL__PASSWORD: ${AUTHENTIK_DB_PASSWORD}
|
||||
AUTHENTIK_POSTGRESQL__NAME: ${AUTHENTIK_DB_NAME:-authentik}
|
||||
AUTHENTIK_SECRET_KEY: ${AUTHENTIK_SECRET_KEY}
|
||||
AUTHENTIK_ERROR_REPORTING__ENABLED: "false"
|
||||
depends_on:
|
||||
authentik-db:
|
||||
condition: service_healthy
|
||||
authentik-redis:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- famapp_net
|
||||
|
||||
authentik-db:
|
||||
image: postgres:16-alpine
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
POSTGRES_USER: ${AUTHENTIK_DB_USER:-authentik}
|
||||
POSTGRES_PASSWORD: ${AUTHENTIK_DB_PASSWORD}
|
||||
POSTGRES_DB: ${AUTHENTIK_DB_NAME:-authentik}
|
||||
volumes:
|
||||
- authentik_db_data:/var/lib/postgresql/data
|
||||
healthcheck:
|
||||
test:
|
||||
[
|
||||
"CMD-SHELL",
|
||||
"pg_isready -U ${AUTHENTIK_DB_USER:-authentik} -d ${AUTHENTIK_DB_NAME:-authentik}",
|
||||
]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
networks:
|
||||
- famapp_net
|
||||
|
||||
authentik-redis:
|
||||
image: redis:7-alpine
|
||||
restart: unless-stopped
|
||||
command: --save 60 1 --loglevel warning
|
||||
volumes:
|
||||
- authentik_redis_data:/data
|
||||
healthcheck:
|
||||
test: ["CMD", "redis-cli", "ping"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
networks:
|
||||
- famapp_net
|
||||
@@ -1,11 +0,0 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
if [ "${RUN_MIGRATIONS:-true}" = "true" ]; then
|
||||
echo "running migrations..."
|
||||
node /app/scripts/migrate.mjs
|
||||
else
|
||||
echo "skipping migrations (RUN_MIGRATIONS=$RUN_MIGRATIONS)"
|
||||
fi
|
||||
|
||||
exec node /app/server.js
|
||||
@@ -0,0 +1,158 @@
|
||||
# Contributing
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- **Node.js** 24 LTS (`node --version` should print `v24.x.x`)
|
||||
- **pnpm** 10 (`pnpm --version` should print `10.x.x`)
|
||||
- **Docker** with the Compose plugin (used for the local Postgres + MinIO containers)
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
git clone https://github.com/ginnoir/famapp.git
|
||||
cd famapp
|
||||
pnpm install
|
||||
cp .env.example .env
|
||||
# Edit .env — minimum required for local dev:
|
||||
# NEXT_PUBLIC_APP_URL=http://127.0.0.1:3000
|
||||
# DATABASE_URL=postgres://famapp:famapp@localhost:5432/famapp
|
||||
# ENABLE_DEV_LOGIN=true
|
||||
# AUTH_SECRET=<any-32-char-string-for-local>
|
||||
```
|
||||
|
||||
Start everything (database + migrations + seed + dev server):
|
||||
|
||||
```bash
|
||||
pnpm dev:local
|
||||
```
|
||||
|
||||
Then open `http://localhost:3000/login` and click **Dev login**. See `docs/dev-login.md` for the full local setup including HTTPS/PWA testing.
|
||||
|
||||
## Available scripts
|
||||
|
||||
<!-- AUTO-GENERATED from package.json scripts -->
|
||||
|
||||
| Command | Description |
|
||||
| --------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| `pnpm dev` | Next.js dev server (localhost only) |
|
||||
| `pnpm dev:network` | Dev server bound to `0.0.0.0` (LAN access for phone testing) |
|
||||
| `pnpm dev:local` | Full local stack — starts DB container, runs migrations, seeds, launches dev server |
|
||||
| `pnpm dev:reset` | Tear down local DB and start fresh (destructive — deletes all local data) |
|
||||
| `pnpm build` | Production Next.js build |
|
||||
| `pnpm start` | Start the production build locally |
|
||||
| `pnpm lint` | ESLint check |
|
||||
| `pnpm lint:fix` | ESLint with auto-fix |
|
||||
| `pnpm format` | Prettier — format all files |
|
||||
| `pnpm format:check` | Prettier — check only (used in CI) |
|
||||
| `pnpm typecheck` | TypeScript type check (`tsc --noEmit`) |
|
||||
| `pnpm test:e2e` | Playwright end-to-end tests |
|
||||
| `pnpm db:generate` | Generate a new Drizzle migration from schema changes |
|
||||
| `pnpm db:migrate` | Apply pending Drizzle migrations |
|
||||
| `pnpm db:seed` | Seed the database with dev fixtures |
|
||||
| `pnpm db:studio` | Open Drizzle Studio (local DB browser) |
|
||||
| `pnpm gen:icons` | Regenerate PWA icon set from source |
|
||||
| `pnpm vapid:generate` | Generate VAPID key pair for Web Push |
|
||||
| `pnpm release` | Interactive release (prompts for semver bump, tags, publishes changelog + GitHub Release) |
|
||||
| `pnpm release:patch` | Non-interactive patch release |
|
||||
| `pnpm release:minor` | Non-interactive minor release |
|
||||
| `pnpm release:major` | Non-interactive major release |
|
||||
| `pnpm release:dry` | Dry-run release — preview without writing |
|
||||
|
||||
<!-- END AUTO-GENERATED -->
|
||||
|
||||
## Running tests
|
||||
|
||||
### Type check + lint (CI equivalent)
|
||||
|
||||
```bash
|
||||
pnpm typecheck
|
||||
pnpm lint
|
||||
pnpm format:check
|
||||
```
|
||||
|
||||
### End-to-end tests
|
||||
|
||||
The app must be running first (`pnpm dev:local`). Generate a Playwright auth state file, then run tests:
|
||||
|
||||
```powershell
|
||||
# Generate auth state (run once after starting the app)
|
||||
New-Item -ItemType Directory -Force tests\.auth | Out-Null
|
||||
@'
|
||||
const { chromium } = require('@playwright/test');
|
||||
(async () => {
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
await page.goto('http://127.0.0.1:3000/login');
|
||||
await page.getByRole('button', { name: 'Dev login' }).click();
|
||||
await page.waitForURL('http://127.0.0.1:3000/');
|
||||
await page.context().storageState({ path: 'tests/.auth/dev-user.json' });
|
||||
await browser.close();
|
||||
})();
|
||||
'@ | node -
|
||||
|
||||
# Run tests
|
||||
$env:PLAYWRIGHT_STORAGE_STATE='tests/.auth/dev-user.json'
|
||||
pnpm test:e2e
|
||||
```
|
||||
|
||||
### Writing tests
|
||||
|
||||
- Unit tests: Vitest under `tests/unit/` — only where it pays off (utilities, pure logic).
|
||||
- E2E tests: Playwright under `tests/e2e/` — one happy-path test per module. Do not write brittle selector-heavy tests for trivial CRUD.
|
||||
|
||||
## Code style
|
||||
|
||||
- **TypeScript strict** — no `any` without a written reason.
|
||||
- **No comments** unless the _why_ is non-obvious. Names carry intent.
|
||||
- **Immutable** — always return new objects; never mutate in place.
|
||||
- **Module isolation** — a module imports from `_core` and `lib/` only; never from a sibling module.
|
||||
- **File size** — 200–400 lines typical, 800 hard cap.
|
||||
|
||||
Formatting and lint run automatically on staged files via `lint-staged` at commit time. You can also run them manually with `pnpm lint:fix` and `pnpm format`.
|
||||
|
||||
## Commit format
|
||||
|
||||
Commits must follow [Conventional Commits](https://www.conventionalcommits.org/). `commitlint` enforces this at the `commit-msg` hook.
|
||||
|
||||
```
|
||||
<type>: <short description>
|
||||
|
||||
[optional body]
|
||||
```
|
||||
|
||||
Allowed types: `feat`, `fix`, `refactor`, `docs`, `test`, `chore`, `perf`, `ci`, `revert`
|
||||
|
||||
Examples:
|
||||
|
||||
```
|
||||
feat: add plant species search to garden module
|
||||
fix: calendar event end time off by one day
|
||||
chore: bump next to 15.6
|
||||
```
|
||||
|
||||
## Adding a module
|
||||
|
||||
Every feature lives under `src/modules/<name>/`. A new module needs:
|
||||
|
||||
- `schema.ts` — Drizzle tables
|
||||
- `server/` — server actions and queries
|
||||
- `components/` — React components
|
||||
- `manifest.ts` — registers the module with the core registry (nav, entity types, dashboard widget, quick-add actions)
|
||||
|
||||
See `CLAUDE.md` for the full architectural brief. The module loader in `src/modules/_core/` discovers manifests automatically — no changes to core code required for a new module.
|
||||
|
||||
## Schema changes
|
||||
|
||||
1. Edit the relevant `schema.ts`.
|
||||
2. Run `pnpm db:generate` to create a new migration file under `drizzle/`.
|
||||
3. Commit the migration alongside the schema change.
|
||||
4. Never edit a shipped migration — always add a new one.
|
||||
|
||||
## PR checklist
|
||||
|
||||
- [ ] `pnpm typecheck` passes
|
||||
- [ ] `pnpm lint` passes
|
||||
- [ ] `pnpm build` succeeds
|
||||
- [ ] New Drizzle migration committed if schema changed
|
||||
- [ ] E2E test added or updated if a user-visible flow changed
|
||||
- [ ] `docs/tasks/09-pre-deploy-checklist.md` reviewed if touching auth or env
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
# Environment Variables
|
||||
|
||||
<!-- AUTO-GENERATED from .env.example and deploy/compose.example.yaml -->
|
||||
|
||||
## Quick start
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Fill in required values, then:
|
||||
pnpm dev:local
|
||||
```
|
||||
|
||||
## Core
|
||||
|
||||
| Variable | Required | Description | Example / Default |
|
||||
| --------------------- | -------- | ------------------------------------------------------------------ | ------------------------------------------------ |
|
||||
| `NEXT_PUBLIC_APP_URL` | Yes | Public URL of the app — used in OIDC redirect URIs and share links | `https://fam.yourdomain.com` |
|
||||
| `DATABASE_URL` | Yes | Postgres connection string | `postgres://famapp:famapp@localhost:5432/famapp` |
|
||||
| `AUTH_SECRET` | Yes | Auth.js signing secret — generate with `openssl rand -base64 32` | — |
|
||||
|
||||
## OIDC (Authentik)
|
||||
|
||||
Required in production. Obtain from the Authentik admin panel after bootstrapping the provider — see `deploy/authentik/README.md`.
|
||||
|
||||
| Variable | Required | Description | Example |
|
||||
| ------------------------- | ---------- | --------------------------------- | --------------------------------------------------- |
|
||||
| `AUTH_OIDC_ISSUER` | Yes (prod) | Authentik OIDC issuer URL | `https://auth.yourdomain.com/application/o/famapp/` |
|
||||
| `AUTH_OIDC_CLIENT_ID` | Yes (prod) | OIDC client ID from Authentik | — |
|
||||
| `AUTH_OIDC_CLIENT_SECRET` | Yes (prod) | OIDC client secret from Authentik | — |
|
||||
|
||||
## Dev login
|
||||
|
||||
Local development only. Never set `ENABLE_DEV_LOGIN=true` in production — a startup assertion in `src/lib/dev-login-config.ts` will crash the container if you do.
|
||||
|
||||
| Variable | Required | Description | Default |
|
||||
| -------------------- | -------- | ------------------------------------------------- | ------------------ |
|
||||
| `ENABLE_DEV_LOGIN` | No | Show a one-click **Dev login** button on `/login` | `false` |
|
||||
| `DEV_LOGIN_EMAIL` | No | Email for the auto-created dev session | `dev@famapp.local` |
|
||||
| `DEV_LOGIN_NAME` | No | Display name for the dev user | `Dev User` |
|
||||
| `DEV_HOUSEHOLD_NAME` | No | Household created for the dev user | `Home` |
|
||||
|
||||
See `docs/dev-login.md` for the full local run procedure.
|
||||
|
||||
## Web Push (VAPID)
|
||||
|
||||
All three are required together. Generate them once with `pnpm vapid:generate` and copy all three lines into `.env`.
|
||||
|
||||
| Variable | Required | Description |
|
||||
| ------------------- | -------- | --------------------------------------------- | ------------------------ |
|
||||
| `VAPID_PUBLIC_KEY` | Yes | VAPID public key — also passed to the browser |
|
||||
| `VAPID_PRIVATE_KEY` | Yes | VAPID private key — server only |
|
||||
| `VAPID_SUBJECT` | Yes | Contact URI for push servers | `mailto:you@example.com` |
|
||||
|
||||
## ntfy (optional)
|
||||
|
||||
Leave both blank to disable the ntfy notification channel. Web Push is the primary channel.
|
||||
|
||||
| Variable | Required | Description | Example |
|
||||
| ------------ | -------- | ------------------------ | ----------------- |
|
||||
| `NTFY_URL` | No | ntfy server base URL | `https://ntfy.sh` |
|
||||
| `NTFY_TOPIC` | No | ntfy topic to publish to | `famapp-alerts` |
|
||||
|
||||
## Logging
|
||||
|
||||
| Variable | Required | Description | Values |
|
||||
| ----------- | -------- | ------------------ | ----------------------------------------------------------- |
|
||||
| `LOG_LEVEL` | No | Pino log verbosity | `trace`, `debug`, `info`, `warn`, `error` (default: `info`) |
|
||||
|
||||
## MinIO object storage
|
||||
|
||||
Required when the garden module is enabled. The dev compose stack starts a local MinIO instance automatically via `pnpm dev:local`.
|
||||
|
||||
| Variable | Required | Description | Default |
|
||||
| --------------------- | -------- | ------------------------------------ | ----------------------- |
|
||||
| `MINIO_ENDPOINT` | Yes | MinIO server base URL | `http://localhost:9000` |
|
||||
| `MINIO_ROOT_USER` | Yes | MinIO root access key | `famapp` |
|
||||
| `MINIO_ROOT_PASSWORD` | Yes | MinIO root secret key | `changeme` |
|
||||
| `MINIO_BUCKET` | No | Bucket used for garden image uploads | `garden` |
|
||||
|
||||
## OpenPlantBook
|
||||
|
||||
Optional. Enables plant species lookup in the garden module. Free account at <https://open.plantbook.io>.
|
||||
|
||||
| Variable | Required | Description |
|
||||
| ----------------------------- | -------- | -------------------- |
|
||||
| `OPENPLANTBOOK_CLIENT_ID` | No | OAuth2 client ID |
|
||||
| `OPENPLANTBOOK_CLIENT_SECRET` | No | OAuth2 client secret |
|
||||
|
||||
## Release tooling
|
||||
|
||||
Only needed on the machine that cuts releases (`pnpm release`).
|
||||
|
||||
| Variable | Required | Description |
|
||||
| -------------- | ------------- | ------------------------------------------------ |
|
||||
| `GITHUB_TOKEN` | Yes (release) | Personal access token — creates a GitHub Release |
|
||||
|
||||
## Production-only compose variables
|
||||
|
||||
Used by `deploy/compose.example.yaml`. Set in `deploy/.env` on the server — not in the local `.env`.
|
||||
|
||||
| Variable | Description |
|
||||
| ------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
||||
| `FAMAPP_IMAGE` | Docker image tag to deploy (e.g. `ghcr.io/ginnoir/famapp:v0.4.7`) |
|
||||
| `FAMAPP_PORT` | Host port to bind (default: `3000`) |
|
||||
| `FAMAPP_PULL_POLICY` | Docker pull policy (default: `always`) |
|
||||
| `FAMAPP_DB_USER` / `FAMAPP_DB_PASSWORD` / `FAMAPP_DB_NAME` | Postgres credentials for the famapp database |
|
||||
| `AUTHENTIK_DB_USER` / `AUTHENTIK_DB_PASSWORD` / `AUTHENTIK_DB_NAME` | Postgres credentials for the Authentik database |
|
||||
| `AUTHENTIK_SECRET_KEY` | Authentik signing key — generate with `openssl rand -base64 60` |
|
||||
| `AUTHENTIK_IMAGE_TAG` | Authentik server image tag (default: `2024.12.3`) |
|
||||
| `RUN_MIGRATIONS` | Set `false` to skip auto-migration on start (default: `true`) |
|
||||
|
||||
<!-- END AUTO-GENERATED -->
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
# Runbook
|
||||
|
||||
Operational reference for famapp in production. See `deploy/README.md` for the one-time host setup and `docs/tasks/09-pre-deploy-checklist.md` for the pre-deploy checklist.
|
||||
|
||||
## Cutting a release
|
||||
|
||||
From `main` on the dev machine, with a clean working tree:
|
||||
|
||||
```bash
|
||||
pnpm release:patch # or :minor / :major
|
||||
# — bumps package.json version
|
||||
# — prepends to CHANGELOG.md
|
||||
# — creates and pushes a signed git tag (v0.x.y)
|
||||
# — creates a GitHub Release with generated notes
|
||||
# Requires GITHUB_TOKEN in .env
|
||||
```
|
||||
|
||||
CI (`release.yml`) then builds and pushes the Docker image to GHCR:
|
||||
|
||||
- `ghcr.io/ginnoir/famapp:v0.x.y`
|
||||
- `ghcr.io/ginnoir/famapp:0.x` (minor alias)
|
||||
- `ghcr.io/ginnoir/famapp:latest`
|
||||
|
||||
## Deploying a release
|
||||
|
||||
On the home server, in `/srv/famapp/deploy/`:
|
||||
|
||||
```bash
|
||||
# Pin the new tag
|
||||
sed -i 's|FAMAPP_IMAGE=.*|FAMAPP_IMAGE=ghcr.io/ginnoir/famapp:v0.x.y|' .env
|
||||
|
||||
# Pull and restart only the app container
|
||||
docker compose pull famapp
|
||||
docker compose up -d famapp
|
||||
|
||||
# Watch the boot log — migrations run before the server starts
|
||||
docker compose logs -f famapp
|
||||
```
|
||||
|
||||
The container entrypoint runs `node scripts/migrate.mjs` automatically. A healthy boot ends with a log line like `ready on http://0.0.0.0:3000`.
|
||||
|
||||
## Health check
|
||||
|
||||
```bash
|
||||
# Container status
|
||||
docker compose ps
|
||||
|
||||
# App response (200 = healthy)
|
||||
curl -sf https://fam.yourdomain.com/ -o /dev/null -w "%{http_code}\n"
|
||||
|
||||
# Recent app logs
|
||||
docker compose logs --tail=100 famapp
|
||||
|
||||
# Database connectivity
|
||||
docker compose exec famapp-db pg_isready -U famapp -d famapp
|
||||
```
|
||||
|
||||
## Rollback
|
||||
|
||||
1. Find the previous working tag in `CHANGELOG.md` or `docker images`.
|
||||
2. Pin it in `deploy/.env`:
|
||||
```bash
|
||||
sed -i 's|FAMAPP_IMAGE=.*|FAMAPP_IMAGE=ghcr.io/ginnoir/famapp:v0.x.y|' .env
|
||||
```
|
||||
3. Restart the container:
|
||||
```bash
|
||||
docker compose up -d famapp
|
||||
```
|
||||
|
||||
If the rollback target predates a migration that has already been applied to the database, restore from backup first — see **Backups** below. To skip auto-migration on a given start (rarely needed):
|
||||
|
||||
```bash
|
||||
RUN_MIGRATIONS=false docker compose up -d famapp
|
||||
```
|
||||
|
||||
## Backups
|
||||
|
||||
The `famapp-backup` container runs nightly `pg_dump` for both `famapp` and `authentik` databases into the `backups` volume.
|
||||
|
||||
```bash
|
||||
# Check last backup run
|
||||
docker compose logs famapp-backup | tail -20
|
||||
|
||||
# List backup files
|
||||
docker compose exec famapp-backup ls -lh /backups
|
||||
|
||||
# Manual backup now
|
||||
docker compose exec famapp-backup sh /scripts/backup.sh
|
||||
|
||||
# Restore from a backup file
|
||||
docker compose exec famapp-backup sh /scripts/restore.sh famapp_2026-06-01.sql.gz
|
||||
```
|
||||
|
||||
See `deploy/backups/README.md` for retention policy and full restore details.
|
||||
|
||||
## Common issues
|
||||
|
||||
### App container exits immediately
|
||||
|
||||
```bash
|
||||
docker compose logs famapp
|
||||
```
|
||||
|
||||
Likely causes:
|
||||
|
||||
- **Missing required env var** — the app throws on startup if `AUTH_SECRET`, `DATABASE_URL`, or `AUTH_OIDC_*` are absent.
|
||||
- **`ENABLE_DEV_LOGIN=true` in production** — `src/lib/dev-login-config.ts` throws an assertion error on import. Remove the variable from the production env.
|
||||
- **Database not ready** — Postgres healthcheck should prevent this, but if the DB is slow to start, increase `start_period` in `compose.yaml`.
|
||||
|
||||
### Migrations fail on boot
|
||||
|
||||
```bash
|
||||
docker compose logs famapp | grep -i migration
|
||||
```
|
||||
|
||||
- Schema is ahead of code: roll back the image or forward-migrate manually.
|
||||
- Database unreachable: confirm `famapp-db` is healthy (`docker compose ps`).
|
||||
|
||||
### OIDC login fails
|
||||
|
||||
1. Confirm `AUTH_OIDC_ISSUER` matches the Authentik provider URL exactly (trailing slash matters).
|
||||
2. Confirm the OIDC client redirect URI in Authentik includes `https://fam.yourdomain.com/api/auth/callback/oidc`.
|
||||
3. Check Authentik logs: `docker compose logs authentik-server | tail -50`.
|
||||
|
||||
### Push notifications not arriving
|
||||
|
||||
1. Confirm `VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY`, and `VAPID_SUBJECT` are all set in the production env.
|
||||
2. Verify the browser's push subscription is still valid (Settings → notifications → re-enable).
|
||||
3. If using ntfy as a secondary channel, confirm `NTFY_URL` and `NTFY_TOPIC` are set.
|
||||
|
||||
### MinIO / garden image uploads failing
|
||||
|
||||
```bash
|
||||
docker compose logs famapp-minio | tail -30
|
||||
```
|
||||
|
||||
- Confirm `MINIO_ENDPOINT` is `http://famapp-minio:9000` in the compose env (not `localhost`).
|
||||
- Confirm the `garden` bucket exists — create it manually via the MinIO console at port `9001` if it is missing.
|
||||
|
||||
### Out of disk space
|
||||
|
||||
```bash
|
||||
df -h /var/lib/docker
|
||||
docker system prune --volumes # removes stopped containers, dangling images, unused volumes
|
||||
```
|
||||
|
||||
Old backup files accumulate in the `backups` volume. The retention script (`deploy/backups/retain.sh`) runs nightly — check its logs if the volume keeps growing.
|
||||
|
||||
## Authentik admin access
|
||||
|
||||
The Authentik admin UI is at `https://auth.yourdomain.com`. Log in with the superuser credentials set during bootstrap — see `deploy/authentik/README.md`.
|
||||
|
||||
To reset the Authentik admin password from the CLI:
|
||||
|
||||
```bash
|
||||
docker compose exec authentik-server ak create_recovery_key 1 akadmin
|
||||
# prints a one-time recovery URL
|
||||
```
|
||||
@@ -22,4 +22,8 @@ What this costs us, what it buys us.
|
||||
|
||||
## Index
|
||||
|
||||
- (none yet — add as decisions are made)
|
||||
<!-- AUTO-GENERATED -->
|
||||
|
||||
- [0002 — List realtime uses Postgres NOTIFY and SSE](0002-list-sse-notify.md)
|
||||
- [0003 — Release workflow (commitlint + release-it)](0003-release-workflow.md)
|
||||
<!-- END AUTO-GENERATED -->
|
||||
|
||||
+8
-8
@@ -42,11 +42,11 @@ pnpm dev:local
|
||||
|
||||
The script prints three URLs at startup:
|
||||
|
||||
| URL | Use for |
|
||||
| -------------------------- | ---------------------------------------------------------- |
|
||||
| `http://localhost:3000` | Browser on this machine |
|
||||
| `http://192.168.1.74:3000` | Phone on the same WiFi (general UI testing) |
|
||||
| `https://dev.ginnoir.com` | Push notifications + PWA install (needs Caddy — see below) |
|
||||
| URL | Use for |
|
||||
| ---------------------------- | ---------------------------------------------------------- |
|
||||
| `http://localhost:3000` | Browser on this machine |
|
||||
| `http://192.168.x.y:3000` | Phone on the same WiFi (general UI testing) |
|
||||
| `https://dev.yourdomain.com` | Push notifications + PWA install (needs Caddy — see below) |
|
||||
|
||||
Then open `/login` and click **Dev login**.
|
||||
|
||||
@@ -74,11 +74,11 @@ Route through the existing Caddy server on the home server instead — no extra
|
||||
|
||||
**Step 1 — DHCP reservation**
|
||||
|
||||
Set a reservation on the router so the dev machine always gets `192.168.1.74`.
|
||||
Set a reservation on the router so the dev machine always gets `192.168.x.y`.
|
||||
|
||||
**Step 2 — DNS record**
|
||||
|
||||
Add a `dev.ginnoir.com` A record pointing to the same public IP as `fam.ginnoir.com`.
|
||||
Add a `dev.yourdomain.com` A record pointing to the same public IP as `fam.yourdomain.com`.
|
||||
|
||||
**Step 3 — Windows Firewall**
|
||||
|
||||
@@ -97,7 +97,7 @@ Paste `deploy/Caddyfile.dev.snippet` into the home server Caddyfile and reload:
|
||||
caddy reload --config /path/to/Caddyfile
|
||||
```
|
||||
|
||||
After this, `https://dev.ginnoir.com` proxies to the dev machine with a real Let's Encrypt cert.
|
||||
After this, `https://dev.yourdomain.com` proxies to the dev machine with a real Let's Encrypt cert.
|
||||
|
||||
## Current Local E2E Procedure
|
||||
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
|
||||
Run this before every production deploy (first deploy and each tagged release). Dev-login is intentionally retained behind a double gate; this checklist is what keeps that gate honest.
|
||||
|
||||
## README
|
||||
|
||||
- [ ] `README.md` reflects the current module list and any env vars added since the last release.
|
||||
|
||||
## Env hygiene
|
||||
|
||||
- [ ] Server `.env` (next to `deploy/compose.yaml`) does **not** set:
|
||||
|
||||
@@ -33,6 +33,7 @@ Every task file has these sections:
|
||||
- [06 — Authentik install + OIDC integration](06-authentik-oidc.md)
|
||||
- [07 — Household seeding & session](07-household-seed.md)
|
||||
- [08 — Theming infrastructure (multi-theme + dark mode)](08-theming.md)
|
||||
- [09 — Pre-deploy checklist (recurring)](09-pre-deploy-checklist.md)
|
||||
|
||||
### Phase 2 — Core modules
|
||||
|
||||
@@ -69,3 +70,12 @@ Every task file has these sections:
|
||||
- [60 — Postgres backups (pg_dump cron)](60-backups.md)
|
||||
- [61 — Rate limiting on share links](61-rate-limit.md)
|
||||
- [62 — Structured logging](62-logging.md)
|
||||
|
||||
### Phase 8 — Garden module
|
||||
|
||||
- [70 — Garden infrastructure (MinIO + upload route + schema)](70-garden-infrastructure.md)
|
||||
- [71 — Garden containers](71-garden-containers.md)
|
||||
- [72 — Garden plants](72-garden-plants.md)
|
||||
- [73 — Garden care tracking](73-garden-care-tracking.md)
|
||||
- [74 — Garden integrations](74-garden-integrations.md)
|
||||
- [75 — Garden dashboard](75-garden-dashboard.md)
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
CREATE TABLE "bang_events" (
|
||||
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
|
||||
"household_id" uuid NOT NULL,
|
||||
"recorded_by" uuid,
|
||||
"occurred_on" text NOT NULL,
|
||||
"created_at" timestamp with time zone DEFAULT now() NOT NULL
|
||||
);
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE "bang_events" ADD CONSTRAINT "bang_events_household_id_households_id_fk" FOREIGN KEY ("household_id") REFERENCES "public"."households"("id") ON DELETE cascade ON UPDATE no action;
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE "bang_events" ADD CONSTRAINT "bang_events_recorded_by_users_id_fk" FOREIGN KEY ("recorded_by") REFERENCES "public"."users"("id") ON DELETE set null ON UPDATE no action;
|
||||
--> statement-breakpoint
|
||||
CREATE INDEX "bang_events_household_occurred_idx" ON "bang_events" USING btree ("household_id","occurred_on");
|
||||
@@ -0,0 +1 @@
|
||||
ALTER TABLE "garden_containers" ADD COLUMN "images" jsonb DEFAULT '[]'::jsonb NOT NULL;
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"id": "fc208bad-8bfd-452d-876f-7e853f699931",
|
||||
"prevId": "cb06cd57-d5a0-4fb7-bbf3-335173a1168c",
|
||||
"id": "ff1f5ff1-7539-4c5e-a20d-f01c719ef198",
|
||||
"prevId": "fc208bad-8bfd-452d-876f-7e853f699931",
|
||||
"version": "7",
|
||||
"dialect": "postgresql",
|
||||
"tables": {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -120,6 +120,20 @@
|
||||
"when": 1748822400000,
|
||||
"tag": "0016_garden_improvements",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 17,
|
||||
"version": "7",
|
||||
"when": 1780391596552,
|
||||
"tag": "0017_bang_counter",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 18,
|
||||
"version": "7",
|
||||
"when": 1748995200000,
|
||||
"tag": "0018_container_images",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
+7
-4
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "famapp",
|
||||
"version": "0.4.4",
|
||||
"version": "0.5.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@10.33.3",
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
"node": ">=24"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -22,7 +22,7 @@
|
||||
"typecheck": "tsc --noEmit",
|
||||
"db:generate": "drizzle-kit generate",
|
||||
"db:migrate": "drizzle-kit migrate",
|
||||
"db:seed": "tsx --env-file=.env scripts/seed.ts",
|
||||
"db:seed": "node --env-file=.env scripts/seed.mjs",
|
||||
"db:studio": "drizzle-kit studio",
|
||||
"gen:icons": "node scripts/generate-icons.mjs",
|
||||
"vapid:generate": "node scripts/vapid-generate.mjs",
|
||||
@@ -52,7 +52,8 @@
|
||||
"@playwright/test": "^1.59.1",
|
||||
"@release-it/conventional-changelog": "^11.0.1",
|
||||
"@tailwindcss/postcss": "^4.2.4",
|
||||
"@types/node": "^22.9.0",
|
||||
"@types/canvas-confetti": "^1.9.0",
|
||||
"@types/node": "^24.0.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/web-push": "^3.6.4",
|
||||
@@ -77,8 +78,10 @@
|
||||
"@fullcalendar/core": "^6.1.20",
|
||||
"@fullcalendar/daygrid": "^6.1.20",
|
||||
"@fullcalendar/interaction": "^6.1.20",
|
||||
"@fullcalendar/list": "^6.1.20",
|
||||
"@fullcalendar/react": "^6.1.20",
|
||||
"@fullcalendar/timegrid": "^6.1.20",
|
||||
"canvas-confetti": "^1.9.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
|
||||
Generated
+122
-94
@@ -23,12 +23,18 @@ importers:
|
||||
'@fullcalendar/interaction':
|
||||
specifier: ^6.1.20
|
||||
version: 6.1.20(@fullcalendar/core@6.1.20)
|
||||
'@fullcalendar/list':
|
||||
specifier: ^6.1.20
|
||||
version: 6.1.20(@fullcalendar/core@6.1.20)
|
||||
'@fullcalendar/react':
|
||||
specifier: ^6.1.20
|
||||
version: 6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
'@fullcalendar/timegrid':
|
||||
specifier: ^6.1.20
|
||||
version: 6.1.20(@fullcalendar/core@6.1.20)
|
||||
canvas-confetti:
|
||||
specifier: ^1.9.4
|
||||
version: 1.9.4
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
@@ -70,7 +76,7 @@ importers:
|
||||
version: 2.2.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
shadcn:
|
||||
specifier: ^4.7.0
|
||||
version: 4.7.0(@types/node@22.19.17)(typescript@5.9.3)
|
||||
version: 4.7.0(@types/node@24.12.4)(typescript@5.9.3)
|
||||
tailwind-merge:
|
||||
specifier: ^3.5.0
|
||||
version: 3.5.0
|
||||
@@ -86,7 +92,7 @@ importers:
|
||||
devDependencies:
|
||||
'@commitlint/cli':
|
||||
specifier: ^21.0.2
|
||||
version: 21.0.2(@types/node@22.19.17)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)
|
||||
version: 21.0.2(@types/node@24.12.4)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)
|
||||
'@commitlint/config-conventional':
|
||||
specifier: ^21.0.2
|
||||
version: 21.0.2
|
||||
@@ -98,13 +104,16 @@ importers:
|
||||
version: 1.59.1
|
||||
'@release-it/conventional-changelog':
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@22.19.17))
|
||||
version: 11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@24.12.4))
|
||||
'@tailwindcss/postcss':
|
||||
specifier: ^4.2.4
|
||||
version: 4.2.4
|
||||
'@types/canvas-confetti':
|
||||
specifier: ^1.9.0
|
||||
version: 1.9.0
|
||||
'@types/node':
|
||||
specifier: ^22.9.0
|
||||
version: 22.19.17
|
||||
specifier: ^24.0.0
|
||||
version: 24.12.4
|
||||
'@types/react':
|
||||
specifier: ^19.2.14
|
||||
version: 19.2.14
|
||||
@@ -143,7 +152,7 @@ importers:
|
||||
version: 3.8.3
|
||||
release-it:
|
||||
specifier: ^20.2.0
|
||||
version: 20.2.0(@types/node@22.19.17)
|
||||
version: 20.2.0(@types/node@24.12.4)
|
||||
tailwindcss:
|
||||
specifier: ^4.2.4
|
||||
version: 4.2.4
|
||||
@@ -970,6 +979,11 @@ packages:
|
||||
peerDependencies:
|
||||
'@fullcalendar/core': ~6.1.20
|
||||
|
||||
'@fullcalendar/list@6.1.20':
|
||||
resolution: {integrity: sha512-7Hzkbb7uuSqrXwTyD0Ld/7SwWNxPD6SlU548vtkIpH55rZ4qquwtwYdMPgorHos5OynHA4OUrZNcH51CjrCf2g==}
|
||||
peerDependencies:
|
||||
'@fullcalendar/core': ~6.1.20
|
||||
|
||||
'@fullcalendar/react@6.1.20':
|
||||
resolution: {integrity: sha512-1w0pZtceaUdfAnxMSCGHCQalhi+mR1jOe76sXzyAXpcPz/Lf0zHSdcGK/U2XpZlnQgQtBZW+d+QBnnzVQKCxAA==}
|
||||
peerDependencies:
|
||||
@@ -1844,6 +1858,9 @@ packages:
|
||||
'@tybys/wasm-util@0.10.2':
|
||||
resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
|
||||
|
||||
'@types/canvas-confetti@1.9.0':
|
||||
resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
|
||||
|
||||
'@types/estree@1.0.8':
|
||||
resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
|
||||
|
||||
@@ -1853,8 +1870,8 @@ packages:
|
||||
'@types/json5@0.0.29':
|
||||
resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
|
||||
|
||||
'@types/node@22.19.17':
|
||||
resolution: {integrity: sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==}
|
||||
'@types/node@24.12.4':
|
||||
resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}
|
||||
|
||||
'@types/normalize-package-data@2.4.4':
|
||||
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
|
||||
@@ -2280,6 +2297,9 @@ packages:
|
||||
caniuse-lite@1.0.30001791:
|
||||
resolution: {integrity: sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==}
|
||||
|
||||
canvas-confetti@1.9.4:
|
||||
resolution: {integrity: sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==}
|
||||
|
||||
chalk@4.1.2:
|
||||
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
|
||||
engines: {node: '>=10'}
|
||||
@@ -4883,8 +4903,8 @@ packages:
|
||||
resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
undici-types@6.21.0:
|
||||
resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
|
||||
undici-types@7.16.0:
|
||||
resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
|
||||
|
||||
undici@7.24.5:
|
||||
resolution: {integrity: sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q==}
|
||||
@@ -5335,11 +5355,11 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 19.2.14
|
||||
|
||||
'@commitlint/cli@21.0.2(@types/node@22.19.17)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)':
|
||||
'@commitlint/cli@21.0.2(@types/node@24.12.4)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@commitlint/format': 21.0.1
|
||||
'@commitlint/lint': 21.0.2
|
||||
'@commitlint/load': 21.0.2(@types/node@22.19.17)(typescript@5.9.3)
|
||||
'@commitlint/load': 21.0.2(@types/node@24.12.4)(typescript@5.9.3)
|
||||
'@commitlint/read': 21.0.2(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)
|
||||
'@commitlint/types': 21.0.1
|
||||
tinyexec: 1.2.4
|
||||
@@ -5384,14 +5404,14 @@ snapshots:
|
||||
'@commitlint/rules': 21.0.2
|
||||
'@commitlint/types': 21.0.1
|
||||
|
||||
'@commitlint/load@21.0.2(@types/node@22.19.17)(typescript@5.9.3)':
|
||||
'@commitlint/load@21.0.2(@types/node@24.12.4)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@commitlint/config-validator': 21.0.1
|
||||
'@commitlint/execute-rule': 21.0.1
|
||||
'@commitlint/resolve-extends': 21.0.1
|
||||
'@commitlint/types': 21.0.1
|
||||
cosmiconfig: 9.0.1(typescript@5.9.3)
|
||||
cosmiconfig-typescript-loader: 6.3.0(@types/node@22.19.17)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
cosmiconfig-typescript-loader: 6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
es-toolkit: 1.47.0
|
||||
is-plain-obj: 4.1.0
|
||||
picocolors: 1.1.1
|
||||
@@ -5798,6 +5818,10 @@ snapshots:
|
||||
dependencies:
|
||||
'@fullcalendar/core': 6.1.20
|
||||
|
||||
'@fullcalendar/list@6.1.20(@fullcalendar/core@6.1.20)':
|
||||
dependencies:
|
||||
'@fullcalendar/core': 6.1.20
|
||||
|
||||
'@fullcalendar/react@6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
|
||||
dependencies:
|
||||
'@fullcalendar/core': 6.1.20
|
||||
@@ -5930,140 +5954,140 @@ snapshots:
|
||||
|
||||
'@inquirer/ansi@2.0.7': {}
|
||||
|
||||
'@inquirer/checkbox@5.2.1(@types/node@22.19.17)':
|
||||
'@inquirer/checkbox@5.2.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/ansi': 2.0.7
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/figures': 2.0.7
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/confirm@6.0.12(@types/node@22.19.17)':
|
||||
'@inquirer/confirm@6.0.12(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.1.9(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.5(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.1.9(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.5(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/core@11.1.9(@types/node@22.19.17)':
|
||||
'@inquirer/core@11.1.9(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/ansi': 2.0.5
|
||||
'@inquirer/figures': 2.0.5
|
||||
'@inquirer/type': 4.0.5(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.5(@types/node@24.12.4)
|
||||
cli-width: 4.1.0
|
||||
fast-wrap-ansi: 0.2.0
|
||||
mute-stream: 3.0.0
|
||||
signal-exit: 4.1.0
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/core@11.2.1(@types/node@22.19.17)':
|
||||
'@inquirer/core@11.2.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/ansi': 2.0.7
|
||||
'@inquirer/figures': 2.0.7
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
cli-width: 4.1.0
|
||||
fast-wrap-ansi: 0.2.0
|
||||
mute-stream: 3.0.0
|
||||
signal-exit: 4.1.0
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/editor@5.2.2(@types/node@22.19.17)':
|
||||
'@inquirer/editor@5.2.2(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/external-editor': 3.0.3(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/external-editor': 3.0.3(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/expand@5.1.1(@types/node@22.19.17)':
|
||||
'@inquirer/expand@5.1.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/external-editor@3.0.3(@types/node@22.19.17)':
|
||||
'@inquirer/external-editor@3.0.3(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
chardet: 2.1.1
|
||||
iconv-lite: 0.7.2
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/figures@2.0.5': {}
|
||||
|
||||
'@inquirer/figures@2.0.7': {}
|
||||
|
||||
'@inquirer/input@5.1.2(@types/node@22.19.17)':
|
||||
'@inquirer/input@5.1.2(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/number@4.1.1(@types/node@22.19.17)':
|
||||
'@inquirer/number@4.1.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/password@5.1.1(@types/node@22.19.17)':
|
||||
'@inquirer/password@5.1.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/ansi': 2.0.7
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/prompts@8.4.2(@types/node@22.19.17)':
|
||||
'@inquirer/prompts@8.4.2(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/checkbox': 5.2.1(@types/node@22.19.17)
|
||||
'@inquirer/confirm': 6.0.12(@types/node@22.19.17)
|
||||
'@inquirer/editor': 5.2.2(@types/node@22.19.17)
|
||||
'@inquirer/expand': 5.1.1(@types/node@22.19.17)
|
||||
'@inquirer/input': 5.1.2(@types/node@22.19.17)
|
||||
'@inquirer/number': 4.1.1(@types/node@22.19.17)
|
||||
'@inquirer/password': 5.1.1(@types/node@22.19.17)
|
||||
'@inquirer/rawlist': 5.3.1(@types/node@22.19.17)
|
||||
'@inquirer/search': 4.2.1(@types/node@22.19.17)
|
||||
'@inquirer/select': 5.2.1(@types/node@22.19.17)
|
||||
'@inquirer/checkbox': 5.2.1(@types/node@24.12.4)
|
||||
'@inquirer/confirm': 6.0.12(@types/node@24.12.4)
|
||||
'@inquirer/editor': 5.2.2(@types/node@24.12.4)
|
||||
'@inquirer/expand': 5.1.1(@types/node@24.12.4)
|
||||
'@inquirer/input': 5.1.2(@types/node@24.12.4)
|
||||
'@inquirer/number': 4.1.1(@types/node@24.12.4)
|
||||
'@inquirer/password': 5.1.1(@types/node@24.12.4)
|
||||
'@inquirer/rawlist': 5.3.1(@types/node@24.12.4)
|
||||
'@inquirer/search': 4.2.1(@types/node@24.12.4)
|
||||
'@inquirer/select': 5.2.1(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/rawlist@5.3.1(@types/node@22.19.17)':
|
||||
'@inquirer/rawlist@5.3.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/search@4.2.1(@types/node@22.19.17)':
|
||||
'@inquirer/search@4.2.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/figures': 2.0.7
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/select@5.2.1(@types/node@22.19.17)':
|
||||
'@inquirer/select@5.2.1(@types/node@24.12.4)':
|
||||
dependencies:
|
||||
'@inquirer/ansi': 2.0.7
|
||||
'@inquirer/core': 11.2.1(@types/node@22.19.17)
|
||||
'@inquirer/core': 11.2.1(@types/node@24.12.4)
|
||||
'@inquirer/figures': 2.0.7
|
||||
'@inquirer/type': 4.0.7(@types/node@22.19.17)
|
||||
'@inquirer/type': 4.0.7(@types/node@24.12.4)
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/type@4.0.5(@types/node@22.19.17)':
|
||||
'@inquirer/type@4.0.5(@types/node@24.12.4)':
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@inquirer/type@4.0.7(@types/node@22.19.17)':
|
||||
'@inquirer/type@4.0.7(@types/node@24.12.4)':
|
||||
optionalDependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@jridgewell/gen-mapping@0.3.13':
|
||||
dependencies:
|
||||
@@ -6419,7 +6443,7 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 19.2.14
|
||||
|
||||
'@release-it/conventional-changelog@11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@22.19.17))':
|
||||
'@release-it/conventional-changelog@11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@24.12.4))':
|
||||
dependencies:
|
||||
'@conventional-changelog/git-client': 2.7.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)
|
||||
concat-stream: 2.0.0
|
||||
@@ -6427,7 +6451,7 @@ snapshots:
|
||||
conventional-changelog-angular: 8.3.1
|
||||
conventional-changelog-conventionalcommits: 9.3.1
|
||||
conventional-recommended-bump: 11.2.0
|
||||
release-it: 20.2.0(@types/node@22.19.17)
|
||||
release-it: 20.2.0(@types/node@24.12.4)
|
||||
semver: 7.7.4
|
||||
transitivePeerDependencies:
|
||||
- conventional-commits-filter
|
||||
@@ -6531,15 +6555,17 @@ snapshots:
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@types/canvas-confetti@1.9.0': {}
|
||||
|
||||
'@types/estree@1.0.8': {}
|
||||
|
||||
'@types/json-schema@7.0.15': {}
|
||||
|
||||
'@types/json5@0.0.29': {}
|
||||
|
||||
'@types/node@22.19.17':
|
||||
'@types/node@24.12.4':
|
||||
dependencies:
|
||||
undici-types: 6.21.0
|
||||
undici-types: 7.16.0
|
||||
|
||||
'@types/normalize-package-data@2.4.4': {}
|
||||
|
||||
@@ -6557,7 +6583,7 @@ snapshots:
|
||||
|
||||
'@types/set-cookie-parser@2.4.10':
|
||||
dependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@types/statuses@2.0.6': {}
|
||||
|
||||
@@ -6565,7 +6591,7 @@ snapshots:
|
||||
|
||||
'@types/web-push@3.6.4':
|
||||
dependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
|
||||
'@typescript-eslint/eslint-plugin@8.59.2(@typescript-eslint/parser@8.59.2(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
|
||||
dependencies:
|
||||
@@ -6977,6 +7003,8 @@ snapshots:
|
||||
|
||||
caniuse-lite@1.0.30001791: {}
|
||||
|
||||
canvas-confetti@1.9.4: {}
|
||||
|
||||
chalk@4.1.2:
|
||||
dependencies:
|
||||
ansi-styles: 4.3.0
|
||||
@@ -7143,9 +7171,9 @@ snapshots:
|
||||
object-assign: 4.1.1
|
||||
vary: 1.1.2
|
||||
|
||||
cosmiconfig-typescript-loader@6.3.0(@types/node@22.19.17)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3):
|
||||
cosmiconfig-typescript-loader@6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3):
|
||||
dependencies:
|
||||
'@types/node': 22.19.17
|
||||
'@types/node': 24.12.4
|
||||
cosmiconfig: 9.0.1(typescript@5.9.3)
|
||||
jiti: 2.6.1
|
||||
typescript: 5.9.3
|
||||
@@ -8642,9 +8670,9 @@ snapshots:
|
||||
|
||||
ms@2.1.3: {}
|
||||
|
||||
msw@2.14.3(@types/node@22.19.17)(typescript@5.9.3):
|
||||
msw@2.14.3(@types/node@24.12.4)(typescript@5.9.3):
|
||||
dependencies:
|
||||
'@inquirer/confirm': 6.0.12(@types/node@22.19.17)
|
||||
'@inquirer/confirm': 6.0.12(@types/node@24.12.4)
|
||||
'@mswjs/interceptors': 0.41.8
|
||||
'@open-draft/deferred-promise': 3.0.0
|
||||
'@types/statuses': 2.0.6
|
||||
@@ -9217,9 +9245,9 @@ snapshots:
|
||||
gopd: 1.2.0
|
||||
set-function-name: 2.0.2
|
||||
|
||||
release-it@20.2.0(@types/node@22.19.17):
|
||||
release-it@20.2.0(@types/node@24.12.4):
|
||||
dependencies:
|
||||
'@inquirer/prompts': 8.4.2(@types/node@22.19.17)
|
||||
'@inquirer/prompts': 8.4.2(@types/node@24.12.4)
|
||||
'@octokit/rest': 22.0.1
|
||||
'@phun-ky/typeof': 2.0.3
|
||||
async-retry: 1.3.3
|
||||
@@ -9385,7 +9413,7 @@ snapshots:
|
||||
|
||||
setprototypeof@1.2.0: {}
|
||||
|
||||
shadcn@4.7.0(@types/node@22.19.17)(typescript@5.9.3):
|
||||
shadcn@4.7.0(@types/node@24.12.4)(typescript@5.9.3):
|
||||
dependencies:
|
||||
'@babel/core': 7.29.0
|
||||
'@babel/parser': 7.29.3
|
||||
@@ -9406,7 +9434,7 @@ snapshots:
|
||||
fuzzysort: 3.1.0
|
||||
https-proxy-agent: 7.0.6
|
||||
kleur: 4.1.5
|
||||
msw: 2.14.3(@types/node@22.19.17)(typescript@5.9.3)
|
||||
msw: 2.14.3(@types/node@24.12.4)(typescript@5.9.3)
|
||||
node-fetch: 3.3.2
|
||||
open: 11.0.0
|
||||
ora: 8.2.0
|
||||
@@ -9844,7 +9872,7 @@ snapshots:
|
||||
has-symbols: 1.1.0
|
||||
which-boxed-primitive: 1.1.1
|
||||
|
||||
undici-types@6.21.0: {}
|
||||
undici-types@7.16.0: {}
|
||||
|
||||
undici@7.24.5: {}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) { .bg { fill: #6366F1; } }
|
||||
</style>
|
||||
<rect class="bg" width="512" height="512" rx="96" fill="#4338CA"/>
|
||||
<rect x="130" y="238" width="252" height="190" fill="white"/>
|
||||
<polygon points="256,82 68,254 444,254" fill="white"/>
|
||||
<rect x="216" y="338" width="80" height="90" rx="8" fill="#4338CA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 444 B |
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
Binary file not shown.
|
Before Width: | Height: | Size: 496 B After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 547 B After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 546 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 13 KiB |
+4
-10
@@ -1,12 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<!-- Background -->
|
||||
<rect width="512" height="512" rx="80" fill="#4F46E5"/>
|
||||
<!-- House body -->
|
||||
<polygon points="256,108 396,234 364,234 364,392 148,392 148,234 116,234" fill="white"/>
|
||||
<!-- Door -->
|
||||
<rect x="212" y="296" width="88" height="96" rx="6" fill="#4F46E5"/>
|
||||
<!-- Left window -->
|
||||
<rect x="164" y="254" width="66" height="54" rx="6" fill="#4F46E5" opacity="0.55"/>
|
||||
<!-- Right window -->
|
||||
<rect x="282" y="254" width="66" height="54" rx="6" fill="#4F46E5" opacity="0.55"/>
|
||||
<rect width="512" height="512" rx="96" fill="#4338CA"/>
|
||||
<rect x="130" y="238" width="252" height="190" fill="white"/>
|
||||
<polygon points="256,82 68,254 444,254" fill="white"/>
|
||||
<rect x="216" y="338" width="80" height="90" rx="8" fill="#4338CA"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 345 B |
@@ -4,23 +4,26 @@
|
||||
"description": "Family coordination app",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#4F46E5",
|
||||
"background_color": "#4338CA",
|
||||
"theme_color": "#4338CA",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icon-384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512-maskable.png",
|
||||
|
||||
+1
-1
@@ -85,7 +85,7 @@ export async function main() {
|
||||
console.log("\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
|
||||
console.log(` Local → http://localhost:3000`);
|
||||
console.log(` LAN → http://${lanIp}:3000 (phone on same WiFi)`);
|
||||
console.log(` HTTPS → https://dev.ginnoir.com (push/PWA — needs Caddy snippet)`);
|
||||
console.log(` HTTPS → https://dev.<your-domain> (push/PWA — needs Caddyfile.dev.snippet)`);
|
||||
console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n");
|
||||
|
||||
// 6. Spawn Next.js dev server bound to all interfaces.
|
||||
|
||||
+27
-79
@@ -1,100 +1,48 @@
|
||||
/**
|
||||
* Generates placeholder PNG icons for the famapp PWA.
|
||||
* Rasterizes public/icon.svg into all required PNG icon sizes.
|
||||
*
|
||||
* Usage: node scripts/generate-icons.mjs
|
||||
*
|
||||
* Produces:
|
||||
* public/icon-16.png
|
||||
* public/icon-32.png
|
||||
* public/icon-180.png (apple-touch-icon)
|
||||
* public/icon-192.png
|
||||
* public/icon-384.png
|
||||
* public/icon-512.png
|
||||
* public/icon-512-maskable.png (same image; OS applies its own mask)
|
||||
* public/icon-180.png (apple-touch-icon)
|
||||
*
|
||||
* All images are solid indigo (#4F46E5) squares — replace with a real
|
||||
* branded export from icon.svg when assets are finalised.
|
||||
* public/icon-512-maskable.png (square bg, content in safe zone)
|
||||
*/
|
||||
|
||||
import { deflateSync } from "zlib";
|
||||
import { writeFileSync } from "fs";
|
||||
import { resolve, dirname } from "path";
|
||||
import sharp from "sharp";
|
||||
import { readFileSync } from "fs";
|
||||
import { fileURLToPath } from "url";
|
||||
import { dirname, join } from "path";
|
||||
|
||||
const __dir = dirname(fileURLToPath(import.meta.url));
|
||||
const publicDir = resolve(__dir, "../public");
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const pub = join(__dirname, "..", "public");
|
||||
|
||||
// Build CRC-32 lookup table once.
|
||||
const CRC_TABLE = new Uint32Array(256);
|
||||
for (let i = 0; i < 256; i++) {
|
||||
let c = i;
|
||||
for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
|
||||
CRC_TABLE[i] = c;
|
||||
}
|
||||
const svg = readFileSync(join(pub, "icon.svg"));
|
||||
|
||||
function crc32(buf) {
|
||||
let crc = 0xffffffff;
|
||||
for (let i = 0; i < buf.length; i++) crc = CRC_TABLE[(crc ^ buf[i]) & 0xff] ^ (crc >>> 8);
|
||||
return (crc ^ 0xffffffff) >>> 0;
|
||||
}
|
||||
|
||||
function u32(n) {
|
||||
const b = Buffer.alloc(4);
|
||||
b.writeUInt32BE(n, 0);
|
||||
return b;
|
||||
}
|
||||
|
||||
function pngChunk(type, data) {
|
||||
const typeBytes = Buffer.from(type, "ascii");
|
||||
const crc = u32(crc32(Buffer.concat([typeBytes, data])));
|
||||
return Buffer.concat([u32(data.length), typeBytes, data, crc]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Buffer containing a valid PNG of size×size filled with (r, g, b).
|
||||
*/
|
||||
function solidPNG(size, r, g, b) {
|
||||
const PNG_SIG = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
|
||||
|
||||
const ihdr = pngChunk(
|
||||
"IHDR",
|
||||
Buffer.concat([
|
||||
u32(size),
|
||||
u32(size),
|
||||
Buffer.from([8, 2, 0, 0, 0]), // 8-bit RGB, no interlace
|
||||
]),
|
||||
);
|
||||
|
||||
// One filter byte (0 = None) followed by size×3 RGB bytes per row.
|
||||
const rowLen = 1 + size * 3;
|
||||
const raw = Buffer.alloc(size * rowLen);
|
||||
for (let y = 0; y < size; y++) {
|
||||
const base = y * rowLen;
|
||||
raw[base] = 0;
|
||||
for (let x = 0; x < size; x++) {
|
||||
raw[base + 1 + x * 3] = r;
|
||||
raw[base + 2 + x * 3] = g;
|
||||
raw[base + 3 + x * 3] = b;
|
||||
}
|
||||
}
|
||||
|
||||
const idat = pngChunk("IDAT", deflateSync(raw));
|
||||
const iend = pngChunk("IEND", Buffer.alloc(0));
|
||||
|
||||
return Buffer.concat([PNG_SIG, ihdr, idat, iend]);
|
||||
}
|
||||
|
||||
// Indigo-600 (#4F46E5)
|
||||
const [R, G, B] = [0x4f, 0x46, 0xe5];
|
||||
|
||||
const icons = [
|
||||
const sizes = [
|
||||
{ name: "icon-16.png", size: 16 },
|
||||
{ name: "icon-32.png", size: 32 },
|
||||
{ name: "icon-180.png", size: 180 },
|
||||
{ name: "icon-192.png", size: 192 },
|
||||
{ name: "icon-384.png", size: 384 },
|
||||
{ name: "icon-512.png", size: 512 },
|
||||
{ name: "icon-512-maskable.png", size: 512 },
|
||||
{ name: "icon-180.png", size: 180 },
|
||||
];
|
||||
|
||||
for (const { name, size } of icons) {
|
||||
const out = resolve(publicDir, name);
|
||||
writeFileSync(out, solidPNG(size, R, G, B));
|
||||
for (const { name, size } of sizes) {
|
||||
await sharp(svg).resize(size, size).png().toFile(join(pub, name));
|
||||
console.log(` ✓ public/${name} (${size}×${size})`);
|
||||
}
|
||||
|
||||
// Maskable: remove rounded corners so the background fills the full canvas,
|
||||
// allowing the OS to apply any mask shape without clipping the icon corners.
|
||||
const maskableSvg = readFileSync(join(pub, "icon.svg"), "utf-8").replace('rx="96"', "");
|
||||
|
||||
await sharp(Buffer.from(maskableSvg))
|
||||
.resize(512, 512)
|
||||
.png()
|
||||
.toFile(join(pub, "icon-512-maskable.png"));
|
||||
console.log(` ✓ public/icon-512-maskable.png (512×512 maskable)`);
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import postgres from "postgres";
|
||||
import { drizzle } from "drizzle-orm/postgres-js";
|
||||
import { households } from "@/modules/_core/schema";
|
||||
import { ensureDefaultCalendars } from "@/modules/calendar/server/defaults";
|
||||
import { ensureDefaultLists } from "@/modules/lists/server/defaults";
|
||||
|
||||
const client = postgres(process.env["DATABASE_URL"]!);
|
||||
const db = drizzle(client);
|
||||
|
||||
async function seed() {
|
||||
const [existing] = await db.select().from(households).limit(1);
|
||||
if (existing) {
|
||||
console.log(`Household already exists ("${existing.name}"), skipping.`);
|
||||
} else {
|
||||
await db.insert(households).values({ name: "Home" });
|
||||
console.log('Seeded household "Home".');
|
||||
}
|
||||
|
||||
await ensureDefaultCalendars();
|
||||
console.log("Ensured default calendars.");
|
||||
await ensureDefaultLists();
|
||||
console.log("Ensured default lists.");
|
||||
await client.end();
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
seed().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -9,6 +9,7 @@ import { DashboardEditor } from "@/components/dashboard-editor";
|
||||
import { EditDashboardButton } from "@/components/edit-dashboard-button";
|
||||
import { DashboardSwitcher } from "@/components/dashboard-switcher";
|
||||
import { DashboardTab } from "@/components/dashboard-tab";
|
||||
import { DashboardGreeting } from "@/components/dashboard-greeting";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { db } from "@/lib/db";
|
||||
@@ -31,9 +32,6 @@ const smColSpan: Record<number, string> = {
|
||||
12: "sm:col-span-12",
|
||||
};
|
||||
|
||||
const greetingForHour = (h: number) =>
|
||||
h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
|
||||
|
||||
export default async function DashboardPage({
|
||||
params,
|
||||
searchParams,
|
||||
@@ -83,17 +81,11 @@ export default async function DashboardPage({
|
||||
const dashLayout = (user.themeDashLayout as DashLayout) ?? "classic";
|
||||
const containerCls =
|
||||
dashLayout === "glance" ? "max-w-[760px] mx-auto" : dashLayout === "split" ? "" : "";
|
||||
const greeting = greetingForHour(new Date().getHours());
|
||||
const today = new Date().toLocaleDateString(undefined, {
|
||||
weekday: "long",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
const firstName = (user.name ?? "").split(" ")[0] ?? "";
|
||||
|
||||
return (
|
||||
<div className={containerCls}>
|
||||
{userDashboards.length > 1 && (
|
||||
{userDashboards.length >= 1 && (
|
||||
<div className="flex items-center gap-1 mb-4 overflow-x-auto">
|
||||
{userDashboards.map((d) => (
|
||||
<DashboardTab key={d.id} slug={d.slug} name={d.name} />
|
||||
@@ -103,13 +95,7 @@ export default async function DashboardPage({
|
||||
)}
|
||||
|
||||
<div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
|
||||
{greeting}
|
||||
{firstName && `, ${firstName}`}.
|
||||
</h1>
|
||||
<p className="muted mt-1 text-[13px]">{today}</p>
|
||||
</div>
|
||||
<DashboardGreeting firstName={firstName} />
|
||||
<EditDashboardButton />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function Error({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
|
||||
<h2 className="text-xl font-semibold">Something went wrong</h2>
|
||||
<button
|
||||
onClick={reset}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +1,18 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { getContainer } from "@/modules/garden/server/queries";
|
||||
import { ContainerDetail } from "@/modules/garden/components/container-detail";
|
||||
import { getShareLinksForEntity } from "@/modules/_core/share";
|
||||
|
||||
export default async function ContainerPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const container = await getContainer(id);
|
||||
const [container, shareLinks] = await Promise.all([
|
||||
getContainer(id),
|
||||
getShareLinksForEntity("garden.container", id),
|
||||
]);
|
||||
if (!container) notFound();
|
||||
return (
|
||||
<div className="page-content">
|
||||
<ContainerDetail container={container} />
|
||||
<ContainerDetail container={container} shareLinks={shareLinks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,16 @@ import { notFound } from "next/navigation";
|
||||
import { listCalendars } from "@/modules/garden/server/calendar-bridge";
|
||||
import { getCareLogs, getCareSchedules, getPlant } from "@/modules/garden/server/queries";
|
||||
import { PlantDetail } from "@/modules/garden/components/plant-detail";
|
||||
import { getShareLinksForEntity } from "@/modules/_core/share";
|
||||
|
||||
export default async function PlantPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const [plant, careLogs, careSchedules, calendars] = await Promise.all([
|
||||
const [plant, careLogs, careSchedules, calendars, shareLinks] = await Promise.all([
|
||||
getPlant(id),
|
||||
getCareLogs(id),
|
||||
getCareSchedules(id),
|
||||
listCalendars(),
|
||||
getShareLinksForEntity("garden.plant", id),
|
||||
]);
|
||||
if (!plant) notFound();
|
||||
|
||||
@@ -20,6 +22,7 @@ export default async function PlantPage({ params }: { params: Promise<{ id: stri
|
||||
careLogs={careLogs}
|
||||
careSchedules={careSchedules}
|
||||
calendars={calendars}
|
||||
shareLinks={shareLinks}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function GlobalError({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<html>
|
||||
<body className="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
|
||||
<h2 className="text-xl font-semibold">Something went wrong</h2>
|
||||
<button
|
||||
onClick={reset}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+166
-1
@@ -490,6 +490,8 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@@ -521,6 +523,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: 232px 1fr;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
background: var(--paper);
|
||||
}
|
||||
:where(html[data-nav="rail"]) .app {
|
||||
@@ -725,7 +728,7 @@
|
||||
}
|
||||
:where(html[data-nav="bottom"]) .scroll-area,
|
||||
:where(html[data-nav="fab"]) .scroll-area {
|
||||
padding: 12px 14px 88px;
|
||||
padding: 12px 14px 74px;
|
||||
}
|
||||
|
||||
.scroll-area::-webkit-scrollbar {
|
||||
@@ -1346,3 +1349,165 @@ select {
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.12),
|
||||
0 0 0 2px rgba(244, 239, 229, 0.08);
|
||||
}
|
||||
|
||||
/* ─── Bang Counter celebration animations ─────────────────────────────────── */
|
||||
@keyframes shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(-6px) rotate(-1deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(6px) rotate(1deg);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-5px) rotate(-0.8deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(5px) rotate(0.8deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-4px) rotate(-0.5deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(4px) rotate(0.5deg);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
90% {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes countPop {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
30% {
|
||||
transform: scale(1.45);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes emojiFloat {
|
||||
0% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-60px) scale(1.2);
|
||||
opacity: 0.9;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-120px) scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.35s ease-in-out both;
|
||||
}
|
||||
.animate-count-pop {
|
||||
animation: countPop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
}
|
||||
.animate-emoji-float {
|
||||
animation: emojiFloat 1.8s ease-out both;
|
||||
}
|
||||
|
||||
/* ── Calendar min-height CSS variable ───────────────────────────── */
|
||||
/* Used by calendar-shell so the grid fills the viewport correctly */
|
||||
/* on both desktop (topbar only) and mobile (topbar + bottom nav). */
|
||||
:root {
|
||||
--cal-topbar-h: 57px;
|
||||
--cal-nav-h: 0px;
|
||||
}
|
||||
:where(html[data-nav="bottom"]),
|
||||
:where(html[data-nav="fab"]) {
|
||||
--cal-nav-h: 62px;
|
||||
}
|
||||
|
||||
/* ── Mobile overrides (≤ 759 px) ────────────────────────────────── */
|
||||
@media (max-width: 759px) {
|
||||
/* Prevent iOS Safari from zooming into inputs (requires ≥ 16 px) */
|
||||
.input,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Topbar: tighten padding; avatar is redundant (Settings in bottom nav) */
|
||||
.topbar {
|
||||
padding: 10px 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
.topbar-actions > .avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Keyboard shortcut hints are meaningless on touch */
|
||||
.kbd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Eliminate 300 ms tap delay on interactive controls */
|
||||
.btn,
|
||||
.checkbox,
|
||||
.nav-item,
|
||||
.list-row,
|
||||
.fab,
|
||||
.bottom-nav button,
|
||||
.bottom-nav a {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Momentum scrolling + prevent page bounce fighting in-app scroll */
|
||||
.scroll-area {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
/* Checkbox: keep the 18 px visual but expand the tap area to 44 px */
|
||||
.checkbox {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -13px; /* 18 + 2×13 = 44 px tap target */
|
||||
}
|
||||
|
||||
/* Delete button on list rows: always visible on touch (no hover state) */
|
||||
.list-row-delete {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape phone: compress bottom nav to icon-only to reclaim vertical space */
|
||||
@media (max-width: 759px) and (orientation: landscape) and (max-height: 500px) {
|
||||
.bottom-nav {
|
||||
height: 44px;
|
||||
padding: 2px 8px env(safe-area-inset-bottom, 2px);
|
||||
}
|
||||
.bottom-nav .nav-label {
|
||||
display: none;
|
||||
}
|
||||
:where(html[data-nav="bottom"]) .scroll-area {
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +42,7 @@ const jetbrains = JetBrains_Mono({
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: "#1F1B16",
|
||||
viewportFit: "cover",
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -54,6 +55,11 @@ export const metadata: Metadata = {
|
||||
title: "famapp",
|
||||
},
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: "/favicon.svg", type: "image/svg+xml" },
|
||||
{ url: "/icon-32.png", sizes: "32x32", type: "image/png" },
|
||||
{ url: "/icon-16.png", sizes: "16x16", type: "image/png" },
|
||||
],
|
||||
apple: "/icon-180.png",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { DashboardMeta } from "@/app/d/actions";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { Topbar } from "@/components/topbar";
|
||||
import { BottomNav } from "@/components/bottom-nav";
|
||||
import { Fab } from "@/components/fab";
|
||||
import { NavModeProvider } from "@/components/nav-mode-provider";
|
||||
|
||||
const BARE_PREFIXES = ["/s/", "/login"];
|
||||
@@ -38,7 +37,6 @@ export async function AppShell({ signedIn, navStyle, children }: Props) {
|
||||
<div className="scroll-area">{children}</div>
|
||||
</main>
|
||||
<BottomNav />
|
||||
<Fab />
|
||||
<NavModeProvider navStyle={navStyle} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,23 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function BrandMark({ size = "md", className }: { size?: "sm" | "md"; className?: string }) {
|
||||
const iconSize = size === "sm" ? 14 : 17;
|
||||
return (
|
||||
<span
|
||||
className={cn("brand-mark", size === "sm" && "brand-mark-sm", className)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
f
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
fill="currentColor"
|
||||
>
|
||||
<polygon points="12,2 1,12 23,12" />
|
||||
<rect x="3.5" y="11" width="17" height="12" />
|
||||
<rect x="9.5" y="16" width="5" height="7" rx="1" style={{ fill: "var(--ink)" }} />
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
const greetingForHour = (h: number) =>
|
||||
h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
|
||||
|
||||
export function DashboardGreeting({ firstName }: { firstName: string }) {
|
||||
const now = new Date();
|
||||
const greeting = greetingForHour(now.getHours());
|
||||
const today = now.toLocaleDateString(undefined, {
|
||||
weekday: "long",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
|
||||
{greeting}
|
||||
{firstName && `, ${firstName}`}.
|
||||
</h1>
|
||||
<p className="muted mt-1 text-[13px]">{today}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -29,8 +29,14 @@ const QUICK_ADD_ICON: Record<string, string> = {
|
||||
"file-plus": "note",
|
||||
};
|
||||
|
||||
function useShortcutLabel() {
|
||||
if (typeof navigator === "undefined") return "⌘K";
|
||||
return /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
|
||||
}
|
||||
|
||||
export function QuickAddSheet() {
|
||||
const { sheetOpen, closeSheet, actions } = useQuickAdd();
|
||||
const shortcut = useShortcutLabel();
|
||||
const router = useRouter();
|
||||
const backdropRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -110,7 +116,7 @@ export function QuickAddSheet() {
|
||||
}}
|
||||
>
|
||||
<Sparkles className="size-3" />
|
||||
<span>Pick what to add — or use ⌘K to search.</span>
|
||||
<span>Pick what to add — or use {shortcut} to search.</span>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[60vh] overflow-y-auto">
|
||||
|
||||
@@ -81,20 +81,26 @@ function SectionHashSync({ pathname }: { pathname: string | null }) {
|
||||
export function SettingsTabsMobile({ active }: { active: SectionId }) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<div className="seg w-full overflow-x-auto" style={{ display: "flex" }}>
|
||||
<div className="grid grid-cols-2 gap-1.5 mb-1">
|
||||
{SECTIONS.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={active === s.id}
|
||||
aria-current={active === s.id ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex items-center gap-2.5 px-3 py-2.5 rounded-[var(--r-md)] border-[0.5px] text-left text-[13px] font-medium transition-colors",
|
||||
active === s.id
|
||||
? "bg-[var(--card)] border-[var(--hair-2)] text-[var(--ink)] shadow-[var(--shadow-1)]"
|
||||
: "border-transparent text-[var(--ink-soft)] hover:bg-[var(--shade)]",
|
||||
)}
|
||||
onClick={() => {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("s", s.id);
|
||||
router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
|
||||
}}
|
||||
>
|
||||
{s.label.split(" ")[0]}
|
||||
<NavIcon name={s.icon} className="size-4 shrink-0" />
|
||||
<span>{s.label.split(" ")[0]}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -19,15 +19,21 @@ export function ShareButton({
|
||||
const [open, setOpen] = useState(false);
|
||||
const [shareUrl, setShareUrl] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function share() {
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
const result = await createShareLink(entityType, entityId, {
|
||||
capabilities: { read: true, write: canWrite },
|
||||
});
|
||||
setShareUrl(result.url);
|
||||
setOpen(true);
|
||||
try {
|
||||
const result = await createShareLink(entityType, entityId, {
|
||||
capabilities: { read: true, write: canWrite },
|
||||
});
|
||||
setShareUrl(result.url);
|
||||
setOpen(true);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to create share link");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -41,10 +47,13 @@ export function ShareButton({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" onClick={share} disabled={isPending}>
|
||||
<Link />
|
||||
Share
|
||||
</Button>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<Button variant="outline" onClick={share} disabled={isPending}>
|
||||
<Link />
|
||||
Share
|
||||
</Button>
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { revokeShareLink } from "@/modules/_core/share";
|
||||
import type { EntityShareLink } from "@/modules/_core/share";
|
||||
|
||||
type Props = {
|
||||
links: EntityShareLink[];
|
||||
};
|
||||
|
||||
export function ShareLinkList({ links }: Props) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
if (links.length === 0) return null;
|
||||
|
||||
function handleRevoke(id: string) {
|
||||
startTransition(async () => {
|
||||
await revokeShareLink(id);
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1 pt-1 border-t border-[var(--ink-faint)]">
|
||||
<p className="text-xs font-semibold uppercase text-[var(--ink-mute)] tracking-wide">
|
||||
Active share links ({links.length})
|
||||
</p>
|
||||
{links.map((link) => (
|
||||
<div key={link.id} className="flex items-center justify-between gap-2 text-sm py-0.5">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[var(--ink-mute)]">
|
||||
Created {new Date(link.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
{link.expiresAt && (
|
||||
<span className="text-xs text-[var(--ink-mute)]">
|
||||
Expires {new Date(link.expiresAt).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm text-red-500 hover:text-red-600"
|
||||
onClick={() => handleRevoke(link.id)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,25 +3,45 @@
|
||||
import { useQuickAdd } from "@/components/quick-add-provider";
|
||||
import { NavIcon } from "@/components/nav-icon";
|
||||
|
||||
function useShortcutLabel() {
|
||||
if (typeof navigator === "undefined") return "⌘K";
|
||||
return /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
|
||||
}
|
||||
|
||||
export function TopbarSearch() {
|
||||
const { openPalette } = useQuickAdd();
|
||||
const shortcut = useShortcutLabel();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPalette}
|
||||
aria-label="Search (⌘K)"
|
||||
className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
|
||||
style={{
|
||||
border: "0.5px solid var(--hair-2)",
|
||||
background: "var(--card)",
|
||||
color: "var(--ink-mute)",
|
||||
width: 220,
|
||||
}}
|
||||
>
|
||||
<NavIcon name="search" className="size-3.5" />
|
||||
<span style={{ flex: 1, textAlign: "left" }}>Search…</span>
|
||||
<span className="kbd">⌘K</span>
|
||||
</button>
|
||||
<>
|
||||
{/* Desktop: pill with shortcut hint */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPalette}
|
||||
aria-label={`Search (${shortcut})`}
|
||||
className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
|
||||
style={{
|
||||
border: "0.5px solid var(--hair-2)",
|
||||
background: "var(--card)",
|
||||
color: "var(--ink-mute)",
|
||||
width: 220,
|
||||
}}
|
||||
>
|
||||
<NavIcon name="search" className="size-3.5" />
|
||||
<span style={{ flex: 1, textAlign: "left" }}>Search…</span>
|
||||
<span className="kbd">{shortcut}</span>
|
||||
</button>
|
||||
|
||||
{/* Mobile: icon-only */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPalette}
|
||||
aria-label="Search"
|
||||
className="flex md:hidden items-center justify-center h-8 w-8 rounded-md"
|
||||
style={{ color: "var(--ink-mute)" }}
|
||||
>
|
||||
<NavIcon name="search" className="size-4" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-1
@@ -1,4 +1,5 @@
|
||||
import { eq } from "drizzle-orm";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { db } from "@/lib/db";
|
||||
import { householdMembers, households, users } from "@/modules/_core/schema";
|
||||
@@ -13,7 +14,7 @@ export interface CurrentSession {
|
||||
|
||||
export async function getCurrentSession(): Promise<CurrentSession> {
|
||||
const session = await auth();
|
||||
if (!session?.user?.id) throw new Error("Not authenticated");
|
||||
if (!session?.user?.id) redirect("/login");
|
||||
|
||||
const [row] = await db
|
||||
.select({
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
import { NextResponse, type NextRequest } from "next/server";
|
||||
import { consume } from "@/lib/rate-limit";
|
||||
|
||||
const PUBLIC_PREFIXES = ["/api/auth/", "/s/"];
|
||||
const PUBLIC_PATHS = new Set(["/login"]);
|
||||
const PUBLIC_PREFIXES = ["/api/auth/", "/s/", "/icon-", "/favicon"];
|
||||
const PUBLIC_PATHS = new Set(["/login", "/manifest.webmanifest", "/offline.html"]);
|
||||
const SESSION_COOKIE_NAMES = ["authjs.session-token", "__Secure-authjs.session-token"];
|
||||
|
||||
// Token-prefix length used as part of the rate-limit bucket key.
|
||||
|
||||
@@ -20,7 +20,8 @@ function hashToken(raw: string): string {
|
||||
}
|
||||
|
||||
function buildUrl(token: string): string {
|
||||
const base = process.env["NEXTAUTH_URL"] ?? "http://localhost:3000";
|
||||
const base =
|
||||
process.env["NEXT_PUBLIC_APP_URL"] ?? process.env["AUTH_URL"] ?? "http://localhost:3000";
|
||||
return `${base}/s/${token}`;
|
||||
}
|
||||
|
||||
@@ -100,6 +101,48 @@ export async function revokeShareLink(id: string): Promise<void> {
|
||||
|
||||
export type ActiveShareLink = typeof shareLinks.$inferSelect;
|
||||
|
||||
export type EntityShareLink = {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
expiresAt: string | null;
|
||||
capabilities: ShareLinkCapabilities;
|
||||
};
|
||||
|
||||
export async function getShareLinksForEntity(
|
||||
entityType: string,
|
||||
entityId: string,
|
||||
): Promise<EntityShareLink[]> {
|
||||
const { household } = await getCurrentSession();
|
||||
const now = new Date();
|
||||
|
||||
const rows = await db
|
||||
.select({
|
||||
id: shareLinks.id,
|
||||
createdAt: shareLinks.createdAt,
|
||||
expiresAt: shareLinks.expiresAt,
|
||||
capabilities: shareLinks.capabilities,
|
||||
})
|
||||
.from(shareLinks)
|
||||
.where(
|
||||
and(
|
||||
eq(shareLinks.householdId, household.id),
|
||||
eq(shareLinks.entityType, entityType),
|
||||
eq(shareLinks.entityId, entityId),
|
||||
isNull(shareLinks.revokedAt),
|
||||
),
|
||||
)
|
||||
.orderBy(shareLinks.createdAt);
|
||||
|
||||
return rows
|
||||
.filter((r) => !r.expiresAt || r.expiresAt > now)
|
||||
.map((r) => ({
|
||||
id: r.id,
|
||||
createdAt: r.createdAt.toISOString(),
|
||||
expiresAt: r.expiresAt?.toISOString() ?? null,
|
||||
capabilities: r.capabilities,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function getActiveShareLinks(): Promise<ActiveShareLink[]> {
|
||||
const { household } = await getCurrentSession();
|
||||
const now = new Date();
|
||||
|
||||
@@ -0,0 +1,332 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition, useRef, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import confetti from "canvas-confetti";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import type { BangStatsDto } from "../server/queries";
|
||||
import { addBang } from "../server/actions";
|
||||
|
||||
// ─── Celebration engine ───────────────────────────────────────────────────────
|
||||
|
||||
function launchFirework(originX: number, originY: number) {
|
||||
confetti({
|
||||
particleCount: 80,
|
||||
startVelocity: 45,
|
||||
spread: 360,
|
||||
origin: { x: originX, y: originY },
|
||||
colors: ["#ff0", "#f0f", "#0ff", "#f60", "#0f6", "#06f"],
|
||||
shapes: ["circle", "square"],
|
||||
gravity: 0.8,
|
||||
scalar: 1.2,
|
||||
ticks: 200,
|
||||
});
|
||||
}
|
||||
|
||||
function launchSideCannon(side: "left" | "right") {
|
||||
confetti({
|
||||
particleCount: 120,
|
||||
angle: side === "left" ? 60 : 120,
|
||||
spread: 55,
|
||||
origin: { x: side === "left" ? 0 : 1, y: 0.65 },
|
||||
colors: ["#ff4e50", "#fc913a", "#f9d423", "#ede574", "#e1f5c4"],
|
||||
shapes: ["circle", "square", "star"],
|
||||
scalar: 1.1,
|
||||
ticks: 300,
|
||||
});
|
||||
}
|
||||
|
||||
function launchStarBurst() {
|
||||
const defaults = {
|
||||
spread: 360,
|
||||
ticks: 100,
|
||||
gravity: 0,
|
||||
decay: 0.94,
|
||||
startVelocity: 30,
|
||||
shapes: ["star"] as confetti.Shape[],
|
||||
colors: ["FFE400", "FFBD00", "E89400", "FFCA6C", "FDFFB8"],
|
||||
};
|
||||
function shoot() {
|
||||
confetti({ ...defaults, particleCount: 40, scalar: 1.2, shapes: ["star"] });
|
||||
confetti({ ...defaults, particleCount: 15, scalar: 0.75, shapes: ["circle"] });
|
||||
}
|
||||
shoot();
|
||||
setTimeout(shoot, 100);
|
||||
setTimeout(shoot, 200);
|
||||
}
|
||||
|
||||
function synthFireworkSound() {
|
||||
try {
|
||||
const ctx = new AudioContext();
|
||||
// Rising "pew" tone
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.frequency.setValueAtTime(200, ctx.currentTime);
|
||||
osc.frequency.exponentialRampToValueAtTime(900, ctx.currentTime + 0.12);
|
||||
gain.gain.setValueAtTime(0.35, ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
|
||||
osc.start(ctx.currentTime);
|
||||
osc.stop(ctx.currentTime + 0.18);
|
||||
|
||||
// Noise "boom"
|
||||
const bufferSize = ctx.sampleRate * 0.4;
|
||||
const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
|
||||
const data = buffer.getChannelData(0);
|
||||
for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
|
||||
const noise = ctx.createBufferSource();
|
||||
noise.buffer = buffer;
|
||||
const noiseGain = ctx.createGain();
|
||||
const bpFilter = ctx.createBiquadFilter();
|
||||
bpFilter.type = "bandpass";
|
||||
bpFilter.frequency.value = 150;
|
||||
noise.connect(bpFilter);
|
||||
bpFilter.connect(noiseGain);
|
||||
noiseGain.connect(ctx.destination);
|
||||
noiseGain.gain.setValueAtTime(0.6, ctx.currentTime + 0.15);
|
||||
noiseGain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.6);
|
||||
noise.start(ctx.currentTime + 0.15);
|
||||
noise.stop(ctx.currentTime + 0.6);
|
||||
} catch {
|
||||
// Autoplay policy blocked — silently skip
|
||||
}
|
||||
}
|
||||
|
||||
type EmojiParticle = {
|
||||
id: number;
|
||||
emoji: string;
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
delay: number;
|
||||
};
|
||||
|
||||
const CELEBRATION_EMOJIS = [
|
||||
"💥",
|
||||
"🎉",
|
||||
"🔥",
|
||||
"✨",
|
||||
"🎊",
|
||||
"🥳",
|
||||
"💦",
|
||||
"😈",
|
||||
"🎆",
|
||||
"⭐",
|
||||
"🍆",
|
||||
"💫",
|
||||
"🌟",
|
||||
"🎇",
|
||||
"🍒",
|
||||
];
|
||||
|
||||
function EmojiOverlay({ particles }: { particles: EmojiParticle[] }) {
|
||||
if (particles.length === 0) return null;
|
||||
return createPortal(
|
||||
<div className="pointer-events-none fixed inset-0 z-[9999] overflow-hidden" aria-hidden>
|
||||
{particles.map((p) => (
|
||||
<span
|
||||
key={p.id}
|
||||
className="absolute select-none animate-emoji-float"
|
||||
style={{
|
||||
left: `${p.x}%`,
|
||||
top: `${p.y}%`,
|
||||
fontSize: `${p.size}rem`,
|
||||
animationDelay: `${p.delay}ms`,
|
||||
}}
|
||||
>
|
||||
{p.emoji}
|
||||
</span>
|
||||
))}
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Component ────────────────────────────────────────────────────────────────
|
||||
|
||||
type Props = {
|
||||
stats: BangStatsDto;
|
||||
maxRecentBangs: number;
|
||||
};
|
||||
|
||||
export function BangWidget({ stats, maxRecentBangs }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [dateValue, setDateValue] = useState(todayValue());
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [emojiParticles, setEmojiParticles] = useState<EmojiParticle[]>([]);
|
||||
const [countPop, setCountPop] = useState(false);
|
||||
const [shake, setShake] = useState(false);
|
||||
const [flash, setFlash] = useState(false);
|
||||
const particleIdRef = useRef(0);
|
||||
|
||||
const spawnEmojis = useCallback(() => {
|
||||
const batch: EmojiParticle[] = Array.from({ length: 50 }, () => ({
|
||||
id: ++particleIdRef.current,
|
||||
emoji: CELEBRATION_EMOJIS[Math.floor(Math.random() * CELEBRATION_EMOJIS.length)]!,
|
||||
x: Math.random() * 100,
|
||||
y: 20 + Math.random() * 70, // keep out of very top/bottom edges so float-up is visible
|
||||
size: 1.5 + Math.random() * 2,
|
||||
delay: Math.random() * 600, // stagger spawning over 600ms so it feels like a cascade
|
||||
}));
|
||||
setEmojiParticles((prev) => [...prev, ...batch]);
|
||||
setTimeout(() => {
|
||||
const ids = new Set(batch.map((p) => p.id));
|
||||
setEmojiParticles((prev) => prev.filter((p) => !ids.has(p.id)));
|
||||
}, 2400);
|
||||
}, []);
|
||||
|
||||
const triggerCelebration = useCallback(() => {
|
||||
setFlash(true);
|
||||
setTimeout(() => setFlash(false), 120);
|
||||
|
||||
setShake(true);
|
||||
setTimeout(() => setShake(false), 350);
|
||||
|
||||
setCountPop(true);
|
||||
setTimeout(() => setCountPop(false), 400);
|
||||
|
||||
synthFireworkSound();
|
||||
spawnEmojis();
|
||||
launchStarBurst();
|
||||
|
||||
launchSideCannon("left");
|
||||
setTimeout(() => launchSideCannon("right"), 150);
|
||||
|
||||
setTimeout(() => launchFirework(0.3, 0.7), 200);
|
||||
setTimeout(() => launchFirework(0.7, 0.65), 450);
|
||||
setTimeout(() => launchFirework(0.5, 0.6), 700);
|
||||
setTimeout(() => launchFirework(0.2, 0.75), 950);
|
||||
setTimeout(() => launchFirework(0.8, 0.7), 1100);
|
||||
setTimeout(() => {
|
||||
launchSideCannon("left");
|
||||
launchSideCannon("right");
|
||||
}, 1300);
|
||||
setTimeout(() => launchFirework(0.5, 0.5), 1600);
|
||||
}, [spawnEmojis]);
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await addBang({ occurredOn: dateValue });
|
||||
setOpen(false);
|
||||
triggerCelebration();
|
||||
} catch {
|
||||
setError("Something went wrong. Try again.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`relative flex flex-col gap-3 overflow-hidden ${shake ? "animate-shake" : ""}`}>
|
||||
{flash && (
|
||||
<div className="pointer-events-none absolute inset-0 z-20 rounded-xl bg-white/70" />
|
||||
)}
|
||||
|
||||
<EmojiOverlay particles={emojiParticles} />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
className={`text-5xl font-bold leading-none tabular-nums ${countPop ? "animate-count-pop" : ""}`}
|
||||
>
|
||||
{stats.total}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--ink-mute)] mt-1">
|
||||
{stats.total === 1 ? "bang" : "bangs"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger
|
||||
render={
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary flex items-center gap-1.5 text-sm px-3 py-1.5"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<span aria-hidden>💥</span> Add Bang
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Record a bang</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="bang-form" onSubmit={handleSubmit} className="flex flex-col gap-3 pt-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="bang-date" className="text-sm font-medium">
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
id="bang-date"
|
||||
type="date"
|
||||
value={dateValue}
|
||||
onChange={(e) => setDateValue(e.target.value)}
|
||||
className="input input-sm"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-[var(--ink-mute)]">
|
||||
Change if you're documenting a bang from a previous day.
|
||||
</p>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
</form>
|
||||
<DialogFooter showCloseButton>
|
||||
<button
|
||||
type="submit"
|
||||
form="bang-form"
|
||||
disabled={isPending}
|
||||
className="btn btn-primary btn-sm"
|
||||
>
|
||||
{isPending ? "Recording…" : "🎆 Record it"}
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{stats.recent.length > 0 && (
|
||||
<div className="flex flex-col gap-0.5 border-t border-[var(--surface-3)] pt-2">
|
||||
<p className="text-xs font-medium text-[var(--ink-mute)] mb-1">
|
||||
Last {Math.min(stats.recent.length, maxRecentBangs)}
|
||||
</p>
|
||||
{stats.recent.map((bang) => (
|
||||
<div key={bang.id} className="flex items-center justify-between gap-2 py-0.5">
|
||||
<span className="text-sm">{formatBangDate(bang.occurredOn)}</span>
|
||||
{bang.recordedByName && (
|
||||
<span className="max-w-[40%] truncate text-xs text-[var(--ink-mute)]">
|
||||
{bang.recordedByName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stats.total === 0 && (
|
||||
<p className="text-sm text-[var(--ink-mute)]">No bangs yet. Add the first one!</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function todayValue(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatBangDate(iso: string): string {
|
||||
const [year, month, day] = iso.split("-").map(Number);
|
||||
const d = new Date(year!, month! - 1, day!);
|
||||
return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { z } from "zod";
|
||||
import type { ModuleManifest, WidgetContext } from "../_core/module";
|
||||
import { getBangStats } from "./server/queries";
|
||||
import { BangWidget } from "./components/bang-widget";
|
||||
|
||||
const bangWidgetConfigSchema = z.object({
|
||||
maxRecentBangs: z.number().int().min(1).max(20).default(5),
|
||||
});
|
||||
|
||||
async function BangWidgetServer({ config, ctx }: { config: unknown; ctx: WidgetContext }) {
|
||||
const parsed = bangWidgetConfigSchema.parse(config);
|
||||
const stats = await getBangStats(ctx.householdId, parsed.maxRecentBangs);
|
||||
return <BangWidget stats={stats} maxRecentBangs={parsed.maxRecentBangs} />;
|
||||
}
|
||||
|
||||
const bangsManifest: ModuleManifest = {
|
||||
id: "bangs",
|
||||
name: "Bangs",
|
||||
entities: [
|
||||
{
|
||||
type: "bangs.event",
|
||||
label: { singular: "Bang", plural: "Bangs" },
|
||||
resolveUrl: () => "/",
|
||||
renderActivity: (entry) => {
|
||||
const date = entry.payload?.occurredOn as string | undefined;
|
||||
return date ? `Recorded a bang on ${date}` : "Recorded a bang";
|
||||
},
|
||||
},
|
||||
],
|
||||
dashboardWidgets: [
|
||||
{
|
||||
id: "bangs.counter",
|
||||
title: "Bang Counter",
|
||||
description: "Track and celebrate bangs with your household.",
|
||||
category: "Fun",
|
||||
defaultSize: { w: 3, h: 3 },
|
||||
minSize: { w: 2, h: 2 },
|
||||
defaultPriority: 60,
|
||||
configSchema: bangWidgetConfigSchema,
|
||||
defaultConfig: { maxRecentBangs: 5 },
|
||||
render: (props) => <BangWidgetServer {...props} />,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default bangsManifest;
|
||||
@@ -0,0 +1,18 @@
|
||||
import { index, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
|
||||
import { households, users } from "../_core/schema";
|
||||
|
||||
export const bangEvents = pgTable(
|
||||
"bang_events",
|
||||
{
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
householdId: uuid("household_id")
|
||||
.notNull()
|
||||
.references(() => households.id, { onDelete: "cascade" }),
|
||||
recordedBy: uuid("recorded_by").references(() => users.id, { onDelete: "set null" }),
|
||||
occurredOn: text("occurred_on").notNull(), // YYYY-MM-DD, text to avoid timezone confusion
|
||||
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
|
||||
},
|
||||
(t) => [index("bang_events_household_occurred_idx").on(t.householdId, t.occurredOn)],
|
||||
);
|
||||
|
||||
export type BangEvent = typeof bangEvents.$inferSelect;
|
||||
@@ -0,0 +1,50 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { z } from "zod";
|
||||
import { db } from "@/lib/db";
|
||||
import { getCurrentSession } from "@/lib/session";
|
||||
import { logActivity } from "@/modules/_core/activity";
|
||||
import { bangEvents } from "../schema";
|
||||
|
||||
const addBangInput = z.object({
|
||||
occurredOn: z
|
||||
.string()
|
||||
.regex(/^\d{4}-\d{2}-\d{2}$/, "Must be YYYY-MM-DD")
|
||||
.optional(),
|
||||
});
|
||||
|
||||
function todayString(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export async function addBang(input: z.input<typeof addBangInput> = {}) {
|
||||
const parsed = addBangInput.parse(input);
|
||||
const { user, household } = await getCurrentSession();
|
||||
|
||||
const occurredOn = parsed.occurredOn ?? todayString();
|
||||
|
||||
const [bang] = await db
|
||||
.insert(bangEvents)
|
||||
.values({
|
||||
householdId: household.id,
|
||||
recordedBy: user.id,
|
||||
occurredOn,
|
||||
})
|
||||
.returning();
|
||||
|
||||
if (!bang) throw new Error("Bang was not recorded");
|
||||
|
||||
await logActivity({
|
||||
entityType: "bangs.event",
|
||||
entityId: bang.id,
|
||||
action: "create",
|
||||
payload: { occurredOn },
|
||||
});
|
||||
|
||||
revalidatePath("/");
|
||||
revalidatePath("/d/[slug]", "page");
|
||||
|
||||
return bang;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { count, desc, eq } from "drizzle-orm";
|
||||
import { db } from "@/lib/db";
|
||||
import { users } from "@/modules/_core/schema";
|
||||
import { bangEvents } from "../schema";
|
||||
|
||||
export type BangStatsDto = {
|
||||
total: number;
|
||||
recent: RecentBangDto[];
|
||||
};
|
||||
|
||||
export type RecentBangDto = {
|
||||
id: string;
|
||||
occurredOn: string;
|
||||
recordedByName: string | null;
|
||||
};
|
||||
|
||||
export async function getBangStats(householdId: string, limit: number): Promise<BangStatsDto> {
|
||||
const [totalRow] = await db
|
||||
.select({ total: count() })
|
||||
.from(bangEvents)
|
||||
.where(eq(bangEvents.householdId, householdId));
|
||||
|
||||
const recent = await db
|
||||
.select({
|
||||
id: bangEvents.id,
|
||||
occurredOn: bangEvents.occurredOn,
|
||||
recordedByName: users.name,
|
||||
})
|
||||
.from(bangEvents)
|
||||
.leftJoin(users, eq(bangEvents.recordedBy, users.id))
|
||||
.where(eq(bangEvents.householdId, householdId))
|
||||
.orderBy(desc(bangEvents.occurredOn), desc(bangEvents.createdAt))
|
||||
.limit(limit);
|
||||
|
||||
return {
|
||||
total: totalRow?.total ?? 0,
|
||||
recent,
|
||||
};
|
||||
}
|
||||
@@ -4,10 +4,11 @@ import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import type { DateSelectArg, EventClickArg, EventDropArg } from "@fullcalendar/core";
|
||||
import type { EventResizeDoneArg } from "@fullcalendar/interaction";
|
||||
import { CalendarPlus, Check, Eye, EyeOff, Plus, Trash2 } from "lucide-react";
|
||||
import { useMemo, useState, useTransition } from "react";
|
||||
import { CalendarPlus, Check, Eye, EyeOff, Plus, Trash2, X } from "lucide-react";
|
||||
import { useMemo, useState, useEffect, useTransition } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -44,6 +45,8 @@ type EventDraft = {
|
||||
remindMinutesBefore: number | null;
|
||||
};
|
||||
|
||||
type MobileView = "day" | "week" | "agenda";
|
||||
|
||||
const DEFAULT_COLOR = "#B85C3C";
|
||||
|
||||
const VIEW_MAP: Record<CalView, string> = {
|
||||
@@ -52,8 +55,13 @@ const VIEW_MAP: Record<CalView, string> = {
|
||||
day: "timeGridDay",
|
||||
};
|
||||
|
||||
const MOBILE_VIEW_MAP: Record<MobileView, string> = {
|
||||
day: "timeGridDay",
|
||||
week: "timeGridWeek",
|
||||
agenda: "listWeek",
|
||||
};
|
||||
|
||||
function withAlpha(hex: string, alpha: number): string {
|
||||
// Accept #RGB / #RRGGBB / non-hex (return as-is for non-hex e.g. var(--))
|
||||
if (!hex.startsWith("#")) return hex;
|
||||
let h = hex.slice(1);
|
||||
if (h.length === 3)
|
||||
@@ -88,6 +96,17 @@ export function CalendarShell({
|
||||
);
|
||||
const [lastCalendarId, setLastCalendarId] = useState(calendars[0]?.id ?? "");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [showCalendarsPanel, setShowCalendarsPanel] = useState(false);
|
||||
const [mobileView, setMobileView] = useState<MobileView>("day");
|
||||
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(max-width: 759px)");
|
||||
const apply = () => setIsMobile(mq.matches);
|
||||
apply();
|
||||
mq.addEventListener("change", apply);
|
||||
return () => mq.removeEventListener("change", apply);
|
||||
}, []);
|
||||
|
||||
const defaultCalendarId = calendarRows.some((calendar) => calendar.id === lastCalendarId)
|
||||
? lastCalendarId
|
||||
@@ -289,106 +308,49 @@ export function CalendarShell({
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[calc(100vh-57px)] grid-cols-1 lg:grid-cols-[280px_1fr]">
|
||||
<aside className="border-b bg-sidebar p-4 lg:border-r lg:border-b-0">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Calendar</h1>
|
||||
<Button size="icon-sm" variant="outline" onClick={() => openNewEvent()}>
|
||||
<Plus />
|
||||
<span className="sr-only">New event</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{calendarRows.map((calendar) => (
|
||||
<div key={calendar.id} className="rounded-lg border bg-background p-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="grid size-7 place-items-center rounded-md border"
|
||||
onClick={() => toggleCalendar(calendar.id)}
|
||||
aria-label={`${visibleIds.has(calendar.id) ? "Hide" : "Show"} ${calendar.name}`}
|
||||
>
|
||||
{visibleIds.has(calendar.id) ? <Eye /> : <EyeOff />}
|
||||
</button>
|
||||
<span
|
||||
className="size-3 rounded-full"
|
||||
style={{ backgroundColor: calendar.color ?? DEFAULT_COLOR }}
|
||||
/>
|
||||
<Input
|
||||
aria-label={`${calendar.name} name`}
|
||||
value={calendar.name}
|
||||
onChange={(event) => updateCalendarName(calendar, event.target.value)}
|
||||
onBlur={() => commitCalendarName(calendar)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 grid grid-cols-[1fr_1fr_auto] gap-2">
|
||||
<Input
|
||||
aria-label={`${calendar.name} color`}
|
||||
type="color"
|
||||
value={calendar.color ?? DEFAULT_COLOR}
|
||||
onChange={(event) => updateCalendar(calendar, { color: event.target.value })}
|
||||
/>
|
||||
<Select
|
||||
value={calendar.visibility}
|
||||
onValueChange={(value) =>
|
||||
updateCalendar(calendar, {
|
||||
visibility: value as "private" | "household",
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger aria-label={`${calendar.name} visibility`}>
|
||||
<SelectValue>
|
||||
{calendar.visibility === "household" ? "Household" : "Private"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="household">Household</SelectItem>
|
||||
<SelectItem value="private">Private</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => removeCalendar(calendar.id)}
|
||||
aria-label={`Delete ${calendar.name}`}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-lg border bg-background p-3">
|
||||
<div className="mb-3 flex items-center gap-2 text-sm font-medium">
|
||||
<CalendarPlus className="size-4" />
|
||||
New calendar
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="calendar-name">Name</Label>
|
||||
<Input
|
||||
id="calendar-name"
|
||||
value={calendarName}
|
||||
onChange={(event) => setCalendarName(event.target.value)}
|
||||
/>
|
||||
<div className="grid grid-cols-[1fr_1fr] gap-2">
|
||||
// Shared calendar list + new-calendar form rendered in both the desktop aside
|
||||
// and the mobile bottom-sheet panel.
|
||||
const calendarsPanelContent = (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
{calendarRows.map((calendar) => (
|
||||
<div key={calendar.id} className="rounded-lg border bg-background p-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="grid size-7 place-items-center rounded-md border"
|
||||
onClick={() => toggleCalendar(calendar.id)}
|
||||
aria-label={`${visibleIds.has(calendar.id) ? "Hide" : "Show"} ${calendar.name}`}
|
||||
>
|
||||
{visibleIds.has(calendar.id) ? <Eye /> : <EyeOff />}
|
||||
</button>
|
||||
<span
|
||||
className="size-3 rounded-full"
|
||||
style={{ backgroundColor: calendar.color ?? DEFAULT_COLOR }}
|
||||
/>
|
||||
<Input
|
||||
aria-label="Calendar color"
|
||||
aria-label={`${calendar.name} name`}
|
||||
value={calendar.name}
|
||||
onChange={(event) => updateCalendarName(calendar, event.target.value)}
|
||||
onBlur={() => commitCalendarName(calendar)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 grid grid-cols-[1fr_1fr_auto] gap-2">
|
||||
<Input
|
||||
aria-label={`${calendar.name} color`}
|
||||
type="color"
|
||||
value={calendarColor}
|
||||
onChange={(event) => setCalendarColorValue(event.target.value)}
|
||||
value={calendar.color ?? DEFAULT_COLOR}
|
||||
onChange={(event) => updateCalendar(calendar, { color: event.target.value })}
|
||||
/>
|
||||
<Select
|
||||
value={calendarVisibility}
|
||||
value={calendar.visibility}
|
||||
onValueChange={(value) =>
|
||||
setCalendarVisibilityValue(value as "private" | "household")
|
||||
updateCalendar(calendar, { visibility: value as "private" | "household" })
|
||||
}
|
||||
>
|
||||
<SelectTrigger aria-label="Calendar visibility">
|
||||
<SelectTrigger aria-label={`${calendar.name} visibility`}>
|
||||
<SelectValue>
|
||||
{calendarVisibility === "household" ? "Household" : "Private"}
|
||||
{calendar.visibility === "household" ? "Household" : "Private"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -396,179 +358,336 @@ export function CalendarShell({
|
||||
<SelectItem value="private">Private</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => removeCalendar(calendar.id)}
|
||||
aria-label={`Delete ${calendar.name}`}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
<Button className="w-full" onClick={addCalendar} disabled={!calendarName}>
|
||||
<Check />
|
||||
Create calendar
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-lg border bg-background p-3">
|
||||
<div className="mb-3 flex items-center gap-2 text-sm font-medium">
|
||||
<CalendarPlus className="size-4" />
|
||||
New calendar
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="calendar-name">Name</Label>
|
||||
<Input
|
||||
id="calendar-name"
|
||||
value={calendarName}
|
||||
onChange={(event) => setCalendarName(event.target.value)}
|
||||
/>
|
||||
<div className="grid grid-cols-[1fr_1fr] gap-2">
|
||||
<Input
|
||||
aria-label="Calendar color"
|
||||
type="color"
|
||||
value={calendarColor}
|
||||
onChange={(event) => setCalendarColorValue(event.target.value)}
|
||||
/>
|
||||
<Select
|
||||
value={calendarVisibility}
|
||||
onValueChange={(value) =>
|
||||
setCalendarVisibilityValue(value as "private" | "household")
|
||||
}
|
||||
>
|
||||
<SelectTrigger aria-label="Calendar visibility">
|
||||
<SelectValue>
|
||||
{calendarVisibility === "household" ? "Household" : "Private"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="household">Household</SelectItem>
|
||||
<SelectItem value="private">Private</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button className="w-full" onClick={addCalendar} disabled={!calendarName}>
|
||||
<Check />
|
||||
Create calendar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const fcEvents = visibleEvents.map((event) => {
|
||||
const color =
|
||||
calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ?? DEFAULT_COLOR;
|
||||
return {
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
start: event.startAt,
|
||||
end: event.endAt,
|
||||
allDay: event.allDay,
|
||||
backgroundColor: withAlpha(color, 0.14),
|
||||
borderColor: color,
|
||||
textColor: "var(--ink-2)",
|
||||
extendedProps: { calendarId: event.calendarId, color },
|
||||
};
|
||||
});
|
||||
|
||||
// Shared event form content — rendered inside both the desktop centered modal
|
||||
// and the mobile bottom-sheet.
|
||||
const eventFormContent = selectedEvent && (
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="event-title">Title</Label>
|
||||
<Input
|
||||
id="event-title"
|
||||
value={selectedEvent.title}
|
||||
onChange={(event) => setSelectedEvent({ ...selectedEvent, title: event.target.value })}
|
||||
/>
|
||||
<Label htmlFor="event-calendar">Calendar</Label>
|
||||
<Select
|
||||
value={selectedEvent.calendarId}
|
||||
onValueChange={(value) => setSelectedEvent({ ...selectedEvent, calendarId: value ?? "" })}
|
||||
>
|
||||
<SelectTrigger id="event-calendar">
|
||||
<SelectValue>
|
||||
{calendarRows.find((c) => c.id === selectedEvent.calendarId)?.name ??
|
||||
"Select a calendar"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{calendarRows.map((calendar) => (
|
||||
<SelectItem key={calendar.id} value={calendar.id}>
|
||||
{calendar.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-start">Start</Label>
|
||||
<Input
|
||||
id="event-start"
|
||||
type="datetime-local"
|
||||
value={selectedEvent.startAt}
|
||||
onChange={(event) =>
|
||||
setSelectedEvent({ ...selectedEvent, startAt: event.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-end">End</Label>
|
||||
<Input
|
||||
id="event-end"
|
||||
type="datetime-local"
|
||||
value={selectedEvent.endAt}
|
||||
onChange={(event) => setSelectedEvent({ ...selectedEvent, endAt: event.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Label htmlFor="event-location">Location</Label>
|
||||
<Input
|
||||
id="event-location"
|
||||
value={selectedEvent.location}
|
||||
onChange={(event) => setSelectedEvent({ ...selectedEvent, location: event.target.value })}
|
||||
/>
|
||||
<Label htmlFor="event-notes">Notes</Label>
|
||||
<textarea
|
||||
id="event-notes"
|
||||
className="min-h-20 rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
value={selectedEvent.notes}
|
||||
onChange={(event) => setSelectedEvent({ ...selectedEvent, notes: event.target.value })}
|
||||
/>
|
||||
{!selectedEvent.id && (
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 cursor-pointer"
|
||||
checked={selectedEvent.remindMinutesBefore !== null}
|
||||
onChange={(e) =>
|
||||
setSelectedEvent({
|
||||
...selectedEvent,
|
||||
remindMinutesBefore: e.target.checked ? 30 : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Remind me 30 min before
|
||||
</label>
|
||||
)}
|
||||
<div className="flex items-center justify-between gap-2 pt-2">
|
||||
<div className="flex gap-2">
|
||||
{selectedEvent.id && (
|
||||
<Button variant="destructive" onClick={removeSelectedEvent}>
|
||||
Delete event
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{selectedEvent.id && (
|
||||
<ShareButton entityType="calendar.event" entityId={selectedEvent.id} />
|
||||
)}
|
||||
<Button onClick={saveSelectedEvent} disabled={!selectedEvent.title || isPending}>
|
||||
Save event
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-[280px_1fr]"
|
||||
style={{ minHeight: "calc(100dvh - var(--cal-topbar-h) - var(--cal-nav-h))" }}
|
||||
>
|
||||
{/* Desktop aside — hidden on mobile */}
|
||||
<aside
|
||||
className={`${isMobile ? "hidden" : ""} border-b bg-sidebar p-4 lg:border-r lg:border-b-0`}
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Calendar</h1>
|
||||
<Button size="icon-sm" variant="outline" onClick={() => openNewEvent()}>
|
||||
<Plus />
|
||||
<span className="sr-only">New event</span>
|
||||
</Button>
|
||||
</div>
|
||||
{calendarsPanelContent}
|
||||
</aside>
|
||||
|
||||
<section className="fc-skin min-w-0 p-4">
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
initialView={VIEW_MAP[defaultView]}
|
||||
headerToolbar={{
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||
}}
|
||||
buttonText={{
|
||||
today: "Today",
|
||||
month: "Month",
|
||||
week: "Week",
|
||||
day: "Day",
|
||||
}}
|
||||
dayHeaderFormat={{ weekday: "short" }}
|
||||
selectable
|
||||
editable
|
||||
eventResizableFromStart
|
||||
select={handleDateSelect}
|
||||
eventClick={openExistingEvent}
|
||||
eventDrop={moveEvent}
|
||||
eventResize={moveEvent}
|
||||
events={visibleEvents.map((event) => {
|
||||
const color =
|
||||
calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ??
|
||||
DEFAULT_COLOR;
|
||||
return {
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
start: event.startAt,
|
||||
end: event.endAt,
|
||||
allDay: event.allDay,
|
||||
backgroundColor: withAlpha(color, 0.14),
|
||||
borderColor: color,
|
||||
textColor: "var(--ink-2)",
|
||||
extendedProps: { calendarId: event.calendarId, color },
|
||||
};
|
||||
})}
|
||||
eventClassNames={(arg) => {
|
||||
const id = String(arg.event.extendedProps["calendarId"] ?? "");
|
||||
return id ? [`fc-cal-${id.slice(0, 8)}`] : [];
|
||||
}}
|
||||
height="auto"
|
||||
/>
|
||||
{/* Calendar section */}
|
||||
<section className="fc-skin flex min-w-0 flex-col">
|
||||
{/* Mobile toolbar: view switcher + calendars button + new event */}
|
||||
{isMobile && (
|
||||
<div
|
||||
className="flex items-center gap-2 border-b px-3 py-2"
|
||||
style={{ borderColor: "var(--hair)" }}
|
||||
>
|
||||
<div className="seg flex-1">
|
||||
{(["day", "week", "agenda"] as MobileView[]).map((v) => (
|
||||
<button
|
||||
key={v}
|
||||
type="button"
|
||||
aria-selected={mobileView === v}
|
||||
onClick={() => setMobileView(v)}
|
||||
>
|
||||
{v.charAt(0).toUpperCase() + v.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => setShowCalendarsPanel(true)}
|
||||
>
|
||||
<Eye size={14} />
|
||||
Cals
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={() => openNewEvent()}>
|
||||
<Plus size={14} />
|
||||
New
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 p-4">
|
||||
<FullCalendar
|
||||
key={isMobile ? `mobile-${mobileView}` : `desktop-${defaultView}`}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
|
||||
initialView={isMobile ? MOBILE_VIEW_MAP[mobileView] : VIEW_MAP[defaultView]}
|
||||
headerToolbar={
|
||||
isMobile
|
||||
? { left: "prev,next", center: "title", right: "today" }
|
||||
: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||
}
|
||||
}
|
||||
buttonText={{ today: "Today", month: "Month", week: "Week", day: "Day", list: "List" }}
|
||||
dayHeaderFormat={{ weekday: "short" }}
|
||||
selectable={!isMobile}
|
||||
editable={!isMobile}
|
||||
eventResizableFromStart={!isMobile}
|
||||
select={handleDateSelect}
|
||||
eventClick={openExistingEvent}
|
||||
eventDrop={moveEvent}
|
||||
eventResize={moveEvent}
|
||||
events={fcEvents}
|
||||
eventClassNames={(arg) => {
|
||||
const id = String(arg.event.extendedProps["calendarId"] ?? "");
|
||||
return id ? [`fc-cal-${id.slice(0, 8)}`] : [];
|
||||
}}
|
||||
height="auto"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mobile: calendars bottom sheet */}
|
||||
{isMobile && showCalendarsPanel && (
|
||||
<div
|
||||
className="fixed inset-0 z-[45] bg-black/40"
|
||||
onClick={() => setShowCalendarsPanel(false)}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-x-0 overflow-auto rounded-t-[var(--r-xl)]"
|
||||
style={{
|
||||
bottom: "var(--cal-nav-h)",
|
||||
maxHeight: "72dvh",
|
||||
background: "var(--card)",
|
||||
paddingBottom: "env(safe-area-inset-bottom)",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between border-b p-4"
|
||||
style={{ borderColor: "var(--hair)" }}
|
||||
>
|
||||
<h3 className="serif text-[16px] font-medium">Calendars</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-icon"
|
||||
aria-label="Close calendars panel"
|
||||
onClick={() => setShowCalendarsPanel(false)}
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4">{calendarsPanelContent}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Event form — centered modal on desktop, bottom sheet on mobile */}
|
||||
{selectedEvent && (
|
||||
<div className="fixed inset-0 z-50 grid place-items-center bg-black/20 p-4">
|
||||
<div className="w-full max-w-lg rounded-lg bg-popover p-4 text-popover-foreground shadow-lg">
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex bg-black/20"
|
||||
style={
|
||||
isMobile
|
||||
? { alignItems: "flex-end" }
|
||||
: { alignItems: "center", justifyContent: "center" }
|
||||
}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) setSelectedEvent(null);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="overflow-auto bg-popover text-popover-foreground shadow-lg"
|
||||
style={{
|
||||
borderRadius: isMobile ? "var(--r-xl) var(--r-xl) 0 0" : "var(--r-lg)",
|
||||
width: isMobile ? "100%" : undefined,
|
||||
maxWidth: isMobile ? undefined : "512px",
|
||||
maxHeight: "90dvh",
|
||||
padding: "1rem",
|
||||
paddingBottom: isMobile ? "calc(1rem + env(safe-area-inset-bottom))" : "1rem",
|
||||
}}
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">
|
||||
{selectedEvent.id ? "Edit event" : "New event"}
|
||||
</h2>
|
||||
<Button size="icon-sm" variant="ghost" onClick={() => setSelectedEvent(null)}>
|
||||
<span aria-hidden>×</span>
|
||||
<X size={16} />
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="event-title">Title</Label>
|
||||
<Input
|
||||
id="event-title"
|
||||
value={selectedEvent.title}
|
||||
onChange={(event) =>
|
||||
setSelectedEvent({ ...selectedEvent, title: event.target.value })
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="event-calendar">Calendar</Label>
|
||||
<Select
|
||||
value={selectedEvent.calendarId}
|
||||
onValueChange={(value) =>
|
||||
setSelectedEvent({ ...selectedEvent, calendarId: value ?? "" })
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="event-calendar">
|
||||
<SelectValue>
|
||||
{calendarRows.find((c) => c.id === selectedEvent.calendarId)?.name ??
|
||||
"Select a calendar"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{calendarRows.map((calendar) => (
|
||||
<SelectItem key={calendar.id} value={calendar.id}>
|
||||
{calendar.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-start">Start</Label>
|
||||
<Input
|
||||
id="event-start"
|
||||
type="datetime-local"
|
||||
value={selectedEvent.startAt}
|
||||
onChange={(event) =>
|
||||
setSelectedEvent({ ...selectedEvent, startAt: event.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="event-end">End</Label>
|
||||
<Input
|
||||
id="event-end"
|
||||
type="datetime-local"
|
||||
value={selectedEvent.endAt}
|
||||
onChange={(event) =>
|
||||
setSelectedEvent({ ...selectedEvent, endAt: event.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Label htmlFor="event-location">Location</Label>
|
||||
<Input
|
||||
id="event-location"
|
||||
value={selectedEvent.location}
|
||||
onChange={(event) =>
|
||||
setSelectedEvent({ ...selectedEvent, location: event.target.value })
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="event-notes">Notes</Label>
|
||||
<textarea
|
||||
id="event-notes"
|
||||
className="min-h-20 rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
value={selectedEvent.notes}
|
||||
onChange={(event) =>
|
||||
setSelectedEvent({ ...selectedEvent, notes: event.target.value })
|
||||
}
|
||||
/>
|
||||
{!selectedEvent.id && (
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 cursor-pointer"
|
||||
checked={selectedEvent.remindMinutesBefore !== null}
|
||||
onChange={(e) =>
|
||||
setSelectedEvent({
|
||||
...selectedEvent,
|
||||
remindMinutesBefore: e.target.checked ? 30 : null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Remind me 30 min before
|
||||
</label>
|
||||
)}
|
||||
<div className="flex items-center justify-between gap-2 pt-2">
|
||||
<div className="flex gap-2">
|
||||
{selectedEvent.id && (
|
||||
<Button variant="destructive" onClick={removeSelectedEvent}>
|
||||
Delete event
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{selectedEvent.id && (
|
||||
<ShareButton entityType="calendar.event" entityId={selectedEvent.id} />
|
||||
)}
|
||||
<Button onClick={saveSelectedEvent} disabled={!selectedEvent.title || isPending}>
|
||||
Save event
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{eventFormContent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2,16 +2,32 @@
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { deleteContainer } from "../server/actions";
|
||||
import { ShareButton } from "@/components/share-button";
|
||||
import { ShareLinkList } from "@/components/share-link-list";
|
||||
import type { EntityShareLink } from "@/modules/_core/share";
|
||||
import {
|
||||
addContainerImage,
|
||||
deleteContainer,
|
||||
removeContainerImage,
|
||||
setContainerPrimaryImage,
|
||||
} from "../server/actions";
|
||||
import { ContainerForm } from "./container-form";
|
||||
import type { ContainerDetailDto } from "../server/queries";
|
||||
|
||||
type Props = { container: ContainerDetailDto };
|
||||
type Tab = "info" | "gallery";
|
||||
|
||||
export function ContainerDetail({ container }: Props) {
|
||||
type Props = {
|
||||
container: ContainerDetailDto;
|
||||
shareLinks: EntityShareLink[];
|
||||
};
|
||||
|
||||
export function ContainerDetail({ container, shareLinks }: Props) {
|
||||
const [tab, setTab] = useState<Tab>("info");
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [galleryError, setGalleryError] = useState<string | null>(null);
|
||||
const [uploadingImage, setUploadingImage] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
function handleDelete() {
|
||||
@@ -22,6 +38,41 @@ export function ContainerDetail({ container }: Props) {
|
||||
});
|
||||
}
|
||||
|
||||
async function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setGalleryError(null);
|
||||
setUploadingImage(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const res = await fetch("/api/uploads", { method: "POST", body: fd });
|
||||
if (!res.ok) throw new Error("Upload failed");
|
||||
const data = (await res.json()) as { url: string };
|
||||
await addContainerImage({ id: container.id, url: data.url });
|
||||
router.refresh();
|
||||
} catch {
|
||||
setGalleryError("Image upload failed.");
|
||||
} finally {
|
||||
setUploadingImage(false);
|
||||
e.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function handleRemoveImage(url: string) {
|
||||
startTransition(async () => {
|
||||
await removeContainerImage({ id: container.id, url });
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
function handleSetPrimary(url: string) {
|
||||
startTransition(async () => {
|
||||
await setContainerPrimaryImage({ id: container.id, url });
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{container.coverImageUrl && (
|
||||
@@ -38,28 +89,36 @@ export function ContainerDetail({ container }: Props) {
|
||||
<p className="text-sm text-[var(--ink-mute)] capitalize mt-1">{container.type}</p>
|
||||
{container.locationNotes && <p className="text-sm mt-2">{container.locationNotes}</p>}
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setEditing(true)}>
|
||||
Edit
|
||||
</button>
|
||||
{confirming ? (
|
||||
<div className="flex gap-1">
|
||||
<button className="btn btn-danger btn-sm" onClick={handleDelete} disabled={isPending}>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => setConfirming(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
|
||||
Delete
|
||||
<div className="flex flex-col items-end gap-2 shrink-0">
|
||||
<div className="flex gap-2">
|
||||
<ShareButton entityType="garden.container" entityId={container.id} />
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setEditing((v) => !v)}>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{confirming ? (
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={handleDelete}
|
||||
disabled={isPending}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => setConfirming(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<ShareLinkList links={shareLinks} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,51 +136,131 @@ export function ContainerDetail({ container }: Props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold">Plants ({container.plantCount})</h2>
|
||||
<a
|
||||
href={`/garden/plants/new?containerId=${container.id}`}
|
||||
className="btn btn-ghost btn-sm"
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-6 border-b border-[var(--ink-faint)]">
|
||||
{(["info", "gallery"] as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTab(t)}
|
||||
className={`pb-2 text-sm font-medium capitalize transition-colors ${
|
||||
tab === t
|
||||
? "border-b-2 border-[var(--ink)] text-[var(--ink)]"
|
||||
: "text-[var(--ink-mute)] hover:text-[var(--ink)]"
|
||||
}`}
|
||||
>
|
||||
+ Add plant
|
||||
</a>
|
||||
</div>
|
||||
{container.plants.length === 0 ? (
|
||||
<p className="text-sm text-[var(--ink-mute)]">No plants in this container yet.</p>
|
||||
) : (
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{container.plants.map((p) => (
|
||||
<a
|
||||
key={p.id}
|
||||
href={`/garden/plants/${p.id}`}
|
||||
className="card p-3 hover:bg-[var(--surface-2)] transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{p.primaryImageUrl && (
|
||||
<img
|
||||
src={p.primaryImageUrl}
|
||||
alt=""
|
||||
className="w-10 h-10 rounded-full object-cover shrink-0"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-sm">{p.name}</p>
|
||||
{p.scientificName && (
|
||||
<p className="text-xs text-[var(--ink-mute)] italic">{p.scientificName}</p>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`ml-auto text-xs badge ${p.healthStatus === "healthy" ? "badge-success" : "badge-warning"}`}
|
||||
>
|
||||
{p.healthStatus}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
{tab === "info" && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold">Plants ({container.plantCount})</h2>
|
||||
<a
|
||||
href={`/garden/plants/new?containerId=${container.id}`}
|
||||
className="btn btn-ghost btn-sm"
|
||||
>
|
||||
+ Add plant
|
||||
</a>
|
||||
</div>
|
||||
{container.plants.length === 0 ? (
|
||||
<p className="text-sm text-[var(--ink-mute)]">No plants in this container yet.</p>
|
||||
) : (
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{container.plants.map((p) => (
|
||||
<a
|
||||
key={p.id}
|
||||
href={`/garden/plants/${p.id}`}
|
||||
className="card p-3 hover:bg-[var(--surface-2)] transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{p.primaryImageUrl && (
|
||||
<img
|
||||
src={p.primaryImageUrl}
|
||||
alt=""
|
||||
className="w-10 h-10 rounded-full object-cover shrink-0"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-sm">{p.name}</p>
|
||||
{p.scientificName && (
|
||||
<p className="text-xs text-[var(--ink-mute)] italic">{p.scientificName}</p>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`ml-auto text-xs badge ${p.healthStatus === "healthy" ? "badge-success" : "badge-warning"}`}
|
||||
>
|
||||
{p.healthStatus}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gallery */}
|
||||
{tab === "gallery" && (
|
||||
<div className="flex flex-col gap-4">
|
||||
{container.images.length === 0 ? (
|
||||
<p className="text-sm text-[var(--ink-mute)]">No photos yet.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{container.images.map((url) => (
|
||||
<div key={url} className="relative group">
|
||||
<img src={url} alt="" className="w-full aspect-square object-cover rounded-lg" />
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 rounded-lg flex items-center justify-center gap-3 transition-opacity">
|
||||
<button
|
||||
onClick={() => handleSetPrimary(url)}
|
||||
disabled={isPending}
|
||||
title="Set as cover"
|
||||
className={`text-lg leading-none ${url === container.coverImageUrl ? "text-yellow-400" : "text-white"}`}
|
||||
>
|
||||
★
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRemoveImage(url)}
|
||||
disabled={isPending}
|
||||
title="Remove"
|
||||
className="text-white text-lg leading-none"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
{url === container.coverImageUrl && (
|
||||
<span className="absolute top-1 left-1 text-xs px-1 bg-black/60 text-yellow-300 rounded">
|
||||
Cover
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{galleryError && <p className="text-sm text-red-500">{galleryError}</p>}
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{container.images.length < 10 && (
|
||||
<label className="btn btn-ghost btn-sm cursor-pointer">
|
||||
{uploadingImage ? "Uploading…" : "Upload photo"}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
disabled={uploadingImage}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
<span className="text-xs text-[var(--ink-mute)]">
|
||||
{container.images.length}/10 photos
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,9 @@ import { useRouter } from "next/navigation";
|
||||
import { deletePlant, addPlantImage, removePlantImage, setPrimaryImage } from "../server/actions";
|
||||
import type { CalendarDto } from "../server/calendar-bridge";
|
||||
import type { CareLogDto, CareScheduleDto, PlantDetailDto } from "../server/queries";
|
||||
import { ShareButton } from "@/components/share-button";
|
||||
import { ShareLinkList } from "@/components/share-link-list";
|
||||
import type { EntityShareLink } from "@/modules/_core/share";
|
||||
import { CareHistoryList } from "./care-history-list";
|
||||
import { CareLogForm } from "./care-log-form";
|
||||
import { CareScheduleEditor } from "./care-schedule-editor";
|
||||
@@ -17,6 +20,7 @@ type Props = {
|
||||
careLogs: CareLogDto[];
|
||||
careSchedules: CareScheduleDto[];
|
||||
calendars: CalendarDto[];
|
||||
shareLinks: EntityShareLink[];
|
||||
};
|
||||
|
||||
function InfoRow({
|
||||
@@ -43,7 +47,7 @@ function healthBadgeClass(status: string): string {
|
||||
return "badge-warning";
|
||||
}
|
||||
|
||||
export function PlantDetail({ plant, careLogs, careSchedules, calendars }: Props) {
|
||||
export function PlantDetail({ plant, careLogs, careSchedules, calendars, shareLinks }: Props) {
|
||||
const [tab, setTab] = useState<Tab>("info");
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
@@ -122,28 +126,36 @@ export function PlantDetail({ plant, careLogs, careSchedules, calendars }: Props
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Link href={`/garden/plants/${plant.id}/edit`} className="btn btn-ghost btn-sm">
|
||||
Edit
|
||||
</Link>
|
||||
{confirming ? (
|
||||
<div className="flex gap-1">
|
||||
<button className="btn btn-danger btn-sm" onClick={handleDelete} disabled={isPending}>
|
||||
Confirm
|
||||
<div className="flex flex-col items-end gap-2 shrink-0">
|
||||
<div className="flex gap-2">
|
||||
<ShareButton entityType="garden.plant" entityId={plant.id} />
|
||||
<Link href={`/garden/plants/${plant.id}/edit`} className="btn btn-ghost btn-sm">
|
||||
Edit
|
||||
</Link>
|
||||
{confirming ? (
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={handleDelete}
|
||||
disabled={isPending}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => setConfirming(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => setConfirming(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setConfirming(true)}>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
<ShareLinkList links={shareLinks} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -114,9 +114,28 @@ const gardenManifest: ModuleManifest = {
|
||||
const d = data as ContainerShareData;
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{d.coverImageUrl && (
|
||||
<img
|
||||
src={d.coverImageUrl}
|
||||
alt=""
|
||||
className="w-full max-h-48 object-cover rounded-lg"
|
||||
/>
|
||||
)}
|
||||
<h2 className="text-xl font-bold">{d.name}</h2>
|
||||
<p className="text-sm capitalize text-[var(--ink-mute)]">{d.type}</p>
|
||||
{d.locationNotes && <p className="text-sm">{d.locationNotes}</p>}
|
||||
{d.images.length > 1 && (
|
||||
<div className="grid grid-cols-3 gap-2 mt-1">
|
||||
{d.images.slice(1).map((url) => (
|
||||
<img
|
||||
key={url}
|
||||
src={url}
|
||||
alt=""
|
||||
className="w-full aspect-square object-cover rounded"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{d.plants.length > 0 && (
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-1">Plants</p>
|
||||
|
||||
@@ -23,6 +23,7 @@ export const gardenContainers = pgTable(
|
||||
type: text("type").notNull().default("other"),
|
||||
locationNotes: text("location_notes"),
|
||||
coverImageUrl: text("cover_image_url"),
|
||||
images: jsonb("images").notNull().default([]).$type<string[]>(),
|
||||
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
|
||||
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
|
||||
},
|
||||
|
||||
@@ -93,6 +93,80 @@ export async function deleteContainer(input: { id: string }) {
|
||||
revalidatePath("/garden");
|
||||
}
|
||||
|
||||
export async function addContainerImage(input: { id: string; url: string }) {
|
||||
const parsed = z.object({ id: z.string().uuid(), url: z.string().min(1) }).parse(input);
|
||||
const { household } = await getCurrentSession();
|
||||
await assertCanAccessContainer(parsed.id, household.id);
|
||||
|
||||
const [row] = await db
|
||||
.select({ images: gardenContainers.images, coverImageUrl: gardenContainers.coverImageUrl })
|
||||
.from(gardenContainers)
|
||||
.where(eq(gardenContainers.id, parsed.id))
|
||||
.limit(1);
|
||||
|
||||
if (!row) throw new Error("Container not found");
|
||||
if (row.images.length >= 10) throw new Error("Maximum 10 images allowed");
|
||||
|
||||
const newImages = [...row.images, parsed.url];
|
||||
await db
|
||||
.update(gardenContainers)
|
||||
.set({
|
||||
images: newImages,
|
||||
coverImageUrl: row.images.length === 0 ? parsed.url : row.coverImageUrl,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(gardenContainers.id, parsed.id));
|
||||
|
||||
revalidatePath(`/garden/containers/${parsed.id}`);
|
||||
}
|
||||
|
||||
export async function removeContainerImage(input: { id: string; url: string }) {
|
||||
const parsed = z.object({ id: z.string().uuid(), url: z.string() }).parse(input);
|
||||
const { household } = await getCurrentSession();
|
||||
await assertCanAccessContainer(parsed.id, household.id);
|
||||
|
||||
const [row] = await db
|
||||
.select({ images: gardenContainers.images, coverImageUrl: gardenContainers.coverImageUrl })
|
||||
.from(gardenContainers)
|
||||
.where(eq(gardenContainers.id, parsed.id))
|
||||
.limit(1);
|
||||
|
||||
if (!row) throw new Error("Container not found");
|
||||
|
||||
const newImages = row.images.filter((u) => u !== parsed.url);
|
||||
const wasPrimary = row.coverImageUrl === parsed.url;
|
||||
const newCover = wasPrimary ? (newImages[0] ?? null) : row.coverImageUrl;
|
||||
|
||||
await db
|
||||
.update(gardenContainers)
|
||||
.set({ images: newImages, coverImageUrl: newCover, updatedAt: new Date() })
|
||||
.where(eq(gardenContainers.id, parsed.id));
|
||||
|
||||
revalidatePath(`/garden/containers/${parsed.id}`);
|
||||
}
|
||||
|
||||
export async function setContainerPrimaryImage(input: { id: string; url: string }) {
|
||||
const parsed = z.object({ id: z.string().uuid(), url: z.string() }).parse(input);
|
||||
const { household } = await getCurrentSession();
|
||||
await assertCanAccessContainer(parsed.id, household.id);
|
||||
|
||||
const [row] = await db
|
||||
.select({ images: gardenContainers.images })
|
||||
.from(gardenContainers)
|
||||
.where(eq(gardenContainers.id, parsed.id))
|
||||
.limit(1);
|
||||
|
||||
if (!row) throw new Error("Container not found");
|
||||
if (!row.images.includes(parsed.url)) throw new Error("Image not in container gallery");
|
||||
|
||||
await db
|
||||
.update(gardenContainers)
|
||||
.set({ coverImageUrl: parsed.url, updatedAt: new Date() })
|
||||
.where(eq(gardenContainers.id, parsed.id));
|
||||
|
||||
revalidatePath(`/garden/containers/${parsed.id}`);
|
||||
}
|
||||
|
||||
async function assertCanAccessContainer(id: string, householdId: string) {
|
||||
const [row] = await db
|
||||
.select({ id: gardenContainers.id })
|
||||
@@ -118,8 +192,8 @@ const plantInput = z.object({
|
||||
fertilizingNotes: z.string().trim().max(2000).nullable().optional(),
|
||||
notes: z.string().trim().max(2000).nullable().optional(),
|
||||
acquisitionDate: z.string().nullable().optional(),
|
||||
images: z.array(z.string().url()).max(10).default([]),
|
||||
primaryImageUrl: z.string().url().nullable().optional(),
|
||||
images: z.array(z.string().min(1)).max(10).default([]),
|
||||
primaryImageUrl: z.string().min(1).nullable().optional(),
|
||||
});
|
||||
|
||||
export async function createPlant(input: z.input<typeof plantInput>) {
|
||||
@@ -230,7 +304,7 @@ export async function deletePlant(input: { id: string }) {
|
||||
}
|
||||
|
||||
export async function addPlantImage(input: { id: string; url: string }) {
|
||||
const parsed = z.object({ id: z.string().uuid(), url: z.string().url() }).parse(input);
|
||||
const parsed = z.object({ id: z.string().uuid(), url: z.string().min(1) }).parse(input);
|
||||
const { household } = await getCurrentSession();
|
||||
await assertCanAccessPlant(parsed.id, household.id);
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ export type ContainerDto = {
|
||||
type: string;
|
||||
locationNotes: string | null;
|
||||
coverImageUrl: string | null;
|
||||
images: string[];
|
||||
plantCount: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
@@ -39,6 +40,7 @@ export async function listContainers(): Promise<ContainerDto[]> {
|
||||
type: gardenContainers.type,
|
||||
locationNotes: gardenContainers.locationNotes,
|
||||
coverImageUrl: gardenContainers.coverImageUrl,
|
||||
images: gardenContainers.images,
|
||||
createdAt: gardenContainers.createdAt,
|
||||
updatedAt: gardenContainers.updatedAt,
|
||||
plantCount: sql<number>`count(${gardenPlants.id})::int`,
|
||||
@@ -51,6 +53,7 @@ export async function listContainers(): Promise<ContainerDto[]> {
|
||||
|
||||
return rows.map((r) => ({
|
||||
...r,
|
||||
images: r.images ?? [],
|
||||
plantCount: r.plantCount ?? 0,
|
||||
createdAt: r.createdAt.toISOString(),
|
||||
updatedAt: r.updatedAt.toISOString(),
|
||||
@@ -68,6 +71,7 @@ export async function getContainer(id: string): Promise<ContainerDetailDto | nul
|
||||
type: gardenContainers.type,
|
||||
locationNotes: gardenContainers.locationNotes,
|
||||
coverImageUrl: gardenContainers.coverImageUrl,
|
||||
images: gardenContainers.images,
|
||||
createdAt: gardenContainers.createdAt,
|
||||
updatedAt: gardenContainers.updatedAt,
|
||||
plantCount: sql<number>`(select count(*)::int from garden_plants where container_id = ${gardenContainers.id})`,
|
||||
@@ -98,6 +102,7 @@ export async function getContainer(id: string): Promise<ContainerDetailDto | nul
|
||||
type: container.type,
|
||||
locationNotes: container.locationNotes,
|
||||
coverImageUrl: container.coverImageUrl,
|
||||
images: container.images ?? [],
|
||||
plantCount: container.plantCount ?? 0,
|
||||
createdAt: container.createdAt.toISOString(),
|
||||
updatedAt: container.updatedAt.toISOString(),
|
||||
|
||||
@@ -8,6 +8,7 @@ export type ContainerShareData = {
|
||||
type: string;
|
||||
locationNotes: string | null;
|
||||
coverImageUrl: string | null;
|
||||
images: string[];
|
||||
plants: { id: string; name: string; scientificName: string | null }[];
|
||||
};
|
||||
|
||||
@@ -74,6 +75,7 @@ export async function loadContainerForShare(id: string): Promise<ContainerShareD
|
||||
type: container.type,
|
||||
locationNotes: container.locationNotes,
|
||||
coverImageUrl: container.coverImageUrl,
|
||||
images: container.images ?? [],
|
||||
plants,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -4,9 +4,11 @@ import calendarManifest from "./calendar/manifest";
|
||||
import listsManifest from "./lists/manifest";
|
||||
import notesManifest from "./notes/manifest";
|
||||
import gardenManifest from "./garden/manifest";
|
||||
import bangsManifest from "./bangs/manifest";
|
||||
|
||||
registerModule(coreManifest);
|
||||
registerModule(calendarManifest);
|
||||
registerModule(listsManifest);
|
||||
registerModule(notesManifest);
|
||||
registerModule(gardenManifest);
|
||||
registerModule(bangsManifest);
|
||||
|
||||
@@ -194,57 +194,142 @@ function ListItemRow({
|
||||
onCommit: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const swipeStart = useRef<number | null>(null);
|
||||
const swipeOrigin = useRef<{ x: number; y: number } | null>(null);
|
||||
const isScrolling = useRef(false);
|
||||
const [swipeX, setSwipeX] = useState(0);
|
||||
|
||||
const THRESHOLD = 80; // px to commit the swipe action
|
||||
const MAX_SWIPE = 100; // px maximum visual displacement
|
||||
|
||||
function handlePointerDown(e: React.PointerEvent<HTMLDivElement>) {
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
swipeOrigin.current = { x: e.clientX, y: e.clientY };
|
||||
isScrolling.current = false;
|
||||
setSwipeX(0);
|
||||
}
|
||||
|
||||
function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {
|
||||
if (!swipeOrigin.current) return;
|
||||
const dx = e.clientX - swipeOrigin.current.x;
|
||||
const dy = Math.abs(e.clientY - swipeOrigin.current.y);
|
||||
// If the gesture is primarily vertical, treat as scroll and abort swipe.
|
||||
if (!isScrolling.current && dy > Math.abs(dx) && dy > 8) {
|
||||
isScrolling.current = true;
|
||||
setSwipeX(0);
|
||||
return;
|
||||
}
|
||||
if (isScrolling.current) return;
|
||||
setSwipeX(Math.max(-MAX_SWIPE, Math.min(MAX_SWIPE, dx)));
|
||||
}
|
||||
|
||||
function handlePointerUp(e: React.PointerEvent<HTMLDivElement>) {
|
||||
if (swipeOrigin.current && !isScrolling.current) {
|
||||
const dx = e.clientX - swipeOrigin.current.x;
|
||||
if (dx > THRESHOLD) onToggle(!item.done); // right → complete / uncomplete
|
||||
if (dx < -THRESHOLD) onRemove(); // left → delete
|
||||
}
|
||||
swipeOrigin.current = null;
|
||||
setSwipeX(0);
|
||||
}
|
||||
|
||||
function handlePointerCancel() {
|
||||
swipeOrigin.current = null;
|
||||
setSwipeX(0);
|
||||
}
|
||||
|
||||
// Background tint that deepens as the swipe approaches the threshold.
|
||||
const swipeProgress = Math.abs(swipeX) / MAX_SWIPE;
|
||||
const swipeBg =
|
||||
swipeX > 16
|
||||
? `color-mix(in oklab, var(--ok) ${swipeProgress * 55}%, var(--card))`
|
||||
: swipeX < -16
|
||||
? `color-mix(in oklab, var(--bad) ${swipeProgress * 55}%, var(--card))`
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`list-row ${item.done ? "checked" : ""} group/row`}
|
||||
onPointerDown={(event) => {
|
||||
swipeStart.current = event.clientX;
|
||||
}}
|
||||
onPointerUp={(event) => {
|
||||
const start = swipeStart.current;
|
||||
if (start !== null && event.clientX - start < -60) onRemove();
|
||||
swipeStart.current = null;
|
||||
}}
|
||||
className="relative overflow-hidden border-b-[0.5px] last:border-b-0 group/row"
|
||||
style={{ borderColor: "var(--hair)", background: swipeBg, touchAction: "pan-y" }}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerCancel={handlePointerCancel}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Complete ${item.text}`}
|
||||
aria-pressed={item.done}
|
||||
className={`checkbox ${item.done ? "on" : ""}`}
|
||||
onClick={() => onToggle(!item.done)}
|
||||
{/* Swipe affordance icons revealed behind the sliding content */}
|
||||
<div
|
||||
className="absolute inset-y-0 left-3 flex items-center"
|
||||
aria-hidden
|
||||
style={{ opacity: Math.max(0, swipeX - 16) / (MAX_SWIPE - 16), color: "var(--ok)" }}
|
||||
>
|
||||
{item.done && (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
strokeWidth="2.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12l5 5L20 7" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<Input
|
||||
aria-label={`${item.text} text`}
|
||||
className="!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 row-text flex-1 px-0 h-7 text-[13.5px]"
|
||||
value={item.text}
|
||||
onChange={(event) => onEdit(event.target.value)}
|
||||
onBlur={onCommit}
|
||||
/>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
aria-label={`Delete ${item.text}`}
|
||||
onClick={onRemove}
|
||||
className="opacity-0 group-hover/row:opacity-100 transition-opacity"
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12l5 5L20 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="absolute inset-y-0 right-3 flex items-center"
|
||||
aria-hidden
|
||||
style={{ opacity: Math.max(0, -swipeX - 16) / (MAX_SWIPE - 16), color: "var(--bad)" }}
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</Button>
|
||||
<Trash2 size={16} />
|
||||
</div>
|
||||
|
||||
{/* Sliding content row */}
|
||||
<div
|
||||
className={`flex items-center gap-3 px-[14px] py-[10px] hover:bg-[var(--shade)] ${item.done ? "checked" : ""}`}
|
||||
style={{
|
||||
transform: `translateX(${swipeX}px)`,
|
||||
transition: swipeX === 0 ? "transform 0.22s ease-out" : "none",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Complete ${item.text}`}
|
||||
aria-pressed={item.done}
|
||||
className={`checkbox ${item.done ? "on" : ""}`}
|
||||
onClick={() => onToggle(!item.done)}
|
||||
>
|
||||
{item.done && (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
strokeWidth="2.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12l5 5L20 7" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<Input
|
||||
aria-label={`${item.text} text`}
|
||||
className={`!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 row-text flex-1 px-0 h-7 text-[13.5px] ${item.done ? "line-through text-[var(--ink-faint)]" : ""}`}
|
||||
value={item.text}
|
||||
onChange={(event) => onEdit(event.target.value)}
|
||||
onBlur={onCommit}
|
||||
/>
|
||||
{/* Always visible on touch (list-row-delete makes opacity-0 override to 1 on mobile) */}
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
aria-label={`Delete ${item.text}`}
|
||||
onClick={onRemove}
|
||||
className="list-row-delete opacity-0 group-hover/row:opacity-100 transition-opacity"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user