Publish trek-3.1.1.tgz

Removed entry for trek version 3.0.10.

.dockerignore

@@ -1,32 +0,0 @@
-node_modules
-client/node_modules
-server/node_modules
-client/dist
-data
-uploads
-.git
-.github
-**/.env
-**/.env.*
-*.log
-*.md
-!client/**/*.md
-chart/
-docs/
-docker-compose.yml
-unraid-template.xml
-*.sqlite
-*.sqlite-shm
-*.sqlite-wal
-*.db
-*.db-shm
-*.db-wal
-**/coverage
-.DS_Store
-Thumbs.db
-.vscode
-.idea
-sonar-project.properties
-server/tests/
-server/vitest.config.ts
-server/reset-admin.js

.gitattributes

@@ -1,29 +0,0 @@
-# Normalize line endings to LF on commit
-* text=auto eol=lf
-
-# Explicitly enforce LF for source files
-*.ts   text eol=lf
-*.tsx  text eol=lf
-*.js   text eol=lf
-*.jsx  text eol=lf
-*.json text eol=lf
-*.css  text eol=lf
-*.html text eol=lf
-*.md   text eol=lf
-*.yml  text eol=lf
-*.yaml text eol=lf
-*.py   text eol=lf
-*.sh   text eol=lf
-
-# Binary files — no line ending conversion
-*.png  binary
-*.jpg  binary
-*.jpeg binary
-*.gif  binary
-*.ico  binary
-*.woff binary
-*.woff2 binary
-*.ttf  binary
-*.eot  binary
-*.pdf  binary
-*.zip  binary

.github/FUNDING.yml

@@ -1,2 +0,0 @@
-ko_fi: mauriceboe
-buy_me_a_coffee: mauriceboe

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,108 +0,0 @@
-name: Bug Report
-description: Create a report to help us improve TREK
-title: "[BUG] "
-labels: []
-body:
-  - type: checkboxes
-    id: preflight
-    attributes:
-      label: Pre-flight checklist
-      options:
-        - label: I have searched [existing issues](https://github.com/mauriceboe/TREK/issues) and this bug has not been reported yet
-          required: true
-        - label: I am running the latest available version of TREK
-          required: true
-
-  - type: input
-    id: version
-    attributes:
-      label: TREK version
-      description: Found in the Settings → About, or in the Docker image tag
-      placeholder: "e.g. 2.8.0"
-    validations:
-      required: true
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is.
-      placeholder: When I do X, Y happens instead of Z…
-    validations:
-      required: true
-
-  - type: textarea
-    id: steps
-    attributes:
-      label: Steps to reproduce
-      description: Step-by-step instructions to reliably trigger the bug.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '...'
-        3. See error
-    validations:
-      required: true
-
-  - type: textarea
-    id: expected
-    attributes:
-      label: Expected behavior
-      description: What did you expect to happen?
-    validations:
-      required: true
-
-  - type: dropdown
-    id: deployment
-    attributes:
-      label: Deployment method
-      options:
-        - Docker Compose
-        - Docker (standalone)
-        - Kubernetes / Helm
-        - Unraid template
-        - Sources
-        - Other
-    validations:
-      required: true
-
-  - type: input
-    id: os
-    attributes:
-      label: Host OS
-      placeholder: "e.g. Ubuntu 24.04, Unraid 6.12, Synology DSM 7"
-
-  - type: dropdown
-    id: user_os
-    attributes:
-      label: Accessing TREK from
-      options:
-        - Desktop browser
-        - Mobile browser
-        - Mobile app (PWA)
-    validations:
-      required: true
-
-  - type: input
-    id: browser
-    attributes:
-      label: Browser (if applicable)
-      placeholder: "e.g. Chrome 124, Firefox 125, Safari 17"
-
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant logs or error output
-      description: Paste any relevant server or browser console output here.
-      render: shell
-
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: Screenshots
-      description: Drag and drop screenshots here if applicable.
-
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Anything else that might help us understand the issue.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,11 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Documentation
-    url: https://github.com/mauriceboe/TREK/wiki
-    about: Check the docs before opening an issue
-  - name: Feature Request
-    url: https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests
-    about: Suggest a new feature or improvement in Discussions
-  - name: Questions & Help
-    url: https://github.com/mauriceboe/TREK/discussions
-    about: For questions and general help, use Discussions instead

.github/workflows/close-untitled-issues.yml

@@ -1,67 +0,0 @@
-name: Close untitled issues
-
-on:
-  issues:
-    types: [opened]
-
-permissions:
-  issues: write
-
-jobs:
-  check-title:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    steps:
-      - name: Close if title is empty or generic
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const title = context.payload.issue.title.trim();
-            const badTitles = [
-              "[bug]",
-              "bug report",
-              "bug",
-              "issue",
-            ];
-            
-            const featureRequestTitles = [
-              "feature request",
-              "[feature]",
-              "[feature request]",
-              "[enhancement]"
-            ]
-
-            const titleLower = title.toLowerCase();
-
-            if (badTitles.includes(titleLower)) {
-              await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                body: "This issue was closed because no title was provided. Please re-open with a descriptive title that summarizes the problem."
-              });
-
-              await github.rest.issues.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                state: "closed",
-                state_reason: "not_planned"
-              });
-            } else if (featureRequestTitles.some(t => titleLower.startsWith(t))) {
-              await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                body: "Feature requests should be made in the [Discussions](https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests) — not as issues. This issue has been closed."
-              });
-
-              await github.rest.issues.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                state: "closed",
-                state_reason: "not_planned"
-              });
-            }

.github/workflows/docker.yml

@@ -1,153 +0,0 @@
-name: Build & Push Docker Image
-
-on:
-  push:
-    branches: [main]
-    paths-ignore:
-      - 'docs/**'
-      - '**/*.md'
-  workflow_dispatch:
-
-permissions:
-  contents: write
-
-jobs:
-  version-bump:
-    runs-on: ubuntu-latest
-    outputs:
-      version: ${{ steps.bump.outputs.VERSION }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Determine bump type and update version
-        id: bump
-        run: |
-          # Check if this push is a merge commit from dev branch
-          COMMIT_MSG=$(git log -1 --pretty=%s)
-          PARENT_COUNT=$(git log -1 --pretty=%p | wc -w)
-
-          if echo "$COMMIT_MSG" | grep -qiE "^Merge (pull request|branch).*dev"; then
-            BUMP="minor"
-          elif [ "$PARENT_COUNT" -gt 1 ] && git log -1 --pretty=%P | xargs -n1 git branch -r --contains 2>/dev/null | grep -q "origin/dev"; then
-            BUMP="minor"
-          else
-            BUMP="patch"
-          fi
-
-          echo "Bump type: $BUMP"
-
-          # Read current version
-          CURRENT=$(node -p "require('./server/package.json').version")
-          IFS='.' read -r MAJOR MINOR PATCH <<< "$CURRENT"
-
-          if [ "$BUMP" = "minor" ]; then
-            MINOR=$((MINOR + 1))
-            PATCH=0
-          else
-            PATCH=$((PATCH + 1))
-          fi
-
-          NEW_VERSION="${MAJOR}.${MINOR}.${PATCH}"
-          echo "VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
-          echo "$CURRENT → $NEW_VERSION ($BUMP)"
-
-          # Update both package.json files
-          cd server && npm version "$NEW_VERSION" --no-git-tag-version && cd ..
-          cd client && npm version "$NEW_VERSION" --no-git-tag-version && cd ..
-
-          # Commit and tag
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add server/package.json server/package-lock.json client/package.json client/package-lock.json
-          git commit -m "chore: bump version to $NEW_VERSION [skip ci]"
-          git tag "v$NEW_VERSION"
-          git push origin main --follow-tags
-
-  build:
-    runs-on: ${{ matrix.runner }}
-    needs: version-bump
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-latest
-          - platform: linux/arm64
-            runner: ubuntu-24.04-arm
-    steps:
-      - name: Prepare platform tag-safe name
-        run: echo "PLATFORM_PAIR=$(echo ${{ matrix.platform }} | sed 's|/|-|g')" >> $GITHUB_ENV
-
-      - uses: actions/checkout@v4
-        with:
-          ref: main
-
-      - uses: docker/setup-buildx-action@v3
-
-      - uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: ${{ matrix.platform }}
-          outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
-          no-cache: true
-
-      - name: Export digest
-        run: |
-          mkdir -p /tmp/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "/tmp/digests/${digest#sha256:}"
-
-      - name: Upload digest artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-${{ env.PLATFORM_PAIR }}
-          path: /tmp/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    runs-on: ubuntu-latest
-    needs: [version-bump, build]
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: main
-
-      - name: Download build digests
-        uses: actions/download-artifact@v4
-        with:
-          path: /tmp/digests
-          pattern: digests-*
-          merge-multiple: true
-
-      - uses: docker/setup-buildx-action@v3
-
-      - uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Create and push multi-arch manifest
-        working-directory: /tmp/digests
-        run: |
-          VERSION=${{ needs.version-bump.outputs.version }}
-          mapfile -t digests < <(printf 'mauriceboe/trek@sha256:%s\n' *)
-          docker buildx imagetools create \
-            -t mauriceboe/trek:latest \
-            -t mauriceboe/trek:$VERSION \
-            -t mauriceboe/nomad:latest \
-            -t mauriceboe/nomad:$VERSION \
-            "${digests[@]}"
-
-      - name: Inspect manifest
-        run: docker buildx imagetools inspect mauriceboe/trek:latest

.github/workflows/test.yml

@@ -1,39 +0,0 @@
-name: Tests
-
-permissions:
-  contents: read
-
-on:
-  pull_request:
-    branches: [main, dev]
-    paths:
-      - 'server/**'
-      - '.github/workflows/test.yml'
-
-jobs:
-  server-tests:
-    name: Server Tests
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: npm
-          cache-dependency-path: server/package-lock.json
-
-      - name: Install dependencies
-        run: cd server && npm ci
-
-      - name: Run tests
-        run: cd server && npm run test:coverage
-
-      - name: Upload coverage
-        if: success()
-        uses: actions/upload-artifact@v6
-        with:
-          name: coverage
-          path: server/coverage/
-          retention-days: 7

.gitignore

@@ -1,61 +0,0 @@
-# Dependencies
-node_modules/
-
-# Build output
-client/dist/
-
-# Generated PWA icons (built from SVG via prebuild)
-client/public/icons/*.png
-
-# Database
-*.db
-*.db-shm
-*.db-wal
-*.sqlite
-*.sqlite-shm
-*.sqlite-wal
-
-# User data
-server/data/
-server/uploads/
-
-# Environment
-.env
-.env.*
-!.env.example
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# IDE
-.vscode/
-.idea/
-.claude/
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-*.pid
-*.seed
-*.pid.lock
-
-# Coverage
-coverage
-*.lcov
-.nyc_output
-
-# Cache
-.npm
-.eslintcache
-.cache
-*.tsbuildinfo
-*.tgz
-
-.scannerwork
-test-data

CONTRIBUTING.md

@@ -1,57 +0,0 @@
-# Contributing to TREK
-
-Thanks for your interest in contributing! Please read these guidelines before opening a pull request.
-
-## Ground Rules
-
-1. **Ask in Discord first** — Before writing any code, pitch your idea in the `#github-pr` channel on our [Discord server](https://discord.gg/P7TUxHJs). We'll let you know if the PR is wanted and give direction. PRs that show up without prior discussion will be closed
-2. **One change per PR** — Keep it focused. Don't bundle unrelated fixes or refactors
-3. **No breaking changes** — Backwards compatibility is non-negotiable
-4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`
-5. **Match the existing style** — No reformatting, no linter config changes, no "while I'm here" cleanups
-
-## Pull Requests
-
-### Your PR should include:
-
-- **Summary** — What does this change and why? (1-3 bullet points)
-- **Test plan** — How did you verify it works?
-- **Linked issue** — Reference the issue (e.g. `Fixes #123`)
-
-### Your PR will be closed if it:
-
-- Wasn't discussed and approved in `#github-pr` on Discord first
-- Introduces breaking changes
-- Adds unnecessary complexity or features beyond scope
-- Reformats or refactors unrelated code
-- Adds dependencies without clear justification
-
-### Commit messages
-
-Use [conventional commits](https://www.conventionalcommits.org/):
-
-```
-fix(maps): correct zoom level on Safari
-feat(budget): add CSV export for expenses
-```
-
-## Development Setup
-
-```bash
-git clone https://github.com/mauriceboe/TREK.git
-cd TREK
-
-# Server
-cd server && npm install && npm run dev
-
-# Client (separate terminal)
-cd client && npm install && npm run dev
-```
-
-Server: `http://localhost:3001` | Client: `http://localhost:5173`
-
-On first run, check the server logs for the auto-generated admin credentials.
-
-## More Details
-
-See the [Contributing wiki page](https://github.com/mauriceboe/TREK/wiki/Contributing) for the full tech stack, architecture overview, and detailed guidelines.

Dockerfile

@@ -1,37 +0,0 @@
-# Stage 1: Build React client
-FROM node:22-alpine AS client-builder
-WORKDIR /app/client
-COPY client/package*.json ./
-RUN npm ci
-COPY client/ ./
-RUN npm run build
-
-# Stage 2: Production server
-FROM node:22-alpine
-
-WORKDIR /app
-
-# Timezone support + native deps (better-sqlite3 needs build tools)
-COPY server/package*.json ./
-RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
-    npm ci --production && \
-    apk del python3 make g++
-
-COPY server/ ./
-COPY --from=client-builder /app/client/dist ./public
-COPY --from=client-builder /app/client/public/fonts ./public/fonts
-
-RUN mkdir -p /app/data/logs /app/uploads/files /app/uploads/covers /app/uploads/avatars /app/uploads/photos && \
-    mkdir -p /app/server && ln -s /app/uploads /app/server/uploads && ln -s /app/data /app/server/data && \
-    chown -R node:node /app
-
-ENV NODE_ENV=production
-ENV PORT=3000
-
-EXPOSE 3000
-
-HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
-  CMD wget -qO- http://localhost:3000/api/health || exit 1
-
-ENTRYPOINT ["dumb-init", "--"]
-CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; exec su-exec node node --import tsx src/index.ts"]

LICENSE

@@ -1,661 +0,0 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
-                       Version 3, 19 November 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-  A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate.  Many developers of free software are heartened and
-encouraged by the resulting cooperation.  However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-  The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community.  It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server.  Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-  An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals.  This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing under
-this license.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU Affero General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Remote Network Interaction; Use with the GNU General Public License.
-
-  Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your version
-supports such interaction) an opportunity to receive the Corresponding
-Source of your version by providing access to the Corresponding Source
-from a network server at no charge, through some standard or customary
-means of facilitating copying of software.  This Corresponding Source
-shall include the Corresponding Source for any work covered by version 3
-of the GNU General Public License that is incorporated pursuant to the
-following paragraph.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU Affero General Public License from time to time.  Such new versions
-will be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source.  For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code.  There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for the
-specific requirements.
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.

MCP.md

@@ -1,234 +0,0 @@
-# MCP Integration
-
-TREK includes a built-in [Model Context Protocol](https://modelcontextprotocol.io/) (MCP) server that lets AI
-assistants — such as Claude Desktop, Cursor, or any MCP-compatible client — read and modify your trip data through a
-structured API.
-
-> **Note:** MCP is an addon that must be enabled by your TREK administrator before it becomes available.
-
-## Table of Contents
-
-- [Setup](#setup)
-- [Limitations & Important Notes](#limitations--important-notes)
-- [Resources (read-only)](#resources-read-only)
-- [Tools (read-write)](#tools-read-write)
-- [Example](#example)
-
----
-
-## Setup
-
-### 1. Enable the MCP addon (admin)
-
-An administrator must first enable the MCP addon from the **Admin Panel > Addons** page. Until enabled, the `/mcp`
-endpoint returns `403 Forbidden` and the MCP section does not appear in user settings.
-
-### 2. Create an API token
-
-Once MCP is enabled, go to **Settings > MCP Configuration** and create an API token:
-
-1. Click **Create New Token**
-2. Give it a descriptive name (e.g. "Claude Desktop", "Work laptop")
-3. **Copy the token immediately** — it is shown only once and cannot be recovered
-
-Each user can create up to **10 tokens**.
-
-### 3. Configure your MCP client
-
-The Settings page shows a ready-to-copy client configuration snippet. For **Claude Desktop**, add the following to your
-`claude_desktop_config.json`:
-
-```json
-{
-  "mcpServers": {
-    "trek": {
-      "command": "npx",
-      "args": [
-        "mcp-remote",
-        "https://your-trek-instance.com/mcp",
-        "--header",
-        "Authorization: Bearer trek_your_token_here"
-      ]
-    }
-  }
-}
-```
-
-> The path to `npx` may need to be adjusted for your system (e.g. `C:\PROGRA~1\nodejs\npx.cmd` on Windows).
-
----
-
-## Limitations & Important Notes
-
-| Limitation                              | Details                                                                                                                                          |
-|-----------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
-| **Admin activation required**           | The MCP addon must be enabled by an admin before any user can access it.                                                                         |
-| **Per-user scoping**                    | Each MCP session is scoped to the authenticated user. You can only access trips you own or are a member of.                                      |
-| **No image uploads**                    | Cover images cannot be set through MCP. Use the web UI to upload trip covers.                                                                    |
-| **Reservations are created as pending** | When the AI creates a reservation, it starts with `pending` status. You must confirm it manually or ask the AI to set the status to `confirmed`. |
-| **Demo mode restrictions**              | If TREK is running in demo mode, all write operations through MCP are blocked.                                                                   |
-| **Rate limiting**                       | 60 requests per minute per user. Exceeding this returns a `429` error.                                                                           |
-| **Session limits**                      | Maximum 5 concurrent MCP sessions per user. Sessions expire after 1 hour of inactivity.                                                          |
-| **Token limits**                        | Maximum 10 API tokens per user.                                                                                                                  |
-| **Token revocation**                    | Deleting a token immediately terminates all active MCP sessions for that user.                                                                   |
-| **Real-time sync**                      | Changes made through MCP are broadcast to all connected clients in real-time via WebSocket, just like changes made through the web UI.           |
-
----
-
-## Resources (read-only)
-
-Resources provide read-only access to your TREK data. MCP clients can read these to understand the current state before
-making changes.
-
-| Resource          | URI                                        | Description                                               |
-|-------------------|--------------------------------------------|-----------------------------------------------------------|
-| Trips             | `trek://trips`                             | All trips you own or are a member of                      |
-| Trip Detail       | `trek://trips/{tripId}`                    | Single trip with metadata and member count                |
-| Days              | `trek://trips/{tripId}/days`               | Days of a trip with their assigned places                 |
-| Places            | `trek://trips/{tripId}/places`             | All places/POIs saved in a trip                           |
-| Budget            | `trek://trips/{tripId}/budget`             | Budget and expense items                                  |
-| Packing           | `trek://trips/{tripId}/packing`            | Packing checklist                                         |
-| Reservations      | `trek://trips/{tripId}/reservations`       | Flights, hotels, restaurants, etc.                        |
-| Day Notes         | `trek://trips/{tripId}/days/{dayId}/notes` | Notes for a specific day                                  |
-| Accommodations    | `trek://trips/{tripId}/accommodations`     | Hotels/rentals with check-in/out details                  |
-| Members           | `trek://trips/{tripId}/members`            | Owner and collaborators                                   |
-| Collab Notes      | `trek://trips/{tripId}/collab-notes`       | Shared collaborative notes                                |
-| Categories        | `trek://categories`                        | Available place categories (for use when creating places) |
-| Bucket List       | `trek://bucket-list`                       | Your personal travel bucket list                          |
-| Visited Countries | `trek://visited-countries`                 | Countries marked as visited in Atlas                      |
-
----
-
-## Tools (read-write)
-
-TREK exposes **34 tools** organized by feature area. Use `get_trip_summary` as a starting point — it returns everything
-about a trip in a single call.
-
-### Trip Summary
-
-| Tool               | Description                                                                                                                                                                                              |
-|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `get_trip_summary` | Full denormalized snapshot of a trip: metadata, members, days with assignments and notes, accommodations, budget totals, packing stats, reservations, and collab notes. Use this as your context loader. |
-
-### Trips
-
-| Tool          | Description                                                                                 |
-|---------------|---------------------------------------------------------------------------------------------|
-| `list_trips`  | List all trips you own or are a member of. Supports `include_archived` flag.                |
-| `create_trip` | Create a new trip with title, dates, currency. Days are auto-generated from the date range. |
-| `update_trip` | Update a trip's title, description, dates, or currency.                                     |
-| `delete_trip` | Delete a trip. **Owner only.**                                                              |
-
-### Places
-
-| Tool           | Description                                                                       |
-|----------------|-----------------------------------------------------------------------------------|
-| `create_place` | Add a place/POI with name, coordinates, address, category, notes, website, phone. |
-| `update_place` | Update any field of an existing place.                                            |
-| `delete_place` | Remove a place from a trip.                                                       |
-
-### Day Planning
-
-| Tool                      | Description                                                                   |
-|---------------------------|-------------------------------------------------------------------------------|
-| `assign_place_to_day`     | Pin a place to a specific day in the itinerary.                               |
-| `unassign_place`          | Remove a place assignment from a day.                                         |
-| `reorder_day_assignments` | Reorder places within a day by providing assignment IDs in the desired order. |
-| `update_assignment_time`  | Set start/end times for a place assignment (e.g. "09:00" – "11:30").          |
-| `update_day`              | Set or clear a day's title (e.g. "Arrival in Paris", "Free day").             |
-
-### Reservations
-
-| Tool                       | Description                                                                                                                                                                                   |
-|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `create_reservation`       | Create a pending reservation. Supports flights, hotels, restaurants, trains, cars, cruises, events, tours, activities, and other types. Hotels can be linked to places and check-in/out days. |
-| `update_reservation`       | Update any field including status (`pending` / `confirmed` / `cancelled`).                                                                                                                    |
-| `delete_reservation`       | Delete a reservation and its linked accommodation record if applicable.                                                                                                                       |
-| `link_hotel_accommodation` | Set or update a hotel reservation's check-in/out day links and associated place.                                                                                                              |
-
-### Budget
-
-| Tool                 | Description                                                  |
-|----------------------|--------------------------------------------------------------|
-| `create_budget_item` | Add an expense with name, category, and price.               |
-| `update_budget_item` | Update an expense's details, split (persons/days), or notes. |
-| `delete_budget_item` | Remove a budget item.                                        |
-
-### Packing
-
-| Tool                  | Description                                                  |
-|-----------------------|--------------------------------------------------------------|
-| `create_packing_item` | Add an item to the packing checklist with optional category. |
-| `update_packing_item` | Rename an item or change its category.                       |
-| `toggle_packing_item` | Check or uncheck a packing item.                             |
-| `delete_packing_item` | Remove a packing item.                                       |
-
-### Day Notes
-
-| Tool              | Description                                                           |
-|-------------------|-----------------------------------------------------------------------|
-| `create_day_note` | Add a note to a specific day with optional time label and emoji icon. |
-| `update_day_note` | Edit a day note's text, time, or icon.                                |
-| `delete_day_note` | Remove a note from a day.                                             |
-
-### Collab Notes
-
-| Tool                 | Description                                                                                     |
-|----------------------|-------------------------------------------------------------------------------------------------|
-| `create_collab_note` | Create a shared note visible to all trip members. Supports title, content, category, and color. |
-| `update_collab_note` | Edit a collab note's content, category, color, or pin status.                                   |
-| `delete_collab_note` | Delete a collab note and its associated files.                                                  |
-
-### Bucket List
-
-| Tool                      | Description                                                                                |
-|---------------------------|--------------------------------------------------------------------------------------------|
-| `create_bucket_list_item` | Add a destination to your personal bucket list with optional coordinates and country code. |
-| `delete_bucket_list_item` | Remove an item from your bucket list.                                                      |
-
-### Atlas
-
-| Tool                     | Description                                                                    |
-|--------------------------|--------------------------------------------------------------------------------|
-| `mark_country_visited`   | Mark a country as visited using its ISO 3166-1 alpha-2 code (e.g. "FR", "JP"). |
-| `unmark_country_visited` | Remove a country from your visited list.                                       |
-
----
-
-## Example
-
-Conversation with Claude: https://claude.ai/share/51572203-6a4d-40f8-a6bd-eba09d4b009d
-
-Initial prompt (1st message):
-
-```
-I'd like to plan a week-long trip to Kyoto, Japan, arriving April 5 2027
-and leaving April 11 2027. It's cherry blossom season so please keep that
-in mind when picking spots.
-
-Before writing anything to TREK, do some research: look up what's worth
-visiting, figure out a logical day-by-day flow (group nearby spots together
-to avoid unnecessary travel), find a well-reviewed hotel in a central
-neighbourhood, and think about what kind of food and restaurant experiences
-are worth including.
-
-Once you have a solid plan, write the whole thing to TREK:
-- Create the trip
-- Add all the places you've researched with their real coordinates
-- Build out the daily itinerary with sensible visiting times
-- Book the hotel as a reservation and link it properly to the accommodation days
-- Add any notable restaurant reservations
-- Put together a realistic budget in EUR
-- Build a packing list suited to April in Kyoto
-- Leave a pinned collab note with practical tips (transport, etiquette, money, etc.)
-- Add a day note for each day with any important heads-up (early start, crowd
-  tips, booking requirements, etc.)
-- Mark Japan as visited in my Atlas
-
-Currency: CHF. Use get_trip_summary at the end and give me a quick recap
-of everything that was added.
-```
-
-PDF of the generated trip: [./docs/TREK-Generated-by-MCP.pdf](./docs/TREK-Generated-by-MCP.pdf)
-
-![trip](./docs/screenshot-trip-mcp.png)

README.md

@@ -1,336 +0,0 @@
-<p align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="client/public/logo-light.svg" />
-    <source media="(prefers-color-scheme: light)" srcset="client/public/logo-dark.svg" />
-    <img src="client/public/logo-light.svg" alt="TREK" height="60" />
-  </picture>
-  <br />
-  <em>Your Trips. Your Plan.</em>
-</p>
-
-<p align="center">
-  <a href="https://discord.gg/J27gr9GH"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Discord" /></a>
-  <a href="LICENSE"><img src="https://img.shields.io/badge/License-AGPL_v3-blue.svg" alt="License: AGPL v3" /></a>
-  <a href="https://hub.docker.com/r/mauriceboe/trek"><img src="https://img.shields.io/docker/pulls/mauriceboe/trek" alt="Docker Pulls" /></a>
-  <a href="https://github.com/mauriceboe/TREK"><img src="https://img.shields.io/github/stars/mauriceboe/TREK" alt="GitHub Stars" /></a>
-  <a href="https://github.com/mauriceboe/TREK/commits"><img src="https://img.shields.io/github/last-commit/mauriceboe/TREK" alt="Last Commit" /></a>
-</p>
-
-<p align="center">
-  A self-hosted, real-time collaborative travel planner with interactive maps, budgets, packing lists, and more.
-  <br />
-  <strong><a href="https://demo-nomad.pakulat.org">Live Demo</a></strong> — Try TREK without installing. Resets hourly.
-</p>
-
-![TREK Screenshot](docs/screenshot.png)
-![TREK Screenshot 2](docs/screenshot-2.png)
-
-<details>
-<summary>More Screenshots</summary>
-
-| | |
-|---|---|
-| ![Plan Detail](docs/screenshot-plan-detail.png) | ![Bookings](docs/screenshot-bookings.png) |
-| ![Budget](docs/screenshot-budget.png) | ![Packing List](docs/screenshot-packing.png) |
-| ![Files](docs/screenshot-files.png) | |
-
-</details>
-
-## Features
-
-### Trip Planning
-- **Drag & Drop Planner** — Organize places into day plans with reordering and cross-day moves
-- **Interactive Map** — Leaflet map with photo markers, clustering, route visualization, and customizable tile sources
-- **Place Search** — Search via Google Places (with photos, ratings, opening hours) or OpenStreetMap (free, no API key needed)
-- **Day Notes** — Add timestamped, icon-tagged notes to individual days with drag & drop reordering
-- **Route Optimization** — Auto-optimize place order and export to Google Maps
-- **Weather Forecasts** — 16-day forecasts via Open-Meteo (no API key needed) with historical climate averages as fallback
-- **Map Category Filter** — Filter places by category and see only matching pins on the map
-
-### Travel Management
-- **Reservations & Bookings** — Track flights, accommodations, restaurants with status, confirmation numbers, and file attachments
-- **Budget Tracking** — Category-based expenses with pie chart, per-person/per-day splitting, and multi-currency support
-- **Packing Lists** — Category-based checklists with user assignment, packing templates, and progress tracking
-- **Packing Templates** — Create reusable packing templates in the admin panel with categories and items, apply to any trip
-- **Bag Tracking** — Optional weight tracking and bag assignment for packing items with iOS-style weight distribution (admin-toggleable)
-- **Document Manager** — Attach documents, tickets, and PDFs to trips, places, or reservations (up to 50 MB per file)
-- **PDF Export** — Export complete trip plans as PDF with cover page, images, notes, and TREK branding
-
-### Mobile & PWA
-- **Progressive Web App** — Install on iOS and Android directly from the browser, no App Store needed
-- **Offline Support** — Service Worker caches map tiles, API data, uploads, and static assets via Workbox
-- **Native App Feel** — Fullscreen standalone mode, custom app icon, themed status bar, and splash screen
-- **Touch Optimized** — Responsive design with mobile-specific layouts, touch-friendly controls, and safe area handling
-
-### Collaboration
-- **Real-Time Sync** — Plan together via WebSocket — changes appear instantly across all connected users
-- **Multi-User** — Invite members to collaborate on shared trips with role-based access
-- **Invite Links** — Create one-time registration links with configurable max uses and expiry for easy onboarding
-- **Single Sign-On (OIDC)** — Login with Google, Apple, Authentik, Keycloak, or any OIDC provider
-- **Two-Factor Authentication (MFA)** — TOTP-based 2FA with QR code setup, works with Google Authenticator, Authy, etc.
-- **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
-
-### Addons (modular, admin-toggleable)
-- **Vacay** — Personal vacation day planner with calendar view, public holidays (100+ countries), company holidays, user fusion with live sync, and carry-over tracking
-- **Atlas** — Interactive world map with visited countries, bucket list with planned travel dates, travel stats, continent breakdown, streak tracking, and liquid glass UI effects
-- **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
-- **Dashboard Widgets** — Currency converter and timezone clock, toggleable per user
-
-### Customization & Admin
-- **Dashboard Views** — Toggle between card grid and compact list view on the My Trips page
-- **Dark Mode** — Full light and dark theme with dynamic status bar color matching
-- **Multilingual** — English, German, Spanish, French, Russian, Chinese (Simplified), Dutch, Arabic (with RTL support)
-- **Admin Panel** — User management, invite links, packing templates, global categories, addon management, API keys, backups, and GitHub release history
-- **Auto-Backups** — Scheduled backups with configurable interval and retention
-- **Customizable** — Temperature units, time format (12h/24h), map tile sources, default coordinates
-
-## Tech Stack
-
-- **Backend**: Node.js 22 + Express + SQLite (`better-sqlite3`)
-- **Frontend**: React 18 + Vite + Tailwind CSS
-- **PWA**: vite-plugin-pwa + Workbox
-- **Real-Time**: WebSocket (`ws`)
-- **State**: Zustand
-- **Auth**: JWT + OIDC + TOTP (MFA)
-- **Maps**: Leaflet + react-leaflet-cluster + Google Places API (optional)
-- **Weather**: Open-Meteo API (free, no key required)
-- **Icons**: lucide-react
-
-## Quick Start
-
-```bash
-ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
-  -e ENCRYPTION_KEY=$ENCRYPTION_KEY \
-  -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
-```
-
-The app runs on port `3000`. The first user to register becomes the admin.
-
-### Install as App (PWA)
-
-TREK works as a Progressive Web App — no App Store needed:
-
-1. Open your TREK instance in the browser (HTTPS required)
-2. **iOS**: Share button → "Add to Home Screen"
-3. **Android**: Menu → "Install app" or "Add to Home Screen"
-4. TREK launches fullscreen with its own icon, just like a native app
-
-<details>
-<summary>Docker Compose (recommended for production)</summary>
-
-```yaml
-services:
-  app:
-    image: mauriceboe/trek:latest
-    container_name: trek
-    read_only: true
-    security_opt:
-      - no-new-privileges:true
-    cap_drop:
-      - ALL
-    cap_add:
-      - CHOWN
-      - SETUID
-      - SETGID
-    tmpfs:
-      - /tmp:noexec,nosuid,size=64m
-    ports:
-      - "3000:3000"
-    environment:
-      - NODE_ENV=production
-      - PORT=3000
-      - ENCRYPTION_KEY=${ENCRYPTION_KEY:-} # Recommended. Generate with: openssl rand -hex 32. If unset, falls back to data/.jwt_secret (existing installs) or auto-generates a key (fresh installs).
-      - TZ=${TZ:-UTC} # Timezone for logs, reminders and scheduled tasks (e.g. Europe/Berlin)
-      - LOG_LEVEL=${LOG_LEVEL:-info} # info = concise user actions; debug = verbose admin-level details
-      - ALLOWED_ORIGINS=${ALLOWED_ORIGINS:-} # Comma-separated origins for CORS and email notification links
-      - FORCE_HTTPS=true # Redirect HTTP to HTTPS when behind a TLS-terminating proxy
-      # - COOKIE_SECURE=false # Uncomment if accessing over plain HTTP (no HTTPS). Not recommended for production.
-      - TRUST_PROXY=1 # Number of trusted proxies for X-Forwarded-For
-      # - ALLOW_INTERNAL_NETWORK=true # Uncomment if Immich or other services are on your local network (RFC-1918 IPs)
-      - APP_URL=${APP_URL:-} # Base URL of this instance — required when OIDC is enabled; must match the redirect URI registered with your IdP; Also used as the base URL for email notifications and other external links
-      # - OIDC_ISSUER=https://auth.example.com # OpenID Connect provider URL
-      # - OIDC_CLIENT_ID=trek # OpenID Connect client ID
-      # - OIDC_CLIENT_SECRET=supersecret # OpenID Connect client secret
-      # - OIDC_DISPLAY_NAME=SSO # Label shown on the SSO login button
-      # - OIDC_ONLY=false # Set to true to disable local password auth entirely (SSO only)
-      # - OIDC_ADMIN_CLAIM=groups # OIDC claim used to identify admin users
-      # - OIDC_ADMIN_VALUE=app-trek-admins # Value of the OIDC claim that grants admin role
-      # - OIDC_SCOPE=openid email profile # Fully overrides the default. Add extra scopes as needed (e.g. add groups if using OIDC_ADMIN_CLAIM)
-      # - OIDC_DISCOVERY_URL= # Override the OIDC discovery endpoint for providers with non-standard paths (e.g. Authentik)
-      # - DEMO_MODE=false # Enable demo mode (resets data hourly)
-      # - ADMIN_EMAIL=admin@trek.local # Initial admin e-mail — only used on first boot when no users exist
-      # - ADMIN_PASSWORD=changeme      # Initial admin password — only used on first boot when no users exist
-      # - MCP_RATE_LIMIT=60 # Max MCP API requests per user per minute (default: 60)
-    volumes:
-      - ./data:/app/data
-      - ./uploads:/app/uploads
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "wget", "-qO-", "http://localhost:3000/api/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 15s
-```
-
-```bash
-docker compose up -d
-```
-
-</details>
-
-### Updating
-
-**Docker Compose** (recommended):
-
-```bash
-docker compose pull && docker compose up -d
-```
-
-**Docker Run** — use the same volume paths from your original `docker run` command:
-
-```bash
-docker pull mauriceboe/trek
-docker rm -f trek
-docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/trek
-```
-
-> **Tip:** Not sure which paths you used? Run `docker inspect trek --format '{{json .Mounts}}'` before removing the container.
-
-Your data is persisted in the mounted `data` and `uploads` volumes — updates never touch your existing data.
-
-### Rotating the Encryption Key
-
-If you need to rotate `ENCRYPTION_KEY` (e.g. you are upgrading from a version that derived encryption from `JWT_SECRET`), use the migration script to re-encrypt all stored secrets under the new key without starting the app:
-
-```bash
-docker exec -it trek node --import tsx scripts/migrate-encryption.ts
-```
-
-The script will prompt for your old and new keys interactively (input is not echoed). It creates a timestamped database backup before making any changes and exits with a non-zero code if anything fails.
-
-**Upgrading from a previous version?** Your old JWT secret is in `./data/.jwt_secret`. Use its contents as the "old key" and your new `ENCRYPTION_KEY` value as the "new key".
-
-### Reverse Proxy (recommended)
-
-For production, put TREK behind a reverse proxy with HTTPS (e.g. Nginx, Caddy, Traefik).
-
-> **Important:** TREK uses WebSockets for real-time sync. Your reverse proxy must support WebSocket upgrades on the `/ws` path.
-
-<details>
-<summary>Nginx</summary>
-
-```nginx
-server {
-    listen 80;
-    server_name trek.yourdomain.com;
-    return 301 https://$host$request_uri;
-}
-
-server {
-    listen 443 ssl http2;
-    server_name trek.yourdomain.com;
-
-    ssl_certificate /path/to/fullchain.pem;
-    ssl_certificate_key /path/to/privkey.pem;
-
-    location /ws {
-        proxy_pass http://localhost:3000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_read_timeout 86400;
-    }
-
-    location / {
-        proxy_pass http://localhost:3000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-}
-```
-
-</details>
-
-<details>
-<summary>Caddy</summary>
-
-Caddy handles WebSocket upgrades automatically:
-
-```
-trek.yourdomain.com {
-    reverse_proxy localhost:3000
-}
-```
-
-</details>
-
-## Environment Variables
-
-| Variable | Description | Default |
-|----------|-------------|---------|
-| **Core** | | |
-| `PORT` | Server port | `3000` |
-| `NODE_ENV` | Environment (`production` / `development`) | `production` |
-| `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
-| `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
-| `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
-| `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
-| `FORCE_HTTPS` | Redirect HTTP to HTTPS behind a TLS-terminating proxy | `false` |
-| `COOKIE_SECURE` | Set to `false` to allow session cookies over plain HTTP (e.g. accessing via IP without HTTPS). Defaults to `true` in production. **Not recommended to disable in production.** | `true` |
-| `TRUST_PROXY` | Number of trusted reverse proxies for `X-Forwarded-For` | `1` |
-| `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IP addresses. Set to `true` if Immich or other integrated services are hosted on your local network. Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) are always blocked regardless of this setting. | `false` |
-| `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled — must match the redirect URI registered with your IdP. Also used as the base URL for external links in email notifications. | — |
-| **OIDC / SSO** | | |
-| `OIDC_ISSUER` | OpenID Connect provider URL | — |
-| `OIDC_CLIENT_ID` | OIDC client ID | — |
-| `OIDC_CLIENT_SECRET` | OIDC client secret | — |
-| `OIDC_DISPLAY_NAME` | Label shown on the SSO login button | `SSO` |
-| `OIDC_ONLY` | Disable local password auth entirely (first SSO login becomes admin) | `false` |
-| `OIDC_ADMIN_CLAIM` | OIDC claim used to identify admin users | — |
-| `OIDC_ADMIN_VALUE` | Value of the OIDC claim that grants admin role | — |
-| `OIDC_SCOPE` | Space-separated OIDC scopes to request. **Fully replaces** the default — always include `openid email profile` plus any extra scopes you need (e.g. add `groups` when using `OIDC_ADMIN_CLAIM`) | `openid email profile` |
-| `OIDC_DISCOVERY_URL` | Override the auto-constructed OIDC discovery endpoint. Useful for providers that expose it at a non-standard path (e.g. Authentik: `https://auth.example.com/application/o/trek/.well-known/openid-configuration`) | — |
-| **Initial Setup** | | |
-| `ADMIN_EMAIL` | Email for the first admin account created on initial boot. Must be set together with `ADMIN_PASSWORD`. If either is omitted a random password is generated and printed to the server log. Has no effect once any user exists. | `admin@trek.local` |
-| `ADMIN_PASSWORD` | Password for the first admin account created on initial boot. Must be set together with `ADMIN_EMAIL`. | random |
-| **Other** | | |
-| `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
-| `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `60` |
-
-## Optional API Keys
-
-API keys are configured in the **Admin Panel** after login. Keys set by the admin are automatically shared with all users — no per-user configuration needed.
-
-### Google Maps (Place Search & Photos)
-
-1. Go to [Google Cloud Console](https://console.cloud.google.com/)
-2. Create a project and enable the **Places API (New)**
-3. Create an API key under Credentials
-4. In TREK: Admin Panel → Settings → Google Maps
-
-## Building from Source
-
-```bash
-git clone https://github.com/mauriceboe/TREK.git
-cd TREK
-docker build -t trek .
-```
-
-## Data & Backups
-
-- **Database**: SQLite, stored in `./data/travel.db`
-- **Uploads**: Stored in `./uploads/`
-- **Logs**: `./data/logs/trek.log` (auto-rotated)
-- **Backups**: Create and restore via Admin Panel
-- **Auto-Backups**: Configurable schedule and retention in Admin Panel
-
-## License
-
-[AGPL-3.0](LICENSE)

SECURITY.md

@@ -1,26 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-| Version | Supported |
-|---|---|
-| Latest | Yes |
-| Older | No |
-
-Only the latest version receives security updates. Please update to the latest release.
-
-## Reporting a Vulnerability
-
-If you discover a security vulnerability, please report it responsibly:
-
-1. **Do not** open a public issue
-2. Email: **mauriceboe@icloud.com**
-3. Include a description of the vulnerability and steps to reproduce
-
-You will receive a response within 48 hours. Once confirmed, a fix will be released as soon as possible.
-
-## Scope
-
-This policy covers the TREK application and its Docker image (`mauriceboe/trek`).
-
-Third-party dependencies are monitored via GitHub Dependabot.

chart/Chart.yaml

@@ -1,5 +0,0 @@
-apiVersion: v2
-name: trek
-version: 0.1.0
-description: Minimal Helm chart for TREK app
-appVersion: "latest"

chart/README.md

@@ -1,36 +0,0 @@
-# TREK Helm Chart
-
-This is a minimal Helm chart for deploying the TREK app.
-
-## Features
-- Deploys the TREK container
-- Exposes port 3000 via Service
-- Optional persistent storage for `/app/data` and `/app/uploads`
-- Configurable environment variables and secrets
-- Optional generic Ingress support
-- Health checks on `/api/health`
-
-## Usage
-
-```sh
-helm install trek ./chart \
-  --set ingress.enabled=true \
-  --set ingress.hosts[0].host=yourdomain.com
-```
-
-See `values.yaml` for more options.
-
-## Files
-- `Chart.yaml` — chart metadata
-- `values.yaml` — configuration values
-- `templates/` — Kubernetes manifests
-
-## Notes
-- Ingress is off by default. Enable and configure hosts for your domain.
-- PVCs require a default StorageClass or specify one as needed.
-- `JWT_SECRET` is managed entirely by the server — auto-generated into the data PVC on first start and rotatable via the admin panel (Settings → Danger Zone). No Helm configuration needed.
-- `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
-- If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
-- Set `env.ALLOW_INTERNAL_NETWORK: "true"` if Immich or other integrated services are hosted on a private/RFC-1918 address (e.g. a pod on the same cluster or a NAS on your LAN). Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) remain blocked regardless.
-- Set `env.COOKIE_SECURE: "false"` only if your deployment has no TLS (e.g. during local testing without ingress). Session cookies require HTTPS in all other cases.
-- Set `env.OIDC_DISCOVERY_URL` to override the auto-constructed OIDC discovery endpoint. Required for providers (e.g. Authentik) that expose it at a non-standard path.

chart/templates/NOTES.txt

@@ -1,23 +0,0 @@
-1. ENCRYPTION_KEY handling:
-   - ENCRYPTION_KEY encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest.
-   - By default, the chart creates a Kubernetes Secret from `secretEnv.ENCRYPTION_KEY` in values.yaml.
-   - To generate a random key at install (preserved across upgrades), set `generateEncryptionKey: true`.
-   - To use an existing Kubernetes secret, set `existingSecret` to the secret name. The secret must
-     contain a key matching `existingSecretKey` (defaults to `ENCRYPTION_KEY`).
-   - If left empty, the server resolves the key automatically: existing installs fall back to
-     data/.jwt_secret (encrypted data stays readable with no manual action); fresh installs
-     auto-generate a key persisted to the data PVC.
-
-2. JWT_SECRET is managed entirely by the server:
-   - Auto-generated on first start and persisted to the data PVC (data/.jwt_secret).
-   - Rotate it via the admin panel (Settings → Danger Zone → Rotate JWT Secret).
-   - No Helm configuration needed or supported.
-
-3. Example usage:
-   - Set an explicit encryption key: `--set secretEnv.ENCRYPTION_KEY=your_enc_key`
-   - Generate a random key at install: `--set generateEncryptionKey=true`
-   - Use an existing secret: `--set existingSecret=my-k8s-secret`
-   - Use a custom key name in the existing secret: `--set existingSecret=my-k8s-secret --set existingSecretKey=MY_ENC_KEY`
-
-4. Only one method should be used at a time. If both `generateEncryptionKey` and `existingSecret` are
-   set, `existingSecret` takes precedence. Ensure the referenced secret and key exist in the namespace.

chart/templates/_helpers.tpl

@@ -1,18 +0,0 @@
-{{/*
-Expand the name of the chart.
-*/}}
-{{- define "trek.name" -}}
-{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" -}}
-{{- end -}}
-
-{{/*
-Create a default fully qualified app name.
-*/}}
-{{- define "trek.fullname" -}}
-{{- if .Values.fullnameOverride -}}
-{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" -}}
-{{- else -}}
-{{- $name := default .Chart.Name .Values.nameOverride -}}
-{{- printf "%s" $name | trunc 63 | trimSuffix "-" -}}
-{{- end -}}
-{{- end -}}

chart/templates/configmap.yaml

@@ -1,63 +0,0 @@
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: {{ include "trek.fullname" . }}-config
-  labels:
-    app: {{ include "trek.name" . }}
-data:
-  NODE_ENV: {{ .Values.env.NODE_ENV | quote }}
-  PORT: {{ .Values.env.PORT | quote }}
-  {{- if .Values.env.TZ }}
-  TZ: {{ .Values.env.TZ | quote }}
-  {{- end }}
-  {{- if .Values.env.LOG_LEVEL }}
-  LOG_LEVEL: {{ .Values.env.LOG_LEVEL | quote }}
-  {{- end }}
-  {{- if .Values.env.ALLOWED_ORIGINS }}
-  ALLOWED_ORIGINS: {{ .Values.env.ALLOWED_ORIGINS | quote }}
-  {{- end }}
-  {{- if .Values.env.APP_URL }}
-  APP_URL: {{ .Values.env.APP_URL | quote }}
-  {{- end }}
-  {{- if .Values.env.FORCE_HTTPS }}
-  FORCE_HTTPS: {{ .Values.env.FORCE_HTTPS | quote }}
-  {{- end }}
-  {{- if .Values.env.COOKIE_SECURE }}
-  COOKIE_SECURE: {{ .Values.env.COOKIE_SECURE | quote }}
-  {{- end }}
-  {{- if .Values.env.TRUST_PROXY }}
-  TRUST_PROXY: {{ .Values.env.TRUST_PROXY | quote }}
-  {{- end }}
-  {{- if .Values.env.ALLOW_INTERNAL_NETWORK }}
-  ALLOW_INTERNAL_NETWORK: {{ .Values.env.ALLOW_INTERNAL_NETWORK | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_ISSUER }}
-  OIDC_ISSUER: {{ .Values.env.OIDC_ISSUER | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_CLIENT_ID }}
-  OIDC_CLIENT_ID: {{ .Values.env.OIDC_CLIENT_ID | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_DISPLAY_NAME }}
-  OIDC_DISPLAY_NAME: {{ .Values.env.OIDC_DISPLAY_NAME | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_ONLY }}
-  OIDC_ONLY: {{ .Values.env.OIDC_ONLY | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_ADMIN_CLAIM }}
-  OIDC_ADMIN_CLAIM: {{ .Values.env.OIDC_ADMIN_CLAIM | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_ADMIN_VALUE }}
-  OIDC_ADMIN_VALUE: {{ .Values.env.OIDC_ADMIN_VALUE | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_SCOPE }}
-  OIDC_SCOPE: {{ .Values.env.OIDC_SCOPE | quote }}
-  {{- end }}
-  {{- if .Values.env.OIDC_DISCOVERY_URL }}
-  OIDC_DISCOVERY_URL: {{ .Values.env.OIDC_DISCOVERY_URL | quote }}
-  {{- end }}
-  {{- if .Values.env.DEMO_MODE }}
-  DEMO_MODE: {{ .Values.env.DEMO_MODE | quote }}
-  {{- end }}
-  {{- if .Values.env.MCP_RATE_LIMIT }}
-  MCP_RATE_LIMIT: {{ .Values.env.MCP_RATE_LIMIT | quote }}
-  {{- end }}

chart/templates/deployment.yaml

@@ -1,89 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: {{ include "trek.fullname" . }}
-  labels:
-    app: {{ include "trek.name" . }}
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: {{ include "trek.name" . }}
-  template:
-    metadata:
-      annotations:
-        checksum/config: {{ include (print $.Template.BasePath "/configmap.yaml") . | sha256sum }}
-        checksum/secret: {{ include (print $.Template.BasePath "/secret.yaml") . | sha256sum }}
-      labels:
-        app: {{ include "trek.name" . }}
-    spec:
-      {{- if .Values.imagePullSecrets }}
-      imagePullSecrets:
-        {{- range .Values.imagePullSecrets }}
-        - name: {{ .name }}
-        {{- end }}
-      {{- end }}
-      securityContext:
-        fsGroup: 1000
-      containers:
-        - name: trek
-          image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
-          imagePullPolicy: {{ .Values.image.pullPolicy }}
-          {{- with .Values.resources }}
-          resources:
-            {{- toYaml . | nindent 12 }}
-          {{- end }}
-          ports:
-            - containerPort: 3000
-          envFrom:
-            - configMapRef:
-                name: {{ include "trek.fullname" . }}-config
-          env:
-            - name: ENCRYPTION_KEY
-              valueFrom:
-                secretKeyRef:
-                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
-                  key: {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}
-                  optional: true
-            - name: ADMIN_EMAIL
-              valueFrom:
-                secretKeyRef:
-                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
-                  key: ADMIN_EMAIL
-                  optional: true
-            - name: ADMIN_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
-                  key: ADMIN_PASSWORD
-                  optional: true
-            - name: OIDC_CLIENT_SECRET
-              valueFrom:
-                secretKeyRef:
-                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
-                  key: OIDC_CLIENT_SECRET
-                  optional: true
-          volumeMounts:
-            - name: data
-              mountPath: /app/data
-            - name: uploads
-              mountPath: /app/uploads
-          livenessProbe:
-            httpGet:
-              path: /api/health
-              port: 3000
-            initialDelaySeconds: 15
-            periodSeconds: 30
-          readinessProbe:
-            httpGet:
-              path: /api/health
-              port: 3000
-            initialDelaySeconds: 5
-            periodSeconds: 10
-      volumes:
-        - name: data
-          persistentVolumeClaim:
-            claimName: {{ include "trek.fullname" . }}-data
-        - name: uploads
-          persistentVolumeClaim:
-            claimName: {{ include "trek.fullname" . }}-uploads

chart/templates/ingress.yaml

@@ -1,35 +0,0 @@
-{{- if .Values.ingress.enabled }}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: {{ include "trek.fullname" . }}
-  labels:
-    app: {{ include "trek.name" . }}
-  {{- with .Values.ingress.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  {{- if .Values.ingress.className }}
-  ingressClassName: {{ .Values.ingress.className }}
-  {{- end }}
-  {{- if .Values.ingress.tls }}
-  tls:
-    {{- toYaml .Values.ingress.tls | nindent 4 }}
-  {{- end }}
-  rules:
-    {{- range .Values.ingress.hosts }}
-    - host: {{ .host }}
-      http:
-        paths:
-          {{- range .paths }}
-          - path: {{ . }}
-            pathType: Prefix
-            backend:
-              service:
-                name: {{ include "trek.fullname" $ }}
-                port:
-                  number: {{ $.Values.service.port }}
-          {{- end }}
-    {{- end }}
-{{- end }}

chart/templates/pvc.yaml

@@ -1,27 +0,0 @@
-{{- if .Values.persistence.enabled }}
-apiVersion: v1
-kind: PersistentVolumeClaim
-metadata:
-  name: {{ include "trek.fullname" . }}-data
-  labels:
-    app: {{ include "trek.name" . }}
-spec:
-  accessModes:
-    - ReadWriteOnce
-  resources:
-    requests:
-      storage: {{ .Values.persistence.data.size }}
----
-apiVersion: v1
-kind: PersistentVolumeClaim
-metadata:
-  name: {{ include "trek.fullname" . }}-uploads
-  labels:
-    app: {{ include "trek.name" . }}
-spec:
-  accessModes:
-    - ReadWriteOnce
-  resources:
-    requests:
-      storage: {{ .Values.persistence.uploads.size }}
-{{- end }}

chart/templates/secret.yaml

@@ -1,47 +0,0 @@
-{{- if and (not .Values.existingSecret) (not .Values.generateEncryptionKey) }}
-apiVersion: v1
-kind: Secret
-metadata:
-  name: {{ include "trek.fullname" . }}-secret
-  labels:
-    app: {{ include "trek.name" . }}
-type: Opaque
-data:
-  {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}: {{ .Values.secretEnv.ENCRYPTION_KEY | b64enc | quote }}
-  {{- if .Values.secretEnv.ADMIN_EMAIL }}
-  ADMIN_EMAIL: {{ .Values.secretEnv.ADMIN_EMAIL | b64enc | quote }}
-  {{- end }}
-  {{- if .Values.secretEnv.ADMIN_PASSWORD }}
-  ADMIN_PASSWORD: {{ .Values.secretEnv.ADMIN_PASSWORD | b64enc | quote }}
-  {{- end }}
-  {{- if .Values.secretEnv.OIDC_CLIENT_SECRET }}
-  OIDC_CLIENT_SECRET: {{ .Values.secretEnv.OIDC_CLIENT_SECRET | b64enc | quote }}
-  {{- end }}
-{{- end }}
-
-{{- if and (not .Values.existingSecret) (.Values.generateEncryptionKey) }}
-{{- $secretName := printf "%s-secret" (include "trek.fullname" .) }}
-{{- $existingSecret := (lookup "v1" "Secret" .Release.Namespace $secretName) }}
-apiVersion: v1
-kind: Secret
-metadata:
-  name: {{ $secretName }}
-  labels:
-    app: {{ include "trek.name" . }}
-type: Opaque
-stringData:
-  {{- if and $existingSecret $existingSecret.data }}
-  {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}: {{ index $existingSecret.data (.Values.existingSecretKey | default "ENCRYPTION_KEY") | b64dec }}
-  {{- else }}
-  {{ .Values.existingSecretKey | default "ENCRYPTION_KEY" }}: {{ randAlphaNum 32 }}
-  {{- end }}
-  {{- if .Values.secretEnv.ADMIN_EMAIL }}
-  ADMIN_EMAIL: {{ .Values.secretEnv.ADMIN_EMAIL }}
-  {{- end }}
-  {{- if .Values.secretEnv.ADMIN_PASSWORD }}
-  ADMIN_PASSWORD: {{ .Values.secretEnv.ADMIN_PASSWORD }}
-  {{- end }}
-  {{- if .Values.secretEnv.OIDC_CLIENT_SECRET }}
-  OIDC_CLIENT_SECRET: {{ .Values.secretEnv.OIDC_CLIENT_SECRET }}
-  {{- end }}
-{{- end }}

chart/templates/service.yaml

@@ -1,15 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: {{ include "trek.fullname" . }}
-  labels:
-    app: {{ include "trek.name" . }}
-spec:
-  type: {{ .Values.service.type }}
-  ports:
-    - port: {{ .Values.service.port }}
-      targetPort: 3000
-      protocol: TCP
-      name: http
-  selector:
-    app: {{ include "trek.name" . }}

chart/values.yaml

@@ -1,109 +0,0 @@
-
-image:
-  repository: mauriceboe/trek
-  tag: latest
-  pullPolicy: IfNotPresent
-
-# Optional image pull secrets for private registries
-imagePullSecrets: []
-  # - name: my-registry-secret
-
-service:
-  type: ClusterIP
-  port: 3000
-
-env:
-  NODE_ENV: production
-  PORT: 3000
-  # TZ: "UTC"
-  # Timezone for logs, reminders, and cron jobs (e.g. Europe/Berlin).
-  # LOG_LEVEL: "info"
-  # "info" = concise user actions, "debug" = verbose details.
-  # ALLOWED_ORIGINS: ""
-  # NOTE: If using ingress, ensure env.ALLOWED_ORIGINS matches the domains in ingress.hosts for proper CORS configuration.
-  # APP_URL: "https://trek.example.com"
-  # Public base URL of this instance. Required when OIDC is enabled — must match the redirect URI registered with your IdP.
-  # Also used as the base URL for links in email notifications and other external links.
-  # FORCE_HTTPS: "false"
-  # Set to "true" to redirect HTTP to HTTPS behind a TLS-terminating proxy.
-  # COOKIE_SECURE: "true"
-  # Set to "false" to allow session cookies over plain HTTP (e.g. no ingress TLS). Not recommended for production.
-  # TRUST_PROXY: "1"
-  # Number of trusted reverse proxies for X-Forwarded-For header parsing.
-  # ALLOW_INTERNAL_NETWORK: "false"
-  # Set to "true" if Immich or other integrated services are hosted on a private/RFC-1918 network address.
-  # Loopback (127.x) and link-local/metadata addresses (169.254.x) are always blocked.
-  # OIDC_ISSUER: ""
-  # OpenID Connect provider URL.
-  # OIDC_CLIENT_ID: ""
-  # OIDC client ID.
-  # OIDC_DISPLAY_NAME: "SSO"
-  # Label shown on the SSO login button.
-  # OIDC_ONLY: "false"
-  # Set to "true" to disable local password auth entirely (first SSO login becomes admin).
-  # OIDC_ADMIN_CLAIM: ""
-  # OIDC claim used to identify admin users.
-  # OIDC_ADMIN_VALUE: ""
-  # Value of the OIDC claim that grants admin role.
-  # OIDC_SCOPE: "openid email profile groups"
-  # Space-separated OIDC scopes to request. Must include scopes for any claim used by OIDC_ADMIN_CLAIM.
-  # OIDC_DISCOVERY_URL: ""
-  # Override the OIDC discovery endpoint for providers with non-standard paths (e.g. Authentik).
-  # DEMO_MODE: "false"
-  # Enable demo mode (hourly data resets).
-  # MCP_RATE_LIMIT: "60"
-  # Max MCP API requests per user per minute. Defaults to 60.
-
-
-# Secret environment variables stored in a Kubernetes Secret.
-# JWT_SECRET is managed entirely by the server (auto-generated into the data PVC,
-# rotatable via the admin panel) — it is not configured here.
-secretEnv:
-  # At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC, etc.).
-  # Recommended: set to a random 32-byte hex value (openssl rand -hex 32).
-  # If left empty the server resolves the key automatically:
-  #   1. data/.jwt_secret (existing installs — encrypted data stays readable after upgrade)
-  #   2. data/.encryption_key auto-generated on first start (fresh installs)
-  ENCRYPTION_KEY: ""
-  # Initial admin account — only used on first boot when no users exist yet.
-  # If both values are non-empty the admin account is created with these credentials.
-  # If either is empty a random password is generated and printed to the server log.
-  ADMIN_EMAIL: ""
-  ADMIN_PASSWORD: ""
-  # OIDC client secret — set together with env.OIDC_ISSUER and env.OIDC_CLIENT_ID.
-  OIDC_CLIENT_SECRET: ""
-
-# If true, a random ENCRYPTION_KEY is generated at install and preserved across upgrades
-generateEncryptionKey: false
-
-# If set, use an existing Kubernetes secret that contains ENCRYPTION_KEY
-existingSecret: ""
-existingSecretKey: ENCRYPTION_KEY
-
-persistence:
-  enabled: true
-  data:
-    size: 1Gi
-  uploads:
-    size: 1Gi
-
-resources:
-  requests:
-    cpu: 100m
-    memory: 256Mi
-  limits:
-    cpu: 500m
-    memory: 512Mi
-
-ingress:
-  enabled: false
-  className: ""
-  annotations: {}
-  hosts:
-    - host: chart-example.local
-      paths:
-        - /
-  tls: []
-  #  - secretName: chart-example-tls
-  #    hosts:
-  #      - chart-example.local

client/index.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>TREK</title>
-
-    <!-- PWA / iOS -->
-    <meta name="theme-color" content="#09090b" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="apple-mobile-web-app-title" content="TREK" />
-    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" />
-
-    <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="/icons/icon-dark.svg" />
-
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
-
-    <!-- Leaflet -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin="" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

client/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "trek-client",
-  "version": "2.9.4",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "prebuild": "node scripts/generate-icons.mjs",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@react-pdf/renderer": "^4.3.2",
-    "axios": "^1.6.7",
-    "leaflet": "^1.9.4",
-    "lucide-react": "^0.344.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-dropzone": "^14.4.1",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-cluster": "^2.1.0",
-    "react-markdown": "^10.1.0",
-    "react-router-dom": "^6.22.2",
-    "react-window": "^2.2.7",
-    "remark-gfm": "^4.0.1",
-    "topojson-client": "^3.1.0",
-    "zustand": "^4.5.2"
-  },
-  "devDependencies": {
-    "@types/leaflet": "^1.9.8",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.35",
-    "sharp": "^0.33.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^6.0.2",
-    "vite": "^5.1.4",
-    "vite-plugin-pwa": "^0.21.0"
-  }
-}

client/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

client/public/icons/icon-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" zoomAndPan="magnify" viewBox="0 0 1500 1499.999933" height="2000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="a5b4275efd"><path d="M 45 5.265625 L 1455 5.265625 L 1455 1494.765625 L 45 1494.765625 Z M 45 5.265625 " clip-rule="nonzero"/></clipPath><clipPath id="61932b752f"><path d="M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.753906 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.753906 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z M 1056.105469 333.019531 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#a5b4275efd)"><g clip-path="url(#61932b752f)"><path fill="#000000" d="M 40.597656 5.328125 L 40.597656 1494.671875 L 1459.472656 1494.671875 L 1459.472656 5.328125 Z M 40.597656 5.328125 " fill-opacity="1" fill-rule="nonzero"/></g></g></svg>

client/public/icons/icon-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" zoomAndPan="magnify" viewBox="0 0 1500 1499.999933" height="2000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ff6253e8fa"><path d="M 45 5.265625 L 1455 5.265625 L 1455 1494.765625 L 45 1494.765625 Z M 45 5.265625 " clip-rule="nonzero"/></clipPath><clipPath id="c6b14a8188"><path d="M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.75 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.75 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z M 1056.105469 333.019531 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#ff6253e8fa)"><g clip-path="url(#c6b14a8188)"><path fill="#ffffff" d="M 40.597656 5.328125 L 40.597656 1494.671875 L 1459.472656 1494.671875 L 1459.472656 5.328125 Z M 40.597656 5.328125 " fill-opacity="1" fill-rule="nonzero"/></g></g></svg>

client/public/icons/icon.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#1e293b"/>
-      <stop offset="100%" stop-color="#0f172a"/>
-    </linearGradient>
-    <clipPath id="icon">
-      <path d="M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.75 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.75 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z"/>
-    </clipPath>
-  </defs>
-  <rect width="512" height="512" fill="url(#bg)"/>
-  <g transform="translate(56,51) scale(0.267)">
-    <rect width="1500" height="1500" fill="#ffffff" clip-path="url(#icon)"/>
-  </g>
-</svg>

client/public/text-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" zoomAndPan="magnify" viewBox="49 2 124 56" height="80" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="c5c1a398e1"><path d="M 49 0.015625 L 174 0.015625 L 174 59.984375 L 49 59.984375 Z M 49 0.015625 " clip-rule="nonzero"/></clipPath><clipPath id="9b226024c5"><rect x="0" width="125" y="0" height="60"/></clipPath></defs><g clip-path="url(#c5c1a398e1)"><g transform="matrix(1, 0, 0, 1, 49, -0.000000000000011803)"><g clip-path="url(#9b226024c5)"><g fill="#000000" fill-opacity="1"><g transform="translate(0.740932, 54.900246)"><g><path d="M 17.53125 0 C 14.15625 0 11.515625 -0.960938 9.609375 -2.890625 C 7.710938 -4.816406 6.765625 -7.414062 6.765625 -10.6875 L 6.765625 -45.484375 L 17.890625 -45.484375 L 17.890625 -11.328125 C 17.890625 -10.765625 18.09375 -10.28125 18.5 -9.875 C 18.90625 -9.46875 19.390625 -9.265625 19.953125 -9.265625 L 27.9375 -9.265625 L 27.9375 0 Z M 0.78125 -27.515625 L 0.78125 -36.5625 L 27.9375 -36.5625 L 27.9375 -27.515625 Z M 0.78125 -27.515625 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(26.403702, 54.900246)"><g><path d="M 3.84375 0 L 3.84375 -25.796875 C 3.84375 -29.128906 4.789062 -31.742188 6.6875 -33.640625 C 8.59375 -35.546875 11.234375 -36.5 14.609375 -36.5 L 25.234375 -36.5 L 25.234375 -27.515625 L 17.328125 -27.515625 C 16.660156 -27.515625 16.085938 -27.285156 15.609375 -26.828125 C 15.128906 -26.378906 14.890625 -25.800781 14.890625 -25.09375 L 14.890625 0 Z M 3.84375 0 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(47.504187, 54.900246)"><g><path d="M 23.234375 0 C 19.097656 0 15.460938 -0.769531 12.328125 -2.3125 C 9.191406 -3.863281 6.753906 -6.003906 5.015625 -8.734375 C 3.285156 -11.460938 2.421875 -14.632812 2.421875 -18.25 C 2.421875 -22.238281 3.25 -25.660156 4.90625 -28.515625 C 6.570312 -31.367188 8.796875 -33.566406 11.578125 -35.109375 C 14.359375 -36.648438 17.4375 -37.421875 20.8125 -37.421875 C 24.664062 -37.421875 27.882812 -36.613281 30.46875 -35 C 33.0625 -33.382812 35.019531 -31.1875 36.34375 -28.40625 C 37.675781 -25.625 38.34375 -22.453125 38.34375 -18.890625 C 38.34375 -18.273438 38.304688 -17.550781 38.234375 -16.71875 C 38.171875 -15.882812 38.09375 -15.226562 38 -14.75 L 14.046875 -14.75 C 14.328125 -13.519531 14.867188 -12.472656 15.671875 -11.609375 C 16.484375 -10.753906 17.503906 -10.125 18.734375 -9.71875 C 19.972656 -9.320312 21.351562 -9.125 22.875 -9.125 L 34.078125 -9.125 L 34.078125 0 Z M 13.75 -21.671875 L 27.65625 -21.671875 C 27.5625 -22.429688 27.414062 -23.164062 27.21875 -23.875 C 27.03125 -24.59375 26.734375 -25.222656 26.328125 -25.765625 C 25.929688 -26.316406 25.472656 -26.789062 24.953125 -27.1875 C 24.429688 -27.59375 23.820312 -27.914062 23.125 -28.15625 C 22.4375 -28.394531 21.664062 -28.515625 20.8125 -28.515625 C 19.71875 -28.515625 18.742188 -28.320312 17.890625 -27.9375 C 17.035156 -27.5625 16.320312 -27.050781 15.75 -26.40625 C 15.175781 -25.769531 14.734375 -25.035156 14.421875 -24.203125 C 14.117188 -23.367188 13.894531 -22.523438 13.75 -21.671875 Z M 13.75 -21.671875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(83.218247, 54.900246)"><g><path d="M 4.140625 0 L 4.140625 -52.03125 L 15.1875 -52.03125 L 15.1875 -22.734375 L 20.03125 -22.734375 L 28.375 -36.5625 L 40.703125 -36.5625 L 30.859375 -21.3125 C 33.710938 -20.125 35.9375 -18.304688 37.53125 -15.859375 C 39.125 -13.410156 39.921875 -10.546875 39.921875 -7.265625 L 39.921875 0 L 28.796875 0 L 28.796875 -7.265625 C 28.796875 -8.597656 28.472656 -9.796875 27.828125 -10.859375 C 27.191406 -11.929688 26.347656 -12.773438 25.296875 -13.390625 C 24.253906 -14.015625 23.066406 -14.328125 21.734375 -14.328125 L 15.1875 -14.328125 L 15.1875 0 Z M 4.140625 0 "/></g></g></g></g></g></g></svg>

client/public/text-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230" zoomAndPan="magnify" viewBox="49 2 124 56" height="80" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="7fc4e3f80b"><path d="M 49 0.015625 L 174 0.015625 L 174 59.984375 L 49 59.984375 Z M 49 0.015625 " clip-rule="nonzero"/></clipPath><clipPath id="086ce69399"><rect x="0" width="125" y="0" height="60"/></clipPath></defs><g clip-path="url(#7fc4e3f80b)"><g transform="matrix(1, 0, 0, 1, 49, -0.000000000000011803)"><g clip-path="url(#086ce69399)"><g fill="#ffffff" fill-opacity="1"><g transform="translate(0.740932, 54.900246)"><g><path d="M 17.53125 0 C 14.15625 0 11.515625 -0.960938 9.609375 -2.890625 C 7.710938 -4.816406 6.765625 -7.414062 6.765625 -10.6875 L 6.765625 -45.484375 L 17.890625 -45.484375 L 17.890625 -11.328125 C 17.890625 -10.765625 18.09375 -10.28125 18.5 -9.875 C 18.90625 -9.46875 19.390625 -9.265625 19.953125 -9.265625 L 27.9375 -9.265625 L 27.9375 0 Z M 0.78125 -27.515625 L 0.78125 -36.5625 L 27.9375 -36.5625 L 27.9375 -27.515625 Z M 0.78125 -27.515625 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(26.403702, 54.900246)"><g><path d="M 3.84375 0 L 3.84375 -25.796875 C 3.84375 -29.128906 4.789062 -31.742188 6.6875 -33.640625 C 8.59375 -35.546875 11.234375 -36.5 14.609375 -36.5 L 25.234375 -36.5 L 25.234375 -27.515625 L 17.328125 -27.515625 C 16.660156 -27.515625 16.085938 -27.285156 15.609375 -26.828125 C 15.128906 -26.378906 14.890625 -25.800781 14.890625 -25.09375 L 14.890625 0 Z M 3.84375 0 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(47.504187, 54.900246)"><g><path d="M 23.234375 0 C 19.097656 0 15.460938 -0.769531 12.328125 -2.3125 C 9.191406 -3.863281 6.753906 -6.003906 5.015625 -8.734375 C 3.285156 -11.460938 2.421875 -14.632812 2.421875 -18.25 C 2.421875 -22.238281 3.25 -25.660156 4.90625 -28.515625 C 6.570312 -31.367188 8.796875 -33.566406 11.578125 -35.109375 C 14.359375 -36.648438 17.4375 -37.421875 20.8125 -37.421875 C 24.664062 -37.421875 27.882812 -36.613281 30.46875 -35 C 33.0625 -33.382812 35.019531 -31.1875 36.34375 -28.40625 C 37.675781 -25.625 38.34375 -22.453125 38.34375 -18.890625 C 38.34375 -18.273438 38.304688 -17.550781 38.234375 -16.71875 C 38.171875 -15.882812 38.09375 -15.226562 38 -14.75 L 14.046875 -14.75 C 14.328125 -13.519531 14.867188 -12.472656 15.671875 -11.609375 C 16.484375 -10.753906 17.503906 -10.125 18.734375 -9.71875 C 19.972656 -9.320312 21.351562 -9.125 22.875 -9.125 L 34.078125 -9.125 L 34.078125 0 Z M 13.75 -21.671875 L 27.65625 -21.671875 C 27.5625 -22.429688 27.414062 -23.164062 27.21875 -23.875 C 27.03125 -24.59375 26.734375 -25.222656 26.328125 -25.765625 C 25.929688 -26.316406 25.472656 -26.789062 24.953125 -27.1875 C 24.429688 -27.59375 23.820312 -27.914062 23.125 -28.15625 C 22.4375 -28.394531 21.664062 -28.515625 20.8125 -28.515625 C 19.71875 -28.515625 18.742188 -28.320312 17.890625 -27.9375 C 17.035156 -27.5625 16.320312 -27.050781 15.75 -26.40625 C 15.175781 -25.769531 14.734375 -25.035156 14.421875 -24.203125 C 14.117188 -23.367188 13.894531 -22.523438 13.75 -21.671875 Z M 13.75 -21.671875 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(83.218247, 54.900246)"><g><path d="M 4.140625 0 L 4.140625 -52.03125 L 15.1875 -52.03125 L 15.1875 -22.734375 L 20.03125 -22.734375 L 28.375 -36.5625 L 40.703125 -36.5625 L 30.859375 -21.3125 C 33.710938 -20.125 35.9375 -18.304688 37.53125 -15.859375 C 39.125 -13.410156 39.921875 -10.546875 39.921875 -7.265625 L 39.921875 0 L 28.796875 0 L 28.796875 -7.265625 C 28.796875 -8.597656 28.472656 -9.796875 27.828125 -10.859375 C 27.191406 -11.929688 26.347656 -12.773438 25.296875 -13.390625 C 24.253906 -14.015625 23.066406 -14.328125 21.734375 -14.328125 L 15.1875 -14.328125 L 15.1875 0 Z M 4.140625 0 "/></g></g></g></g></g></g></svg>

client/scripts/generate-icons.mjs

@@ -1,29 +0,0 @@
-/**
- * Generates PNG icons for PWA from the master SVG icon.
- * Run: node scripts/generate-icons.mjs
- * Called automatically via the "prebuild" npm script.
- */
-import { readFileSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-import sharp from 'sharp';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const iconsDir = join(__dirname, '..', 'public', 'icons');
-const svgBuffer = readFileSync(join(iconsDir, 'icon.svg'));
-
-const sizes = [
-  { name: 'apple-touch-icon-180x180.png', size: 180 },
-  { name: 'icon-192x192.png', size: 192 },
-  { name: 'icon-512x512.png', size: 512 },
-];
-
-for (const { name, size } of sizes) {
-  await sharp(svgBuffer, { density: 300 })
-    .resize(size, size)
-    .png({ compressionLevel: 9 })
-    .toFile(join(iconsDir, name));
-  console.log(`  \u2713 ${name} (${size}x${size})`);
-}
-
-console.log('PWA icons generated.');

client/src/App.tsx

@@ -1,234 +0,0 @@
-import React, { useEffect, ReactNode } from 'react'
-import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
-import { useAuthStore } from './store/authStore'
-import { useSettingsStore } from './store/settingsStore'
-import LoginPage from './pages/LoginPage'
-import DashboardPage from './pages/DashboardPage'
-import TripPlannerPage from './pages/TripPlannerPage'
-import FilesPage from './pages/FilesPage'
-import AdminPage from './pages/AdminPage'
-import SettingsPage from './pages/SettingsPage'
-import VacayPage from './pages/VacayPage'
-import AtlasPage from './pages/AtlasPage'
-import SharedTripPage from './pages/SharedTripPage'
-import InAppNotificationsPage from './pages/InAppNotificationsPage.tsx'
-import { ToastContainer } from './components/shared/Toast'
-import { TranslationProvider, useTranslation } from './i18n'
-import { authApi } from './api/client'
-import { usePermissionsStore, PermissionLevel } from './store/permissionsStore'
-import { useInAppNotificationListener } from './hooks/useInAppNotificationListener.ts'
-
-interface ProtectedRouteProps {
-  children: ReactNode
-  adminRequired?: boolean
-}
-
-function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps) {
-  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
-  const user = useAuthStore((s) => s.user)
-  const isLoading = useAuthStore((s) => s.isLoading)
-  const appRequireMfa = useAuthStore((s) => s.appRequireMfa)
-  const { t } = useTranslation()
-  const location = useLocation()
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="flex flex-col items-center gap-3">
-          <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-900 rounded-full animate-spin"></div>
-          <p className="text-slate-500 text-sm">{t('common.loading')}</p>
-        </div>
-      </div>
-    )
-  }
-
-  if (!isAuthenticated) {
-    const redirectParam = encodeURIComponent(location.pathname + location.search)
-    return <Navigate to={`/login?redirect=${redirectParam}`} replace />
-  }
-
-  if (
-    appRequireMfa &&
-    user &&
-    !user.mfa_enabled &&
-    location.pathname !== '/settings'
-  ) {
-    return <Navigate to="/settings?mfa=required" replace />
-  }
-
-  if (adminRequired && user && user.role !== 'admin') {
-    return <Navigate to="/dashboard" replace />
-  }
-
-  return <>{children}</>
-}
-
-function RootRedirect() {
-  const { isAuthenticated, isLoading } = useAuthStore()
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-900 rounded-full animate-spin"></div>
-      </div>
-    )
-  }
-
-  return <Navigate to={isAuthenticated ? '/dashboard' : '/login'} replace />
-}
-
-export default function App() {
-  const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled } = useAuthStore()
-  const { loadSettings } = useSettingsStore()
-
-  useEffect(() => {
-    if (!location.pathname.startsWith('/shared/')) {
-      loadUser()
-    }
-    authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
-      if (config?.demo_mode) setDemoMode(true)
-      if (config?.dev_mode) setDevMode(true)
-      if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
-      if (config?.timezone) setServerTimezone(config.timezone)
-      if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
-      if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled)
-      if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions)
-
-      if (config?.version) {
-        const storedVersion = localStorage.getItem('trek_app_version')
-        if (storedVersion && storedVersion !== config.version) {
-          try {
-            if ('caches' in window) {
-              const names = await caches.keys()
-              await Promise.all(names.map(n => caches.delete(n)))
-            }
-            if ('serviceWorker' in navigator) {
-              const regs = await navigator.serviceWorker.getRegistrations()
-              await Promise.all(regs.map(r => r.unregister()))
-            }
-          } catch {}
-          localStorage.setItem('trek_app_version', config.version)
-          window.location.reload()
-          return
-        }
-        localStorage.setItem('trek_app_version', config.version)
-      }
-    }).catch(() => {})
-  }, [])
-
-  const { settings } = useSettingsStore()
-
-  useInAppNotificationListener()
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      loadSettings()
-    }
-  }, [isAuthenticated])
-
-  const location = useLocation()
-  const isSharedPage = location.pathname.startsWith('/shared/')
-
-  useEffect(() => {
-    // Shared page always forces light mode
-    if (isSharedPage) {
-      document.documentElement.classList.remove('dark')
-      const meta = document.querySelector('meta[name="theme-color"]')
-      if (meta) meta.setAttribute('content', '#ffffff')
-      return
-    }
-
-    const mode = settings.dark_mode
-    const applyDark = (isDark: boolean) => {
-      document.documentElement.classList.toggle('dark', isDark)
-      const meta = document.querySelector('meta[name="theme-color"]')
-      if (meta) meta.setAttribute('content', isDark ? '#09090b' : '#ffffff')
-    }
-
-    if (mode === 'auto') {
-      const mq = window.matchMedia('(prefers-color-scheme: dark)')
-      applyDark(mq.matches)
-      const handler = (e: MediaQueryListEvent) => applyDark(e.matches)
-      mq.addEventListener('change', handler)
-      return () => mq.removeEventListener('change', handler)
-    }
-    applyDark(mode === true || mode === 'dark')
-  }, [settings.dark_mode, isSharedPage])
-
-  return (
-    <TranslationProvider>
-      <ToastContainer />
-      <Routes>
-        <Route path="/" element={<RootRedirect />} />
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/shared/:token" element={<SharedTripPage />} />
-        <Route path="/register" element={<LoginPage />} />
-        <Route
-          path="/dashboard"
-          element={
-            <ProtectedRoute>
-              <DashboardPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/trips/:id"
-          element={
-            <ProtectedRoute>
-              <TripPlannerPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/trips/:id/files"
-          element={
-            <ProtectedRoute>
-              <FilesPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/admin"
-          element={
-            <ProtectedRoute adminRequired>
-              <AdminPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/settings"
-          element={
-            <ProtectedRoute>
-              <SettingsPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/vacay"
-          element={
-            <ProtectedRoute>
-              <VacayPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/atlas"
-          element={
-            <ProtectedRoute>
-              <AtlasPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/notifications"
-          element={
-            <ProtectedRoute>
-              <InAppNotificationsPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
-    </TranslationProvider>
-  )
-}

client/src/api/authUrl.ts

@@ -1,58 +0,0 @@
-export async function getAuthUrl(url: string, purpose: 'download'): Promise<string> {
-  if (!url) return url
-  try {
-    const resp = await fetch('/api/auth/resource-token', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'include',
-      body: JSON.stringify({ purpose }),
-    })
-    if (!resp.ok) return url
-    const { token } = await resp.json()
-    return `${url}${url.includes('?') ? '&' : '?'}token=${token}`
-  } catch {
-    return url
-  }
-}
-
-// ── Blob-based image fetching (Safari-safe, no ephemeral tokens needed) ────
-
-const MAX_CONCURRENT = 6
-let active = 0
-const queue: Array<() => void> = []
-
-function dequeue() {
-  while (active < MAX_CONCURRENT && queue.length > 0) {
-    active++
-    queue.shift()!()
-  }
-}
-
-export function clearImageQueue() {
-  queue.length = 0
-}
-
-export async function fetchImageAsBlob(url: string): Promise<string> {
-  if (!url) return ''
-  return new Promise<string>((resolve) => {
-    const run = async () => {
-      try {
-        const resp = await fetch(url, { credentials: 'include' })
-        if (!resp.ok) { resolve(''); return }
-        const blob = await resp.blob()
-        resolve(URL.createObjectURL(blob))
-      } catch {
-        resolve('')
-      } finally {
-        active--
-        dequeue()
-      }
-    }
-    if (active < MAX_CONCURRENT) {
-      active++
-      run()
-    } else {
-      queue.push(run)
-    }
-  })
-}

client/src/api/client.ts

@@ -1,358 +0,0 @@
-import axios, { AxiosInstance } from 'axios'
-import { getSocketId } from './websocket'
-
-const apiClient: AxiosInstance = axios.create({
-  baseURL: '/api',
-  withCredentials: true,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-
-// Request interceptor - add socket ID
-apiClient.interceptors.request.use(
-  (config) => {
-    const sid = getSocketId()
-    if (sid) {
-      config.headers['X-Socket-Id'] = sid
-    }
-    return config
-  },
-  (error) => Promise.reject(error)
-)
-
-// Response interceptor - handle 401
-apiClient.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
-      if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/')) {
-        const currentPath = window.location.pathname + window.location.search
-        window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
-      }
-    }
-    if (
-      error.response?.status === 403 &&
-      (error.response?.data as { code?: string } | undefined)?.code === 'MFA_REQUIRED' &&
-      !window.location.pathname.startsWith('/settings')
-    ) {
-      window.location.href = '/settings?mfa=required'
-    }
-    return Promise.reject(error)
-  }
-)
-
-export const authApi = {
-  register: (data: { username: string; email: string; password: string; invite_token?: string }) => apiClient.post('/auth/register', data).then(r => r.data),
-  validateInvite: (token: string) => apiClient.get(`/auth/invite/${token}`).then(r => r.data),
-  login: (data: { email: string; password: string }) => apiClient.post('/auth/login', data).then(r => r.data),
-  verifyMfaLogin: (data: { mfa_token: string; code: string }) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
-  mfaSetup: () => apiClient.post('/auth/mfa/setup', {}).then(r => r.data),
-  mfaEnable: (data: { code: string }) => apiClient.post('/auth/mfa/enable', data).then(r => r.data as { success: boolean; mfa_enabled: boolean; backup_codes?: string[] }),
-  mfaDisable: (data: { password: string; code: string }) => apiClient.post('/auth/mfa/disable', data).then(r => r.data),
-  me: () => apiClient.get('/auth/me').then(r => r.data),
-  updateMapsKey: (key: string | null) => apiClient.put('/auth/me/maps-key', { maps_api_key: key }).then(r => r.data),
-  updateApiKeys: (data: Record<string, string | null>) => apiClient.put('/auth/me/api-keys', data).then(r => r.data),
-  updateSettings: (data: Record<string, unknown>) => apiClient.put('/auth/me/settings', data).then(r => r.data),
-  getSettings: () => apiClient.get('/auth/me/settings').then(r => r.data),
-  listUsers: () => apiClient.get('/auth/users').then(r => r.data),
-  uploadAvatar: (formData: FormData) => apiClient.post('/auth/avatar', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
-  deleteAvatar: () => apiClient.delete('/auth/avatar').then(r => r.data),
-  getAppConfig: () => apiClient.get('/auth/app-config').then(r => r.data),
-  updateAppSettings: (data: Record<string, unknown>) => apiClient.put('/auth/app-settings', data).then(r => r.data),
-  validateKeys: () => apiClient.get('/auth/validate-keys').then(r => r.data),
-  travelStats: () => apiClient.get('/auth/travel-stats').then(r => r.data),
-  changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
-  deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
-  demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
-  mcpTokens: {
-    list: () => apiClient.get('/auth/mcp-tokens').then(r => r.data),
-    create: (name: string) => apiClient.post('/auth/mcp-tokens', { name }).then(r => r.data),
-    delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
-  },
-}
-
-export const tripsApi = {
-  list: (params?: Record<string, unknown>) => apiClient.get('/trips', { params }).then(r => r.data),
-  create: (data: Record<string, unknown>) => apiClient.post('/trips', data).then(r => r.data),
-  get: (id: number | string) => apiClient.get(`/trips/${id}`).then(r => r.data),
-  update: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
-  delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
-  uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
-  archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
-  unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
-  getMembers: (id: number | string) => apiClient.get(`/trips/${id}/members`).then(r => r.data),
-  addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier }).then(r => r.data),
-  removeMember: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/members/${userId}`).then(r => r.data),
-  copy: (id: number | string, data?: { title?: string }) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
-}
-
-export const daysApi = {
-  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/days`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
-  delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
-}
-
-export const placesApi = {
-  list: (tripId: number | string, params?: Record<string, unknown>) => apiClient.get(`/trips/${tripId}/places`, { params }).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
-  get: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}`).then(r => r.data),
-  update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
-  searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
-  importGpx: (tripId: number | string, file: File) => {
-    const fd = new FormData(); fd.append('file', file)
-    return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
-  },
-  importGoogleList: (tripId: number | string, url: string) =>
-    apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
-}
-
-export const assignmentsApi = {
-  list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/assignments`).then(r => r.data),
-  create: (tripId: number | string, dayId: number | string, data: { place_id: number | string }) => apiClient.post(`/trips/${tripId}/days/${dayId}/assignments`, data).then(r => r.data),
-  delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/assignments/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, dayId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/reorder`, { orderedIds }).then(r => r.data),
-  move: (tripId: number | string, assignmentId: number, newDayId: number | string, orderIndex: number | null) => apiClient.put(`/trips/${tripId}/assignments/${assignmentId}/move`, { new_day_id: newDayId, order_index: orderIndex }).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/${id}`, data).then(r => r.data),
-  getParticipants: (tripId: number | string, id: number) => apiClient.get(`/trips/${tripId}/assignments/${id}/participants`).then(r => r.data),
-  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds }).then(r => r.data),
-  updateTime: (tripId: number | string, id: number, times: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
-}
-
-export const packingApi = {
-  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
-  bulkImport: (tripId: number | string, items: { name: string; category?: string; quantity?: number }[]) => apiClient.post(`/trips/${tripId}/packing/import`, { items }).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/packing/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds }).then(r => r.data),
-  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
-  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
-  applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
-  saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
-  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds }).then(r => r.data),
-  listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
-  createBag: (tripId: number | string, data: { name: string; color?: string }) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
-  updateBag: (tripId: number | string, bagId: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
-  deleteBag: (tripId: number | string, bagId: number) => apiClient.delete(`/trips/${tripId}/packing/bags/${bagId}`).then(r => r.data),
-}
-
-export const todoApi = {
-  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/todo/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds }).then(r => r.data),
-  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo/category-assignees`).then(r => r.data),
-  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
-}
-
-export const tagsApi = {
-  list: () => apiClient.get('/tags').then(r => r.data),
-  create: (data: Record<string, unknown>) => apiClient.post('/tags', data).then(r => r.data),
-  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/tags/${id}`, data).then(r => r.data),
-  delete: (id: number) => apiClient.delete(`/tags/${id}`).then(r => r.data),
-}
-
-export const categoriesApi = {
-  list: () => apiClient.get('/categories').then(r => r.data),
-  create: (data: Record<string, unknown>) => apiClient.post('/categories', data).then(r => r.data),
-  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/categories/${id}`, data).then(r => r.data),
-  delete: (id: number) => apiClient.delete(`/categories/${id}`).then(r => r.data),
-}
-
-export const adminApi = {
-  users: () => apiClient.get('/admin/users').then(r => r.data),
-  createUser: (data: Record<string, unknown>) => apiClient.post('/admin/users', data).then(r => r.data),
-  updateUser: (id: number, data: Record<string, unknown>) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
-  deleteUser: (id: number) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
-  stats: () => apiClient.get('/admin/stats').then(r => r.data),
-  saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
-  getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
-  updateOidc: (data: Record<string, unknown>) => apiClient.put('/admin/oidc', data).then(r => r.data),
-  addons: () => apiClient.get('/admin/addons').then(r => r.data),
-  updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
-  checkVersion: () => apiClient.get('/admin/version-check').then(r => r.data),
-  getBagTracking: () => apiClient.get('/admin/bag-tracking').then(r => r.data),
-  updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
-  packingTemplates: () => apiClient.get('/admin/packing-templates').then(r => r.data),
-  getPackingTemplate: (id: number) => apiClient.get(`/admin/packing-templates/${id}`).then(r => r.data),
-  createPackingTemplate: (data: { name: string }) => apiClient.post('/admin/packing-templates', data).then(r => r.data),
-  updatePackingTemplate: (id: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${id}`, data).then(r => r.data),
-  deletePackingTemplate: (id: number) => apiClient.delete(`/admin/packing-templates/${id}`).then(r => r.data),
-  addTemplateCategory: (templateId: number, data: { name: string }) => apiClient.post(`/admin/packing-templates/${templateId}/categories`, data).then(r => r.data),
-  updateTemplateCategory: (templateId: number, catId: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${templateId}/categories/${catId}`, data).then(r => r.data),
-  deleteTemplateCategory: (templateId: number, catId: number) => apiClient.delete(`/admin/packing-templates/${templateId}/categories/${catId}`).then(r => r.data),
-  addTemplateItem: (templateId: number, catId: number, data: { name: string }) => apiClient.post(`/admin/packing-templates/${templateId}/categories/${catId}/items`, data).then(r => r.data),
-  updateTemplateItem: (templateId: number, itemId: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${templateId}/items/${itemId}`, data).then(r => r.data),
-  deleteTemplateItem: (templateId: number, itemId: number) => apiClient.delete(`/admin/packing-templates/${templateId}/items/${itemId}`).then(r => r.data),
-  listInvites: () => apiClient.get('/admin/invites').then(r => r.data),
-  createInvite: (data: { max_uses: number; expires_in_days?: number }) => apiClient.post('/admin/invites', data).then(r => r.data),
-  deleteInvite: (id: number) => apiClient.delete(`/admin/invites/${id}`).then(r => r.data),
-  auditLog: (params?: { limit?: number; offset?: number }) =>
-    apiClient.get('/admin/audit-log', { params }).then(r => r.data),
-  mcpTokens: () => apiClient.get('/admin/mcp-tokens').then(r => r.data),
-  deleteMcpToken: (id: number) => apiClient.delete(`/admin/mcp-tokens/${id}`).then(r => r.data),
-  getPermissions: () => apiClient.get('/admin/permissions').then(r => r.data),
-  updatePermissions: (permissions: Record<string, string>) => apiClient.put('/admin/permissions', { permissions }).then(r => r.data),
-  rotateJwtSecret: () => apiClient.post('/admin/rotate-jwt-secret').then(r => r.data),
-  sendTestNotification: (data: Record<string, unknown>) =>
-    apiClient.post('/admin/dev/test-notification', data).then(r => r.data),
-  getNotificationPreferences: () => apiClient.get('/admin/notification-preferences').then(r => r.data),
-  updateNotificationPreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/admin/notification-preferences', prefs).then(r => r.data),
-}
-
-export const addonsApi = {
-  enabled: () => apiClient.get('/addons').then(r => r.data),
-}
-
-export const mapsApi = {
-  search: (query: string, lang?: string) => apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query }).then(r => r.data),
-  details: (placeId: string, lang?: string) => apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang } }).then(r => r.data),
-  placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => r.data),
-  reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => r.data),
-  resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => r.data),
-}
-
-export const budgetApi = {
-  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/budget/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
-  setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds }).then(r => r.data),
-  togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
-  perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
-  settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
-}
-
-export const filesApi = {
-  list: (tripId: number | string, trash?: boolean) => apiClient.get(`/trips/${tripId}/files`, { params: trash ? { trash: 'true' } : {} }).then(r => r.data),
-  upload: (tripId: number | string, formData: FormData) => apiClient.post(`/trips/${tripId}/files`, formData, {
-    headers: { 'Content-Type': 'multipart/form-data' }
-  }).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}`).then(r => r.data),
-  toggleStar: (tripId: number | string, id: number) => apiClient.patch(`/trips/${tripId}/files/${id}/star`).then(r => r.data),
-  restore: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/files/${id}/restore`).then(r => r.data),
-  permanentDelete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}/permanent`).then(r => r.data),
-  emptyTrash: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/files/trash/empty`).then(r => r.data),
-  addLink: (tripId: number | string, fileId: number, data: { reservation_id?: number; assignment_id?: number }) => apiClient.post(`/trips/${tripId}/files/${fileId}/link`, data).then(r => r.data),
-  removeLink: (tripId: number | string, fileId: number, linkId: number) => apiClient.delete(`/trips/${tripId}/files/${fileId}/link/${linkId}`).then(r => r.data),
-  getLinks: (tripId: number | string, fileId: number) => apiClient.get(`/trips/${tripId}/files/${fileId}/links`).then(r => r.data),
-}
-
-export const reservationsApi = {
-  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/reservations`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
-  updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
-}
-
-export const weatherApi = {
-  get: (lat: number, lng: number, date: string) => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => r.data),
-  getDetailed: (lat: number, lng: number, date: string, lang?: string) => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => r.data),
-}
-
-export const settingsApi = {
-  get: () => apiClient.get('/settings').then(r => r.data),
-  set: (key: string, value: unknown) => apiClient.put('/settings', { key, value }).then(r => r.data),
-  setBulk: (settings: Record<string, unknown>) => apiClient.post('/settings/bulk', { settings }).then(r => r.data),
-}
-
-export const accommodationsApi = {
-  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/accommodations`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`).then(r => r.data),
-}
-
-export const dayNotesApi = {
-  list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/notes`).then(r => r.data),
-  create: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days/${dayId}/notes`, data).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/notes/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/notes/${id}`).then(r => r.data),
-}
-
-export const collabApi = {
-  getNotes: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/notes`).then(r => r.data),
-  createNote: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
-  updateNote: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
-  deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
-  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
-  deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
-  getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
-  createPoll: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
-  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex }).then(r => r.data),
-  closePoll: (tripId: number | string, id: number) => apiClient.put(`/trips/${tripId}/collab/polls/${id}/close`).then(r => r.data),
-  deletePoll: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/polls/${id}`).then(r => r.data),
-  getMessages: (tripId: number | string, before?: string) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
-  sendMessage: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
-  deleteMessage: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
-  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji }).then(r => r.data),
-  linkPreview: (tripId: number | string, url: string) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),
-}
-
-export const backupApi = {
-  list: () => apiClient.get('/backup/list').then(r => r.data),
-  create: () => apiClient.post('/backup/create').then(r => r.data),
-  download: async (filename: string): Promise<void> => {
-    const res = await fetch(`/api/backup/download/${filename}`, {
-      credentials: 'include',
-    })
-    if (!res.ok) throw new Error('Download failed')
-    const blob = await res.blob()
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = filename
-    a.click()
-    URL.revokeObjectURL(url)
-  },
-  delete: (filename: string) => apiClient.delete(`/backup/${filename}`).then(r => r.data),
-  restore: (filename: string) => apiClient.post(`/backup/restore/${filename}`).then(r => r.data),
-  uploadRestore: (file: File) => {
-    const form = new FormData()
-    form.append('backup', file)
-    return apiClient.post('/backup/upload-restore', form, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
-  },
-  getAutoSettings: () => apiClient.get('/backup/auto-settings').then(r => r.data),
-  setAutoSettings: (settings: Record<string, unknown>) => apiClient.put('/backup/auto-settings', settings).then(r => r.data),
-}
-
-export const shareApi = {
-  getLink: (tripId: number | string) => apiClient.get(`/trips/${tripId}/share-link`).then(r => r.data),
-  createLink: (tripId: number | string, perms?: Record<string, boolean>) => apiClient.post(`/trips/${tripId}/share-link`, perms || {}).then(r => r.data),
-  deleteLink: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/share-link`).then(r => r.data),
-  getSharedTrip: (token: string) => apiClient.get(`/shared/${token}`).then(r => r.data),
-}
-
-export const notificationsApi = {
-  getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
-  updatePreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
-  testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => r.data),
-  testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => r.data),
-}
-
-export const inAppNotificationsApi = {
-  list: (params?: { limit?: number; offset?: number; unread_only?: boolean }) =>
-    apiClient.get('/notifications/in-app', { params }).then(r => r.data),
-  unreadCount: () =>
-    apiClient.get('/notifications/in-app/unread-count').then(r => r.data),
-  markRead: (id: number) =>
-    apiClient.put(`/notifications/in-app/${id}/read`).then(r => r.data),
-  markUnread: (id: number) =>
-    apiClient.put(`/notifications/in-app/${id}/unread`).then(r => r.data),
-  markAllRead: () =>
-    apiClient.put('/notifications/in-app/read-all').then(r => r.data),
-  delete: (id: number) =>
-    apiClient.delete(`/notifications/in-app/${id}`).then(r => r.data),
-  deleteAll: () =>
-    apiClient.delete('/notifications/in-app/all').then(r => r.data),
-  respond: (id: number, response: 'positive' | 'negative') =>
-    apiClient.post(`/notifications/in-app/${id}/respond`, { response }).then(r => r.data),
-}
-
-export default apiClient

client/src/api/websocket.ts

@@ -1,169 +0,0 @@
-// Singleton WebSocket manager for real-time collaboration
-
-type WebSocketListener = (event: Record<string, unknown>) => void
-type RefetchCallback = (tripId: string) => void
-
-let socket: WebSocket | null = null
-let reconnectTimer: ReturnType<typeof setTimeout> | null = null
-let reconnectDelay = 1000
-const MAX_RECONNECT_DELAY = 30000
-const listeners = new Set<WebSocketListener>()
-const activeTrips = new Set<string>()
-let shouldReconnect = false
-let refetchCallback: RefetchCallback | null = null
-let mySocketId: string | null = null
-let connecting = false
-
-export function getSocketId(): string | null {
-  return mySocketId
-}
-
-export function setRefetchCallback(fn: RefetchCallback | null): void {
-  refetchCallback = fn
-}
-
-function getWsUrl(wsToken: string): string {
-  const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
-  return `${protocol}://${location.host}/ws?token=${wsToken}`
-}
-
-async function fetchWsToken(): Promise<string | null> {
-  try {
-    const resp = await fetch('/api/auth/ws-token', {
-      method: 'POST',
-      credentials: 'include',
-    })
-    if (resp.status === 401) {
-      // Session expired — stop reconnecting
-      shouldReconnect = false
-      return null
-    }
-    if (!resp.ok) return null
-    const { token } = await resp.json()
-    return token as string
-  } catch {
-    return null
-  }
-}
-
-function handleMessage(event: MessageEvent): void {
-  try {
-    const parsed = JSON.parse(event.data)
-    if (parsed.type === 'welcome') {
-      mySocketId = parsed.socketId
-      return
-    }
-    listeners.forEach(fn => {
-      try { fn(parsed) } catch (err: unknown) { console.error('WebSocket listener error:', err) }
-    })
-  } catch (err: unknown) {
-    console.error('WebSocket message parse error:', err)
-  }
-}
-
-function scheduleReconnect(): void {
-  if (reconnectTimer) return
-  reconnectTimer = setTimeout(() => {
-    reconnectTimer = null
-    if (shouldReconnect) {
-      connectInternal(true)
-    }
-  }, reconnectDelay)
-  reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
-}
-
-async function connectInternal(_isReconnect = false): Promise<void> {
-  if (connecting) return
-  if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
-    return
-  }
-
-  connecting = true
-  const wsToken = await fetchWsToken()
-  connecting = false
-
-  if (!wsToken) {
-    if (shouldReconnect) scheduleReconnect()
-    return
-  }
-
-  const url = getWsUrl(wsToken)
-  socket = new WebSocket(url)
-
-  socket.onopen = () => {
-    reconnectDelay = 1000
-    if (activeTrips.size > 0) {
-      activeTrips.forEach(tripId => {
-        if (socket && socket.readyState === WebSocket.OPEN) {
-          socket.send(JSON.stringify({ type: 'join', tripId }))
-        }
-      })
-      if (refetchCallback) {
-        activeTrips.forEach(tripId => {
-          try { refetchCallback!(tripId) } catch (err: unknown) {
-            console.error('Failed to refetch trip data on reconnect:', err)
-          }
-        })
-      }
-    }
-  }
-
-  socket.onmessage = handleMessage
-
-  socket.onclose = () => {
-    socket = null
-    if (shouldReconnect) {
-      scheduleReconnect()
-    }
-  }
-
-  socket.onerror = () => {
-    // onclose will fire after onerror, reconnect handled there
-  }
-}
-
-export function connect(): void {
-  shouldReconnect = true
-  reconnectDelay = 1000
-  if (reconnectTimer) {
-    clearTimeout(reconnectTimer)
-    reconnectTimer = null
-  }
-  connectInternal(false)
-}
-
-export function disconnect(): void {
-  shouldReconnect = false
-  if (reconnectTimer) {
-    clearTimeout(reconnectTimer)
-    reconnectTimer = null
-  }
-  activeTrips.clear()
-  if (socket) {
-    socket.onclose = null
-    socket.close()
-    socket = null
-  }
-}
-
-export function joinTrip(tripId: number | string): void {
-  activeTrips.add(String(tripId))
-  if (socket && socket.readyState === WebSocket.OPEN) {
-    socket.send(JSON.stringify({ type: 'join', tripId: String(tripId) }))
-  }
-}
-
-export function leaveTrip(tripId: number | string): void {
-  activeTrips.delete(String(tripId))
-  if (socket && socket.readyState === WebSocket.OPEN) {
-    socket.send(JSON.stringify({ type: 'leave', tripId: String(tripId) }))
-  }
-}
-
-export function addListener(fn: WebSocketListener): void {
-  listeners.add(fn)
-}
-
-export function removeListener(fn: WebSocketListener): void {
-  listeners.delete(fn)
-}

client/src/components/Admin/AddonManager.tsx

@@ -1,325 +0,0 @@
-import { useEffect, useState } from 'react'
-import { adminApi } from '../../api/client'
-import { useTranslation } from '../../i18n'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useAddonStore } from '../../store/addonStore'
-import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2 } from 'lucide-react'
-
-const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2,
-}
-
-interface Addon {
-  id: string
-  name: string
-  description: string
-  icon: string
-  type: string
-  enabled: boolean
-  config?: Record<string, unknown>
-}
-
-interface ProviderOption {
-  key: string
-  label: string
-  description: string
-  enabled: boolean
-  toggle: () => Promise<void>
-}
-
-interface AddonIconProps {
-  name: string
-  size?: number
-}
-
-function AddonIcon({ name, size = 20 }: AddonIconProps) {
-  const Icon = ICON_MAP[name] || Puzzle
-  return <Icon size={size} />
-}
-
-export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }: { bagTrackingEnabled?: boolean; onToggleBagTracking?: () => void }) {
-  const { t } = useTranslation()
-  const dm = useSettingsStore(s => s.settings.dark_mode)
-  const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  const toast = useToast()
-  const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
-  const [addons, setAddons] = useState<Addon[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    loadAddons()
-  }, [])
-
-  const loadAddons = async () => {
-    setLoading(true)
-    try {
-      const data = await adminApi.addons()
-      setAddons(data.addons)
-    } catch (err: unknown) {
-      toast.error(t('admin.addons.toast.error'))
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleToggle = async (addon: Addon) => {
-    const newEnabled = !addon.enabled
-    // Optimistic update
-    setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
-    try {
-      await adminApi.updateAddon(addon.id, { enabled: newEnabled })
-      refreshGlobalAddons()
-      toast.success(t('admin.addons.toast.updated'))
-    } catch (err: unknown) {
-      // Rollback
-      setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: !newEnabled } : a))
-      toast.error(t('admin.addons.toast.error'))
-    }
-  }
-
-  const isPhotoProviderAddon = (addon: Addon) => {
-    return addon.type === 'photo_provider'
-  }
-
-  const isPhotosAddon = (addon: Addon) => {
-    const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase()
-    return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
-  }
-
-  const handleTogglePhotoProvider = async (providerAddon: Addon) => {
-    const enableProvider = !providerAddon.enabled
-    const prev = addons
-
-    setAddons(current => current.map(a => a.id === providerAddon.id ? { ...a, enabled: enableProvider } : a))
-
-    try {
-      await adminApi.updateAddon(providerAddon.id, { enabled: enableProvider })
-      refreshGlobalAddons()
-      toast.success(t('admin.addons.toast.updated'))
-    } catch {
-      setAddons(prev)
-      toast.error(t('admin.addons.toast.error'))
-    }
-  }
-
-  const tripAddons = addons.filter(a => a.type === 'trip')
-  const globalAddons = addons.filter(a => a.type === 'global')
-  const photoProviderAddons = addons.filter(isPhotoProviderAddon)
-  const integrationAddons = addons.filter(a => a.type === 'integration')
-  const photosAddon = tripAddons.find(isPhotosAddon)
-  const providerOptions: ProviderOption[] = photoProviderAddons.map((provider) => ({
-      key: provider.id,
-      label: provider.name,
-      description: provider.description,
-      enabled: provider.enabled,
-      toggle: () => handleTogglePhotoProvider(provider),
-    }))
-  const photosDerivedEnabled = providerOptions.some(p => p.enabled)
-
-  if (loading) {
-    return (
-      <div className="p-8 text-center">
-        <div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" style={{ borderTopColor: 'var(--text-primary)' }}></div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-        <div className="px-6 py-4 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
-          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.title')}</h2>
-          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
-            {t('admin.addons.subtitleBefore')}<img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 11, display: 'inline', verticalAlign: 'middle', opacity: 0.7 }} />{t('admin.addons.subtitleAfter')}
-          </p>
-        </div>
-
-        {addons.length === 0 ? (
-          <div className="p-8 text-center text-sm" style={{ color: 'var(--text-faint)' }}>
-            {t('admin.addons.noAddons')}
-          </div>
-        ) : (
-          <div>
-            {/* Trip Addons */}
-            {tripAddons.length > 0 && (
-              <div>
-                <div className="px-6 py-2.5 border-b flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
-                  <Briefcase size={13} style={{ color: 'var(--text-muted)' }} />
-                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
-                    {t('admin.addons.type.trip')} — {t('admin.addons.tripHint')}
-                  </span>
-                </div>
-                {tripAddons.map(addon => (
-                  <div key={addon.id}>
-                    <AddonRow
-                      addon={addon}
-                      onToggle={handleToggle}
-                      t={t}
-                      nameOverride={photosAddon && addon.id === photosAddon.id ? 'Memories providers' : undefined}
-                      descriptionOverride={photosAddon && addon.id === photosAddon.id ? 'Enable or disable each photo provider.' : undefined}
-                      statusOverride={photosAddon && addon.id === photosAddon.id ? photosDerivedEnabled : undefined}
-                      hideToggle={photosAddon && addon.id === photosAddon.id}
-                    />
-                    {photosAddon && addon.id === photosAddon.id && providerOptions.length > 0 && (
-                      <div className="px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
-                        <div className="space-y-2">
-                          {providerOptions.map(provider => (
-                            <div key={provider.key} className="flex items-center gap-4" style={{ minHeight: 32 }}>
-                              <div style={{ flex: 1, minWidth: 0 }}>
-                                <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{provider.label}</div>
-                                <div className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{provider.description}</div>
-                              </div>
-                              <div className="flex items-center gap-2 shrink-0">
-                                <span className="hidden sm:inline text-xs font-medium" style={{ color: provider.enabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
-                                  {provider.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-                                </span>
-                                <button
-                                  onClick={provider.toggle}
-                                  className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                                  style={{ background: provider.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
-                                >
-                                  <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                                    style={{ transform: provider.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
-                                </button>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    {addon.id === 'packing' && addon.enabled && onToggleBagTracking && (
-                      <div className="flex items-center gap-4 px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('admin.bagTracking.title')}</div>
-                          <div className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{t('admin.bagTracking.subtitle')}</div>
-                        </div>
-                        <div className="flex items-center gap-2 shrink-0">
-                          <span className="hidden sm:inline text-xs font-medium" style={{ color: bagTrackingEnabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
-                            {bagTrackingEnabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-                          </span>
-                          <button onClick={onToggleBagTracking}
-                            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                            style={{ background: bagTrackingEnabled ? 'var(--text-primary)' : 'var(--border-primary)' }}>
-                            <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                              style={{ transform: bagTrackingEnabled ? 'translateX(20px)' : 'translateX(0)' }} />
-                          </button>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Global Addons */}
-            {globalAddons.length > 0 && (
-              <div>
-                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
-                  <Globe size={13} style={{ color: 'var(--text-muted)' }} />
-                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
-                    {t('admin.addons.type.global')} — {t('admin.addons.globalHint')}
-                  </span>
-                </div>
-                {globalAddons.map(addon => (
-                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
-                ))}
-              </div>
-            )}
-
-            {/* Integration Addons */}
-            {integrationAddons.length > 0 && (
-              <div>
-                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
-                  <Link2 size={13} style={{ color: 'var(--text-muted)' }} />
-                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
-                    {t('admin.addons.type.integration')} — {t('admin.addons.integrationHint')}
-                  </span>
-                </div>
-                {integrationAddons.map(addon => (
-                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-interface AddonRowProps {
-  addon: Addon
-  onToggle: (addon: Addon) => void
-  t: (key: string) => string
-  statusOverride?: boolean
-  hideToggle?: boolean
-}
-
-function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
-  const nameKey = `admin.addons.catalog.${addon.id}.name`
-  const descKey = `admin.addons.catalog.${addon.id}.description`
-  const translatedName = t(nameKey)
-  const translatedDescription = t(descKey)
-
-  return {
-    name: translatedName !== nameKey ? translatedName : addon.name,
-    description: translatedDescription !== descKey ? translatedDescription : addon.description,
-  }
-}
-
-function AddonRow({ addon, onToggle, t, nameOverride, descriptionOverride, statusOverride, hideToggle }: AddonRowProps & { nameOverride?: string; descriptionOverride?: string }) {
-  const isComingSoon = false
-  const label = getAddonLabel(t, addon)
-  const displayName = nameOverride || label.name
-  const displayDescription = descriptionOverride || label.description
-  const enabledState = statusOverride ?? addon.enabled
-  return (
-    <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
-      {/* Icon */}
-      <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}>
-        <AddonIcon name={addon.icon} size={20} />
-      </div>
-
-      {/* Info */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{displayName}</span>
-          {isComingSoon && (
-            <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full" style={{ background: 'var(--bg-tertiary)', color: 'var(--text-faint)' }}>
-              Coming Soon
-            </span>
-          )}
-          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full" style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}>
-            {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
-          </span>
-        </div>
-        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{displayDescription}</p>
-      </div>
-
-      {/* Toggle */}
-      <div className="flex items-center gap-2 shrink-0">
-        <span className="hidden sm:inline text-xs font-medium" style={{ color: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
-          {isComingSoon ? t('admin.addons.disabled') : enabledState ? t('admin.addons.enabled') : t('admin.addons.disabled')}
-        </span>
-        {!hideToggle && (
-          <button
-            onClick={() => !isComingSoon && onToggle(addon)}
-            disabled={isComingSoon}
-            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-            style={{ background: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
-          >
-            <span
-              className="inline-block h-4 w-4 transform rounded-full transition-transform"
-              style={{
-                background: 'var(--bg-card)',
-                transform: (enabledState && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
-              }}
-            />
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}

client/src/components/Admin/AdminMcpTokensPanel.tsx

@@ -1,120 +0,0 @@
-import { useState, useEffect } from 'react'
-import { adminApi } from '../../api/client'
-import { useToast } from '../shared/Toast'
-import { Key, Trash2, User, Loader2 } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-
-interface AdminMcpToken {
-  id: number
-  name: string
-  token_prefix: string
-  created_at: string
-  last_used_at: string | null
-  user_id: number
-  username: string
-}
-
-export default function AdminMcpTokensPanel() {
-  const [tokens, setTokens] = useState<AdminMcpToken[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null)
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-
-  useEffect(() => {
-    setIsLoading(true)
-    adminApi.mcpTokens()
-      .then(d => setTokens(d.tokens || []))
-      .catch(() => toast.error(t('admin.mcpTokens.loadError')))
-      .finally(() => setIsLoading(false))
-  }, [])
-
-  const handleDelete = async (id: number) => {
-    try {
-      await adminApi.deleteMcpToken(id)
-      setTokens(prev => prev.filter(tk => tk.id !== id))
-      setDeleteConfirmId(null)
-      toast.success(t('admin.mcpTokens.deleteSuccess'))
-    } catch {
-      toast.error(t('admin.mcpTokens.deleteError'))
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.mcpTokens.title')}</h2>
-        <p className="text-sm mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.subtitle')}</p>
-      </div>
-
-      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <Loader2 className="w-5 h-5 animate-spin" style={{ color: 'var(--text-tertiary)' }} />
-          </div>
-        ) : tokens.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 gap-2">
-            <Key className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
-            <p className="text-sm" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.empty')}</p>
-          </div>
-        ) : (
-          <>
-            <div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-x-4 px-4 py-2.5 text-xs font-medium border-b"
-              style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)' }}>
-              <span>{t('admin.mcpTokens.tokenName')}</span>
-              <span>{t('admin.mcpTokens.owner')}</span>
-              <span className="text-right">{t('admin.mcpTokens.created')}</span>
-              <span className="text-right">{t('admin.mcpTokens.lastUsed')}</span>
-              <span></span>
-            </div>
-            {tokens.map((token, i) => (
-              <div key={token.id}
-                className="grid grid-cols-[1fr_auto_auto_auto_auto] items-center gap-x-4 px-4 py-3"
-                style={{ borderBottom: i < tokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
-                  <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{token.token_prefix}...</p>
-                </div>
-                <div className="flex items-center gap-1.5 text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  <User className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span className="whitespace-nowrap">{token.username}</span>
-                </div>
-                <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
-                  {new Date(token.created_at).toLocaleDateString(locale)}
-                </span>
-                <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
-                  {token.last_used_at ? new Date(token.last_used_at).toLocaleDateString(locale) : t('admin.mcpTokens.never')}
-                </span>
-                <button onClick={() => setDeleteConfirmId(token.id)}
-                  className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
-                  style={{ color: 'var(--text-tertiary)' }} title={t('common.delete')}>
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))}
-          </>
-        )}
-      </div>
-
-      {deleteConfirmId !== null && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
-          onClick={e => { if (e.target === e.currentTarget) setDeleteConfirmId(null) }}>
-          <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
-            <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.mcpTokens.deleteTitle')}</h3>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('admin.mcpTokens.deleteMessage')}</p>
-            <div className="flex gap-2 justify-end">
-              <button onClick={() => setDeleteConfirmId(null)}
-                className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                {t('common.cancel')}
-              </button>
-              <button onClick={() => handleDelete(deleteConfirmId)}
-                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
-                {t('common.delete')}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

client/src/components/Admin/AuditLogPanel.tsx

@@ -1,171 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { adminApi } from '../../api/client'
-import { useTranslation } from '../../i18n'
-import { RefreshCw, ClipboardList } from 'lucide-react'
-
-interface AuditEntry {
-  id: number
-  created_at: string
-  user_id: number | null
-  username: string | null
-  user_email: string | null
-  action: string
-  resource: string | null
-  details: Record<string, unknown> | null
-  ip: string | null
-}
-
-interface AuditLogPanelProps {
-  serverTimezone?: string
-}
-
-export default function AuditLogPanel({ serverTimezone }: AuditLogPanelProps): React.ReactElement {
-  const { t, locale } = useTranslation()
-  const [entries, setEntries] = useState<AuditEntry[]>([])
-  const [total, setTotal] = useState(0)
-  const [offset, setOffset] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const limit = 100
-
-  const loadFirstPage = useCallback(async () => {
-    setLoading(true)
-    try {
-      const data = await adminApi.auditLog({ limit, offset: 0 }) as {
-        entries: AuditEntry[]
-        total: number
-      }
-      setEntries(data.entries || [])
-      setTotal(data.total ?? 0)
-      setOffset(0)
-    } catch {
-      setEntries([])
-      setTotal(0)
-      setOffset(0)
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  const loadMore = useCallback(async () => {
-    const nextOffset = offset + limit
-    setLoading(true)
-    try {
-      const data = await adminApi.auditLog({ limit, offset: nextOffset }) as {
-        entries: AuditEntry[]
-        total: number
-      }
-      setEntries((prev) => [...prev, ...(data.entries || [])])
-      setTotal(data.total ?? 0)
-      setOffset(nextOffset)
-    } catch {
-      /* keep existing */
-    } finally {
-      setLoading(false)
-    }
-  }, [offset])
-
-  useEffect(() => {
-    loadFirstPage()
-  }, [loadFirstPage])
-
-  const fmtTime = (iso: string) => {
-    try {
-      return new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString(locale, {
-        dateStyle: 'short',
-        timeStyle: 'medium',
-        timeZone: serverTimezone || undefined,
-      })
-    } catch {
-      return iso
-    }
-  }
-
-  const fmtDetails = (d: Record<string, unknown> | null) => {
-    if (!d || Object.keys(d).length === 0) return '—'
-    try {
-      return JSON.stringify(d)
-    } catch {
-      return '—'
-    }
-  }
-
-  const userLabel = (e: AuditEntry) => {
-    if (e.username) return e.username
-    if (e.user_email) return e.user_email
-    if (e.user_id != null) return `#${e.user_id}`
-    return '—'
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h2 className="font-semibold text-lg m-0 flex items-center gap-2" style={{ color: 'var(--text-primary)' }}>
-            <ClipboardList size={20} />
-            {t('admin.tabs.audit')}
-          </h2>
-          <p className="text-sm m-0 mt-1" style={{ color: 'var(--text-muted)' }}>{t('admin.audit.subtitle')}</p>
-        </div>
-        <button
-          type="button"
-          disabled={loading}
-          onClick={() => loadFirstPage()}
-          className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-opacity disabled:opacity-50"
-          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-primary)', background: 'var(--bg-card)' }}
-        >
-          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
-          {t('admin.audit.refresh')}
-        </button>
-      </div>
-
-      <p className="text-xs m-0" style={{ color: 'var(--text-faint)' }}>
-        {t('admin.audit.showing', { count: entries.length, total })}
-      </p>
-
-      {loading && entries.length === 0 ? (
-        <div className="py-12 text-center text-sm" style={{ color: 'var(--text-muted)' }}>{t('common.loading')}</div>
-      ) : entries.length === 0 ? (
-        <div className="py-12 text-center text-sm" style={{ color: 'var(--text-muted)' }}>{t('admin.audit.empty')}</div>
-      ) : (
-        <div className="rounded-xl border overflow-x-auto" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
-          <table className="w-full text-sm border-collapse min-w-[720px]">
-            <thead>
-              <tr className="border-b text-left" style={{ borderColor: 'var(--border-secondary)' }}>
-                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.time')}</th>
-                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.user')}</th>
-                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.action')}</th>
-                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.resource')}</th>
-                <th className="p-3 font-semibold whitespace-nowrap" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.ip')}</th>
-                <th className="p-3 font-semibold" style={{ color: 'var(--text-secondary)' }}>{t('admin.audit.col.details')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {entries.map((e) => (
-                <tr key={e.id} className="border-b align-top" style={{ borderColor: 'var(--border-secondary)' }}>
-                  <td className="p-3 whitespace-nowrap font-mono text-xs" style={{ color: 'var(--text-primary)' }}>{fmtTime(e.created_at)}</td>
-                  <td className="p-3" style={{ color: 'var(--text-primary)' }}>{userLabel(e)}</td>
-                  <td className="p-3 font-mono text-xs" style={{ color: 'var(--text-primary)' }}>{e.action}</td>
-                  <td className="p-3 font-mono text-xs break-all max-w-[140px]" style={{ color: 'var(--text-muted)' }}>{e.resource || '—'}</td>
-                  <td className="p-3 font-mono text-xs whitespace-nowrap" style={{ color: 'var(--text-muted)' }}>{e.ip || '—'}</td>
-                  <td className="p-3 font-mono text-xs break-all max-w-[280px]" style={{ color: 'var(--text-faint)' }}>{fmtDetails(e.details)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-
-      {entries.length < total && (
-        <button
-          type="button"
-          disabled={loading}
-          onClick={() => loadMore()}
-          className="text-sm font-medium underline-offset-2 hover:underline disabled:opacity-50"
-          style={{ color: 'var(--text-secondary)' }}
-        >
-          {t('admin.audit.loadMore')}
-        </button>
-      )}
-    </div>
-  )
-}

client/src/components/Admin/BackupPanel.tsx

@@ -1,520 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { backupApi } from '../../api/client'
-import { useToast } from '../shared/Toast'
-import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { useSettingsStore } from '../../store/settingsStore'
-import CustomSelect from '../shared/CustomSelect'
-import { getApiErrorMessage } from '../../types'
-
-const INTERVAL_OPTIONS = [
-  { value: 'hourly',  labelKey: 'backup.interval.hourly' },
-  { value: 'daily',   labelKey: 'backup.interval.daily' },
-  { value: 'weekly',  labelKey: 'backup.interval.weekly' },
-  { value: 'monthly', labelKey: 'backup.interval.monthly' },
-]
-
-const KEEP_OPTIONS = [
-  { value: 1,  labelKey: 'backup.keep.1day' },
-  { value: 3,  labelKey: 'backup.keep.3days' },
-  { value: 7,  labelKey: 'backup.keep.7days' },
-  { value: 14, labelKey: 'backup.keep.14days' },
-  { value: 30, labelKey: 'backup.keep.30days' },
-  { value: 0,  labelKey: 'backup.keep.forever' },
-]
-
-const DAYS_OF_WEEK = [
-  { value: 0, labelKey: 'backup.dow.sunday' },
-  { value: 1, labelKey: 'backup.dow.monday' },
-  { value: 2, labelKey: 'backup.dow.tuesday' },
-  { value: 3, labelKey: 'backup.dow.wednesday' },
-  { value: 4, labelKey: 'backup.dow.thursday' },
-  { value: 5, labelKey: 'backup.dow.friday' },
-  { value: 6, labelKey: 'backup.dow.saturday' },
-]
-
-const HOURS = Array.from({ length: 24 }, (_, i) => i)
-
-const DAYS_OF_MONTH = Array.from({ length: 28 }, (_, i) => i + 1)
-
-export default function BackupPanel() {
-  const [backups, setBackups] = useState([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [isCreating, setIsCreating] = useState(false)
-  const [restoringFile, setRestoringFile] = useState(null)
-  const [isUploading, setIsUploading] = useState(false)
-  const [autoSettings, setAutoSettings] = useState({ enabled: false, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 })
-  const [autoSettingsSaving, setAutoSettingsSaving] = useState(false)
-  const [autoSettingsDirty, setAutoSettingsDirty] = useState(false)
-  const [serverTimezone, setServerTimezone] = useState('')
-  const [restoreConfirm, setRestoreConfirm] = useState(null) // { type: 'file'|'upload', filename, file? }
-  const fileInputRef = useRef(null)
-  const toast = useToast()
-  const { t, language, locale } = useTranslation()
-  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-
-  const loadBackups = async () => {
-    setIsLoading(true)
-    try {
-      const data = await backupApi.list()
-      setBackups(data.backups || [])
-    } catch {
-      toast.error(t('backup.toast.loadError'))
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const loadAutoSettings = async () => {
-    try {
-      const data = await backupApi.getAutoSettings()
-      setAutoSettings(data.settings)
-      if (data.timezone) setServerTimezone(data.timezone)
-    } catch {}
-  }
-
-  useEffect(() => { loadBackups(); loadAutoSettings() }, [])
-
-  const handleCreate = async () => {
-    setIsCreating(true)
-    try {
-      await backupApi.create()
-      toast.success(t('backup.toast.created'))
-      await loadBackups()
-    } catch {
-      toast.error(t('backup.toast.createError'))
-    } finally {
-      setIsCreating(false)
-    }
-  }
-
-  const handleRestore = (filename) => {
-    setRestoreConfirm({ type: 'file', filename })
-  }
-
-  const handleUploadRestore = (e) => {
-    const file = (e.target as HTMLInputElement).files?.[0]
-    if (!file) return
-    e.target.value = ''
-    setRestoreConfirm({ type: 'upload', filename: file.name, file })
-  }
-
-  const executeRestore = async () => {
-    if (!restoreConfirm) return
-    const { type, filename, file } = restoreConfirm
-    setRestoreConfirm(null)
-
-    if (type === 'file') {
-      setRestoringFile(filename)
-      try {
-        await backupApi.restore(filename)
-        toast.success(t('backup.toast.restored'))
-        setTimeout(() => window.location.reload(), 1500)
-      } catch (err: unknown) {
-        toast.error(getApiErrorMessage(err, t('backup.toast.restoreError')))
-        setRestoringFile(null)
-      }
-    } else {
-      setIsUploading(true)
-      try {
-        await backupApi.uploadRestore(file)
-        toast.success(t('backup.toast.restored'))
-        setTimeout(() => window.location.reload(), 1500)
-      } catch (err: unknown) {
-        toast.error(getApiErrorMessage(err, t('backup.toast.uploadError')))
-        setIsUploading(false)
-      }
-    }
-  }
-
-  const handleDelete = async (filename) => {
-    if (!confirm(t('backup.confirm.delete', { name: filename }))) return
-    try {
-      await backupApi.delete(filename)
-      toast.success(t('backup.toast.deleted'))
-      setBackups(prev => prev.filter(b => b.filename !== filename))
-    } catch {
-      toast.error(t('backup.toast.deleteError'))
-    }
-  }
-
-  const handleAutoSettingsChange = (key, value) => {
-    setAutoSettings(prev => ({ ...prev, [key]: value }))
-    setAutoSettingsDirty(true)
-  }
-
-  const handleSaveAutoSettings = async () => {
-    setAutoSettingsSaving(true)
-    try {
-      const data = await backupApi.setAutoSettings(autoSettings)
-      setAutoSettings(data.settings)
-      setAutoSettingsDirty(false)
-      toast.success(t('backup.toast.settingsSaved'))
-    } catch {
-      toast.error(t('backup.toast.settingsError'))
-    } finally {
-      setAutoSettingsSaving(false)
-    }
-  }
-
-  const formatSize = (bytes) => {
-    if (!bytes) return '-'
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  }
-
-  const formatDate = (dateStr) => {
-    if (!dateStr) return '-'
-    try {
-      const opts: Intl.DateTimeFormatOptions = {
-        day: '2-digit', month: '2-digit', year: 'numeric',
-        hour: '2-digit', minute: '2-digit',
-      }
-      if (serverTimezone) opts.timeZone = serverTimezone
-      return new Date(dateStr).toLocaleString(locale, opts)
-    } catch { return dateStr }
-  }
-
-  const isAuto = (filename) => filename.startsWith('auto-backup-')
-
-  return (
-    <div className="flex flex-col gap-6">
-
-      {/* Manual Backups */}
-      <div className="bg-white rounded-2xl border border-gray-200 p-6">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-3">
-            <HardDrive className="w-5 h-5 text-gray-400" />
-            <div>
-              <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.title')}</h2>
-              <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.subtitle')}</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={loadBackups}
-              disabled={isLoading}
-              className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
-              title={t('backup.refresh')}
-            >
-              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
-            </button>
-
-            {/* Upload & Restore */}
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept=".zip"
-              className="hidden"
-              onChange={handleUploadRestore}
-            />
-            <button
-              onClick={() => fileInputRef.current?.click()}
-              disabled={isUploading}
-              className="flex items-center gap-2 border border-gray-200 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 text-sm font-medium disabled:opacity-60"
-              title={isUploading ? t('backup.uploading') : t('backup.upload')}
-            >
-              {isUploading ? (
-                <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
-              ) : (
-                <Upload className="w-4 h-4" />
-              )}
-              <span className="hidden sm:inline">{isUploading ? t('backup.uploading') : t('backup.upload')}</span>
-            </button>
-
-            <button
-              onClick={handleCreate}
-              disabled={isCreating}
-              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-60"
-              title={isCreating ? t('backup.creating') : t('backup.create')}
-            >
-              {isCreating ? (
-                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-              ) : (
-                <Plus className="w-4 h-4" />
-              )}
-              <span className="hidden sm:inline">{isCreating ? t('backup.creating') : t('backup.create')}</span>
-            </button>
-          </div>
-        </div>
-
-        {isLoading && backups.length === 0 ? (
-          <div className="flex items-center justify-center py-12 text-gray-400">
-            <div className="w-6 h-6 border-2 border-gray-300 border-t-slate-700 rounded-full animate-spin mr-2" />
-            {t('common.loading')}
-          </div>
-        ) : backups.length === 0 ? (
-          <div className="text-center py-12 text-gray-400">
-            <HardDrive className="w-10 h-10 mb-3 mx-auto opacity-40" />
-            <p className="text-sm">{t('backup.empty')}</p>
-            <button onClick={handleCreate} className="mt-4 text-slate-700 text-sm hover:underline">
-              {t('backup.createFirst')}
-            </button>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-100">
-            {backups.map(backup => (
-              <div key={backup.filename} className="flex items-center gap-4 py-3">
-                <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
-                  {isAuto(backup.filename)
-                    ? <RefreshCw className="w-4 h-4 text-blue-500" />
-                    : <HardDrive className="w-4 h-4 text-gray-500" />
-                  }
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <p className="font-medium text-sm text-gray-900 truncate">{backup.filename}</p>
-                    {isAuto(backup.filename) && (
-                      <span className="text-xs bg-blue-50 text-blue-600 border border-blue-100 rounded-full px-2 py-0.5 whitespace-nowrap">Auto</span>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-3 mt-0.5">
-                    <span className="text-xs text-gray-400">{formatDate(backup.created_at)}</span>
-                    <span className="text-xs text-gray-400">{formatSize(backup.size)}</span>
-                  </div>
-                </div>
-                <div className="flex items-center gap-1.5 flex-shrink-0">
-                  <button
-                    onClick={() => backupApi.download(backup.filename).catch(() => toast.error(t('backup.toast.downloadError')))}
-                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-slate-700 border border-slate-200 rounded-lg hover:bg-slate-50"
-                  >
-                    <Download className="w-3.5 h-3.5" />
-                    {t('backup.download')}
-                  </button>
-                  <button
-                    onClick={() => handleRestore(backup.filename)}
-                    disabled={restoringFile === backup.filename}
-                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-amber-700 border border-amber-200 rounded-lg hover:bg-amber-50 disabled:opacity-60"
-                  >
-                    {restoringFile === backup.filename
-                      ? <div className="w-3.5 h-3.5 border-2 border-amber-400 border-t-transparent rounded-full animate-spin" />
-                      : <RotateCcw className="w-3.5 h-3.5" />
-                    }
-                    {t('backup.restore')}
-                  </button>
-                  <button
-                    onClick={() => handleDelete(backup.filename)}
-                    className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Auto-Backup Settings */}
-      <div className="bg-white rounded-2xl border border-gray-200 p-6">
-        <div className="flex items-center gap-3 mb-6">
-          <Clock className="w-5 h-5 text-gray-400" />
-          <div>
-            <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.auto.title')}</h2>
-            <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.auto.subtitle')}</p>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-5">
-          {/* Enable toggle */}
-          <label className="flex items-center justify-between gap-4 cursor-pointer">
-            <div className="min-w-0">
-              <span className="text-sm font-medium text-gray-900">{t('backup.auto.enable')}</span>
-              <p className="text-xs text-gray-500 mt-0.5">{t('backup.auto.enableHint')}</p>
-            </div>
-            <button
-              onClick={() => handleAutoSettingsChange('enabled', !autoSettings.enabled)}
-              className="relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors"
-              style={{ background: autoSettings.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
-            >
-              <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                style={{ transform: autoSettings.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
-            </button>
-          </label>
-
-          {autoSettings.enabled && (
-            <>
-              {/* Interval */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.interval')}</label>
-                <div className="flex flex-wrap gap-2">
-                  {INTERVAL_OPTIONS.map(opt => (
-                    <button
-                      key={opt.value}
-                      onClick={() => handleAutoSettingsChange('interval', opt.value)}
-                      className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
-                        autoSettings.interval === opt.value
-                          ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border-slate-700'
-                          : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
-                      }`}
-                    >
-                      {t(opt.labelKey)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {/* Hour picker (for daily, weekly, monthly) */}
-              {autoSettings.interval !== 'hourly' && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.hour')}</label>
-                  <CustomSelect
-                    value={String(autoSettings.hour)}
-                    onChange={v => handleAutoSettingsChange('hour', parseInt(v, 10))}
-                    size="sm"
-                    options={HOURS.map(h => {
-                      let label: string
-                      if (is12h) {
-                        const period = h >= 12 ? 'PM' : 'AM'
-                        const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-                        label = `${h12}:00 ${period}`
-                      } else {
-                        label = `${String(h).padStart(2, '0')}:00`
-                      }
-                      return { value: String(h), label }
-                    })}
-                  />
-                  <p className="text-xs text-gray-400 mt-1">
-                    {t('backup.auto.hourHint', { format: is12h ? '12h' : '24h' })}{serverTimezone ? ` (Timezone: ${serverTimezone})` : ''}
-                  </p>
-                </div>
-              )}
-
-              {/* Day of week (for weekly) */}
-              {autoSettings.interval === 'weekly' && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfWeek')}</label>
-                  <div className="flex flex-wrap gap-2">
-                    {DAYS_OF_WEEK.map(opt => (
-                      <button
-                        key={opt.value}
-                        onClick={() => handleAutoSettingsChange('day_of_week', opt.value)}
-                        className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
-                          autoSettings.day_of_week === opt.value
-                            ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border-slate-700'
-                            : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
-                        }`}
-                      >
-                        {t(opt.labelKey)}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Day of month (for monthly) */}
-              {autoSettings.interval === 'monthly' && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfMonth')}</label>
-                  <CustomSelect
-                    value={String(autoSettings.day_of_month)}
-                    onChange={v => handleAutoSettingsChange('day_of_month', parseInt(v, 10))}
-                    size="sm"
-                    options={DAYS_OF_MONTH.map(d => ({ value: String(d), label: String(d) }))}
-                  />
-                  <p className="text-xs text-gray-400 mt-1">{t('backup.auto.dayOfMonthHint')}</p>
-                </div>
-              )}
-
-              {/* Keep duration */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.keepLabel')}</label>
-                <div className="flex flex-wrap gap-2">
-                  {KEEP_OPTIONS.map(opt => (
-                    <button
-                      key={opt.value}
-                      onClick={() => handleAutoSettingsChange('keep_days', opt.value)}
-                      className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
-                        autoSettings.keep_days === opt.value
-                          ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 border-slate-700'
-                          : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
-                      }`}
-                    >
-                      {t(opt.labelKey)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-
-          {/* Save button */}
-          <div className="flex justify-end pt-2 border-t border-gray-100">
-            <button
-              onClick={handleSaveAutoSettings}
-              disabled={autoSettingsSaving || !autoSettingsDirty}
-              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-5 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-50 transition-colors"
-            >
-              {autoSettingsSaving
-                ? <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                : <Check className="w-4 h-4" />
-              }
-              {autoSettingsSaving ? t('common.saving') : t('common.save')}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Restore Warning Modal */}
-      {restoreConfirm && (
-        <div
-          style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-          onClick={() => setRestoreConfirm(null)}
-        >
-          <div
-            onClick={e => e.stopPropagation()}
-            style={{ width: '100%', maxWidth: 440, borderRadius: 16, overflow: 'hidden' }}
-            className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
-          >
-            {/* Red header */}
-            <div style={{ background: 'linear-gradient(135deg, #dc2626, #b91c1c)', padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
-              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                <AlertTriangle size={20} style={{ color: 'white' }} />
-              </div>
-              <div>
-                <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'white' }}>
-                  {t('backup.restoreConfirmTitle')}
-                </h3>
-                <p style={{ margin: '2px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
-                  {restoreConfirm.filename}
-                </p>
-              </div>
-            </div>
-
-            {/* Body */}
-            <div style={{ padding: '20px 24px' }}>
-              <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
-                {t('backup.restoreWarning')}
-              </p>
-
-              <div style={{ marginTop: 14, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
-                className="bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800"
-              >
-                {t('backup.restoreTip')}
-              </div>
-            </div>
-
-            {/* Footer */}
-            <div style={{ padding: '0 24px 20px', display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
-              <button
-                onClick={() => setRestoreConfirm(null)}
-                className="text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
-              >
-                {t('common.cancel')}
-              </button>
-              <button
-                onClick={executeRestore}
-                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit', background: '#dc2626', color: 'white' }}
-                onMouseEnter={e => e.currentTarget.style.background = '#b91c1c'}
-                onMouseLeave={e => e.currentTarget.style.background = '#dc2626'}
-              >
-                {t('backup.restoreConfirm')}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

client/src/components/Admin/CategoryManager.tsx

@@ -1,256 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { categoriesApi } from '../../api/client'
-import { useToast } from '../shared/Toast'
-import { Plus, Edit2, Trash2, Pipette } from 'lucide-react'
-import { CATEGORY_ICON_MAP, ICON_LABELS, getCategoryIcon } from '../shared/categoryIcons'
-import { useTranslation } from '../../i18n'
-import { getApiErrorMessage } from '../../types'
-
-const PRESET_COLORS = [
-  '#6366f1', '#8b5cf6', '#ec4899', '#ef4444', '#f97316',
-  '#f59e0b', '#10b981', '#06b6d4', '#3b82f6', '#84cc16',
-  '#6b7280', '#1f2937',
-]
-
-const ICON_NAMES = Object.keys(CATEGORY_ICON_MAP)
-
-export default function CategoryManager() {
-  const [categories, setCategories] = useState([])
-  const [showForm, setShowForm] = useState(false)
-  const [editingId, setEditingId] = useState(null)
-  const [form, setForm] = useState({ name: '', color: '#6366f1', icon: 'MapPin' })
-  const [isSaving, setIsSaving] = useState(false)
-  const [isLoading, setIsLoading] = useState(true)
-  const colorInputRef = useRef(null)
-  const toast = useToast()
-  const { t } = useTranslation()
-
-  useEffect(() => { loadCategories() }, [])
-
-  const loadCategories = async () => {
-    setIsLoading(true)
-    try {
-      const data = await categoriesApi.list()
-      setCategories(data.categories || [])
-    } catch (err: unknown) {
-      toast.error(t('categories.toast.loadError'))
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleStartEdit = (cat) => {
-    setEditingId(cat.id)
-    setForm({ name: cat.name, color: cat.color || '#6366f1', icon: cat.icon || 'MapPin' })
-    setShowForm(false)
-  }
-
-  const handleStartCreate = () => {
-    setEditingId(null)
-    setForm({ name: '', color: '#6366f1', icon: 'MapPin' })
-    setShowForm(true)
-  }
-
-  const handleCancel = () => {
-    setShowForm(false)
-    setEditingId(null)
-  }
-
-  const handleSave = async () => {
-    if (!form.name.trim()) { toast.error(t('categories.toast.nameRequired')); return }
-    setIsSaving(true)
-    try {
-      if (editingId) {
-        const result = await categoriesApi.update(editingId, form)
-        setCategories(prev => prev.map(c => c.id === editingId ? result.category : c))
-        setEditingId(null)
-        toast.success(t('categories.toast.updated'))
-      } else {
-        const result = await categoriesApi.create(form)
-        setCategories(prev => [...prev, result.category])
-        setShowForm(false)
-        toast.success(t('categories.toast.created'))
-      }
-      setForm({ name: '', color: '#6366f1', icon: 'MapPin' })
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('categories.toast.saveError')))
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleDelete = async (id) => {
-    if (!confirm(t('categories.confirm.delete'))) return
-    try {
-      await categoriesApi.delete(id)
-      setCategories(prev => prev.filter(c => c.id !== id))
-      toast.success(t('categories.toast.deleted'))
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('categories.toast.deleteError')))
-    }
-  }
-
-  const isPresetColor = PRESET_COLORS.includes(form.color)
-  const PreviewIcon = getCategoryIcon(form.icon)
-
-  const categoryForm = (
-    <div className="bg-gray-50 rounded-xl p-4 space-y-3 border border-gray-200">
-      <input
-        type="text"
-        value={form.name}
-        onChange={e => setForm(prev => ({ ...prev, name: e.target.value }))}
-        placeholder={t('categories.namePlaceholder')}
-        className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 bg-white"
-        autoFocus
-      />
-
-      <div>
-        <label className="block text-xs font-medium text-gray-600 mb-2">{t('categories.icon')}</label>
-        <div className="max-h-48 overflow-y-auto">
-          <div className="flex flex-wrap gap-1.5 px-1.5 py-1.5">
-            {ICON_NAMES.map(name => {
-              const Icon = CATEGORY_ICON_MAP[name]
-              const isSelected = form.icon === name
-              return (
-                <button
-                  key={name}
-                  type="button"
-                  title={ICON_LABELS[name] || name}
-                  onClick={() => setForm(prev => ({ ...prev, icon: name }))}
-                  className={`w-9 h-9 flex items-center justify-center rounded-lg transition-all ${
-                    isSelected
-                      ? 'ring-2 ring-offset-1 ring-slate-700'
-                      : 'hover:bg-gray-200'
-                  }`}
-                  style={{ background: isSelected ? `${form.color}18` : undefined }}
-                >
-                  <Icon size={17} strokeWidth={1.8} color={isSelected ? form.color : '#374151'} />
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <label className="block text-xs font-medium text-gray-600 mb-1.5">{t('categories.color')}</label>
-        <div className="flex items-center gap-2 flex-wrap">
-          {PRESET_COLORS.map(color => (
-            <button key={color} type="button" onClick={() => setForm(prev => ({ ...prev, color }))}
-              className={`w-7 h-7 rounded-full transition-transform hover:scale-110 ${form.color === color ? 'ring-2 ring-offset-2 ring-gray-400 scale-110' : ''}`}
-              style={{ backgroundColor: color }} />
-          ))}
-
-          {/* Custom color button */}
-          <input
-            ref={colorInputRef}
-            type="color"
-            value={form.color}
-            onChange={e => setForm(prev => ({ ...prev, color: e.target.value }))}
-            className="sr-only"
-          />
-          <button
-            type="button"
-            title={t('categories.customColor')}
-            onClick={() => colorInputRef.current?.click()}
-            className={`w-7 h-7 rounded-full flex items-center justify-center border-2 transition-transform hover:scale-110 ${
-              !isPresetColor
-                ? 'ring-2 ring-offset-2 ring-gray-400 scale-110 border-transparent'
-                : 'border-dashed border-gray-300 hover:border-gray-400'
-            }`}
-            style={!isPresetColor ? { backgroundColor: form.color } : undefined}
-          >
-            {isPresetColor && <Pipette className="w-3 h-3 text-gray-400" />}
-          </button>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <span className="text-xs text-gray-500">{t('categories.preview')}:</span>
-        <span className="inline-flex items-center gap-1.5 text-sm px-2.5 py-1 rounded-full font-medium"
-          style={{ backgroundColor: `${form.color}20`, color: form.color }}>
-          <PreviewIcon size={14} strokeWidth={1.8} />
-          {form.name || t('categories.defaultName')}
-        </span>
-      </div>
-
-      <div className="flex justify-end gap-2">
-        <button type="button" onClick={handleCancel}
-          className="px-3 py-1.5 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50">
-          {t('common.cancel')}
-        </button>
-        <button type="button" onClick={handleSave} disabled={isSaving || !form.name.trim()}
-          className="px-4 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium">
-          {isSaving ? t('common.saving') : editingId ? t('categories.update') : t('categories.create')}
-        </button>
-      </div>
-    </div>
-  )
-
-  return (
-    <div className="bg-white rounded-2xl border border-gray-200 p-6">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('categories.title')}</h2>
-          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('categories.subtitle')}</p>
-        </div>
-        <button onClick={handleStartCreate}
-          className="flex items-center gap-2 bg-slate-900 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">
-          <Plus className="w-4 h-4" />
-          <span className="hidden sm:inline">{t('categories.new')}</span>
-        </button>
-      </div>
-
-      {showForm && <div className="mb-4">{categoryForm}</div>}
-
-      {isLoading ? (
-        <div className="flex items-center justify-center py-8 text-gray-400">
-          <div className="w-6 h-6 border-2 border-gray-300 border-t-slate-600 rounded-full animate-spin" />
-        </div>
-      ) : categories.length === 0 ? (
-        <div className="text-center py-8 text-gray-400">
-          <p className="text-sm">{t('categories.empty')}</p>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {categories.map(cat => {
-            const Icon = getCategoryIcon(cat.icon)
-            return (
-              <div key={cat.id}>
-                {editingId === cat.id ? (
-                  <div className="mb-2">{categoryForm}</div>
-                ) : (
-                  <div className="flex items-center gap-3 p-3 border border-gray-100 rounded-xl hover:border-gray-200 group">
-                    <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
-                      style={{ backgroundColor: `${cat.color}20` }}>
-                      <Icon size={18} strokeWidth={1.8} color={cat.color} />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium text-gray-900 text-sm">{cat.name}</span>
-                        <span className="text-xs px-2 py-0.5 rounded-full"
-                          style={{ backgroundColor: `${cat.color}20`, color: cat.color }}>
-                          {cat.color}
-                        </span>
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button onClick={() => handleStartEdit(cat)}
-                        className="p-1.5 text-gray-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg">
-                        <Edit2 className="w-4 h-4" />
-                      </button>
-                      <button onClick={() => handleDelete(cat.id)}
-                        className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg">
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}

client/src/components/Admin/DevNotificationsPanel.tsx

@@ -1,285 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { adminApi, tripsApi } from '../../api/client'
-import { useAuthStore } from '../../store/authStore'
-import { useToast } from '../shared/Toast'
-import {
-  Bell, Zap, ArrowRight, CheckCircle, Navigation, User,
-  Calendar, Clock, Image, MessageSquare, Tag, UserPlus,
-  Download, MapPin,
-} from 'lucide-react'
-
-interface Trip {
-  id: number
-  title: string
-}
-
-interface AppUser {
-  id: number
-  username: string
-  email: string
-}
-
-export default function DevNotificationsPanel(): React.ReactElement {
-  const toast = useToast()
-  const user = useAuthStore(s => s.user)
-  const [sending, setSending] = useState<string | null>(null)
-  const [trips, setTrips] = useState<Trip[]>([])
-  const [selectedTripId, setSelectedTripId] = useState<number | null>(null)
-  const [users, setUsers] = useState<AppUser[]>([])
-  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
-
-  useEffect(() => {
-    tripsApi.list().then(data => {
-      const list = (data.trips || data || []) as Trip[]
-      setTrips(list)
-      if (list.length > 0) setSelectedTripId(list[0].id)
-    }).catch(() => {})
-    adminApi.users().then(data => {
-      const list = (data.users || data || []) as AppUser[]
-      setUsers(list)
-      if (list.length > 0) setSelectedUserId(list[0].id)
-    }).catch(() => {})
-  }, [])
-
-  const fire = async (label: string, payload: Record<string, unknown>) => {
-    setSending(label)
-    try {
-      await adminApi.sendTestNotification(payload)
-      toast.success(`Sent: ${label}`)
-    } catch (err: any) {
-      toast.error(err.message || 'Failed')
-    } finally {
-      setSending(null)
-    }
-  }
-
-  const selectedTrip = trips.find(t => t.id === selectedTripId)
-  const selectedUser = users.find(u => u.id === selectedUserId)
-  const username = user?.username || 'Admin'
-  const tripTitle = selectedTrip?.title || 'Test Trip'
-
-  // ── Helpers ──────────────────────────────────────────────────────────────
-
-  const Btn = ({
-    id, label, sub, icon: Icon, color, onClick,
-  }: {
-    id: string; label: string; sub: string; icon: React.ElementType; color: string; onClick: () => void
-  }) => (
-    <button
-      onClick={onClick}
-      disabled={sending !== null}
-      className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left w-full"
-      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-      onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
-      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)' }}
-    >
-      <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-        style={{ background: `${color}20`, color }}>
-        <Icon className="w-4 h-4" />
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
-        <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>{sub}</p>
-      </div>
-      {sending === id && (
-        <div className="w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin flex-shrink-0" />
-      )}
-    </button>
-  )
-
-  const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-    <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>{children}</h3>
-  )
-
-  const TripSelector = () => (
-    <select
-      value={selectedTripId ?? ''}
-      onChange={e => setSelectedTripId(Number(e.target.value))}
-      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
-      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-    >
-      {trips.map(trip => <option key={trip.id} value={trip.id}>{trip.title}</option>)}
-    </select>
-  )
-
-  const UserSelector = () => (
-    <select
-      value={selectedUserId ?? ''}
-      onChange={e => setSelectedUserId(Number(e.target.value))}
-      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
-      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-    >
-      {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.email})</option>)}
-    </select>
-  )
-
-  return (
-    <div className="space-y-8">
-      <div className="flex items-center gap-2">
-        <div className="px-2 py-0.5 rounded text-xs font-mono font-bold" style={{ background: '#fbbf24', color: '#000' }}>
-          DEV ONLY
-        </div>
-        <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-          Notification Testing
-        </span>
-      </div>
-
-      {/* ── Type Testing ─────────────────────────────────────────────────── */}
-      <div>
-        <SectionTitle>Type Testing</SectionTitle>
-        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
-          Test how each in-app notification type renders, sent to yourself.
-        </p>
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <Btn id="simple-me" label="Simple → Me" sub="test_simple · user" icon={Bell} color="#6366f1"
-            onClick={() => fire('simple-me', {
-              event: 'test_simple',
-              scope: 'user',
-              targetId: user?.id,
-              params: {},
-            })}
-          />
-          <Btn id="boolean-me" label="Boolean → Me" sub="test_boolean · user" icon={CheckCircle} color="#10b981"
-            onClick={() => fire('boolean-me', {
-              event: 'test_boolean',
-              scope: 'user',
-              targetId: user?.id,
-              params: {},
-              inApp: {
-                type: 'boolean',
-                positiveCallback: { action: 'test_approve', payload: {} },
-                negativeCallback: { action: 'test_deny', payload: {} },
-              },
-            })}
-          />
-          <Btn id="navigate-me" label="Navigate → Me" sub="test_navigate · user" icon={Navigation} color="#f59e0b"
-            onClick={() => fire('navigate-me', {
-              event: 'test_navigate',
-              scope: 'user',
-              targetId: user?.id,
-              params: {},
-            })}
-          />
-          <Btn id="simple-admins" label="Simple → All Admins" sub="test_simple · admin" icon={Zap} color="#ef4444"
-            onClick={() => fire('simple-admins', {
-              event: 'test_simple',
-              scope: 'admin',
-              targetId: 0,
-              params: {},
-            })}
-          />
-        </div>
-      </div>
-
-      {/* ── Trip-Scoped Events ───────────────────────────────────────────── */}
-      {trips.length > 0 && (
-        <div>
-          <SectionTitle>Trip-Scoped Events</SectionTitle>
-          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
-            Fires each trip event to all members of the selected trip (excluding yourself).
-          </p>
-          <TripSelector />
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <Btn id="booking_change" label="booking_change" sub="navigate · trip" icon={Calendar} color="#6366f1"
-              onClick={() => selectedTripId && fire('booking_change', {
-                event: 'booking_change',
-                scope: 'trip',
-                targetId: selectedTripId,
-                params: { actor: username, trip: tripTitle, booking: 'Test Hotel', type: 'hotel', tripId: String(selectedTripId) },
-              })}
-            />
-            <Btn id="trip_reminder" label="trip_reminder" sub="navigate · trip" icon={Clock} color="#10b981"
-              onClick={() => selectedTripId && fire('trip_reminder', {
-                event: 'trip_reminder',
-                scope: 'trip',
-                targetId: selectedTripId,
-                params: { trip: tripTitle, tripId: String(selectedTripId) },
-              })}
-            />
-            <Btn id="photos_shared" label="photos_shared" sub="navigate · trip" icon={Image} color="#f59e0b"
-              onClick={() => selectedTripId && fire('photos_shared', {
-                event: 'photos_shared',
-                scope: 'trip',
-                targetId: selectedTripId,
-                params: { actor: username, trip: tripTitle, count: '5', tripId: String(selectedTripId) },
-              })}
-            />
-            <Btn id="collab_message" label="collab_message" sub="navigate · trip" icon={MessageSquare} color="#8b5cf6"
-              onClick={() => selectedTripId && fire('collab_message', {
-                event: 'collab_message',
-                scope: 'trip',
-                targetId: selectedTripId,
-                params: { actor: username, trip: tripTitle, preview: 'This is a test message preview.', tripId: String(selectedTripId) },
-              })}
-            />
-            <Btn id="packing_tagged" label="packing_tagged" sub="navigate · trip" icon={Tag} color="#ec4899"
-              onClick={() => selectedTripId && fire('packing_tagged', {
-                event: 'packing_tagged',
-                scope: 'trip',
-                targetId: selectedTripId,
-                params: { actor: username, trip: tripTitle, category: 'Clothing', tripId: String(selectedTripId) },
-              })}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* ── User-Scoped Events ───────────────────────────────────────────── */}
-      {users.length > 0 && (
-        <div>
-          <SectionTitle>User-Scoped Events</SectionTitle>
-          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
-            Fires each user event to the selected recipient.
-          </p>
-          <UserSelector />
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <Btn
-              id={`trip_invite-${selectedUserId}`}
-              label="trip_invite"
-              sub="navigate · user"
-              icon={UserPlus}
-              color="#06b6d4"
-              onClick={() => selectedUserId && fire(`trip_invite-${selectedUserId}`, {
-                event: 'trip_invite',
-                scope: 'user',
-                targetId: selectedUserId,
-                params: { actor: username, trip: tripTitle, invitee: selectedUser?.email || '', tripId: String(selectedTripId ?? 0) },
-              })}
-            />
-            <Btn
-              id={`vacay_invite-${selectedUserId}`}
-              label="vacay_invite"
-              sub="navigate · user"
-              icon={MapPin}
-              color="#f97316"
-              onClick={() => selectedUserId && fire(`vacay_invite-${selectedUserId}`, {
-                event: 'vacay_invite',
-                scope: 'user',
-                targetId: selectedUserId,
-                params: { actor: username, planId: '1' },
-              })}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* ── Admin-Scoped Events ──────────────────────────────────────────── */}
-      <div>
-        <SectionTitle>Admin-Scoped Events</SectionTitle>
-        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
-          Fires to all admin users.
-        </p>
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <Btn id="version_available" label="version_available" sub="navigate · admin" icon={Download} color="#64748b"
-            onClick={() => fire('version_available', {
-              event: 'version_available',
-              scope: 'admin',
-              targetId: 0,
-              params: { version: '9.9.9-test' },
-            })}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

client/src/components/Admin/GitHubPanel.tsx

@@ -1,376 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee, Bug, Lightbulb, BookOpen } from 'lucide-react'
-import { getLocaleForLanguage, useTranslation } from '../../i18n'
-import apiClient from '../../api/client'
-
-const REPO = 'mauriceboe/TREK'
-const PER_PAGE = 10
-
-export default function GitHubPanel() {
-  const { t, language } = useTranslation()
-  const [releases, setReleases] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(null)
-  const [expanded, setExpanded] = useState({})
-  const [page, setPage] = useState(1)
-  const [hasMore, setHasMore] = useState(true)
-  const [loadingMore, setLoadingMore] = useState(false)
-
-  const fetchReleases = async (pageNum = 1, append = false) => {
-    try {
-      const res = await apiClient.get(`/admin/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } })
-      const data = Array.isArray(res.data) ? res.data : []
-      setReleases(prev => append ? [...prev, ...data] : data)
-      setHasMore(data.length === PER_PAGE)
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Unknown error')
-    }
-  }
-
-  useEffect(() => {
-    setLoading(true)
-    fetchReleases(1).finally(() => setLoading(false))
-  }, [])
-
-  const handleLoadMore = async () => {
-    const next = page + 1
-    setLoadingMore(true)
-    await fetchReleases(next, true)
-    setPage(next)
-    setLoadingMore(false)
-  }
-
-  const toggleExpand = (id) => {
-    setExpanded(prev => ({ ...prev, [id]: !prev[id] }))
-  }
-
-  const formatDate = (dateStr) => {
-    const d = new Date(dateStr)
-    return d.toLocaleDateString(getLocaleForLanguage(language), { day: 'numeric', month: 'short', year: 'numeric' })
-  }
-
-  // Simple markdown-to-html for release notes (handles headers, bold, lists, links)
-  const renderBody = (body) => {
-    if (!body) return null
-    const lines = body.split('\n')
-    const elements = []
-    let listItems = []
-
-    const flushList = () => {
-      if (listItems.length > 0) {
-        elements.push(
-          <ul key={`ul-${elements.length}`} className="space-y-1 my-2">
-            {listItems.map((item, i) => (
-              <li key={i} className="flex gap-2 text-xs" style={{ color: 'var(--text-muted)' }}>
-                <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0" style={{ background: 'var(--text-faint)' }} />
-                <span dangerouslySetInnerHTML={{ __html: inlineFormat(item) }} />
-              </li>
-            ))}
-          </ul>
-        )
-        listItems = []
-      }
-    }
-
-    const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
-    const inlineFormat = (text) => {
-      return escapeHtml(text)
-        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-        .replace(/`(.+?)`/g, '<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>')
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => {
-          const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#'
-          return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">${label}</a>`
-        })
-    }
-
-    for (const line of lines) {
-      const trimmed = line.trim()
-      if (!trimmed) { flushList(); continue }
-
-      if (trimmed.startsWith('### ')) {
-        flushList()
-        elements.push(
-          <h4 key={elements.length} className="text-xs font-semibold mt-3 mb-1" style={{ color: 'var(--text-primary)' }}>
-            {trimmed.slice(4)}
-          </h4>
-        )
-      } else if (trimmed.startsWith('## ')) {
-        flushList()
-        elements.push(
-          <h3 key={elements.length} className="text-sm font-semibold mt-3 mb-1" style={{ color: 'var(--text-primary)' }}>
-            {trimmed.slice(3)}
-          </h3>
-        )
-      } else if (/^[-*] /.test(trimmed)) {
-        listItems.push(trimmed.slice(2))
-      } else {
-        flushList()
-        elements.push(
-          <p key={elements.length} className="text-xs my-1" style={{ color: 'var(--text-muted)' }}
-            dangerouslySetInnerHTML={{ __html: inlineFormat(trimmed) }}
-          />
-        )
-      }
-    }
-    flushList()
-    return elements
-  }
-
-  return (
-    <div className="space-y-3">
-      {/* Support cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <a
-          href="https://ko-fi.com/mauriceboe"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ff5e5b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Coffee size={20} style={{ color: '#ff5e5b' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Ko-fi</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://buymeacoffee.com/mauriceboe"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ffdd0015', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Heart size={20} style={{ color: '#ffdd00' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Buy Me a Coffee</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://discord.gg/nSdKaXgN"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#5865F215', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Discord</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>Join the community</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <a
-          href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ef444415', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Bug size={20} style={{ color: '#ef4444' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.reportBug')}</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.reportBugHint')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f59e0b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Lightbulb size={20} style={{ color: '#f59e0b' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.featureRequest')}</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.featureRequestHint')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://github.com/mauriceboe/TREK/wiki"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#6366f115', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <BookOpen size={20} style={{ color: '#6366f1' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Wiki</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.wikiHint')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-      </div>
-
-      {/* Loading / Error / Releases */}
-      {loading ? (
-        <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-          <div className="p-8 flex items-center justify-center">
-            <Loader2 className="w-6 h-6 animate-spin" style={{ color: 'var(--text-muted)' }} />
-          </div>
-        </div>
-      ) : error ? (
-        <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-          <div className="p-6 text-center">
-            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('admin.github.error')}</p>
-            <p className="text-xs mt-1" style={{ color: 'var(--text-faint)' }}>{error}</p>
-          </div>
-        </div>
-      ) : (
-      <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-        <div className="px-5 py-4 border-b flex items-center justify-between" style={{ borderColor: 'var(--border-secondary)' }}>
-          <div>
-            <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.github.title')}</h2>
-            <p className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{t('admin.github.subtitle').replace('{repo}', REPO)}</p>
-          </div>
-          <a
-            href={`https://github.com/${REPO}/releases`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
-            style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
-          >
-            <ExternalLink size={12} />
-            GitHub
-          </a>
-        </div>
-
-        {/* Timeline */}
-        <div className="px-5 py-4">
-          <div className="relative">
-            {/* Timeline line */}
-            <div className="absolute left-[11px] top-3 bottom-3 w-px" style={{ background: 'var(--border-primary)' }} />
-
-            <div className="space-y-0">
-              {releases.map((release, idx) => {
-                const isLatest = idx === 0
-                const isExpanded = expanded[release.id]
-
-                return (
-                  <div key={release.id} className="relative pl-8 pb-5">
-                    {/* Timeline dot */}
-                    <div
-                      className="absolute left-0 top-1 w-[23px] h-[23px] rounded-full flex items-center justify-center border-2"
-                      style={{
-                        background: isLatest ? 'var(--text-primary)' : 'var(--bg-card)',
-                        borderColor: isLatest ? 'var(--text-primary)' : 'var(--border-primary)',
-                      }}
-                    >
-                      <Tag size={10} style={{ color: isLatest ? 'var(--bg-card)' : 'var(--text-faint)' }} />
-                    </div>
-
-                    {/* Release content */}
-                    <div>
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
-                          {release.tag_name}
-                        </span>
-                        {isLatest && (
-                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full"
-                            style={{ background: 'rgba(34,197,94,0.12)', color: '#16a34a' }}>
-                            {t('admin.github.latest')}
-                          </span>
-                        )}
-                        {release.prerelease && (
-                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full"
-                            style={{ background: 'rgba(245,158,11,0.12)', color: '#d97706' }}>
-                            {t('admin.github.prerelease')}
-                          </span>
-                        )}
-                      </div>
-
-                      {release.name && release.name !== release.tag_name && (
-                        <p className="text-xs font-medium mt-0.5" style={{ color: 'var(--text-muted)' }}>
-                          {release.name}
-                        </p>
-                      )}
-
-                      <div className="flex items-center gap-3 mt-1">
-                        <span className="flex items-center gap-1 text-[11px]" style={{ color: 'var(--text-faint)' }}>
-                          <Calendar size={10} />
-                          {formatDate(release.published_at || release.created_at)}
-                        </span>
-                        {release.author && (
-                          <span className="text-[11px]" style={{ color: 'var(--text-faint)' }}>
-                            {t('admin.github.by')} {release.author.login}
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Expandable body */}
-                      {release.body && (
-                        <div className="mt-2">
-                          <button
-                            onClick={() => toggleExpand(release.id)}
-                            className="flex items-center gap-1 text-[11px] font-medium transition-colors"
-                            style={{ color: 'var(--text-muted)' }}
-                          >
-                            {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-                            {isExpanded ? t('admin.github.hideDetails') : t('admin.github.showDetails')}
-                          </button>
-
-                          {isExpanded && (
-                            <div className="mt-2 p-3 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
-                              {renderBody(release.body)}
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* Load more */}
-          {hasMore && (
-            <div className="text-center pt-2">
-              <button
-                onClick={handleLoadMore}
-                disabled={loadingMore}
-                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium transition-colors"
-                style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
-              >
-                {loadingMore ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
-                {loadingMore ? t('admin.github.loading') : t('admin.github.loadMore')}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-      )}
-    </div>
-  )
-}

client/src/components/Admin/PackingTemplateManager.tsx

@@ -1,306 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { adminApi } from '../../api/client'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Edit2, Package, X, Check, ChevronDown, ChevronRight, FolderPlus } from 'lucide-react'
-
-interface TemplateCategory { id: number; template_id: number; name: string; sort_order: number }
-interface TemplateItem { id: number; category_id: number; name: string; sort_order: number }
-interface Template { id: number; name: string; item_count: number; category_count: number; created_by_name: string }
-
-export default function PackingTemplateManager() {
-  const [templates, setTemplates] = useState<Template[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [showCreate, setShowCreate] = useState(false)
-  const [createName, setCreateName] = useState('')
-
-  // Expanded template state
-  const [expandedId, setExpandedId] = useState<number | null>(null)
-  const [categories, setCategories] = useState<TemplateCategory[]>([])
-  const [items, setItems] = useState<TemplateItem[]>([])
-
-  // Editing states
-  const [editingTemplate, setEditingTemplate] = useState<number | null>(null)
-  const [editTemplateName, setEditTemplateName] = useState('')
-  const [editingCatId, setEditingCatId] = useState<number | null>(null)
-  const [editCatName, setEditCatName] = useState('')
-  const [editingItemId, setEditingItemId] = useState<number | null>(null)
-  const [editItemName, setEditItemName] = useState('')
-
-  // Adding states
-  const [addingCategory, setAddingCategory] = useState(false)
-  const [newCatName, setNewCatName] = useState('')
-  const [addingItemToCatId, setAddingItemToCatId] = useState<number | null>(null)
-  const [newItemName, setNewItemName] = useState('')
-  const addItemRef = useRef<HTMLInputElement>(null)
-
-  const toast = useToast()
-  const { t } = useTranslation()
-
-  useEffect(() => { loadTemplates() }, [])
-
-  const loadTemplates = async () => {
-    setIsLoading(true)
-    try {
-      const data = await adminApi.packingTemplates()
-      setTemplates(data.templates || [])
-    } catch { toast.error(t('admin.packingTemplates.loadError')) }
-    finally { setIsLoading(false) }
-  }
-
-  const toggleExpand = async (id: number) => {
-    if (expandedId === id) { setExpandedId(null); return }
-    setExpandedId(id)
-    setAddingCategory(false)
-    setAddingItemToCatId(null)
-    try {
-      const data = await adminApi.getPackingTemplate(id)
-      setCategories(data.categories || [])
-      setItems(data.items || [])
-    } catch { toast.error(t('admin.packingTemplates.loadError')) }
-  }
-
-  // Template CRUD
-  const handleCreateTemplate = async () => {
-    if (!createName.trim()) return
-    try {
-      const data = await adminApi.createPackingTemplate({ name: createName.trim() })
-      setTemplates(prev => [{ ...data.template, item_count: 0, category_count: 0 }, ...prev])
-      setCreateName(''); setShowCreate(false)
-      setExpandedId(data.template.id); setCategories([]); setItems([])
-      toast.success(t('admin.packingTemplates.created'))
-    } catch { toast.error(t('admin.packingTemplates.createError')) }
-  }
-
-  const handleDeleteTemplate = async (id: number) => {
-    try {
-      await adminApi.deletePackingTemplate(id)
-      setTemplates(prev => prev.filter(t => t.id !== id))
-      if (expandedId === id) setExpandedId(null)
-      toast.success(t('admin.packingTemplates.deleted'))
-    } catch { toast.error(t('admin.packingTemplates.deleteError')) }
-  }
-
-  const handleRenameTemplate = async (id: number) => {
-    if (!editTemplateName.trim()) { setEditingTemplate(null); return }
-    try {
-      await adminApi.updatePackingTemplate(id, { name: editTemplateName.trim() })
-      setTemplates(prev => prev.map(t => t.id === id ? { ...t, name: editTemplateName.trim() } : t))
-      setEditingTemplate(null)
-    } catch { toast.error(t('admin.packingTemplates.saveError')) }
-  }
-
-  // Category CRUD
-  const handleAddCategory = async () => {
-    if (!newCatName.trim() || !expandedId) return
-    try {
-      const data = await adminApi.addTemplateCategory(expandedId, { name: newCatName.trim() })
-      setCategories(prev => [...prev, data.category])
-      setNewCatName(''); setAddingCategory(false)
-    } catch { toast.error(t('admin.packingTemplates.saveError')) }
-  }
-
-  const handleRenameCategory = async (catId: number) => {
-    if (!editCatName.trim() || !expandedId) { setEditingCatId(null); return }
-    try {
-      await adminApi.updateTemplateCategory(expandedId, catId, { name: editCatName.trim() })
-      setCategories(prev => prev.map(c => c.id === catId ? { ...c, name: editCatName.trim() } : c))
-      setEditingCatId(null)
-    } catch { toast.error(t('admin.packingTemplates.saveError')) }
-  }
-
-  const handleDeleteCategory = async (catId: number) => {
-    if (!expandedId) return
-    try {
-      await adminApi.deleteTemplateCategory(expandedId, catId)
-      setCategories(prev => prev.filter(c => c.id !== catId))
-      setItems(prev => prev.filter(i => i.category_id !== catId))
-    } catch { toast.error(t('admin.packingTemplates.deleteError')) }
-  }
-
-  // Item CRUD
-  const handleAddItem = async (catId: number) => {
-    if (!newItemName.trim() || !expandedId) return
-    try {
-      const data = await adminApi.addTemplateItem(expandedId, catId, { name: newItemName.trim() })
-      setItems(prev => [...prev, data.item])
-      setNewItemName('')
-      setTimeout(() => addItemRef.current?.focus(), 30)
-    } catch { toast.error(t('admin.packingTemplates.saveError')) }
-  }
-
-  const handleRenameItem = async (itemId: number) => {
-    if (!editItemName.trim() || !expandedId) { setEditingItemId(null); return }
-    try {
-      await adminApi.updateTemplateItem(expandedId, itemId, { name: editItemName.trim() })
-      setItems(prev => prev.map(i => i.id === itemId ? { ...i, name: editItemName.trim() } : i))
-      setEditingItemId(null)
-    } catch { toast.error(t('admin.packingTemplates.saveError')) }
-  }
-
-  const handleDeleteItem = async (itemId: number) => {
-    if (!expandedId) return
-    try {
-      await adminApi.deleteTemplateItem(expandedId, itemId)
-      setItems(prev => prev.filter(i => i.id !== itemId))
-    } catch { toast.error(t('admin.packingTemplates.deleteError')) }
-  }
-
-  const inputStyle = 'w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent outline-none'
-  const btnIcon = 'p-1.5 rounded-lg transition-colors'
-
-  return (
-    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-      {/* Header */}
-      <div className="p-5 border-b border-slate-100 flex items-center justify-between">
-        <div>
-          <h2 className="font-semibold text-slate-900">{t('admin.packingTemplates.title')}</h2>
-          <p className="text-xs text-slate-400 mt-1">{t('admin.packingTemplates.subtitle')}</p>
-        </div>
-        <button onClick={() => setShowCreate(true)}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors">
-          <Plus className="w-4 h-4" /> <span className="hidden sm:inline">{t('admin.packingTemplates.create')}</span>
-        </button>
-      </div>
-
-      {/* Create template */}
-      {showCreate && (
-        <div className="px-5 py-3 border-b border-slate-100 flex items-center gap-3">
-          <Package size={16} className="text-slate-400 flex-shrink-0" />
-          <input autoFocus value={createName} onChange={e => setCreateName(e.target.value)}
-            onKeyDown={e => { if (e.key === 'Enter') handleCreateTemplate(); if (e.key === 'Escape') setShowCreate(false) }}
-            placeholder={t('admin.packingTemplates.namePlaceholder')} className={inputStyle} />
-          <button onClick={handleCreateTemplate} className={`${btnIcon} text-slate-600 hover:text-slate-900`}><Check size={16} /></button>
-          <button onClick={() => setShowCreate(false)} className={`${btnIcon} text-slate-400 hover:text-slate-600`}><X size={16} /></button>
-        </div>
-      )}
-
-      {/* Template list */}
-      {isLoading ? (
-        <div className="p-8 text-center"><div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" /></div>
-      ) : templates.length === 0 ? (
-        <div className="p-8 text-center text-sm text-slate-400">{t('admin.packingTemplates.empty')}</div>
-      ) : (
-        <div className="divide-y divide-slate-100">
-          {templates.map(tmpl => (
-            <div key={tmpl.id}>
-              {/* Template row */}
-              <div className="px-5 py-3 flex items-center gap-3 hover:bg-slate-50 transition-colors">
-                <button onClick={() => toggleExpand(tmpl.id)} className="text-slate-400 flex-shrink-0 p-0 bg-transparent border-none cursor-pointer">
-                  {expandedId === tmpl.id ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
-                </button>
-                <Package size={16} className="text-slate-400 flex-shrink-0" />
-                {editingTemplate === tmpl.id ? (
-                  <input autoFocus value={editTemplateName} onChange={e => setEditTemplateName(e.target.value)}
-                    onBlur={() => handleRenameTemplate(tmpl.id)}
-                    onKeyDown={e => { if (e.key === 'Enter') handleRenameTemplate(tmpl.id); if (e.key === 'Escape') setEditingTemplate(null) }}
-                    className="flex-1 px-2 py-0.5 border border-slate-300 rounded text-sm" />
-                ) : (
-                  <span onClick={() => toggleExpand(tmpl.id)} className="flex-1 text-sm font-medium text-slate-700 cursor-pointer">{tmpl.name}</span>
-                )}
-                <span className="text-xs text-slate-400 px-2 py-0.5 bg-slate-100 rounded-full">
-                  {tmpl.category_count} {t('admin.packingTemplates.categories')} · {tmpl.item_count} {t('admin.packingTemplates.items')}
-                </span>
-                <button onClick={() => { setEditingTemplate(tmpl.id); setEditTemplateName(tmpl.name) }}
-                  className={`${btnIcon} hover:bg-slate-100 text-slate-400 hover:text-slate-700`}><Edit2 size={14} /></button>
-                <button onClick={() => handleDeleteTemplate(tmpl.id)}
-                  className={`${btnIcon} hover:bg-red-50 text-slate-400 hover:text-red-500`}><Trash2 size={14} /></button>
-              </div>
-
-              {/* Expanded content */}
-              {expandedId === tmpl.id && (
-                <div className="px-5 pb-4 ml-8 space-y-3">
-                  {categories.map(cat => {
-                    const catItems = items.filter(i => i.category_id === cat.id)
-                    return (
-                      <div key={cat.id} className="border border-slate-200 rounded-lg overflow-hidden">
-                        {/* Category header */}
-                        <div className="flex items-center gap-2 px-4 py-2.5 bg-slate-50">
-                          {editingCatId === cat.id ? (
-                            <>
-                              <input autoFocus value={editCatName} onChange={e => setEditCatName(e.target.value)}
-                                onBlur={() => handleRenameCategory(cat.id)}
-                                onKeyDown={e => { if (e.key === 'Enter') handleRenameCategory(cat.id); if (e.key === 'Escape') setEditingCatId(null) }}
-                                className="flex-1 px-2 py-0.5 border border-slate-300 rounded text-sm font-semibold" />
-                            </>
-                          ) : (
-                            <span className="flex-1 text-xs font-bold text-slate-500 uppercase tracking-wider">{cat.name}</span>
-                          )}
-                          <span className="text-xs text-slate-400">{catItems.length}</span>
-                          <button onClick={() => { setAddingItemToCatId(addingItemToCatId === cat.id ? null : cat.id); setNewItemName(''); setTimeout(() => addItemRef.current?.focus(), 30) }}
-                            className={`${btnIcon} text-slate-400 hover:text-slate-700`}><Plus size={13} /></button>
-                          <button onClick={() => { setEditingCatId(cat.id); setEditCatName(cat.name) }}
-                            className={`${btnIcon} text-slate-400 hover:text-slate-700`}><Edit2 size={13} /></button>
-                          <button onClick={() => handleDeleteCategory(cat.id)}
-                            className={`${btnIcon} text-slate-400 hover:text-red-500`}><Trash2 size={13} /></button>
-                        </div>
-
-                        {/* Items */}
-                        {(catItems.length > 0 || addingItemToCatId === cat.id) && (
-                          <div className="divide-y divide-slate-50">
-                            {catItems.map(item => (
-                              <div key={item.id} className="flex items-center gap-3 px-4 py-2 group">
-                                {editingItemId === item.id ? (
-                                  <>
-                                    <input autoFocus value={editItemName} onChange={e => setEditItemName(e.target.value)}
-                                      onKeyDown={e => { if (e.key === 'Enter') handleRenameItem(item.id); if (e.key === 'Escape') setEditingItemId(null) }}
-                                      className="flex-1 px-2 py-1 border border-slate-200 rounded-lg text-sm" />
-                                    <button onClick={() => handleRenameItem(item.id)} className="p-1 text-slate-600 hover:text-slate-900"><Check size={13} /></button>
-                                    <button onClick={() => setEditingItemId(null)} className="p-1 text-slate-400"><X size={13} /></button>
-                                  </>
-                                ) : (
-                                  <>
-                                    <span className="flex-1 text-sm text-slate-700">{item.name}</span>
-                                    <button onClick={() => { setEditingItemId(item.id); setEditItemName(item.name) }}
-                                      className="p-1 rounded opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-700 transition-all"><Edit2 size={12} /></button>
-                                    <button onClick={() => handleDeleteItem(item.id)}
-                                      className="p-1 rounded opacity-0 group-hover:opacity-100 text-slate-400 hover:text-red-500 transition-all"><Trash2 size={12} /></button>
-                                  </>
-                                )}
-                              </div>
-                            ))}
-
-                            {/* Add item inline */}
-                            {addingItemToCatId === cat.id && (
-                              <div className="flex items-center gap-2 px-4 py-2">
-                                <input ref={addItemRef} value={newItemName} onChange={e => setNewItemName(e.target.value)}
-                                  onKeyDown={e => { if (e.key === 'Enter' && newItemName.trim()) handleAddItem(cat.id); if (e.key === 'Escape') { setAddingItemToCatId(null); setNewItemName('') } }}
-                                  placeholder={t('admin.packingTemplates.itemName')}
-                                  className="flex-1 px-2 py-1 border border-slate-200 rounded-lg text-sm" />
-                                <button onClick={() => handleAddItem(cat.id)} disabled={!newItemName.trim()}
-                                  className="p-1.5 rounded-lg bg-slate-900 text-white disabled:bg-slate-300 hover:bg-slate-700 transition-colors"><Plus size={13} /></button>
-                                <button onClick={() => { setAddingItemToCatId(null); setNewItemName('') }}
-                                  className="p-1 text-slate-400 hover:text-slate-600"><X size={13} /></button>
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })}
-
-                  {/* Add category button */}
-                  {addingCategory ? (
-                    <div className="flex items-center gap-2">
-                      <input autoFocus value={newCatName} onChange={e => setNewCatName(e.target.value)}
-                        onKeyDown={e => { if (e.key === 'Enter') handleAddCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCatName('') } }}
-                        placeholder={t('admin.packingTemplates.categoryName')}
-                        className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm" />
-                      <button onClick={handleAddCategory} className={`${btnIcon} text-slate-600 hover:text-slate-900`}><Check size={15} /></button>
-                      <button onClick={() => { setAddingCategory(false); setNewCatName('') }} className={`${btnIcon} text-slate-400`}><X size={15} /></button>
-                    </div>
-                  ) : (
-                    <button onClick={() => setAddingCategory(true)}
-                      className="flex items-center gap-2 px-3 py-2.5 w-full text-sm text-slate-400 hover:text-slate-600 border border-dashed border-slate-200 rounded-lg hover:border-slate-400 transition-colors">
-                      <FolderPlus size={14} /> {t('admin.packingTemplates.addCategory')}
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

client/src/components/Admin/PermissionsPanel.tsx

@@ -1,170 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react'
-import { adminApi } from '../../api/client'
-import { useTranslation } from '../../i18n'
-import { usePermissionsStore, PermissionLevel } from '../../store/permissionsStore'
-import { useToast } from '../shared/Toast'
-import { Save, Loader2, RotateCcw } from 'lucide-react'
-import CustomSelect from '../shared/CustomSelect'
-
-interface PermissionEntry {
-  key: string
-  level: PermissionLevel
-  defaultLevel: PermissionLevel
-  allowedLevels: PermissionLevel[]
-}
-
-const LEVEL_LABELS: Record<string, string> = {
-  admin: 'perm.level.admin',
-  trip_owner: 'perm.level.tripOwner',
-  trip_member: 'perm.level.tripMember',
-  everybody: 'perm.level.everybody',
-}
-
-const CATEGORIES = [
-  { id: 'trip', keys: ['trip_create', 'trip_edit', 'trip_delete', 'trip_archive', 'trip_cover_upload'] },
-  { id: 'members', keys: ['member_manage'] },
-  { id: 'files', keys: ['file_upload', 'file_edit', 'file_delete'] },
-  { id: 'content', keys: ['place_edit', 'day_edit', 'reservation_edit'] },
-  { id: 'extras', keys: ['budget_edit', 'packing_edit', 'collab_edit', 'share_manage'] },
-]
-
-export default function PermissionsPanel(): React.ReactElement {
-  const { t } = useTranslation()
-  const toast = useToast()
-  const [entries, setEntries] = useState<PermissionEntry[]>([])
-  const [values, setValues] = useState<Record<string, PermissionLevel>>({})
-  const [loading, setLoading] = useState(true)
-  const [saving, setSaving] = useState(false)
-  const [dirty, setDirty] = useState(false)
-
-  useEffect(() => {
-    loadPermissions()
-  }, [])
-
-  const loadPermissions = async () => {
-    setLoading(true)
-    try {
-      const data = await adminApi.getPermissions()
-      setEntries(data.permissions)
-      const vals: Record<string, PermissionLevel> = {}
-      for (const p of data.permissions) vals[p.key] = p.level
-      setValues(vals)
-      setDirty(false)
-    } catch {
-      toast.error(t('common.error'))
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleChange = (key: string, level: PermissionLevel) => {
-    setValues(prev => ({ ...prev, [key]: level }))
-    setDirty(true)
-  }
-
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      const data = await adminApi.updatePermissions(values)
-      if (data.permissions) {
-        usePermissionsStore.getState().setPermissions(data.permissions)
-      }
-      setDirty(false)
-      toast.success(t('perm.saved'))
-    } catch {
-      toast.error(t('common.error'))
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleReset = () => {
-    const defaults: Record<string, PermissionLevel> = {}
-    for (const p of entries) defaults[p.key] = p.defaultLevel
-    setValues(defaults)
-    setDirty(true)
-  }
-
-  const entryMap = useMemo(() => new Map(entries.map(e => [e.key, e])), [entries])
-
-  if (loading) {
-    return (
-      <div className="p-8 text-center">
-        <div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-        <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
-          <div>
-            <h2 className="font-semibold text-slate-900">{t('perm.title')}</h2>
-            <p className="text-xs text-slate-400 mt-0.5">{t('perm.subtitle')}</p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleReset}
-              disabled={saving}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-40 transition-colors"
-            >
-              <RotateCcw className="w-3.5 h-3.5" />
-              {t('perm.resetDefaults')}
-            </button>
-            <button
-              onClick={handleSave}
-              disabled={saving || !dirty}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 disabled:bg-slate-400 transition-colors"
-            >
-              {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
-              {t('common.save')}
-            </button>
-          </div>
-        </div>
-
-        <div className="divide-y divide-slate-100">
-          {CATEGORIES.map(cat => (
-            <div key={cat.id} className="px-6 py-4">
-              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">
-                {t(`perm.cat.${cat.id}`)}
-              </h3>
-              <div className="space-y-3">
-                {cat.keys.map(key => {
-                  const entry = entryMap.get(key)
-                  if (!entry) return null
-                  const currentLevel = values[key] || entry.defaultLevel
-                  const isDefault = currentLevel === entry.defaultLevel
-                  return (
-                    <div key={key} className="flex items-center justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium text-slate-700">{t(`perm.action.${key}`)}</p>
-                        <p className="text-xs text-slate-400 mt-0.5">{t(`perm.actionHint.${key}`)}</p>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {!isDefault && (
-                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700">
-                            {t('perm.customized')}
-                          </span>
-                        )}
-                        <CustomSelect
-                          value={currentLevel}
-                          onChange={(val) => handleChange(key, val as PermissionLevel)}
-                          options={entry.allowedLevels.map(l => ({
-                            value: l,
-                            label: t(LEVEL_LABELS[l] || l),
-                          }))}
-                          style={{ minWidth: 160 }}
-                        />
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

client/src/components/Budget/BudgetPanel.tsx

@@ -1,869 +0,0 @@
-import ReactDOM from 'react-dom'
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
-import DOM from 'react-dom'
-import { useTripStore } from '../../store/tripStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download } from 'lucide-react'
-import CustomSelect from '../shared/CustomSelect'
-import { budgetApi } from '../../api/client'
-import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import type { BudgetItem, BudgetMember } from '../../types'
-import { currencyDecimals } from '../../utils/formatters'
-
-interface TripMember {
-  id: number
-  username: string
-  avatar_url?: string | null
-}
-
-interface PieSegment {
-  label: string
-  value: number
-  color: string
-}
-
-interface PerPersonSummaryEntry {
-  user_id: number
-  username: string
-  avatar_url: string | null
-  total_assigned: number
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-const CURRENCIES = [
-  'EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK',
-  'TRY', 'THB', 'AUD', 'CAD', 'NZD', 'BRL', 'MXN', 'INR', 'IDR', 'MYR',
-  'PHP', 'SGD', 'KRW', 'CNY', 'HKD', 'TWD', 'ZAR', 'AED', 'SAR', 'ILS',
-  'EGP', 'MAD', 'HUF', 'RON', 'BGN', 'HRK', 'ISK', 'RUB', 'UAH', 'BDT',
-  'LKR', 'VND', 'CLP', 'COP', 'PEN', 'ARS',
-]
-const SYMBOLS = {
-  EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł',
-  SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$',
-  NZD: 'NZ$', BRL: 'R$', MXN: 'MX$', INR: '₹', IDR: 'Rp', MYR: 'RM',
-  PHP: '₱', SGD: 'S$', KRW: '₩', CNY: '¥', HKD: 'HK$', TWD: 'NT$',
-  ZAR: 'R', AED: 'د.إ', SAR: '﷼', ILS: '₪', EGP: 'E£', MAD: 'MAD',
-  HUF: 'Ft', RON: 'lei', BGN: 'лв', HRK: 'kn', ISK: 'kr', RUB: '₽',
-  UAH: '₴', BDT: '৳', LKR: 'Rs', VND: '₫', CLP: 'CL$', COP: 'CO$',
-  PEN: 'S/.', ARS: 'AR$',
-}
-const PIE_COLORS = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
-
-const fmtNum = (v, locale, cur) => {
-  if (v == null || isNaN(v)) return '-'
-  const d = currencyDecimals(cur)
-  return Number(v).toLocaleString(locale, { minimumFractionDigits: d, maximumFractionDigits: d }) + ' ' + (SYMBOLS[cur] || cur)
-}
-
-const calcPP = (p, n) => (n > 0 ? p / n : null)
-const calcPD = (p, d) => (d > 0 ? p / d : null)
-const calcPPD = (p, n, d) => (n > 0 && d > 0 ? p / (n * d) : null)
-
-// ── Inline Edit Cell ─────────────────────────────────────────────────────────
-function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder = '', decimals = 2, locale, editTooltip, readOnly = false }) {
-  const [editing, setEditing] = useState(false)
-  const [editValue, setEditValue] = useState(value ?? '')
-  const inputRef = useRef(null)
-
-  useEffect(() => { if (editing && inputRef.current) { inputRef.current.focus(); inputRef.current.select() } }, [editing])
-
-  const save = () => {
-    setEditing(false)
-    let v = editValue
-    if (type === 'number') { const p = parseFloat(String(editValue).replace(',', '.')); v = isNaN(p) ? null : p }
-    if (v !== value) onSave(v)
-  }
-
-  if (editing) {
-    return <input ref={inputRef} type="text" inputMode={type === 'number' ? 'decimal' : 'text'} value={editValue}
-      onChange={e => setEditValue(e.target.value)} onBlur={save}
-      onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setEditValue(value ?? ''); setEditing(false) } }}
-      style={{ width: '100%', border: '1px solid var(--accent)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', ...style }}
-      placeholder={placeholder} />
-  }
-
-  const display = type === 'number' && value != null
-    ? Number(value).toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
-    : (value || '')
-
-  return (
-    <div onClick={() => { if (readOnly) return; setEditValue(value ?? ''); setEditing(true) }} title={readOnly ? undefined : editTooltip}
-      style={{ cursor: readOnly ? 'default' : 'pointer', padding: '2px 4px', borderRadius: 4, minHeight: 22, display: 'flex', alignItems: 'center',
-        justifyContent: style?.textAlign === 'center' ? 'center' : 'flex-start', transition: 'background 0.15s',
-        color: display ? 'var(--text-primary)' : 'var(--text-faint)', fontSize: 13, ...style }}
-      onMouseEnter={e => { if (!readOnly) e.currentTarget.style.background = 'var(--bg-hover)' }}
-      onMouseLeave={e => { if (!readOnly) e.currentTarget.style.background = 'transparent' }}>
-      {display || placeholder || '-'}
-    </div>
-  )
-}
-
-// ── Add Item Row ─────────────────────────────────────────────────────────────
-interface AddItemRowProps {
-  onAdd: (data: { name: string; total_price: number; persons: number | null; days: number | null; note: string | null; expense_date: string | null }) => void
-  t: (key: string) => string
-}
-
-function AddItemRow({ onAdd, t }: AddItemRowProps) {
-  const [name, setName] = useState('')
-  const [price, setPrice] = useState('')
-  const [persons, setPersons] = useState('')
-  const [days, setDays] = useState('')
-  const [note, setNote] = useState('')
-  const [expenseDate, setExpenseDate] = useState('')
-  const nameRef = useRef(null)
-
-  const handleAdd = () => {
-    if (!name.trim()) return
-    onAdd({ name: name.trim(), total_price: parseFloat(String(price).replace(',', '.')) || 0, persons: parseInt(persons) || null, days: parseInt(days) || null, note: note.trim() || null, expense_date: expenseDate || null })
-    setName(''); setPrice(''); setPersons(''); setDays(''); setNote(''); setExpenseDate('')
-    setTimeout(() => nameRef.current?.focus(), 50)
-  }
-
-  const inp = { border: '1px solid var(--border-primary)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', fontFamily: 'inherit', width: '100%', background: 'var(--bg-input)', color: 'var(--text-primary)' }
-
-  return (
-    <tr style={{ background: 'var(--bg-secondary)' }}>
-      <td style={{ padding: '4px 6px' }}>
-        <input ref={nameRef} value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder={t('budget.newEntry')} style={inp} />
-      </td>
-      <td style={{ padding: '4px 6px' }}>
-        <input value={price} onChange={e => setPrice(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder="0,00" inputMode="decimal" style={{ ...inp, textAlign: 'center' }} />
-      </td>
-      <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
-        <input value={persons} onChange={e => setPersons(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 60, margin: '0 auto' }} />
-      </td>
-      <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
-        <input value={days} onChange={e => setDays(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 60, margin: '0 auto' }} />
-      </td>
-      <td className="hidden md:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
-      <td className="hidden md:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
-      <td className="hidden lg:table-cell" style={{ padding: '4px 6px', color: 'var(--text-faint)', fontSize: 12, textAlign: 'center' }}>-</td>
-      <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
-        <div style={{ maxWidth: 90, margin: '0 auto' }}>
-          <CustomDatePicker value={expenseDate} onChange={setExpenseDate} placeholder="-" compact />
-        </div>
-      </td>
-      <td className="hidden sm:table-cell" style={{ padding: '4px 6px' }}>
-        <input value={note} onChange={e => setNote(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()} placeholder={t('budget.table.note')} style={inp} />
-      </td>
-      <td style={{ padding: '4px 6px', textAlign: 'center' }}>
-        <button onClick={handleAdd} disabled={!name.trim()} title={t('reservations.add')}
-          style={{ background: name.trim() ? 'var(--text-primary)' : 'var(--border-primary)', border: 'none', borderRadius: 4, color: 'var(--bg-primary)',
-            cursor: name.trim() ? 'pointer' : 'default', padding: '4px 8px', display: 'inline-flex', alignItems: 'center' }}>
-          <Plus size={14} />
-        </button>
-      </td>
-    </tr>
-  )
-}
-
-// ── Chip with custom tooltip ─────────────────────────────────────────────────
-interface ChipWithTooltipProps {
-  label: string
-  avatarUrl: string | null
-  size?: number
-  paid?: boolean
-  onClick?: () => void
-}
-
-function ChipWithTooltip({ label, avatarUrl, size = 20, paid, onClick }: ChipWithTooltipProps) {
-  const [hover, setHover] = useState(false)
-  const [pos, setPos] = useState({ top: 0, left: 0 })
-  const ref = useRef(null)
-
-  const onEnter = () => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-      setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
-    }
-    setHover(true)
-  }
-
-  const borderColor = paid ? '#22c55e' : 'var(--border-primary)'
-  const bg = paid ? 'rgba(34,197,94,0.15)' : 'var(--bg-tertiary)'
-
-  return (
-    <>
-      <div ref={ref} onMouseEnter={onEnter} onMouseLeave={() => setHover(false)}
-        onClick={onClick}
-        style={{
-          width: size, height: size, borderRadius: '50%', border: `2px solid ${borderColor}`,
-          background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: size * 0.4, fontWeight: 700, color: paid ? '#16a34a' : 'var(--text-muted)',
-          overflow: 'hidden', flexShrink: 0, cursor: onClick ? 'pointer' : 'default',
-          transition: 'border-color 0.15s, background 0.15s',
-        }}>
-        {avatarUrl
-          ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-          : label?.[0]?.toUpperCase()
-        }
-      </div>
-      {hover && ReactDOM.createPortal(
-        <div style={{
-          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
-          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
-          display: 'flex', alignItems: 'center', gap: 5,
-          background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
-          fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
-          boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint, #e5e7eb)',
-        }}>
-          {label}
-          {paid && (
-            <span style={{
-              fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4,
-              background: 'rgba(34,197,94,0.15)', color: '#16a34a',
-              textTransform: 'uppercase', letterSpacing: '0.03em',
-            }}>Paid</span>
-          )}
-        </div>,
-        document.body
-      )}
-    </>
-  )
-}
-
-// ── Budget Member Chips (for Persons column) ────────────────────────────────
-interface BudgetMemberChipsProps {
-  members?: BudgetMember[]
-  tripMembers?: TripMember[]
-  onSetMembers: (memberIds: number[]) => void
-  onTogglePaid?: (userId: number, paid: boolean) => void
-  compact?: boolean
-  readOnly?: boolean
-}
-
-function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, onTogglePaid, compact = true, readOnly = false }: BudgetMemberChipsProps) {
-  const chipSize = compact ? 20 : 30
-  const btnSize = compact ? 18 : 28
-  const iconSize = compact ? (members.length > 0 ? 8 : 9) : (members.length > 0 ? 12 : 14)
-  const [showDropdown, setShowDropdown] = useState(false)
-  const [dropPos, setDropPos] = useState({ top: 0, left: 0 })
-  const btnRef = useRef(null)
-  const dropRef = useRef(null)
-
-  const openDropdown = useCallback(() => {
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect()
-      setDropPos({ top: rect.bottom + 4, left: rect.left + rect.width / 2 })
-    }
-    setShowDropdown(v => !v)
-  }, [])
-
-  useEffect(() => {
-    if (!showDropdown) return
-    const close = (e) => {
-      if (dropRef.current && dropRef.current.contains(e.target)) return
-      if (btnRef.current && btnRef.current.contains(e.target)) return
-      setShowDropdown(false)
-    }
-    document.addEventListener('mousedown', close)
-    return () => document.removeEventListener('mousedown', close)
-  }, [showDropdown])
-
-  const memberIds = members.map(m => m.user_id)
-
-  const toggleMember = (userId) => {
-    const newIds = memberIds.includes(userId)
-      ? memberIds.filter(id => id !== userId)
-      : [...memberIds, userId]
-    onSetMembers(newIds)
-  }
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
-      {members.map(m => (
-        <ChipWithTooltip key={m.user_id} label={m.username} avatarUrl={m.avatar_url} size={chipSize}
-          paid={!!m.paid}
-          onClick={!readOnly && onTogglePaid ? () => onTogglePaid(m.user_id, !m.paid) : undefined}
-        />
-      ))}
-      {!readOnly && (
-        <button ref={btnRef} onClick={openDropdown}
-          style={{
-            width: btnSize, height: btnSize, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
-            background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-            color: 'var(--text-faint)', padding: 0, flexShrink: 0,
-          }}>
-          {members.length > 0 ? <Pencil size={iconSize} /> : <Users size={iconSize} />}
-        </button>
-      )}
-      {showDropdown && ReactDOM.createPortal(
-        <div ref={dropRef} style={{
-          position: 'fixed', top: dropPos.top, left: dropPos.left, transform: 'translateX(-50%)', zIndex: 10000,
-          background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-          boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 150,
-        }}>
-          {tripMembers.map(tm => {
-            const isActive = memberIds.includes(tm.id)
-            return (
-              <button key={tm.id} onClick={() => toggleMember(tm.id)} style={{
-                display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '5px 8px',
-                borderRadius: 6, border: 'none', background: isActive ? 'var(--bg-hover)' : 'none', cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 11, color: 'var(--text-primary)', textAlign: 'left',
-              }}
-                onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'none' }}
-              >
-                <div style={{
-                  width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700,
-                  color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
-                }}>
-                  {tm.avatar_url
-                    ? <img src={tm.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                    : tm.username?.[0]?.toUpperCase()
-                  }
-                </div>
-                <span style={{ flex: 1 }}>{tm.username}</span>
-                {isActive && <Check size={12} color="var(--text-primary)" />}
-              </button>
-            )
-          })}
-        </div>,
-        document.body
-      )}
-    </div>
-  )
-}
-
-// ── Per-Person Inline (inside total card) ────────────────────────────────────
-interface PerPersonInlineProps {
-  tripId: number
-  budgetItems: BudgetItem[]
-  currency: string
-  locale: string
-}
-
-function PerPersonInline({ tripId, budgetItems, currency, locale }: PerPersonInlineProps) {
-  const [data, setData] = useState(null)
-  const fmt = (v) => fmtNum(v, locale, currency)
-
-  useEffect(() => {
-    budgetApi.perPersonSummary(tripId).then(d => setData(d.summary)).catch(() => {})
-  }, [tripId, budgetItems])
-
-  if (!data || data.length === 0) return null
-
-  return (
-    <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {data.map(person => (
-        <div key={person.user_id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <div style={{
-            width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.1)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700,
-            color: 'rgba(255,255,255,0.7)', overflow: 'hidden', flexShrink: 0,
-          }}>
-            {person.avatar_url
-              ? <img src={person.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-              : person.username?.[0]?.toUpperCase()
-            }
-          </div>
-          <span style={{ flex: 1, fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.7)' }}>{person.username}</span>
-          <span style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{fmt(person.total_assigned)}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// ── Pie Chart (pure CSS conic-gradient) ──────────────────────────────────────
-interface PieChartProps {
-  segments: PieSegment[]
-  size?: number
-  totalLabel: string
-}
-
-function PieChart({ segments, size = 200, totalLabel }: PieChartProps) {
-  if (!segments.length) return null
-
-  const total = segments.reduce((s, x) => s + x.value, 0)
-  if (total === 0) return null
-
-  let cumDeg = 0
-  const stops = segments.map(seg => {
-    const start = cumDeg
-    const deg = (seg.value / total) * 360
-    cumDeg += deg
-    return `${seg.color} ${start}deg ${start + deg}deg`
-  }).join(', ')
-
-  return (
-    <div style={{ position: 'relative', width: size, height: size, margin: '0 auto' }}>
-      <div style={{
-        width: size, height: size, borderRadius: '50%',
-        background: `conic-gradient(${stops})`,
-        boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
-      }} />
-      <div style={{
-        position: 'absolute', top: '50%', left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: size * 0.55, height: size * 0.55,
-        borderRadius: '50%', background: 'var(--bg-card)',
-        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-        boxShadow: 'inset 0 0 12px rgba(0,0,0,0.04)',
-      }}>
-        <Wallet size={18} color="var(--text-faint)" style={{ marginBottom: 2 }} />
-        <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 500 }}>{totalLabel}</span>
-      </div>
-    </div>
-  )
-}
-
-// ── Main Component ───────────────────────────────────────────────────────────
-interface BudgetPanelProps {
-  tripId: number
-  tripMembers?: TripMember[]
-}
-
-export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelProps) {
-  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid } = useTripStore()
-  const can = useCanDo()
-  const { t, locale } = useTranslation()
-  const [newCategoryName, setNewCategoryName] = useState('')
-  const [editingCat, setEditingCat] = useState(null) // { name, value }
-  const [settlement, setSettlement] = useState<{ balances: any[]; flows: any[] } | null>(null)
-  const [settlementOpen, setSettlementOpen] = useState(false)
-  const currency = trip?.currency || 'EUR'
-  const canEdit = can('budget_edit', trip)
-
-  const fmt = (v, cur) => fmtNum(v, locale, cur)
-  const hasMultipleMembers = tripMembers.length > 1
-
-  // Load settlement data whenever budget items change
-  useEffect(() => {
-    if (!hasMultipleMembers) return
-    budgetApi.settlement(tripId).then(setSettlement).catch(() => {})
-  }, [tripId, budgetItems, hasMultipleMembers])
-
-  const setCurrency = (cur) => {
-    if (tripId) updateTrip(tripId, { currency: cur })
-  }
-
-  useEffect(() => { if (tripId) loadBudgetItems(tripId) }, [tripId])
-
-  const grouped = useMemo(() => (budgetItems || []).reduce((acc, item) => {
-    const cat = item.category || 'Other'
-    if (!acc[cat]) acc[cat] = []
-    acc[cat].push(item)
-    return acc
-  }, {}), [budgetItems])
-
-  const categoryNames = Object.keys(grouped)
-  const grandTotal = (budgetItems || []).reduce((s, i) => s + (i.total_price || 0), 0)
-
-  const pieSegments = useMemo(() =>
-    categoryNames.map((cat, i) => ({
-      name: cat,
-      value: grouped[cat].reduce((s, x) => s + (x.total_price || 0), 0),
-      color: PIE_COLORS[i % PIE_COLORS.length],
-    })).filter(s => s.value > 0)
-  , [grouped, categoryNames])
-
-  const handleAddItem = async (category, data) => { try { await addBudgetItem(tripId, { ...data, category }) } catch {} }
-  const handleUpdateField = async (id, field, value) => { try { await updateBudgetItem(tripId, id, { [field]: value }) } catch {} }
-  const handleDeleteItem = async (id) => { try { await deleteBudgetItem(tripId, id) } catch {} }
-  const handleDeleteCategory = async (cat) => {
-    const items = grouped[cat] || []
-    for (const item of Array.from(items)) await deleteBudgetItem(tripId, item.id)
-  }
-  const handleRenameCategory = async (oldName, newName) => {
-    if (!newName.trim() || newName.trim() === oldName) return
-    const items = grouped[oldName] || []
-    for (const item of Array.from(items)) await updateBudgetItem(tripId, item.id, { category: newName.trim() })
-  }
-  const handleAddCategory = () => {
-    if (!newCategoryName.trim()) return
-    addBudgetItem(tripId, { name: t('budget.defaultEntry'), category: newCategoryName.trim(), total_price: 0 })
-    setNewCategoryName('')
-  }
-
-  const handleExportCsv = () => {
-    const sep = ';'
-    const esc = (v: any) => { const s = String(v ?? ''); return s.includes(sep) || s.includes('"') || s.includes('\n') ? '"' + s.replace(/"/g, '""') + '"' : s }
-    const d = currencyDecimals(currency)
-    const fmtPrice = (v: number | null | undefined) => v != null ? v.toFixed(d) : ''
-
-    const fmtDate = (iso: string) => { if (!iso) return ''; const d = new Date(iso + 'T00:00:00Z'); return d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: 'UTC' }) }
-    const header = ['Category', 'Name', 'Date', 'Total (' + currency + ')', 'Persons', 'Days', 'Per Person', 'Per Day', 'Per Person/Day', 'Note']
-    const rows = [header.join(sep)]
-
-    for (const cat of categoryNames) {
-      for (const item of (grouped[cat] || [])) {
-        const pp = calcPP(item.total_price, item.persons)
-        const pd = calcPD(item.total_price, item.days)
-        const ppd = calcPPD(item.total_price, item.persons, item.days)
-        rows.push([
-          esc(item.category), esc(item.name), esc(fmtDate(item.expense_date || '')),
-          fmtPrice(item.total_price), item.persons ?? '', item.days ?? '',
-          fmtPrice(pp), fmtPrice(pd), fmtPrice(ppd),
-          esc(item.note || ''),
-        ].join(sep))
-      }
-    }
-
-    const bom = '\uFEFF'
-    const blob = new Blob([bom + rows.join('\r\n')], { type: 'text/csv;charset=utf-8;' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    const safeName = (trip?.title || 'trip').replace(/[^a-zA-Z0-9\u00C0-\u024F _-]/g, '').trim()
-    a.download = `budget-${safeName}.csv`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const th = { padding: '6px 8px', textAlign: 'center', fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', borderBottom: '2px solid var(--border-primary)', whiteSpace: 'nowrap', background: 'var(--bg-secondary)' }
-  const td = { padding: '2px 6px', borderBottom: '1px solid var(--border-secondary)', fontSize: 13, verticalAlign: 'middle', color: 'var(--text-primary)' }
-
-  // ── Empty State ──────────────────────────────────────────────────────────
-  if (!budgetItems || budgetItems.length === 0) {
-    return (
-      <div style={{ padding: 24, maxWidth: 600, margin: '60px auto', textAlign: 'center' }}>
-        <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
-          <Calculator size={28} color="#6b7280" />
-        </div>
-        <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{t('budget.emptyTitle')}</h2>
-        <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: '0 0 24px', lineHeight: 1.5 }}>{t('budget.emptyText')}</p>
-        {canEdit && (
-          <div style={{ display: 'flex', gap: 6, justifyContent: 'center', alignItems: 'stretch', maxWidth: 320, margin: '0 auto' }}>
-            <input value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
-              placeholder={t('budget.emptyPlaceholder')}
-              style={{ flex: 1, padding: '9px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', minWidth: 0 }} />
-            <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
-              style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '0 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.5, flexShrink: 0 }}>
-              <Plus size={16} />
-            </button>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // ── Main Layout ──────────────────────────────────────────────────────────
-  return (
-    <div style={{ fontFamily: "'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif" }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 16px 12px', flexWrap: 'wrap', gap: 8 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <Calculator size={20} color="var(--text-primary)" />
-          <h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('budget.title')}</h2>
-        </div>
-        <button onClick={handleExportCsv} title={t('budget.exportCsv')}
-          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-muted)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
-          <Download size={13} /> CSV
-        </button>
-      </div>
-
-      <div style={{ display: 'flex', gap: 20, padding: '0 16px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          {categoryNames.map((cat, ci) => {
-            const items = grouped[cat]
-            const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
-            const color = PIE_COLORS[ci % PIE_COLORS.length]
-
-            return (
-              <div key={cat} style={{ marginBottom: 16 }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#000000', color: '#fff', borderRadius: '10px 10px 0 0', padding: '9px 14px' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
-                    <div style={{ width: 10, height: 10, borderRadius: 3, background: color, flexShrink: 0 }} />
-                    {canEdit && editingCat?.name === cat ? (
-                      <input
-                        autoFocus
-                        value={editingCat.value}
-                        onChange={e => setEditingCat({ ...editingCat, value: e.target.value })}
-                        onBlur={() => { handleRenameCategory(cat, editingCat.value); setEditingCat(null) }}
-                        onKeyDown={e => { if (e.key === 'Enter') { handleRenameCategory(cat, editingCat.value); setEditingCat(null) } if (e.key === 'Escape') setEditingCat(null) }}
-                        style={{ fontWeight: 600, fontSize: 13, background: 'rgba(255,255,255,0.15)', border: 'none', borderRadius: 4, color: '#fff', padding: '1px 6px', outline: 'none', fontFamily: 'inherit', width: '100%' }}
-                      />
-                    ) : (
-                      <>
-                        <span style={{ fontWeight: 600, fontSize: 13 }}>{cat}</span>
-                        {canEdit && (
-                          <button onClick={() => setEditingCat({ name: cat, value: cat })}
-                            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.4)', display: 'flex', padding: 1 }}
-                            onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.4)'}>
-                            <Pencil size={10} />
-                          </button>
-                        )}
-                      </>
-                    )}
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <span style={{ fontSize: 13, fontWeight: 500, opacity: 0.9 }}>{fmt(subtotal, currency)}</span>
-                    {canEdit && (
-                      <button onClick={() => handleDeleteCategory(cat)} title={t('budget.deleteCategory')}
-                        style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 4, color: '#fff', cursor: 'pointer', padding: '3px 6px', display: 'flex', alignItems: 'center', opacity: 0.6 }}
-                        onMouseEnter={e => e.currentTarget.style.opacity = '1'} onMouseLeave={e => e.currentTarget.style.opacity = '0.6'}>
-                        <Trash2 size={13} />
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                <div style={{ overflowX: 'auto', border: '1px solid var(--border-primary)', borderTop: 'none', borderRadius: '0 0 10px 10px' }}>
-                  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-                    <thead>
-                      <tr>
-                        <th style={{ ...th, textAlign: 'left', minWidth: 120 }}>{t('budget.table.name')}</th>
-                        <th style={{ ...th, minWidth: 75 }}>{t('budget.table.total')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 160 }}>{t('budget.table.persons')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 55 }}>{t('budget.table.days')}</th>
-                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 100 }}>{t('budget.table.perPerson')}</th>
-                        <th className="hidden md:table-cell" style={{ ...th, minWidth: 90 }}>{t('budget.table.perDay')}</th>
-                        <th className="hidden lg:table-cell" style={{ ...th, minWidth: 95 }}>{t('budget.table.perPersonDay')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, width: 90, maxWidth: 90 }}>{t('budget.table.date')}</th>
-                        <th className="hidden sm:table-cell" style={{ ...th, minWidth: 150 }}>{t('budget.table.note')}</th>
-                        <th style={{ ...th, width: 36 }}></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {items.map(item => {
-                        const pp = calcPP(item.total_price, item.persons)
-                        const pd = calcPD(item.total_price, item.days)
-                        const ppd = calcPPD(item.total_price, item.persons, item.days)
-                        const hasMembers = item.members?.length > 0
-                        return (
-                          <tr key={item.id} style={{ transition: 'background 0.1s' }}
-                            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                            <td style={td}>
-                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
-                              {/* Mobile: larger chips under name since Persons column is hidden */}
-                              {hasMultipleMembers && (
-                                <div className="sm:hidden" style={{ marginTop: 4 }}>
-                                  <BudgetMemberChips
-                                    members={item.members || []}
-                                    tripMembers={tripMembers}
-                                    onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
-                                    onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
-                                    compact={false}
-                                    readOnly={!canEdit}
-                                  />
-                                </div>
-                              )}
-                            </td>
-                            <td style={{ ...td, textAlign: 'center' }}>
-                              <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
-                            </td>
-                            <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center', position: 'relative' }}>
-                              {hasMultipleMembers ? (
-                                <BudgetMemberChips
-                                  members={item.members || []}
-                                  tripMembers={tripMembers}
-                                  onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
-                                  onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
-                                  readOnly={!canEdit}
-                                />
-                              ) : (
-                                <InlineEditCell value={item.persons} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'persons', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
-                              )}
-                            </td>
-                            <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center' }}>
-                              <InlineEditCell value={item.days} type="number" decimals={0} onSave={v => handleUpdateField(item.id, 'days', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
-                            </td>
-                            <td className="hidden md:table-cell" style={{ ...td, textAlign: 'center', color: pp != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{pp != null ? fmt(pp, currency) : '-'}</td>
-                            <td className="hidden md:table-cell" style={{ ...td, textAlign: 'center', color: pd != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{pd != null ? fmt(pd, currency) : '-'}</td>
-                            <td className="hidden lg:table-cell" style={{ ...td, textAlign: 'center', color: ppd != null ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{ppd != null ? fmt(ppd, currency) : '-'}</td>
-                            <td className="hidden sm:table-cell" style={{ ...td, padding: '2px 6px', width: 90, maxWidth: 90, textAlign: 'center' }}>
-                              {canEdit ? (
-                                <div style={{ maxWidth: 90, margin: '0 auto' }}>
-                                  <CustomDatePicker value={item.expense_date || ''} onChange={v => handleUpdateField(item.id, 'expense_date', v || null)} placeholder="—" compact borderless />
-                                </div>
-                              ) : (
-                                <span style={{ fontSize: 11, color: item.expense_date ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{item.expense_date || '—'}</span>
-                              )}
-                            </td>
-                            <td className="hidden sm:table-cell" style={td}><InlineEditCell value={item.note} onSave={v => handleUpdateField(item.id, 'note', v)} placeholder={t('budget.table.note')} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} /></td>
-                            <td style={{ ...td, textAlign: 'center' }}>
-                              {canEdit && (
-                              <button onClick={() => handleDeleteItem(item.id)} title={t('common.delete')}
-                                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: 'var(--text-faint)', borderRadius: 4, display: 'inline-flex', transition: 'color 0.15s' }}
-                                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = '#d1d5db'}>
-                                <Trash2 size={14} />
-                              </button>
-                              )}
-                            </td>
-                          </tr>
-                        )
-                      })}
-                      {canEdit && <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-
-        <div className="w-full md:w-[240px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
-          <div style={{ marginBottom: 12 }}>
-            <CustomSelect
-              value={currency}
-              onChange={setCurrency}
-              disabled={!canEdit}
-              options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
-              searchable
-            />
-          </div>
-
-          {canEdit && (
-            <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
-              <input
-                value={newCategoryName}
-                onChange={e => setNewCategoryName(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
-                placeholder={t('budget.categoryName')}
-                style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-input)', color: 'var(--text-primary)' }}
-              />
-              <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
-                style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '9px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.4, flexShrink: 0 }}>
-                <Plus size={16} />
-              </button>
-            </div>
-          )}
-
-          <div style={{
-            background: 'linear-gradient(135deg, #000000 0%, #18181b 100%)',
-            borderRadius: 16, padding: '24px 20px', color: '#fff', marginBottom: 16,
-            boxShadow: '0 8px 32px rgba(15,23,42,0.18)',
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Wallet size={18} color="rgba(255,255,255,0.8)" />
-              </div>
-              <div>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 0.5 }}>{t('budget.totalBudget')}</div>
-              </div>
-            </div>
-            <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
-              {Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: currencyDecimals(currency), maximumFractionDigits: currencyDecimals(currency) })}
-            </div>
-            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{SYMBOLS[currency] || currency} {currency}</div>
-            {hasMultipleMembers && (budgetItems || []).some(i => i.members?.length > 0) && (
-              <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} />
-            )}
-
-            {/* Settlement dropdown inside the total card */}
-            {hasMultipleMembers && settlement && settlement.flows.length > 0 && (
-              <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 12 }}>
-                <button onClick={() => setSettlementOpen(v => !v)} style={{
-                  display: 'flex', alignItems: 'center', gap: 6, width: '100%',
-                  background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit',
-                  color: 'rgba(255,255,255,0.6)', fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
-                }}>
-                  {settlementOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
-                  {t('budget.settlement')}
-                  <span style={{ position: 'relative', display: 'inline-flex', marginLeft: 2 }}>
-                    <span style={{ display: 'flex', cursor: 'help' }}
-                      onMouseEnter={e => { const tip = e.currentTarget.nextElementSibling as HTMLElement; if (tip) tip.style.display = 'block' }}
-                      onMouseLeave={e => { const tip = e.currentTarget.nextElementSibling as HTMLElement; if (tip) tip.style.display = 'none' }}
-                      onClick={e => e.stopPropagation()}
-                    >
-                      <Info size={11} strokeWidth={2} />
-                    </span>
-                    <div style={{
-                      display: 'none', position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
-                      marginTop: 6, width: 220, padding: '10px 12px', borderRadius: 10, zIndex: 100,
-                      background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
-                      boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
-                      fontSize: 11, fontWeight: 400, color: 'var(--text-secondary)', lineHeight: 1.5, textAlign: 'left',
-                    }}>
-                      {t('budget.settlementInfo')}
-                    </div>
-                  </span>
-                </button>
-
-                {settlementOpen && (
-                  <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    {settlement.flows.map((flow, i) => (
-                      <div key={i} style={{
-                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
-                        padding: '8px 10px', borderRadius: 10,
-                        background: 'rgba(255,255,255,0.06)',
-                      }}>
-                        <ChipWithTooltip label={flow.from.username} avatarUrl={flow.from.avatar_url} size={28} />
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
-                          <span style={{ fontSize: 12, fontWeight: 700, color: '#f87171', whiteSpace: 'nowrap' }}>
-                            {fmt(flow.amount, currency)}
-                          </span>
-                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
-                        </div>
-                        <ChipWithTooltip label={flow.to.username} avatarUrl={flow.to.avatar_url} size={28} />
-                      </div>
-                    ))}
-
-                    {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).length > 0 && (
-                      <div style={{ marginTop: 4, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 8 }}>
-                        <div style={{ fontSize: 9, fontWeight: 600, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
-                          {t('budget.netBalances')}
-                        </div>
-                        {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => (
-                          <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}>
-                            <div style={{
-                              width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
-                              background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              fontSize: 8, fontWeight: 700, color: 'rgba(255,255,255,0.6)', overflow: 'hidden',
-                            }}>
-                              {b.avatar_url
-                                ? <img src={b.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                                : b.username?.[0]?.toUpperCase()
-                              }
-                            </div>
-                            <span style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                              {b.username}
-                            </span>
-                            <span style={{
-                              fontSize: 11, fontWeight: 600, flexShrink: 0,
-                              color: b.balance > 0 ? '#4ade80' : '#f87171',
-                            }}>
-                              {b.balance > 0 ? '+' : ''}{fmt(b.balance, currency)}
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {pieSegments.length > 0 && (
-            <div style={{
-              background: 'var(--bg-card)', borderRadius: 16, padding: '20px 16px',
-              border: '1px solid var(--border-primary)',
-              boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
-              marginBottom: 16,
-            }}>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 16, textAlign: 'center' }}>{t('budget.byCategory')}</div>
-
-              <PieChart segments={pieSegments} size={180} totalLabel={t('budget.total')} />
-
-              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                {pieSegments.map(seg => {
-                  const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
-                  return (
-                    <div key={seg.name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
-                      <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{seg.name}</span>
-                      <span style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(seg.value, currency)}</span>
-                      <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, whiteSpace: 'nowrap', minWidth: 38, textAlign: 'right' }}>{pct}%</span>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-        </div>
-      </div>
-    </div>
-  )
-}

client/src/components/Collab/CollabChat.tsx

@@ -1,841 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import ReactDOM from 'react-dom'
-import { ArrowUp, Trash2, Reply, ChevronUp, MessageCircle, Smile, X } from 'lucide-react'
-import { collabApi } from '../../api/client'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTripStore } from '../../store/tripStore'
-import { addListener, removeListener } from '../../api/websocket'
-import { useTranslation } from '../../i18n'
-import type { User } from '../../types'
-
-interface ChatReaction {
-  emoji: string
-  count: number
-  users: { id: number; username: string }[]
-}
-
-interface ChatMessage {
-  id: number
-  trip_id: number
-  user_id: number
-  text: string
-  reply_to_id: number | null
-  reactions: ChatReaction[]
-  created_at: string
-  user?: { username: string; avatar_url: string | null }
-  reply_to?: ChatMessage | null
-}
-
-// ── Twemoji helper (Apple-style emojis via CDN) ──
-function emojiToCodepoint(emoji) {
-  const codepoints = []
-  for (const c of emoji) {
-    const cp = c.codePointAt(0)
-    if (cp !== 0xfe0f) codepoints.push(cp.toString(16)) // skip variation selector
-  }
-  return codepoints.join('-')
-}
-
-function TwemojiImg({ emoji, size = 20, style = {} }) {
-  const cp = emojiToCodepoint(emoji)
-  const [failed, setFailed] = useState(false)
-
-  if (failed) {
-    return <span style={{ fontSize: size, lineHeight: 1, display: 'inline-block', verticalAlign: 'middle', ...style }}>{emoji}</span>
-  }
-
-  return (
-    <img
-      src={`https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/${cp}.png`}
-      alt={emoji}
-      draggable={false}
-      style={{ width: size, height: size, display: 'inline-block', verticalAlign: 'middle', ...style }}
-      onError={() => setFailed(true)}
-    />
-  )
-}
-
-const EMOJI_CATEGORIES = {
-  'Smileys': ['😀','😂','🥹','😍','🤩','😎','🥳','😭','🤔','👀','🙈','🫠','😴','🤯','🥺','😤','💀','👻','🫡','🤝'],
-  'Reactions': ['❤️','🔥','👍','👎','👏','🎉','💯','✨','⭐','💪','🙏','😱','😂','💖','💕','🤞','✅','❌','⚡','🏆'],
-  'Travel': ['✈️','🏖️','🗺️','🧳','🏔️','🌅','🌴','🚗','🚂','🛳️','🏨','🍽️','🍕','🍹','📸','🎒','⛱️','🌍','🗼','🎌'],
-}
-
-// SQLite stores UTC without 'Z' suffix — append it so JS parses as UTC
-function parseUTC(s) { return new Date(s && !s.endsWith('Z') ? s + 'Z' : s) }
-
-function formatTime(isoString, is12h) {
-  const d = parseUTC(isoString)
-  const h = d.getHours()
-  const mm = String(d.getMinutes()).padStart(2, '0')
-  if (is12h) {
-    const period = h >= 12 ? 'PM' : 'AM'
-    const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-    return `${h12}:${mm} ${period}`
-  }
-  return `${String(h).padStart(2, '0')}:${mm}`
-}
-
-function formatDateSeparator(isoString, t) {
-  const d = parseUTC(isoString)
-  const now = new Date()
-  const yesterday = new Date(); yesterday.setDate(now.getDate() - 1)
-
-  if (d.toDateString() === now.toDateString()) return t('collab.chat.today') || 'Today'
-  if (d.toDateString() === yesterday.toDateString()) return t('collab.chat.yesterday') || 'Yesterday'
-
-  return d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
-}
-
-function shouldShowDateSeparator(msg, prevMsg) {
-  if (!prevMsg) return true
-  const d1 = parseUTC(msg.created_at).toDateString()
-  const d2 = parseUTC(prevMsg.created_at).toDateString()
-  return d1 !== d2
-}
-
-/* ── Emoji Picker ── */
-interface EmojiPickerProps {
-  onSelect: (emoji: string) => void
-  onClose: () => void
-  anchorRef: React.RefObject<HTMLElement | null>
-  containerRef: React.RefObject<HTMLElement | null>
-}
-
-function EmojiPicker({ onSelect, onClose, anchorRef, containerRef }: EmojiPickerProps) {
-  const [cat, setCat] = useState(Object.keys(EMOJI_CATEGORIES)[0])
-  const ref = useRef(null)
-
-  const getPos = () => {
-    const container = containerRef?.current
-    const anchor = anchorRef?.current
-    if (container && anchor) {
-      const cRect = container.getBoundingClientRect()
-      const aRect = anchor.getBoundingClientRect()
-      return { bottom: window.innerHeight - aRect.top + 16, left: cRect.left + cRect.width / 2 - 140 }
-    }
-    return { bottom: 80, left: 0 }
-  }
-  const pos = getPos()
-
-  useEffect(() => {
-    const close = (e) => {
-      if (ref.current && ref.current.contains(e.target)) return
-      if (anchorRef?.current && anchorRef.current.contains(e.target)) return
-      onClose()
-    }
-    document.addEventListener('mousedown', close)
-    return () => document.removeEventListener('mousedown', close)
-  }, [onClose, anchorRef])
-
-  return ReactDOM.createPortal(
-    <div ref={ref} style={{
-      position: 'fixed', bottom: pos.bottom, left: pos.left, zIndex: 10000,
-      background: 'var(--bg-card)', border: '1px solid var(--border-faint)', borderRadius: 16,
-      boxShadow: '0 8px 32px rgba(0,0,0,0.18)', width: 280, overflow: 'hidden',
-    }}>
-      {/* Category tabs */}
-      <div style={{ display: 'flex', borderBottom: '1px solid var(--border-faint)', padding: '6px 8px', gap: 2 }}>
-        {Object.keys(EMOJI_CATEGORIES).map(c => (
-          <button key={c} onClick={() => setCat(c)} style={{
-            flex: 1, padding: '4px 0', borderRadius: 6, border: 'none', cursor: 'pointer',
-            background: cat === c ? 'var(--bg-hover)' : 'transparent',
-            color: 'var(--text-primary)', fontSize: 10, fontWeight: 600, fontFamily: 'inherit',
-          }}>
-            {c}
-          </button>
-        ))}
-      </div>
-      {/* Emoji grid */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 2, padding: 8 }}>
-        {EMOJI_CATEGORIES[cat].map((emoji, i) => (
-          <button key={i} onClick={() => onSelect(emoji)} style={{
-            width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
-            background: 'none', border: 'none', cursor: 'pointer', borderRadius: 6,
-            padding: 2, transition: 'transform 0.1s',
-          }}
-            onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.transform = 'scale(1.2)' }}
-            onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.transform = 'scale(1)' }}
-          >
-            <TwemojiImg emoji={emoji} size={20} />
-          </button>
-        ))}
-      </div>
-    </div>,
-    document.body
-  )
-}
-
-/* ── Reaction Quick Menu (right-click) ── */
-const QUICK_REACTIONS = ['❤️', '😂', '👍', '😮', '😢', '🔥', '👏', '🎉']
-
-interface ReactionMenuProps {
-  x: number
-  y: number
-  onReact: (emoji: string) => void
-  onClose: () => void
-}
-
-function ReactionMenu({ x, y, onReact, onClose }: ReactionMenuProps) {
-  const ref = useRef(null)
-
-  useEffect(() => {
-    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose() }
-    document.addEventListener('mousedown', close)
-    return () => document.removeEventListener('mousedown', close)
-  }, [onClose])
-
-  // Clamp to viewport
-  const menuWidth = 156
-  const clampedLeft = Math.max(menuWidth / 2 + 8, Math.min(x, window.innerWidth - menuWidth / 2 - 8))
-
-  return (
-    <div ref={ref} style={{
-      position: 'fixed', top: y - 80, left: clampedLeft, transform: 'translateX(-50%)', zIndex: 10000,
-      background: 'var(--bg-card)', border: '1px solid var(--border-faint)', borderRadius: 16,
-      boxShadow: '0 8px 24px rgba(0,0,0,0.18)', padding: '6px 8px',
-      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2, width: menuWidth,
-    }}>
-      {QUICK_REACTIONS.map(emoji => (
-        <button key={emoji} onClick={() => onReact(emoji)} style={{
-          width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
-          background: 'none', border: 'none', cursor: 'pointer', borderRadius: '50%',
-          padding: 3, transition: 'transform 0.1s, background 0.1s',
-        }}
-          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)'; e.currentTarget.style.background = 'var(--bg-hover)' }}
-          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'none' }}
-        >
-          <TwemojiImg emoji={emoji} size={18} />
-        </button>
-      ))}
-    </div>
-  )
-}
-
-/* ── Message Text with clickable URLs ── */
-interface MessageTextProps {
-  text: string
-}
-
-function MessageText({ text }: MessageTextProps) {
-  const parts = text.split(URL_REGEX)
-  const urls = text.match(URL_REGEX) || []
-  const result = []
-  parts.forEach((part, i) => {
-    if (part) result.push(part)
-    if (urls[i]) result.push(
-      <a key={i} href={urls[i]} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 2, opacity: 0.85 }}>
-        {urls[i]}
-      </a>
-    )
-  })
-  return <>{result}</>
-}
-
-/* ── Link Preview ── */
-const URL_REGEX = /https?:\/\/[^\s<>"']+/g
-const previewCache = {}
-
-interface LinkPreviewProps {
-  url: string
-  tripId: number
-  own: boolean
-  onLoad: (() => void) | undefined
-}
-
-function LinkPreview({ url, tripId, own, onLoad }: LinkPreviewProps) {
-  const [data, setData] = useState(previewCache[url] || null)
-  const [loading, setLoading] = useState(!previewCache[url])
-
-  useEffect(() => {
-    if (previewCache[url]) return
-    collabApi.linkPreview(tripId, url).then(d => {
-      previewCache[url] = d
-      setData(d)
-      setLoading(false)
-      if (d?.title || d?.description || d?.image) onLoad?.()
-    }).catch(() => setLoading(false))
-  }, [url, tripId])
-
-  if (loading || !data || (!data.title && !data.description && !data.image)) return null
-
-  const domain = (() => { try { return new URL(url).hostname.replace('www.', '') } catch { return '' } })()
-
-  return (
-    <a href={url} target="_blank" rel="noopener noreferrer" style={{
-      display: 'block', textDecoration: 'none', marginTop: 6, borderRadius: 12, overflow: 'hidden',
-      border: own ? '1px solid rgba(255,255,255,0.15)' : '1px solid var(--border-faint)',
-      background: own ? 'rgba(255,255,255,0.1)' : 'var(--bg-secondary)',
-      maxWidth: 280, transition: 'opacity 0.15s',
-    }}
-      onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
-      onMouseLeave={e => e.currentTarget.style.opacity = '1'}
-    >
-      {data.image && (
-        <img src={data.image} alt="" style={{ width: '100%', height: 140, objectFit: 'cover', display: 'block' }}
-          onError={e => e.target.style.display = 'none'} />
-      )}
-      <div style={{ padding: '8px 10px' }}>
-        {domain && (
-          <div style={{ fontSize: 10, fontWeight: 600, color: own ? 'rgba(255,255,255,0.5)' : 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 2 }}>
-            {data.site_name || domain}
-          </div>
-        )}
-        {data.title && (
-          <div style={{ fontSize: 12, fontWeight: 600, color: own ? '#fff' : 'var(--text-primary)', lineHeight: 1.3, marginBottom: 2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-            {data.title}
-          </div>
-        )}
-        {data.description && (
-          <div style={{ fontSize: 11, color: own ? 'rgba(255,255,255,0.7)' : 'var(--text-muted)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-            {data.description}
-          </div>
-        )}
-      </div>
-    </a>
-  )
-}
-
-/* ── Reaction Badge with NOMAD tooltip ── */
-interface ReactionBadgeProps {
-  reaction: ChatReaction
-  currentUserId: number
-  onReact: () => void
-}
-
-function ReactionBadge({ reaction, currentUserId, onReact }: ReactionBadgeProps) {
-  const [hover, setHover] = useState(false)
-  const [pos, setPos] = useState({ top: 0, left: 0 })
-  const ref = useRef(null)
-  const names = reaction.users.map(u => u.username).join(', ')
-
-  return (
-    <>
-      <button ref={ref} onClick={onReact}
-        onMouseEnter={() => {
-          if (ref.current) {
-            const rect = ref.current.getBoundingClientRect()
-            setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
-          }
-          setHover(true)
-        }}
-        onMouseLeave={() => setHover(false)}
-        style={{
-          display: 'inline-flex', alignItems: 'center', gap: 2, padding: '1px 3px',
-          borderRadius: 99, border: 'none', cursor: 'pointer', fontFamily: 'inherit',
-          background: 'transparent', transition: 'transform 0.1s',
-        }}
-      >
-        <TwemojiImg emoji={reaction.emoji} size={16} />
-        {reaction.count > 1 && <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', minWidth: 8 }}>{reaction.count}</span>}
-      </button>
-      {hover && names && ReactDOM.createPortal(
-        <div style={{
-          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
-          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
-          background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
-          fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
-          boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint, #e5e7eb)',
-        }}>
-          {names}
-        </div>,
-        document.body
-      )}
-    </>
-  )
-}
-
-/* ── Main Component ── */
-interface CollabChatProps {
-  tripId: number
-  currentUser: User
-}
-
-export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
-  const { t } = useTranslation()
-  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-  const can = useCanDo()
-  const trip = useTripStore((s) => s.trip)
-  const canEdit = can('collab_edit', trip)
-
-  const [messages, setMessages] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [hasMore, setHasMore] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [text, setText] = useState('')
-  const [replyTo, setReplyTo] = useState(null)
-  const [hoveredId, setHoveredId] = useState(null)
-  const [sending, setSending] = useState(false)
-  const [showEmoji, setShowEmoji] = useState(false)
-  const [reactMenu, setReactMenu] = useState(null) // { msgId, x, y }
-  const [deletingIds, setDeletingIds] = useState(new Set())
-
-  const containerRef = useRef(null)
-  const messagesRef = useRef(messages)
-  messagesRef.current = messages
-  const scrollRef = useRef(null)
-  const textareaRef = useRef(null)
-  const emojiBtnRef = useRef(null)
-  const isAtBottom = useRef(true)
-
-  const scrollToBottom = useCallback((behavior = 'auto') => {
-    const el = scrollRef.current
-    if (!el) return
-    requestAnimationFrame(() => el.scrollTo({ top: el.scrollHeight, behavior }))
-  }, [])
-
-  const checkAtBottom = useCallback(() => {
-    const el = scrollRef.current
-    if (!el) return
-    isAtBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48
-  }, [])
-
-  /* ── load messages ── */
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    collabApi.getMessages(tripId).then(data => {
-      if (cancelled) return
-      const msgs = (Array.isArray(data) ? data : data.messages || []).map(m => m.deleted ? { ...m, _deleted: true } : m)
-      setMessages(msgs)
-      setHasMore(msgs.length >= 100)
-      setLoading(false)
-      setTimeout(() => scrollToBottom(), 30)
-    }).catch(() => { if (!cancelled) setLoading(false) })
-    return () => { cancelled = true }
-  }, [tripId, scrollToBottom])
-
-  /* ── load more ── */
-  const handleLoadMore = useCallback(async () => {
-    if (loadingMore || messages.length === 0) return
-    setLoadingMore(true)
-    const el = scrollRef.current
-    const prevHeight = el ? el.scrollHeight : 0
-    try {
-      const data = await collabApi.getMessages(tripId, messages[0]?.id)
-      const older = (Array.isArray(data) ? data : data.messages || []).map(m => m.deleted ? { ...m, _deleted: true } : m)
-      if (older.length === 0) { setHasMore(false) }
-      else {
-        setMessages(prev => [...older, ...prev])
-        setHasMore(older.length >= 100)
-        requestAnimationFrame(() => { if (el) el.scrollTop = el.scrollHeight - prevHeight })
-      }
-    } catch {} finally { setLoadingMore(false) }
-  }, [tripId, loadingMore, messages])
-
-  /* ── websocket ── */
-  useEffect(() => {
-    const handler = (event) => {
-      if (event.type === 'collab:message:created' && String(event.tripId) === String(tripId)) {
-        setMessages(prev => prev.some(m => m.id === event.message.id) ? prev : [...prev, event.message])
-        if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 30)
-      }
-      if (event.type === 'collab:message:deleted' && String(event.tripId) === String(tripId)) {
-        setMessages(prev => prev.map(m => m.id === event.messageId ? { ...m, _deleted: true } : m))
-        if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 50)
-      }
-      if (event.type === 'collab:message:reacted' && String(event.tripId) === String(tripId)) {
-        setMessages(prev => prev.map(m => m.id === event.messageId ? { ...m, reactions: event.reactions } : m))
-      }
-    }
-    addListener(handler)
-    return () => removeListener(handler)
-  }, [tripId, scrollToBottom])
-
-  /* ── auto-resize textarea ── */
-  const handleTextChange = useCallback((e) => {
-    setText(e.target.value)
-    const ta = textareaRef.current
-    if (ta) {
-      ta.style.height = 'auto'
-      const h = Math.min(ta.scrollHeight, 100)
-      ta.style.height = h + 'px'
-      ta.style.overflowY = ta.scrollHeight > 100 ? 'auto' : 'hidden'
-    }
-  }, [])
-
-  /* ── send ── */
-  const handleSend = useCallback(async () => {
-    const body = text.trim()
-    if (!body || sending) return
-    setSending(true)
-    try {
-      const payload = { text: body }
-      if (replyTo) payload.reply_to = replyTo.id
-      const data = await collabApi.sendMessage(tripId, payload)
-      if (data?.message) {
-        setMessages(prev => prev.some(m => m.id === data.message.id) ? prev : [...prev, data.message])
-      }
-      setText(''); setReplyTo(null); setShowEmoji(false)
-      if (textareaRef.current) textareaRef.current.style.height = 'auto'
-      isAtBottom.current = true
-      setTimeout(() => scrollToBottom('smooth'), 50)
-    } catch {} finally { setSending(false) }
-  }, [text, sending, replyTo, tripId, scrollToBottom])
-
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
-  }, [handleSend])
-
-  const handleDelete = useCallback(async (msgId) => {
-    const msg = messages.find(m => m.id === msgId)
-    requestAnimationFrame(() => {
-      setDeletingIds(prev => new Set(prev).add(msgId))
-    })
-    setTimeout(async () => {
-      try {
-        await collabApi.deleteMessage(tripId, msgId)
-        setMessages(prev => prev.map(m => m.id === msgId ? { ...m, _deleted: true } : m))
-      } catch {}
-      setDeletingIds(prev => { const s = new Set(prev); s.delete(msgId); return s })
-    }, 400)
-  }, [tripId])
-
-  const handleReact = useCallback(async (msgId, emoji) => {
-    setReactMenu(null)
-    try {
-      const data = await collabApi.reactMessage(tripId, msgId, emoji)
-      setMessages(prev => prev.map(m => m.id === msgId ? { ...m, reactions: data.reactions } : m))
-    } catch {}
-  }, [tripId])
-
-  const handleEmojiSelect = useCallback((emoji) => {
-    setText(prev => prev + emoji)
-    textareaRef.current?.focus()
-  }, [])
-
-  const isOwn = (msg) => String(msg.user_id) === String(currentUser.id)
-
-  // Check if message is only emoji (1-3 emojis, no other text)
-  const isEmojiOnly = (text) => {
-    const emojiRegex = /^(?:\p{Emoji_Presentation}|\p{Extended_Pictographic}[\uFE0F]?(?:\u200D\p{Extended_Pictographic}[\uFE0F]?)*){1,3}$/u
-    return emojiRegex.test(text.trim())
-  }
-
-  /* ── Loading ── */
-  if (loading) {
-    return (
-      <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <div style={{ width: 24, height: 24, border: '2px solid var(--border-faint)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin .7s linear infinite' }} />
-        <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-      </div>
-    )
-  }
-
-  /* ── Main ── */
-  return (
-    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
-      {/* Messages */}
-      {messages.length === 0 ? (
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
-          <MessageCircle size={40} strokeWidth={1.2} style={{ opacity: 0.4 }} />
-          <span style={{ fontSize: 14, fontWeight: 600 }}>{t('collab.chat.empty')}</span>
-          <span style={{ fontSize: 12, opacity: 0.6 }}>{t('collab.chat.emptyDesc') || ''}</span>
-        </div>
-      ) : (
-        <div ref={scrollRef} onScroll={checkAtBottom} className="chat-scroll" style={{
-          flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '8px 14px 4px', WebkitOverflowScrolling: 'touch',
-          display: 'flex', flexDirection: 'column', gap: 1,
-        }}>
-          {hasMore && (
-            <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 10px' }}>
-              <button onClick={handleLoadMore} disabled={loadingMore} style={{
-                display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600,
-                color: 'var(--text-muted)', background: 'var(--bg-secondary)', border: '1px solid var(--border-faint)',
-                borderRadius: 99, padding: '5px 14px', cursor: 'pointer', fontFamily: 'inherit',
-              }}>
-                <ChevronUp size={13} />
-                {loadingMore ? '...' : t('collab.chat.loadMore')}
-              </button>
-            </div>
-          )}
-
-          {messages.map((msg, idx) => {
-            const own = isOwn(msg)
-            const prevMsg = messages[idx - 1]
-            const nextMsg = messages[idx + 1]
-            const isNewGroup = idx === 0 || String(prevMsg?.user_id) !== String(msg.user_id)
-            const isLastInGroup = !nextMsg || String(nextMsg?.user_id) !== String(msg.user_id)
-            const showDate = shouldShowDateSeparator(msg, prevMsg)
-            const showAvatar = !own && isLastInGroup
-            const bigEmoji = isEmojiOnly(msg.text)
-            const hasReply = msg.reply_text || msg.reply_to
-            // Deleted message placeholder
-            if (msg._deleted) {
-              return (
-                <React.Fragment key={msg.id}>
-                  {showDate && (
-                    <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
-                      <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99, letterSpacing: 0.3, textTransform: 'uppercase' }}>
-                        {formatDateSeparator(msg.created_at, t)}
-                      </span>
-                    </div>
-                  )}
-                  <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0' }}>
-                    <span style={{ fontSize: 11, color: 'var(--text-faint)', fontStyle: 'italic' }}>
-                      {msg.username} {t('collab.chat.deletedMessage') || 'deleted a message'} · {formatTime(msg.created_at, is12h)}
-                    </span>
-                  </div>
-                </React.Fragment>
-              )
-            }
-
-            // Bubble border radius — iMessage style tails
-            const br = own
-              ? `18px 18px ${isLastInGroup ? '4px' : '18px'} 18px`
-              : `18px 18px 18px ${isLastInGroup ? '4px' : '18px'}`
-
-            return (
-              <React.Fragment key={msg.id}>
-                {/* Date separator */}
-                {showDate && (
-                  <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
-                    <span style={{
-                      fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
-                      background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99,
-                      letterSpacing: 0.3, textTransform: 'uppercase',
-                    }}>
-                      {formatDateSeparator(msg.created_at, t)}
-                    </span>
-                  </div>
-                )}
-
-                <div style={{
-                  display: 'flex', alignItems: own ? 'flex-end' : 'flex-start',
-                  flexDirection: own ? 'row-reverse' : 'row',
-                  gap: 6, marginTop: isNewGroup ? 10 : 1,
-                  paddingLeft: own ? 40 : 0, paddingRight: own ? 0 : 40,
-                  transition: 'transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease',
-                  ...(deletingIds.has(msg.id) ? { transform: 'scale(0.3)', opacity: 0, maxHeight: 0, marginTop: 0, overflow: 'hidden' } : {}),
-                }}>
-                  {/* Avatar slot for others */}
-                  {!own && (
-                    <div style={{ width: 28, flexShrink: 0, alignSelf: 'flex-end' }}>
-                      {showAvatar && (
-                        msg.user_avatar ? (
-                          <img src={msg.user_avatar} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover' }} />
-                        ) : (
-                          <div style={{
-                            width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-tertiary)',
-                            display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            fontSize: 11, fontWeight: 700, color: 'var(--text-muted)',
-                          }}>
-                            {(msg.username || '?')[0].toUpperCase()}
-                          </div>
-                        )
-                      )}
-                    </div>
-                  )}
-
-                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: own ? 'flex-end' : 'flex-start', maxWidth: '78%', minWidth: 0 }}>
-                    {/* Username for others at group start */}
-                    {!own && isNewGroup && (
-                      <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 2, paddingLeft: 4 }}>
-                        {msg.username}
-                      </span>
-                    )}
-
-                    {/* Bubble */}
-                    <div
-                      style={{ position: 'relative' }}
-                      onMouseEnter={() => setHoveredId(msg.id)}
-                      onMouseLeave={() => setHoveredId(null)}
-                      onContextMenu={e => { e.preventDefault(); if (canEdit) setReactMenu({ msgId: msg.id, x: e.clientX, y: e.clientY }) }}
-                      onTouchEnd={e => {
-                        const now = Date.now()
-                        const lastTap = e.currentTarget.dataset.lastTap || 0
-                        if (now - lastTap < 300 && canEdit) {
-                          e.preventDefault()
-                          const touch = e.changedTouches?.[0]
-                          if (touch) setReactMenu({ msgId: msg.id, x: touch.clientX, y: touch.clientY })
-                        }
-                        e.currentTarget.dataset.lastTap = now
-                      }}
-                    >
-                      {bigEmoji ? (
-                        <div style={{ fontSize: 40, lineHeight: 1.2, padding: '2px 0' }}>
-                          {msg.text}
-                        </div>
-                      ) : (
-                        <div style={{
-                          background: own ? '#007AFF' : 'var(--bg-secondary)',
-                          color: own ? '#fff' : 'var(--text-primary)',
-                          borderRadius: br, padding: hasReply ? '4px 4px 8px 4px' : '8px 14px',
-                          fontSize: 14, lineHeight: 1.4, wordBreak: 'break-word', whiteSpace: 'pre-wrap',
-                        }}>
-                          {/* Inline reply quote */}
-                          {hasReply && (
-                            <div style={{
-                              padding: '5px 10px', marginBottom: 4, borderRadius: 12,
-                              background: own ? 'rgba(255,255,255,0.15)' : 'var(--bg-tertiary)',
-                              fontSize: 12, lineHeight: 1.3,
-                            }}>
-                              <div style={{ fontWeight: 600, fontSize: 11, opacity: 0.7, marginBottom: 1 }}>
-                                {msg.reply_username || ''}
-                              </div>
-                              <div style={{ opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                {(msg.reply_text || '').slice(0, 80)}
-                              </div>
-                            </div>
-                          )}
-                          {hasReply ? (
-                            <div style={{ padding: '0 10px 4px' }}><MessageText text={msg.text} /></div>
-                          ) : <MessageText text={msg.text} />}
-                          {(msg.text.match(URL_REGEX) || []).slice(0, 1).map(url => (
-                            <LinkPreview key={url} url={url} tripId={tripId} own={own} onLoad={() => { if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 50) }} />
-                          ))}
-                        </div>
-                      )}
-
-                      {/* Hover actions */}
-                      <div style={{
-                        position: 'absolute', top: -14,
-                        display: 'flex', gap: 2,
-                        opacity: hoveredId === msg.id ? 1 : 0,
-                        pointerEvents: hoveredId === msg.id ? 'auto' : 'none',
-                        transition: 'opacity .1s',
-                        ...(own ? { left: -6 } : { right: -6 }),
-                      }}>
-                        <button onClick={() => setReplyTo(msg)} title={t('collab.chat.reply')} style={{
-                          width: 24, height: 24, borderRadius: '50%', border: 'none',
-                          background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
-                          boxShadow: '0 2px 8px rgba(0,0,0,0.15)', transition: 'transform 0.12s',
-                        }}
-                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)' }}
-                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)' }}
-                        >
-                          <Reply size={11} />
-                        </button>
-                        {own && canEdit && (
-                          <button onClick={() => handleDelete(msg.id)} title={t('common.delete')} style={{
-                            width: 24, height: 24, borderRadius: '50%', border: 'none',
-                            background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
-                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)', transition: 'transform 0.12s, background 0.15s, color 0.15s',
-                          }}
-                            onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.2)'; e.currentTarget.style.background = '#ef4444'; e.currentTarget.style.color = '#fff' }}
-                            onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
-                          >
-                            <Trash2 size={11} />
-                          </button>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Reactions — iMessage style floating badge */}
-                    {msg.reactions?.length > 0 && (
-                      <div style={{
-                        display: 'flex', gap: 3, marginTop: -6, marginBottom: 4,
-                        justifyContent: own ? 'flex-end' : 'flex-start',
-                        paddingLeft: own ? 0 : 8, paddingRight: own ? 8 : 0,
-                        position: 'relative', zIndex: 1,
-                      }}>
-                        <div style={{
-                          display: 'inline-flex', alignItems: 'center', gap: 2, padding: '3px 6px',
-                          borderRadius: 99, background: 'var(--bg-card)',
-                          boxShadow: '0 1px 6px rgba(0,0,0,0.12)', border: '1px solid var(--border-faint)',
-                        }}>
-                          {msg.reactions.map(r => {
-                            const myReaction = r.users.some(u => String(u.user_id) === String(currentUser.id))
-                            return (
-                              <ReactionBadge key={r.emoji} reaction={r} currentUserId={currentUser.id} onReact={() => { if (canEdit) handleReact(msg.id, r.emoji) }} />
-                            )
-                          })}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Timestamp — only on last message of group */}
-                    {isLastInGroup && (
-                      <span style={{ fontSize: 9, color: 'var(--text-faint)', marginTop: 2, padding: '0 4px' }}>
-                        {formatTime(msg.created_at, is12h)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </React.Fragment>
-            )
-          })}
-        </div>
-      )}
-
-      {/* Composer */}
-      <div style={{ flexShrink: 0, padding: '8px 12px calc(12px + env(safe-area-inset-bottom, 0px))', borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }}>
-        {/* Reply preview */}
-        {replyTo && (
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
-            padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
-            borderLeft: '3px solid #007AFF', fontSize: 12, color: 'var(--text-muted)',
-          }}>
-            <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
-              <strong>{replyTo.username}</strong>: {(replyTo.text || '').slice(0, 60)}
-            </span>
-            <button onClick={() => setReplyTo(null)} style={{
-              background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)',
-              display: 'flex', flexShrink: 0,
-            }}>
-              <X size={14} />
-            </button>
-          </div>
-        )}
-
-        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
-          {/* Emoji button */}
-          {canEdit && (
-            <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
-              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: showEmoji ? 'var(--bg-hover)' : 'transparent',
-              color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
-            }}>
-              <Smile size={20} />
-            </button>
-          )}
-
-          <textarea
-            ref={textareaRef}
-            rows={1}
-            disabled={!canEdit}
-            style={{
-              flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
-              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
-              background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
-              maxHeight: 100, overflowY: 'hidden',
-              opacity: canEdit ? 1 : 0.5,
-            }}
-            placeholder={t('collab.chat.placeholder')}
-            value={text}
-            onChange={handleTextChange}
-            onKeyDown={handleKeyDown}
-          />
-
-          {/* Send */}
-          {canEdit && (
-            <button onClick={handleSend} disabled={!text.trim() || sending} style={{
-              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
-              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
-              transition: 'background 0.15s',
-            }}>
-              <ArrowUp size={18} strokeWidth={2.5} />
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Emoji picker */}
-      {showEmoji && <EmojiPicker onSelect={handleEmojiSelect} onClose={() => setShowEmoji(false)} anchorRef={emojiBtnRef} containerRef={containerRef} />}
-
-      {/* Reaction quick menu (right-click) */}
-      {reactMenu && ReactDOM.createPortal(
-        <ReactionMenu x={reactMenu.x} y={reactMenu.y} onReact={(emoji) => handleReact(reactMenu.msgId, emoji)} onClose={() => setReactMenu(null)} />,
-        document.body
-      )}
-    </div>
-  )
-}

client/src/components/Collab/CollabPanel.tsx

@@ -1,112 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useAuthStore } from '../../store/authStore'
-import { useTranslation } from '../../i18n'
-import { MessageCircle, StickyNote, BarChart3, Sparkles } from 'lucide-react'
-import CollabChat from './CollabChat'
-import CollabNotes from './CollabNotes'
-import CollabPolls from './CollabPolls'
-import WhatsNextWidget from './WhatsNextWidget'
-
-function useIsDesktop(breakpoint = 1024) {
-  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= breakpoint)
-  useEffect(() => {
-    const check = () => setIsDesktop(window.innerWidth >= breakpoint)
-    window.addEventListener('resize', check)
-    return () => window.removeEventListener('resize', check)
-  }, [breakpoint])
-  return isDesktop
-}
-
-const card = {
-  display: 'flex', flexDirection: 'column',
-  background: 'var(--bg-card)', borderRadius: 16, border: '1px solid var(--border-faint)',
-  overflow: 'hidden', minHeight: 0,
-}
-
-interface TripMember {
-  id: number
-  username: string
-  avatar_url?: string | null
-}
-
-interface CollabPanelProps {
-  tripId: number
-  tripMembers?: TripMember[]
-}
-
-export default function CollabPanel({ tripId, tripMembers = [] }: CollabPanelProps) {
-  const { user } = useAuthStore()
-  const { t } = useTranslation()
-  const [mobileTab, setMobileTab] = useState('chat')
-  const isDesktop = useIsDesktop()
-
-  const tabs = [
-    { id: 'chat', label: t('collab.tabs.chat') || 'Chat', icon: MessageCircle },
-    { id: 'notes', label: t('collab.tabs.notes') || 'Notes', icon: StickyNote },
-    { id: 'polls', label: t('collab.tabs.polls') || 'Polls', icon: BarChart3 },
-    { id: 'next', label: t('collab.whatsNext.title') || "What's Next", icon: Sparkles },
-  ]
-
-  if (isDesktop) {
-    return (
-      <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
-        {/* Chat — left, fixed width */}
-        <div style={{ ...card, flex: '0 0 380px' }}>
-          <CollabChat tripId={tripId} currentUser={user} />
-        </div>
-
-        {/* Right column: Notes top, Polls + What's Next bottom */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', minHeight: 0 }}>
-          {/* Notes — top */}
-          <div style={{ ...card, flex: 1 }}>
-            <CollabNotes tripId={tripId} currentUser={user} />
-          </div>
-
-          {/* Polls + What's Next — bottom row */}
-          <div style={{ flex: 1, display: 'flex', gap: 12, overflow: 'hidden', minHeight: 0 }}>
-            <div style={{ ...card, flex: 1 }}>
-              <CollabPolls tripId={tripId} currentUser={user} />
-            </div>
-            <div style={{ ...card, flex: 1 }}>
-              <WhatsNextWidget tripMembers={tripMembers} />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Mobile: tab bar + single panel
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'absolute', inset: 0 }}>
-      <div style={{
-        display: 'flex', gap: 2, padding: '8px 12px', borderBottom: '1px solid var(--border-faint)',
-        background: 'var(--bg-card)', flexShrink: 0,
-      }}>
-        {tabs.map(tab => {
-          const Icon = tab.icon
-          const active = mobileTab === tab.id
-          return (
-            <button key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
-              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-              padding: '8px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
-              background: active ? 'var(--accent)' : 'transparent',
-              color: active ? 'var(--accent-text)' : 'var(--text-muted)',
-              fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
-              transition: 'all 0.15s',
-            }}>
-              {tab.label}
-            </button>
-          )
-        })}
-      </div>
-
-      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
-        {mobileTab === 'chat' && <CollabChat tripId={tripId} currentUser={user} />}
-        {mobileTab === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-        {mobileTab === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-        {mobileTab === 'next' && <WhatsNextWidget tripMembers={tripMembers} />}
-      </div>
-    </div>
-  )
-}

client/src/components/Collab/CollabPolls.tsx

@@ -1,481 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { Plus, Trash2, X, Check, BarChart3, Lock, Clock } from 'lucide-react'
-import { collabApi } from '../../api/client'
-import { addListener, removeListener } from '../../api/websocket'
-import { useTranslation } from '../../i18n'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTripStore } from '../../store/tripStore'
-import ReactDOM from 'react-dom'
-import type { User } from '../../types'
-
-interface PollVoter {
-  user_id: number
-  username: string
-  avatar_url: string | null
-}
-
-interface PollOption {
-  id: number
-  text: string
-  voters: PollVoter[]
-}
-
-interface Poll {
-  id: number
-  question: string
-  options: PollOption[]
-  multi_choice: boolean
-  is_closed: boolean
-  deadline: string | null
-  created_by: number
-  created_at: string
-}
-
-const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
-
-function timeRemaining(deadline) {
-  if (!deadline) return null
-  const diff = new Date(deadline).getTime() - Date.now()
-  if (diff <= 0) return null
-  const mins = Math.floor(diff / 60000)
-  const hrs = Math.floor(mins / 60)
-  const days = Math.floor(hrs / 24)
-  if (days > 0) return `${days}d ${hrs % 24}h`
-  if (hrs > 0) return `${hrs}h ${mins % 60}m`
-  return `${mins}m`
-}
-
-function isExpired(deadline) {
-  if (!deadline) return false
-  return new Date(deadline).getTime() <= Date.now()
-}
-
-function totalVotes(poll) {
-  return (poll.options || []).reduce((s, o) => s + (o.voters?.length || 0), 0)
-}
-
-// ── Create Poll Modal ────────────────────────────────────────────────────────
-interface CreatePollModalProps {
-  onClose: () => void
-  onCreate: (data: { question: string; options: string[]; multi_choice: boolean }) => Promise<void>
-  t: (key: string) => string
-}
-
-function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
-  const [question, setQuestion] = useState('')
-  const [options, setOptions] = useState(['', ''])
-  const [multiChoice, setMultiChoice] = useState(false)
-  const [submitting, setSubmitting] = useState(false)
-
-  const addOption = () => setOptions(prev => [...prev, ''])
-  const removeOption = (i) => setOptions(prev => prev.filter((_, j) => j !== i))
-  const updateOption = (i, v) => setOptions(prev => prev.map((o, j) => j === i ? v : o))
-
-  const canSubmit = question.trim() && options.filter(o => o.trim()).length >= 2 && !submitting
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (!canSubmit) return
-    setSubmitting(true)
-    try {
-      await onCreate({ question: question.trim(), options: options.filter(o => o.trim()), multiple_choice: multiChoice })
-      onClose()
-    } catch {} finally { setSubmitting(false) }
-  }
-
-  return ReactDOM.createPortal(
-    <div style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={onClose}>
-      <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onClick={e => e.stopPropagation()} onSubmit={handleSubmit}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-          <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('collab.polls.new')}</h3>
-          <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}><X size={16} /></button>
-        </div>
-        <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {/* Question */}
-          <div>
-            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.question')}</div>
-            <input autoFocus value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder') || 'Ask a question...'} style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
-          </div>
-
-          {/* Options */}
-          <div>
-            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.options')}</div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {options.map((opt, i) => (
-                <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                  <input value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`}
-                    style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
-                  {options.length > 2 && (
-                    <button type="button" onClick={() => removeOption(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={14} /></button>
-                  )}
-                </div>
-              ))}
-              <button type="button" onClick={addOption} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 10, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 12, fontFamily: FONT }}>
-                <Plus size={12} /> {t('collab.polls.addOption')}
-              </button>
-            </div>
-          </div>
-
-          {/* Multi choice toggle */}
-          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
-            <div onClick={() => setMultiChoice(!multiChoice)} style={{
-              width: 36, height: 20, borderRadius: 10, padding: 2, cursor: 'pointer',
-              background: multiChoice ? '#007AFF' : 'var(--border-primary)', transition: 'background 0.2s',
-              display: 'flex', alignItems: 'center',
-            }}>
-              <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'transform 0.2s', transform: multiChoice ? 'translateX(16px)' : 'translateX(0)' }} />
-            </div>
-            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FONT }}>{t('collab.polls.multiChoice')}</span>
-          </label>
-
-          {/* Submit */}
-          <button type="submit" disabled={!canSubmit} style={{
-            width: '100%', borderRadius: 99, padding: '9px 14px', background: canSubmit ? 'var(--accent)' : 'var(--border-primary)',
-            color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 13, fontWeight: 600, border: 'none', cursor: canSubmit ? 'pointer' : 'default', fontFamily: FONT,
-          }}>
-            {submitting ? '...' : t('collab.polls.create')}
-          </button>
-        </div>
-      </form>
-    </div>,
-    document.body
-  )
-}
-
-// ── Voter Chip with custom tooltip ────────────────────────────────────────────
-interface VoterChipProps {
-  voter: PollVoter
-  offset: boolean
-}
-
-function VoterChip({ voter, offset }: VoterChipProps) {
-  const [hover, setHover] = useState(false)
-  const ref = React.useRef(null)
-  const [pos, setPos] = useState({ top: 0, left: 0 })
-
-  return (
-    <>
-      <div ref={ref}
-        onMouseEnter={() => {
-          if (ref.current) {
-            const rect = ref.current.getBoundingClientRect()
-            setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
-          }
-          setHover(true)
-        }}
-        onMouseLeave={() => setHover(false)}
-        style={{
-          width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: 7, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden',
-          border: '1.5px solid var(--bg-card)', marginLeft: offset ? -5 : 0, flexShrink: 0,
-        }}>
-        {voter.avatar_url ? <img src={voter.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (voter.username || '?')[0].toUpperCase()}
-      </div>
-      {hover && ReactDOM.createPortal(
-        <div style={{
-          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
-          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
-          background: 'var(--bg-card)', color: 'var(--text-primary)',
-          fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
-          boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint)',
-        }}>
-          {voter.username}
-        </div>,
-        document.body
-      )}
-    </>
-  )
-}
-
-// ── Poll Card ────────────────────────────────────────────────────────────────
-interface PollCardProps {
-  poll: Poll
-  currentUser: User
-  canEdit: boolean
-  onVote: (pollId: number, optionId: number) => Promise<void>
-  onClose: (pollId: number) => Promise<void>
-  onDelete: (pollId: number) => Promise<void>
-  t: (key: string) => string
-}
-
-function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }: PollCardProps) {
-  const total = totalVotes(poll)
-  const isClosed = poll.is_closed || isExpired(poll.deadline)
-  const remaining = timeRemaining(poll.deadline)
-  const hasVoted = (poll.options || []).some(o => (o.voters || []).some(v => String(v.user_id) === String(currentUser.id)))
-
-  return (
-    <div style={{
-      borderRadius: 14, border: '1px solid var(--border-faint)', overflow: 'hidden',
-      background: 'var(--bg-card)', fontFamily: FONT,
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: '10px 12px', display: 'flex', alignItems: 'flex-start', gap: 8,
-        background: isClosed ? 'var(--bg-secondary)' : 'transparent',
-      }}>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35, wordBreak: 'break-word' }}>
-            {poll.question}
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
-            {isClosed && (
-              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
-                <Lock size={8} /> {t('collab.polls.closed')}
-              </span>
-            )}
-            {remaining && !isClosed && (
-              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 9, fontWeight: 600, color: '#f59e0b', background: '#f59e0b18', padding: '2px 7px', borderRadius: 99 }}>
-                <Clock size={8} /> {remaining}
-              </span>
-            )}
-            {poll.multiple_choice && (
-              <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
-                {t('collab.polls.multiChoice')}
-              </span>
-            )}
-            <span style={{ fontSize: 9, color: 'var(--text-faint)' }}>
-              {total} {total === 1 ? 'vote' : 'votes'}
-            </span>
-          </div>
-        </div>
-        {/* Actions */}
-        {canEdit && (
-          <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
-            {!isClosed && (
-              <button onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
-                style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Lock size={12} />
-              </button>
-            )}
-            <button onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
-              style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Trash2 size={12} />
-            </button>
-          </div>
-        )}
-      </div>
-
-      {/* Options */}
-      <div style={{ padding: '4px 12px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
-        {(poll.options || []).map((opt, idx) => {
-          const count = opt.voters?.length || 0
-          const pct = total > 0 ? Math.round((count / total) * 100) : 0
-          const myVote = (opt.voters || []).some(v => String(v.user_id) === String(currentUser.id))
-          const isWinner = isClosed && count === Math.max(...(poll.options || []).map(o => o.voters?.length || 0)) && count > 0
-
-          return (
-            <button key={idx} onClick={() => !isClosed && onVote(poll.id, idx)}
-              disabled={isClosed}
-              style={{
-                position: 'relative', display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 12px', borderRadius: 10, border: 'none', cursor: isClosed ? 'default' : 'pointer',
-                background: 'var(--bg-secondary)', fontFamily: FONT, textAlign: 'left', width: '100%',
-                overflow: 'hidden', transition: 'transform 0.1s',
-              }}
-              onMouseEnter={e => { if (!isClosed) e.currentTarget.style.transform = 'scale(1.01)' }}
-              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
-            >
-              {/* Progress bar background */}
-              <div style={{
-                position: 'absolute', left: 0, top: 0, bottom: 0,
-                width: `${pct}%`, borderRadius: 10,
-                background: myVote ? '#007AFF20' : isWinner ? '#10b98118' : 'var(--bg-tertiary)',
-                transition: 'width 0.4s ease',
-              }} />
-
-              {/* Check circle */}
-              <div style={{
-                width: 20, height: 20, borderRadius: '50%', flexShrink: 0, position: 'relative',
-                border: myVote ? '2px solid #007AFF' : '2px solid var(--border-primary)',
-                background: myVote ? '#007AFF' : 'transparent',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                transition: 'all 0.2s',
-              }}>
-                {myVote && <Check size={11} color="#fff" strokeWidth={3} />}
-              </div>
-
-              {/* Label */}
-              <span style={{
-                flex: 1, fontSize: 13, fontWeight: myVote || isWinner ? 600 : 400,
-                color: 'var(--text-primary)', position: 'relative', zIndex: 1,
-              }}>
-                {typeof opt === 'string' ? opt : opt.label || opt}
-              </span>
-
-              {/* Voter avatars */}
-              {(opt.voters || []).length > 0 && (hasVoted || isClosed) && (
-                <div style={{ display: 'flex', position: 'relative', zIndex: 1 }}>
-                  {(opt.voters || []).slice(0, 3).map((v, vi) => (
-                    <VoterChip key={v.user_id || vi} voter={v} offset={vi > 0} />
-                  ))}
-                </div>
-              )}
-
-              {/* Percentage */}
-              {(hasVoted || isClosed) && (
-                <span style={{
-                  fontSize: 12, fontWeight: 700, color: myVote ? '#007AFF' : 'var(--text-muted)',
-                  position: 'relative', zIndex: 1, minWidth: 32, textAlign: 'right',
-                }}>
-                  {pct}%
-                </span>
-              )}
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-// ── Main Component ───────────────────────────────────────────────────────────
-interface CollabPollsProps {
-  tripId: number
-  currentUser: User
-}
-
-export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
-  const { t } = useTranslation()
-  const can = useCanDo()
-  const trip = useTripStore((s) => s.trip)
-  const canEdit = can('collab_edit', trip)
-  const [polls, setPolls] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [showForm, setShowForm] = useState(false)
-
-  useEffect(() => {
-    collabApi.getPolls(tripId).then(data => {
-      setPolls(Array.isArray(data) ? data : data.polls || [])
-    }).catch(() => {}).finally(() => setLoading(false))
-  }, [tripId])
-
-  // WebSocket
-  useEffect(() => {
-    const handler = (msg) => {
-      if (!msg?.type) return
-      if (msg.type === 'collab:poll:created' && msg.poll) {
-        setPolls(prev => prev.some(p => p.id === msg.poll.id) ? prev : [msg.poll, ...prev])
-      }
-      if (msg.type === 'collab:poll:voted' && msg.poll) {
-        setPolls(prev => prev.map(p => p.id === msg.poll.id ? msg.poll : p))
-      }
-      if (msg.type === 'collab:poll:closed' && msg.poll) {
-        setPolls(prev => prev.map(p => p.id === msg.poll.id ? { ...p, ...msg.poll, is_closed: true } : p))
-      }
-      if (msg.type === 'collab:poll:deleted') {
-        const id = msg.pollId || msg.poll?.id
-        if (id) setPolls(prev => prev.filter(p => p.id !== id))
-      }
-    }
-    addListener(handler)
-    return () => removeListener(handler)
-  }, [])
-
-  const handleCreate = useCallback(async (data) => {
-    const result = await collabApi.createPoll(tripId, data)
-    const created = result.poll || result
-    setPolls(prev => prev.some(p => p.id === created.id) ? prev : [created, ...prev])
-    setShowForm(false)
-  }, [tripId])
-
-  const handleVote = useCallback(async (pollId, optionIndex) => {
-    try {
-      const result = await collabApi.votePoll(tripId, pollId, optionIndex)
-      const updated = result.poll || result
-      setPolls(prev => prev.map(p => p.id === updated.id ? updated : p))
-    } catch {}
-  }, [tripId])
-
-  const handleClose = useCallback(async (pollId) => {
-    try {
-      await collabApi.closePoll(tripId, pollId)
-      setPolls(prev => prev.map(p => p.id === pollId ? { ...p, is_closed: true } : p))
-    } catch {}
-  }, [tripId])
-
-  const handleDelete = useCallback(async (pollId) => {
-    try {
-      await collabApi.deletePoll(tripId, pollId)
-      setPolls(prev => prev.filter(p => p.id !== pollId))
-    } catch {}
-  }, [tripId])
-
-  const activePolls = polls.filter(p => !p.is_closed && !isExpired(p.deadline))
-  const closedPolls = polls.filter(p => p.is_closed || isExpired(p.deadline))
-
-  // Deadline ticker
-  const [, setTick] = useState(0)
-  useEffect(() => {
-    if (!polls.some(p => p.deadline && !p.is_closed)) return
-    const iv = setInterval(() => setTick(t => t + 1), 30000)
-    return () => clearInterval(iv)
-  }, [polls])
-
-  if (loading) {
-    return (
-      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONT }}>
-        <div style={{ width: 20, height: 20, border: '2px solid var(--border-primary)', borderTopColor: 'var(--text-primary)', borderRadius: '50%', animation: 'collab-poll-spin 0.7s linear infinite' }} />
-        <style>{`@keyframes collab-poll-spin { to { transform: rotate(360deg) } }`}</style>
-      </div>
-    )
-  }
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
-        <h3 style={{ margin: 0, fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
-          <BarChart3 size={14} color="var(--text-faint)" />
-          {t('collab.polls.title')}
-        </h3>
-        {canEdit && (
-          <button onClick={() => setShowForm(true)} style={{
-            display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
-            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
-            fontFamily: FONT, border: 'none', cursor: 'pointer',
-          }}>
-            <Plus size={12} /> {t('collab.polls.new')}
-          </button>
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '0 12px 12px' }}>
-        {polls.length === 0 ? (
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 20px', textAlign: 'center', height: '100%' }}>
-            <BarChart3 size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
-            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.polls.empty')}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.polls.emptyHint')}</div>
-          </div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-            {activePolls.length > 0 && activePolls.map(poll => (
-              <PollCard key={poll.id} poll={poll} currentUser={currentUser} canEdit={canEdit} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
-            ))}
-            {closedPolls.length > 0 && (
-              <>
-                {activePolls.length > 0 && (
-                  <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, padding: '8px 0 2px' }}>
-                    {t('collab.polls.closedSection') || 'Closed'}
-                  </div>
-                )}
-                {closedPolls.map(poll => (
-                  <PollCard key={poll.id} poll={poll} currentUser={currentUser} canEdit={canEdit} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
-                ))}
-              </>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Create Modal */}
-      {showForm && <CreatePollModal onClose={() => setShowForm(false)} onCreate={handleCreate} t={t} />}
-    </div>
-  )
-}

client/src/components/Collab/WhatsNextWidget.tsx

@@ -1,199 +0,0 @@
-import React, { useMemo } from 'react'
-import { useTripStore } from '../../store/tripStore'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useTranslation } from '../../i18n'
-import { MapPin, Clock, Calendar, Users, Sparkles } from 'lucide-react'
-
-function formatTime(timeStr, is12h) {
-  if (!timeStr) return ''
-  const [h, m] = timeStr.split(':').map(Number)
-  if (is12h) {
-    const period = h >= 12 ? 'PM' : 'AM'
-    const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-    return `${h12}:${String(m).padStart(2, '0')} ${period}`
-  }
-  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
-}
-
-function formatDayLabel(date, t, locale) {
-  const d = new Date(date + 'T00:00:00')
-  const now = new Date()
-  const tomorrow = new Date(); tomorrow.setDate(now.getDate() + 1)
-
-  if (d.toDateString() === now.toDateString()) return t('collab.whatsNext.today') || 'Today'
-  if (d.toDateString() === tomorrow.toDateString()) return t('collab.whatsNext.tomorrow') || 'Tomorrow'
-
-  return new Date(date + 'T00:00:00Z').toLocaleDateString(locale || undefined, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
-}
-
-interface TripMember {
-  id: number
-  username: string
-  avatar_url?: string | null
-}
-
-interface WhatsNextWidgetProps {
-  tripMembers?: TripMember[]
-}
-
-export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetProps) {
-  const { days, assignments } = useTripStore()
-  const { t, locale } = useTranslation()
-  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-
-  const upcoming = useMemo(() => {
-    const now = new Date()
-    const nowDate = now.toISOString().split('T')[0]
-    const nowTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
-    const items = []
-
-    for (const day of (days || [])) {
-      if (!day.date) continue
-      const dayAssignments = assignments[String(day.id)] || []
-      for (const a of dayAssignments) {
-        if (!a.place) continue
-        // Include: today (future times) + all future days
-        const isFutureDay = day.date > nowDate
-        const isTodayFuture = day.date === nowDate && (!a.place.place_time || a.place.place_time >= nowTime)
-        if (isFutureDay || isTodayFuture) {
-          items.push({
-            id: a.id,
-            name: a.place.name,
-            time: a.place.place_time,
-            endTime: a.place.end_time,
-            date: day.date,
-            dayTitle: day.title,
-            category: a.place.category,
-            participants: (a.participants && a.participants.length > 0)
-              ? a.participants
-              : tripMembers.map(m => ({ user_id: m.id, username: m.username, avatar: m.avatar })),
-            address: a.place.address,
-          })
-        }
-      }
-    }
-
-    items.sort((a, b) => {
-      const da = a.date + (a.time || '99:99')
-      const db = b.date + (b.time || '99:99')
-      return da.localeCompare(db)
-    })
-
-    return items.slice(0, 8)
-  }, [days, assignments, tripMembers])
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
-      {/* Header */}
-      <div style={{
-        padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
-      }}>
-        <Sparkles size={14} color="var(--text-faint)" />
-        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.3, textTransform: 'uppercase' }}>
-          {t('collab.whatsNext.title') || "What's Next"}
-        </span>
-      </div>
-
-      {/* List */}
-      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '8px 10px' }}>
-        {upcoming.length === 0 ? (
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '48px 20px', textAlign: 'center' }}>
-            <Calendar size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
-            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.whatsNext.empty')}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.whatsNext.emptyHint')}</div>
-          </div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {upcoming.map((item, idx) => {
-              const prevItem = upcoming[idx - 1]
-              const showDayHeader = !prevItem || prevItem.date !== item.date
-
-              return (
-                <React.Fragment key={item.id}>
-                  {showDayHeader && (
-                    <div style={{
-                      fontSize: 10, fontWeight: 500, color: 'var(--text-faint)',
-                      textTransform: 'uppercase', letterSpacing: 0.5,
-                      padding: idx === 0 ? '0 4px 4px' : '8px 4px 4px',
-                    }}>
-                      {formatDayLabel(item.date, t, locale)}
-                      {item.dayTitle ? ` — ${item.dayTitle}` : ''}
-                    </div>
-                  )}
-
-                  <div style={{
-                    display: 'flex', gap: 10, padding: '8px 10px', borderRadius: 10,
-                    background: 'var(--bg-secondary)', transition: 'background 0.1s',
-                  }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
-                  >
-                    {/* Time column */}
-                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: 44, flexShrink: 0 }}>
-                      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
-                        {item.time ? formatTime(item.time, is12h) : 'TBD'}
-                      </span>
-                      {item.endTime && (
-                        <>
-                          <span style={{ fontSize: 7, color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.3, margin: '2px 0', textTransform: 'uppercase' }}>
-                            {t('collab.whatsNext.until') || 'bis'}
-                          </span>
-                          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
-                            {formatTime(item.endTime, is12h)}
-                          </span>
-                        </>
-                      )}
-                    </div>
-
-                    {/* Divider */}
-                    <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-faint)', flexShrink: 0, margin: '2px 0' }} />
-
-                    {/* Details */}
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {item.name}
-                      </div>
-                      {item.address && (
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 2 }}>
-                          <MapPin size={9} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                          <span style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                            {item.address}
-                          </span>
-                        </div>
-                      )}
-
-                      {/* Participants */}
-                      {item.participants.length > 0 && (
-                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 5 }}>
-                          {item.participants.map(p => (
-                            <div key={p.user_id} style={{
-                              display: 'flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 3px',
-                              borderRadius: 99, background: 'var(--bg-tertiary)', border: '1px solid var(--border-faint)',
-                            }}>
-                              <div style={{
-                                width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-secondary)',
-                                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                fontSize: 7, fontWeight: 700, color: 'var(--text-muted)',
-                                overflow: 'hidden', flexShrink: 0,
-                              }}>
-                                {p.avatar
-                                  ? <img src={`/uploads/avatars/${p.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                                  : p.username?.[0]?.toUpperCase()
-                                }
-                              </div>
-                              <span style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)' }}>{p.username}</span>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </React.Fragment>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

client/src/components/Dashboard/CurrencyWidget.tsx

@@ -1,95 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { ArrowRightLeft, RefreshCw } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import CustomSelect from '../shared/CustomSelect'
-
-const CURRENCIES = [
-  'AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'AUD', 'AWG', 'AZN', 'BAM', 'BBD', 'BDT', 'BGN', 'BHD',
-  'BIF', 'BMD', 'BND', 'BOB', 'BRL', 'BSD', 'BTN', 'BWP', 'BYN', 'BZD', 'CAD', 'CDF', 'CHF', 'CLF', 'CLP',
-  'CNH', 'CNY', 'COP', 'CRC', 'CUP', 'CVE', 'CZK', 'DJF', 'DKK', 'DOP', 'DZD', 'EGP', 'ERN', 'ETB', 'EUR',
-  'FJD', 'FKP', 'FOK', 'GBP', 'GEL', 'GGP', 'GHS', 'GIP', 'GMD', 'GNF', 'GTQ', 'GYD', 'HKD', 'HNL', 'HRK',
-  'HTG', 'HUF', 'IDR', 'ILS', 'IMP', 'INR', 'IQD', 'ISK', 'JEP', 'JMD', 'JOD', 'JPY', 'KES', 'KGS', 'KHR',
-  'KID', 'KMF', 'KRW', 'KWD', 'KYD', 'KZT', 'LAK', 'LBP', 'LKR', 'LRD', 'LSL', 'LYD', 'MAD', 'MDL', 'MGA',
-  'MKD', 'MMK', 'MNT', 'MOP', 'MRU', 'MUR', 'MVR', 'MWK', 'MXN', 'MYR', 'MZN', 'NAD', 'NGN', 'NIO', 'NOK',
-  'NPR', 'NZD', 'OMR', 'PAB', 'PEN', 'PGK', 'PHP', 'PKR', 'PLN', 'PYG', 'QAR', 'RON', 'RSD', 'RUB', 'RWF',
-  'SAR', 'SBD', 'SCR', 'SDG', 'SEK', 'SGD', 'SHP', 'SLE', 'SOS', 'SRD', 'SSP', 'STN', 'SYP', 'SZL', 'THB',
-  'TJS', 'TMT', 'TND', 'TOP', 'TRY', 'TTD', 'TVD', 'TWD', 'TZS', 'UAH', 'UGX', 'USD', 'UYU', 'UZS', 'VES',
-  'VND', 'VUV', 'WST', 'XAF', 'XCD', 'XDR', 'XOF', 'XPF', 'YER', 'ZAR', 'ZMW', 'ZWL'
-]
-
-const CURRENCY_OPTIONS = CURRENCIES.map(c => ({ value: c, label: c }))
-
-export default function CurrencyWidget() {
-  const { t, locale } = useTranslation()
-  const [from, setFrom] = useState(() => localStorage.getItem('currency_from') || 'EUR')
-  const [to, setTo] = useState(() => localStorage.getItem('currency_to') || 'USD')
-  const [amount, setAmount] = useState('100')
-  const [rate, setRate] = useState(null)
-  const [loading, setLoading] = useState(false)
-
-  const fetchRate = useCallback(async () => {
-    if (from === to) { setRate(1); return }
-    setLoading(true)
-    try {
-      const resp = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
-      const data = await resp.json()
-      setRate(data.rates?.[to] || null)
-    } catch { setRate(null) }
-    finally { setLoading(false) }
-  }, [from, to])
-
-  useEffect(() => { fetchRate() }, [fetchRate])
-  useEffect(() => { localStorage.setItem('currency_from', from) }, [from])
-  useEffect(() => { localStorage.setItem('currency_to', to) }, [to])
-
-  const swap = () => { setFrom(to); setTo(from) }
-  const rawResult = rate && amount ? (parseFloat(amount) * rate).toFixed(2) : null
-  const formatNumber = (num) => {
-    if (!num || num === '—') return '—'
-    return parseFloat(num).toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-  }
-  const result = rawResult
-
-  return (
-    <div className="rounded-2xl border p-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-      <div className="flex items-center justify-between mb-3">
-        <span className="text-xs font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{t('dashboard.currency')}</span>
-        <button onClick={fetchRate} className="p-1 rounded-md transition-colors" style={{ color: 'var(--text-faint)' }}>
-          <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
-        </button>
-      </div>
-
-      {/* Amount */}
-      <div className="rounded-xl px-4 py-3 mb-3" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
-        <input
-          type="number"
-          value={amount}
-          onChange={e => setAmount(e.target.value)}
-          className="w-full text-2xl font-black tabular-nums outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
-          style={{ color: 'var(--text-primary)', background: 'transparent', border: 'none' }}
-        />
-      </div>
-
-      {/* From / Swap / To */}
-      <div className="flex items-center gap-2 mb-3">
-        <div className="flex-1" style={{ '--bg-input': 'transparent', '--border-primary': 'transparent' }}>
-          <CustomSelect value={from} onChange={setFrom} options={CURRENCY_OPTIONS} searchable size="sm" />
-        </div>
-        <button onClick={swap} className="p-1.5 rounded-lg shrink-0 transition-colors" style={{ color: 'var(--text-muted)' }}>
-          <ArrowRightLeft size={13} />
-        </button>
-        <div className="flex-1" style={{ '--bg-input': 'transparent', '--border-primary': 'transparent' }}>
-          <CustomSelect value={to} onChange={setTo} options={CURRENCY_OPTIONS} searchable size="sm" />
-        </div>
-      </div>
-
-      {/* Result */}
-      <div className="rounded-xl p-3" style={{ background: 'var(--bg-secondary)' }}>
-        <p className="text-xl font-black tabular-nums" style={{ color: 'var(--text-primary)' }}>
-          {formatNumber(result)} <span className="text-sm font-semibold" style={{ color: 'var(--text-muted)' }}>{to}</span>
-        </p>
-        {rate && <p className="text-[10px] mt-0.5" style={{ color: 'var(--text-faint)' }}>1 {from} = {rate.toFixed(4)} {to}</p>}
-      </div>
-    </div>
-  )
-}

client/src/components/Dashboard/TimezoneWidget.tsx

@@ -1,167 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Clock, Plus, X } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { useSettingsStore } from '../../store/settingsStore'
-
-const POPULAR_ZONES = [
-  { label: 'New York', tz: 'America/New_York' },
-  { label: 'London', tz: 'Europe/London' },
-  { label: 'Berlin', tz: 'Europe/Berlin' },
-  { label: 'Paris', tz: 'Europe/Paris' },
-  { label: 'Dubai', tz: 'Asia/Dubai' },
-  { label: 'Mumbai', tz: 'Asia/Kolkata' },
-  { label: 'Bangkok', tz: 'Asia/Bangkok' },
-  { label: 'Tokyo', tz: 'Asia/Tokyo' },
-  { label: 'Sydney', tz: 'Australia/Sydney' },
-  { label: 'Los Angeles', tz: 'America/Los_Angeles' },
-  { label: 'Chicago', tz: 'America/Chicago' },
-  { label: 'São Paulo', tz: 'America/Sao_Paulo' },
-  { label: 'Istanbul', tz: 'Europe/Istanbul' },
-  { label: 'Singapore', tz: 'Asia/Singapore' },
-  { label: 'Hong Kong', tz: 'Asia/Hong_Kong' },
-  { label: 'Seoul', tz: 'Asia/Seoul' },
-  { label: 'Moscow', tz: 'Europe/Moscow' },
-  { label: 'Cairo', tz: 'Africa/Cairo' },
-]
-
-function getTime(tz, locale, is12h) {
-  try {
-    return new Date().toLocaleTimeString(locale, { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: is12h })
-  } catch { return '—' }
-}
-
-function getOffset(tz) {
-  try {
-    const now = new Date()
-    const local = new Date(now.toLocaleString('en-US', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }))
-    const remote = new Date(now.toLocaleString('en-US', { timeZone: tz }))
-    const diff = (remote - local) / 3600000
-    const sign = diff >= 0 ? '+' : ''
-    return `${sign}${diff}h`
-  } catch { return '' }
-}
-
-export default function TimezoneWidget() {
-  const { t, locale } = useTranslation()
-  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-  const [zones, setZones] = useState(() => {
-    const saved = localStorage.getItem('dashboard_timezones')
-    return saved ? JSON.parse(saved) : [
-      { label: 'New York', tz: 'America/New_York' },
-      { label: 'Tokyo', tz: 'Asia/Tokyo' },
-    ]
-  })
-  const [now, setNow] = useState(Date.now())
-  const [showAdd, setShowAdd] = useState(false)
-  const [customLabel, setCustomLabel] = useState('')
-  const [customTz, setCustomTz] = useState('')
-  const [customError, setCustomError] = useState('')
-
-  useEffect(() => {
-    const i = setInterval(() => setNow(Date.now()), 10000)
-    return () => clearInterval(i)
-  }, [])
-
-  useEffect(() => {
-    localStorage.setItem('dashboard_timezones', JSON.stringify(zones))
-  }, [zones])
-
-  const isValidTz = (tz: string) => {
-    try { Intl.DateTimeFormat('en-US', { timeZone: tz }).format(new Date()); return true } catch { return false }
-  }
-
-  const addCustomZone = () => {
-    const tz = customTz.trim()
-    if (!tz) { setCustomError(t('dashboard.timezoneCustomErrorEmpty')); return }
-    if (!isValidTz(tz)) { setCustomError(t('dashboard.timezoneCustomErrorInvalid')); return }
-    if (zones.find(z => z.tz === tz)) { setCustomError(t('dashboard.timezoneCustomErrorDuplicate')); return }
-    const label = customLabel.trim() || tz.split('/').pop()?.replace(/_/g, ' ') || tz
-    setZones([...zones, { label, tz }])
-    setCustomLabel(''); setCustomTz(''); setCustomError(''); setShowAdd(false)
-  }
-
-  const addZone = (zone) => {
-    if (!zones.find(z => z.tz === zone.tz)) {
-      setZones([...zones, zone])
-    }
-    setShowAdd(false)
-  }
-
-  const removeZone = (tz) => setZones(zones.filter(z => z.tz !== tz))
-
-  const localTime = new Date().toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })
-  const rawZone = Intl.DateTimeFormat().resolvedOptions().timeZone
-  const localZone = rawZone.split('/').pop().replace(/_/g, ' ')
-  // Show abbreviated timezone name (e.g. CET, CEST, EST)
-  const tzAbbr = new Date().toLocaleTimeString('en-US', { timeZoneName: 'short' }).split(' ').pop()
-
-  return (
-    <div className="rounded-2xl border p-4" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-      <div className="flex items-center justify-between mb-3">
-        <span className="text-xs font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{t('dashboard.timezone')}</span>
-        <button onClick={() => setShowAdd(!showAdd)} className="p-1 rounded-md transition-colors" style={{ color: 'var(--text-faint)' }}>
-          <Plus size={12} />
-        </button>
-      </div>
-
-      {/* Local time */}
-      <div className="mb-3 pb-3" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
-        <p className="text-2xl font-black tabular-nums" style={{ color: 'var(--text-primary)' }}>{localTime}</p>
-        <p className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: 'var(--text-faint)' }}>{localZone} ({tzAbbr}) · {t('dashboard.localTime')}</p>
-      </div>
-
-      {/* Zone list */}
-      <div className="space-y-2">
-        {zones.map(z => (
-          <div key={z.tz} className="flex items-center justify-between group">
-            <div>
-              <p className="text-lg font-bold tabular-nums" style={{ color: 'var(--text-primary)' }}>{getTime(z.tz, locale, is12h)}</p>
-              <p className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{z.label} <span style={{ color: 'var(--text-muted)' }}>{getOffset(z.tz)}</span></p>
-            </div>
-            <button onClick={() => removeZone(z.tz)} className="opacity-0 group-hover:opacity-100 p-1 rounded transition-all" style={{ color: 'var(--text-faint)' }}>
-              <X size={11} />
-            </button>
-          </div>
-        ))}
-      </div>
-
-      {/* Add zone dropdown */}
-      {showAdd && (
-        <div className="mt-2 rounded-xl p-2 max-h-[280px] overflow-auto" style={{ background: 'var(--bg-secondary)' }}>
-          {/* Custom timezone */}
-          <div className="px-2 py-2 mb-2 rounded-lg" style={{ background: 'var(--bg-card)' }}>
-            <p className="text-[10px] font-semibold uppercase tracking-wide mb-2" style={{ color: 'var(--text-faint)' }}>{t('dashboard.timezoneCustomTitle')}</p>
-            <div className="space-y-1.5">
-              <input value={customLabel} onChange={e => setCustomLabel(e.target.value)}
-                placeholder={t('dashboard.timezoneCustomLabelPlaceholder')}
-                className="w-full px-2 py-1.5 rounded-lg text-xs outline-none"
-                style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)', border: '1px solid var(--border-secondary)' }} />
-              <input value={customTz} onChange={e => { setCustomTz(e.target.value); setCustomError('') }}
-                placeholder={t('dashboard.timezoneCustomTzPlaceholder')}
-                className="w-full px-2 py-1.5 rounded-lg text-xs outline-none"
-                style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)', border: `1px solid ${customError ? '#ef4444' : 'var(--border-secondary)'}` }}
-                onKeyDown={e => { if (e.key === 'Enter') addCustomZone() }} />
-              {customError && <p className="text-[10px]" style={{ color: '#ef4444' }}>{customError}</p>}
-              <button onClick={addCustomZone}
-                className="w-full py-1.5 rounded-lg text-xs font-medium transition-colors"
-                style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
-                {t('dashboard.timezoneCustomAdd')}
-              </button>
-            </div>
-          </div>
-          {/* Popular zones */}
-          {POPULAR_ZONES.filter(z => !zones.find(existing => existing.tz === z.tz)).map(z => (
-            <button key={z.tz} onClick={() => addZone(z)}
-              className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs text-left transition-colors"
-              style={{ color: 'var(--text-primary)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-              <span className="font-medium">{z.label}</span>
-              <span className="text-[10px]" style={{ color: 'var(--text-faint)' }}>{getTime(z.tz, locale, is12h)}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

client/src/components/Files/FileManager.tsx

@@ -1,888 +0,0 @@
-import ReactDOM from 'react-dom'
-import { useState, useCallback, useRef, useEffect } from 'react'
-import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight } from 'lucide-react'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import { filesApi } from '../../api/client'
-import type { Place, Reservation, TripFile, Day, AssignmentsMap } from '../../types'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTripStore } from '../../store/tripStore'
-
-import { getAuthUrl } from '../../api/authUrl'
-
-function isImage(mimeType) {
-  if (!mimeType) return false
-  return mimeType.startsWith('image/')
-}
-
-function getFileIcon(mimeType) {
-  if (!mimeType) return File
-  if (mimeType === 'application/pdf') return FileText
-  if (isImage(mimeType)) return FileImage
-  return File
-}
-
-function formatSize(bytes) {
-  if (!bytes) return ''
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-}
-
-function formatDateWithLocale(dateStr, locale) {
-  if (!dateStr) return ''
-  try {
-    return new Date(dateStr).toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' })
-  } catch { return '' }
-}
-
-// Image lightbox with gallery navigation
-interface ImageLightboxProps {
-  files: (TripFile & { url: string })[]
-  initialIndex: number
-  onClose: () => void
-}
-
-function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxProps) {
-  const { t } = useTranslation()
-  const [index, setIndex] = useState(initialIndex)
-  const [imgSrc, setImgSrc] = useState('')
-  const [touchStart, setTouchStart] = useState<number | null>(null)
-  const file = files[index]
-
-  useEffect(() => {
-    setImgSrc('')
-    if (file) getAuthUrl(file.url, 'download').then(setImgSrc)
-  }, [file?.url])
-
-  const goPrev = () => setIndex(i => Math.max(0, i - 1))
-  const goNext = () => setIndex(i => Math.min(files.length - 1, i + 1))
-
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-      if (e.key === 'ArrowLeft') goPrev()
-      if (e.key === 'ArrowRight') goNext()
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-
-  if (!file) return null
-
-  const hasPrev = index > 0
-  const hasNext = index < files.length - 1
-  const navBtn = (side: 'left' | 'right', onClick: () => void, show: boolean): React.ReactNode => show ? (
-    <button onClick={e => { e.stopPropagation(); onClick() }}
-      style={{
-        position: 'absolute', top: '50%', [side]: 12, transform: 'translateY(-50%)', zIndex: 10,
-        background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40,
-        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
-        color: 'rgba(255,255,255,0.8)', transition: 'background 0.15s',
-      }}
-      onMouseEnter={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.75)')}
-      onMouseLeave={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.5)')}>
-      {side === 'left' ? <ChevronLeft size={22} /> : <ChevronRight size={22} />}
-    </button>
-  ) : null
-
-  return (
-    <div
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 2000, display: 'flex', flexDirection: 'column' }}
-      onClick={onClose}
-      onTouchStart={e => setTouchStart(e.touches[0].clientX)}
-      onTouchEnd={e => {
-        if (touchStart === null) return
-        const diff = e.changedTouches[0].clientX - touchStart
-        if (diff > 60) goPrev()
-        else if (diff < -60) goNext()
-        setTouchStart(null)
-      }}
-    >
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }} onClick={e => e.stopPropagation()}>
-        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
-          {file.original_name}
-          <span style={{ marginLeft: 8, color: 'rgba(255,255,255,0.4)' }}>{index + 1} / {files.length}</span>
-        </span>
-        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
-          <button
-            onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
-            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
-            title={t('files.openTab')}>
-            <ExternalLink size={16} />
-          </button>
-          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}>
-            <X size={18} />
-          </button>
-        </div>
-      </div>
-
-      {/* Main image + nav */}
-      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', minHeight: 0 }}
-        onClick={e => { if (e.target === e.currentTarget) onClose() }}>
-        {navBtn('left', goPrev, hasPrev)}
-        {imgSrc && <img src={imgSrc} alt={file.original_name} style={{ maxWidth: '85vw', maxHeight: '80vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} onClick={e => e.stopPropagation()} />}
-        {navBtn('right', goNext, hasNext)}
-      </div>
-
-      {/* Thumbnail strip */}
-      {files.length > 1 && (
-        <div style={{ display: 'flex', gap: 4, justifyContent: 'center', padding: '10px 16px', flexShrink: 0, overflowX: 'auto' }} onClick={e => e.stopPropagation()}>
-          {files.map((f, i) => (
-            <ThumbImg key={f.id} file={f} active={i === index} onClick={() => setIndex(i)} />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function ThumbImg({ file, active, onClick }: { file: TripFile & { url: string }; active: boolean; onClick: () => void }) {
-  const [src, setSrc] = useState('')
-  useEffect(() => { getAuthUrl(file.url, 'download').then(setSrc) }, [file.url])
-  return (
-    <button onClick={onClick} style={{
-      width: 48, height: 48, borderRadius: 6, overflow: 'hidden', border: active ? '2px solid #fff' : '2px solid transparent',
-      opacity: active ? 1 : 0.5, cursor: 'pointer', padding: 0, background: '#111', flexShrink: 0, transition: 'opacity 0.15s',
-    }}>
-      {src && <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
-    </button>
-  )
-}
-
-// Authenticated image — fetches a short-lived download token and renders the image
-function AuthedImg({ src, style }: { src: string; style?: React.CSSProperties }) {
-  const [authSrc, setAuthSrc] = useState('')
-  useEffect(() => {
-    getAuthUrl(src, 'download').then(setAuthSrc)
-  }, [src])
-  return authSrc ? <img src={authSrc} alt="" style={style} /> : null
-}
-
-// Source badge
-interface SourceBadgeProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  label: string
-}
-
-function SourceBadge({ icon: Icon, label }: SourceBadgeProps) {
-  return (
-    <span style={{
-      display: 'inline-flex', alignItems: 'center', gap: 4,
-      fontSize: 10.5, color: '#4b5563',
-      background: 'var(--bg-tertiary)', border: '1px solid var(--border-primary)',
-      borderRadius: 6, padding: '2px 7px',
-      fontWeight: 500, maxWidth: '100%', overflow: 'hidden',
-    }}>
-      <Icon size={10} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
-    </span>
-  )
-}
-
-function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avatarUrl?: string | null; size?: number }) {
-  const [hover, setHover] = useState(false)
-  const [pos, setPos] = useState({ top: 0, left: 0 })
-  const ref = useRef<HTMLDivElement>(null)
-
-  const onEnter = () => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-      setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
-    }
-    setHover(true)
-  }
-
-  return (
-    <>
-      <div ref={ref} onMouseEnter={onEnter} onMouseLeave={() => setHover(false)}
-        style={{
-          width: size, height: size, borderRadius: '50%', border: '1.5px solid var(--border-primary)',
-          background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: size * 0.4, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
-          cursor: 'default',
-        }}>
-        {avatarUrl
-          ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-          : name?.[0]?.toUpperCase()
-        }
-      </div>
-      {hover && ReactDOM.createPortal(
-        <div style={{
-          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
-          background: 'var(--bg-elevated)', color: 'var(--text-primary)',
-          fontSize: 11, fontWeight: 500, padding: '3px 8px', borderRadius: 6,
-          boxShadow: '0 2px 8px rgba(0,0,0,0.15)', whiteSpace: 'nowrap', zIndex: 9999,
-          pointerEvents: 'none',
-        }}>
-          {name}
-        </div>,
-        document.body
-      )}
-    </>
-  )
-}
-
-interface FileManagerProps {
-  files?: TripFile[]
-  onUpload: (fd: FormData) => Promise<any>
-  onDelete: (fileId: number) => Promise<void>
-  onUpdate: (fileId: number, data: Partial<TripFile>) => Promise<void>
-  places: Place[]
-  days?: Day[]
-  assignments?: AssignmentsMap
-  reservations?: Reservation[]
-  tripId: number
-  allowedFileTypes: Record<string, string[]>
-}
-
-export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, days = [], assignments = {}, reservations = [], tripId, allowedFileTypes }: FileManagerProps) {
-  const [uploading, setUploading] = useState(false)
-  const [filterType, setFilterType] = useState('all')
-  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)
-  const [showTrash, setShowTrash] = useState(false)
-  const [trashFiles, setTrashFiles] = useState<TripFile[]>([])
-  const [loadingTrash, setLoadingTrash] = useState(false)
-  const toast = useToast()
-  const can = useCanDo()
-  const trip = useTripStore((s) => s.trip)
-  const { t, locale } = useTranslation()
-
-  const loadTrash = useCallback(async () => {
-    setLoadingTrash(true)
-    try {
-      const data = await filesApi.list(tripId, true)
-      setTrashFiles(data.files || [])
-    } catch { /* */ }
-    setLoadingTrash(false)
-  }, [tripId])
-
-  const toggleTrash = useCallback(() => {
-    if (!showTrash) loadTrash()
-    setShowTrash(v => !v)
-  }, [showTrash, loadTrash])
-
-  const refreshFiles = useCallback(async () => {
-    if (onUpdate) onUpdate(0, {} as any)
-  }, [onUpdate])
-
-  const handleStar = async (fileId: number) => {
-    try {
-      await filesApi.toggleStar(tripId, fileId)
-      refreshFiles()
-    } catch { /* */ }
-  }
-
-  const handleRestore = async (fileId: number) => {
-    try {
-      await filesApi.restore(tripId, fileId)
-      setTrashFiles(prev => prev.filter(f => f.id !== fileId))
-      refreshFiles()
-      toast.success(t('files.toast.restored'))
-    } catch {
-      toast.error(t('files.toast.restoreError'))
-    }
-  }
-
-  const handlePermanentDelete = async (fileId: number) => {
-    if (!confirm(t('files.confirm.permanentDelete'))) return
-    try {
-      await filesApi.permanentDelete(tripId, fileId)
-      setTrashFiles(prev => prev.filter(f => f.id !== fileId))
-      toast.success(t('files.toast.deleted'))
-    } catch {
-      toast.error(t('files.toast.deleteError'))
-    }
-  }
-
-  const handleEmptyTrash = async () => {
-    if (!confirm(t('files.confirm.emptyTrash'))) return
-    try {
-      await filesApi.emptyTrash(tripId)
-      setTrashFiles([])
-      toast.success(t('files.toast.trashEmptied') || 'Trash emptied')
-    } catch {
-      toast.error(t('files.toast.deleteError'))
-    }
-  }
-
-  const [lastUploadedIds, setLastUploadedIds] = useState<number[]>([])
-
-  const onDrop = useCallback(async (acceptedFiles) => {
-    if (acceptedFiles.length === 0) return
-    setUploading(true)
-    const uploadedIds: number[] = []
-    try {
-      for (const file of acceptedFiles) {
-        const formData = new FormData()
-        formData.append('file', file)
-        const result = await onUpload(formData)
-        const fileObj = result?.file || result
-        if (fileObj?.id) uploadedIds.push(fileObj.id)
-      }
-      toast.success(t('files.uploaded', { count: acceptedFiles.length }))
-      // Open assign modal for the last uploaded file
-      const lastId = uploadedIds[uploadedIds.length - 1]
-      if (lastId && (places.length > 0 || reservations.length > 0)) {
-        setAssignFileId(lastId)
-      }
-    } catch {
-      toast.error(t('files.uploadError'))
-    } finally {
-      setUploading(false)
-    }
-  }, [onUpload, toast, t, places, reservations])
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    maxSize: 50 * 1024 * 1024,
-    noClick: false,
-  })
-
-  const handlePaste = useCallback((e) => {
-    if (!can('file_upload', trip)) return
-    const items = e.clipboardData?.items
-    if (!items) return
-    const pastedFiles = []
-    for (const item of Array.from(items)) {
-      if (item.kind === 'file') {
-        const file = item.getAsFile()
-        if (file) pastedFiles.push(file)
-      }
-    }
-    if (pastedFiles.length > 0) {
-      e.preventDefault()
-      onDrop(pastedFiles)
-    }
-  }, [onDrop])
-
-  const filteredFiles = files.filter(f => {
-    if (filterType === 'starred') return !!f.starred
-    if (filterType === 'pdf') return f.mime_type === 'application/pdf'
-    if (filterType === 'image') return isImage(f.mime_type)
-    if (filterType === 'doc') return (f.mime_type || '').includes('word') || (f.mime_type || '').includes('excel') || (f.mime_type || '').includes('text')
-    if (filterType === 'collab') return !!f.note_id
-    return true
-  })
-
-  const handleDelete = async (id) => {
-    try {
-      await onDelete(id)
-      toast.success(t('files.toast.trashed') || 'Moved to trash')
-    } catch {
-      toast.error(t('files.toast.deleteError'))
-    }
-  }
-
-  const [previewFile, setPreviewFile] = useState(null)
-  const [previewFileUrl, setPreviewFileUrl] = useState('')
-  useEffect(() => {
-    if (previewFile) {
-      getAuthUrl(previewFile.url, 'download').then(setPreviewFileUrl)
-    } else {
-      setPreviewFileUrl('')
-    }
-  }, [previewFile?.url])
-  const [assignFileId, setAssignFileId] = useState<number | null>(null)
-
-  const handleAssign = async (fileId: number, data: { place_id?: number | null; reservation_id?: number | null }) => {
-    try {
-      await filesApi.update(tripId, fileId, data)
-      refreshFiles()
-    } catch {
-      toast.error(t('files.toast.assignError'))
-    }
-  }
-
-  const imageFiles = filteredFiles.filter(f => isImage(f.mime_type))
-
-  const openFile = (file) => {
-    if (isImage(file.mime_type)) {
-      const idx = imageFiles.findIndex(f => f.id === file.id)
-      setLightboxIndex(idx >= 0 ? idx : 0)
-    } else {
-      setPreviewFile(file)
-    }
-  }
-
-  const renderFileRow = (file: TripFile, isTrash = false) => {
-    const FileIcon = getFileIcon(file.mime_type)
-    const allLinkedPlaceIds = new Set<number>()
-    if (file.place_id) allLinkedPlaceIds.add(file.place_id)
-    for (const pid of (file.linked_place_ids || [])) allLinkedPlaceIds.add(pid)
-    const linkedPlaces = [...allLinkedPlaceIds].map(pid => places?.find(p => p.id === pid)).filter(Boolean)
-    // All linked reservations (primary + file_links)
-    const allLinkedResIds = new Set<number>()
-    if (file.reservation_id) allLinkedResIds.add(file.reservation_id)
-    for (const rid of (file.linked_reservation_ids || [])) allLinkedResIds.add(rid)
-    const linkedReservations = [...allLinkedResIds].map(rid => reservations?.find(r => r.id === rid)).filter(Boolean)
-    return (
-      <div key={file.id} style={{
-        background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
-        padding: '10px 12px', display: 'flex', alignItems: 'flex-start', gap: 10,
-        transition: 'border-color 0.12s',
-        opacity: isTrash ? 0.7 : 1,
-      }}
-        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
-        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-primary)'}
-        className="group"
-      >
-        {/* Icon or thumbnail */}
-        <div
-          onClick={() => !isTrash && openFile(file)}
-          style={{
-            flexShrink: 0, width: 36, height: 36, borderRadius: 8,
-            background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: isTrash ? 'default' : 'pointer', overflow: 'hidden',
-          }}
-        >
-          {isImage(file.mime_type)
-            ? <AuthedImg src={file.url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-            : (() => {
-                const ext = (file.original_name || '').split('.').pop()?.toUpperCase() || '?'
-                const isPdf = file.mime_type === 'application/pdf'
-                return (
-                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: isPdf ? '#ef44441a' : 'var(--bg-tertiary)' }}>
-                    <span style={{ fontSize: 9, fontWeight: 700, color: isPdf ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
-                  </div>
-                )
-              })()
-          }
-        </div>
-
-        {/* Info */}
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-            {file.uploaded_by_name && (
-              <AvatarChip name={file.uploaded_by_name} avatarUrl={file.uploaded_by_avatar} size={20} />
-            )}
-            {!isTrash && file.starred ? <Star size={12} fill="#facc15" color="#facc15" style={{ flexShrink: 0 }} /> : null}
-            <span
-              onClick={() => !isTrash && openFile(file)}
-              style={{ fontWeight: 500, fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: isTrash ? 'default' : 'pointer' }}
-            >
-              {file.original_name}
-            </span>
-          </div>
-
-          {file.description && (
-            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.description}</p>
-          )}
-
-          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
-            {file.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatSize(file.file_size)}</span>}
-            <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatDateWithLocale(file.created_at, locale)}</span>
-
-            {linkedPlaces.map(p => (
-              <SourceBadge key={p.id} icon={MapPin} label={`${t('files.sourcePlan')} · ${p.name}`} />
-            ))}
-            {linkedReservations.map(r => (
-              <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
-            ))}
-            {file.note_id && (
-              <SourceBadge icon={StickyNote} label={t('files.sourceCollab') || 'Collab Notes'} />
-            )}
-          </div>
-        </div>
-
-        {/* Actions — always visible on mobile, hover on desktop */}
-        <div className="file-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
-          {isTrash ? (
-            <>
-              {can('file_delete', trip) && <button onClick={() => handleRestore(file.id)} title={t('files.restore') || 'Restore'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-                onMouseEnter={e => e.currentTarget.style.color = '#22c55e'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <RotateCcw size={14} />
-              </button>}
-              {can('file_delete', trip) && <button onClick={() => handlePermanentDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Trash2 size={14} />
-              </button>}
-            </>
-          ) : (
-            <>
-              <button onClick={() => handleStar(file.id)} title={file.starred ? t('files.unstar') || 'Unstar' : t('files.star') || 'Star'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: file.starred ? '#facc15' : 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-                onMouseEnter={e => { if (!file.starred) e.currentTarget.style.color = '#facc15' }} onMouseLeave={e => { if (!file.starred) e.currentTarget.style.color = 'var(--text-faint)' }}>
-                <Star size={14} fill={file.starred ? '#facc15' : 'none'} />
-              </button>
-              {can('file_edit', trip) && <button onClick={() => setAssignFileId(file.id)} title={t('files.assign') || 'Assign'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Pencil size={14} />
-              </button>}
-              <button onClick={() => openFile(file)} title={t('common.open')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <ExternalLink size={14} />
-              </button>
-              {can('file_delete', trip) && <button onClick={() => handleDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Trash2 size={14} />
-              </button>}
-            </>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
-      {/* Lightbox */}
-      {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
-
-      {/* Assign modal */}
-      {assignFileId && ReactDOM.createPortal(
-        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 5000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-          onClick={() => setAssignFileId(null)}>
-          <div style={{
-            background: 'var(--bg-card)', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-            width: 'min(600px, calc(100vw - 32px))', maxHeight: '70vh', overflow: 'hidden', display: 'flex', flexDirection: 'column',
-          }} onClick={e => e.stopPropagation()}>
-            <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('files.assignTitle')}</div>
-                <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {files.find(f => f.id === assignFileId)?.original_name || ''}
-                </div>
-              </div>
-              <button onClick={() => setAssignFileId(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4, display: 'flex', flexShrink: 0 }}>
-                <X size={18} />
-              </button>
-            </div>
-            <div style={{ padding: '8px 12px 0' }}>
-              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '0 2px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                {t('files.noteLabel') || 'Note'}
-              </div>
-              <input
-                type="text"
-                placeholder={t('files.notePlaceholder')}
-                defaultValue={files.find(f => f.id === assignFileId)?.description || ''}
-                onBlur={e => {
-                  const val = e.target.value.trim()
-                  const file = files.find(f => f.id === assignFileId)
-                  if (file && val !== (file.description || '')) {
-                    handleAssign(file.id, { description: val } as any)
-                  }
-                }}
-                onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
-                style={{
-                  width: '100%', padding: '7px 10px', fontSize: 13, borderRadius: 8,
-                  border: '1px solid var(--border-primary)', background: 'var(--bg-secondary)',
-                  color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
-                }}
-              />
-            </div>
-            <div style={{ overflowY: 'auto', padding: 8 }}>
-              {(() => {
-                const file = files.find(f => f.id === assignFileId)
-                if (!file) return null
-                const assignedPlaceIds = new Set<number>()
-                const dayGroups: { day: Day; dayPlaces: Place[] }[] = []
-                for (const day of days) {
-                  const da = assignments[String(day.id)] || []
-                  const dayPlaces = da.map(a => places.find(p => p.id === a.place?.id || p.id === a.place_id)).filter(Boolean) as Place[]
-                  if (dayPlaces.length > 0) {
-                    dayGroups.push({ day, dayPlaces })
-                    dayPlaces.forEach(p => assignedPlaceIds.add(p.id))
-                  }
-                }
-                const unassigned = places.filter(p => !assignedPlaceIds.has(p.id))
-                const placeBtn = (p: Place) => {
-                  const isLinked = file.place_id === p.id || (file.linked_place_ids || []).includes(p.id)
-                  return (
-                    <button key={p.id} onClick={async () => {
-                      if (isLinked) {
-                        if (file.place_id === p.id) {
-                          await handleAssign(file.id, { place_id: null })
-                        } else {
-                          try {
-                            const linksRes = await filesApi.getLinks(tripId, file.id)
-                            const link = (linksRes.links || []).find((l: any) => l.place_id === p.id)
-                            if (link) await filesApi.removeLink(tripId, file.id, link.id)
-                            refreshFiles()
-                          } catch {}
-                        }
-                      } else {
-                        if (!file.place_id) {
-                          await handleAssign(file.id, { place_id: p.id })
-                        } else {
-                          try {
-                            await filesApi.addLink(tripId, file.id, { place_id: p.id })
-                            refreshFiles()
-                          } catch {}
-                        }
-                      }
-                    }} style={{
-                      width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
-                      border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
-                      borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
-                      display: 'flex', alignItems: 'center', gap: 6,
-                    }}
-                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                      onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
-                      <MapPin size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
-                      {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
-                    </button>
-                  )
-                }
-
-                const placesSection = places.length > 0 && (
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                      {t('files.assignPlace')}
-                    </div>
-                    {dayGroups.map(({ day, dayPlaces }) => (
-                      <div key={day.id}>
-                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>
-                          {day.title || `${t('dayplan.dayN', { n: day.day_number })}${day.date ? ` · ${day.date}` : ''}`}
-                        </div>
-                        {dayPlaces.map(placeBtn)}
-                      </div>
-                    ))}
-                    {unassigned.length > 0 && (
-                      <div>
-                        {dayGroups.length > 0 && <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>{t('files.unassigned')}</div>}
-                        {unassigned.map(placeBtn)}
-                      </div>
-                    )}
-                  </div>
-                )
-
-                const bookingsSection = reservations.length > 0 && (
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                      {t('files.assignBooking')}
-                    </div>
-                    {reservations.map(r => {
-                      const isLinked = file.reservation_id === r.id || (file.linked_reservation_ids || []).includes(r.id)
-                      return (
-                        <button key={r.id} onClick={async () => {
-                          if (isLinked) {
-                            // Unlink: if primary reservation_id, clear it; if via file_links, remove link
-                            if (file.reservation_id === r.id) {
-                              await handleAssign(file.id, { reservation_id: null })
-                            } else {
-                              try {
-                                const linksRes = await filesApi.getLinks(tripId, file.id)
-                                const link = (linksRes.links || []).find((l: any) => l.reservation_id === r.id)
-                                if (link) await filesApi.removeLink(tripId, file.id, link.id)
-                                refreshFiles()
-                              } catch {}
-                            }
-                          } else {
-                            // Link: if no primary, set it; otherwise use file_links
-                            if (!file.reservation_id) {
-                              await handleAssign(file.id, { reservation_id: r.id })
-                            } else {
-                              try {
-                                await filesApi.addLink(tripId, file.id, { reservation_id: r.id })
-                                refreshFiles()
-                              } catch {}
-                            }
-                          }
-                        }} style={{
-                          width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
-                          border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
-                          borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
-                          display: 'flex', alignItems: 'center', gap: 6,
-                        }}
-                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                          onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
-                          <Ticket size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
-                          {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
-                        </button>
-                      )
-                    })}
-                  </div>
-                )
-
-                const hasBoth = placesSection && bookingsSection
-                return (
-                  <div className={hasBoth ? 'md:flex' : ''}>
-                    <div className={hasBoth ? 'md:w-1/2' : ''} style={{ overflowY: 'auto', maxHeight: '55vh', paddingRight: hasBoth ? 6 : 0 }}>{placesSection}</div>
-                    {hasBoth && <div className="hidden md:block" style={{ width: 1, background: 'var(--border-primary)', flexShrink: 0 }} />}
-                    {hasBoth && <div className="block md:hidden" style={{ height: 1, background: 'var(--border-primary)', margin: '8px 0' }} />}
-                    <div className={hasBoth ? 'md:w-1/2' : ''} style={{ overflowY: 'auto', maxHeight: '55vh', paddingLeft: hasBoth ? 6 : 0 }}>{bookingsSection}</div>
-                  </div>
-                )
-              })()}
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* PDF preview modal */}
-      {previewFile && ReactDOM.createPortal(
-        <div
-          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-          onClick={() => setPreviewFile(null)}
-        >
-          <div
-            style={{ width: '100%', maxWidth: 950, height: '94vh', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}
-            onClick={e => e.stopPropagation()}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-                <button
-                  onClick={async () => { const u = await getAuthUrl(previewFile.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
-                  style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
-                  onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
-                  onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
-                  <ExternalLink size={13} /> {t('files.openTab')}
-                </button>
-                <button onClick={() => setPreviewFile(null)}
-                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6, transition: 'color 0.15s' }}
-                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                  <X size={18} />
-                </button>
-              </div>
-            </div>
-            <object
-              data={previewFileUrl ? `${previewFileUrl}#view=FitH` : undefined}
-              type="application/pdf"
-              style={{ flex: 1, width: '100%', border: 'none' }}
-              title={previewFile.original_name}
-            >
-              <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-                <button onClick={async () => { const u = await getAuthUrl(previewFile.url, 'download'); window.open(u, '_blank', 'noopener noreferrer') }} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>PDF herunterladen</button>
-              </p>
-            </object>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* Header */}
-      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-        <div>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{showTrash ? (t('files.trash') || 'Trash') : t('files.title')}</h2>
-          <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
-            {showTrash
-              ? `${trashFiles.length} ${trashFiles.length === 1 ? 'file' : 'files'}`
-              : (files.length === 1 ? t('files.countSingular') : t('files.count', { count: files.length }))}
-          </p>
-        </div>
-        <button onClick={toggleTrash} style={{
-          padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)',
-          background: showTrash ? 'var(--accent)' : 'var(--bg-card)',
-          color: showTrash ? 'var(--accent-text)' : 'var(--text-muted)',
-          fontSize: 12, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5,
-          fontFamily: 'inherit',
-        }}>
-          <Trash2 size={13} /> {t('files.trash') || 'Trash'}
-        </button>
-      </div>
-
-      {showTrash ? (
-        /* Trash view */
-        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
-          {trashFiles.length > 0 && can('file_delete', trip) && (
-            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
-              <button onClick={handleEmptyTrash} style={{
-                padding: '5px 12px', borderRadius: 8, border: '1px solid #fecaca',
-                background: '#fef2f2', color: '#dc2626', fontSize: 12, fontWeight: 500,
-                cursor: 'pointer', fontFamily: 'inherit',
-              }}>
-                {t('files.emptyTrash') || 'Empty Trash'}
-              </button>
-            </div>
-          )}
-          {loadingTrash ? (
-            <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-faint)' }}>
-              <div style={{ width: 20, height: 20, border: '2px solid var(--text-faint)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }} />
-            </div>
-          ) : trashFiles.length === 0 ? (
-            <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
-              <Trash2 size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
-              <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.trashEmpty') || 'Trash is empty'}</p>
-            </div>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-              {trashFiles.map(file => renderFileRow(file, true))}
-            </div>
-          )}
-        </div>
-      ) : (
-        <>
-          {/* Upload zone */}
-          {can('file_upload', trip) && <div
-            {...getRootProps()}
-            style={{
-              margin: '16px 16px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
-              textAlign: 'center', cursor: 'pointer', transition: 'all 0.15s',
-              borderColor: isDragActive ? 'var(--text-secondary)' : 'var(--border-primary)',
-              background: isDragActive ? 'var(--bg-secondary)' : 'var(--bg-card)',
-            }}
-          >
-            <input {...getInputProps()} />
-            <Upload size={24} style={{ margin: '0 auto 8px', color: isDragActive ? 'var(--text-secondary)' : 'var(--text-faint)', display: 'block' }} />
-            {uploading ? (
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: 'var(--text-secondary)' }}>
-                <div style={{ width: 14, height: 14, border: '2px solid var(--text-secondary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
-                {t('files.uploading')}
-              </div>
-            ) : (
-              <>
-                <p style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 500, margin: 0 }}>{t('files.dropzone')}</p>
-                <p style={{ fontSize: 11.5, color: 'var(--text-faint)', marginTop: 3 }}>{t('files.dropzoneHint')}</p>
-                <p style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 6, opacity: 0.7 }}>
-                  {(allowedFileTypes || 'jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv').toUpperCase().split(',').join(', ')} · Max 50 MB
-                </p>
-              </>
-            )}
-          </div>}
-
-          {/* Filter tabs */}
-          <div style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>
-            {[
-              { id: 'all', label: t('files.filterAll') },
-              ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star }] : []),
-              { id: 'pdf', label: t('files.filterPdf') },
-              { id: 'image', label: t('files.filterImages') },
-              { id: 'doc', label: t('files.filterDocs') },
-              ...(files.some(f => f.note_id) ? [{ id: 'collab', label: t('files.filterCollab') || 'Collab' }] : []),
-            ].map(tab => (
-              <button key={tab.id} onClick={() => setFilterType(tab.id)} style={{
-                padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer', fontSize: 12,
-                fontFamily: 'inherit', transition: 'all 0.12s',
-                background: filterType === tab.id ? 'var(--accent)' : 'transparent',
-                color: filterType === tab.id ? 'var(--accent-text)' : 'var(--text-muted)',
-                fontWeight: filterType === tab.id ? 600 : 400,
-              }}>{tab.icon ? <tab.icon size={13} fill={filterType === tab.id ? '#facc15' : 'none'} color={filterType === tab.id ? '#facc15' : 'currentColor'} /> : tab.label}</button>
-            ))}
-            <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--text-faint)', alignSelf: 'center' }}>
-              {filteredFiles.length === 1 ? t('files.countSingular') : t('files.count', { count: filteredFiles.length })}
-            </span>
-          </div>
-
-          {/* File list */}
-          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
-            {filteredFiles.length === 0 ? (
-              <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
-                <FileText size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
-                <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.empty')}</p>
-                <p style={{ fontSize: 13, color: 'var(--text-faint)', margin: 0 }}>{t('files.emptyHint')}</p>
-              </div>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                {filteredFiles.map(file => renderFileRow(file))}
-              </div>
-            )}
-          </div>
-        </>
-      )}
-
-      <style>{`
-        @media (max-width: 767px) {
-          .file-actions button { padding: 8px !important; }
-          .file-actions svg { width: 18px !important; height: 18px !important; }
-        }
-      `}</style>
-    </div>
-  )
-}

client/src/components/Layout/DemoBanner.tsx

@@ -1,360 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Info, Github, Shield, Key, Users, Database, Upload, Clock, Puzzle, CalendarDays, Globe, ArrowRightLeft, Map, Briefcase, ListChecks, Wallet, FileText, Plane } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-
-interface DemoTexts {
-  titleBefore: string
-  titleAfter: string
-  title: string
-  description: string
-  resetIn: string
-  minutes: string
-  uploadNote: string
-  fullVersionTitle: string
-  features: string[]
-  addonsTitle: string
-  addons: [string, string][]
-  whatIs: string
-  whatIsDesc: string
-  selfHost: string
-  selfHostLink: string
-  close: string
-}
-
-const texts: Record<string, DemoTexts> = {
-  de: {
-    titleBefore: 'Willkommen bei ',
-    titleAfter: '',
-    title: 'Willkommen zur TREK Demo',
-    description: 'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
-    resetIn: 'Naechster Reset in',
-    minutes: 'Minuten',
-    uploadNote: 'Datei-Uploads (Fotos, Dokumente, Cover) sind in der Demo deaktiviert.',
-    fullVersionTitle: 'In der Vollversion zusaetzlich:',
-    features: [
-      'Datei-Uploads (Fotos, Dokumente, Cover)',
-      'API-Schluessel (Google Maps, Wetter)',
-      'Benutzer- & Rechteverwaltung',
-      'Automatische Backups',
-      'Addon-Verwaltung (aktivieren/deaktivieren)',
-      'OIDC / SSO Single Sign-On',
-    ],
-    addonsTitle: 'Modulare Addons (in der Vollversion deaktivierbar)',
-    addons: [
-      ['Vacay', 'Urlaubsplaner mit Kalender, Feiertagen & Fusion'],
-      ['Atlas', 'Weltkarte mit besuchten Laendern & Reisestatistiken'],
-      ['Packliste', 'Checklisten pro Reise'],
-      ['Budget', 'Kostenplanung mit Splitting'],
-      ['Dokumente', 'Dateien an Reisen anhaengen'],
-      ['Widgets', 'Waehrungsrechner & Zeitzonen'],
-    ],
-    whatIs: 'Was ist TREK?',
-    whatIsDesc: 'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
-    selfHost: 'Open Source — ',
-    selfHostLink: 'selbst hosten',
-    close: 'Verstanden',
-  },
-  en: {
-    titleBefore: 'Welcome to ',
-    titleAfter: '',
-    title: 'Welcome to the TREK Demo',
-    description: 'You can view, edit and create trips. All changes are automatically reset every hour.',
-    resetIn: 'Next reset in',
-    minutes: 'minutes',
-    uploadNote: 'File uploads (photos, documents, covers) are disabled in demo mode.',
-    fullVersionTitle: 'Additionally in the full version:',
-    features: [
-      'File uploads (photos, documents, covers)',
-      'API key management (Google Maps, Weather)',
-      'User & permission management',
-      'Automatic backups',
-      'Addon management (enable/disable)',
-      'OIDC / SSO single sign-on',
-    ],
-    addonsTitle: 'Modular Addons (can be deactivated in full version)',
-    addons: [
-      ['Vacay', 'Vacation planner with calendar, holidays & user fusion'],
-      ['Atlas', 'World map with visited countries & travel stats'],
-      ['Packing', 'Checklists per trip'],
-      ['Budget', 'Expense tracking with splitting'],
-      ['Documents', 'Attach files to trips'],
-      ['Widgets', 'Currency converter & timezones'],
-    ],
-    whatIs: 'What is TREK?',
-    whatIsDesc: 'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
-    selfHost: 'Open source — ',
-    selfHostLink: 'self-host it',
-    close: 'Got it',
-  },
-  es: {
-    titleBefore: 'Bienvenido a ',
-    titleAfter: '',
-    title: 'Bienvenido a la demo de TREK',
-    description: 'Puedes ver, editar y crear viajes. Todos los cambios se restablecen automáticamente cada hora.',
-    resetIn: 'Próximo reinicio en',
-    minutes: 'minutos',
-    uploadNote: 'Las subidas de archivos (fotos, documentos, portadas) están desactivadas en el modo demo.',
-    fullVersionTitle: 'Además, en la versión completa:',
-    features: [
-      'Subida de archivos (fotos, documentos, portadas)',
-      'Gestión de claves API (Google Maps, tiempo)',
-      'Gestión de usuarios y permisos',
-      'Copias de seguridad automáticas',
-      'Gestión de addons (activar/desactivar)',
-      'Inicio de sesión único OIDC / SSO',
-    ],
-    addonsTitle: 'Complementos modulares (se pueden desactivar en la versión completa)',
-    addons: [
-      ['Vacaciones', 'Planificador de vacaciones con calendario, festivos y fusión de usuarios'],
-      ['Atlas', 'Mapa del mundo con países visitados y estadísticas de viaje'],
-      ['Equipaje', 'Listas de comprobación para cada viaje'],
-      ['Presupuesto', 'Control de gastos con reparto'],
-      ['Documentos', 'Adjunta archivos a los viajes'],
-      ['Widgets', 'Conversor de divisas y zonas horarias'],
-    ],
-    whatIs: '¿Qué es TREK?',
-    whatIsDesc: 'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
-    selfHost: 'Código abierto — ',
-    selfHostLink: 'alójalo tú mismo',
-    close: 'Entendido',
-  },
-  zh: {
-    titleBefore: '欢迎来到 ',
-    titleAfter: '',
-    title: '欢迎来到 TREK 演示版',
-    description: '你可以查看、编辑和创建旅行。所有更改都会在每小时自动重置。',
-    resetIn: '下次重置将在',
-    minutes: '分钟后',
-    uploadNote: '演示模式下已禁用文件上传（照片、文档、封面）。',
-    fullVersionTitle: '完整版本还包括：',
-    features: [
-      '文件上传（照片、文档、封面）',
-      'API 密钥管理（Google Maps、天气）',
-      '用户和权限管理',
-      '自动备份',
-      '附加组件管理（启用/禁用）',
-      'OIDC / SSO 单点登录',
-    ],
-    addonsTitle: '模块化附加组件（完整版本可禁用）',
-    addons: [
-      ['Vacay', '带日历、节假日和用户融合的假期规划器'],
-      ['Atlas', '带已访问国家和旅行统计的世界地图'],
-      ['Packing', '按旅行管理清单'],
-      ['Budget', '支持分摊的费用追踪'],
-      ['Documents', '将文件附加到旅行'],
-      ['Widgets', '货币换算和时区工具'],
-    ],
-    whatIs: '什么是 TREK？',
-    whatIsDesc: '一个支持实时协作、交互式地图、OIDC 登录和深色模式的自托管旅行规划器。',
-    selfHost: '开源项目 - ',
-    selfHostLink: '自行部署',
-    close: '知道了',
-  },
-  'zh-TW': {
-    titleBefore: '歡迎來到 ',
-    titleAfter: '',
-    title: '歡迎來到 TREK 展示版',
-    description: '你可以檢視、編輯和建立行程。所有變更都會在每小時自動重設。',
-    resetIn: '下次重設將在',
-    minutes: '分鐘後',
-    uploadNote: '展示模式下已停用檔案上傳（照片、文件、封面）。',
-    fullVersionTitle: '完整版本還包含：',
-    features: [
-      '檔案上傳（照片、文件、封面）',
-      'API 金鑰管理（Google Maps、天氣）',
-      '使用者與權限管理',
-      '自動備份',
-      '附加元件管理（啟用/停用）',
-      'OIDC / SSO 單一登入',
-    ],
-    addonsTitle: '模組化附加元件（完整版本可停用）',
-    addons: [
-      ['Vacay', '具備日曆、假日與使用者融合的假期規劃器'],
-      ['Atlas', '顯示已造訪國家與旅行統計的世界地圖'],
-      ['Packing', '依行程管理的檢查清單'],
-      ['Budget', '支援分攤的費用追蹤'],
-      ['Documents', '將檔案附加到行程'],
-      ['Widgets', '貨幣換算與時區工具'],
-    ],
-    whatIs: 'TREK 是什麼？',
-    whatIsDesc: '一個支援即時協作、互動式地圖、OIDC 登入和深色模式的自架旅行規劃器。',
-    selfHost: '開源專案 - ',
-    selfHostLink: '自行架設',
-    close: '知道了',
-  },
-  ar: {
-    titleBefore: 'مرحبًا بك في ',
-    titleAfter: '',
-    title: 'مرحبًا بك في النسخة التجريبية من TREK',
-    description: 'يمكنك عرض الرحلات وتعديلها وإنشاء رحلات جديدة. تتم إعادة ضبط جميع التغييرات تلقائيًا كل ساعة.',
-    resetIn: 'إعادة الضبط التالية خلال',
-    minutes: 'دقيقة',
-    uploadNote: 'رفع الملفات (الصور والمستندات وصور الغلاف) معطّل في وضع العرض التجريبي.',
-    fullVersionTitle: 'وفي النسخة الكاملة أيضًا:',
-    features: [
-      'رفع الملفات (الصور والمستندات وصور الغلاف)',
-      'إدارة مفاتيح API (خرائط Google والطقس)',
-      'إدارة المستخدمين والصلاحيات',
-      'نسخ احتياطية تلقائية',
-      'إدارة الإضافات (تفعيل/تعطيل)',
-      'تسجيل دخول موحد OIDC / SSO',
-    ],
-    addonsTitle: 'إضافات مرنة (يمكن تعطيلها في النسخة الكاملة)',
-    addons: [
-      ['Vacay', 'مخطط إجازات مع تقويم وعطل ودمج مستخدمين'],
-      ['Atlas', 'خريطة عالمية مع الدول التي تمت زيارتها وإحصاءات السفر'],
-      ['Packing', 'قوائم تجهيز لكل رحلة'],
-      ['Budget', 'تتبع المصروفات مع التقسيم'],
-      ['Documents', 'إرفاق الملفات بالرحلات'],
-      ['Widgets', 'محول عملات ومناطق زمنية'],
-    ],
-    whatIs: 'ما هو TREK؟',
-    whatIsDesc: 'مخطط رحلات مستضاف ذاتيًا مع تعاون لحظي وخرائط تفاعلية وتسجيل دخول OIDC ووضع داكن.',
-    selfHost: 'مفتوح المصدر — ',
-    selfHostLink: 'استضفه بنفسك',
-    close: 'فهمت',
-  },
-}
-
-const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]
-const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft]
-
-export default function DemoBanner(): React.ReactElement | null {
-  const [dismissed, setDismissed] = useState<boolean>(false)
-  const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes())
-  const { language } = useTranslation()
-  const t = texts[language] || texts.en
-
-  useEffect(() => {
-    const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000)
-    return () => clearInterval(interval)
-  }, [])
-
-  if (dismissed) return null
-
-  return (
-    <div style={{
-      position: 'fixed', inset: 0, zIndex: 9999,
-      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      padding: 16, overflow: 'auto',
-      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
-    }} onClick={() => setDismissed(true)}>
-      <div style={{
-        background: 'white', borderRadius: 20, padding: '28px 24px 20px',
-        maxWidth: 480, width: '100%',
-        boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        maxHeight: '90vh', overflow: 'auto',
-      }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
-
-        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
-          <img src="/icons/icon-dark.svg" alt="" style={{ width: 36, height: 36, borderRadius: 10 }} />
-          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 5 }}>
-            {t.titleBefore}<img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />{t.titleAfter}
-          </h2>
-        </div>
-
-        <p style={{ fontSize: 13, color: '#6b7280', lineHeight: 1.6, margin: '0 0 12px' }}>
-          {t.description}
-        </p>
-
-        {/* Timer + Upload note */}
-        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
-          <div style={{
-            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
-            background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 10, padding: '8px 10px',
-          }}>
-            <Clock size={13} style={{ flexShrink: 0, color: '#0284c7' }} />
-            <span style={{ fontSize: 11, color: '#0369a1', fontWeight: 600 }}>
-              {t.resetIn} {minutesLeft} {t.minutes}
-            </span>
-          </div>
-          <div style={{
-            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
-            background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, padding: '8px 10px',
-          }}>
-            <Upload size={13} style={{ flexShrink: 0, color: '#b45309' }} />
-            <span style={{ fontSize: 11, color: '#b45309' }}>{t.uploadNote}</span>
-          </div>
-        </div>
-
-        {/* What is TREK */}
-        <div style={{
-          background: '#f8fafc', borderRadius: 12, padding: '12px 14px', marginBottom: 16,
-          border: '1px solid #e2e8f0',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
-            <Map size={14} style={{ color: '#111827' }} />
-            <span style={{ fontSize: 12, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
-              {t.whatIs}
-            </span>
-          </div>
-          <p style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>
-        </div>
-
-        {/* Addons */}
-        <p style={{ fontSize: 10, fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
-          <Puzzle size={12} />
-          {t.addonsTitle}
-        </p>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
-          {t.addons.map(([name, desc], i) => {
-            const Icon = addonIcons[i]
-            return (
-              <div key={name} style={{
-                background: '#f8fafc', borderRadius: 10, padding: '8px 10px',
-                border: '1px solid #f1f5f9',
-              }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
-                  <Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
-                  <span style={{ fontSize: 11, fontWeight: 700, color: '#111827' }}>{name}</span>
-                </div>
-                <p style={{ fontSize: 10, color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
-              </div>
-            )
-          })}
-        </div>
-
-        {/* Full version features */}
-        <p style={{ fontSize: 10, fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
-          <Shield size={12} />
-          {t.fullVersionTitle}
-        </p>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
-          {t.features.map((text, i) => {
-            const Icon = featureIcons[i]
-            return (
-              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: '#4b5563', padding: '4px 0' }}>
-                <Icon size={13} style={{ flexShrink: 0, color: '#9ca3af' }} />
-                <span>{text}</span>
-              </div>
-            )
-          })}
-        </div>
-
-        {/* Footer */}
-        <div style={{
-          paddingTop: 14, borderTop: '1px solid #e5e7eb',
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#9ca3af' }}>
-            <Github size={13} />
-            <span>{t.selfHost}</span>
-            <a href="https://github.com/mauriceboe/TREK" target="_blank" rel="noopener noreferrer"
-              style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}>
-              {t.selfHostLink}
-            </a>
-          </div>
-          <button onClick={() => setDismissed(true)} style={{
-            background: '#111827', color: 'white', border: 'none',
-            borderRadius: 10, padding: '8px 20px', fontSize: 12,
-            fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-          }}>
-            {t.close}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}

client/src/components/Layout/InAppNotificationBell.tsx

@@ -1,171 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import { useNavigate } from 'react-router-dom'
-import { Bell, Trash2, CheckCheck } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { useInAppNotificationStore } from '../../store/inAppNotificationStore.ts'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useAuthStore } from '../../store/authStore'
-import InAppNotificationItem from '../Notifications/InAppNotificationItem.tsx'
-
-export default function InAppNotificationBell(): React.ReactElement {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { settings } = useSettingsStore()
-  const darkMode = settings.dark_mode
-  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-
-  const isAuthenticated = useAuthStore(s => s.isAuthenticated)
-  const { notifications, unreadCount, isLoading, fetchNotifications, fetchUnreadCount, markAllRead, deleteAll } = useInAppNotificationStore()
-
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      fetchUnreadCount()
-    }
-  }, [isAuthenticated])
-
-  const handleOpen = () => {
-    if (!open) {
-      fetchNotifications(true)
-    }
-    setOpen(v => !v)
-  }
-
-  const handleShowAll = () => {
-    setOpen(false)
-    navigate('/notifications')
-  }
-
-  const displayCount = unreadCount > 99 ? '99+' : unreadCount
-
-  return (
-    <div className="relative flex-shrink-0">
-      <button
-        onClick={handleOpen}
-        title={t('notifications.title')}
-        className="relative p-2 rounded-lg transition-colors"
-        style={{ color: 'var(--text-muted)' }}
-        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-      >
-        <Bell className="w-4 h-4" />
-        {unreadCount > 0 && (
-          <span
-            className="absolute -top-0.5 -right-0.5 flex items-center justify-center rounded-full text-white font-bold"
-            style={{
-              background: '#ef4444',
-              fontSize: 9,
-              minWidth: 14,
-              height: 14,
-              padding: '0 3px',
-              lineHeight: 1,
-            }}
-          >
-            {displayCount}
-          </span>
-        )}
-      </button>
-
-      {open && ReactDOM.createPortal(
-        <>
-          <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setOpen(false)} />
-          <div
-            className="rounded-xl shadow-xl border overflow-hidden"
-            style={{
-              position: 'fixed',
-              top: 'var(--nav-h)',
-              right: 8,
-              width: 360,
-              maxWidth: 'calc(100vw - 16px)',
-              maxHeight: 'min(480px, calc(100vh - var(--nav-h) - 16px))',
-              zIndex: 9999,
-              background: 'var(--bg-card)',
-              borderColor: 'var(--border-primary)',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            {/* Header */}
-            <div
-              className="flex items-center justify-between px-4 py-3 flex-shrink-0"
-              style={{ borderBottom: '1px solid var(--border-secondary)' }}
-            >
-              <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
-                {t('notifications.title')}
-                {unreadCount > 0 && (
-                  <span className="ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium"
-                    style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
-                    {unreadCount}
-                  </span>
-                )}
-              </span>
-              <div className="flex items-center gap-1">
-                {unreadCount > 0 && (
-                  <button
-                    onClick={markAllRead}
-                    title={t('notifications.markAllRead')}
-                    className="p-1.5 rounded-lg transition-colors"
-                    style={{ color: 'var(--text-muted)' }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-                  >
-                    <CheckCheck className="w-3.5 h-3.5" />
-                  </button>
-                )}
-                {notifications.length > 0 && (
-                  <button
-                    onClick={deleteAll}
-                    title={t('notifications.deleteAll')}
-                    className="p-1.5 rounded-lg transition-colors"
-                    style={{ color: 'var(--text-muted)' }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-                  >
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* Notification list */}
-            <div className="overflow-y-auto flex-1">
-              {isLoading && notifications.length === 0 ? (
-                <div className="flex items-center justify-center py-10">
-                  <div className="w-5 h-5 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
-                </div>
-              ) : notifications.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-10 px-4 text-center gap-2">
-                  <Bell className="w-8 h-8" style={{ color: 'var(--text-faint)' }} />
-                  <p className="text-sm font-medium" style={{ color: 'var(--text-muted)' }}>{t('notifications.empty')}</p>
-                  <p className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('notifications.emptyDescription')}</p>
-                </div>
-              ) : (
-                notifications.slice(0, 10).map(n => (
-                  <InAppNotificationItem key={n.id} notification={n} onClose={() => setOpen(false)} />
-                ))
-              )}
-            </div>
-
-            {/* Footer */}
-            <button
-              onClick={handleShowAll}
-              className="w-full py-2.5 text-xs font-medium transition-colors flex-shrink-0"
-              style={{
-                borderTop: '1px solid var(--border-secondary)',
-                color: 'var(--text-primary)',
-                background: 'transparent',
-              }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-            >
-              {t('notifications.showAll')}
-            </button>
-          </div>
-        </>,
-        document.body
-      )}
-    </div>
-  )
-}

client/src/components/Layout/Navbar.tsx

@@ -1,260 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
-import { Link, useNavigate, useLocation } from 'react-router-dom'
-import { useAuthStore } from '../../store/authStore'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useAddonStore } from '../../store/addonStore'
-import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import InAppNotificationBell from './InAppNotificationBell.tsx'
-
-const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe }
-
-interface NavbarProps {
-  tripTitle?: string
-  tripId?: string
-  onBack?: () => void
-  showBack?: boolean
-  onShare?: () => void
-}
-
-interface Addon {
-  id: string
-  name: string
-  icon: string
-  type: string
-}
-
-export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
-  const { user, logout } = useAuthStore()
-  const { settings, updateSetting } = useSettingsStore()
-  const { addons: allAddons, loadAddons } = useAddonStore()
-  const { t, locale } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
-  const [appVersion, setAppVersion] = useState<string | null>(null)
-  const darkMode = settings.dark_mode
-  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-
-  // Only show 'global' type addons in the navbar — 'integration' addons have no dedicated page
-  const globalAddons = allAddons.filter((a: Addon) => a.type === 'global' && a.enabled)
-
-  useEffect(() => {
-    if (user) loadAddons()
-  }, [user, location.pathname])
-
-  useEffect(() => {
-    import('../../api/client').then(({ authApi }) => {
-      authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {})
-    })
-  }, [])
-
-  const handleLogout = () => {
-    logout()
-    navigate('/login')
-  }
-
-  const toggleDarkMode = () => {
-    updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
-  }
-
-  const getAddonName = (addon: Addon): string => {
-    const key = `admin.addons.catalog.${addon.id}.name`
-    const translated = t(key)
-    return translated !== key ? translated : addon.name
-  }
-
-  return (
-    <nav style={{
-      background: dark ? 'rgba(9,9,11,0.95)' : 'rgba(255,255,255,0.95)',
-      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
-      borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)'}`,
-      boxShadow: dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)',
-      touchAction: 'manipulation',
-      paddingTop: 'env(safe-area-inset-top, 0px)',
-      height: 'var(--nav-h)',
-    }} className="flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
-      {/* Left side */}
-      <div className="flex items-center gap-3 min-w-0">
-        {showBack && (
-          <button onClick={onBack}
-            className="p-1.5 rounded-lg transition-colors flex items-center gap-1.5 text-sm flex-shrink-0"
-            style={{ color: 'var(--text-muted)' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-            <ArrowLeft className="w-4 h-4" />
-            <span className="hidden sm:inline">{t('common.back')}</span>
-          </button>
-        )}
-
-        <Link to="/dashboard" className="flex items-center transition-colors flex-shrink-0">
-          <img src={dark ? '/icons/icon-white.svg' : '/icons/icon-dark.svg'} alt="TREK" className="sm:hidden" style={{ height: 22, width: 22 }} />
-          <img src={dark ? '/logo-light.svg' : '/logo-dark.svg'} alt="TREK" className="hidden sm:block" style={{ height: 28 }} />
-        </Link>
-
-        {/* Global addon nav items */}
-        {globalAddons.length > 0 && !tripTitle && (
-          <>
-            <span style={{ color: 'var(--text-faint)' }}>|</span>
-            <Link to="/dashboard"
-              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
-              style={{
-                color: location.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-muted)',
-                background: location.pathname === '/dashboard' ? 'var(--bg-hover)' : 'transparent',
-              }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => { if (location.pathname !== '/dashboard') e.currentTarget.style.background = 'transparent' }}>
-              <Briefcase className="w-3.5 h-3.5" />
-              <span className="hidden md:inline">{t('nav.myTrips')}</span>
-            </Link>
-            {globalAddons.map(addon => {
-              const Icon = ADDON_ICONS[addon.icon] || CalendarDays
-              const path = `/${addon.id}`
-              const isActive = location.pathname === path
-              return (
-                <Link key={addon.id} to={path}
-                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
-                  style={{
-                    color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
-                    background: isActive ? 'var(--bg-hover)' : 'transparent',
-                  }}
-                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent' }}>
-                  <Icon className="w-3.5 h-3.5" />
-                  <span className="hidden md:inline">{getAddonName(addon)}</span>
-                </Link>
-              )
-            })}
-          </>
-        )}
-
-        {tripTitle && (
-          <>
-            <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>
-            <span className="hidden sm:inline text-sm font-medium truncate max-w-48" style={{ color: 'var(--text-muted)' }}>
-              {tripTitle}
-            </span>
-          </>
-        )}
-      </div>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Share button */}
-      {onShare && (
-        <button onClick={onShare}
-          className="flex items-center gap-1.5 py-1.5 px-3 rounded-lg border transition-colors text-sm font-medium flex-shrink-0"
-          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)', background: 'var(--bg-card)' }}
-          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-          onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}>
-          <Users className="w-4 h-4" />
-          <span className="hidden sm:inline">{t('nav.share')}</span>
-        </button>
-      )}
-
-      {/* Dark mode toggle (light ↔ dark, overrides auto) — hidden on mobile */}
-      <button onClick={toggleDarkMode} title={dark ? t('nav.lightMode') : t('nav.darkMode')}
-        className="p-2 rounded-lg transition-colors flex-shrink-0 hidden sm:flex"
-        style={{ color: 'var(--text-muted)' }}
-        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-        {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-      </button>
-
-      {/* Notification bell — only in trip view on mobile, everywhere on desktop */}
-      {user && tripId && <InAppNotificationBell />}
-      {user && !tripId && <span className="hidden sm:block"><InAppNotificationBell /></span>}
-
-      {/* User menu */}
-      {user && (
-        <div className="relative">
-          <button onClick={() => setUserMenuOpen(!userMenuOpen)}
-            className="flex items-center gap-2 py-1.5 px-3 rounded-lg transition-colors"
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-            {user.avatar_url ? (
-              <img src={user.avatar_url} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover' }} />
-            ) : (
-              <div className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold"
-                style={{ background: dark ? '#e2e8f0' : '#111827', color: dark ? '#0f172a' : '#ffffff' }}>
-                {user.username?.charAt(0).toUpperCase()}
-              </div>
-            )}
-            <span className="text-sm hidden sm:inline max-w-24 truncate" style={{ color: 'var(--text-secondary)' }}>
-              {user.username}
-            </span>
-            <ChevronDown className="w-4 h-4" style={{ color: 'var(--text-faint)' }} />
-          </button>
-
-          {userMenuOpen && ReactDOM.createPortal(
-            <>
-              <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setUserMenuOpen(false)} />
-              <div className="w-52 rounded-xl shadow-xl border overflow-hidden" style={{ position: 'fixed', top: 'var(--nav-h)', right: 8, zIndex: 9999, background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-                <div className="px-4 py-3 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
-                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{user.username}</p>
-                  <p className="text-xs truncate" style={{ color: 'var(--text-muted)' }}>{user.email}</p>
-                  {user.role === 'admin' && (
-                    <span className="inline-flex items-center gap-1 text-xs font-medium mt-1" style={{ color: 'var(--text-secondary)' }}>
-                      <Shield className="w-3 h-3" /> {t('nav.administrator')}
-                    </span>
-                  )}
-                </div>
-
-                <div className="py-1">
-                  <Link to="/settings" onClick={() => setUserMenuOpen(false)}
-                    className="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
-                    style={{ color: 'var(--text-secondary)' }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                    <Settings className="w-4 h-4" />
-                    {t('nav.settings')}
-                  </Link>
-
-                  {user.role === 'admin' && (
-                    <Link to="/admin" onClick={() => setUserMenuOpen(false)}
-                      className="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
-                      style={{ color: 'var(--text-secondary)' }}
-                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                      <Shield className="w-4 h-4" />
-                      {t('nav.admin')}
-                    </Link>
-                  )}
-                </div>
-
-                <div className="py-1 border-t" style={{ borderColor: 'var(--border-secondary)' }}>
-                  <button onClick={handleLogout}
-                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-red-500 hover:bg-red-500/10 transition-colors">
-                    <LogOut className="w-4 h-4" />
-                    {t('nav.logout')}
-                  </button>
-                  {appVersion && (
-                    <div className="px-4 pt-2 pb-2.5 text-center" style={{ marginTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
-                        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--bg-tertiary)', borderRadius: 99, padding: '4px 12px' }}>
-                          <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 10, opacity: 0.5 }} />
-                          <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)' }}>v{appVersion}</span>
-                        </div>
-                        <a href="https://discord.gg/nSdKaXgN" target="_blank" rel="noopener noreferrer"
-                          style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: 99, background: 'var(--bg-tertiary)', transition: 'background 0.15s' }}
-                          onMouseEnter={e => e.currentTarget.style.background = '#5865F220'}
-                          onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-                          title="Discord">
-                          <svg width="12" height="12" viewBox="0 0 24 24" fill="var(--text-faint)"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
-                        </a>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </>,
-            document.body
-          )}
-        </div>
-      )}
-    </nav>
-  )
-}

client/src/components/Map/MapView.tsx

@@ -1,574 +0,0 @@
-import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
-import DOM from 'react-dom'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Tooltip, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
-import MarkerClusterGroup from 'react-leaflet-cluster'
-import L from 'leaflet'
-import 'leaflet.markercluster/dist/MarkerCluster.css'
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
-import { mapsApi } from '../../api/client'
-import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
-
-function categoryIconSvg(iconName: string | null | undefined, size: number): string {
-  const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
-  try {
-    return renderToStaticMarkup(createElement(IconComponent, { size, color: 'white', strokeWidth: 2.5 }))
-  } catch { return '' }
-}
-import type { Place } from '../../types'
-
-// Fix default marker icons for vite
-delete L.Icon.Default.prototype._getIconUrl
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
-  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
-  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
-})
-
-/**
- * Create a round photo-circle marker.
- * Shows image_url if available, otherwise category icon in colored circle.
- */
-function escAttr(s) {
-  if (!s) return ''
-  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-const iconCache = new Map<string, L.DivIcon>()
-
-function createPlaceIcon(place, orderNumbers, isSelected) {
-  const cacheKey = `${place.id}:${isSelected}:${place.image_url || ''}:${place.category_color || ''}:${place.category_icon || ''}:${orderNumbers?.join(',') || ''}`
-  const cached = iconCache.get(cacheKey)
-  if (cached) return cached
-  const size = isSelected ? 44 : 36
-  const borderColor = isSelected ? '#111827' : 'white'
-  const borderWidth = isSelected ? 3 : 2.5
-  const shadow = isSelected
-    ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
-    : '0 2px 8px rgba(0,0,0,0.22)'
-  const bgColor = place.category_color || '#6b7280'
-
-  // Number badges (bottom-right)
-  let badgeHtml = ''
-  if (orderNumbers && orderNumbers.length > 0) {
-    const label = orderNumbers.join(' · ')
-    badgeHtml = `<span style="
-      position:absolute;bottom:-4px;right:-4px;
-      min-width:18px;height:${orderNumbers.length > 1 ? 16 : 18}px;border-radius:${orderNumbers.length > 1 ? 8 : 9}px;
-      padding:0 ${orderNumbers.length > 1 ? 4 : 3}px;
-      background:rgba(255,255,255,0.94);
-      border:1.5px solid rgba(0,0,0,0.15);
-      box-shadow:0 1px 4px rgba(0,0,0,0.18);
-      display:flex;align-items:center;justify-content:center;
-      font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:-apple-system,system-ui,sans-serif;line-height:1;
-      box-sizing:border-box;white-space:nowrap;
-    ">${label}</span>`
-  }
-
-  // Base64 data URL thumbnails — no external image fetch during zoom
-  // Only use base64 data URLs for markers — external URLs cause zoom lag
-  if (place.image_url && place.image_url.startsWith('data:')) {
-    const imgIcon = L.divIcon({
-      className: '',
-      html: `<div style="
-        width:${size}px;height:${size}px;
-        cursor:pointer;position:relative;
-      ">
-        <div style="
-          width:${size}px;height:${size}px;border-radius:50%;
-          border:${borderWidth}px solid ${borderColor};
-          box-shadow:${shadow};
-          overflow:hidden;background:${bgColor};
-        ">
-          <img src="${place.image_url}" width="${size}" height="${size}" style="display:block;border-radius:50%;object-fit:cover;" />
-        </div>
-        ${badgeHtml}
-      </div>`,
-      iconSize: [size, size],
-      iconAnchor: [size / 2, size / 2],
-      tooltipAnchor: [size / 2 + 6, 0],
-    })
-    iconCache.set(cacheKey, imgIcon)
-    return imgIcon
-  }
-
-  const fallbackIcon = L.divIcon({
-    className: '',
-    html: `<div style="
-      width:${size}px;height:${size}px;border-radius:50%;
-      border:${borderWidth}px solid ${borderColor};
-      box-shadow:${shadow};
-      background:${bgColor};
-      display:flex;align-items:center;justify-content:center;
-      cursor:pointer;position:relative;
-      will-change:transform;contain:layout style;
-    ">
-      ${categoryIconSvg(place.category_icon, isSelected ? 18 : 15)}
-      ${badgeHtml}
-    </div>`,
-    iconSize: [size, size],
-    iconAnchor: [size / 2, size / 2],
-    tooltipAnchor: [size / 2 + 6, 0],
-  })
-  iconCache.set(cacheKey, fallbackIcon)
-  return fallbackIcon
-}
-
-interface SelectionControllerProps {
-  places: Place[]
-  selectedPlaceId: number | null
-  dayPlaces: Place[]
-  paddingOpts: Record<string, number>
-}
-
-function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }: SelectionControllerProps) {
-  const map = useMap()
-  const prev = useRef(null)
-
-  useEffect(() => {
-    if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Pan to the selected place without changing zoom
-      const selected = places.find(p => p.id === selectedPlaceId)
-      if (selected?.lat && selected?.lng) {
-        map.panTo([selected.lat, selected.lng], { animate: true })
-      }
-    }
-    prev.current = selectedPlaceId
-  }, [selectedPlaceId, places, map])
-
-  return null
-}
-
-interface MapControllerProps {
-  center: [number, number]
-  zoom: number
-}
-
-function MapController({ center, zoom }: MapControllerProps) {
-  const map = useMap()
-  const prevCenter = useRef(center)
-
-  useEffect(() => {
-    if (prevCenter.current[0] !== center[0] || prevCenter.current[1] !== center[1]) {
-      map.setView(center, zoom)
-      prevCenter.current = center
-    }
-  }, [center, zoom, map])
-
-  return null
-}
-
-// Fit bounds when places change (fitKey triggers re-fit)
-interface BoundsControllerProps {
-  hasDayDetail?: boolean
-  places: Place[]
-  fitKey: number
-  paddingOpts: Record<string, number>
-}
-
-function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
-  const map = useMap()
-  const prevFitKey = useRef(-1)
-
-  useEffect(() => {
-    if (fitKey === prevFitKey.current) return
-    prevFitKey.current = fitKey
-    if (places.length === 0) return
-    try {
-      const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
-      if (bounds.isValid()) {
-        map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
-        if (hasDayDetail) {
-          setTimeout(() => map.panBy([0, 150], { animate: true }), 300)
-        }
-      }
-    } catch {}
-  }, [fitKey, places, paddingOpts, map, hasDayDetail])
-
-  return null
-}
-
-interface MapClickHandlerProps {
-  onClick: ((e: L.LeafletMouseEvent) => void) | null
-}
-
-function ZoomTracker({ onZoomStart, onZoomEnd }: { onZoomStart: () => void; onZoomEnd: () => void }) {
-  const map = useMap()
-  useEffect(() => {
-    map.on('zoomstart', onZoomStart)
-    map.on('zoomend', onZoomEnd)
-    return () => { map.off('zoomstart', onZoomStart); map.off('zoomend', onZoomEnd) }
-  }, [map, onZoomStart, onZoomEnd])
-  return null
-}
-
-function MapClickHandler({ onClick }: MapClickHandlerProps) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onClick) return
-    map.on('click', onClick)
-    return () => map.off('click', onClick)
-  }, [map, onClick])
-  return null
-}
-
-function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.LeafletMouseEvent) => void) | null }) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onContextMenu) return
-    map.on('contextmenu', onContextMenu)
-    return () => map.off('contextmenu', onContextMenu)
-  }, [map, onContextMenu])
-  return null
-}
-
-// ── Route travel time label ──
-interface RouteLabelProps {
-  midpoint: [number, number]
-  walkingText: string
-  drivingText: string
-}
-
-function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
-  const map = useMap()
-  const [visible, setVisible] = useState(map ? map.getZoom() >= 12 : false)
-
-  useEffect(() => {
-    if (!map) return
-    const check = () => setVisible(map.getZoom() >= 12)
-    check()
-    map.on('zoomend', check)
-    return () => map.off('zoomend', check)
-  }, [map])
-
-  if (!visible || !midpoint) return null
-
-  const icon = L.divIcon({
-    className: 'route-info-pill',
-    html: `<div style="
-      display:flex;align-items:center;gap:5px;
-      background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
-      color:#fff;border-radius:99px;padding:3px 9px;
-      font-size:9px;font-weight:600;white-space:nowrap;
-      font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
-      box-shadow:0 2px 12px rgba(0,0,0,0.3);
-      pointer-events:none;
-      position:relative;left:-50%;top:-50%;
-    ">
-      <span style="display:flex;align-items:center;gap:2px">
-        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="4" r="2"/><path d="M7 21l3-7"/><path d="M10 14l5-5"/><path d="M15 9l-4 7"/><path d="M18 18l-3-7"/></svg>
-        ${walkingText}
-      </span>
-      <span style="opacity:0.3">|</span>
-      <span style="display:flex;align-items:center;gap:2px">
-        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 10l-2-4H7L5 10l-2.5 1.1C1.7 11.3 1 12.1 1 13v3c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
-        ${drivingText}
-      </span>
-    </div>`,
-    iconSize: [0, 0],
-    iconAnchor: [0, 0],
-  })
-
-  return <Marker position={midpoint} icon={icon} interactive={false} zIndexOffset={2000} />
-}
-
-// Module-level photo cache shared with PlaceAvatar
-import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
-
-// Live location tracker — blue dot with pulse animation (like Apple/Google Maps)
-function LocationTracker() {
-  const map = useMap()
-  const [position, setPosition] = useState<[number, number] | null>(null)
-  const [accuracy, setAccuracy] = useState(0)
-  const [tracking, setTracking] = useState(false)
-  const watchId = useRef<number | null>(null)
-
-  const startTracking = useCallback(() => {
-    if (!('geolocation' in navigator)) return
-    setTracking(true)
-    watchId.current = navigator.geolocation.watchPosition(
-      (pos) => {
-        const latlng: [number, number] = [pos.coords.latitude, pos.coords.longitude]
-        setPosition(latlng)
-        setAccuracy(pos.coords.accuracy)
-      },
-      () => setTracking(false),
-      { enableHighAccuracy: true, maximumAge: 5000 }
-    )
-  }, [])
-
-  const stopTracking = useCallback(() => {
-    if (watchId.current !== null) navigator.geolocation.clearWatch(watchId.current)
-    watchId.current = null
-    setTracking(false)
-    setPosition(null)
-  }, [])
-
-  const toggleTracking = useCallback(() => {
-    if (tracking) { stopTracking() } else { startTracking() }
-  }, [tracking, startTracking, stopTracking])
-
-  // Center map on position when first acquired
-  const centered = useRef(false)
-  useEffect(() => {
-    if (position && !centered.current) {
-      map.setView(position, 15)
-      centered.current = true
-    }
-  }, [position, map])
-
-  // Cleanup on unmount
-  useEffect(() => () => { if (watchId.current !== null) navigator.geolocation.clearWatch(watchId.current) }, [])
-
-  return (
-    <>
-      {/* Location button */}
-      <div style={{
-        position: 'absolute', bottom: 20, right: 10, zIndex: 1000,
-      }}>
-        <button onClick={toggleTracking} style={{
-          width: 36, height: 36, borderRadius: '50%',
-          border: 'none', cursor: 'pointer',
-          background: tracking ? '#3b82f6' : 'var(--bg-card, white)',
-          color: tracking ? 'white' : 'var(--text-muted, #6b7280)',
-          boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          transition: 'background 0.2s, color 0.2s',
-        }}>
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="3" />
-            <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
-          </svg>
-        </button>
-      </div>
-
-      {/* Blue dot + accuracy circle */}
-      {position && (
-        <>
-          {accuracy < 500 && (
-            <Circle center={position} radius={accuracy} pathOptions={{ color: '#3b82f6', fillColor: '#3b82f6', fillOpacity: 0.06, weight: 0.5, opacity: 0.3 }} />
-          )}
-          <CircleMarker center={position} radius={7} pathOptions={{ color: 'white', fillColor: '#3b82f6', fillOpacity: 1, weight: 2.5 }} />
-        </>
-      )}
-
-      {/* Pulse animation CSS */}
-      {position && (
-        <style>{`
-          @keyframes location-pulse {
-            0% { transform: scale(1); opacity: 0.6; }
-            100% { transform: scale(2.5); opacity: 0; }
-          }
-        `}</style>
-      )}
-    </>
-  )
-}
-
-export const MapView = memo(function MapView({
-  places = [],
-  dayPlaces = [],
-  route = null,
-  routeSegments = [],
-  selectedPlaceId = null,
-  onMarkerClick,
-  onMapClick,
-  onMapContextMenu = null,
-  center = [48.8566, 2.3522],
-  zoom = 10,
-  tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
-  fitKey = 0,
-  dayOrderMap = {},
-  leftWidth = 0,
-  rightWidth = 0,
-  hasInspector = false,
-  hasDayDetail = false,
-}) {
-  // Dynamic padding: account for sidebars + bottom inspector + day detail panel
-  const paddingOpts = useMemo(() => {
-    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
-    if (isMobile) return { padding: [40, 20] }
-    const top = 60
-    const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
-    const left = leftWidth + 40
-    const right = rightWidth + 40
-    return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
-  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
-
-  // photoUrls: only base64 thumbs for smooth map zoom
-  const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
-
-  // Fetch photos via shared service — subscribe to thumb (base64) availability
-  const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
-  useEffect(() => {
-    if (!places || places.length === 0) return
-    const cleanups: (() => void)[] = []
-
-    const setThumb = (cacheKey: string, thumb: string) => {
-      iconCache.clear()
-      setPhotoUrls(prev => prev[cacheKey] === thumb ? prev : { ...prev, [cacheKey]: thumb })
-    }
-
-    for (const place of places) {
-      if (place.image_url && place.image_url.startsWith('data:')) continue
-      const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-      if (!cacheKey) continue
-
-      const cached = getCached(cacheKey)
-      if (cached?.thumbDataUrl) {
-        setThumb(cacheKey, cached.thumbDataUrl)
-        continue
-      }
-
-      // Subscribe for when thumb becomes available
-      cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
-
-      // Always fetch through API — returns fresh URL + converts to base64
-      if (!cached && !isLoading(cacheKey)) {
-        const photoId = place.google_place_id || place.osm_id
-        if (photoId || (place.lat && place.lng)) {
-          fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
-        }
-      }
-    }
-
-    return () => cleanups.forEach(fn => fn())
-  }, [placeIds])
-
-  const clusterIconCreateFunction = useCallback((cluster) => {
-    const count = cluster.getChildCount()
-    const size = count < 10 ? 36 : count < 50 ? 42 : 48
-    return L.divIcon({
-      html: `<div class="marker-cluster-custom" style="width:${size}px;height:${size}px;"><span>${count}</span></div>`,
-      className: 'marker-cluster-wrapper',
-      iconSize: L.point(size, size),
-    })
-  }, [])
-
-  const isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
-
-  const markers = useMemo(() => places.map((place) => {
-    const isSelected = place.id === selectedPlaceId
-    const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-    const resolvedPhoto = (pck && photoUrls[pck]) || (place.image_url?.startsWith('data:') ? place.image_url : null) || null
-    const orderNumbers = dayOrderMap[place.id] ?? null
-    const icon = createPlaceIcon({ ...place, image_url: resolvedPhoto }, orderNumbers, isSelected)
-
-    return (
-      <Marker
-        key={place.id}
-        position={[place.lat, place.lng]}
-        icon={icon}
-        eventHandlers={{
-          click: () => onMarkerClick && onMarkerClick(place.id),
-        }}
-        zIndexOffset={isSelected ? 1000 : 0}
-      >
-        <Tooltip
-          direction="right"
-          offset={[0, 0]}
-          opacity={1}
-          className="map-tooltip"
-          permanent={isTouchDevice && isSelected}
-        >
-          <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-            <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
-              {place.name}
-            </div>
-            {place.category_name && (() => {
-              const CatIcon = getCategoryIcon(place.category_icon)
-              return (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
-                  <CatIcon size={10} style={{ color: place.category_color || 'var(--text-muted)', flexShrink: 0 }} />
-                  <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{place.category_name}</span>
-                </div>
-              )
-            })()}
-            {place.address && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2, maxWidth: 180, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                {place.address}
-              </div>
-            )}
-          </div>
-        </Tooltip>
-      </Marker>
-    )
-  }), [places, selectedPlaceId, dayOrderMap, photoUrls, onMarkerClick, isTouchDevice])
-
-  return (
-    <MapContainer
-      id="trek-map"
-      center={center}
-      zoom={zoom}
-      zoomControl={false}
-      className="w-full h-full"
-      style={{ background: '#e5e7eb' }}
-    >
-      <TileLayer
-        url={tileUrl}
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-        maxZoom={19}
-        keepBuffer={8}
-        updateWhenZooming={false}
-        updateWhenIdle={true}
-        referrerPolicy="strict-origin-when-cross-origin"
-      />
-
-      <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
-      <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
-      <MapClickHandler onClick={onMapClick} />
-      <MapContextMenuHandler onContextMenu={onMapContextMenu} />
-      <LocationTracker />
-
-      <MarkerClusterGroup
-        chunkedLoading
-        chunkInterval={30}
-        chunkDelay={0}
-        maxClusterRadius={30}
-        disableClusteringAtZoom={11}
-        spiderfyOnMaxZoom
-        showCoverageOnHover={false}
-        zoomToBoundsOnClick
-        animate={false}
-        iconCreateFunction={clusterIconCreateFunction}
-      >
-        {markers}
-      </MarkerClusterGroup>
-
-      {route && route.length > 1 && (
-        <>
-          <Polyline
-            positions={route}
-            color="#111827"
-            weight={3}
-            opacity={0.9}
-            dashArray="6, 5"
-          />
-          {routeSegments.map((seg, i) => (
-            <RouteLabel key={i} midpoint={seg.mid} from={seg.from} to={seg.to} walkingText={seg.walkingText} drivingText={seg.drivingText} />
-          ))}
-        </>
-      )}
-
-      {/* GPX imported route geometries */}
-      {places.map((place) => {
-        if (!place.route_geometry) return null
-        try {
-          const coords = JSON.parse(place.route_geometry) as [number, number][]
-          if (!coords || coords.length < 2) return null
-          return (
-            <Polyline
-              key={`gpx-${place.id}`}
-              positions={coords}
-              color={place.category_color || '#3b82f6'}
-              weight={3.5}
-              opacity={0.75}
-            />
-          )
-        } catch { return null }
-      })}
-    </MapContainer>
-  )
-})

client/src/components/Map/RouteCalculator.ts

@@ -1,139 +0,0 @@
-import type { RouteResult, RouteSegment, Waypoint } from '../../types'
-
-const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
-
-/** Fetches a full route via OSRM and returns coordinates, distance, and duration estimates for driving/walking. */
-export async function calculateRoute(
-  waypoints: Waypoint[],
-  profile: 'driving' | 'walking' | 'cycling' = 'driving',
-  { signal }: { signal?: AbortSignal } = {}
-): Promise<RouteResult> {
-  if (!waypoints || waypoints.length < 2) {
-    throw new Error('At least 2 waypoints required')
-  }
-
-  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const url = `${OSRM_BASE}/${profile}/${coords}?overview=full&geometries=geojson&steps=false`
-
-  const response = await fetch(url, { signal })
-  if (!response.ok) {
-    throw new Error('Route could not be calculated')
-  }
-
-  const data = await response.json()
-
-  if (data.code !== 'Ok' || !data.routes || data.routes.length === 0) {
-    throw new Error('No route found')
-  }
-
-  const route = data.routes[0]
-  const coordinates: [number, number][] = route.geometry.coordinates.map(([lng, lat]: [number, number]) => [lat, lng])
-
-  const distance: number = route.distance
-  let duration: number
-  if (profile === 'walking') {
-    duration = distance / (5000 / 3600)
-  } else if (profile === 'cycling') {
-    duration = distance / (15000 / 3600)
-  } else {
-    duration = route.duration
-  }
-
-  const walkingDuration = distance / (5000 / 3600)
-  const drivingDuration: number = route.duration
-
-  return {
-    coordinates,
-    distance,
-    duration,
-    distanceText: formatDistance(distance),
-    durationText: formatDuration(duration),
-    walkingText: formatDuration(walkingDuration),
-    drivingText: formatDuration(drivingDuration),
-  }
-}
-
-export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length === 0) return null
-  if (valid.length === 1) {
-    return `https://www.google.com/maps/search/?api=1&query=${valid[0].lat},${valid[0].lng}`
-  }
-  const stops = valid.map((p) => `${p.lat},${p.lng}`).join('/')
-  return `https://www.google.com/maps/dir/${stops}`
-}
-
-/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
-export function optimizeRoute(places: Waypoint[]): Waypoint[] {
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length <= 2) return places
-
-  const visited = new Set<number>()
-  const result: Waypoint[] = []
-  let current = valid[0]
-  visited.add(0)
-  result.push(current)
-
-  while (result.length < valid.length) {
-    let nearestIdx = -1
-    let minDist = Infinity
-    for (let i = 0; i < valid.length; i++) {
-      if (visited.has(i)) continue
-      const d = Math.sqrt(
-        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
-      )
-      if (d < minDist) { minDist = d; nearestIdx = i }
-    }
-    if (nearestIdx === -1) break
-    visited.add(nearestIdx)
-    current = valid[nearestIdx]
-    result.push(current)
-  }
-  return result
-}
-
-/** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
-export async function calculateSegments(
-  waypoints: Waypoint[],
-  { signal }: { signal?: AbortSignal } = {}
-): Promise<RouteSegment[]> {
-  if (!waypoints || waypoints.length < 2) return []
-
-  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const url = `${OSRM_BASE}/driving/${coords}?overview=false&geometries=geojson&steps=false&annotations=distance,duration`
-
-  const response = await fetch(url, { signal })
-  if (!response.ok) throw new Error('Route could not be calculated')
-
-  const data = await response.json()
-  if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')
-
-  const legs = data.routes[0].legs
-  return legs.map((leg: { distance: number; duration: number }, i: number): RouteSegment => {
-    const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
-    const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
-    const mid: [number, number] = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
-    const walkingDuration = leg.distance / (5000 / 3600)
-    return {
-      mid, from, to,
-      walkingText: formatDuration(walkingDuration),
-      drivingText: formatDuration(leg.duration),
-    }
-  })
-}
-
-function formatDistance(meters: number): string {
-  if (meters < 1000) {
-    return `${Math.round(meters)} m`
-  }
-  return `${(meters / 1000).toFixed(1)} km`
-}
-
-function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  if (h > 0) {
-    return `${h} h ${m} min`
-  }
-  return `${m} min`
-}

client/src/components/Notifications/InAppNotificationItem.tsx

@@ -1,191 +0,0 @@
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { User, Check, X, ArrowRight, Trash2, CheckCheck } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { useInAppNotificationStore, InAppNotification } from '../../store/inAppNotificationStore'
-import { useSettingsStore } from '../../store/settingsStore'
-
-function relativeTime(dateStr: string, locale: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime()
-  const minutes = Math.floor(diff / 60000)
-  if (minutes < 1) return locale === 'ar' ? 'الآن' : 'just now'
-  if (minutes < 60) return `${minutes}m`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h`
-  const days = Math.floor(hours / 24)
-  return `${days}d`
-}
-
-interface NotificationItemProps {
-  notification: InAppNotification
-  onClose?: () => void
-}
-
-export default function InAppNotificationItem({ notification, onClose }: NotificationItemProps): React.ReactElement {
-  const { t, locale } = useTranslation()
-  const navigate = useNavigate()
-  const { settings } = useSettingsStore()
-  const darkMode = settings.dark_mode
-  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  const [responding, setResponding] = useState(false)
-
-  const { markRead, markUnread, deleteNotification, respondToBoolean } = useInAppNotificationStore()
-
-  const handleNavigate = async () => {
-    if (!notification.is_read) await markRead(notification.id)
-    if (notification.navigate_target) {
-      navigate(notification.navigate_target)
-      onClose?.()
-    }
-  }
-
-  const handleRespond = async (response: 'positive' | 'negative') => {
-    if (responding || notification.response !== null) return
-    setResponding(true)
-    await respondToBoolean(notification.id, response)
-    setResponding(false)
-  }
-
-  const titleText = t(notification.title_key, notification.title_params)
-  const bodyText = t(notification.text_key, notification.text_params)
-  const hasUnknownTitle = titleText === notification.title_key
-  const hasUnknownBody = bodyText === notification.text_key
-
-  return (
-    <div
-      className="relative px-4 py-3 transition-colors"
-      style={{
-        background: notification.is_read ? 'transparent' : (dark ? 'rgba(99,102,241,0.07)' : 'rgba(99,102,241,0.05)'),
-        borderBottom: '1px solid var(--border-secondary)',
-      }}
-    >
-
-      <div className="flex gap-3 items-start">
-        {/* Sender avatar */}
-        <div className="flex-shrink-0 mt-0.5">
-          {notification.sender_avatar ? (
-            <img
-              src={notification.sender_avatar}
-              alt=""
-              className="w-8 h-8 rounded-full object-cover"
-            />
-          ) : (
-            <div
-              className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
-              style={{ background: dark ? '#27272a' : '#f1f5f9', color: 'var(--text-muted)' }}
-            >
-              {notification.sender_username
-                ? notification.sender_username.charAt(0).toUpperCase()
-                : <User className="w-4 h-4" />
-              }
-            </div>
-          )}
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-start justify-between gap-2">
-            <p className="text-sm font-medium leading-snug" style={{ color: 'var(--text-primary)' }}>
-              {hasUnknownTitle ? notification.title_key : titleText}
-            </p>
-            <div className="flex items-center gap-0.5 flex-shrink-0">
-              <span className="text-xs mr-1" style={{ color: 'var(--text-faint)' }}>
-                {relativeTime(notification.created_at, locale)}
-              </span>
-              {!notification.is_read && (
-                <button
-                  onClick={() => markRead(notification.id)}
-                  title={t('notifications.markRead')}
-                  className="p-1 rounded transition-colors"
-                  style={{ color: 'var(--text-faint)' }}
-                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-primary)' }}
-                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}
-                >
-                  <CheckCheck className="w-3.5 h-3.5" />
-                </button>
-              )}
-              <button
-                onClick={() => deleteNotification(notification.id)}
-                title={t('notifications.delete')}
-                className="p-1 rounded transition-colors"
-                style={{ color: 'var(--text-faint)' }}
-                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(239,68,68,0.1)'; e.currentTarget.style.color = '#ef4444' }}
-                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}
-              >
-                <Trash2 className="w-3.5 h-3.5" />
-              </button>
-            </div>
-          </div>
-
-          <p className="text-xs mt-0.5 leading-relaxed" style={{ color: 'var(--text-muted)' }}>
-            {hasUnknownBody ? notification.text_key : bodyText}
-          </p>
-
-          {/* Boolean actions */}
-          {notification.type === 'boolean' && notification.positive_text_key && notification.negative_text_key && (
-            <div className="flex gap-2 mt-2">
-              <button
-                onClick={() => handleRespond('positive')}
-                disabled={responding || notification.response !== null}
-                className="flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors"
-                style={{
-                  background: notification.response === 'positive'
-                    ? 'var(--text-primary)'
-                    : notification.response === 'negative'
-                      ? (dark ? '#27272a' : '#f1f5f9')
-                      : (dark ? '#27272a' : '#f1f5f9'),
-                  color: notification.response === 'positive'
-                    ? '#fff'
-                    : notification.response === 'negative'
-                      ? 'var(--text-faint)'
-                      : 'var(--text-secondary)',
-                  opacity: notification.response === 'negative' ? 0.5 : 1,
-                  cursor: notification.response !== null || responding ? 'default' : 'pointer',
-                }}
-              >
-                <Check className="w-3 h-3" />
-                {t(notification.positive_text_key)}
-              </button>
-              <button
-                onClick={() => handleRespond('negative')}
-                disabled={responding || notification.response !== null}
-                className="flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors"
-                style={{
-                  background: notification.response === 'negative'
-                    ? '#ef4444'
-                    : notification.response === 'positive'
-                      ? (dark ? '#27272a' : '#f1f5f9')
-                      : (dark ? '#27272a' : '#f1f5f9'),
-                  color: notification.response === 'negative'
-                    ? '#fff'
-                    : notification.response === 'positive'
-                      ? 'var(--text-faint)'
-                      : 'var(--text-secondary)',
-                  opacity: notification.response === 'positive' ? 0.5 : 1,
-                  cursor: notification.response !== null || responding ? 'default' : 'pointer',
-                }}
-              >
-                <X className="w-3 h-3" />
-                {t(notification.negative_text_key)}
-              </button>
-            </div>
-          )}
-
-          {/* Navigate action */}
-          {notification.type === 'navigate' && notification.navigate_text_key && notification.navigate_target && (
-            <button
-              onClick={handleNavigate}
-              className="flex items-center gap-1 mt-2 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors"
-              style={{ background: dark ? '#27272a' : '#f1f5f9', color: 'var(--text-secondary)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = dark ? '#27272a' : '#f1f5f9'}
-            >
-              <ArrowRight className="w-3 h-3" />
-              {t(notification.navigate_text_key)}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

client/src/components/PDF/TripPDF.tsx

@@ -1,527 +0,0 @@
-// Trip PDF via browser print window
-import { createElement } from 'react'
-import { getCategoryIcon } from '../shared/categoryIcons'
-import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, LucideIcon } from 'lucide-react'
-import { accommodationsApi, mapsApi } from '../../api/client'
-import type { Trip, Day, Place, Category, AssignmentsMap, DayNotesMap } from '../../types'
-
-function renderLucideIcon(icon:LucideIcon, props = {}) {
-  if (!_renderToStaticMarkup) return ''
-  return _renderToStaticMarkup(
-    createElement(icon, props)
-  );
-}
-
-const NOTE_ICON_MAP = { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark }
-function noteIconSvg(iconId) {
-  const Icon = NOTE_ICON_MAP[iconId] || FileText
-  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' })
-}
-
-const TRANSPORT_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
-function transportIconSvg(type) {
-  const Icon = TRANSPORT_ICON_MAP[type] || Ticket
-  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#3b82f6' })
-}
-
-const ACCOMMODATION_ICON_MAP = { accommodation: Hotel, checkin: LogIn, checkout: LogOut, location: MapPin, note: FileText, confirmation: KeyRound }
-function accommodationIconSvg(type) {
-  const Icon = ACCOMMODATION_ICON_MAP[type] || BedDouble
-  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#03398f', className: 'accommodation-icon' })
-}
-
-// ── SVG inline icons (for chips) ─────────────────────────────────────────────
-const svgPin   = `<svg width="11" height="11" viewBox="0 0 24 24" fill="#94a3b8" style="flex-shrink:0;margin-top:1px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5" fill="white"/></svg>`
-const svgClock = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
-const svgClock2= `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
-const svgCheck = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L19 7"/></svg>`
-const svgEuro  = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round"><path d="M14 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c2.17 0 4.1-.99 5.4-2.55"/><path d="M5 11h8M5 13h8"/></svg>`
-
-function escHtml(str) {
-  if (!str) return ''
-  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
-}
-
-function absUrl(url) {
-  if (!url) return null
-  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) return url
-  return window.location.origin + (url.startsWith('/') ? '' : '/') + url
-}
-
-function safeImg(url) {
-  if (!url) return null
-  if (url.startsWith('https://') || url.startsWith('http://')) return url
-  return /\.(jpe?g|png|webp|bmp|tiff?)(\?.*)?$/i.test(url) ? absUrl(url) : null
-}
-
-// Generate SVG string from Lucide icon name (for category thumbnails)
-let _renderToStaticMarkup = null
-async function ensureRenderer() {
-  if (!_renderToStaticMarkup) {
-    const mod = await import('react-dom/server')
-    _renderToStaticMarkup = mod.renderToStaticMarkup
-  }
-}
-function categoryIconSvg(iconName, color = '#6366f1', size = 24) {
-  if (!_renderToStaticMarkup) return ''
-  const Icon = getCategoryIcon(iconName)
-  return _renderToStaticMarkup(
-    createElement(Icon, { size, strokeWidth: 1.8, color: 'rgba(255,255,255,0.92)' })
-  )
-}
-
-function shortDate(d, locale) {
-  if (!d) return ''
-  return new Date(d + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
-}
-
-function longDateRange(days, locale) {
-  const dd = [...days].filter(d => d.date).sort((a, b) => a.day_number - b.day_number)
-  if (!dd.length) return null
-  const f = new Date(dd[0].date + 'T00:00:00Z')
-  const l = new Date(dd[dd.length - 1].date + 'T00:00:00Z')
-  return `${f.toLocaleDateString(locale, { day: 'numeric', month: 'long', timeZone: 'UTC' })} – ${l.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' })}`
-}
-
-function dayCost(assignments, dayId, locale) {
-  const total = (assignments[String(dayId)] || []).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
-  return total > 0 ? `${total.toLocaleString(locale)} EUR` : null
-}
-
-// Pre-fetch Google Place photos for all assigned places
-async function fetchPlacePhotos(assignments) {
-  const photoMap = {} // placeId → photoUrl
-  const allPlaces = Object.values(assignments).flatMap(a => a.map(x => x.place)).filter(Boolean)
-  const unique = [...new Map(allPlaces.map(p => [p.id, p])).values()]
-
-  const toFetch = unique.filter(p => !p.image_url && p.google_place_id)
-
-  await Promise.allSettled(
-    toFetch.map(async (place) => {
-      try {
-        const data = await mapsApi.placePhoto(place.google_place_id)
-        if (data.photoUrl) photoMap[place.id] = data.photoUrl
-      } catch {}
-    })
-  )
-  return photoMap
-}
-
-interface downloadTripPDFProps {
-  trip: Trip
-  days: Day[]
-  places: Place[]
-  assignments: AssignmentsMap
-  categories: Category[]
-  dayNotes: DayNotesMap
-  reservations?: any[]
-  t: (key: string, params?: Record<string, string | number>) => string
-  locale: string
-}
-
-export async function downloadTripPDF({ trip, days, places, assignments, categories, dayNotes, reservations = [], t: _t, locale: _locale }: downloadTripPDFProps) {
-  await ensureRenderer()
-  const loc = _locale || undefined
-  const tr = _t || (k => k)
-  const sorted = [...(days || [])].sort((a, b) => a.day_number - b.day_number)
-  const range = longDateRange(sorted, loc)
-  const coverImg = safeImg(trip?.cover_image)
-  //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
-  const accommodations = await accommodationsApi.list(trip.id);
-
-  // Pre-fetch place photos from Google
-  const photoMap = await fetchPlacePhotos(assignments)
-
-  const totalAssigned = new Set(
-    Object.values(assignments || {}).flatMap(a => a.map(x => x.place?.id)).filter(Boolean)
-  ).size
-  const totalCost = Object.values(assignments || {})
-    .flatMap(a => a).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
-
-  // Build day HTML
-  const daysHtml = sorted.map((day, di) => {
-    const assigned = assignments[String(day.id)] || []
-    const notes = (dayNotes || []).filter(n => n.day_id === day.id)
-    const cost = dayCost(assignments, day.id, loc)
-
-    // Transport bookings for this day
-    const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
-    const dayTransport = (reservations || []).filter(r => {
-      if (!r.reservation_time || !TRANSPORT_TYPES.has(r.type)) return false
-      return day.date && r.reservation_time.split('T')[0] === day.date
-    })
-
-    const merged = []
-    assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
-    notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
-    dayTransport.forEach(r => {
-      const pos = r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
-      merged.push({ type: 'transport', k: pos, data: r })
-    })
-    merged.sort((a, b) => a.k - b.k)
-
-    let pi = 0
-    const itemsHtml = merged.length === 0
-      ? `<div class="empty-day">${escHtml(tr('dayplan.emptyDay'))}</div>`
-      : merged.map(item => {
-          if (item.type === 'transport') {
-            const r = item.data
-            const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
-            const icon = transportIconSvg(r.type)
-            let subtitle = ''
-            if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
-            else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
-            const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
-            return `
-              <div class="note-card" style="border-left: 3px solid #3b82f6;">
-                <div class="note-line" style="background: #3b82f6;"></div>
-                <span class="note-icon">${icon}</span>
-                <div class="note-body">
-                  <div class="note-text" style="font-weight: 600;">${escHtml(r.title)}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
-                  ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
-                  ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
-                </div>
-              </div>`
-          }
-
-          if (item.type === 'note') {
-            const note = item.data
-            return `
-              <div class="note-card">
-                <div class="note-line"></div>
-                <span class="note-icon">${noteIconSvg(note.icon)}</span>
-                <div class="note-body">
-                  <div class="note-text">${escHtml(note.text)}</div>
-                  ${note.time ? `<div class="note-time">${escHtml(note.time)}</div>` : ''}
-                </div>
-              </div>`
-          }
-
-          pi++
-          const place = item.data.place
-          if (!place) return ''
-          const cat = categories.find(c => c.id === place.category_id)
-          const color = cat?.color || '#6366f1'
-
-          // Image: direct > google photo > fallback icon
-          const directImg = safeImg(place.image_url)
-          const googleImg = photoMap[place.id] || null
-          const img = directImg || googleImg
-
-          const iconSvg = categoryIconSvg(cat?.icon, color, 24)
-          const thumbHtml = img
-            ? `<img class="place-thumb" src="${escHtml(img)}" />`
-            : `<div class="place-thumb-fallback" style="background:${color}">
-                 ${iconSvg}
-               </div>`
-
-          const chips = [
-            place.place_time ? `<span class="chip">${svgClock}${escHtml(place.place_time)}</span>` : '',
-            place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgEuro}${Number(place.price).toLocaleString(loc)} EUR</span>` : '',
-          ].filter(Boolean).join('')
-
-          return `
-            <div class="place-card">
-              <div class="place-bar" style="background:${color}"></div>
-              ${thumbHtml}
-              <div class="place-info">
-                <div class="place-name-row">
-                  <span class="place-num">${pi}</span>
-                  <span class="place-name">${escHtml(place.name)}</span>
-                  ${cat ? `<span class="cat-badge" style="background:${color}">${escHtml(cat.name)}</span>` : ''}
-                </div>
-                ${place.address ? `<div class="info-row">${svgPin}<span class="info-text">${escHtml(place.address)}</span></div>` : ''}
-                ${place.description ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.description)}</span></div>` : ''}
-                ${chips ? `<div class="chips">${chips}</div>` : ''}
-                ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
-              </div>
-            </div>`
-      }).join('')
-
-    const accommodationsForDay = (accommodations.accommodations || []).filter(a =>
-      days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
-    ).sort((a, b) => a.start_day_id - b.start_day_id)
-
-    const accommodationDetails = accommodationsForDay.map(item => {
-      const isCheckIn = day.id === item.start_day_id
-      const isCheckOut = day.id === item.end_day_id
-      const actionLabel = isCheckIn ? tr('reservations.meta.checkIn')
-        : isCheckOut ? tr('reservations.meta.checkOut')
-        : tr('reservations.meta.linkAccommodation')
-      const actionIcon = isCheckIn ? accommodationIconSvg('checkin')
-        : isCheckOut ? accommodationIconSvg('checkout')
-        : accommodationIconSvg('accommodation')
-      const timeStr = isCheckIn ? (item.check_in || '')
-        : isCheckOut ? (item.check_out || '')
-        : ''
-
-      return `
-        <div class="day-accommodation">
-          <div class="day-accommodation-title accommodation-center-icon">${actionIcon} ${escHtml(actionLabel)}</div>
-          ${timeStr ? `<div class="accommodation-center-icon">${accommodationIconSvg('checkin')} <b>${escHtml(timeStr)}</b></div>` : ''}
-          <div class="accommodation-center-icon">${accommodationIconSvg('accommodation')} ${escHtml(item.place_name)}</div>
-          ${item.place_address ? `<div class="accommodation-center-icon">${accommodationIconSvg('location')} ${escHtml(item.place_address)}</div>` : ''}
-          ${item.notes ? `<div class="accommodation-center-icon">${accommodationIconSvg('note')} ${escHtml(item.notes)}</div>` : ''}
-          ${isCheckIn && item.confirmation ? `<div class="accommodation-center-icon">${accommodationIconSvg('confirmation')} ${escHtml(item.confirmation)}</div>` : ''}
-        </div>`
-    }).join('')
-
-    const accommodationsHtml = accommodationsForDay.length > 0
-      ? `<div class="day-accommodations-overview">
-          <div class="day-accommodations ${accommodationsForDay.length === 1 ? 'single' : ''}">${accommodationDetails}</div>
-        </div>`
-      : ''
-
-    return `
-      <div class="day-section${di > 0 ? ' page-break' : ''}">
-        <div class="day-header">
-          <span class="day-tag">${escHtml(tr('dayplan.dayN', { n: day.day_number })).toUpperCase()}</span>
-          <span class="day-title">${escHtml(day.title || tr('dayplan.dayN', { n: day.day_number }))}</span>
-          ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
-          ${cost ? `<span class="day-cost">${cost}</span>` : ''}
-        </div>
-        <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
-      </div>`  
-  }).join('')
-
-  const html = `<!DOCTYPE html>
-<html lang="${loc.split('-')[0]}">
-<head>
-<meta charset="UTF-8">
-<base href="${window.location.origin}/">
-<title>${escHtml(trip?.title || tr('pdf.travelPlan'))}</title>
-<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
-<style>
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: 'Poppins', sans-serif; background: #fff; color: #1e293b; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-  svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-
-  /* Footer on every printed page */
-  .pdf-footer {
-    position: fixed;
-    bottom: 20px;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    opacity: 0.3;
-  }
-  .pdf-footer span {
-    font-size: 7px;
-    color: #64748b;
-    letter-spacing: 0.5px;
-  }
-
-  /* ── Cover ─────────────────────────────────────── */
-  .cover {
-    width: 100%; min-height: 100vh;
-    background: #0f172a;
-    display: flex; flex-direction: column; justify-content: flex-end;
-    padding: 52px; position: relative; overflow: hidden;
-  }
-  .cover-bg {
-    position: absolute; inset: 0;
-    background-size: cover; background-position: center;
-    opacity: 0.28;
-  }
-  .cover-dim { position: absolute; inset: 0; background: rgba(8,12,28,0.55); }
-  .cover-brand {
-    position: absolute; top: 36px; right: 52px;
-    z-index: 2;
-  }
-  .cover-body { position: relative; z-index: 1; }
-  .cover-circle {
-    width: 100px; height: 100px; border-radius: 50%;
-    overflow: hidden; border: 2.5px solid rgba(255,255,255,0.25);
-    margin-bottom: 26px; flex-shrink: 0;
-  }
-  .cover-circle img { width: 100%; height: 100%; object-fit: cover; }
-  .cover-circle-ph {
-    width: 100px; height: 100px; border-radius: 50%;
-    background: rgba(255,255,255,0.07);
-    margin-bottom: 26px;
-  }
-  .cover-label { font-size: 9px; font-weight: 600; letter-spacing: 2.5px; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 8px; }
-  .cover-title { font-size: 42px; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; }
-  .cover-desc  { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 18px; max-width: 420px; }
-  .cover-dates { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 30px; }
-  .cover-line  { height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 24px; }
-  .cover-stats { display: flex; gap: 36px; }
-  .cover-stat-num { font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
-  .cover-stat-lbl { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }
-
-  /* ── Day ───────────────────────────────────────── */
-  .page-break { page-break-before: always; }
-  .day-header {
-    background: #0f172a; padding: 11px 28px;
-    display: flex; align-items: center; gap: 8px;
-  }
-  .day-tag { font-size: 8px; font-weight: 700; color: #fff; letter-spacing: 0.8px; background: rgba(255,255,255,0.12); border-radius: 4px; padding: 3px 8px; flex-shrink: 0; }
-  .day-title { font-size: 13px; font-weight: 600; color: #fff; flex: 1; }
-  .day-date  { font-size: 9px; color: rgba(255,255,255,0.45); }
-  .day-cost  { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.65); }
-  .day-body  { padding: 12px 28px 6px; }
-
-  /* accommodation info */
-  .day-accommodations-overview { font-size: 12px; }
-  .day-accommodations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
-  .day-accommodations.single { justify-content: center; }
-  .day-accommodation {
-    flex: 1 1 45%; min-width: 200px; margin: 4px 0; padding: 10px;
-    border: 2px solid #e2e8f0; border-radius: 12px;
-    display: flex; flex-direction: column;
-  }
-  .day-accommodation-title {
-    font-size: 16px; font-weight: 600; text-align: center;
-    margin-bottom: 4px; align-self: center;
-  }
-  .accommodation-center-icon { display: flex; align-items: center; gap: 4px; }
-
-
-  /* ── Place card ────────────────────────────────── */
-  .place-card {
-    display: flex; align-items: stretch;
-    border: 1px solid #e2e8f0; border-radius: 8px;
-    margin-bottom: 8px; overflow: hidden;
-    background: #fff; page-break-inside: avoid;
-  }
-  .place-bar { width: 4px; flex-shrink: 0; }
-  .place-thumb {
-    width: 52px; height: 52px; object-fit: cover;
-    margin: 8px; border-radius: 6px; flex-shrink: 0;
-  }
-  .place-thumb-fallback {
-    width: 52px; height: 52px; margin: 8px; border-radius: 8px;
-    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
-  }
-  .place-thumb-fallback svg { width: 24px; height: 24px; }
-  .place-info { flex: 1; padding: 9px 10px 8px 0; min-width: 0; }
-
-  .place-name-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
-  .place-num {
-    width: 16px; height: 16px; border-radius: 50%;
-    background: #1e293b; color: #fff; font-size: 8px; font-weight: 700;
-    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
-  }
-  .place-name { font-size: 11.5px; font-weight: 600; color: #1e293b; flex: 1; }
-  .cat-badge { font-size: 7.5px; font-weight: 600; color: #fff; border-radius: 99px; padding: 2px 7px; flex-shrink: 0; white-space: nowrap; }
-
-  .info-row { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 2px; padding-left: 21px; }
-  .info-row svg { flex-shrink: 0; margin-top: 1px; }
-  .info-spacer { width: 13px; flex-shrink: 0; }
-  .info-text { font-size: 9px; color: #64748b; line-height: 1.5; }
-  .info-text.muted { color: #94a3b8; }
-  .info-text.italic { font-style: italic; }
-
-  .chips { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 21px; margin-top: 4px; }
-  .chip { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 600; background: #f1f5f9; color: #374151; border-radius: 99px; padding: 2px 7px; white-space: nowrap; }
-  .chip svg { flex-shrink: 0; }
-  .chip-green { background: #ecfdf5; color: #059669; }
-  .chip-amber { background: #fffbeb; color: #d97706; }
-
-  /* ── Note card ─────────────────────────────────── */
-  .note-card {
-    display: flex; align-items: center; gap: 8px;
-    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
-    padding: 8px 10px; margin-bottom: 7px; page-break-inside: avoid;
-  }
-  .note-line { width: 3px; border-radius: 99px; background: #94a3b8; align-self: stretch; flex-shrink: 0; }
-  .note-icon { flex-shrink: 0; }
-  .note-body { flex: 1; min-width: 0; }
-  .note-text { font-size: 9.5px; color: #334155; line-height: 1.55; }
-  .note-time { font-size: 8px; color: #94a3b8; margin-top: 2px; }
-
-  .empty-day { font-size: 9.5px; color: #cbd5e1; font-style: italic; text-align: center; padding: 14px 0; }
-
-  /* ── Print ─────────────────────────────────────── */
-  @media print {
-    body { margin: 0; }
-    .cover { min-height: 100vh; page-break-after: always; }
-    @page { margin: 0; }
-  }
-</style>
-</head>
-<body>
-
-<!-- Footer on every page -->
-<div class="pdf-footer">
-  <span>made with</span>
-  <img src="${absUrl('/logo-dark.svg')}" style="height:10px;opacity:0.6;" />
-</div>
-
-<!-- Cover -->
-<div class="cover">
-  ${coverImg ? `<div class="cover-bg" style="background-image:url('${escHtml(coverImg)}')"></div>` : ''}
-  <div class="cover-dim"></div>
-  <div class="cover-brand"><img src="${absUrl('/logo-light.svg')}" style="height:28px;opacity:0.5;" /></div>
-  <div class="cover-body">
-    ${coverImg
-      ? `<div class="cover-circle"><img src="${escHtml(coverImg)}" /></div>`
-      : `<div class="cover-circle-ph"></div>`}
-    <div class="cover-label">${escHtml(tr('pdf.travelPlan'))}</div>
-    <div class="cover-title">${escHtml(trip?.title || 'My Trip')}</div>
-    ${trip?.description ? `<div class="cover-desc">${escHtml(trip.description)}</div>` : ''}
-    ${range ? `<div class="cover-dates">${range}</div>` : ''}
-    <div class="cover-line"></div>
-    <div class="cover-stats">
-      <div>
-        <div class="cover-stat-num">${sorted.length}</div>
-        <div class="cover-stat-lbl">${escHtml(tr('dashboard.days'))}</div>
-      </div>
-      <div>
-        <div class="cover-stat-num">${places?.length || 0}</div>
-        <div class="cover-stat-lbl">${escHtml(tr('dashboard.places'))}</div>
-      </div>
-      <div>
-        <div class="cover-stat-num">${totalAssigned}</div>
-        <div class="cover-stat-lbl">${escHtml(tr('pdf.planned'))}</div>
-      </div>
-      ${totalCost > 0 ? `<div>
-        <div class="cover-stat-num">${totalCost.toLocaleString(loc)}</div>
-        <div class="cover-stat-lbl">${escHtml(tr('pdf.costLabel'))}</div>
-      </div>` : ''}
-    </div>
-  </div>
-</div>
-
-<!-- Days -->
-${daysHtml}
-
-</body></html>`
-
-  // Open in modal with srcdoc iframe (no URL loading = no X-Frame-Options issue)
-  const overlay = document.createElement('div')
-  overlay.id = 'pdf-preview-overlay'
-  overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:8px;'
-  overlay.onclick = (e) => { if (e.target === overlay) overlay.remove() }
-
-  const card = document.createElement('div')
-  card.style.cssText = 'width:100%;max-width:1000px;height:95vh;background:var(--bg-card);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);'
-
-  const header = document.createElement('div')
-  header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-primary);flex-shrink:0;'
-  header.innerHTML = `
-    <span style="font-size:13px;font-weight:600;color:var(--text-primary)">${escHtml(trip?.title || tr('pdf.travelPlan'))}</span>
-    <div style="display:flex;align-items:center;gap:8px">
-      <button id="pdf-print-btn" style="display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit">${tr('pdf.saveAsPdf')}</button>
-      <button id="pdf-close-btn" style="background:none;border:none;cursor:pointer;color:var(--text-faint);display:flex;padding:4px;border-radius:6px">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-      </button>
-    </div>
-  `
-
-  const iframe = document.createElement('iframe')
-  iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals'
-  iframe.srcdoc = html
-
-  card.appendChild(header)
-  card.appendChild(iframe)
-  overlay.appendChild(card)
-  document.body.appendChild(overlay)
-
-  header.querySelector('#pdf-close-btn').onclick = () => overlay.remove()
-  header.querySelector('#pdf-print-btn').onclick = () => { iframe.contentWindow?.print() }
-}

client/src/components/Photos/PhotoGallery.tsx

@@ -1,217 +0,0 @@
-import { useState, useMemo } from 'react'
-import { PhotoLightbox } from './PhotoLightbox'
-import { PhotoUpload } from './PhotoUpload'
-import { Upload, Camera } from 'lucide-react'
-import Modal from '../shared/Modal'
-import { getLocaleForLanguage, useTranslation } from '../../i18n'
-import type { Photo, Place, Day } from '../../types'
-
-interface PhotoGalleryProps {
-  photos: Photo[]
-  onUpload: (fd: FormData) => Promise<void>
-  onDelete: (photoId: number) => Promise<void>
-  onUpdate: (photoId: number, data: Partial<Photo>) => Promise<void>
-  places: Place[]
-  days: Day[]
-  tripId: number
-}
-
-export default function PhotoGallery({ photos, onUpload, onDelete, onUpdate, places, days, tripId }: PhotoGalleryProps) {
-  const { t, language } = useTranslation()
-  const [lightboxIndex, setLightboxIndex] = useState(null)
-  const [showUpload, setShowUpload] = useState(false)
-  const [filterDayId, setFilterDayId] = useState('')
-
-  const filteredPhotos = useMemo(() => {
-    return photos.filter(photo => {
-      if (filterDayId && String(photo.day_id) !== String(filterDayId)) return false
-      return true
-    })
-  }, [photos, filterDayId])
-
-  const handlePhotoClick = (photo) => {
-    const idx = filteredPhotos.findIndex(p => p.id === photo.id)
-    setLightboxIndex(idx)
-  }
-
-  const handleDelete = async (photoId) => {
-    await onDelete(photoId)
-    if (lightboxIndex !== null) {
-      const newPhotos = filteredPhotos.filter(p => p.id !== photoId)
-      if (newPhotos.length === 0) {
-        setLightboxIndex(null)
-      } else if (lightboxIndex >= newPhotos.length) {
-        setLightboxIndex(newPhotos.length - 1)
-      }
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-      {/* Header */}
-      <div style={{ padding: '16px 24px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0, flexWrap: 'wrap' }}>
-        <div style={{ marginRight: 'auto' }}>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#111827' }}>Fotos</h2>
-          <p style={{ margin: '2px 0 0', fontSize: 12.5, color: '#9ca3af' }}>
-            {photos.length} {photos.length !== 1 ? 'Fotos' : 'Foto'}
-          </p>
-        </div>
-
-        <select
-          value={filterDayId}
-          onChange={e => setFilterDayId(e.target.value)}
-          className="border border-gray-200 rounded-lg px-3 py-1.5 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-slate-900"
-        >
-          <option value="">{t('photos.allDays')}</option>
-          {(days || []).map(day => (
-            <option key={day.id} value={day.id}>
-              {t('planner.dayN', { n: day.day_number })}{day.date ? ` · ${formatDate(day.date, getLocaleForLanguage(language))}` : ''}
-            </option>
-          ))}
-        </select>
-
-        {filterDayId && (
-          <button
-            onClick={() => setFilterDayId('')}
-            className="text-xs text-gray-500 hover:text-gray-700 underline"
-          >
-            {t('common.reset')}
-          </button>
-        )}
-
-        <button
-          onClick={() => setShowUpload(true)}
-          className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium whitespace-nowrap"
-        >
-          <Upload className="w-4 h-4" />
-          {t('common.upload')}
-        </button>
-      </div>
-
-      {/* Gallery Grid */}
-      <div className="flex-1 overflow-y-auto p-4">
-        {filteredPhotos.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '60px 20px', color: '#9ca3af' }}>
-            <Camera size={40} style={{ color: '#d1d5db', display: 'block', margin: '0 auto 12px' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: '#374151', margin: '0 0 4px' }}>{t('photos.noPhotos')}</p>
-            <p style={{ fontSize: 13, color: '#9ca3af', margin: '0 0 20px' }}>{t('photos.uploadHint')}</p>
-            <button
-              onClick={() => setShowUpload(true)}
-              className="flex items-center gap-2 bg-slate-900 text-white px-6 py-3 rounded-xl hover:bg-slate-700 font-medium"
-              style={{ display: 'inline-flex', margin: '0 auto' }}
-            >
-              <Upload className="w-4 h-4" />
-              {t('common.upload')}
-            </button>
-          </div>
-        ) : (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2">
-            {filteredPhotos.map(photo => (
-              <PhotoThumbnail
-                key={photo.id}
-                photo={photo}
-                days={days}
-                places={places}
-                onClick={() => handlePhotoClick(photo)}
-              />
-            ))}
-
-            {/* Upload tile */}
-            <button
-              onClick={() => setShowUpload(true)}
-              className="aspect-square rounded-xl border-2 border-dashed border-gray-200 hover:border-slate-400 flex flex-col items-center justify-center gap-2 text-gray-400 hover:text-slate-700 transition-colors"
-            >
-              <Upload className="w-6 h-6" />
-              <span className="text-xs">{t('common.add')}</span>
-            </button>
-          </div>
-        )}
-      </div>
-
-      {/* Lightbox */}
-      {lightboxIndex !== null && (
-        <PhotoLightbox
-          photos={filteredPhotos}
-          initialIndex={lightboxIndex}
-          onClose={() => setLightboxIndex(null)}
-          onUpdate={onUpdate}
-          onDelete={handleDelete}
-          days={days}
-          places={places}
-          tripId={tripId}
-        />
-      )}
-
-      {/* Upload Modal */}
-      <Modal
-        isOpen={showUpload}
-        onClose={() => setShowUpload(false)}
-        title={t('common.upload')}
-        size="lg"
-      >
-        <PhotoUpload
-          tripId={tripId}
-          days={days}
-          places={places}
-          onUpload={async (formData) => {
-            await onUpload(formData)
-            setShowUpload(false)
-          }}
-          onClose={() => setShowUpload(false)}
-        />
-      </Modal>
-    </div>
-  )
-}
-
-interface PhotoThumbnailProps {
-  photo: Photo
-  days: Day[]
-  places: Place[]
-  onClick: () => void
-}
-
-function PhotoThumbnail({ photo, days, places, onClick }: PhotoThumbnailProps) {
-  const day = days?.find(d => d.id === photo.day_id)
-  const place = places?.find(p => p.id === photo.place_id)
-
-  return (
-    <div
-      className="aspect-square rounded-xl overflow-hidden cursor-pointer relative group bg-gray-100"
-      onClick={onClick}
-    >
-      <img
-        src={photo.url}
-        alt={photo.caption || photo.original_name}
-        className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
-        loading="lazy"
-        onError={e => {
-          (e.target as HTMLImageElement).style.display = 'none'
-          const next = (e.target as HTMLImageElement).nextSibling as HTMLElement; if (next) next.style.display = 'flex'
-        }}
-      />
-
-      {/* Fallback */}
-      <div className="hidden absolute inset-0 items-center justify-center text-gray-400 text-2xl">
-        🖼️
-      </div>
-
-      {/* Hover overlay */}
-      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-200 flex flex-col justify-end p-2 opacity-0 group-hover:opacity-100">
-        {photo.caption && (
-          <p className="text-white text-xs font-medium truncate">{photo.caption}</p>
-        )}
-        {(day || place) && (
-          <p className="text-white/70 text-xs truncate">
-            {day ? `Tag ${day.day_number}` : ''}{day && place ? ' · ' : ''}{place?.name || ''}
-          </p>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function formatDate(dateStr, locale) {
-  if (!dateStr) return ''
-  return new Date(dateStr + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-}

client/src/components/Photos/PhotoLightbox.tsx

@@ -1,241 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { X, ChevronLeft, ChevronRight, Edit2, Trash2, Check } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import type { Photo, Place, Day } from '../../types'
-
-interface PhotoLightboxProps {
-  photos: Photo[]
-  initialIndex: number
-  onClose: () => void
-  onUpdate: (photoId: number, data: Partial<Photo>) => Promise<void>
-  onDelete: (photoId: number) => Promise<void>
-  days: Day[]
-  places: Place[]
-  tripId: number
-}
-
-export function PhotoLightbox({ photos, initialIndex, onClose, onUpdate, onDelete, days, places, tripId }: PhotoLightboxProps) {
-  const { t } = useTranslation()
-  const [index, setIndex] = useState(initialIndex || 0)
-  const [editCaption, setEditCaption] = useState(false)
-  const [caption, setCaption] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-
-  const photo = photos[index]
-
-  useEffect(() => {
-    setIndex(initialIndex || 0)
-  }, [initialIndex])
-
-  useEffect(() => {
-    if (photo) setCaption(photo.caption || '')
-  }, [photo])
-
-  const prev = useCallback(() => {
-    setIndex(i => Math.max(0, i - 1))
-    setEditCaption(false)
-  }, [])
-
-  const next = useCallback(() => {
-    setIndex(i => Math.min(photos.length - 1, i + 1))
-    setEditCaption(false)
-  }, [photos.length])
-
-  useEffect(() => {
-    const handleKey = (e) => {
-      if (e.key === 'Escape') onClose()
-      if (e.key === 'ArrowLeft') prev()
-      if (e.key === 'ArrowRight') next()
-    }
-    window.addEventListener('keydown', handleKey)
-    return () => window.removeEventListener('keydown', handleKey)
-  }, [onClose, prev, next])
-
-  const handleSaveCaption = async () => {
-    setIsSaving(true)
-    try {
-      await onUpdate(photo.id, { caption })
-      setEditCaption(false)
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (!confirm('Foto löschen?')) return
-    await onDelete(photo.id)
-    if (photos.length <= 1) {
-      onClose()
-    } else {
-      setIndex(i => Math.min(i, photos.length - 2))
-    }
-  }
-
-  if (!photo) return null
-
-  const day = days?.find(d => d.id === photo.day_id)
-  const place = places?.find(p => p.id === photo.place_id)
-
-  return (
-    <div
-      className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
-      onClick={onClose}
-    >
-      {/* Main area */}
-      <div
-        className="relative flex flex-col w-full h-full max-w-5xl mx-auto"
-        onClick={e => e.stopPropagation()}
-      >
-        {/* Top bar */}
-        <div className="flex items-center justify-between p-4 flex-shrink-0">
-          <div className="text-white/60 text-sm">
-            {index + 1} / {photos.length}
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleDelete}
-              className="p-2 text-white/60 hover:text-red-400 hover:bg-white/10 rounded-lg transition-colors"
-              title={t('common.delete')}
-            >
-              <Trash2 className="w-4 h-4" />
-            </button>
-            <button
-              onClick={onClose}
-              className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-
-        {/* Image area */}
-        <div className="flex-1 flex items-center justify-center relative min-h-0 px-16">
-          {/* Prev button */}
-          {index > 0 && (
-            <button
-              onClick={prev}
-              className="absolute left-4 top-1/2 -translate-y-1/2 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-10"
-            >
-              <ChevronLeft className="w-6 h-6" />
-            </button>
-          )}
-
-          <img
-            src={photo.url}
-            alt={photo.caption || photo.original_name}
-            className="max-h-full max-w-full object-contain rounded-lg select-none"
-            draggable={false}
-          />
-
-          {/* Next button */}
-          {index < photos.length - 1 && (
-            <button
-              onClick={next}
-              className="absolute right-4 top-1/2 -translate-y-1/2 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-10"
-            >
-              <ChevronRight className="w-6 h-6" />
-            </button>
-          )}
-        </div>
-
-        {/* Bottom info */}
-        <div className="flex-shrink-0 p-4">
-          {/* Caption */}
-          <div className="flex items-center gap-2 mb-2">
-            {editCaption ? (
-              <>
-                <input
-                  type="text"
-                  value={caption}
-                  onChange={e => setCaption(e.target.value)}
-                  onKeyDown={e => e.key === 'Enter' && handleSaveCaption()}
-                  placeholder="Beschriftung hinzufügen..."
-                  className="flex-1 bg-white/10 text-white border border-white/20 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-white/40"
-                  autoFocus
-                />
-                <button
-                  onClick={handleSaveCaption}
-                  disabled={isSaving}
-                  className="p-1.5 bg-slate-900 text-white rounded-lg hover:bg-slate-700"
-                >
-                  <Check className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => { setEditCaption(false); setCaption(photo.caption || '') }}
-                  className="p-1.5 text-white/60 hover:text-white"
-                >
-                  <X className="w-4 h-4" />
-                </button>
-              </>
-            ) : (
-              <>
-                <p
-                  className="text-white text-sm flex-1 cursor-pointer hover:text-white/80"
-                  onClick={() => setEditCaption(true)}
-                >
-                  {photo.caption || <span className="text-white/40 italic">Beschriftung hinzufügen...</span>}
-                </p>
-                <button
-                  onClick={() => setEditCaption(true)}
-                  className="p-1.5 text-white/40 hover:text-white/70"
-                >
-                  <Edit2 className="w-3.5 h-3.5" />
-                </button>
-              </>
-            )}
-          </div>
-
-          {/* Metadata */}
-          <div className="flex items-center gap-4 text-white/40 text-xs">
-            <span>{photo.original_name}</span>
-            {photo.created_at && (
-              <span>{formatDate(photo.created_at)}</span>
-            )}
-            {day && <span>📅 Tag {day.day_number}</span>}
-            {place && <span>📍 {place.name}</span>}
-            {photo.file_size && <span>{formatSize(photo.file_size)}</span>}
-          </div>
-        </div>
-
-        {/* Thumbnail strip */}
-        {photos.length > 1 && (
-          <div className="flex-shrink-0 px-4 pb-4">
-            <div className="flex gap-1.5 overflow-x-auto pb-1">
-              {photos.map((p, i) => (
-                <button
-                  key={p.id}
-                  onClick={() => { setIndex(i); setEditCaption(false) }}
-                  className={`flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden transition-all ${
-                    i === index
-                      ? 'ring-2 ring-white scale-105'
-                      : 'opacity-50 hover:opacity-75'
-                  }`}
-                >
-                  <img
-                    src={p.url}
-                    alt=""
-                    className="w-full h-full object-cover"
-                    loading="lazy"
-                  />
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function formatDate(dateStr, locale = 'en-US') {
-  if (!dateStr) return ''
-  try {
-    return new Date(dateStr).toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' })
-  } catch { return '' }
-}
-
-function formatSize(bytes) {
-  if (!bytes) return ''
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-}

client/src/components/Photos/PhotoUpload.tsx

@@ -1,202 +0,0 @@
-import { useState, useCallback } from 'react'
-import { useDropzone } from 'react-dropzone'
-import { Upload, X, Image } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import type { Place, Day } from '../../types'
-
-interface PhotoUploadProps {
-  tripId: number
-  days: Day[]
-  places: Place[]
-  onUpload: (fd: FormData) => Promise<void>
-  onClose: () => void
-}
-
-export function PhotoUpload({ tripId, days, places, onUpload, onClose }: PhotoUploadProps) {
-  const { t } = useTranslation()
-  const [files, setFiles] = useState([])
-  const [dayId, setDayId] = useState('')
-  const [placeId, setPlaceId] = useState('')
-  const [caption, setCaption] = useState('')
-  const [uploading, setUploading] = useState(false)
-  const [progress, setProgress] = useState(0)
-
-  const onDrop = useCallback((acceptedFiles) => {
-    const withPreview = acceptedFiles.map(file =>
-      Object.assign(file, { preview: URL.createObjectURL(file) })
-    )
-    setFiles(prev => [...prev, ...withPreview])
-  }, [])
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: { 'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.heic'] },
-    maxFiles: 30,
-    maxSize: 10 * 1024 * 1024,
-  })
-
-  const removeFile = (index) => {
-    setFiles(prev => {
-      URL.revokeObjectURL(prev[index].preview)
-      return prev.filter((_, i) => i !== index)
-    })
-  }
-
-  const handleUpload = async () => {
-    if (files.length === 0) return
-    setUploading(true)
-    setProgress(0)
-
-    try {
-      const formData = new FormData()
-      files.forEach(file => formData.append('photos', file))
-      if (dayId) formData.append('day_id', dayId)
-      if (placeId) formData.append('place_id', placeId)
-      if (caption) formData.append('caption', caption)
-
-      await onUpload(formData)
-      files.forEach(f => URL.revokeObjectURL(f.preview))
-      setFiles([])
-    } catch (err: unknown) {
-      console.error('Upload failed:', err)
-    } finally {
-      setUploading(false)
-      setProgress(0)
-    }
-  }
-
-  const formatSize = (bytes) => {
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Dropzone */}
-      <div
-        {...getRootProps()}
-        className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
-          isDragActive
-            ? 'border-slate-900 bg-slate-50'
-            : 'border-gray-300 hover:border-slate-400 hover:bg-gray-50'
-        }`}
-      >
-        <input {...getInputProps()} />
-        <Upload className={`w-10 h-10 mx-auto mb-3 ${isDragActive ? 'text-slate-900' : 'text-gray-400'}`} />
-        {isDragActive ? (
-          <p className="text-slate-700 font-medium">Fotos hier ablegen...</p>
-        ) : (
-          <>
-            <p className="text-gray-600 font-medium">Fotos hier ablegen</p>
-            <p className="text-gray-400 text-sm mt-1">{t('photos.clickToSelect')}</p>
-            <p className="text-gray-400 text-xs mt-2">JPG, PNG, WebP · max. 10 MB · bis zu 30 Fotos</p>
-          </>
-        )}
-      </div>
-
-      {/* Preview grid */}
-      {files.length > 0 && (
-        <div>
-          <p className="text-sm font-medium text-gray-700 mb-2">{files.length} Foto{files.length !== 1 ? 's' : ''} ausgewählt</p>
-          <div className="grid grid-cols-4 sm:grid-cols-6 gap-2 max-h-48 overflow-y-auto">
-            {files.map((file, idx) => (
-              <div key={idx} className="relative aspect-square group">
-                <img
-                  src={file.preview}
-                  alt={file.name}
-                  className="w-full h-full object-cover rounded-lg"
-                />
-                <button
-                  onClick={() => removeFile(idx)}
-                  className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                >
-                  <X className="w-3 h-3" />
-                </button>
-                <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 rounded-b-lg opacity-0 group-hover:opacity-100 transition-opacity truncate">
-                  {formatSize(file.size)}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Options */}
-      {files.length > 0 && (
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <label className="block text-xs font-medium text-gray-700 mb-1">Tag verknüpfen</label>
-            <select
-              value={dayId}
-              onChange={e => setDayId(e.target.value)}
-              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
-            >
-              <option value="">Kein Tag</option>
-              {(days || []).map(day => (
-                <option key={day.id} value={day.id}>Tag {day.day_number}</option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className="block text-xs font-medium text-gray-700 mb-1">{t('photos.linkPlace')}</label>
-            <select
-              value={placeId}
-              onChange={e => setPlaceId(e.target.value)}
-              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
-            >
-              <option value="">{t('photos.noPlace')}</option>
-              {(places || []).map(place => (
-                <option key={place.id} value={place.id}>{place.name}</option>
-              ))}
-            </select>
-          </div>
-          <div className="col-span-2">
-            <label className="block text-xs font-medium text-gray-700 mb-1">Beschriftung (für alle)</label>
-            <input
-              type="text"
-              value={caption}
-              onChange={e => setCaption(e.target.value)}
-              placeholder="Optionale Beschriftung..."
-              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Upload progress */}
-      {uploading && (
-        <div className="bg-slate-50 rounded-lg p-3">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="w-4 h-4 border-2 border-slate-900 border-t-transparent rounded-full animate-spin" />
-            <span className="text-sm text-slate-900">Wird hochgeladen...</span>
-          </div>
-          <div className="w-full bg-slate-200 rounded-full h-1.5">
-            <div
-              className="bg-slate-900 h-1.5 rounded-full transition-all duration-300"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Actions */}
-      <div className="flex justify-end gap-3">
-        <button
-          onClick={onClose}
-          className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50"
-        >
-          {t('common.cancel')}
-        </button>
-        <button
-          onClick={handleUpload}
-          disabled={files.length === 0 || uploading}
-          className="flex items-center gap-2 px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
-        >
-          <Upload className="w-4 h-4" />
-          {uploading ? t('common.uploading') : t('photos.uploadN', { n: files.length })}
-        </button>
-      </div>
-    </div>
-  )
-}

client/src/components/Planner/DayDetailPanel.tsx

@@ -1,670 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Hash, Pencil, Plane, Utensils, Train, Car, Ship, Ticket, FileText, Users } from 'lucide-react'
-
-const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
-const RES_TYPE_COLORS = { flight: '#3b82f6', hotel: '#8b5cf6', restaurant: '#ef4444', train: '#06b6d4', car: '#6b7280', cruise: '#0ea5e9', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
-import { weatherApi, accommodationsApi } from '../../api/client'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTripStore } from '../../store/tripStore'
-import CustomSelect from '../shared/CustomSelect'
-import CustomTimePicker from '../shared/CustomTimePicker'
-import { useSettingsStore } from '../../store/settingsStore'
-import { getLocaleForLanguage, useTranslation } from '../../i18n'
-import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
-
-const WEATHER_ICON_MAP = {
-  Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
-  Thunderstorm: CloudLightning, Snow: CloudSnow, Mist: Wind, Fog: Wind, Haze: Wind,
-}
-
-interface WIconProps {
-  main: string
-  size?: number
-}
-
-function WIcon({ main, size = 14 }: WIconProps) {
-  const Icon = WEATHER_ICON_MAP[main] || Cloud
-  return <Icon size={size} strokeWidth={1.8} />
-}
-
-function cTemp(c, f) { return Math.round(f ? c * 9 / 5 + 32 : c) }
-
-function formatTime12(val, is12h) {
-  if (!val) return val
-  const [h, m] = val.split(':').map(Number)
-  if (isNaN(h) || isNaN(m)) return val
-  if (!is12h) return val
-  const period = h >= 12 ? 'PM' : 'AM'
-  const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-  return `${h12}:${String(m).padStart(2, '0')} ${period}`
-}
-
-interface DayDetailPanelProps {
-  day: Day
-  days: Day[]
-  places: Place[]
-  categories?: Category[]
-  tripId: number
-  assignments: AssignmentsMap
-  reservations?: Reservation[]
-  lat: number | null
-  lng: number | null
-  onClose: () => void
-  onAccommodationChange: () => void
-  leftWidth?: number
-  rightWidth?: number
-}
-
-export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0 }: DayDetailPanelProps) {
-  const { t, language, locale } = useTranslation()
-  const can = useCanDo()
-  const tripObj = useTripStore((s) => s.trip)
-  const canEditDays = can('day_edit', tripObj)
-  const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit'
-  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-  const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
-  const fmtTime = (v) => formatTime12(v, is12h)
-  const unit = isFahrenheit ? '°F' : '°C'
-  const [weather, setWeather] = useState(null)
-  const [loading, setLoading] = useState(false)
-  const [accommodation, setAccommodation] = useState(null)
-  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
-  const [accommodations, setAccommodations] = useState([])
-  const [showHotelPicker, setShowHotelPicker] = useState(false)
-  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
-  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
-  const [hotelForm, setHotelForm] = useState({ check_in: '', check_out: '', confirmation: '', place_id: null })
-
-  useEffect(() => {
-    if (!day?.date || !lat || !lng) { setWeather(null); return }
-    setLoading(true)
-    weatherApi.getDetailed(lat, lng, day.date, language)
-      .then(data => setWeather(data.error ? null : data))
-      .catch(() => setWeather(null))
-      .finally(() => setLoading(false))
-  }, [day?.date, lat, lng, language])
-
-  useEffect(() => {
-    if (!tripId) return
-    accommodationsApi.list(tripId)
-      .then(data => {
-        setAccommodations(data.accommodations || [])
-        const allForDay = (data.accommodations || []).filter(a =>
-          days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
-        )
-        setDayAccommodations(allForDay)
-        setAccommodation(allForDay[0] || null)
-      })
-      .catch(() => {})
-  }, [tripId, day?.id])
-
-  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
-
-  const handleSelectPlace = (placeId) => {
-    setHotelForm(f => ({ ...f, place_id: placeId }))
-  }
-
-  const handleSaveAccommodation = async () => {
-    if (!hotelForm.place_id) return
-    try {
-      const data = await accommodationsApi.create(tripId, {
-        place_id: hotelForm.place_id,
-        start_day_id: hotelDayRange.start,
-        end_day_id: hotelDayRange.end,
-        check_in: hotelForm.check_in || null,
-        check_out: hotelForm.check_out || null,
-        confirmation: hotelForm.confirmation || null,
-      })
-      const newAcc = data.accommodation
-      const updated = [...accommodations, newAcc]
-      setAccommodations(updated)
-      setAccommodation(newAcc)
-      setDayAccommodations(updated.filter(a =>
-        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
-      ))
-      setShowHotelPicker(false)
-      setHotelForm({ check_in: '', check_out: '', confirmation: '', place_id: null })
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const updateAccommodationField = async (field, value) => {
-    if (!accommodation) return
-    try {
-      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
-      setAccommodation(data.accommodation)
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const handleRemoveAccommodation = async () => {
-    if (!accommodation) return
-    try {
-      await accommodationsApi.delete(tripId, accommodation.id)
-      const updated = accommodations.filter(a => a.id !== accommodation.id)
-      setAccommodations(updated)
-      setDayAccommodations(updated.filter(a =>
-        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
-      ))
-      setAccommodation(null)
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  if (!day) return null
-
-  const formattedDate = day.date ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(
-    getLocaleForLanguage(language),
-    { weekday: 'long', day: 'numeric', month: 'long', timeZone: 'UTC' }
-  ) : null
-
-  const placesWithCoords = places.filter(p => p.lat && p.lng)
-  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
-
-  return (
-    <div style={{ position: 'fixed', bottom: 20, left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, zIndex: 50, ...font }}>
-      <div style={{
-        background: 'var(--bg-elevated)',
-        backdropFilter: 'blur(40px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
-        borderRadius: 20,
-        boxShadow: '0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06)',
-        overflow: 'hidden', maxHeight: '60vh', display: 'flex', flexDirection: 'column',
-      }}>
-        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 16px 14px 20px', borderBottom: '1px solid var(--border-faint)' }}>
-          <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Calendar size={20} style={{ color: 'var(--text-primary)' }} />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
-            </div>
-            {formattedDate && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 1 }}>{formattedDate}</div>}
-          </div>
-          <button onClick={onClose} style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
-            <X size={14} style={{ color: 'var(--text-muted)' }} />
-          </button>
-        </div>
-
-        {/* Scrollable content */}
-        <div style={{ overflowY: 'auto', padding: '14px 20px 18px' }}>
-
-          {/* ── Weather ── */}
-          {day.date && lat && lng && (
-            loading ? (
-              <div style={{ textAlign: 'center', padding: 16, color: 'var(--text-faint)', fontSize: 12 }}>
-                <div style={{ width: 18, height: 18, border: '2px solid var(--border-primary)', borderTopColor: 'var(--text-primary)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 6px' }} />
-              </div>
-            ) : weather ? (
-              <div>
-                {/* Summary row */}
-                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
-                  <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                    <WIcon main={weather.main} size={20} />
-                  </div>
-                  <div style={{ flex: 1, display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
-                    <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
-                      {weather.type === 'climate' ? 'Ø ' : ''}{cTemp(weather.temp, isFahrenheit)}{unit}
-                    </span>
-                    {weather.temp_max != null && (
-                      <span style={{ fontSize: 12, color: 'var(--text-faint)' }}>
-                        {cTemp(weather.temp_min, isFahrenheit)}° / {cTemp(weather.temp_max, isFahrenheit)}°
-                      </span>
-                    )}
-                    {weather.description && (
-                      <span style={{ fontSize: 12, color: 'var(--text-muted)', textTransform: 'capitalize' }}>{weather.description}</span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Chips row */}
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: weather.hourly ? 10 : 0 }}>
-                  {weather.precipitation_probability_max != null && (
-                    <Chip icon={Droplets} value={`${weather.precipitation_probability_max}%`} />
-                  )}
-                  {weather.precipitation_sum > 0 && (
-                    <Chip icon={CloudRain} value={`${weather.precipitation_sum.toFixed(1)} mm`} />
-                  )}
-                  {weather.wind_max != null && (
-                    <Chip icon={Wind} value={isFahrenheit ? `${Math.round(weather.wind_max * 0.621371)} mph` : `${Math.round(weather.wind_max)} km/h`} />
-                  )}
-                  {weather.sunrise && <Chip icon={Sunrise} value={weather.sunrise} />}
-                  {weather.sunset && <Chip icon={Sunset} value={weather.sunset} />}
-                </div>
-
-                {/* Hourly scroll */}
-                {weather.hourly?.length > 0 && (
-                  <div style={{ overflowX: 'auto', margin: '0 -6px', padding: '0 6px 4px' }}>
-                    <div style={{ display: 'inline-flex', gap: 2 }}>
-                      {weather.hourly.filter((_, i) => i % 2 === 0).map(h => (
-                        <div key={h.hour} style={{
-                          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
-                          width: 44, padding: '5px 2px', borderRadius: 8,
-                          background: h.precipitation_probability > 50 ? 'rgba(59,130,246,0.07)' : 'transparent',
-                        }}>
-                          <span style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500 }}>{String(h.hour).padStart(2, '0')}</span>
-                          <WIcon main={h.main} size={12} />
-                          <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-primary)' }}>{cTemp(h.temp, isFahrenheit)}°</span>
-                          {h.precipitation_probability > 0 && (
-                            <span style={{ fontSize: 8, color: '#3b82f6', fontWeight: 500 }}>{h.precipitation_probability}%</span>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {weather.type === 'climate' && (
-                  <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 6, fontStyle: 'italic' }}>{t('day.climateHint')}</div>
-                )}
-              </div>
-            ) : (
-              <div style={{ fontSize: 12, color: 'var(--text-faint)', textAlign: 'center', padding: 8 }}>{t('day.noWeather')}</div>
-            )
-          )}
-
-          {/* ── Reservations for this day's assignments ── */}
-          {(() => {
-            const dayAssignments = assignments[String(day.id)] || []
-            const dayReservations = reservations.filter(r => dayAssignments.some(a => a.id === r.assignment_id))
-            if (dayReservations.length === 0) return null
-            return (
-              <div style={{ marginBottom: 0 }}>
-                {day.date && lat && lng && <div style={{ height: 1, background: 'var(--border-faint)', margin: '12px 0' }} />}
-                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>{t('day.reservations')}</div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {dayReservations.map(r => {
-                    const linkedAssignment = dayAssignments.find(a => a.id === r.assignment_id)
-                    const confirmed = r.status === 'confirmed'
-                    return (
-                      <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8, background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.15)' : 'rgba(217,119,6,0.15)'}` }}>
-                        {(() => { const TIcon = RES_TYPE_ICONS[r.type] || FileText; return <TIcon size={12} style={{ color: RES_TYPE_COLORS[r.type] || 'var(--text-faint)', flexShrink: 0 }} /> })()}
-                        <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6, overflow: 'hidden' }}>
-                          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</span>
-                          {linkedAssignment?.place && <span style={{ fontSize: 9, color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>· {linkedAssignment.place.name}</span>}
-                        </div>
-                        {r.reservation_time?.includes('T') && (
-                          <span style={{ fontSize: 10, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
-                            {new Date(r.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })}
-                            {r.reservation_end_time && ` – ${fmtTime(r.reservation_end_time)}`}
-                          </span>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            )
-          })()}
-
-          {/* Divider before accommodation */}
-          <div style={{ height: 1, background: 'var(--border-faint)', margin: '12px 0' }} />
-
-          {/* ── Accommodation ── */}
-          <div>
-            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>
-
-            {dayAccommodations.length > 0 ? (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                {dayAccommodations.map(acc => {
-                  const isCheckInDay = acc.start_day_id === day.id
-                  const isCheckOutDay = acc.end_day_id === day.id
-                  const isMiddleDay = !isCheckInDay && !isCheckOutDay
-                  const dayLabel = isCheckInDay && isCheckOutDay ? t('day.checkIn') + ' & ' + t('day.checkOut')
-                    : isCheckInDay ? t('day.checkIn')
-                    : isCheckOutDay ? t('day.checkOut')
-                    : null
-                  const linked = reservations.find(r => r.accommodation_id === acc.id)
-                  const confirmed = linked?.status === 'confirmed'
-
-                  return (
-                    <div key={acc.id} style={{ borderRadius: 12, background: 'var(--bg-secondary)', overflow: 'hidden' }}>
-                      {/* Day label */}
-                      {dayLabel && (
-                        <div style={{ padding: '4px 12px 0', display: 'flex', alignItems: 'center', gap: 4 }}>
-                          {isCheckInDay && <LogIn size={9} style={{ color: '#22c55e' }} />}
-                          {isCheckOutDay && !isCheckInDay && <LogOut size={9} style={{ color: '#ef4444' }} />}
-                          <span style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: isCheckOutDay && !isCheckInDay ? '#ef4444' : '#22c55e' }}>{dayLabel}</span>
-                        </div>
-                      )}
-                      {/* Hotel header */}
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px' }}>
-                        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                          {acc.place_image ? (
-                            <img src={acc.place_image} style={{ width: '100%', height: '100%', borderRadius: 10, objectFit: 'cover' }} />
-                          ) : (
-                            <Hotel size={16} style={{ color: 'var(--text-muted)' }} />
-                          )}
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_name}</div>
-                          {acc.place_address && <div style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_address}</div>}
-                        </div>
-                        {canEditDays && <button onClick={() => { setAccommodation(acc); setHotelForm({ check_in: acc.check_in || '', check_out: acc.check_out || '', confirmation: acc.confirmation || '', place_id: acc.place_id }); setHotelDayRange({ start: acc.start_day_id, end: acc.end_day_id }); setShowHotelPicker('edit') }}
-                          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
-                          <Pencil size={12} style={{ color: 'var(--text-faint)' }} />
-                        </button>}
-                        {canEditDays && <button onClick={() => { setAccommodation(acc); handleRemoveAccommodation() }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
-                          <X size={12} style={{ color: 'var(--text-faint)' }} />
-                        </button>}
-                      </div>
-                      {/* Details grid */}
-                      <div style={{ display: 'flex', gap: 0, margin: '0 12px 8px', borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border-faint)' }}>
-                        {acc.check_in && (
-                          <div style={{ flex: 1, padding: '8px 10px', borderRight: '1px solid var(--border-faint)', textAlign: 'center' }}>
-                            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{fmtTime(acc.check_in)}</div>
-                            <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
-                              <LogIn size={8} /> {t('day.checkIn')}
-                            </div>
-                          </div>
-                        )}
-                        {acc.check_out && (
-                          <div style={{ flex: 1, padding: '8px 10px', borderRight: acc.confirmation ? '1px solid var(--border-faint)' : 'none', textAlign: 'center' }}>
-                            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{fmtTime(acc.check_out)}</div>
-                            <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
-                              <LogOut size={8} /> {t('day.checkOut')}
-                            </div>
-                          </div>
-                        )}
-                        {acc.confirmation && (
-                          <div style={{ flex: 1, padding: '8px 10px', textAlign: 'center' }}>
-                            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{acc.confirmation}</div>
-                            <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
-                              <Hash size={8} /> {t('day.confirmation')}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                      {/* Linked booking */}
-                      {linked && (
-                        <div style={{ margin: '0 12px 8px', padding: '6px 10px', borderRadius: 8, background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.15)' : 'rgba(217,119,6,0.15)'}`, display: 'flex', alignItems: 'center', gap: 8 }}>
-                          <div style={{ width: 6, height: 6, borderRadius: '50%', background: confirmed ? '#16a34a' : '#d97706', flexShrink: 0 }} />
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.title}</div>
-                            <div style={{ fontSize: 9, color: 'var(--text-faint)', display: 'flex', gap: 6, marginTop: 1 }}>
-                              <span>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                              {linked.confirmation_number && <span
-                                onMouseEnter={e => { if (blurCodes) e.currentTarget.style.filter = 'none' }}
-                                onMouseLeave={e => { if (blurCodes) e.currentTarget.style.filter = 'blur(4px)' }}
-                                onClick={e => { if (blurCodes) { const el = e.currentTarget; el.style.filter = el.style.filter === 'none' ? 'blur(4px)' : 'none' } }}
-                                style={{ filter: blurCodes ? 'blur(4px)' : 'none', transition: 'filter 0.2s', cursor: blurCodes ? 'pointer' : 'default' }}
-                              >#{linked.confirmation_number}</span>}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )
-                })}
-                {/* Add another hotel */}
-                {canEditDays && <button onClick={() => setShowHotelPicker(true)} style={{
-                  width: '100%', padding: 8, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
-                  background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-                  fontSize: 10, color: 'var(--text-faint)', fontFamily: 'inherit',
-                }}>
-                  <Hotel size={10} /> {t('day.addAccommodation')}
-                </button>}
-              </div>
-            ) : (
-              canEditDays ? <button onClick={() => setShowHotelPicker(true)} style={{
-                width: '100%', padding: 10, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
-                background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-                fontSize: 11, color: 'var(--text-faint)', fontFamily: 'inherit',
-              }}>
-                <Hotel size={12} /> {t('day.addAccommodation')}
-              </button> : null
-            )}
-
-            {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
-            {showHotelPicker && ReactDOM.createPortal(
-              <div style={{ position: 'fixed', inset: 0, zIndex: 99999, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-                onClick={() => setShowHotelPicker(false)}>
-                <div onClick={e => e.stopPropagation()} style={{
-                  width: '100%', maxWidth: 900, borderRadius: 16, overflow: 'hidden',
-                  background: 'var(--bg-card)', boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-                  ...font,
-                }}>
-                  {/* Popup Header */}
-                  <div style={{ padding: '16px 18px 12px', borderBottom: '1px solid var(--border-faint)', display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <Hotel size={16} style={{ color: 'var(--text-primary)' }} />
-                    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', flex: 1 }}>{showHotelPicker === 'edit' ? t('day.editAccommodation') : t('day.addAccommodation')}</span>
-                    <button onClick={() => setShowHotelPicker(false)} style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 8, width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
-                      <X size={12} style={{ color: 'var(--text-muted)' }} />
-                    </button>
-                  </div>
-
-                  {/* Day Range */}
-                  <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-faint)', background: 'var(--bg-secondary)' }}>
-                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{t('day.hotelDayRange')}</div>
-                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <CustomSelect
-                          value={hotelDayRange.start}
-                          onChange={v => setHotelDayRange(prev => ({ start: v, end: Math.max(v, prev.end) }))}
-                          options={days.map((d, i) => ({
-                            value: d.id,
-                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })}` : ''}`,
-                          }))}
-                          size="sm"
-                        />
-                      </div>
-                      <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>→</span>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <CustomSelect
-                          value={hotelDayRange.end}
-                          onChange={v => setHotelDayRange(prev => ({ start: Math.min(prev.start, v), end: v }))}
-                          options={days.map((d, i) => ({
-                            value: d.id,
-                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })}` : ''}`,
-                          }))}
-                          size="sm"
-                        />
-                      </div>
-                      <button onClick={() => setHotelDayRange({ start: days[0]?.id, end: days[days.length - 1]?.id })} style={{
-                        padding: '6px 14px', borderRadius: 8, border: 'none', fontSize: 11, fontWeight: 600, cursor: 'pointer', flexShrink: 0,
-                        background: hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id ? 'var(--text-primary)' : 'var(--bg-card)',
-                        color: hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id ? 'var(--bg-card)' : 'var(--text-muted)',
-                      }}>
-                        {t('day.allDays')}
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Check-in / Check-out / Confirmation */}
-                  <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-                    <div style={{ flex: 1, minWidth: 100 }}>
-                      <label style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkIn')}</label>
-                      <CustomTimePicker value={hotelForm.check_in} onChange={v => setHotelForm(f => ({ ...f, check_in: v }))} placeholder="14:00" />
-                    </div>
-                    <div style={{ flex: 1, minWidth: 100 }}>
-                      <label style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkOut')}</label>
-                      <CustomTimePicker value={hotelForm.check_out} onChange={v => setHotelForm(f => ({ ...f, check_out: v }))} placeholder="11:00" />
-                    </div>
-                    <div style={{ flex: 2, minWidth: 120 }}>
-                      <label style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.confirmation')}</label>
-                      <input type="text" value={hotelForm.confirmation} onChange={e => setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
-                        placeholder="ABC-12345" style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box', height: 38 }} />
-                    </div>
-                  </div>
-
-                  {/* Category Filter */}
-                  {categories.length > 0 && (
-                    <div style={{ padding: '8px 18px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-                      <button onClick={() => setHotelCategoryFilter('')} style={{
-                        padding: '3px 10px', borderRadius: 6, border: 'none', fontSize: 10, fontWeight: 600, cursor: 'pointer',
-                        background: !hotelCategoryFilter ? 'var(--text-primary)' : 'var(--bg-secondary)',
-                        color: !hotelCategoryFilter ? 'var(--bg-card)' : 'var(--text-muted)',
-                      }}>{t('day.allDays')}</button>
-
-                      {categories.map(c => (
-                        <button key={c.id} onClick={() => setHotelCategoryFilter(c.id)} style={{
-                          padding: '3px 10px', borderRadius: 6, border: 'none', fontSize: 10, fontWeight: 600, cursor: 'pointer',
-                          background: hotelCategoryFilter === c.id ? c.color || 'var(--text-primary)' : 'var(--bg-secondary)',
-                          color: hotelCategoryFilter === c.id ? '#fff' : 'var(--text-muted)',
-                        }}>{c.name}</button>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Place List */}
-                  <div style={{ maxHeight: 250, overflowY: 'auto' }}>
-                    {(() => {
-                      const filtered = hotelCategoryFilter ? places.filter(p => p.category_id === hotelCategoryFilter) : places
-                      return filtered.length === 0 ? (
-                        <div style={{ padding: 20, textAlign: 'center', fontSize: 12, color: 'var(--text-faint)' }}>{t('day.noPlacesForHotel')}</div>
-                      ) : filtered.map(p => (
-                      <button key={p.id} onClick={() => handleSelectPlace(p.id)} style={{
-                        display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 18px',
-                        border: 'none', borderBottom: '1px solid var(--border-faint)',
-                        background: hotelForm.place_id === p.id ? 'var(--bg-hover)' : 'none',
-                        cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
-                        transition: 'background 0.1s',
-                        outline: hotelForm.place_id === p.id ? '2px solid var(--accent)' : 'none',
-                        outlineOffset: -2, borderRadius: hotelForm.place_id === p.id ? 8 : 0,
-                      }}
-                        onMouseEnter={e => { if (hotelForm.place_id !== p.id) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                        onMouseLeave={e => { if (hotelForm.place_id !== p.id) e.currentTarget.style.background = 'none' }}
-                      >
-                        <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                          {p.image_url ? (
-                            <img src={p.image_url} style={{ width: '100%', height: '100%', borderRadius: 8, objectFit: 'cover' }} />
-                          ) : (
-                            <MapPin size={13} style={{ color: 'var(--text-faint)' }} />
-                          )}
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
-                          {p.address && <div style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.address}</div>}
-                        </div>
-                      </button>
-                    ))
-                    })()}
-                  </div>
-
-                {/* Save / Cancel */}
-                <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border-faint)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-                  <button onClick={() => setShowHotelPicker(false)} style={{ padding: '7px 16px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-                    {t('common.cancel')}
-                  </button>
-                  <button onClick={async () => {
-                    if (showHotelPicker === 'edit' && accommodation) {
-                      // Update existing
-                      await accommodationsApi.update(tripId, accommodation.id, {
-                        place_id: hotelForm.place_id,
-                        start_day_id: hotelDayRange.start,
-                        end_day_id: hotelDayRange.end,
-                        check_in: hotelForm.check_in || null,
-                        check_out: hotelForm.check_out || null,
-                        confirmation: hotelForm.confirmation || null,
-                      })
-                      setShowHotelPicker(false)
-                      setHotelForm({ check_in: '', check_out: '', confirmation: '', place_id: null })
-                      // Reload
-                      accommodationsApi.list(tripId).then(d => {
-                        const all = d.accommodations || []
-                        setAccommodations(all)
-                        setDayAccommodations(all.filter(a =>
-                          days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id)
-                        ))
-                        const acc = all.find(a => days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id))
-                        setAccommodation(acc || null)
-                      })
-                      onAccommodationChange?.()
-                    } else {
-                      await handleSaveAccommodation()
-                    }
-                  }} disabled={!hotelForm.place_id} style={{
-                    padding: '7px 20px', borderRadius: 8, border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-                    background: hotelForm.place_id ? 'var(--text-primary)' : 'var(--bg-tertiary)',
-                    color: hotelForm.place_id ? 'var(--bg-card)' : 'var(--text-faint)',
-                  }}>
-                    {t('common.save')}
-                  </button>
-                </div>
-
-                </div>
-              </div>,
-              document.body
-            )}
-          </div>
-        </div>
-      </div>
-      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-    </div>
-  )
-}
-
-interface ChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  value: string
-}
-
-function Chip({ icon: Icon, value }: ChipProps) {
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
-      <span style={{ fontWeight: 500 }}>{value}</span>
-    </div>
-  )
-}
-
-interface InfoChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  label: string
-  value: string
-  placeholder: string
-  onEdit: (value: string) => void
-  type: 'text' | 'time'
-}
-
-function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
-  const [editing, setEditing] = React.useState(false)
-  const [val, setVal] = React.useState(value || '')
-  const inputRef = React.useRef(null)
-
-  React.useEffect(() => { setVal(value || '') }, [value])
-  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
-
-  const save = () => {
-    setEditing(false)
-    if (val !== (value || '')) onEdit(val)
-  }
-
-  return (
-    <div
-      onClick={() => setEditing(true)}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
-        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
-        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
-      }}
-    >
-      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-      <div style={{ minWidth: 0 }}>
-        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
-        {editing ? (
-          <input
-            ref={inputRef}
-            type={type}
-            value={val}
-            onChange={e => setVal(e.target.value)}
-            onBlur={save}
-            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
-            onClick={e => e.stopPropagation()}
-            style={{
-              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
-              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
-              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
-            }}
-          />
-        ) : (
-          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {value || placeholder}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

client/src/components/Planner/PlaceFormModal.tsx

@@ -1,512 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
-import Modal from '../shared/Modal'
-import CustomSelect from '../shared/CustomSelect'
-import { mapsApi } from '../../api/client'
-import { useAuthStore } from '../../store/authStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTripStore } from '../../store/tripStore'
-import { useToast } from '../shared/Toast'
-import { Search, Paperclip, X, AlertTriangle } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import CustomTimePicker from '../shared/CustomTimePicker'
-import type { Place, Category, Assignment } from '../../types'
-
-interface PlaceFormData {
-  name: string
-  description: string
-  address: string
-  lat: string
-  lng: string
-  category_id: string
-  place_time: string
-  end_time: string
-  notes: string
-  transport_mode: string
-  website: string
-}
-
-const DEFAULT_FORM: PlaceFormData = {
-  name: '',
-  description: '',
-  address: '',
-  lat: '',
-  lng: '',
-  category_id: '',
-  place_time: '',
-  end_time: '',
-  notes: '',
-  transport_mode: 'walking',
-  website: '',
-}
-
-interface PlaceFormModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onSave: (data: PlaceFormData, files?: File[]) => Promise<void> | void
-  place: Place | null
-  prefillCoords?: { lat: number; lng: number; name?: string; address?: string } | null
-  tripId: number
-  categories: Category[]
-  onCategoryCreated: (category: Category) => void
-  assignmentId: number | null
-  dayAssignments?: Assignment[]
-}
-
-export default function PlaceFormModal({
-  isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
-  onCategoryCreated, assignmentId, dayAssignments = [],
-}: PlaceFormModalProps) {
-  const [form, setForm] = useState(DEFAULT_FORM)
-  const [mapsSearch, setMapsSearch] = useState('')
-  const [mapsResults, setMapsResults] = useState([])
-  const [isSearchingMaps, setIsSearchingMaps] = useState(false)
-  const [newCategoryName, setNewCategoryName] = useState('')
-  const [showNewCategory, setShowNewCategory] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
-  const [pendingFiles, setPendingFiles] = useState([])
-  const fileRef = useRef(null)
-  const toast = useToast()
-  const { t, language } = useTranslation()
-  const { hasMapsKey } = useAuthStore()
-  const can = useCanDo()
-  const tripObj = useTripStore((s) => s.trip)
-  const canUploadFiles = can('file_upload', tripObj)
-
-  useEffect(() => {
-    if (place) {
-      setForm({
-        name: place.name || '',
-        description: place.description || '',
-        address: place.address || '',
-        lat: place.lat || '',
-        lng: place.lng || '',
-        category_id: place.category_id || '',
-        place_time: place.place_time || '',
-        end_time: place.end_time || '',
-        notes: place.notes || '',
-        transport_mode: place.transport_mode || 'walking',
-        website: place.website || '',
-      })
-    } else if (prefillCoords) {
-      setForm({
-        ...DEFAULT_FORM,
-        lat: String(prefillCoords.lat),
-        lng: String(prefillCoords.lng),
-        name: prefillCoords.name || '',
-        address: prefillCoords.address || '',
-      })
-    } else {
-      setForm(DEFAULT_FORM)
-    }
-    setPendingFiles([])
-  }, [place, prefillCoords, isOpen])
-
-  const handleChange = (field, value) => {
-    setForm(prev => ({ ...prev, [field]: value }))
-  }
-
-  const handleMapsSearch = async () => {
-    if (!mapsSearch.trim()) return
-    setIsSearchingMaps(true)
-    try {
-      // Detect Google Maps URLs and resolve them directly
-      const trimmed = mapsSearch.trim()
-      if (trimmed.match(/^https?:\/\/(www\.)?(google\.[a-z.]+\/maps|maps\.google\.[a-z.]+|maps\.app\.goo\.gl|goo\.gl)/i)) {
-        const resolved = await mapsApi.resolveUrl(trimmed)
-        if (resolved.lat && resolved.lng) {
-          setForm(prev => ({
-            ...prev,
-            name: resolved.name || prev.name,
-            address: resolved.address || prev.address,
-            lat: String(resolved.lat),
-            lng: String(resolved.lng),
-          }))
-          setMapsResults([])
-          setMapsSearch('')
-          toast.success(t('places.urlResolved'))
-          return
-        }
-      }
-      const result = await mapsApi.search(mapsSearch, language)
-      setMapsResults(result.places || [])
-    } catch (err: unknown) {
-      toast.error(t('places.mapsSearchError'))
-    } finally {
-      setIsSearchingMaps(false)
-    }
-  }
-
-  const handleSelectMapsResult = (result) => {
-    setForm(prev => ({
-      ...prev,
-      name: result.name || prev.name,
-      address: result.address || prev.address,
-      lat: result.lat || prev.lat,
-      lng: result.lng || prev.lng,
-      google_place_id: result.google_place_id || prev.google_place_id,
-      osm_id: result.osm_id || prev.osm_id,
-      website: result.website || prev.website,
-      phone: result.phone || prev.phone,
-    }))
-    setMapsResults([])
-    setMapsSearch('')
-  }
-
-  const handleCreateCategory = async () => {
-    if (!newCategoryName.trim()) return
-    try {
-      const cat = await onCategoryCreated?.({ name: newCategoryName, color: '#6366f1', icon: 'MapPin' })
-      if (cat) setForm(prev => ({ ...prev, category_id: cat.id }))
-      setNewCategoryName('')
-      setShowNewCategory(false)
-    } catch (err: unknown) {
-      toast.error(t('places.categoryCreateError'))
-    }
-  }
-
-  const handleFileAdd = (e) => {
-    const files = Array.from((e.target as HTMLInputElement).files || [])
-    setPendingFiles(prev => [...prev, ...files])
-    e.target.value = ''
-  }
-
-  const handleRemoveFile = (idx) => {
-    setPendingFiles(prev => prev.filter((_, i) => i !== idx))
-  }
-
-  // Paste support for files/images
-  const handlePaste = (e) => {
-    if (!canUploadFiles) return
-    const items = e.clipboardData?.items
-    if (!items) return
-    for (const item of Array.from(items)) {
-      if (item.type.startsWith('image/') || item.type === 'application/pdf') {
-        e.preventDefault()
-        const file = item.getAsFile()
-        if (file) setPendingFiles(prev => [...prev, file])
-        return
-      }
-    }
-  }
-
-  const hasTimeError = place && form.place_time && form.end_time && form.place_time.length >= 5 && form.end_time.length >= 5 && form.end_time <= form.place_time
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (!form.name.trim()) {
-      toast.error(t('places.nameRequired'))
-      return
-    }
-    setIsSaving(true)
-    try {
-      await onSave({
-        ...form,
-        lat: form.lat ? parseFloat(form.lat) : null,
-        lng: form.lng ? parseFloat(form.lng) : null,
-        category_id: form.category_id || null,
-        _pendingFiles: pendingFiles.length > 0 ? pendingFiles : undefined,
-      })
-      onClose()
-    } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : t('places.saveError'))
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title={place ? t('places.editPlace') : t('places.addPlace')}
-      size="lg"
-    >
-      <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
-        {/* Place Search */}
-        <div className="bg-slate-50 rounded-xl p-3 border border-slate-200">
-          {!hasMapsKey && (
-            <p className="mb-2 text-xs" style={{ color: 'var(--text-faint)' }}>
-              {t('places.osmActive')}
-            </p>
-          )}
-          <div className="flex gap-2">
-            <input
-              type="text"
-              value={mapsSearch}
-              onChange={e => setMapsSearch(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), handleMapsSearch())}
-              placeholder={t('places.mapsSearchPlaceholder')}
-              className="flex-1 border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 bg-white"
-            />
-            <button
-              type="button"
-              onClick={handleMapsSearch}
-              disabled={isSearchingMaps}
-              className="bg-slate-900 text-white px-3 py-1.5 rounded-lg text-sm hover:bg-slate-700 disabled:opacity-60"
-            >
-              {isSearchingMaps ? '...' : <Search className="w-4 h-4" />}
-            </button>
-          </div>
-          {mapsResults.length > 0 && (
-            <div className="bg-white rounded-lg border border-slate-200 overflow-hidden max-h-40 overflow-y-auto mt-2">
-              {mapsResults.map((result, idx) => (
-                <button
-                  key={idx}
-                  type="button"
-                  onClick={() => handleSelectMapsResult(result)}
-                  className="w-full text-left px-3 py-2 hover:bg-slate-50 border-b border-slate-100 last:border-0"
-                >
-                  <div className="font-medium text-sm">{result.name}</div>
-                  <div className="text-xs text-slate-500 truncate">{result.address}</div>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Name */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formName')} *</label>
-          <input
-            type="text"
-            value={form.name}
-            onChange={e => handleChange('name', e.target.value)}
-            required
-            placeholder={t('places.formNamePlaceholder')}
-            className="form-input"
-          />
-        </div>
-
-        {/* Description */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formDescription')}</label>
-          <textarea
-            value={form.description}
-            onChange={e => handleChange('description', e.target.value)}
-            rows={2}
-            placeholder={t('places.formDescriptionPlaceholder')}
-            className="form-input" style={{ resize: 'none' }}
-          />
-        </div>
-
-        {/* Address + Coordinates */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formAddress')}</label>
-          <input
-            type="text"
-            value={form.address}
-            onChange={e => handleChange('address', e.target.value)}
-            placeholder={t('places.formAddressPlaceholder')}
-            className="form-input"
-          />
-          <div className="grid grid-cols-2 gap-2 mt-2">
-            <input
-              type="number"
-              step="any"
-              value={form.lat}
-              onChange={e => handleChange('lat', e.target.value)}
-              onPaste={e => {
-                const text = e.clipboardData.getData('text').trim()
-                const match = text.match(/^(-?\d+\.?\d*)\s*[,;\s]\s*(-?\d+\.?\d*)$/)
-                if (match) {
-                  e.preventDefault()
-                  handleChange('lat', match[1])
-                  handleChange('lng', match[2])
-                }
-              }}
-              placeholder={t('places.formLat')}
-              className="form-input"
-            />
-            <input
-              type="number"
-              step="any"
-              value={form.lng}
-              onChange={e => handleChange('lng', e.target.value)}
-              placeholder={t('places.formLng')}
-              className="form-input"
-            />
-          </div>
-        </div>
-
-        {/* Category */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formCategory')}</label>
-          {!showNewCategory ? (
-            <div className="flex gap-2">
-              <CustomSelect
-                value={form.category_id}
-                onChange={value => handleChange('category_id', value)}
-                placeholder={t('places.noCategory')}
-                options={[
-                  { value: '', label: t('places.noCategory') },
-                  ...(categories || []).map(c => ({
-                    value: c.id,
-                    label: c.name,
-                  })),
-                ]}
-                style={{ flex: 1 }}
-                size="sm"
-              />
-            </div>
-          ) : (
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={newCategoryName}
-                onChange={e => setNewCategoryName(e.target.value)}
-                placeholder={t('places.categoryNamePlaceholder')}
-                className="form-input" style={{ flex: 1 }}
-              />
-              <button type="button" onClick={handleCreateCategory} className="bg-slate-900 text-white px-3 rounded-lg hover:bg-slate-700 text-sm">
-                OK
-              </button>
-              <button type="button" onClick={() => setShowNewCategory(false)} className="text-gray-500 px-2 text-sm">
-                {t('common.cancel')}
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* Time — only shown when editing, not when creating */}
-        {place && (
-          <TimeSection
-            form={form}
-            handleChange={handleChange}
-            assignmentId={assignmentId}
-            dayAssignments={dayAssignments}
-            hasTimeError={hasTimeError}
-            t={t}
-          />
-        )}
-
-        {/* Website */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.formWebsite')}</label>
-          <input
-            type="url"
-            value={form.website}
-            onChange={e => handleChange('website', e.target.value)}
-            placeholder="https://..."
-            className="form-input"
-          />
-        </div>
-
-        {/* File Attachments */}
-        {canUploadFiles && (
-          <div className="border border-gray-200 rounded-xl p-3 space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="block text-sm font-medium text-gray-700">{t('files.title')}</label>
-              <button type="button" onClick={() => fileRef.current?.click()}
-                className="flex items-center gap-1 text-xs text-slate-500 hover:text-slate-700 transition-colors">
-                <Paperclip size={12} /> {t('files.attach')}
-              </button>
-            </div>
-            <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileAdd} />
-            {pendingFiles.length > 0 && (
-              <div className="space-y-1">
-                {pendingFiles.map((file, idx) => (
-                  <div key={idx} className="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-slate-50 text-xs">
-                    <Paperclip size={10} className="text-slate-400 shrink-0" />
-                    <span className="truncate flex-1 text-slate-600">{file.name}</span>
-                    <button type="button" onClick={() => handleRemoveFile(idx)} className="text-slate-400 hover:text-red-500 shrink-0">
-                      <X size={12} />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-            {pendingFiles.length === 0 && (
-              <p className="text-xs text-slate-400">{t('files.pasteHint')}</p>
-            )}
-          </div>
-        )}
-
-        {/* Actions */}
-        <div className="flex justify-end gap-3 pt-2 border-t border-gray-100">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            type="submit"
-            disabled={isSaving || hasTimeError}
-            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
-          >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
-          </button>
-        </div>
-      </form>
-    </Modal>
-  )
-}
-
-interface TimeSectionProps {
-  form: PlaceFormData
-  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void
-  assignmentId: number | null
-  dayAssignments: Assignment[]
-  hasTimeError: boolean
-  t: (key: string, params?: Record<string, string | number>) => string
-}
-
-function TimeSection({ form, handleChange, assignmentId, dayAssignments, hasTimeError, t }: TimeSectionProps) {
-
-  const collisions = useMemo(() => {
-    if (!assignmentId || !form.place_time || form.place_time.length < 5) return []
-    // Find the day_id for the current assignment
-    const current = dayAssignments.find(a => a.id === assignmentId)
-    if (!current) return []
-    const myStart = form.place_time
-    const myEnd = form.end_time && form.end_time.length >= 5 ? form.end_time : null
-    return dayAssignments.filter(a => {
-      if (a.id === assignmentId) return false
-      if (a.day_id !== current.day_id) return false
-      const aStart = a.place?.place_time
-      const aEnd = a.place?.end_time
-      if (!aStart) return false
-      // Check overlap: two intervals overlap if start < otherEnd AND otherStart < end
-      const s1 = myStart, e1 = myEnd || myStart
-      const s2 = aStart, e2 = aEnd || aStart
-      return s1 < (e2 || '23:59') && s2 < (e1 || '23:59') && s1 !== e2 && s2 !== e1
-    })
-  }, [assignmentId, dayAssignments, form.place_time, form.end_time])
-
-  return (
-    <div>
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.startTime')}</label>
-          <CustomTimePicker
-            value={form.place_time}
-            onChange={v => handleChange('place_time', v)}
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">{t('places.endTime')}</label>
-          <CustomTimePicker
-            value={form.end_time}
-            onChange={v => handleChange('end_time', v)}
-          />
-        </div>
-      </div>
-      {hasTimeError && (
-        <div className="flex items-center gap-1.5 mt-2 px-2.5 py-1.5 rounded-lg text-xs" style={{ background: 'var(--bg-warning, #fef3c7)', color: 'var(--text-warning, #92400e)' }}>
-          <AlertTriangle size={13} className="shrink-0" />
-          {t('places.endTimeBeforeStart')}
-        </div>
-      )}
-      {collisions.length > 0 && (
-        <div className="flex items-start gap-1.5 mt-2 px-2.5 py-1.5 rounded-lg text-xs" style={{ background: 'var(--bg-warning, #fef3c7)', color: 'var(--text-warning, #92400e)' }}>
-          <AlertTriangle size={13} className="shrink-0 mt-0.5" />
-          <span>
-            {t('places.timeCollision')}{' '}
-            {collisions.map(a => a.place?.name).filter(Boolean).join(', ')}
-          </span>
-        </div>
-      )}
-    </div>
-  )
-}

client/src/components/Planner/PlaceInspector.tsx

@@ -1,813 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { getAuthUrl } from '../../api/authUrl'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { X, Clock, MapPin, ExternalLink, Phone, Euro, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Users, Mountain, TrendingUp } from 'lucide-react'
-import PlaceAvatar from '../shared/PlaceAvatar'
-import { mapsApi } from '../../api/client'
-import { useSettingsStore } from '../../store/settingsStore'
-import { getCategoryIcon } from '../shared/categoryIcons'
-import { useTranslation } from '../../i18n'
-import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
-
-const detailsCache = new Map()
-
-function getSessionCache(key) {
-  try {
-    const raw = sessionStorage.getItem(key)
-    return raw ? JSON.parse(raw) : undefined
-  } catch { return undefined }
-}
-
-function setSessionCache(key, value) {
-  try { sessionStorage.setItem(key, JSON.stringify(value)) } catch {}
-}
-
-function usePlaceDetails(googlePlaceId, osmId, language) {
-  const [details, setDetails] = useState(null)
-  const detailId = googlePlaceId || osmId
-  const cacheKey = `gdetails_${detailId}_${language}`
-  useEffect(() => {
-    if (!detailId) { setDetails(null); return }
-    if (detailsCache.has(cacheKey)) { setDetails(detailsCache.get(cacheKey)); return }
-    const cached = getSessionCache(cacheKey)
-    if (cached) { detailsCache.set(cacheKey, cached); setDetails(cached); return }
-    mapsApi.details(detailId, language).then(data => {
-      detailsCache.set(cacheKey, data.place)
-      setSessionCache(cacheKey, data.place)
-      setDetails(data.place)
-    }).catch(() => {})
-  }, [detailId, language])
-  return details
-}
-
-function getWeekdayIndex(dateStr) {
-  // weekdayDescriptions[0] = Monday … [6] = Sunday
-  const d = dateStr ? new Date(dateStr + 'T12:00:00') : new Date()
-  const jsDay = d.getDay()
-  return jsDay === 0 ? 6 : jsDay - 1
-}
-
-function convertHoursLine(line, timeFormat) {
-  if (!line) return ''
-  const hasAmPm = /\d{1,2}:\d{2}\s*(AM|PM)/i.test(line)
-
-  if (timeFormat === '12h' && !hasAmPm) {
-    // 24h → 12h: "10:00" → "10:00 AM", "21:00" → "9:00 PM", "Uhr" entfernen
-    return line.replace(/\s*Uhr/g, '').replace(/(\d{1,2}):(\d{2})/g, (match, h, m) => {
-      const hour = parseInt(h)
-      if (isNaN(hour)) return match
-      const period = hour >= 12 ? 'PM' : 'AM'
-      const h12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
-      return `${h12}:${m} ${period}`
-    })
-  }
-  if (timeFormat !== '12h' && hasAmPm) {
-    // 12h → 24h: "10:00 AM" → "10:00", "9:00 PM" → "21:00"
-    return line.replace(/(\d{1,2}):(\d{2})\s*(AM|PM)/gi, (_, h, m, p) => {
-      let hour = parseInt(h)
-      if (p.toUpperCase() === 'PM' && hour !== 12) hour += 12
-      if (p.toUpperCase() === 'AM' && hour === 12) hour = 0
-      return `${String(hour).padStart(2, '0')}:${m}`
-    })
-  }
-  return line
-}
-
-function formatTime(timeStr, locale, timeFormat) {
-  if (!timeStr) return ''
-  try {
-    const parts = timeStr.split(':')
-    const h = Number(parts[0]) || 0
-    const m = Number(parts[1]) || 0
-    if (isNaN(h)) return timeStr
-    if (timeFormat === '12h') {
-      const period = h >= 12 ? 'PM' : 'AM'
-      const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-      return `${h12}:${String(m).padStart(2, '0')} ${period}`
-    }
-    const str = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
-    return locale?.startsWith('de') ? `${str} Uhr` : str
-  } catch { return timeStr }
-}
-
-
-function formatFileSize(bytes) {
-  if (!bytes) return ''
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-}
-
-interface TripMember {
-  id: number
-  username: string
-  avatar_url?: string | null
-}
-
-interface PlaceInspectorProps {
-  place: Place | null
-  categories: Category[]
-  days: Day[]
-  selectedDayId: number | null
-  selectedAssignmentId: number | null
-  assignments: AssignmentsMap
-  reservations?: Reservation[]
-  onClose: () => void
-  onEdit: () => void
-  onDelete: () => void
-  onAssignToDay: (placeId: number, dayId: number) => void
-  onRemoveAssignment: (assignmentId: number, dayId: number) => void
-  files: TripFile[]
-  onFileUpload?: (fd: FormData) => Promise<void>
-  tripMembers?: TripMember[]
-  onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
-  onUpdatePlace: (placeId: number, data: Partial<Place>) => void
-  leftWidth?: number
-  rightWidth?: number
-}
-
-export default function PlaceInspector({
-  place, categories, days, selectedDayId, selectedAssignmentId, assignments, reservations = [],
-  onClose, onEdit, onDelete, onAssignToDay, onRemoveAssignment,
-  files, onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace,
-  leftWidth = 0, rightWidth = 0,
-}: PlaceInspectorProps) {
-  const { t, locale, language } = useTranslation()
-  const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
-  const [hoursExpanded, setHoursExpanded] = useState(false)
-  const [filesExpanded, setFilesExpanded] = useState(false)
-  const [isUploading, setIsUploading] = useState(false)
-  const [editingName, setEditingName] = useState(false)
-  const [nameValue, setNameValue] = useState('')
-  const nameInputRef = useRef(null)
-  const fileInputRef = useRef(null)
-  const googleDetails = usePlaceDetails(place?.google_place_id, place?.osm_id, language)
-
-  const startNameEdit = () => {
-    if (!onUpdatePlace) return
-    setNameValue(place.name || '')
-    setEditingName(true)
-    setTimeout(() => nameInputRef.current?.focus(), 0)
-  }
-
-  const commitNameEdit = () => {
-    if (!editingName) return
-    const trimmed = nameValue.trim()
-    setEditingName(false)
-    if (!trimmed || trimmed === place.name) return
-    onUpdatePlace(place.id, { name: trimmed })
-  }
-
-  const handleNameKeyDown = (e) => {
-    if (e.key === 'Enter') { e.preventDefault(); commitNameEdit() }
-    if (e.key === 'Escape') setEditingName(false)
-  }
-
-  if (!place) return null
-
-  const category = categories?.find(c => c.id === place.category_id)
-  const dayAssignments = selectedDayId ? (assignments[String(selectedDayId)] || []) : []
-  const assignmentInDay = selectedDayId ? dayAssignments.find(a => a.place?.id === place.id) : null
-
-  const openingHours = googleDetails?.opening_hours || null
-  const openNow = googleDetails?.open_now ?? null
-  const selectedDay = days?.find(d => d.id === selectedDayId)
-  const weekdayIndex = getWeekdayIndex(selectedDay?.date)
-
-  const placeFiles = (files || []).filter(f => String(f.place_id) === String(place.id) || (f.linked_place_ids || []).includes(place.id))
-
-  const handleFileUpload = useCallback(async (e) => {
-    const selectedFiles = Array.from((e.target as HTMLInputElement).files || [])
-    if (!selectedFiles.length || !onFileUpload) return
-    setIsUploading(true)
-    try {
-      for (const file of selectedFiles) {
-        const fd = new FormData()
-        fd.append('file', file)
-        fd.append('place_id', place.id)
-        await onFileUpload(fd)
-      }
-      setFilesExpanded(true)
-    } catch (err: unknown) {
-      console.error('Upload failed', err)
-    } finally {
-      setIsUploading(false)
-      if (fileInputRef.current) fileInputRef.current.value = ''
-    }
-  }, [onFileUpload, place.id])
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        bottom: 20,
-        left: `calc(${leftWidth}px + (100% - ${leftWidth}px - ${rightWidth}px) / 2)`,
-        transform: 'translateX(-50%)',
-        width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`,
-        zIndex: 50,
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
-      }}
-    >
-      <div style={{
-        background: 'var(--bg-elevated)',
-        backdropFilter: 'blur(40px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
-        borderRadius: 20,
-        boxShadow: '0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06)',
-        overflow: 'hidden',
-        maxHeight: '60vh',
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
-        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
-          {/* Avatar with open/closed ring + tag */}
-          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
-            <div style={{
-              borderRadius: '50%', padding: 2.5,
-              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
-            }}>
-              <PlaceAvatar place={place} category={category} size={52} />
-            </div>
-            {openNow !== null && (
-              <span style={{
-                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
-                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
-                color: 'white',
-                background: openNow ? '#16a34a' : '#dc2626',
-                padding: '1.5px 7px', borderRadius: 99,
-                whiteSpace: 'nowrap',
-                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
-              }}>
-                {openNow ? t('inspector.opened') : t('inspector.closed')}
-              </span>
-            )}
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {editingName ? (
-                <input
-                  ref={nameInputRef}
-                  value={nameValue}
-                  onChange={e => setNameValue(e.target.value)}
-                  onBlur={commitNameEdit}
-                  onKeyDown={handleNameKeyDown}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
-                />
-              ) : (
-                <span
-                  onDoubleClick={startNameEdit}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
-                >{place.name}</span>
-              )}
-              {category && (() => {
-                const CatIcon = getCategoryIcon(category.icon)
-                return (
-                  <span style={{
-                    display: 'inline-flex', alignItems: 'center', gap: 4,
-                    fontSize: 11, fontWeight: 500,
-                    color: category.color || '#6b7280',
-                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
-                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
-                    padding: '2px 8px', borderRadius: 99,
-                  }}>
-                    <CatIcon size={10} />
-                    <span className="hidden sm:inline">{category.name}</span>
-                  </span>
-                )
-              })()}
-            </div>
-            {place.address && (
-              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
-                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
-              </div>
-            )}
-            {place.place_time && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
-                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
-              </div>
-            )}
-            {place.lat && place.lng && (
-              <div className="hidden sm:block" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
-                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
-              </div>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-hover)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-          >
-            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
-          </button>
-        </div>
-
-        {/* Content — scrollable */}
-        <div style={{ overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
-
-          {/* Info-Chips — hidden on mobile, shown on desktop */}
-          <div className="hidden sm:flex" style={{ flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
-            {googleDetails?.rating && (() => {
-              const shortReview = (googleDetails.reviews || []).find(r => r.text && r.text.length > 5)
-              return (
-                <Chip
-                  icon={<Star size={12} fill="#facc15" color="#facc15" />}
-                  text={<>
-                    {googleDetails.rating.toFixed(1)}
-                    {googleDetails.rating_count ? <span style={{ opacity: 0.5 }}> ({googleDetails.rating_count.toLocaleString(locale)})</span> : ''}
-                    {shortReview && <span className="hidden md:inline" style={{ opacity: 0.6, fontWeight: 400, fontStyle: 'italic', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> · „{shortReview.text}"</span>}
-                  </>}
-                  color="var(--text-secondary)" bg="var(--bg-hover)"
-                />
-              )
-            })()}
-            {place.price > 0 && (
-              <Chip icon={<Euro size={12} />} text={`${place.price} ${place.currency || '€'}`} color="#059669" bg="#ecfdf5" />
-            )}
-          </div>
-
-          {/* Telefon */}
-          {(place.phone || googleDetails?.phone) && (
-            <div style={{ display: 'flex', gap: 12 }}>
-              <a href={`tel:${place.phone || googleDetails.phone}`}
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', textDecoration: 'none' }}>
-                <Phone size={12} /> {place.phone || googleDetails.phone}
-              </a>
-            </div>
-          )}
-
-          {/* Description / Summary */}
-          {(place.description || place.notes || googleDetails?.summary) && (
-            <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px' }}>
-              <Markdown remarkPlugins={[remarkGfm]}>{place.description || place.notes || googleDetails?.summary || ''}</Markdown>
-            </div>
-          )}
-
-          {/* Reservation + Participants — side by side */}
-          {(() => {
-            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
-            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
-            const currentParticipants = assignment?.participants || []
-            const participantIds = currentParticipants.map(p => p.user_id)
-            const allJoined = currentParticipants.length === 0
-            const showParticipants = selectedAssignmentId && tripMembers.length > 1
-            if (!res && !showParticipants) return null
-            return (
-              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
-                {/* Reservation */}
-                {res && (() => {
-                  const confirmed = res.status === 'confirmed'
-                  return (
-                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: confirmed ? 'rgba(22,163,74,0.08)' : 'rgba(217,119,6,0.08)' }}>
-                        <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
-                        <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706' }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                        <span style={{ flex: 1 }} />
-                        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
-                      </div>
-                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                        {res.reservation_time && (
-                          <div>
-                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.date')}</div>
-                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{new Date((res.reservation_time.includes('T') ? res.reservation_time.split('T')[0] : res.reservation_time) + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
-                          </div>
-                        )}
-                        {res.reservation_time?.includes('T') && (
-                          <div>
-                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.time')}</div>
-                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>
-                              {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
-                              {res.reservation_end_time && ` – ${res.reservation_end_time}`}
-                            </div>
-                          </div>
-                        )}
-                        {res.confirmation_number && (
-                          <div>
-                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
-                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{res.confirmation_number}</div>
-                          </div>
-                        )}
-                      </div>
-                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4 }}><Markdown remarkPlugins={[remarkGfm]}>{res.notes}</Markdown></div>}
-                      {(() => {
-                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                        if (!meta || Object.keys(meta).length === 0) return null
-                        const parts: string[] = []
-                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
-                        else if (meta.flight_number) parts.push(meta.flight_number)
-                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
-                        if (meta.train_number) parts.push(meta.train_number)
-                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
-                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
-                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
-                        if (parts.length === 0) return null
-                        return <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{parts.join(' · ')}</div>
-                      })()}
-                    </div>
-                  )
-                })()}
-
-                {/* Participants */}
-                {showParticipants && (
-                  <ParticipantsBox
-                    tripMembers={tripMembers}
-                    participantIds={participantIds}
-                    allJoined={allJoined}
-                    onSetParticipants={onSetParticipants}
-                    selectedAssignmentId={selectedAssignmentId}
-                    selectedDayId={selectedDayId}
-                    t={t}
-                  />
-                )}
-              </div>
-            )
-          })()}
-
-          {/* Opening hours + Files — side by side on desktop only if both exist */}
-          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
-          {openingHours && openingHours.length > 0 && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <button
-                onClick={() => setHoursExpanded(h => !h)}
-                style={{
-                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <Clock size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
-                  </span>
-                </div>
-                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
-              </button>
-              {hoursExpanded && (
-                <div style={{ padding: '0 12px 10px' }}>
-                  {openingHours.map((line, i) => (
-                    <div key={i} style={{
-                      fontSize: 12, color: i === weekdayIndex ? 'var(--text-primary)' : 'var(--text-muted)',
-                      fontWeight: i === weekdayIndex ? 600 : 400,
-                      padding: '2px 0',
-                    }}>{convertHoursLine(line, timeFormat)}</div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-
-          {/* GPX Track stats */}
-          {place.route_geometry && (() => {
-            try {
-              const pts: number[][] = JSON.parse(place.route_geometry)
-              if (!pts || pts.length < 2) return null
-              const hasEle = pts[0].length >= 3
-
-              // Haversine distance
-              const toRad = (d: number) => d * Math.PI / 180
-              let totalDist = 0
-              for (let i = 1; i < pts.length; i++) {
-                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
-                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
-                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
-                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-              }
-              const distKm = totalDist / 1000
-
-              // Elevation stats
-              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
-              if (hasEle) {
-                for (let i = 0; i < pts.length; i++) {
-                  const e = pts[i][2]
-                  if (e < minEle) minEle = e
-                  if (e > maxEle) maxEle = e
-                  if (i > 0) {
-                    const diff = e - pts[i - 1][2]
-                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
-                  }
-                }
-              }
-
-              // Elevation profile SVG
-              const chartW = 280, chartH = 60
-              const elevations = hasEle ? pts.map(p => p[2]) : []
-              let pathD = ''
-              if (elevations.length > 1) {
-                const step = Math.max(1, Math.floor(elevations.length / chartW))
-                const sampled = elevations.filter((_, i) => i % step === 0)
-                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
-                const range = eMax - eMin || 1
-                pathD = sampled.map((e, i) => {
-                  const x = (i / (sampled.length - 1)) * chartW
-                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
-                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
-                }).join(' ')
-              }
-
-              return (
-                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <TrendingUp size={13} color="#9ca3af" />
-                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
-                  </div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                      <MapPin size={12} color="#3b82f6" />
-                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
-                    </div>
-                    {hasEle && (
-                      <>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#22c55e" />
-                          {Math.round(maxEle)} m
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#ef4444" />
-                          {Math.round(minEle)} m
-                        </div>
-                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {pathD && (
-                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                      <defs>
-                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
-                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
-                        </linearGradient>
-                      </defs>
-                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
-                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
-                    </svg>
-                  )}
-                </div>
-              )
-            } catch { return null }
-          })()}
-
-          {/* Files section */}
-          {(placeFiles.length > 0 || onFileUpload) && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
-                <button
-                  onClick={() => setFilesExpanded(f => !f)}
-                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
-                >
-                  <FileText size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
-                  </span>
-                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
-                </button>
-                {onFileUpload && (
-                  <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)', padding: '2px 6px', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
-                    {isUploading ? (
-                      <span style={{ fontSize: 11 }}>…</span>
-                    ) : (
-                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
-                    )}
-                  </label>
-                )}
-              </div>
-              {filesExpanded && placeFiles.length > 0 && (
-                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {placeFiles.map(f => (
-                    <button key={f.id} onClick={async () => { const u = await getAuthUrl(f.url, 'download'); window.open(u, '_blank', 'noopener noreferrer') }} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
-                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
-                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                      {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-          </div>
-
-        </div>
-
-        {/* Footer actions */}
-        <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border-faint)', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
-          {selectedDayId && (
-            assignmentInDay ? (
-              <ActionButton onClick={() => onRemoveAssignment(selectedDayId, assignmentInDay.id)} variant="ghost" icon={<Minus size={13} />}
-                label={<><span className="hidden sm:inline">{t('inspector.removeFromDay')}</span><span className="sm:hidden">Remove</span></>} />
-            ) : (
-              <ActionButton onClick={() => onAssignToDay(place.id)} variant="primary" icon={<Plus size={13} />} label={t('inspector.addToDay')} />
-            )
-          )}
-          {googleDetails?.google_maps_url && (
-            <ActionButton onClick={() => window.open(googleDetails.google_maps_url, '_blank')} variant="ghost" icon={<Navigation size={13} />}
-              label={<span className="hidden sm:inline">{t('inspector.google')}</span>} />
-          )}
-          {!googleDetails?.google_maps_url && place.lat && place.lng && (
-            <ActionButton onClick={() => window.open(`https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`, '_blank')} variant="ghost" icon={<Navigation size={13} />}
-              label={<span className="hidden sm:inline">Google Maps</span>} />
-          )}
-          {(place.website || googleDetails?.website) && (
-            <ActionButton onClick={() => window.open(place.website || googleDetails?.website, '_blank')} variant="ghost" icon={<ExternalLink size={13} />}
-              label={<span className="hidden sm:inline">{t('inspector.website')}</span>} />
-          )}
-          <div style={{ flex: 1 }} />
-          <ActionButton onClick={onEdit} variant="ghost" icon={<Edit2 size={13} />} label={<span className="hidden sm:inline">{t('common.edit')}</span>} />
-          <ActionButton onClick={onDelete} variant="danger" icon={<Trash2 size={13} />} label={<span className="hidden sm:inline">{t('common.delete')}</span>} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface ChipProps {
-  icon: React.ReactNode
-  text: React.ReactNode
-  color?: string
-  bg?: string
-}
-
-function Chip({ icon, text, color = 'var(--text-secondary)', bg = 'var(--bg-hover)' }: ChipProps) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 9px', borderRadius: 99, background: bg, color, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
-      <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>
-      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</span>
-    </div>
-  )
-}
-
-interface RowProps {
-  icon: React.ReactNode
-  children: React.ReactNode
-}
-
-function Row({ icon, children }: RowProps) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-      <div style={{ flexShrink: 0 }}>{icon}</div>
-      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
-    </div>
-  )
-}
-
-interface ActionButtonProps {
-  onClick: () => void
-  variant: 'primary' | 'ghost' | 'danger'
-  icon: React.ReactNode
-  label: React.ReactNode
-}
-
-function ActionButton({ onClick, variant, icon, label }: ActionButtonProps) {
-  const base = {
-    primary: { background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', hoverBg: 'var(--text-secondary)' },
-    ghost: { background: 'var(--bg-hover)', color: 'var(--text-secondary)', border: 'none', hoverBg: 'var(--bg-tertiary)' },
-    danger: { background: 'rgba(239,68,68,0.08)', color: '#dc2626', border: 'none', hoverBg: 'rgba(239,68,68,0.16)' },
-  }
-  const s = base[variant] || base.ghost
-  return (
-    <button
-      onClick={onClick}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 5,
-        padding: '6px 12px', borderRadius: 10, minHeight: 30,
-        fontSize: 12, fontWeight: 500, cursor: 'pointer',
-        fontFamily: 'inherit', transition: 'background 0.15s, opacity 0.15s',
-        background: s.background, color: s.color, border: s.border,
-      }}
-      onMouseEnter={e => e.currentTarget.style.background = s.hoverBg}
-      onMouseLeave={e => e.currentTarget.style.background = s.background}
-    >
-      {icon}{label}
-    </button>
-  )
-}
-
-interface ParticipantsBoxProps {
-  tripMembers: TripMember[]
-  participantIds: number[]
-  allJoined: boolean
-  onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
-  selectedAssignmentId: number | null
-  selectedDayId: number | null
-  t: (key: string) => string
-}
-
-function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticipants, selectedAssignmentId, selectedDayId, t }: ParticipantsBoxProps) {
-  const [showAdd, setShowAdd] = React.useState(false)
-  const [hoveredId, setHoveredId] = React.useState(null)
-
-  // Active participants: if allJoined, show all members; otherwise show only those in participantIds
-  const activeMembers = allJoined ? tripMembers : tripMembers.filter(m => participantIds.includes(m.id))
-  const availableToAdd = allJoined ? [] : tripMembers.filter(m => !participantIds.includes(m.id))
-
-  const handleRemove = (userId) => {
-    if (!onSetParticipants) return
-    let newIds
-    if (allJoined) {
-      newIds = tripMembers.filter(m => m.id !== userId).map(m => m.id)
-    } else {
-      newIds = participantIds.filter(id => id !== userId)
-    }
-    if (newIds.length === tripMembers.length) newIds = []
-    onSetParticipants(selectedAssignmentId, selectedDayId, newIds)
-  }
-
-  const handleAdd = (userId) => {
-    if (!onSetParticipants) return
-    const newIds = [...participantIds, userId]
-    if (newIds.length === tripMembers.length) {
-      onSetParticipants(selectedAssignmentId, selectedDayId, [])
-    } else {
-      onSetParticipants(selectedAssignmentId, selectedDayId, newIds)
-    }
-    setShowAdd(false)
-  }
-
-  return (
-    <div style={{ borderRadius: 12, border: '1px solid var(--border-faint)', padding: '8px 10px' }}>
-      <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
-        <Users size={10} /> {t('inspector.participants')}
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center' }}>
-        {activeMembers.map(member => {
-          const isHovered = hoveredId === member.id
-          const canRemove = activeMembers.length > 1
-          return (
-            <div key={member.id}
-              onMouseEnter={() => setHoveredId(member.id)}
-              onMouseLeave={() => setHoveredId(null)}
-              onClick={() => { if (canRemove) handleRemove(member.id) }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 4, padding: '2px 7px 2px 3px', borderRadius: 99,
-                border: `1.5px solid ${isHovered && canRemove ? 'rgba(239,68,68,0.4)' : 'var(--accent)'}`,
-                background: isHovered && canRemove ? 'rgba(239,68,68,0.06)' : 'var(--bg-hover)',
-                fontSize: 10, fontWeight: 500,
-                color: isHovered && canRemove ? '#ef4444' : 'var(--text-primary)',
-                cursor: canRemove ? 'pointer' : 'default',
-                transition: 'all 0.15s',
-              }}>
-              <div style={{
-                width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-tertiary)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700,
-                color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
-              }}>
-                {(member.avatar_url || member.avatar) ? <img src={member.avatar_url || `/uploads/avatars/${member.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : member.username?.[0]?.toUpperCase()}
-              </div>
-              <span style={{ textDecoration: isHovered && canRemove ? 'line-through' : 'none' }}>{member.username}</span>
-            </div>
-          )
-        })}
-
-        {/* Add button */}
-        {availableToAdd.length > 0 && (
-          <div style={{ position: 'relative' }}>
-            <button onClick={() => setShowAdd(!showAdd)} style={{
-              width: 22, height: 22, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
-              background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              color: 'var(--text-faint)', fontSize: 12, transition: 'all 0.12s',
-            }}
-              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-muted)'; e.currentTarget.style.color = 'var(--text-primary)' }}
-              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}
-            >+</button>
-
-            {showAdd && (
-              <div style={{
-                position: 'absolute', top: 26, left: 0, zIndex: 100,
-                background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 140,
-              }}>
-                {availableToAdd.map(member => (
-                  <button key={member.id} onClick={() => handleAdd(member.id)} style={{
-                    display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '5px 8px',
-                    borderRadius: 6, border: 'none', background: 'none', cursor: 'pointer',
-                    fontFamily: 'inherit', fontSize: 11, color: 'var(--text-primary)', textAlign: 'left',
-                    transition: 'background 0.1s',
-                  }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
-                  >
-                    <div style={{
-                      width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
-                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700,
-                      color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
-                    }}>
-                      {(member.avatar_url || member.avatar) ? <img src={member.avatar_url || `/uploads/avatars/${member.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : member.username?.[0]?.toUpperCase()}
-                    </div>
-                    {member.username}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,513 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { useState, useRef, useMemo, useCallback } from 'react'
-import DOM from 'react-dom'
-import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye } from 'lucide-react'
-import PlaceAvatar from '../shared/PlaceAvatar'
-import { getCategoryIcon } from '../shared/categoryIcons'
-import { useTranslation } from '../../i18n'
-import { useToast } from '../shared/Toast'
-import CustomSelect from '../shared/CustomSelect'
-import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
-import { placesApi } from '../../api/client'
-import { useTripStore } from '../../store/tripStore'
-import { useCanDo } from '../../store/permissionsStore'
-import type { Place, Category, Day, AssignmentsMap } from '../../types'
-
-interface PlacesSidebarProps {
-  tripId: number
-  places: Place[]
-  categories: Category[]
-  assignments: AssignmentsMap
-  selectedDayId: number | null
-  selectedPlaceId: number | null
-  onPlaceClick: (placeId: number | null) => void
-  onAddPlace: () => void
-  onAssignToDay: (placeId: number, dayId: number) => void
-  onEditPlace: (place: Place) => void
-  onDeletePlace: (placeId: number) => void
-  days: Day[]
-  isMobile: boolean
-  onCategoryFilterChange?: (categoryId: string) => void
-  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
-}
-
-const PlacesSidebar = React.memo(function PlacesSidebar({
-  tripId, places, categories, assignments, selectedDayId, selectedPlaceId,
-  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, days, isMobile, onCategoryFilterChange, pushUndo,
-}: PlacesSidebarProps) {
-  const { t } = useTranslation()
-  const toast = useToast()
-  const ctxMenu = useContextMenu()
-  const gpxInputRef = useRef<HTMLInputElement>(null)
-  const trip = useTripStore((s) => s.trip)
-  const loadTrip = useTripStore((s) => s.loadTrip)
-  const can = useCanDo()
-  const canEditPlaces = can('place_edit', trip)
-
-  const handleGpxImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-    e.target.value = ''
-    try {
-      const result = await placesApi.importGpx(tripId, file)
-      await loadTrip(tripId)
-      toast.success(t('places.gpxImported', { count: result.count }))
-      if (result.places?.length > 0) {
-        const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
-        pushUndo?.(t('undo.importGpx'), async () => {
-          for (const id of importedIds) {
-            try { await placesApi.delete(tripId, id) } catch {}
-          }
-          await loadTrip(tripId)
-        })
-      }
-    } catch (err: any) {
-      toast.error(err?.response?.data?.error || t('places.gpxError'))
-    }
-  }
-
-  const [googleListOpen, setGoogleListOpen] = useState(false)
-  const [googleListUrl, setGoogleListUrl] = useState('')
-  const [googleListLoading, setGoogleListLoading] = useState(false)
-
-  const handleGoogleListImport = async () => {
-    if (!googleListUrl.trim()) return
-    setGoogleListLoading(true)
-    try {
-      const result = await placesApi.importGoogleList(tripId, googleListUrl.trim())
-      await loadTrip(tripId)
-      toast.success(t('places.googleListImported', { count: result.count, list: result.listName }))
-      setGoogleListOpen(false)
-      setGoogleListUrl('')
-      if (result.places?.length > 0) {
-        const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
-        pushUndo?.(t('undo.importGoogleList'), async () => {
-          for (const id of importedIds) {
-            try { await placesApi.delete(tripId, id) } catch {}
-          }
-          await loadTrip(tripId)
-        })
-      }
-    } catch (err: any) {
-      toast.error(err?.response?.data?.error || t('places.googleListError'))
-    } finally {
-      setGoogleListLoading(false)
-    }
-  }
-
-  const [search, setSearch] = useState('')
-  const [filter, setFilter] = useState('all')
-  const [categoryFilters, setCategoryFiltersLocal] = useState<Set<string>>(new Set())
-
-  const toggleCategoryFilter = (catId: string) => {
-    setCategoryFiltersLocal(prev => {
-      const next = new Set(prev)
-      if (next.has(catId)) next.delete(catId); else next.add(catId)
-      // Notify parent with first selected or empty
-      onCategoryFilterChange?.(next.size === 1 ? [...next][0] : '')
-      return next
-    })
-  }
-  const [dayPickerPlace, setDayPickerPlace] = useState(null)
-  const [catDropOpen, setCatDropOpen] = useState(false)
-  const [mobileShowDays, setMobileShowDays] = useState(false)
-
-  // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
-  const plannedIds = useMemo(() => new Set(
-    Object.values(assignments).flatMap(da => da.map(a => a.place?.id).filter(Boolean))
-  ), [assignments])
-
-  const filtered = useMemo(() => places.filter(p => {
-    if (filter === 'unplanned' && plannedIds.has(p.id)) return false
-    if (categoryFilters.size > 0 && !categoryFilters.has(String(p.category_id))) return false
-    if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
-        !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
-    return true
-  }), [places, filter, categoryFilters, search, plannedIds])
-
-  const isAssignedToSelectedDay = (placeId) =>
-    selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-      {/* Kopfbereich */}
-      <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
-        {canEditPlaces && <button
-          onClick={onAddPlace}
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-            width: '100%', padding: '8px 12px', borderRadius: 12, border: 'none',
-            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 13, fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit', marginBottom: 10,
-          }}
-        >
-          <Plus size={14} strokeWidth={2} /> {t('places.addPlace')}
-        </button>}
-        {canEditPlaces && <>
-        <input ref={gpxInputRef} type="file" accept=".gpx" style={{ display: 'none' }} onChange={handleGpxImport} />
-        <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
-          <button
-            onClick={() => gpxInputRef.current?.click()}
-            style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-              flex: 1, padding: '5px 12px', borderRadius: 8,
-              border: '1px dashed var(--border-primary)', background: 'none',
-              color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <Upload size={11} strokeWidth={2} /> {t('places.importGpx')}
-          </button>
-          <button
-            onClick={() => setGoogleListOpen(true)}
-            style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-              flex: 1, padding: '5px 12px', borderRadius: 8,
-              border: '1px dashed var(--border-primary)', background: 'none',
-              color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <MapPin size={11} strokeWidth={2} /> {t('places.importGoogleList')}
-          </button>
-        </div>
-        </>}
-
-        {/* Filter-Tabs */}
-        <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
-          {[{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }].map(f => (
-            <button key={f.id} onClick={() => setFilter(f.id)} style={{
-              padding: '4px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
-              fontSize: 11, fontWeight: 500, fontFamily: 'inherit',
-              background: filter === f.id ? 'var(--accent)' : 'var(--bg-tertiary)',
-              color: filter === f.id ? 'var(--accent-text)' : 'var(--text-muted)',
-            }}>{f.label}</button>
-          ))}
-        </div>
-
-        {/* Suchfeld */}
-        <div style={{ position: 'relative' }}>
-          <Search size={13} strokeWidth={1.8} color="var(--text-faint)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
-          <input
-            type="text"
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            placeholder={t('places.search')}
-            style={{
-              width: '100%', padding: '7px 30px 7px 30px', borderRadius: 10,
-              border: 'none', background: 'var(--bg-tertiary)', fontSize: 12, color: 'var(--text-primary)',
-              outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box',
-            }}
-          />
-          {search && (
-            <button onClick={() => setSearch('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex' }}>
-              <X size={12} strokeWidth={2} color="var(--text-faint)" />
-            </button>
-          )}
-        </div>
-
-        {/* Category multi-select dropdown */}
-        {categories.length > 0 && (() => {
-          const label = categoryFilters.size === 0
-            ? t('places.allCategories')
-            : categoryFilters.size === 1
-              ? categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories')
-              : `${categoryFilters.size} ${t('places.categoriesSelected')}`
-          return (
-            <div style={{ marginTop: 6, position: 'relative' }}>
-              <button onClick={() => setCatDropOpen(v => !v)} style={{
-                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-primary)',
-                background: 'var(--bg-card)', fontSize: 12, color: 'var(--text-primary)',
-                cursor: 'pointer', fontFamily: 'inherit',
-              }}>
-                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
-                <ChevronDown size={12} style={{ flexShrink: 0, color: 'var(--text-faint)', transform: catDropOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
-              </button>
-              {catDropOpen && (
-                <div style={{
-                  position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50, marginTop: 4,
-                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-                  boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, maxHeight: 200, overflowY: 'auto',
-                }}>
-                  {categories.map(c => {
-                    const active = categoryFilters.has(String(c.id))
-                    const CatIcon = getCategoryIcon(c.icon)
-                    return (
-                      <button key={c.id} onClick={() => toggleCategoryFilter(String(c.id))} style={{
-                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                        padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                        background: active ? 'var(--bg-hover)' : 'transparent',
-                        fontFamily: 'inherit', fontSize: 12, color: 'var(--text-primary)',
-                        textAlign: 'left',
-                      }}>
-                        <div style={{
-                          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                          border: active ? 'none' : '1.5px solid var(--border-primary)',
-                          background: active ? (c.color || 'var(--accent)') : 'transparent',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        }}>
-                          {active && <Check size={10} strokeWidth={3} color="white" />}
-                        </div>
-                        <CatIcon size={12} strokeWidth={2} color={c.color || 'var(--text-muted)'} />
-                        <span style={{ flex: 1 }}>{c.name}</span>
-                      </button>
-                    )
-                  })}
-                  {categoryFilters.size > 0 && (
-                    <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.('') }} style={{
-                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
-                      width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                      background: 'transparent', fontFamily: 'inherit', fontSize: 11, color: 'var(--text-faint)',
-                      marginTop: 2, borderTop: '1px solid var(--border-faint)',
-                    }}>
-                      <X size={10} /> {t('places.clearFilter')}
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          )
-        })()}
-      </div>
-
-      {/* Anzahl */}
-      <div style={{ padding: '6px 16px', flexShrink: 0 }}>
-        <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
-      </div>
-
-      {/* Liste */}
-      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
-        {filtered.length === 0 ? (
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
-            <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
-              {filter === 'unplanned' ? t('places.allPlanned') : t('places.noneFound')}
-            </span>
-            {canEditPlaces && <button onClick={onAddPlace} style={{ fontSize: 12, color: 'var(--text-primary)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit' }}>
-              {t('places.addPlace')}
-            </button>}
-          </div>
-        ) : (
-          filtered.map(place => {
-            const cat = categories.find(c => c.id === place.category_id)
-            const isSelected = place.id === selectedPlaceId
-            const inDay = isAssignedToSelectedDay(place.id)
-            const isPlanned = plannedIds.has(place.id)
-
-            return (
-              <div
-                key={place.id}
-                draggable
-                onDragStart={e => {
-                  e.dataTransfer.setData('placeId', String(place.id))
-                  e.dataTransfer.effectAllowed = 'copy'
-                  // Backup in window für Cross-Component Drag (dataTransfer geht bei Re-Render verloren)
-                  window.__dragData = { placeId: String(place.id) }
-                }}
-                onClick={() => {
-                  if (isMobile) {
-                    setDayPickerPlace(place)
-                  } else {
-                    onPlaceClick(isSelected ? null : place.id)
-                  }
-                }}
-                onContextMenu={e => ctxMenu.open(e, [
-                  canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
-                  selectedDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selectedDayId) },
-                  place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-                  (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`, '_blank') },
-                  { divider: true },
-                  canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
-                ])}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 10,
-                  padding: '9px 14px 9px 16px',
-                  cursor: 'grab',
-                  background: isSelected ? 'var(--border-faint)' : 'transparent',
-                  borderBottom: '1px solid var(--border-faint)',
-                  transition: 'background 0.1s',
-                  contentVisibility: 'auto',
-                  containIntrinsicSize: '0 52px',
-                }}
-                onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}
-              >
-                <PlaceAvatar place={place} category={cat} size={34} />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
-                    {cat && (() => {
-                      const CatIcon = getCategoryIcon(cat.icon)
-                      return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
-                    })()}
-                    <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
-                      {place.name}
-                    </span>
-                  </div>
-                  {(place.description || place.address || cat?.name) && (
-                    <div style={{ marginTop: 2 }}>
-                      <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
-                        {place.description || place.address || cat?.name}
-                      </span>
-                    </div>
-                  )}
-                </div>
-                <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                  {!inDay && selectedDayId && (
-                    <button
-                      onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
-                      style={{
-                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        width: 20, height: 20, borderRadius: 6,
-                        background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
-                        color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
-                      }}
-                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
-                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
-                    ><Plus size={12} strokeWidth={2.5} /></button>
-                  )}
-                </div>
-              </div>
-            )
-          })
-        )}
-      </div>
-
-      {dayPickerPlace && ReactDOM.createPortal(
-        <div
-          onClick={() => { setDayPickerPlace(null); setMobileShowDays(false) }}
-          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}
-        >
-          <div
-            onClick={e => e.stopPropagation()}
-            style={{ background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', width: '100%', maxWidth: 500, maxHeight: '70vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'env(safe-area-inset-bottom)' }}
-          >
-            <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-secondary)' }}>
-              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{dayPickerPlace.name}</div>
-              {dayPickerPlace.address && <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2 }}>{dayPickerPlace.address}</div>}
-            </div>
-            <div style={{ overflowY: 'auto', padding: '8px 12px' }}>
-              {/* View details */}
-              <button
-                onClick={() => { onPlaceClick(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
-                style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
-              >
-                <Eye size={18} color="var(--text-muted)" /> {t('places.viewDetails')}
-              </button>
-              {/* Edit */}
-              {canEditPlaces && (
-                <button
-                  onClick={() => { onEditPlace(dayPickerPlace); setDayPickerPlace(null); setMobileShowDays(false) }}
-                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
-                >
-                  <Pencil size={18} color="var(--text-muted)" /> {t('common.edit')}
-                </button>
-              )}
-              {/* Assign to day */}
-              {days?.length > 0 && (
-                <>
-                  <button
-                    onClick={() => setMobileShowDays(v => !v)}
-                    style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
-                  >
-                    <CalendarDays size={18} color="var(--text-muted)" /> {t('places.assignToDay')}
-                    <ChevronDown size={14} style={{ marginLeft: 'auto', color: 'var(--text-faint)', transform: mobileShowDays ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
-                  </button>
-                  {mobileShowDays && (
-                    <div style={{ paddingLeft: 20 }}>
-                      {days.map((day, i) => (
-                        <button
-                          key={day.id}
-                          onClick={() => { onAssignToDay(dayPickerPlace.id, day.id); setDayPickerPlace(null); setMobileShowDays(false) }}
-                          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 14px', borderRadius: 10, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left' }}
-                        >
-                          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', flexShrink: 0 }}>{i + 1}</div>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>{day.title || t('dayplan.dayN', { n: i + 1 })}</div>
-                            {day.date && <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{new Date(day.date + 'T00:00:00Z').toLocaleDateString(undefined, { timeZone: 'UTC' })}</div>}
-                          </div>
-                          {(assignments[String(day.id)] || []).some(a => a.place?.id === dayPickerPlace.id) && <Check size={14} color="var(--text-faint)" />}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </>
-              )}
-              {/* Delete */}
-              {canEditPlaces && (
-                <button
-                  onClick={() => { onDeletePlace(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
-                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: '#ef4444' }}
-                >
-                  <Trash2 size={18} /> {t('common.delete')}
-                </button>
-              )}
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-      {googleListOpen && ReactDOM.createPortal(
-        <div
-          onClick={() => { setGoogleListOpen(false); setGoogleListUrl('') }}
-          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-        >
-          <div
-            onClick={e => e.stopPropagation()}
-            style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 440, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
-          >
-            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 4 }}>
-              {t('places.importGoogleList')}
-            </div>
-            <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 16 }}>
-              {t('places.googleListHint')}
-            </div>
-            <input
-              type="text"
-              value={googleListUrl}
-              onChange={e => setGoogleListUrl(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter' && !googleListLoading) handleGoogleListImport() }}
-              placeholder="https://maps.app.goo.gl/..."
-              autoFocus
-              style={{
-                width: '100%', padding: '10px 14px', borderRadius: 10,
-                border: '1px solid var(--border-primary)', background: 'var(--bg-tertiary)',
-                fontSize: 13, color: 'var(--text-primary)', outline: 'none',
-                fontFamily: 'inherit', boxSizing: 'border-box',
-              }}
-            />
-            <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
-              <button
-                onClick={() => { setGoogleListOpen(false); setGoogleListUrl('') }}
-                style={{
-                  padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
-                  background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500,
-                  cursor: 'pointer', fontFamily: 'inherit',
-                }}
-              >
-                {t('common.cancel')}
-              </button>
-              <button
-                onClick={handleGoogleListImport}
-                disabled={!googleListUrl.trim() || googleListLoading}
-                style={{
-                  padding: '8px 16px', borderRadius: 10, border: 'none',
-                  background: !googleListUrl.trim() || googleListLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
-                  color: !googleListUrl.trim() || googleListLoading ? 'var(--text-faint)' : 'var(--accent-text)',
-                  fontSize: 13, fontWeight: 500, cursor: !googleListUrl.trim() || googleListLoading ? 'default' : 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                {googleListLoading ? t('common.loading') : t('common.import')}
-              </button>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-      <ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
-    </div>
-  )
-})
-
-export default PlacesSidebar

client/src/components/Planner/ReservationModal.tsx

@@ -1,703 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
-import { useParams } from 'react-router-dom'
-import apiClient from '../../api/client'
-import { useTripStore } from '../../store/tripStore'
-import { useAddonStore } from '../../store/addonStore'
-import Modal from '../shared/Modal'
-import CustomSelect from '../shared/CustomSelect'
-import { Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import CustomTimePicker from '../shared/CustomTimePicker'
-import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
-
-const TYPE_OPTIONS = [
-  { value: 'flight',     labelKey: 'reservations.type.flight',     Icon: Plane },
-  { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
-  { value: 'restaurant', labelKey: 'reservations.type.restaurant', Icon: Utensils },
-  { value: 'train',      labelKey: 'reservations.type.train',      Icon: Train },
-  { value: 'car',        labelKey: 'reservations.type.car',        Icon: Car },
-  { value: 'cruise',     labelKey: 'reservations.type.cruise',     Icon: Ship },
-  { value: 'event',      labelKey: 'reservations.type.event',      Icon: Ticket },
-  { value: 'tour',       labelKey: 'reservations.type.tour',       Icon: Users },
-  { value: 'other',      labelKey: 'reservations.type.other',      Icon: FileText },
-]
-
-function buildAssignmentOptions(days, assignments, t, locale) {
-  const options = []
-  for (const day of (days || [])) {
-    const da = (assignments?.[String(day.id)] || []).slice().sort((a, b) => a.order_index - b.order_index)
-    if (da.length === 0) continue
-    const dayLabel = day.title || t('dayplan.dayN', { n: day.day_number })
-    const dateStr = day.date ? ` · ${formatDate(day.date, locale)}` : ''
-    const groupLabel = `${dayLabel}${dateStr}`
-    // Group header (non-selectable)
-    options.push({ value: `_header_${day.id}`, label: groupLabel, disabled: true, isHeader: true })
-    for (let i = 0; i < da.length; i++) {
-      const place = da[i].place
-      if (!place) continue
-      const timeStr = place.place_time ? ` · ${place.place_time}${place.end_time ? ' – ' + place.end_time : ''}` : ''
-      options.push({
-        value: da[i].id,
-        label: `  ${i + 1}. ${place.name}${timeStr}`,
-        searchLabel: place.name,
-        groupLabel,
-        dayDate: day.date || null,
-      })
-    }
-  }
-  return options
-}
-
-interface ReservationModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onSave: (data: Record<string, string | number | null>) => Promise<void> | void
-  reservation: Reservation | null
-  days: Day[]
-  places: Place[]
-  assignments: AssignmentsMap
-  selectedDayId: number | null
-  files?: TripFile[]
-  onFileUpload?: (fd: FormData) => Promise<void>
-  onFileDelete: (fileId: number) => Promise<void>
-  accommodations?: Accommodation[]
-}
-
-export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [] }: ReservationModalProps) {
-  const { id: tripId } = useParams<{ id: string }>()
-  const loadFiles = useTripStore(s => s.loadFiles)
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const fileInputRef = useRef(null)
-
-  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
-  const budgetItems = useTripStore(s => s.budgetItems)
-  const budgetCategories = useMemo(() => {
-    const cats = new Set<string>()
-    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [budgetItems])
-
-  const [form, setForm] = useState({
-    title: '', type: 'other', status: 'pending',
-    reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
-    notes: '', assignment_id: '', accommodation_id: '',
-    price: '', budget_category: '',
-    meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
-    meta_departure_timezone: '', meta_arrival_timezone: '',
-    meta_train_number: '', meta_platform: '', meta_seat: '',
-    meta_check_in_time: '', meta_check_out_time: '',
-    hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
-  })
-  const [isSaving, setIsSaving] = useState(false)
-  const [uploadingFile, setUploadingFile] = useState(false)
-  const [pendingFiles, setPendingFiles] = useState([])
-  const [showFilePicker, setShowFilePicker] = useState(false)
-  const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
-  const [unlinkedFileIds, setUnlinkedFileIds] = useState<number[]>([])
-
-  const assignmentOptions = useMemo(
-    () => buildAssignmentOptions(days, assignments, t, locale),
-    [days, assignments, t, locale]
-  )
-
-  useEffect(() => {
-    if (reservation) {
-      const meta = typeof reservation.metadata === 'string' ? JSON.parse(reservation.metadata || '{}') : (reservation.metadata || {})
-      // Parse end_date from reservation_end_time if it's a full ISO datetime
-      const rawEnd = reservation.reservation_end_time || ''
-      let endDate = ''
-      let endTime = rawEnd
-      if (rawEnd.includes('T')) {
-        endDate = rawEnd.split('T')[0]
-        endTime = rawEnd.split('T')[1]?.slice(0, 5) || ''
-      }
-      setForm({
-        title: reservation.title || '',
-        type: reservation.type || 'other',
-        status: reservation.status || 'pending',
-        reservation_time: reservation.reservation_time ? reservation.reservation_time.slice(0, 16) : '',
-        reservation_end_time: endTime,
-        end_date: endDate,
-        location: reservation.location || '',
-        confirmation_number: reservation.confirmation_number || '',
-        notes: reservation.notes || '',
-        assignment_id: reservation.assignment_id || '',
-        accommodation_id: reservation.accommodation_id || '',
-        meta_airline: meta.airline || '',
-        meta_flight_number: meta.flight_number || '',
-        meta_departure_airport: meta.departure_airport || '',
-        meta_arrival_airport: meta.arrival_airport || '',
-        meta_departure_timezone: meta.departure_timezone || '',
-        meta_arrival_timezone: meta.arrival_timezone || '',
-        meta_train_number: meta.train_number || '',
-        meta_platform: meta.platform || '',
-        meta_seat: meta.seat || '',
-        meta_check_in_time: meta.check_in_time || '',
-        meta_check_out_time: meta.check_out_time || '',
-        hotel_place_id: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.place_id || '' })(),
-        hotel_start_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.start_day_id || '' })(),
-        hotel_end_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.end_day_id || '' })(),
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
-      })
-    } else {
-      setForm({
-        title: '', type: 'other', status: 'pending',
-        reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
-        notes: '', assignment_id: '', accommodation_id: '',
-        price: '', budget_category: '',
-        meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
-        meta_departure_timezone: '', meta_arrival_timezone: '',
-        meta_train_number: '', meta_platform: '', meta_seat: '',
-        meta_check_in_time: '', meta_check_out_time: '',
-      })
-      setPendingFiles([])
-    }
-  }, [reservation, isOpen, selectedDayId])
-
-  const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }))
-
-  // Validate that end datetime is after start datetime
-  const isEndBeforeStart = (() => {
-    if (!form.end_date || !form.reservation_time) return false
-    const startDate = form.reservation_time.split('T')[0]
-    const startTime = form.reservation_time.split('T')[1] || '00:00'
-    const endTime = form.reservation_end_time || '00:00'
-    const startFull = `${startDate}T${startTime}`
-    const endFull = `${form.end_date}T${endTime}`
-    return endFull <= startFull
-  })()
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (!form.title.trim()) return
-    if (isEndBeforeStart) { toast.error(t('reservations.validation.endBeforeStart')); return }
-    setIsSaving(true)
-    try {
-      const metadata: Record<string, string> = {}
-      if (form.type === 'flight') {
-        if (form.meta_airline) metadata.airline = form.meta_airline
-        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
-        if (form.meta_departure_airport) metadata.departure_airport = form.meta_departure_airport
-        if (form.meta_arrival_airport) metadata.arrival_airport = form.meta_arrival_airport
-        if (form.meta_departure_timezone) metadata.departure_timezone = form.meta_departure_timezone
-        if (form.meta_arrival_timezone) metadata.arrival_timezone = form.meta_arrival_timezone
-      } else if (form.type === 'hotel') {
-        if (form.meta_check_in_time) metadata.check_in_time = form.meta_check_in_time
-        if (form.meta_check_out_time) metadata.check_out_time = form.meta_check_out_time
-      } else if (form.type === 'train') {
-        if (form.meta_train_number) metadata.train_number = form.meta_train_number
-        if (form.meta_platform) metadata.platform = form.meta_platform
-        if (form.meta_seat) metadata.seat = form.meta_seat
-      }
-      // Combine end_date + end_time into reservation_end_time
-      let combinedEndTime = form.reservation_end_time
-      if (form.end_date) {
-        combinedEndTime = form.reservation_end_time ? `${form.end_date}T${form.reservation_end_time}` : form.end_date
-      }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-      const saveData: Record<string, any> = {
-        title: form.title, type: form.type, status: form.status,
-        reservation_time: form.reservation_time, reservation_end_time: combinedEndTime,
-        location: form.location, confirmation_number: form.confirmation_number,
-        notes: form.notes,
-        assignment_id: form.assignment_id || null,
-        accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
-        metadata: Object.keys(metadata).length > 0 ? metadata : null,
-      }
-      // Auto-create/update budget entry if price is set, or signal removal if cleared
-      if (isBudgetEnabled) {
-        saveData.create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
-      // If hotel with place + days, pass hotel data for auto-creation or update
-      if (form.type === 'hotel' && form.hotel_place_id && form.hotel_start_day && form.hotel_end_day) {
-        saveData.create_accommodation = {
-          place_id: form.hotel_place_id,
-          start_day_id: form.hotel_start_day,
-          end_day_id: form.hotel_end_day,
-          check_in: form.meta_check_in_time || null,
-          check_out: form.meta_check_out_time || null,
-          confirmation: form.confirmation_number || null,
-        }
-      }
-      const saved = await onSave(saveData)
-      if (!reservation?.id && saved?.id && pendingFiles.length > 0) {
-        for (const file of pendingFiles) {
-          const fd = new FormData()
-          fd.append('file', file)
-          fd.append('reservation_id', saved.id)
-          fd.append('description', form.title)
-          await onFileUpload(fd)
-        }
-      }
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  const handleFileChange = async (e) => {
-    const file = (e.target as HTMLInputElement).files?.[0]
-    if (!file) return
-    if (reservation?.id) {
-      setUploadingFile(true)
-      try {
-        const fd = new FormData()
-        fd.append('file', file)
-        fd.append('reservation_id', reservation.id)
-        fd.append('description', reservation.title)
-        await onFileUpload(fd)
-        toast.success(t('reservations.toast.fileUploaded'))
-      } catch {
-        toast.error(t('reservations.toast.uploadError'))
-      } finally {
-        setUploadingFile(false)
-        e.target.value = ''
-      }
-    } else {
-      setPendingFiles(prev => [...prev, file])
-      e.target.value = ''
-    }
-  }
-
-  const attachedFiles = reservation?.id
-    ? files.filter(f =>
-        f.reservation_id === reservation.id ||
-        linkedFileIds.includes(f.id) ||
-        (f.linked_reservation_ids && f.linked_reservation_ids.includes(reservation.id))
-      )
-    : []
-
-  const inputStyle = {
-    width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
-    padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
-    outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)', background: 'var(--bg-input)',
-  }
-  const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.03em' }
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')} size="2xl">
-      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-
-        {/* Type selector */}
-        <div>
-          <label style={labelStyle}>{t('reservations.bookingType')}</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
-            {TYPE_OPTIONS.map(({ value, labelKey, Icon }) => (
-              <button key={value} type="button" onClick={() => set('type', value)} style={{
-                display: 'flex', alignItems: 'center', gap: 4,
-                padding: '5px 10px', borderRadius: 99, border: '1px solid',
-                fontSize: 11, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.12s',
-                background: form.type === value ? 'var(--text-primary)' : 'var(--bg-card)',
-                borderColor: form.type === value ? 'var(--text-primary)' : 'var(--border-primary)',
-                color: form.type === value ? 'var(--bg-primary)' : 'var(--text-muted)',
-              }}>
-                <Icon size={11} /> {t(labelKey)}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Title */}
-        <div>
-          <label style={labelStyle}>{t('reservations.titleLabel')} *</label>
-          <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
-            placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
-        </div>
-
-        {/* Assignment Picker (hidden for hotels) */}
-        {form.type !== 'hotel' && assignmentOptions.length > 0 && (
-        <div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>
-                <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
-                {t('reservations.linkAssignment')}
-              </label>
-              <CustomSelect
-                value={form.assignment_id}
-                onChange={value => {
-                  set('assignment_id', value)
-                  const opt = assignmentOptions.find(o => o.value === value)
-                  if (opt?.dayDate) {
-                    setForm(prev => {
-                      if (prev.reservation_time) return prev
-                      return { ...prev, reservation_time: opt.dayDate }
-                    })
-                  }
-                }}
-                placeholder={t('reservations.pickAssignment')}
-                options={[
-                  { value: '', label: t('reservations.noAssignment') },
-                  ...assignmentOptions,
-                ]}
-                searchable
-                size="sm"
-              />
-            </div>
-        </div>
-        )}
-
-        {/* Start Date/Time + End Date/Time + Status (hidden for hotels) */}
-        {form.type !== 'hotel' && (
-        <>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
-              <CustomDatePicker
-                value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
-                onChange={d => {
-                  const [, t] = (form.reservation_time || '').split('T')
-                  set('reservation_time', d ? (t ? `${d}T${t}` : d) : '')
-                }}
-              />
-            </div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
-              <CustomTimePicker
-                value={(() => { const [, t] = (form.reservation_time || '').split('T'); return t || '' })()}
-                onChange={t => {
-                  const [d] = (form.reservation_time || '').split('T')
-                  const date = d || new Date().toISOString().split('T')[0]
-                  set('reservation_time', t ? `${date}T${t}` : date)
-                }}
-              />
-            </div>
-            {form.type === 'flight' && (
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.meta.departureTimezone')}</label>
-                <input type="text" value={form.meta_departure_timezone} onChange={e => set('meta_departure_timezone', e.target.value)}
-                  placeholder="e.g. CET, UTC+1" style={inputStyle} />
-              </div>
-            )}
-          </div>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
-              <CustomDatePicker
-                value={form.end_date}
-                onChange={d => set('end_date', d || '')}
-              />
-            </div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
-              <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
-            </div>
-            {form.type === 'flight' && (
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.meta.arrivalTimezone')}</label>
-                <input type="text" value={form.meta_arrival_timezone} onChange={e => set('meta_arrival_timezone', e.target.value)}
-                  placeholder="e.g. JST, UTC+9" style={inputStyle} />
-              </div>
-            )}
-          </div>
-          {isEndBeforeStart && (
-            <div style={{ fontSize: 11, color: '#ef4444', marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
-          )}
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{t('reservations.status')}</label>
-              <CustomSelect
-                value={form.status}
-                onChange={value => set('status', value)}
-                options={[
-                  { value: 'pending', label: t('reservations.pending') },
-                  { value: 'confirmed', label: t('reservations.confirmed') },
-                ]}
-                size="sm"
-              />
-            </div>
-          </div>
-        </>
-        )}
-
-        {/* Location + Booking Code */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label style={labelStyle}>{t('reservations.locationAddress')}</label>
-            <input type="text" value={form.location} onChange={e => set('location', e.target.value)}
-              placeholder={t('reservations.locationPlaceholder')} style={inputStyle} />
-          </div>
-          <div>
-            <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
-            <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
-              placeholder={t('reservations.confirmationPlaceholder')} style={inputStyle} />
-          </div>
-        </div>
-
-        {/* Type-specific fields */}
-        {form.type === 'flight' && (
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.airline') || 'Airline'}</label>
-              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
-                placeholder="Lufthansa" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.flightNumber') || 'Flight No.'}</label>
-              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
-                placeholder="LH 123" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.from') || 'From'}</label>
-              <input type="text" value={form.meta_departure_airport} onChange={e => set('meta_departure_airport', e.target.value)}
-                placeholder="FRA" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.to') || 'To'}</label>
-              <input type="text" value={form.meta_arrival_airport} onChange={e => set('meta_arrival_airport', e.target.value)}
-                placeholder="NRT" style={inputStyle} />
-            </div>
-          </div>
-        )}
-
-        {form.type === 'hotel' && (
-          <>
-            {/* Hotel place + day range */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-              <div>
-                <label style={labelStyle}>{t('reservations.meta.hotelPlace')}</label>
-                <CustomSelect
-                  value={form.hotel_place_id}
-                  onChange={value => {
-                    set('hotel_place_id', value)
-                    const p = places.find(pl => pl.id === value)
-                    if (p) {
-                      if (!form.title) set('title', p.name)
-                      if (!form.location && p.address) set('location', p.address)
-                    }
-                  }}
-                  placeholder={t('reservations.meta.pickHotel')}
-                  options={[
-                    { value: '', label: '—' },
-                    ...places.map(p => ({ value: p.id, label: p.name })),
-                  ]}
-                  searchable
-                  size="sm"
-                />
-              </div>
-              <div>
-                <label style={labelStyle}>{t('reservations.meta.fromDay')}</label>
-                <CustomSelect
-                  value={form.hotel_start_day}
-                  onChange={value => set('hotel_start_day', value)}
-                  placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
-                  size="sm"
-                />
-              </div>
-              <div>
-                <label style={labelStyle}>{t('reservations.meta.toDay')}</label>
-                <CustomSelect
-                  value={form.hotel_end_day}
-                  onChange={value => set('hotel_end_day', value)}
-                  placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {/* Check-in/out times + Status */}
-            <div className="grid grid-cols-3 gap-3">
-              <div>
-                <label style={labelStyle}>{t('reservations.meta.checkIn')}</label>
-                <CustomTimePicker value={form.meta_check_in_time} onChange={v => set('meta_check_in_time', v)} />
-              </div>
-              <div>
-                <label style={labelStyle}>{t('reservations.meta.checkOut')}</label>
-                <CustomTimePicker value={form.meta_check_out_time} onChange={v => set('meta_check_out_time', v)} />
-              </div>
-              <div>
-                <label style={labelStyle}>{t('reservations.status')}</label>
-                <CustomSelect
-                  value={form.status}
-                  onChange={value => set('status', value)}
-                  options={[
-                    { value: 'pending', label: t('reservations.pending') },
-                    { value: 'confirmed', label: t('reservations.confirmed') },
-                  ]}
-                  size="sm"
-                />
-              </div>
-            </div>
-          </>
-        )}
-
-        {form.type === 'train' && (
-          <div className="grid grid-cols-3 gap-3">
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.trainNumber') || 'Train No.'}</label>
-              <input type="text" value={form.meta_train_number} onChange={e => set('meta_train_number', e.target.value)}
-                placeholder="ICE 123" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.platform') || 'Platform'}</label>
-              <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
-                placeholder="12" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.seat') || 'Seat'}</label>
-              <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
-                placeholder="42A" style={inputStyle} />
-            </div>
-          </div>
-        )}
-
-        {/* Notes */}
-        <div>
-          <label style={labelStyle}>{t('reservations.notes')}</label>
-          <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
-            placeholder={t('reservations.notesPlaceholder')}
-            style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
-        </div>
-
-        {/* Files */}
-        <div>
-          <label style={labelStyle}>{t('files.title')}</label>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            {attachedFiles.map(f => (
-              <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                <a href={f.url} target="_blank" rel="noreferrer" style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}><ExternalLink size={11} /></a>
-                <button type="button" onClick={async () => {
-                  // Always unlink, never delete the file
-                  // Clear primary reservation_id if it points to this reservation
-                  if (f.reservation_id === reservation?.id) {
-                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
-                  }
-                  // Remove from file_links if linked there
-                  try {
-                    const linksRes = await apiClient.get(`/trips/${tripId}/files/${f.id}/links`)
-                    const link = (linksRes.data.links || []).find((l: any) => l.reservation_id === reservation?.id)
-                    if (link) await apiClient.delete(`/trips/${tripId}/files/${f.id}/link/${link.id}`)
-                  } catch {}
-                  setLinkedFileIds(prev => prev.filter(id => id !== f.id))
-                  if (tripId) loadFiles(tripId)
-                }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
-                  <X size={11} />
-                </button>
-              </div>
-            ))}
-            {pendingFiles.map((f, i) => (
-              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
-                <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
-                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
-                  <X size={11} />
-                </button>
-              </div>
-            ))}
-            <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
-            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
-                display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
-                border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
-              }}>
-                <Paperclip size={11} />
-                {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
-              </button>}
-              {/* Link existing file picker */}
-              {reservation?.id && files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).length > 0 && (
-                <div style={{ position: 'relative' }}>
-                  <button type="button" onClick={() => setShowFilePicker(v => !v)} style={{
-                    display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
-                    border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                    fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
-                  }}>
-                    <Link2 size={11} /> {t('reservations.linkExisting')}
-                  </button>
-                  {showFilePicker && (
-                    <div style={{
-                      position: 'absolute', bottom: '100%', left: 0, marginBottom: 4, zIndex: 50,
-                      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-                      boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220, maxHeight: 200, overflowY: 'auto',
-                    }}>
-                      {files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).map(f => (
-                        <button key={f.id} type="button" onClick={async () => {
-                          try {
-                            await apiClient.post(`/trips/${tripId}/files/${f.id}/link`, { reservation_id: reservation.id })
-                            setLinkedFileIds(prev => [...prev, f.id])
-                            setShowFilePicker(false)
-                            if (tripId) loadFiles(tripId)
-                          } catch {}
-                        }}
-                          style={{
-                            display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px',
-                            background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit',
-                            color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
-                          }}
-                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-                          onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-                          <FileText size={12} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Price + Budget Category — only shown when budget addon is enabled */}
-        {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.price')}</label>
-                <input type="text" inputMode="decimal" value={form.price}
-                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*\.?\d{0,2}$/.test(v)) set('price', v) }}
-                  placeholder="0.00"
-                  style={inputStyle} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
-                <CustomSelect
-                  value={form.budget_category}
-                  onChange={v => set('budget_category', v)}
-                  options={[
-                    { value: '', label: t('reservations.budgetCategoryAuto') },
-                    ...budgetCategories.map(c => ({ value: c, label: c })),
-                  ]}
-                  placeholder={t('reservations.budgetCategoryAuto')}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {form.price && parseFloat(form.price) > 0 && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
-        )}
-
-        {/* Actions */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="submit" disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
-      </form>
-    </Modal>
-  )
-}
-
-function formatDate(dateStr, locale) {
-  if (!dateStr) return ''
-  const d = new Date(dateStr + 'T00:00:00Z')
-  return d.toLocaleDateString(locale || undefined, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-}

client/src/components/Planner/ReservationsPanel.tsx

@@ -1,411 +0,0 @@
-import { useState, useMemo } from 'react'
-import ReactDOM from 'react-dom'
-import { useTripStore } from '../../store/tripStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import {
-  Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
-  Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock,
-} from 'lucide-react'
-import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
-
-interface AssignmentLookupEntry {
-  dayNumber: number
-  dayTitle: string | null
-  dayDate: string
-  placeName: string
-  startTime: string | null
-  endTime: string | null
-}
-
-const TYPE_OPTIONS = [
-  { value: 'flight',      labelKey: 'reservations.type.flight',      Icon: Plane, color: '#3b82f6' },
-  { value: 'hotel',       labelKey: 'reservations.type.hotel',       Icon: Hotel, color: '#8b5cf6' },
-  { value: 'restaurant',  labelKey: 'reservations.type.restaurant',  Icon: Utensils, color: '#ef4444' },
-  { value: 'train',       labelKey: 'reservations.type.train',       Icon: Train, color: '#06b6d4' },
-  { value: 'car',         labelKey: 'reservations.type.car',         Icon: Car, color: '#6b7280' },
-  { value: 'cruise',      labelKey: 'reservations.type.cruise',      Icon: Ship, color: '#0ea5e9' },
-  { value: 'event',       labelKey: 'reservations.type.event',       Icon: Ticket, color: '#f59e0b' },
-  { value: 'tour',        labelKey: 'reservations.type.tour',        Icon: Users, color: '#10b981' },
-  { value: 'other',       labelKey: 'reservations.type.other',       Icon: FileText, color: '#6b7280' },
-]
-
-function getType(type) {
-  return TYPE_OPTIONS.find(t => t.value === type) || TYPE_OPTIONS[TYPE_OPTIONS.length - 1]
-}
-
-function buildAssignmentLookup(days, assignments) {
-  const map = {}
-  for (const day of (days || [])) {
-    const da = (assignments?.[String(day.id)] || []).slice().sort((a, b) => a.order_index - b.order_index)
-    for (const a of da) {
-      if (!a.place) continue
-      map[a.id] = { dayNumber: day.day_number, dayTitle: day.title, dayDate: day.date, placeName: a.place.name, startTime: a.place.place_time, endTime: a.place.end_time }
-    }
-  }
-  return map
-}
-
-interface ReservationCardProps {
-  r: Reservation
-  tripId: number
-  onEdit: (reservation: Reservation) => void
-  onDelete: (id: number) => void
-  files?: TripFile[]
-  onNavigateToFiles: () => void
-  assignmentLookup: Record<number, AssignmentLookupEntry>
-  canEdit: boolean
-}
-
-function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit }: ReservationCardProps) {
-  const { toggleReservationStatus } = useTripStore()
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
-  const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
-  const [codeRevealed, setCodeRevealed] = useState(false)
-  const typeInfo = getType(r.type)
-  const TypeIcon = typeInfo.Icon
-  const confirmed = r.status === 'confirmed'
-  const attachedFiles = files.filter(f => f.reservation_id === r.id || (f.linked_reservation_ids || []).includes(r.id))
-  const linked = r.assignment_id ? assignmentLookup[r.assignment_id] : null
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-
-  const handleToggle = async () => {
-    try { await toggleReservationStatus(tripId, r.id) }
-    catch { toast.error(t('reservations.toast.updateError')) }
-  }
-  const handleDelete = async () => {
-    setShowDeleteConfirm(false)
-    try { await onDelete(r.id) } catch { toast.error(t('reservations.toast.deleteError')) }
-  }
-
-  const fmtDate = (str) => {
-    const dateOnly = str.includes('T') ? str.split('T')[0] : str
-    return new Date(dateOnly + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
-  }
-  const fmtTime = (str) => {
-    const d = new Date(str)
-    return d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })
-  }
-
-  return (
-    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
-      {/* Header bar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)' }}>
-        <div style={{ width: 7, height: 7, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
-        {canEdit ? (
-          <button onClick={handleToggle} style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706', background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit' }}>
-            {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
-          </button>
-        ) : (
-          <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706', padding: 0 }}>
-            {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
-          </span>
-        )}
-        <div style={{ width: 1, height: 10, background: 'var(--border-faint)' }} />
-        <TypeIcon size={11} style={{ color: typeInfo.color, flexShrink: 0 }} />
-        <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>{t(typeInfo.labelKey)}</span>
-        <span style={{ flex: 1 }} />
-        <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
-        {canEdit && (
-          <button onClick={() => onEdit(r)} title={t('common.edit')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
-            onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-            <Pencil size={11} />
-          </button>
-        )}
-        {canEdit && (
-          <button onClick={() => setShowDeleteConfirm(true)} title={t('common.delete')} style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', flexShrink: 0 }}
-            onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-            <Trash2 size={11} />
-          </button>
-        )}
-      </div>
-
-      {/* Details */}
-      {(r.reservation_time || r.confirmation_number || r.location || linked || r.metadata) && (
-        <div style={{ padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
-          {/* Row 1: Date, Time, Code */}
-          {(r.reservation_time || r.confirmation_number) && (
-            <div style={{ display: 'flex', gap: 0, borderRadius: 8, overflow: 'hidden', background: 'var(--bg-secondary)', boxShadow: '0 1px 6px rgba(0,0,0,0.08)' }}>
-              {r.reservation_time && (
-                <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: '1px solid var(--border-faint)' }}>
-                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.date')}</div>
-                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>
-                    {fmtDate(r.reservation_time)}
-                    {r.reservation_end_time?.includes('T') && r.reservation_end_time.split('T')[0] !== r.reservation_time.split('T')[0] && (
-                      <> – {fmtDate(r.reservation_end_time)}</>
-                    )}
-                  </div>
-                </div>
-              )}
-              {r.reservation_time?.includes('T') && (
-                <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: '1px solid var(--border-faint)' }}>
-                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.time')}</div>
-                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>
-                    {fmtTime(r.reservation_time)}{r.reservation_end_time ? ` – ${r.reservation_end_time.includes('T') ? fmtTime(r.reservation_end_time) : fmtTime(r.reservation_time.split('T')[0] + 'T' + r.reservation_end_time)}` : ''}
-                  </div>
-                </div>
-              )}
-              {r.confirmation_number && (
-                <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center' }}>
-                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.confirmationCode')}</div>
-                  <div
-                    onMouseEnter={() => blurCodes && setCodeRevealed(true)}
-                    onMouseLeave={() => blurCodes && setCodeRevealed(false)}
-                    onClick={() => blurCodes && setCodeRevealed(v => !v)}
-                    style={{
-                      fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1,
-                      filter: blurCodes && !codeRevealed ? 'blur(5px)' : 'none',
-                      cursor: blurCodes ? 'pointer' : 'default',
-                      transition: 'filter 0.2s',
-                    }}
-                  >
-                    {r.confirmation_number}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-          {/* Row 1b: Type-specific metadata */}
-          {(() => {
-            const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
-            if (!meta || Object.keys(meta).length === 0) return null
-            const cells: { label: string; value: string }[] = []
-            if (meta.airline) cells.push({ label: t('reservations.meta.airline'), value: meta.airline })
-            if (meta.flight_number) cells.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
-            if (meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
-            if (meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
-            if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
-            if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
-            if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
-            if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: fmtTime('2000-01-01T' + meta.check_in_time) })
-            if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: fmtTime('2000-01-01T' + meta.check_out_time) })
-            if (cells.length === 0) return null
-            return (
-              <div style={{ display: 'flex', gap: 0, borderRadius: 8, overflow: 'hidden', background: 'var(--bg-secondary)', boxShadow: '0 1px 6px rgba(0,0,0,0.08)' }}>
-                {cells.map((c, i) => (
-                  <div key={i} style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: i < cells.length - 1 ? '1px solid var(--border-faint)' : 'none' }}>
-                    <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{c.label}</div>
-                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>{c.value}</div>
-                  </div>
-                ))}
-              </div>
-            )
-          })()}
-          {/* Row 2: Location + Assignment */}
-          {(r.location || linked || r.accommodation_name) && (
-            <div className={`grid grid-cols-1 ${r.location && linked ? 'sm:grid-cols-2' : ''} gap-2`} style={{ paddingTop: 6, borderTop: '1px solid var(--border-faint)' }}>
-              {r.location && (
-                <div>
-                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.locationAddress')}</div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-                    <MapPin size={10} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.location}</span>
-                  </div>
-                </div>
-              )}
-              {r.accommodation_name && (
-                <div>
-                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.meta.linkAccommodation')}</div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-                    <Hotel size={10} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.accommodation_name}</span>
-                  </div>
-                </div>
-              )}
-              {linked && (
-                <div>
-                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.linkAssignment')}</div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-                    <Link2 size={10} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                      {linked.dayTitle || t('dayplan.dayN', { n: linked.dayNumber })} — {linked.placeName}
-                      {linked.startTime ? ` · ${linked.startTime}${linked.endTime ? ' – ' + linked.endTime : ''}` : ''}
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Notes */}
-      {r.notes && (
-        <div style={{ padding: '0 12px 8px' }}>
-          <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.notes')}</div>
-          <div style={{ padding: '5px 8px', borderRadius: 7, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>
-            {r.notes}
-          </div>
-        </div>
-      )}
-
-      {/* Files */}
-      {attachedFiles.length > 0 && (
-        <div style={{ padding: '0 12px 8px' }}>
-          <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('files.title')}</div>
-          <div style={{ padding: '4px 8px', borderRadius: 7, background: 'var(--bg-secondary)', display: 'flex', flexDirection: 'column', gap: 3 }}>
-            {attachedFiles.map(f => (
-              <a key={f.id} href={f.url} target="_blank" rel="noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 4, textDecoration: 'none', cursor: 'pointer' }}>
-                <FileText size={9} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                <span style={{ fontSize: 10, color: 'var(--text-muted)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-              </a>
-            ))}
-          </div>
-        </div>
-      )}
-      {/* Delete confirmation popup */}
-      {showDeleteConfirm && ReactDOM.createPortal(
-        <div style={{
-          position: 'fixed', inset: 0, zIndex: 1000,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
-        }} onClick={() => setShowDeleteConfirm(false)}>
-          <div style={{
-            width: 340, background: 'var(--bg-card)', borderRadius: 16,
-            boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
-            display: 'flex', flexDirection: 'column', gap: 12,
-          }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <div style={{
-                width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                borderRadius: '50%', background: 'rgba(239,68,68,0.12)',
-              }}>
-                <Trash2 size={18} strokeWidth={1.8} color="#ef4444" />
-              </div>
-              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
-                {t('reservations.confirm.deleteTitle')}
-              </div>
-            </div>
-            <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
-              {t('reservations.confirm.deleteBody', { name: r.title })}
-            </div>
-            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
-              <button onClick={() => setShowDeleteConfirm(false)} style={{
-                fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
-                borderRadius: 8, padding: '6px 14px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit',
-              }}>{t('common.cancel')}</button>
-              <button onClick={handleDelete} style={{
-                fontSize: 12, background: '#ef4444', color: 'white',
-                border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
-              }}>{t('common.confirm')}</button>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  )
-}
-
-interface SectionProps {
-  title: string
-  count: number
-  children: React.ReactNode
-  defaultOpen?: boolean
-  accent: 'green' | string
-}
-
-function Section({ title, count, children, defaultOpen = true, accent }: SectionProps) {
-  const [open, setOpen] = useState(defaultOpen)
-  return (
-    <div style={{ marginBottom: 16 }}>
-      <button onClick={() => setOpen(o => !o)} style={{
-        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-        background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0', marginBottom: 8, fontFamily: 'inherit',
-      }}>
-        {open ? <ChevronDown size={14} style={{ color: 'var(--text-faint)' }} /> : <ChevronRight size={14} style={{ color: 'var(--text-faint)' }} />}
-        <span style={{ fontWeight: 700, fontSize: 12, color: 'var(--text-primary)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{title}</span>
-        <span style={{
-          fontSize: 10, fontWeight: 700, padding: '1px 7px', borderRadius: 99,
-          background: accent === 'green' ? 'rgba(22,163,74,0.1)' : 'var(--bg-tertiary)',
-          color: accent === 'green' ? '#16a34a' : 'var(--text-faint)',
-        }}>{count}</span>
-      </button>
-      {open && <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{children}</div>}
-    </div>
-  )
-}
-
-interface ReservationsPanelProps {
-  tripId: number
-  reservations: Reservation[]
-  days: Day[]
-  assignments: AssignmentsMap
-  files?: TripFile[]
-  onAdd: () => void
-  onEdit: (reservation: Reservation) => void
-  onDelete: (id: number) => void
-  onNavigateToFiles: () => void
-}
-
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles }: ReservationsPanelProps) {
-  const { t, locale } = useTranslation()
-  const can = useCanDo()
-  const trip = useTripStore((s) => s.trip)
-  const canEdit = can('reservation_edit', trip)
-  const [showHint, setShowHint] = useState(() => !localStorage.getItem('hideReservationHint'))
-
-  const assignmentLookup = useMemo(() => buildAssignmentLookup(days, assignments), [days, assignments])
-
-  const allPending = reservations.filter(r => r.status !== 'confirmed')
-  const allConfirmed = reservations.filter(r => r.status === 'confirmed')
-  const total = reservations.length
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-      {/* Header */}
-      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid var(--border-faint)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('reservations.title')}</h2>
-          <p style={{ margin: '2px 0 0', fontSize: 12, color: 'var(--text-faint)' }}>
-            {total === 0 ? t('reservations.empty') : t('reservations.summary', { confirmed: allConfirmed.length, pending: allPending.length })}
-          </p>
-        </div>
-        {canEdit && (
-          <button onClick={onAdd} style={{
-            display: 'flex', alignItems: 'center', gap: 5, padding: '7px 14px', borderRadius: 99,
-            border: 'none', background: 'var(--accent)', color: 'var(--accent-text)',
-            fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-          }}>
-            <Plus size={13} /> <span className="hidden sm:inline">{t('reservations.addManual')}</span>
-          </button>
-        )}
-      </div>
-
-      {/* Content */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 24px' }}>
-        {total === 0 ? (
-          <div style={{ textAlign: 'center', padding: '60px 20px' }}>
-            <BookMarked size={36} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('reservations.empty')}</p>
-            <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: 0 }}>{t('reservations.emptyHint')}</p>
-          </div>
-        ) : (
-          <>
-            {allPending.length > 0 && (
-              <Section title={t('reservations.pending')} count={allPending.length} accent="gray">
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
-                </div>
-              </Section>
-            )}
-            {allConfirmed.length > 0 && (
-              <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green">
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-                  {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
-                </div>
-              </Section>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

client/src/components/Settings/AboutTab.tsx

@@ -1,146 +0,0 @@
-import React from 'react'
-import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import Section from './Section'
-
-interface Props {
-  appVersion: string
-}
-
-export default function AboutTab({ appVersion }: Props): React.ReactElement {
-  const { t } = useTranslation()
-
-  return (
-    <Section title={t('settings.about')} icon={Info}>
-      <style>{`
-        @keyframes heartPulse {
-          0%, 100% { transform: scale(1); }
-          50% { transform: scale(1.15); }
-        }
-      `}</style>
-      <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', marginBottom: 6, marginTop: -4 }}>
-        {t('settings.about.description')}
-      </p>
-      <p style={{ fontSize: 12, lineHeight: 1.6, color: 'var(--text-faint)', marginBottom: 16 }}>
-        {t('settings.about.madeWith')}{' '}
-        <Heart size={11} fill="#991b1b" stroke="#991b1b" style={{ display: 'inline-block', verticalAlign: '-1px', animation: 'heartPulse 1.5s ease-in-out infinite' }} />
-        {' '}{t('settings.about.madeBy')}{' '}
-        <span style={{ display: 'inline-flex', alignItems: 'center', background: 'var(--bg-tertiary)', borderRadius: 99, padding: '1px 7px', fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', verticalAlign: '1px' }}>v{appVersion}</span>
-      </p>
-
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <a
-          href="https://ko-fi.com/mauriceboe"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ff5e5b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Coffee size={20} style={{ color: '#ff5e5b' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Ko-fi</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://buymeacoffee.com/mauriceboe"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ffdd0015', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Heart size={20} style={{ color: '#ffdd00' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Buy Me a Coffee</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://discord.gg/nSdKaXgN"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#5865F215', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Discord</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>Join the community</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
-        <a
-          href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ef444415', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Bug size={20} style={{ color: '#ef4444' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.reportBug')}</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.reportBugHint')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f59e0b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <Lightbulb size={20} style={{ color: '#f59e0b' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.featureRequest')}</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.featureRequestHint')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-        <a
-          href="https://github.com/mauriceboe/TREK/wiki"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
-          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
-        >
-          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#6366f115', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <BookOpen size={20} style={{ color: '#6366f1' }} />
-          </div>
-          <div>
-            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Wiki</div>
-            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.wikiHint')}</div>
-          </div>
-          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
-        </a>
-      </div>
-    </Section>
-  )
-}

client/src/components/Settings/AccountTab.tsx

@@ -1,598 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { User, Save, Lock, KeyRound, AlertTriangle, Shield, Camera, Trash2, Copy, Download, Printer } from 'lucide-react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
-import { useTranslation } from '../../i18n'
-import { useAuthStore } from '../../store/authStore'
-import { useToast } from '../shared/Toast'
-import { authApi, adminApi } from '../../api/client'
-import { getApiErrorMessage } from '../../types'
-import type { UserWithOidc } from '../../types'
-import Section from './Section'
-
-const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
-
-export default function AccountTab(): React.ReactElement {
-  const { user, updateProfile, uploadAvatar, deleteAvatar, logout, loadUser, demoMode, appRequireMfa } = useAuthStore()
-  const [searchParams] = useSearchParams()
-  const navigate = useNavigate()
-  const { t } = useTranslation()
-  const toast = useToast()
-  const avatarInputRef = React.useRef<HTMLInputElement>(null)
-
-  const [saving, setSaving] = useState(false)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
-
-  // Profile
-  const [username, setUsername] = useState<string>(user?.username || '')
-  const [email, setEmail] = useState<string>(user?.email || '')
-
-  useEffect(() => {
-    setUsername(user?.username || '')
-    setEmail(user?.email || '')
-  }, [user])
-
-  // Password
-  const [currentPassword, setCurrentPassword] = useState('')
-  const [newPassword, setNewPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [oidcOnlyMode, setOidcOnlyMode] = useState(false)
-
-  useEffect(() => {
-    authApi.getAppConfig?.().then(config => {
-      if (config?.oidc_only_mode) setOidcOnlyMode(true)
-    }).catch(() => {})
-  }, [])
-
-  // MFA
-  const [mfaQr, setMfaQr] = useState<string | null>(null)
-  const [mfaSecret, setMfaSecret] = useState<string | null>(null)
-  const [mfaSetupCode, setMfaSetupCode] = useState('')
-  const [mfaDisablePwd, setMfaDisablePwd] = useState('')
-  const [mfaDisableCode, setMfaDisableCode] = useState('')
-  const [mfaLoading, setMfaLoading] = useState(false)
-  const [backupCodes, setBackupCodes] = useState<string[] | null>(null)
-
-  const mfaRequiredByPolicy =
-    !demoMode &&
-    !user?.mfa_enabled &&
-    (searchParams.get('mfa') === 'required' || appRequireMfa)
-
-  const backupCodesText = backupCodes?.join('\n') || ''
-
-  useEffect(() => {
-    if (!user?.mfa_enabled || backupCodes) return
-    try {
-      const raw = sessionStorage.getItem(MFA_BACKUP_SESSION_KEY)
-      if (!raw) return
-      const parsed = JSON.parse(raw) as unknown
-      if (Array.isArray(parsed) && parsed.length > 0 && parsed.every(x => typeof x === 'string')) {
-        setBackupCodes(parsed)
-      }
-    } catch {
-      sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
-    }
-  }, [user?.mfa_enabled, backupCodes])
-
-  const dismissBackupCodes = () => {
-    sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
-    setBackupCodes(null)
-  }
-
-  const copyBackupCodes = async () => {
-    if (!backupCodesText) return
-    try {
-      await navigator.clipboard.writeText(backupCodesText)
-      toast.success(t('settings.mfa.backupCopied'))
-    } catch {
-      toast.error(t('common.error'))
-    }
-  }
-
-  const downloadBackupCodes = () => {
-    if (!backupCodesText) return
-    const blob = new Blob([backupCodesText + '\n'], { type: 'text/plain;charset=utf-8' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'trek-mfa-backup-codes.txt'
-    document.body.appendChild(a)
-    a.click()
-    a.remove()
-    URL.revokeObjectURL(url)
-  }
-
-  const printBackupCodes = () => {
-    if (!backupCodesText) return
-    const html = `<!doctype html><html><head><meta charset="utf-8"/><title>TREK MFA Backup Codes</title>
-      <style>body{font-family:Arial,sans-serif;padding:32px}h1{font-size:20px}pre{font-size:16px;line-height:1.6}</style>
-      </head><body><h1>TREK MFA Backup Codes</h1><p>${new Date().toLocaleString()}</p><pre>${backupCodesText}</pre></body></html>`
-    const w = window.open('', '_blank', 'width=900,height=700')
-    if (!w) return
-    w.document.open()
-    w.document.write(html)
-    w.document.close()
-    w.focus()
-    w.print()
-  }
-
-  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-    try {
-      await uploadAvatar(file)
-      toast.success(t('settings.avatarUploaded'))
-    } catch {
-      toast.error(t('settings.avatarError'))
-    }
-    if (avatarInputRef.current) avatarInputRef.current.value = ''
-  }
-
-  const handleAvatarRemove = async () => {
-    try {
-      await deleteAvatar()
-      toast.success(t('settings.avatarRemoved'))
-    } catch {
-      toast.error(t('settings.avatarError'))
-    }
-  }
-
-  const saveProfile = async () => {
-    setSaving(true)
-    try {
-      await updateProfile({ username, email })
-      toast.success(t('settings.toast.profileSaved'))
-    } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : 'Error')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <>
-      <Section title={t('settings.account')} icon={User}>
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.username')}</label>
-          <input
-            type="text"
-            value={username}
-            onChange={e => setUsername(e.target.value)}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.email')}</label>
-          <input
-            type="email"
-            value={email}
-            onChange={e => setEmail(e.target.value)}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-          />
-        </div>
-
-        {/* Change Password */}
-        {!oidcOnlyMode && (
-          <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border-secondary)' }}>
-            <label className="block text-sm font-medium text-slate-700 mb-3">{t('settings.changePassword')}</label>
-            <div className="space-y-3">
-              <input
-                type="password"
-                value={currentPassword}
-                onChange={e => setCurrentPassword(e.target.value)}
-                placeholder={t('settings.currentPassword')}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-              <input
-                type="password"
-                value={newPassword}
-                onChange={e => setNewPassword(e.target.value)}
-                placeholder={t('settings.newPassword')}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-              <input
-                type="password"
-                value={confirmPassword}
-                onChange={e => setConfirmPassword(e.target.value)}
-                placeholder={t('settings.confirmPassword')}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-              <button
-                onClick={async () => {
-                  if (!currentPassword) return toast.error(t('settings.currentPasswordRequired'))
-                  if (!newPassword) return toast.error(t('settings.passwordRequired'))
-                  if (newPassword.length < 8) return toast.error(t('settings.passwordTooShort'))
-                  if (newPassword !== confirmPassword) return toast.error(t('settings.passwordMismatch'))
-                  try {
-                    await authApi.changePassword({ current_password: currentPassword, new_password: newPassword })
-                    toast.success(t('settings.passwordChanged'))
-                    setCurrentPassword(''); setNewPassword(''); setConfirmPassword('')
-                    await loadUser({ silent: true })
-                  } catch (err: unknown) {
-                    toast.error(getApiErrorMessage(err, t('common.error')))
-                  }
-                }}
-                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-                style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)' }}
-                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-              >
-                <Lock size={14} />
-                {t('settings.updatePassword')}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* MFA */}
-        <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border-secondary)' }}>
-          <div className="flex items-center gap-2 mb-3">
-            <KeyRound className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
-            <h3 className="font-semibold text-base m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.title')}</h3>
-          </div>
-          <div className="space-y-3">
-            {mfaRequiredByPolicy && (
-              <div className="flex gap-3 p-3 rounded-lg border text-sm"
-                style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
-                <AlertTriangle className="w-5 h-5 flex-shrink-0 text-amber-600" />
-                <p className="m-0 leading-relaxed">{t('settings.mfa.requiredByPolicy')}</p>
-              </div>
-            )}
-            <p className="text-sm m-0" style={{ color: 'var(--text-muted)', lineHeight: 1.5 }}>{t('settings.mfa.description')}</p>
-            {demoMode ? (
-              <p className="text-sm text-amber-700 m-0">{t('settings.mfa.demoBlocked')}</p>
-            ) : (
-              <>
-                <p className="text-sm font-medium m-0" style={{ color: 'var(--text-secondary)' }}>
-                  {user?.mfa_enabled ? t('settings.mfa.enabled') : t('settings.mfa.disabled')}
-                </p>
-
-                {!user?.mfa_enabled && !mfaQr && (
-                  <button
-                    type="button"
-                    disabled={mfaLoading}
-                    onClick={async () => {
-                      setMfaLoading(true)
-                      try {
-                        const data = await authApi.mfaSetup() as { qr_svg: string; secret: string }
-                        setMfaQr(data.qr_svg)
-                        setMfaSecret(data.secret)
-                        setMfaSetupCode('')
-                      } catch (err: unknown) {
-                        toast.error(getApiErrorMessage(err, t('common.error')))
-                      } finally {
-                        setMfaLoading(false)
-                      }
-                    }}
-                    className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-                    style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-                  >
-                    {mfaLoading ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" /> : <KeyRound size={14} />}
-                    {t('settings.mfa.setup')}
-                  </button>
-                )}
-
-                {!user?.mfa_enabled && mfaQr && (
-                  <div className="space-y-3">
-                    <p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.scanQr')}</p>
-                    <div className="rounded-lg border mx-auto block overflow-hidden" style={{ width: 'fit-content', borderColor: 'var(--border-primary)' }} dangerouslySetInnerHTML={{ __html: mfaQr! }} />
-                    <div>
-                      <label className="block text-xs font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.secretLabel')}</label>
-                      <code className="block text-xs p-2 rounded break-all" style={{ background: 'var(--bg-hover)', color: 'var(--text-primary)' }}>{mfaSecret}</code>
-                    </div>
-                    <input
-                      type="text"
-                      inputMode="numeric"
-                      value={mfaSetupCode}
-                      onChange={e => setMfaSetupCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
-                      placeholder={t('settings.mfa.codePlaceholder')}
-                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-                    />
-                    <div className="flex flex-wrap gap-2">
-                      <button
-                        type="button"
-                        disabled={mfaLoading || mfaSetupCode.length < 6}
-                        onClick={async () => {
-                          setMfaLoading(true)
-                          try {
-                            const resp = await authApi.mfaEnable({ code: mfaSetupCode }) as { backup_codes?: string[] }
-                            toast.success(t('settings.mfa.toastEnabled'))
-                            setMfaQr(null)
-                            setMfaSecret(null)
-                            setMfaSetupCode('')
-                            const codes = resp.backup_codes || null
-                            if (codes?.length) {
-                              try { sessionStorage.setItem(MFA_BACKUP_SESSION_KEY, JSON.stringify(codes)) } catch { /* ignore */ }
-                            }
-                            setBackupCodes(codes)
-                            await loadUser({ silent: true })
-                          } catch (err: unknown) {
-                            toast.error(getApiErrorMessage(err, t('common.error')))
-                          } finally {
-                            setMfaLoading(false)
-                          }
-                        }}
-                        className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
-                      >
-                        {t('settings.mfa.enable')}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => { setMfaQr(null); setMfaSecret(null); setMfaSetupCode('') }}
-                        className="px-4 py-2 rounded-lg text-sm border"
-                        style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}
-                      >
-                        {t('settings.mfa.cancelSetup')}
-                      </button>
-                    </div>
-                  </div>
-                )}
-
-                {user?.mfa_enabled && (
-                  <div className="space-y-3">
-                    <p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.disableTitle')}</p>
-                    <p className="text-xs" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.disableHint')}</p>
-                    <input
-                      type="password"
-                      value={mfaDisablePwd}
-                      onChange={e => setMfaDisablePwd(e.target.value)}
-                      placeholder={t('settings.currentPassword')}
-                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-                    />
-                    <input
-                      type="text"
-                      inputMode="numeric"
-                      value={mfaDisableCode}
-                      onChange={e => setMfaDisableCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
-                      placeholder={t('settings.mfa.codePlaceholder')}
-                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-                    />
-                    <button
-                      type="button"
-                      disabled={mfaLoading || !mfaDisablePwd || mfaDisableCode.length < 6}
-                      onClick={async () => {
-                        setMfaLoading(true)
-                        try {
-                          await authApi.mfaDisable({ password: mfaDisablePwd, code: mfaDisableCode })
-                          toast.success(t('settings.mfa.toastDisabled'))
-                          setMfaDisablePwd('')
-                          setMfaDisableCode('')
-                          sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
-                          setBackupCodes(null)
-                          await loadUser({ silent: true })
-                        } catch (err: unknown) {
-                          toast.error(getApiErrorMessage(err, t('common.error')))
-                        } finally {
-                          setMfaLoading(false)
-                        }
-                      }}
-                      className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 disabled:opacity-50"
-                    >
-                      {t('settings.mfa.disable')}
-                    </button>
-                  </div>
-                )}
-
-                {backupCodes && backupCodes.length > 0 && (
-                  <div className="space-y-3 p-3 rounded-lg border" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-hover)' }}>
-                    <p className="text-sm font-semibold m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.backupTitle')}</p>
-                    <p className="text-xs m-0" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.backupDescription')}</p>
-                    <pre className="text-xs m-0 p-2 rounded border overflow-auto" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', maxHeight: 220 }}>{backupCodesText}</pre>
-                    <p className="text-xs m-0" style={{ color: '#b45309' }}>{t('settings.mfa.backupWarning')}</p>
-                    <div className="flex flex-wrap gap-2">
-                      <button type="button" onClick={copyBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                        <Copy size={13} /> {t('settings.mfa.backupCopy')}
-                      </button>
-                      <button type="button" onClick={downloadBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                        <Download size={13} /> {t('settings.mfa.backupDownload')}
-                      </button>
-                      <button type="button" onClick={printBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                        <Printer size={13} /> {t('settings.mfa.backupPrint')}
-                      </button>
-                      <button type="button" onClick={dismissBackupCodes} className="px-3 py-2 rounded-lg text-xs border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                        {t('common.ok')}
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Avatar */}
-        <div className="flex items-center gap-4">
-          <div style={{ position: 'relative', flexShrink: 0 }}>
-            {user?.avatar_url ? (
-              <img src={user.avatar_url} alt="" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover' }} />
-            ) : (
-              <div style={{
-                width: 64, height: 64, borderRadius: '50%',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                fontSize: 24, fontWeight: 700,
-                background: 'var(--bg-hover)', color: 'var(--text-secondary)',
-              }}>
-                {user?.username?.charAt(0).toUpperCase()}
-              </div>
-            )}
-            <input ref={avatarInputRef} type="file" accept="image/*" onChange={handleAvatarUpload} style={{ display: 'none' }} />
-            <button
-              onClick={() => avatarInputRef.current?.click()}
-              style={{
-                position: 'absolute', bottom: -3, right: -3,
-                width: 28, height: 28, borderRadius: '50%',
-                background: 'var(--text-primary)', color: 'var(--bg-card)',
-                border: '2px solid var(--bg-card)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                cursor: 'pointer', padding: 0, transition: 'transform 0.15s, opacity 0.15s',
-              }}
-              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.15)'; e.currentTarget.style.opacity = '0.85' }}
-              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.opacity = '1' }}
-            >
-              <Camera size={14} />
-            </button>
-            {user?.avatar_url && (
-              <button
-                onClick={handleAvatarRemove}
-                style={{
-                  position: 'absolute', top: -2, right: -2,
-                  width: 20, height: 20, borderRadius: '50%',
-                  background: '#ef4444', color: 'white',
-                  border: '2px solid var(--bg-card)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  cursor: 'pointer', padding: 0,
-                }}
-              >
-                <Trash2 size={10} />
-              </button>
-            )}
-          </div>
-          <div className="flex flex-col gap-1">
-            <div className="text-sm" style={{ color: 'var(--text-muted)' }}>
-              <span className="font-medium" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--text-secondary)' }}>
-                {user?.role === 'admin' ? <><Shield size={13} /> {t('settings.roleAdmin')}</> : t('settings.roleUser')}
-              </span>
-              {(user as UserWithOidc)?.oidc_issuer && (
-                <span style={{
-                  display: 'inline-flex', alignItems: 'center', gap: 4,
-                  fontSize: 10, fontWeight: 500, padding: '1px 8px', borderRadius: 99,
-                  background: '#dbeafe', color: '#1d4ed8', marginLeft: 6,
-                }}>
-                  SSO
-                </span>
-              )}
-            </div>
-            {(user as UserWithOidc)?.oidc_issuer && (
-              <p style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -2 }}>
-                {t('settings.oidcLinked')} {(user as UserWithOidc).oidc_issuer!.replace('https://', '').replace(/\/+$/, '')}
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
-          <button
-            onClick={saveProfile}
-            disabled={saving}
-            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
-          >
-            {saving ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
-            <span className="hidden sm:inline">{t('settings.saveProfile')}</span>
-            <span className="sm:hidden">{t('common.save')}</span>
-          </button>
-          <button
-            onClick={async () => {
-              if (user?.role === 'admin') {
-                try {
-                  await adminApi.stats()
-                  const adminUsers = (await adminApi.users()).users.filter((u: { role: string }) => u.role === 'admin')
-                  if (adminUsers.length <= 1) {
-                    setShowDeleteConfirm('blocked')
-                    return
-                  }
-                } catch {}
-              }
-              setShowDeleteConfirm(true)
-            }}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors text-red-500 hover:bg-red-50"
-            style={{ border: '1px solid #fecaca' }}
-          >
-            <Trash2 size={14} />
-            <span className="hidden sm:inline">{t('settings.deleteAccount')}</span>
-            <span className="sm:hidden">{t('common.delete')}</span>
-          </button>
-        </div>
-      </Section>
-
-      {/* Delete Account Blocked */}
-      {showDeleteConfirm === 'blocked' && (
-        <div style={{
-          position: 'fixed', inset: 0, zIndex: 9999,
-          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
-        }} onClick={() => setShowDeleteConfirm(false)}>
-          <div style={{
-            background: 'var(--bg-card)', borderRadius: 16, padding: '28px 24px',
-            maxWidth: 400, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-          }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fef3c7', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Shield size={18} style={{ color: '#d97706' }} />
-              </div>
-              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('settings.deleteBlockedTitle')}</h3>
-            </div>
-            <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>
-              {t('settings.deleteBlockedMessage')}
-            </p>
-            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-              <button
-                onClick={() => setShowDeleteConfirm(false)}
-                style={{
-                  padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
-                  border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)',
-                  cursor: 'pointer', fontFamily: 'inherit',
-                }}
-              >
-                {t('common.ok') || 'OK'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Delete Account Confirm */}
-      {showDeleteConfirm === true && (
-        <div style={{
-          position: 'fixed', inset: 0, zIndex: 9999,
-          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
-        }} onClick={() => setShowDeleteConfirm(false)}>
-          <div style={{
-            background: 'var(--bg-card)', borderRadius: 16, padding: '28px 24px',
-            maxWidth: 400, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-          }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Trash2 size={18} style={{ color: '#ef4444' }} />
-              </div>
-              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('settings.deleteAccountTitle')}</h3>
-            </div>
-            <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>
-              {t('settings.deleteAccountWarning')}
-            </p>
-            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-              <button
-                onClick={() => setShowDeleteConfirm(false)}
-                style={{
-                  padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
-                  border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)',
-                  cursor: 'pointer', fontFamily: 'inherit',
-                }}
-              >
-                {t('common.cancel')}
-              </button>
-              <button
-                onClick={async () => {
-                  try {
-                    await authApi.deleteOwnAccount()
-                    logout()
-                    navigate('/login')
-                  } catch (err: unknown) {
-                    toast.error(getApiErrorMessage(err, t('common.error')))
-                    setShowDeleteConfirm(false)
-                  }
-                }}
-                style={{
-                  padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 600,
-                  border: 'none', background: '#ef4444', color: 'white',
-                  cursor: 'pointer', fontFamily: 'inherit',
-                }}
-              >
-                {t('settings.deleteAccountConfirm')}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -1,206 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Palette, Sun, Moon, Monitor } from 'lucide-react'
-import { SUPPORTED_LANGUAGES, useTranslation } from '../../i18n'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useToast } from '../shared/Toast'
-import Section from './Section'
-
-export default function DisplaySettingsTab(): React.ReactElement {
-  const { settings, updateSetting } = useSettingsStore()
-  const { t } = useTranslation()
-  const toast = useToast()
-  const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
-
-  useEffect(() => {
-    setTempUnit(settings.temperature_unit || 'celsius')
-  }, [settings.temperature_unit])
-
-  return (
-    <Section title={t('settings.display')} icon={Palette}>
-      {/* Color Mode */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.colorMode')}</label>
-        <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
-          {[
-            { value: 'light', label: t('settings.light'), icon: Sun },
-            { value: 'dark', label: t('settings.dark'), icon: Moon },
-            { value: 'auto', label: t('settings.auto'), icon: Monitor },
-          ].map(opt => {
-            const current = settings.dark_mode
-            const isActive = current === opt.value || (opt.value === 'light' && current === false) || (opt.value === 'dark' && current === true)
-            return (
-              <button
-                key={opt.value}
-                onClick={async () => {
-                  try {
-                    await updateSetting('dark_mode', opt.value)
-                  } catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
-                }}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 6,
-                  padding: '10px 14px', borderRadius: 10, cursor: 'pointer', flex: '1 1 0', justifyContent: 'center', minWidth: 0,
-                  fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
-                  border: isActive ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                  background: isActive ? 'var(--bg-hover)' : 'var(--bg-card)',
-                  color: 'var(--text-primary)',
-                  transition: 'all 0.15s',
-                }}
-              >
-                <opt.icon size={16} />
-                {opt.label}
-              </button>
-            )
-          })}
-        </div>
-      </div>
-
-      {/* Language */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
-        <div className="flex flex-wrap gap-3">
-          {SUPPORTED_LANGUAGES.map(opt => (
-            <button
-              key={opt.value}
-              onClick={async () => {
-                try { await updateSetting('language', opt.value) }
-                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
-              }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
-                border: settings.language === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: settings.language === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Temperature */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.temperature')}</label>
-        <div className="flex gap-3">
-          {[
-            { value: 'celsius', label: '°C Celsius' },
-            { value: 'fahrenheit', label: '°F Fahrenheit' },
-          ].map(opt => (
-            <button
-              key={opt.value}
-              onClick={async () => {
-                setTempUnit(opt.value)
-                try { await updateSetting('temperature_unit', opt.value) }
-                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
-              }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
-                border: tempUnit === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: tempUnit === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Time Format */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
-        <div className="flex gap-3">
-          {[
-            { value: '24h', label: '24h (14:30)' },
-            { value: '12h', label: '12h (2:30 PM)' },
-          ].map(opt => (
-            <button
-              key={opt.value}
-              onClick={async () => {
-                try { await updateSetting('time_format', opt.value) }
-                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
-              }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
-                border: settings.time_format === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: settings.time_format === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Route Calculation */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.routeCalculation')}</label>
-        <div className="flex gap-3">
-          {[
-            { value: true, label: t('settings.on') || 'On' },
-            { value: false, label: t('settings.off') || 'Off' },
-          ].map(opt => (
-            <button
-              key={String(opt.value)}
-              onClick={async () => {
-                try { await updateSetting('route_calculation', opt.value) }
-                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
-              }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
-                border: (settings.route_calculation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: (settings.route_calculation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Blur Booking Codes */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>
-        <div className="flex gap-3">
-          {[
-            { value: true, label: t('settings.on') || 'On' },
-            { value: false, label: t('settings.off') || 'Off' },
-          ].map(opt => (
-            <button
-              key={String(opt.value)}
-              onClick={async () => {
-                try { await updateSetting('blur_booking_codes', opt.value) }
-                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
-              }}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
-                border: (!!settings.blur_booking_codes) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: (!!settings.blur_booking_codes) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    </Section>
-  )
-}

client/src/components/Settings/IntegrationsTab.tsx

@@ -1,253 +0,0 @@
-import Section from './Section'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from '../../i18n'
-import { useToast } from '../shared/Toast'
-import { Trash2, Copy, Terminal, Plus, Check } from 'lucide-react'
-import { authApi } from '../../api/client'
-import { useAddonStore } from '../../store/addonStore'
-import PhotoProvidersSection from './PhotoProvidersSection'
-
-
-interface McpToken {
-  id: number
-  name: string
-  token_prefix: string
-  created_at: string
-  last_used_at: string | null
-}
-
-export default function IntegrationsTab(): React.ReactElement {
-  const { t, locale } = useTranslation()
-  const toast = useToast()
-  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
-  const mcpEnabled = addonEnabled('mcp')
-
-  useEffect(() => {
-    loadAddons()
-  }, [loadAddons])
-
-  // MCP state
-  const [mcpTokens, setMcpTokens] = useState<McpToken[]>([])
-  const [mcpModalOpen, setMcpModalOpen] = useState(false)
-  const [mcpNewName, setMcpNewName] = useState('')
-  const [mcpCreatedToken, setMcpCreatedToken] = useState<string | null>(null)
-  const [mcpCreating, setMcpCreating] = useState(false)
-  const [mcpDeleteId, setMcpDeleteId] = useState<number | null>(null)
-  const [copiedKey, setCopiedKey] = useState<string | null>(null)
-
-  const mcpEndpoint = `${window.location.origin}/mcp`
-  const mcpJsonConfig = `{
-  "mcpServers": {
-    "trek": {
-      "command": "npx",
-      "args": [
-        "mcp-remote",
-        "${mcpEndpoint}",
-        "--header",
-        "Authorization: Bearer <your_token>"
-      ]
-    }
-  }
-}`
-
-  useEffect(() => {
-    if (mcpEnabled) {
-      authApi.mcpTokens.list().then(d => setMcpTokens(d.tokens || [])).catch(() => {})
-    }
-  }, [mcpEnabled])
-
-  const handleCreateMcpToken = async () => {
-    if (!mcpNewName.trim()) return
-    setMcpCreating(true)
-    try {
-      const d = await authApi.mcpTokens.create(mcpNewName.trim())
-      setMcpCreatedToken(d.token.raw_token)
-      setMcpNewName('')
-      setMcpTokens(prev => [{ id: d.token.id, name: d.token.name, token_prefix: d.token.token_prefix, created_at: d.token.created_at, last_used_at: null }, ...prev])
-    } catch {
-      toast.error(t('settings.mcp.toast.createError'))
-    } finally {
-      setMcpCreating(false)
-    }
-  }
-
-  const handleDeleteMcpToken = async (id: number) => {
-    try {
-      await authApi.mcpTokens.delete(id)
-      setMcpTokens(prev => prev.filter(tk => tk.id !== id))
-      setMcpDeleteId(null)
-      toast.success(t('settings.mcp.toast.deleted'))
-    } catch {
-      toast.error(t('settings.mcp.toast.deleteError'))
-    }
-  }
-
-  const handleCopy = (text: string, key: string) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopiedKey(key)
-      setTimeout(() => setCopiedKey(null), 2000)
-    })
-  }
-
-  return (
-    <>
-      <PhotoProvidersSection />
-      {mcpEnabled && (
-        <Section title={t('settings.mcp.title')} icon={Terminal}>
-          {/* Endpoint URL */}
-          <div>
-            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.endpoint')}</label>
-            <div className="flex items-center gap-2">
-              <code className="flex-1 px-3 py-2 rounded-lg text-sm font-mono border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
-                {mcpEndpoint}
-              </code>
-              <button onClick={() => handleCopy(mcpEndpoint, 'endpoint')}
-                className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
-                style={{ borderColor: 'var(--border-primary)' }} title={t('settings.mcp.copy')}>
-                {copiedKey === 'endpoint' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />}
-              </button>
-            </div>
-          </div>
-
-          {/* JSON config box */}
-          <div>
-            <div className="flex items-center justify-between mb-1.5">
-              <label className="block text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</label>
-              <button onClick={() => handleCopy(mcpJsonConfig, 'json')}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
-                style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                {copiedKey === 'json' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
-                {copiedKey === 'json' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
-              </button>
-            </div>
-            <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
-              {mcpJsonConfig}
-            </pre>
-            <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHint')}</p>
-          </div>
-
-          {/* Token list */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.apiTokens')}</label>
-              <button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
-                style={{ background: 'var(--accent-primary, #4f46e5)', color: '#fff' }}>
-                <Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
-              </button>
-            </div>
-
-            {mcpTokens.length === 0 ? (
-              <p className="text-sm py-3 text-center rounded-lg border" style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)' }}>
-                {t('settings.mcp.noTokens')}
-              </p>
-            ) : (
-              <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
-                {mcpTokens.map((token, i) => (
-                  <div key={token.id} className="flex items-center gap-3 px-4 py-3"
-                    style={{ borderBottom: i < mcpTokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
-                      <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                        {token.token_prefix}...
-                        <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(token.created_at).toLocaleDateString(locale)}</span>
-                        {token.last_used_at && (
-                          <span className="ml-2">· {t('settings.mcp.tokenUsedAt')} {new Date(token.last_used_at).toLocaleDateString(locale)}</span>
-                        )}
-                      </p>
-                    </div>
-                    <button onClick={() => setMcpDeleteId(token.id)}
-                      className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
-                      style={{ color: 'var(--text-tertiary)' }} title={t('settings.mcp.deleteTokenTitle')}>
-                      <Trash2 className="w-4 h-4" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </Section>
-      )}
-
-      {/* Create MCP Token modal */}
-      {mcpModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
-          onClick={e => { if (e.target === e.currentTarget && !mcpCreatedToken) setMcpModalOpen(false) }}>
-          <div className="rounded-xl shadow-xl w-full max-w-md p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
-            {!mcpCreatedToken ? (
-              <>
-                <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createTitle')}</h3>
-                <div>
-                  <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.tokenName')}</label>
-                  <input type="text" value={mcpNewName} onChange={e => setMcpNewName(e.target.value)}
-                    onKeyDown={e => e.key === 'Enter' && handleCreateMcpToken()}
-                    placeholder={t('settings.mcp.modal.tokenNamePlaceholder')}
-                    className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
-                    style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
-                    autoFocus />
-                </div>
-                <div className="flex gap-2 justify-end pt-1">
-                  <button onClick={() => setMcpModalOpen(false)}
-                    className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                    {t('common.cancel')}
-                  </button>
-                  <button onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
-                    className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
-                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
-                    {mcpCreating ? t('settings.mcp.modal.creating') : t('settings.mcp.modal.create')}
-                  </button>
-                </div>
-              </>
-            ) : (
-              <>
-                <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createdTitle')}</h3>
-                <div className="flex items-start gap-2 p-3 rounded-lg border border-amber-200" style={{ background: 'rgba(251,191,36,0.1)' }}>
-                  <span className="text-amber-500 mt-0.5">⚠</span>
-                  <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.createdWarning')}</p>
-                </div>
-                <div className="relative">
-                  <pre className="p-3 pr-10 rounded-lg text-xs font-mono break-all border whitespace-pre-wrap" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
-                    {mcpCreatedToken}
-                  </pre>
-                  <button onClick={() => handleCopy(mcpCreatedToken, 'new-token')}
-                    className="absolute top-2 right-2 p-1.5 rounded transition-colors hover:bg-slate-200 dark:hover:bg-slate-600"
-                    style={{ color: 'var(--text-secondary)' }} title={t('settings.mcp.copy')}>
-                    {copiedKey === 'new-token' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
-                  </button>
-                </div>
-                <div className="flex justify-end">
-                  <button onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
-                    className="px-4 py-2 rounded-lg text-sm font-medium text-white"
-                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
-                    {t('settings.mcp.modal.done')}
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Delete MCP Token confirm */}
-      {mcpDeleteId !== null && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
-          onClick={e => { if (e.target === e.currentTarget) setMcpDeleteId(null) }}>
-          <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
-            <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.deleteTokenTitle')}</h3>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.deleteTokenMessage')}</p>
-            <div className="flex gap-2 justify-end">
-              <button onClick={() => setMcpDeleteId(null)}
-                className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                {t('common.cancel')}
-              </button>
-              <button onClick={() => handleDeleteMcpToken(mcpDeleteId)}
-                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
-                {t('settings.mcp.deleteTokenTitle')}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}

client/src/components/Settings/MapSettingsTab.tsx

@@ -1,162 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import { Map, Save } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useToast } from '../shared/Toast'
-import CustomSelect from '../shared/CustomSelect'
-import { MapView } from '../Map/MapView'
-import Section from './Section'
-import type { Place } from '../../types'
-
-interface MapPreset {
-  name: string
-  url: string
-}
-
-const MAP_PRESETS: MapPreset[] = [
-  { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
-  { name: 'OpenStreetMap DE', url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png' },
-  { name: 'CartoDB Light', url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png' },
-  { name: 'CartoDB Dark', url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' },
-  { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
-]
-
-export default function MapSettingsTab(): React.ReactElement {
-  const { settings, updateSettings } = useSettingsStore()
-  const { t } = useTranslation()
-  const toast = useToast()
-  const [saving, setSaving] = useState(false)
-  const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
-  const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
-  const [defaultLng, setDefaultLng] = useState<number | string>(settings.default_lng || 2.3522)
-  const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)
-
-  useEffect(() => {
-    setMapTileUrl(settings.map_tile_url || '')
-    setDefaultLat(settings.default_lat || 48.8566)
-    setDefaultLng(settings.default_lng || 2.3522)
-    setDefaultZoom(settings.default_zoom || 10)
-  }, [settings])
-
-  const handleMapClick = useCallback((mapInfo) => {
-    setDefaultLat(mapInfo.latlng.lat)
-    setDefaultLng(mapInfo.latlng.lng)
-  }, [])
-
-  const mapPlaces = useMemo((): Place[] => [{
-    id: 1,
-    trip_id: 1,
-    name: 'Default map center',
-    description: '',
-    lat: defaultLat as number,
-    lng: defaultLng as number,
-    address: '',
-    category_id: 0,
-    icon: null,
-    price: null,
-    image_url: null,
-    google_place_id: null,
-    osm_id: null,
-    route_geometry: null,
-    place_time: null,
-    end_time: null,
-    created_at: Date(),
-  }], [defaultLat, defaultLng])
-
-  const saveMapSettings = async (): Promise<void> => {
-    setSaving(true)
-    try {
-      await updateSettings({
-        map_tile_url: mapTileUrl,
-        default_lat: parseFloat(String(defaultLat)),
-        default_lng: parseFloat(String(defaultLng)),
-        default_zoom: parseInt(String(defaultZoom)),
-      })
-      toast.success(t('settings.toast.mapSaved'))
-    } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : 'Error')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <Section title={t('settings.map')} icon={Map}>
-      <div>
-        <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapTemplate')}</label>
-        <CustomSelect
-          value={mapTileUrl}
-          onChange={(value: string) => { if (value) setMapTileUrl(value) }}
-          placeholder={t('settings.mapTemplatePlaceholder.select')}
-          options={MAP_PRESETS.map(p => ({ value: p.url, label: p.name }))}
-          size="sm"
-          style={{ marginBottom: 8 }}
-        />
-        <input
-          type="text"
-          value={mapTileUrl}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapTileUrl(e.target.value)}
-          placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-        />
-        <p className="text-xs text-slate-400 mt-1">{t('settings.mapDefaultHint')}</p>
-      </div>
-
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.latitude')}</label>
-          <input
-            type="number"
-            step="any"
-            value={defaultLat}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLat(e.target.value)}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.longitude')}</label>
-          <input
-            type="number"
-            step="any"
-            value={defaultLng}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLng(e.target.value)}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-          />
-        </div>
-      </div>
-
-      <div>
-        <div style={{ position: 'relative', inset: 0, height: '200px', width: '100%' }}>
-          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-          {React.createElement(MapView as any, {
-            places: mapPlaces,
-            dayPlaces: [],
-            route: null,
-            routeSegments: null,
-            selectedPlaceId: null,
-            onMarkerClick: null,
-            onMapClick: handleMapClick,
-            onMapContextMenu: null,
-            center: [settings.default_lat, settings.default_lng],
-            zoom: defaultZoom,
-            tileUrl: mapTileUrl,
-            fitKey: null,
-            dayOrderMap: [],
-            leftWidth: 0,
-            rightWidth: 0,
-            hasInspector: false,
-          })}
-        </div>
-      </div>
-
-      <button
-        onClick={saveMapSettings}
-        disabled={saving}
-        className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
-      >
-        {saving ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
-        {t('settings.saveMap')}
-      </button>
-    </Section>
-  )
-}

client/src/components/Settings/NotificationsTab.tsx

@@ -1,196 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Lock } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { notificationsApi, settingsApi } from '../../api/client'
-import { useToast } from '../shared/Toast'
-import ToggleSwitch from './ToggleSwitch'
-import Section from './Section'
-
-interface PreferencesMatrix {
-  preferences: Record<string, Record<string, boolean>>
-  available_channels: { email: boolean; webhook: boolean; inapp: boolean }
-  event_types: string[]
-  implemented_combos: Record<string, string[]>
-}
-
-const CHANNEL_LABEL_KEYS: Record<string, string> = {
-  email: 'settings.notificationPreferences.email',
-  webhook: 'settings.notificationPreferences.webhook',
-  inapp: 'settings.notificationPreferences.inapp',
-}
-
-const EVENT_LABEL_KEYS: Record<string, string> = {
-  trip_invite: 'settings.notifyTripInvite',
-  booking_change: 'settings.notifyBookingChange',
-  trip_reminder: 'settings.notifyTripReminder',
-  vacay_invite: 'settings.notifyVacayInvite',
-  photos_shared: 'settings.notifyPhotosShared',
-  collab_message: 'settings.notifyCollabMessage',
-  packing_tagged: 'settings.notifyPackingTagged',
-  version_available: 'settings.notifyVersionAvailable',
-}
-
-export default function NotificationsTab(): React.ReactElement {
-  const { t } = useTranslation()
-  const toast = useToast()
-  const [matrix, setMatrix] = useState<PreferencesMatrix | null>(null)
-  const [saving, setSaving] = useState(false)
-  const [webhookUrl, setWebhookUrl] = useState('')
-  const [webhookIsSet, setWebhookIsSet] = useState(false)
-  const [webhookSaving, setWebhookSaving] = useState(false)
-  const [webhookTesting, setWebhookTesting] = useState(false)
-
-  useEffect(() => {
-    notificationsApi.getPreferences().then((data: PreferencesMatrix) => setMatrix(data)).catch(() => {})
-    settingsApi.get().then((data: { settings: Record<string, unknown> }) => {
-      const val = (data.settings?.webhook_url as string) || ''
-      if (val === '••••••••') {
-        setWebhookIsSet(true)
-        setWebhookUrl('')
-      } else {
-        setWebhookUrl(val)
-      }
-    }).catch(() => {})
-  }, [])
-
-  const visibleChannels = matrix
-    ? (['email', 'webhook', 'inapp'] as const).filter(ch => {
-        if (!matrix.available_channels[ch]) return false
-        return matrix.event_types.some(evt => matrix.implemented_combos[evt]?.includes(ch))
-      })
-    : []
-
-  const toggle = async (eventType: string, channel: string) => {
-    if (!matrix) return
-    const current = matrix.preferences[eventType]?.[channel] ?? true
-    const updated = {
-      ...matrix.preferences,
-      [eventType]: { ...matrix.preferences[eventType], [channel]: !current },
-    }
-    setMatrix(m => m ? { ...m, preferences: updated } : m)
-    setSaving(true)
-    try {
-      await notificationsApi.updatePreferences(updated)
-    } catch {
-      setMatrix(m => m ? { ...m, preferences: matrix.preferences } : m)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const saveWebhookUrl = async () => {
-    setWebhookSaving(true)
-    try {
-      await settingsApi.set('webhook_url', webhookUrl)
-      if (webhookUrl) setWebhookIsSet(true)
-      else setWebhookIsSet(false)
-      toast.success(t('settings.webhookUrl.saved'))
-    } catch {
-      toast.error(t('common.error'))
-    } finally {
-      setWebhookSaving(false)
-    }
-  }
-
-  const testWebhookUrl = async () => {
-    if (!webhookUrl && !webhookIsSet) return
-    setWebhookTesting(true)
-    try {
-      const result = await notificationsApi.testWebhook(webhookUrl || undefined)
-      if (result.success) toast.success(t('settings.webhookUrl.testSuccess'))
-      else toast.error(result.error || t('settings.webhookUrl.testFailed'))
-    } catch {
-      toast.error(t('settings.webhookUrl.testFailed'))
-    } finally {
-      setWebhookTesting(false)
-    }
-  }
-
-  const renderContent = () => {
-    if (!matrix) return <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>Loading…</p>
-
-    if (visibleChannels.length === 0) {
-      return (
-        <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>
-          {t('settings.notificationPreferences.noChannels')}
-        </p>
-      )
-    }
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
-        {saving && <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>Saving…</p>}
-        {matrix.available_channels.webhook && (
-          <div style={{ marginBottom: 16, padding: '12px', background: 'var(--bg-secondary)', borderRadius: 8, border: '1px solid var(--border-primary)' }}>
-            <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>
-              {t('settings.webhookUrl.label')}
-            </label>
-            <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>{t('settings.webhookUrl.hint')}</p>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-              <input
-                type="text"
-                value={webhookUrl}
-                onChange={e => setWebhookUrl(e.target.value)}
-                placeholder={webhookIsSet ? '••••••••' : t('settings.webhookUrl.placeholder')}
-                style={{ flex: 1, fontSize: 13, padding: '6px 10px', border: '1px solid var(--border-primary)', borderRadius: 6, background: 'var(--bg-primary)', color: 'var(--text-primary)' }}
-              />
-              <button
-                onClick={saveWebhookUrl}
-                disabled={webhookSaving}
-                style={{ fontSize: 12, padding: '6px 12px', background: 'var(--text-primary)', color: 'var(--bg-primary)', border: 'none', borderRadius: 6, cursor: webhookSaving ? 'not-allowed' : 'pointer', opacity: webhookSaving ? 0.6 : 1 }}
-              >
-                {t('settings.webhookUrl.save')}
-              </button>
-              <button
-                onClick={testWebhookUrl}
-                disabled={(!webhookUrl && !webhookIsSet) || webhookTesting}
-                style={{ fontSize: 12, padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: ((!webhookUrl && !webhookIsSet) || webhookTesting) ? 'not-allowed' : 'pointer', opacity: ((!webhookUrl && !webhookIsSet) || webhookTesting) ? 0.5 : 1 }}
-              >
-                {t('settings.webhookUrl.test')}
-              </button>
-            </div>
-          </div>
-        )}
-        {/* Header row */}
-        <div style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '64px').join(' ')}`, gap: 4, paddingBottom: 6, marginBottom: 4, borderBottom: '1px solid var(--border-primary)' }}>
-          <span />
-          {visibleChannels.map(ch => (
-            <span key={ch} style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textAlign: 'center', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
-              {t(CHANNEL_LABEL_KEYS[ch]) || ch}
-            </span>
-          ))}
-        </div>
-        {/* Event rows */}
-        {matrix.event_types.map(eventType => {
-          const implementedForEvent = matrix.implemented_combos[eventType] ?? []
-          const relevantChannels = visibleChannels.filter(ch => implementedForEvent.includes(ch))
-          if (relevantChannels.length === 0) return null
-          return (
-            <div key={eventType} style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '64px').join(' ')}`, gap: 4, alignItems: 'center', padding: '6px 0', borderBottom: '1px solid var(--border-primary)' }}>
-              <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>
-                {t(EVENT_LABEL_KEYS[eventType]) || eventType}
-              </span>
-              {visibleChannels.map(ch => {
-                if (!implementedForEvent.includes(ch)) {
-                  return <span key={ch} style={{ textAlign: 'center', color: 'var(--text-faint)', fontSize: 14 }}>—</span>
-                }
-                const isOn = matrix.preferences[eventType]?.[ch] ?? true
-                return (
-                  <div key={ch} style={{ display: 'flex', justifyContent: 'center' }}>
-                    <ToggleSwitch on={isOn} onToggle={() => toggle(eventType, ch)} />
-                  </div>
-                )
-              })}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-
-  return (
-    <Section title={t('settings.notifications')} icon={Lock}>
-      {renderContent()}
-    </Section>
-  )
-}

client/src/components/Settings/PhotoProvidersSection.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { Camera, Save } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { useToast } from '../../components/shared/Toast'
-import apiClient from '../../api/client'
-import { useAddonStore } from '../../store/addonStore'
-import Section from './Section'
-
-interface ProviderField {
-  key: string
-  label: string
-  input_type: string
-  placeholder?: string | null
-  required: boolean
-  secret: boolean
-  settings_key?: string | null
-  payload_key?: string | null
-  sort_order: number
-}
-
-interface PhotoProviderAddon {
-  id: string
-  name: string
-  type: string
-  enabled: boolean
-  config?: Record<string, unknown>
-  fields?: ProviderField[]
-}
-
-interface ProviderConfig {
-  settings_get?: string
-  settings_put?: string
-  status_get?: string
-  test_get?: string
-  test_post?: string
-}
-
-const getProviderConfig = (provider: PhotoProviderAddon): ProviderConfig => {
-  const raw = provider.config || {}
-  return {
-    settings_get: typeof raw.settings_get === 'string' ? raw.settings_get : undefined,
-    settings_put: typeof raw.settings_put === 'string' ? raw.settings_put : undefined,
-    status_get: typeof raw.status_get === 'string' ? raw.status_get : undefined,
-    test_get: typeof raw.test_get === 'string' ? raw.test_get : undefined,
-    test_post: typeof raw.test_post === 'string' ? raw.test_post : undefined,
-  }
-}
-
-const getProviderFields = (provider: PhotoProviderAddon): ProviderField[] => {
-  return [...(provider.fields || [])].sort((a, b) => a.sort_order - b.sort_order)
-}
-
-export default function PhotoProvidersSection(): React.ReactElement {
-  const { t } = useTranslation()
-  const toast = useToast()
-  const { isEnabled: addonEnabled, addons } = useAddonStore()
-  const memoriesEnabled = addonEnabled('memories')
-
-  const [saving, setSaving] = useState<Record<string, boolean>>({})
-  const [providerValues, setProviderValues] = useState<Record<string, Record<string, string>>>({})
-  const [providerConnected, setProviderConnected] = useState<Record<string, boolean>>({})
-  const [providerTesting, setProviderTesting] = useState<Record<string, boolean>>({})
-
-  const activePhotoProviders = useMemo(
-    () => addons.filter(a => a.type === 'photo_provider' && a.enabled) as PhotoProviderAddon[],
-    [addons],
-  )
-
-  const buildProviderPayload = (provider: PhotoProviderAddon): Record<string, unknown> => {
-    const values = providerValues[provider.id] || {}
-    const payload: Record<string, unknown> = {}
-    for (const field of getProviderFields(provider)) {
-      const payloadKey = field.payload_key || field.settings_key || field.key
-      const value = (values[field.key] || '').trim()
-      if (field.secret && !value) continue
-      payload[payloadKey] = value
-    }
-    return payload
-  }
-
-  const refreshProviderConnection = async (provider: PhotoProviderAddon) => {
-    const cfg = getProviderConfig(provider)
-    const statusPath = cfg.status_get
-    if (!statusPath) return
-    try {
-      const res = await apiClient.get(statusPath)
-      setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data?.connected }))
-    } catch {
-      setProviderConnected(prev => ({ ...prev, [provider.id]: false }))
-    }
-  }
-
-  const activeProviderSignature = useMemo(
-    () => activePhotoProviders.map(provider => provider.id).join('|'),
-    [activePhotoProviders],
-  )
-
-  useEffect(() => {
-    let isCancelled = false
-
-    for (const provider of activePhotoProviders) {
-      const cfg = getProviderConfig(provider)
-      const fields = getProviderFields(provider)
-
-      if (cfg.settings_get) {
-        apiClient.get(cfg.settings_get).then(res => {
-          if (isCancelled) return
-
-          const nextValues: Record<string, string> = {}
-          for (const field of fields) {
-            // Do not prefill secret fields; user can overwrite only when needed.
-            if (field.secret) continue
-            const sourceKey = field.settings_key || field.payload_key || field.key
-            const rawValue = (res.data as Record<string, unknown>)[sourceKey]
-            nextValues[field.key] = typeof rawValue === 'string' ? rawValue : rawValue != null ? String(rawValue) : ''
-          }
-          setProviderValues(prev => ({
-            ...prev,
-            [provider.id]: { ...(prev[provider.id] || {}), ...nextValues },
-          }))
-          if (typeof res.data?.connected === 'boolean') {
-            setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data.connected }))
-          }
-        }).catch(() => { })
-      }
-
-      refreshProviderConnection(provider).catch(() => { })
-    }
-
-    return () => {
-      isCancelled = true
-    }
-  }, [activePhotoProviders, activeProviderSignature])
-
-  const handleProviderFieldChange = (providerId: string, key: string, value: string) => {
-    setProviderValues(prev => ({
-      ...prev,
-      [providerId]: { ...(prev[providerId] || {}), [key]: value },
-    }))
-  }
-
-  const isProviderSaveDisabled = (provider: PhotoProviderAddon): boolean => {
-    const values = providerValues[provider.id] || {}
-    return getProviderFields(provider).some(field => {
-      if (!field.required) return false
-      return !(values[field.key] || '').trim()
-    })
-  }
-
-  const handleSaveProvider = async (provider: PhotoProviderAddon) => {
-    const cfg = getProviderConfig(provider)
-    if (!cfg.settings_put) return
-    setSaving(s => ({ ...s, [provider.id]: true }))
-    try {
-      await apiClient.put(cfg.settings_put, buildProviderPayload(provider))
-      await refreshProviderConnection(provider)
-      toast.success(t('memories.saved', { provider_name: provider.name }))
-    } catch {
-      toast.error(t('memories.saveError', { provider_name: provider.name }))
-    } finally {
-      setSaving(s => ({ ...s, [provider.id]: false }))
-    }
-  }
-
-  const handleTestProvider = async (provider: PhotoProviderAddon) => {
-    const cfg = getProviderConfig(provider)
-    const testPath = cfg.test_post || cfg.test_get || cfg.status_get
-    if (!testPath) return
-    setProviderTesting(prev => ({ ...prev, [provider.id]: true }))
-    try {
-      const payload = buildProviderPayload(provider)
-      const res = cfg.test_post ? await apiClient.post(testPath, payload) : await apiClient.get(testPath)
-      const ok = !!res.data?.connected
-      setProviderConnected(prev => ({ ...prev, [provider.id]: ok }))
-      if (ok) {
-        toast.success(t('memories.connectionSuccess', { provider_name: provider.name }))
-      } else {
-        toast.error(`${t('memories.connectionError', { provider_name: provider.name })} ${res.data?.error ? `: ${String(res.data.error)}` : ''}`)
-      }
-    } catch {
-      toast.error(t('memories.connectionError', { provider_name: provider.name }))
-    } finally {
-      setProviderTesting(prev => ({ ...prev, [provider.id]: false }))
-    }
-  }
-
-  const renderPhotoProviderSection = (provider: PhotoProviderAddon): React.ReactElement => {
-    const fields = getProviderFields(provider)
-    const cfg = getProviderConfig(provider)
-    const values = providerValues[provider.id] || {}
-    const connected = !!providerConnected[provider.id]
-    const testing = !!providerTesting[provider.id]
-    const canSave = !!cfg.settings_put
-    const canTest = !!(cfg.test_post || cfg.test_get || cfg.status_get)
-
-    return (
-      <Section key={provider.id} title={provider.name || provider.id} icon={Camera}>
-        <div className="space-y-3">
-          {fields.map(field => (
-            <div key={`${provider.id}-${field.key}`}>
-              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
-              <input
-                type={field.input_type || 'text'}
-                value={values[field.key] || ''}
-                onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.value)}
-                placeholder={field.secret && connected && !(values[field.key] || '') ? '••••••••' : (field.placeholder || '')}
-                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
-              />
-            </div>
-          ))}
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => handleSaveProvider(provider)}
-              disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
-              className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
-              title={!canSave ? 'Save route is not configured for this provider' : isProviderSaveDisabled(provider) ? 'Please fill all required fields' : ''}
-            >
-              <Save className="w-4 h-4" /> {t('common.save')}
-            </button>
-            <button
-              onClick={() => handleTestProvider(provider)}
-              disabled={!canTest || testing}
-              className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
-              title={!canTest ? 'Test route is not configured for this provider' : ''}
-            >
-              {testing
-                ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
-                : <Camera className="w-4 h-4" />}
-              {t('memories.testConnection')}
-            </button>
-            {connected && (
-              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
-                <span className="w-2 h-2 bg-green-500 rounded-full" />
-                {t('memories.connected')}
-              </span>
-            )}
-          </div>
-        </div>
-      </Section>
-    )
-  }
-
-  if (!memoriesEnabled) {
-    return <></>
-  }
-
-  return <>{activePhotoProviders.map(provider => renderPhotoProviderSection(provider))}</>
-}

client/src/components/Settings/Section.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-interface SectionProps {
-  title: string
-  icon: LucideIcon
-  children: React.ReactNode
-}
-
-export default function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
-  return (
-    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', marginBottom: 24 }}>
-      <div className="px-6 py-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-secondary)' }}>
-        <Icon className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
-        <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
-      </div>
-      <div className="p-6 space-y-4">
-        {children}
-      </div>
-    </div>
-  )
-}

client/src/components/Settings/ToggleSwitch.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
-  return (
-    <button onClick={onToggle}
-      style={{
-        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
-        background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
-        transition: 'background 0.2s',
-      }}>
-      <span style={{
-        position: 'absolute', top: 2, left: on ? 22 : 2,
-        width: 20, height: 20, borderRadius: '50%', background: 'white',
-        transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-      }} />
-    </button>
-  )
-}

client/src/components/Todo/TodoListPanel.tsx

@@ -1,778 +0,0 @@
-import { useState, useMemo, useEffect } from 'react'
-import { useTripStore } from '../../store/tripStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import { tripsApi } from '../../api/client'
-import apiClient from '../../api/client'
-import CustomSelect from '../shared/CustomSelect'
-import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import { formatDate as fmtDate } from '../../utils/formatters'
-import {
-  CheckSquare, Square, Plus, ChevronRight, Flag,
-  X, Check, Calendar, User, FolderPlus, AlertCircle, ListChecks, Inbox, CheckCheck, Trash2,
-} from 'lucide-react'
-import type { TodoItem } from '../../types'
-
-const KAT_COLORS = [
-  '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f97316',
-  '#06b6d4', '#ef4444', '#eab308', '#8b5cf6', '#14b8a6',
-]
-
-const PRIO_CONFIG: Record<number, { label: string; color: string }> = {
-  1: { label: 'P1', color: '#ef4444' },
-  2: { label: 'P2', color: '#f59e0b' },
-  3: { label: 'P3', color: '#3b82f6' },
-}
-
-function katColor(kat: string, allCategories: string[]) {
-  const idx = allCategories.indexOf(kat)
-  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
-  let h = 0
-  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
-  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
-}
-
-type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
-
-interface Member { id: number; username: string; avatar: string | null }
-
-export default function TodoListPanel({ tripId, items }: { tripId: number; items: TodoItem[] }) {
-  const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
-  const canEdit = useCanDo('packing_edit')
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const formatDate = (d: string) => fmtDate(d, locale) || d
-
-  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 767px)')
-    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
-  }, [])
-
-  const [filter, setFilter] = useState<FilterType>('all')
-  const [selectedId, setSelectedId] = useState<number | null>(null)
-  const [isAddingNew, setIsAddingNew] = useState(false)
-  const [sortByPrio, setSortByPrio] = useState(false)
-  const [addingCategory, setAddingCategory] = useState(false)
-  const [newCategoryName, setNewCategoryName] = useState('')
-  const [members, setMembers] = useState<Member[]>([])
-  const [currentUserId, setCurrentUserId] = useState<number | null>(null)
-
-  useEffect(() => {
-    apiClient.get(`/trips/${tripId}/members`).then(r => {
-      const owner = r.data?.owner
-      const mems = r.data?.members || []
-      const all = owner ? [owner, ...mems] : mems
-      setMembers(all)
-      setCurrentUserId(r.data?.current_user_id || null)
-    }).catch(() => {})
-  }, [tripId])
-
-  const categories = useMemo(() => {
-    const cats = new Set<string>()
-    items.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [items])
-
-  const today = new Date().toISOString().split('T')[0]
-
-  const filtered = useMemo(() => {
-    let result: TodoItem[]
-    if (filter === 'all') result = items.filter(i => !i.checked)
-    else if (filter === 'done') result = items.filter(i => !!i.checked)
-    else if (filter === 'my') result = items.filter(i => !i.checked && i.assigned_user_id === currentUserId)
-    else if (filter === 'overdue') result = items.filter(i => !i.checked && i.due_date && i.due_date < today)
-    else result = items.filter(i => i.category === filter)
-    if (sortByPrio) result = [...result].sort((a, b) => {
-      const ap = a.priority || 99
-      const bp = b.priority || 99
-      return ap - bp
-    })
-    return result
-  }, [items, filter, currentUserId, today, sortByPrio])
-
-  const selectedItem = items.find(i => i.id === selectedId) || null
-  const totalCount = items.length
-  const doneCount = items.filter(i => !!i.checked).length
-  const overdueCount = items.filter(i => !i.checked && i.due_date && i.due_date < today).length
-  const myCount = currentUserId ? items.filter(i => !i.checked && i.assigned_user_id === currentUserId).length : 0
-
-  const addCategory = () => {
-    const name = newCategoryName.trim()
-    if (!name || categories.includes(name)) { setAddingCategory(false); setNewCategoryName(''); return }
-    addTodoItem(tripId, { name: t('todo.newItem'), category: name } as any)
-      .then(() => { setAddingCategory(false); setNewCategoryName(''); setFilter(name) })
-      .catch(err => toast.error(err instanceof Error ? err.message : 'Error'))
-  }
-
-  // Get category count (non-done items)
-  const catCount = (cat: string) => items.filter(i => i.category === cat && !i.checked).length
-
-  // Sidebar filter item
-  const SidebarItem = ({ id, icon: Icon, label, count, color }: { id: string; icon: any; label: string; count: number; color?: string }) => (
-    <button onClick={() => setFilter(id as FilterType)}
-      title={isMobile ? label : undefined}
-      style={{
-        display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start',
-        gap: isMobile ? 0 : 8, width: '100%', padding: isMobile ? '8px 0' : '7px 12px',
-        border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13,
-        background: filter === id ? 'var(--bg-hover)' : 'transparent',
-        color: filter === id ? 'var(--text-primary)' : 'var(--text-secondary)',
-        fontWeight: filter === id ? 600 : 400, transition: 'all 0.1s',
-        position: 'relative',
-      }}
-      onMouseEnter={e => { if (filter !== id) e.currentTarget.style.background = 'var(--bg-hover)' }}
-      onMouseLeave={e => { if (filter !== id) e.currentTarget.style.background = 'transparent' }}>
-      {color ? (
-        <span style={{ width: isMobile ? 12 : 10, height: isMobile ? 12 : 10, borderRadius: '50%', background: color, flexShrink: 0 }} />
-      ) : (
-        <Icon size={isMobile ? 18 : 15} style={{ flexShrink: 0, opacity: 0.7 }} />
-      )}
-      {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{label}</span>}
-      {!isMobile && count > 0 && (
-        <span style={{ fontSize: 11, color: 'var(--text-faint)', background: 'var(--bg-hover)', borderRadius: 10, padding: '1px 7px', minWidth: 20, textAlign: 'center' }}>
-          {count}
-        </span>
-      )}
-      {isMobile && count > 0 && (
-        <span style={{ position: 'absolute', top: 2, right: 2, fontSize: 8, fontWeight: 700, color: 'var(--bg-primary)', background: 'var(--text-faint)', borderRadius: '50%', width: 14, height: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          {count}
-        </span>
-      )}
-    </button>
-  )
-
-  // Filter title
-  const filterTitle = (() => {
-    if (filter === 'all') return t('todo.filter.all')
-    if (filter === 'done') return t('todo.filter.done')
-    if (filter === 'my') return t('todo.filter.my')
-    if (filter === 'overdue') return t('todo.filter.overdue')
-    return filter
-  })()
-
-  return (
-    <div style={{ display: 'flex', height: 'calc(100vh - 180px)', minHeight: 400 }}>
-
-      {/* ── Left Sidebar ── */}
-      <div style={{
-        width: isMobile ? 52 : 220, flexShrink: 0, borderRight: '1px solid var(--border-faint)',
-        padding: isMobile ? '12px 6px' : '16px 10px', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto',
-        transition: 'width 0.2s',
-      }}>
-        {/* Progress Card */}
-        {!isMobile && <div style={{
-          margin: '0 6px 12px', padding: '14px 14px 12px', borderRadius: 14,
-          background: 'var(--bg-hover)',
-          border: '1px solid var(--border-primary)',
-          boxShadow: '0 1px 2px rgba(0,0,0,0.02)',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
-            <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1, letterSpacing: '-0.02em' }}>
-              {totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0}%
-            </span>
-          </div>
-          <div style={{ height: 4, background: 'var(--border-faint)', borderRadius: 2, overflow: 'hidden', marginBottom: 6 }}>
-            <div style={{ height: '100%', width: totalCount > 0 ? `${Math.round((doneCount / totalCount) * 100)}%` : '0%', background: '#22c55e', borderRadius: 2, transition: 'width 0.3s' }} />
-          </div>
-          <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
-            {doneCount} / {totalCount} {t('todo.completed')}
-          </div>
-        </div>}
-
-        {/* Smart filters */}
-        {!isMobile && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 12px 4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-          {t('todo.sidebar.tasks')}
-        </div>}
-        <SidebarItem id="all" icon={Inbox} label={t('todo.filter.all')} count={items.filter(i => !i.checked).length} />
-        <SidebarItem id="my" icon={User} label={t('todo.filter.my')} count={myCount} />
-        <SidebarItem id="overdue" icon={AlertCircle} label={t('todo.filter.overdue')} count={overdueCount} />
-        <SidebarItem id="done" icon={CheckCheck} label={t('todo.filter.done')} count={doneCount} />
-
-        {/* Sort by priority */}
-        <button onClick={() => setSortByPrio(v => !v)}
-          title={isMobile ? t('todo.sortByPrio') : undefined}
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start',
-            gap: isMobile ? 0 : 8, width: '100%', padding: isMobile ? '8px 0' : '7px 12px',
-            border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13,
-            background: sortByPrio ? '#f59e0b12' : 'transparent',
-            color: sortByPrio ? '#f59e0b' : 'var(--text-secondary)',
-            fontWeight: sortByPrio ? 600 : 400, transition: 'all 0.1s',
-          }}
-          onMouseEnter={e => { if (!sortByPrio) e.currentTarget.style.background = 'var(--bg-hover)' }}
-          onMouseLeave={e => { if (!sortByPrio) e.currentTarget.style.background = 'transparent' }}>
-          <Flag size={isMobile ? 18 : 15} style={{ flexShrink: 0, opacity: 0.7 }} />
-          {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{t('todo.sortByPrio')}</span>}
-        </button>
-
-        {/* Categories */}
-        {!isMobile && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '16px 12px 4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-          {t('todo.sidebar.categories')}
-        </div>}
-        {isMobile && <div style={{ height: 1, background: 'var(--border-faint)', margin: '8px 4px' }} />}
-        {categories.map(cat => (
-          <SidebarItem key={cat} id={cat} icon={null} label={cat} count={catCount(cat)} color={katColor(cat, categories)} />
-        ))}
-
-        {canEdit && (
-          addingCategory && !isMobile ? (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 12px' }}>
-              <input autoFocus value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') addCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCategoryName('') } }}
-                placeholder={t('todo.newCategory')}
-                style={{ flex: 1, fontSize: 12, padding: '4px 6px', border: '1px solid var(--border-primary)', borderRadius: 5, background: 'var(--bg-hover)', color: 'var(--text-primary)', fontFamily: 'inherit', minWidth: 0 }} />
-              <button onClick={addCategory} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#22c55e', padding: 2 }}><Check size={13} /></button>
-            </div>
-          ) : (
-            <button onClick={() => setAddingCategory(true)}
-              title={isMobile ? t('todo.addCategory') : undefined}
-              style={{ display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start', gap: isMobile ? 0 : 6, padding: isMobile ? '8px 0' : '7px 12px', fontSize: 12, color: 'var(--text-faint)', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit', width: '100%', textAlign: 'left' }}>
-              <Plus size={isMobile ? 18 : 13} /> {!isMobile && t('todo.addCategory')}
-            </button>
-          )
-        )}
-      </div>
-
-      {/* ── Middle: Task List ── */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-        {/* Header */}
-        <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: '-0.02em' }}>
-              {filterTitle}
-            </h2>
-            <span style={{ fontSize: 13, color: 'var(--text-faint)', background: 'var(--bg-hover)', borderRadius: 6, padding: '2px 8px', fontWeight: 600 }}>
-              {filtered.length}
-            </span>
-          </div>
-        </div>
-
-        {/* Add task */}
-        {canEdit && (
-          <div style={{ padding: '10px 20px', borderBottom: '1px solid var(--border-faint)' }}>
-            <button
-              onClick={() => { setSelectedId(null); setIsAddingNew(true) }}
-              style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-                width: '100%', padding: '9px 16px', borderRadius: 8,
-                background: isAddingNew ? 'var(--text-primary)' : 'var(--bg-hover)',
-                color: isAddingNew ? 'var(--bg-primary)' : 'var(--text-primary)',
-                border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
-                fontSize: 13, fontWeight: 600, transition: 'all 0.15s',
-              }}
-              onMouseEnter={e => { if (!isAddingNew) { e.currentTarget.style.background = 'var(--text-primary)'; e.currentTarget.style.color = 'var(--bg-primary)'; e.currentTarget.style.borderColor = 'var(--text-primary)' } }}
-              onMouseLeave={e => { if (!isAddingNew) { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-primary)'; e.currentTarget.style.borderColor = 'var(--border-primary)' } }}>
-              <Plus size={14} />
-              {t('todo.addItem')}
-            </button>
-          </div>
-        )}
-
-        {/* Task list */}
-        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
-          {filtered.length === 0 ? null : (
-            filtered.map(item => {
-              const done = !!item.checked
-              const assignedUser = members.find(m => m.id === item.assigned_user_id)
-              const isOverdue = item.due_date && !done && item.due_date < today
-              const isSelected = selectedId === item.id
-              const catColor = item.category ? katColor(item.category, categories) : null
-
-              return (
-                <div key={item.id}
-                  onClick={() => { setSelectedId(isSelected ? null : item.id); setIsAddingNew(false) }}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px',
-                    borderBottom: '1px solid var(--border-faint)', cursor: 'pointer',
-                    background: isSelected ? 'var(--bg-hover)' : 'transparent',
-                    transition: 'background 0.1s',
-                  }}
-                  onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(0,0,0,0.02)' }}
-                  onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
-
-                  {/* Checkbox */}
-                  <button onClick={e => { e.stopPropagation(); canEdit && toggleTodoItem(tripId, item.id, !done) }}
-                    style={{ background: 'none', border: 'none', cursor: canEdit ? 'pointer' : 'default', padding: 0, flexShrink: 0,
-                      color: done ? '#22c55e' : 'var(--border-primary)' }}>
-                    {done ? <CheckSquare size={18} /> : <Square size={18} />}
-                  </button>
-
-                  {/* Content */}
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{
-                      fontSize: 14, color: done ? 'var(--text-faint)' : 'var(--text-primary)',
-                      textDecoration: done ? 'line-through' : 'none', lineHeight: 1.4,
-                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                    }}>
-                      {item.name}
-                    </div>
-                    {/* Description preview */}
-                    {item.description && (
-                      <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4 }}>
-                        {item.description}
-                      </div>
-                    )}
-                    {/* Inline badges */}
-                    {(item.priority || item.due_date || catColor || assignedUser) && (
-                    <div style={{ display: 'flex', gap: 5, marginTop: 5, flexWrap: 'wrap' }}>
-                      {item.priority > 0 && PRIO_CONFIG[item.priority] && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 600,
-                          color: PRIO_CONFIG[item.priority].color,
-                          background: `${PRIO_CONFIG[item.priority].color}10`,
-                          border: `1px solid ${PRIO_CONFIG[item.priority].color}25`,
-                        }}>
-                          <Flag size={9} />{PRIO_CONFIG[item.priority].label}
-                        </span>
-                      )}
-                      {item.due_date && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-                          color: isOverdue ? '#ef4444' : 'var(--text-secondary)',
-                          background: isOverdue ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)',
-                          border: `1px solid ${isOverdue ? 'rgba(239,68,68,0.15)' : 'var(--border-faint)'}`,
-                        }}>
-                          <Calendar size={9} />{formatDate(item.due_date)}
-                        </span>
-                      )}
-                      {catColor && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
-                          border: '1px solid var(--border-faint)',
-                        }}>
-                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: catColor, flexShrink: 0 }} />
-                          {item.category}
-                        </span>
-                      )}
-                      {assignedUser && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
-                          border: '1px solid var(--border-faint)',
-                        }}>
-                          {assignedUser.avatar ? (
-                            <img src={`/uploads/avatars/${assignedUser.avatar}`} style={{ width: 13, height: 13, borderRadius: '50%', objectFit: 'cover' }} alt="" />
-                          ) : (
-                            <span style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: 'var(--text-faint)', fontWeight: 700 }}>
-                              {assignedUser.username.charAt(0).toUpperCase()}
-                            </span>
-                          )}
-                          {assignedUser.username}
-                        </span>
-                      )}
-                    </div>
-                    )}
-                  </div>
-
-                  {/* Chevron */}
-                  <ChevronRight size={16} color="var(--text-faint)" style={{ flexShrink: 0, opacity: 0.4 }} />
-                </div>
-              )
-            })
-          )}
-        </div>
-      </div>
-
-      {/* ── Right: Detail Pane ── */}
-      {selectedItem && !isAddingNew && !isMobile && (
-        <DetailPane
-          item={selectedItem}
-          tripId={tripId}
-          categories={categories}
-          members={members}
-          onClose={() => setSelectedId(null)}
-        />
-      )}
-      {selectedItem && !isAddingNew && isMobile && (
-        <div onClick={e => { if (e.target === e.currentTarget) setSelectedId(null) }}
-          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
-          <div style={{ width: '100%', maxHeight: '85vh', borderRadius: '16px 16px 0 0', overflow: 'auto' }}
-            ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px 16px 0 0' } } }}>
-            <DetailPane
-              item={selectedItem}
-              tripId={tripId}
-              categories={categories}
-              members={members}
-              onClose={() => setSelectedId(null)}
-            />
-          </div>
-        </div>
-      )}
-      {isAddingNew && !selectedItem && !isMobile && (
-        <NewTaskPane
-          tripId={tripId}
-          categories={categories}
-          members={members}
-          defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
-          onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
-          onClose={() => setIsAddingNew(false)}
-        />
-      )}
-      {isAddingNew && !selectedItem && isMobile && (
-        <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
-          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
-          <div style={{ width: '100%', maxHeight: '85vh', borderRadius: '16px 16px 0 0', overflow: 'auto' }}
-            ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px 16px 0 0' } } }}>
-            <NewTaskPane
-              tripId={tripId}
-              categories={categories}
-              members={members}
-              defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
-              onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
-              onClose={() => setIsAddingNew(false)}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ── Detail Pane (right side) ──────────────────────────────────────────────
-
-function DetailPane({ item, tripId, categories, members, onClose }: {
-  item: TodoItem; tripId: number; categories: string[]; members: Member[];
-  onClose: () => void;
-}) {
-  const { updateTodoItem, deleteTodoItem } = useTripStore()
-  const canEdit = useCanDo('packing_edit')
-  const toast = useToast()
-  const { t } = useTranslation()
-
-  const [name, setName] = useState(item.name)
-  const [desc, setDesc] = useState(item.description || '')
-  const [dueDate, setDueDate] = useState(item.due_date || '')
-  const [category, setCategory] = useState(item.category || '')
-  const [assignedUserId, setAssignedUserId] = useState<number | null>(item.assigned_user_id)
-  const [priority, setPriority] = useState(item.priority || 0)
-  const [saving, setSaving] = useState(false)
-
-  // Sync when selected item changes
-  useEffect(() => {
-    setName(item.name)
-    setDesc(item.description || '')
-    setDueDate(item.due_date || '')
-    setCategory(item.category || '')
-    setAssignedUserId(item.assigned_user_id)
-    setPriority(item.priority || 0)
-  }, [item.id, item.name, item.description, item.due_date, item.category, item.assigned_user_id, item.priority])
-
-  const hasChanges = name !== item.name || desc !== (item.description || '') ||
-    dueDate !== (item.due_date || '') || category !== (item.category || '') ||
-    assignedUserId !== item.assigned_user_id || priority !== (item.priority || 0)
-
-  const save = async () => {
-    if (!name.trim() || !hasChanges) return
-    setSaving(true)
-    try {
-      await updateTodoItem(tripId, item.id, {
-        name: name.trim(), description: desc || null,
-        due_date: dueDate || null, category: category || null,
-        assigned_user_id: assignedUserId, priority,
-      } as any)
-    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Error') }
-    setSaving(false)
-  }
-
-  const handleDelete = async () => {
-    try {
-      await deleteTodoItem(tripId, item.id)
-      onClose()
-    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Error') }
-  }
-
-  const labelStyle: React.CSSProperties = { fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 4, display: 'block' }
-  const inputStyle: React.CSSProperties = {
-    width: '100%', fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)',
-    borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit',
-  }
-
-  return (
-    <div style={{
-      width: 320, flexShrink: 0, borderLeft: '1px solid var(--border-faint)',
-      display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)',
-    }}>
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{t('todo.detail.title')}</span>
-        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4 }}>
-          <X size={16} />
-        </button>
-      </div>
-
-      {/* Form */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
-        {/* Name */}
-        <div>
-          <input value={name} onChange={e => setName(e.target.value)} disabled={!canEdit}
-            style={{ ...inputStyle, fontSize: 15, fontWeight: 600, border: 'none', padding: '4px 0', background: 'transparent' }}
-            placeholder={t('todo.namePlaceholder')} />
-        </div>
-
-        {/* Description */}
-        <div>
-          <label style={labelStyle}>{t('todo.detail.description')}</label>
-          <textarea value={desc} onChange={e => setDesc(e.target.value)} disabled={!canEdit} rows={4}
-            placeholder={t('todo.descriptionPlaceholder')}
-            style={{ ...inputStyle, resize: 'vertical', minHeight: 80 }} />
-        </div>
-
-        {/* Priority */}
-        <div>
-          <label style={labelStyle}>{t('todo.detail.priority')}</label>
-          <div style={{ display: 'flex', gap: 4 }}>
-            {[0, 1, 2, 3].map(p => {
-              const cfg = PRIO_CONFIG[p]
-              const isActive = priority === p
-              return (
-                <button key={p} onClick={() => canEdit && setPriority(p)}
-                  style={{
-                    flex: 1, padding: '6px 0', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: canEdit ? 'pointer' : 'default',
-                    fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
-                    border: `1px solid ${isActive && cfg ? cfg.color + '40' : 'var(--border-primary)'}`,
-                    background: isActive && cfg ? cfg.color + '12' : 'transparent',
-                    color: isActive && cfg ? cfg.color : isActive ? 'var(--text-primary)' : 'var(--text-faint)',
-                    transition: 'all 0.1s',
-                  }}>
-                  {cfg ? <><Flag size={10} />{cfg.label}</> : t('todo.detail.noPriority')}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-
-        {/* Category */}
-        <div>
-          <label style={labelStyle}>{t('todo.detail.category')}</label>
-          <CustomSelect
-            value={category}
-            onChange={v => setCategory(v)}
-            options={[
-              { value: '', label: t('todo.noCategory') },
-              ...categories.map(c => ({
-                value: c,
-                label: c,
-                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
-              })),
-            ]}
-            placeholder={t('todo.noCategory')}
-            size="sm"
-            disabled={!canEdit}
-          />
-        </div>
-
-        {/* Due date */}
-        <div>
-          <label style={labelStyle}>{t('todo.detail.dueDate')}</label>
-          <CustomDatePicker
-            value={dueDate}
-            onChange={v => setDueDate(v)}
-          />
-        </div>
-
-        {/* Assigned to */}
-        <div>
-          <label style={labelStyle}>{t('todo.detail.assignedTo')}</label>
-          <CustomSelect
-            value={String(assignedUserId ?? '')}
-            onChange={v => setAssignedUserId(v ? Number(v) : null)}
-            options={[
-              { value: '', label: t('todo.unassigned'), icon: <User size={14} style={{ color: 'var(--text-faint)' }} /> },
-              ...members.map(m => ({
-                value: String(m.id),
-                label: m.username,
-                icon: m.avatar ? (
-                  <img src={`/uploads/avatars/${m.avatar}`} style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' as const }} alt="" />
-                ) : (
-                  <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'var(--text-faint)', fontWeight: 600 }}>
-                    {m.username.charAt(0).toUpperCase()}
-                  </span>
-                ),
-              })),
-            ]}
-            placeholder={t('todo.unassigned')}
-            size="sm"
-            disabled={!canEdit}
-          />
-        </div>
-      </div>
-
-      {/* Footer actions */}
-      {canEdit && (
-        <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border-faint)', display: 'flex', gap: 8 }}>
-          <button onClick={handleDelete}
-            style={{
-              flex: 1, padding: '9px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-              border: '1px solid var(--border-primary)', background: 'transparent', color: 'var(--text-secondary)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-            }}>
-            <Trash2 size={13} />
-            {t('todo.detail.delete')}
-          </button>
-          <button onClick={save} disabled={!hasChanges || saving}
-            style={{
-              flex: 1, padding: '9px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: hasChanges ? 'pointer' : 'default', fontFamily: 'inherit',
-              border: 'none', background: hasChanges ? 'var(--text-primary)' : 'var(--border-faint)',
-              color: hasChanges ? 'var(--bg-primary)' : 'var(--text-faint)',
-              transition: 'all 0.15s',
-            }}>
-            {saving ? '...' : t('todo.detail.save')}
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ── New Task Pane (right side, for creating) ──────────────────────────────
-
-function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated, onClose }: {
-  tripId: number; categories: string[]; members: Member[]; defaultCategory: string | null;
-  onCreated: (id: number) => void; onClose: () => void;
-}) {
-  const { addTodoItem } = useTripStore()
-  const toast = useToast()
-  const { t } = useTranslation()
-
-  const [name, setName] = useState('')
-  const [desc, setDesc] = useState('')
-  const [dueDate, setDueDate] = useState('')
-  const [category, setCategory] = useState(defaultCategory || '')
-  const [assignedUserId, setAssignedUserId] = useState<number | null>(null)
-  const [priority, setPriority] = useState(0)
-  const [saving, setSaving] = useState(false)
-
-  const labelStyle: React.CSSProperties = { fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 4, display: 'block' }
-
-  const create = async () => {
-    if (!name.trim()) return
-    setSaving(true)
-    try {
-      const item = await addTodoItem(tripId, {
-        name: name.trim(), description: desc || null, priority,
-        due_date: dueDate || null, category: category || null,
-        assigned_user_id: assignedUserId,
-      } as any)
-      if (item?.id) onCreated(item.id)
-    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Error') }
-    setSaving(false)
-  }
-
-  return (
-    <div style={{
-      width: 320, flexShrink: 0, borderLeft: '1px solid var(--border-faint)',
-      display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)',
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{t('todo.newItem')}</span>
-        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4 }}>
-          <X size={16} />
-        </button>
-      </div>
-
-      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
-        <div>
-          <input autoFocus value={name} onChange={e => setName(e.target.value)}
-            onKeyDown={e => { if (e.key === 'Enter' && name.trim()) create() }}
-            style={{ width: '100%', fontSize: 15, fontWeight: 600, border: 'none', padding: '4px 0', background: 'transparent', color: 'var(--text-primary)', outline: 'none', fontFamily: 'inherit' }}
-            placeholder={t('todo.namePlaceholder')} />
-        </div>
-
-        <div>
-          <label style={labelStyle}>{t('todo.detail.description')}</label>
-          <textarea value={desc} onChange={e => setDesc(e.target.value)} rows={4}
-            placeholder={t('todo.descriptionPlaceholder')}
-            style={{ width: '100%', fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)', borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', resize: 'vertical', minHeight: 80 }} />
-        </div>
-
-        <div>
-          <label style={labelStyle}>{t('todo.detail.category')}</label>
-          <CustomSelect
-            value={category}
-            onChange={v => setCategory(v)}
-            options={[
-              { value: '', label: t('todo.noCategory') },
-              ...categories.map(c => ({
-                value: c, label: c,
-                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
-              })),
-            ]}
-            placeholder={t('todo.noCategory')}
-            size="sm"
-          />
-        </div>
-
-        <div>
-          <label style={labelStyle}>{t('todo.detail.priority')}</label>
-          <div style={{ display: 'flex', gap: 4 }}>
-            {[0, 1, 2, 3].map(p => {
-              const cfg = PRIO_CONFIG[p]
-              const isActive = priority === p
-              return (
-                <button key={p} onClick={() => setPriority(p)}
-                  style={{
-                    flex: 1, padding: '6px 0', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: 'pointer',
-                    fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
-                    border: `1px solid ${isActive && cfg ? cfg.color + '40' : 'var(--border-primary)'}`,
-                    background: isActive && cfg ? cfg.color + '12' : 'transparent',
-                    color: isActive && cfg ? cfg.color : isActive ? 'var(--text-primary)' : 'var(--text-faint)',
-                    transition: 'all 0.1s',
-                  }}>
-                  {cfg ? <><Flag size={10} />{cfg.label}</> : t('todo.detail.noPriority')}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-
-        <div>
-          <label style={labelStyle}>{t('todo.detail.dueDate')}</label>
-          <CustomDatePicker value={dueDate} onChange={v => setDueDate(v)} />
-        </div>
-
-        <div>
-          <label style={labelStyle}>{t('todo.detail.assignedTo')}</label>
-          <CustomSelect
-            value={String(assignedUserId ?? '')}
-            onChange={v => setAssignedUserId(v ? Number(v) : null)}
-            options={[
-              { value: '', label: t('todo.unassigned'), icon: <User size={14} style={{ color: 'var(--text-faint)' }} /> },
-              ...members.map(m => ({
-                value: String(m.id), label: m.username,
-                icon: m.avatar ? (
-                  <img src={`/uploads/avatars/${m.avatar}`} style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' as const }} alt="" />
-                ) : (
-                  <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'var(--text-faint)', fontWeight: 600 }}>
-                    {m.username.charAt(0).toUpperCase()}
-                  </span>
-                ),
-              })),
-            ]}
-            placeholder={t('todo.unassigned')}
-            size="sm"
-          />
-        </div>
-      </div>
-
-      <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border-faint)' }}>
-        <button onClick={create} disabled={!name.trim() || saving}
-          style={{
-            width: '100%', padding: '9px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: name.trim() ? 'pointer' : 'default', fontFamily: 'inherit',
-            border: 'none', background: name.trim() ? 'var(--text-primary)' : 'var(--border-faint)',
-            color: name.trim() ? 'var(--bg-primary)' : 'var(--text-faint)', transition: 'all 0.15s',
-          }}>
-          {saving ? '...' : t('todo.detail.create')}
-        </button>
-      </div>
-    </div>
-  )
-}

client/src/components/Trips/TripFormModal.tsx

@@ -1,411 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import Modal from '../shared/Modal'
-import { Calendar, Camera, X, Clipboard, UserPlus, Bell } from 'lucide-react'
-import { tripsApi, authApi } from '../../api/client'
-import CustomSelect from '../shared/CustomSelect'
-import { useAuthStore } from '../../store/authStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import type { Trip } from '../../types'
-
-interface TripFormModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onSave: (data: Record<string, string | number | null>) => Promise<void> | void
-  trip: Trip | null
-  onCoverUpdate: (tripId: number, coverUrl: string) => void
-}
-
-export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUpdate }: TripFormModalProps) {
-  const isEditing = !!trip
-  const fileRef = useRef(null)
-  const toast = useToast()
-  const { t } = useTranslation()
-  const currentUser = useAuthStore(s => s.user)
-  const tripRemindersEnabled = useAuthStore(s => s.tripRemindersEnabled)
-  const setTripRemindersEnabled = useAuthStore(s => s.setTripRemindersEnabled)
-  const can = useCanDo()
-  const canUploadCover = !isEditing || can('trip_cover_upload', trip)
-  const canEditTrip = !isEditing || can('trip_edit', trip)
-
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-    start_date: '',
-    end_date: '',
-    reminder_days: 0 as number,
-    day_count: 7,
-  })
-  const [customReminder, setCustomReminder] = useState(false)
-  const [error, setError] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [coverPreview, setCoverPreview] = useState(null)
-  const [pendingCoverFile, setPendingCoverFile] = useState(null)
-  const [uploadingCover, setUploadingCover] = useState(false)
-  const [allUsers, setAllUsers] = useState<{ id: number; username: string }[]>([])
-  const [selectedMembers, setSelectedMembers] = useState<number[]>([])
-  const [memberSelectValue, setMemberSelectValue] = useState('')
-
-  useEffect(() => {
-    if (trip) {
-      const rd = trip.reminder_days ?? 3
-      setFormData({
-        title: trip.title || '',
-        description: trip.description || '',
-        start_date: trip.start_date || '',
-        end_date: trip.end_date || '',
-        reminder_days: rd,
-        day_count: trip.day_count || 7,
-      })
-      setCustomReminder(![0, 1, 3, 9].includes(rd))
-      setCoverPreview(trip.cover_image || null)
-    } else {
-      setFormData({ title: '', description: '', start_date: '', end_date: '', reminder_days: tripRemindersEnabled ? 3 : 0, day_count: 7 })
-      setCustomReminder(false)
-      setCoverPreview(null)
-    }
-    setPendingCoverFile(null)
-    setSelectedMembers([])
-    setError('')
-    if (isOpen) {
-      authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
-        if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
-      }).catch(() => {})
-    }
-    if (!trip) {
-      authApi.listUsers().then(d => setAllUsers(d.users || [])).catch(() => {})
-    }
-  }, [trip, isOpen])
-
-  useEffect(() => {
-    if (!trip && isOpen) {
-      setFormData(prev => ({ ...prev, reminder_days: tripRemindersEnabled ? 3 : 0 }))
-    }
-  }, [tripRemindersEnabled])
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError('')
-    if (!formData.title.trim()) { setError(t('dashboard.titleRequired')); return }
-    if (formData.start_date && formData.end_date && new Date(formData.end_date) < new Date(formData.start_date)) {
-      setError(t('dashboard.endDateError')); return
-    }
-    setIsLoading(true)
-    try {
-      const result = await onSave({
-        title: formData.title.trim(),
-        description: formData.description.trim() || null,
-        start_date: formData.start_date || null,
-        end_date: formData.end_date || null,
-        reminder_days: formData.reminder_days,
-        ...(!formData.start_date && !formData.end_date ? { day_count: formData.day_count } : {}),
-      })
-      // Add selected members for newly created trips
-      if (selectedMembers.length > 0 && result?.trip?.id) {
-        for (const userId of selectedMembers) {
-          const user = allUsers.find(u => u.id === userId)
-          if (user) {
-            try { await tripsApi.addMember(result.trip.id, user.username) } catch {}
-          }
-        }
-      }
-      // Upload pending cover for newly created trips
-      if (pendingCoverFile && result?.trip?.id) {
-        try {
-          const fd = new FormData()
-          fd.append('cover', pendingCoverFile)
-          const data = await tripsApi.uploadCover(result.trip.id, fd)
-          onCoverUpdate?.(result.trip.id, data.cover_image)
-        } catch {
-          // Cover upload failed but trip was created
-        }
-      }
-      onClose()
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : t('places.saveError'))
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleCoverSelect = (file) => {
-    if (!file) return
-    if (isEditing && trip?.id) {
-      // Existing trip: upload immediately
-      uploadCoverNow(file)
-    } else {
-      // New trip: stage for upload after creation
-      setPendingCoverFile(file)
-      setCoverPreview(URL.createObjectURL(file))
-    }
-  }
-
-  const handleCoverChange = (e) => {
-    handleCoverSelect((e.target as HTMLInputElement).files?.[0])
-    e.target.value = ''
-  }
-
-  const uploadCoverNow = async (file) => {
-    setUploadingCover(true)
-    try {
-      const fd = new FormData()
-      fd.append('cover', file)
-      const data = await tripsApi.uploadCover(trip.id, fd)
-      setCoverPreview(data.cover_image)
-      onCoverUpdate?.(trip.id, data.cover_image)
-      toast.success(t('dashboard.coverSaved'))
-    } catch {
-      toast.error(t('dashboard.coverUploadError'))
-    } finally {
-      setUploadingCover(false)
-    }
-  }
-
-  const handleRemoveCover = async () => {
-    if (pendingCoverFile) {
-      setPendingCoverFile(null)
-      setCoverPreview(null)
-      return
-    }
-    if (!trip?.id) return
-    try {
-      await tripsApi.update(trip.id, { cover_image: null })
-      setCoverPreview(null)
-      onCoverUpdate?.(trip.id, null)
-    } catch {
-      toast.error(t('dashboard.coverRemoveError'))
-    }
-  }
-
-  // Paste support for cover image
-  const handlePaste = (e) => {
-    if (!canUploadCover) return
-    const items = e.clipboardData?.items
-    if (!items) return
-    for (const item of Array.from(items)) {
-      if (item.type.startsWith('image/')) {
-        e.preventDefault()
-        const file = item.getAsFile()
-        if (file) handleCoverSelect(file)
-        return
-      }
-    }
-  }
-
-  const update = (field, value) => setFormData(prev => {
-    const next = { ...prev, [field]: value }
-    if (field === 'start_date' && value) {
-      if (!prev.end_date || prev.end_date < value) {
-        next.end_date = value
-      } else if (prev.start_date) {
-        const oldStart = new Date(prev.start_date + 'T00:00:00Z')
-        const oldEnd = new Date(prev.end_date + 'T00:00:00Z')
-        const duration = Math.round((oldEnd - oldStart) / 86400000)
-        const newEnd = new Date(value + 'T00:00:00Z')
-        newEnd.setDate(newEnd.getDate() + duration)
-        next.end_date = newEnd.toISOString().split('T')[0]
-      }
-    }
-    return next
-  })
-
-  const inputCls = "w-full px-3 py-2.5 border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:border-transparent text-sm"
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title={isEditing ? t('dashboard.editTrip') : t('dashboard.createTrip')}
-      size="md"
-      footer={
-        <div className="flex gap-3 justify-end">
-          <button type="button" onClick={onClose}
-            className="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
-            {t('common.cancel')}
-          </button>
-          <button onClick={handleSubmit} disabled={isLoading}
-            className="px-4 py-2 text-sm bg-slate-900 hover:bg-slate-700 disabled:bg-slate-400 text-white rounded-lg transition-colors flex items-center gap-2">
-            {isLoading
-              ? <><div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />{t('common.saving')}</>
-              : isEditing ? t('common.update') : t('dashboard.createTrip')}
-          </button>
-        </div>
-      }
-    >
-      <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
-        {error && (
-          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">{error}</div>
-        )}
-
-        {/* Cover image — gated by trip_cover_upload permission */}
-        {canUploadCover && <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.coverImage')}</label>
-          <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleCoverChange} />
-          {coverPreview ? (
-            <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', height: 130 }}>
-              <img src={coverPreview} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-              <div style={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 6 }}>
-                <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
-                  style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '5px 10px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', border: 'none', color: 'white', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
-                  <Camera size={12} /> {uploadingCover ? t('common.uploading') : t('common.change')}
-                </button>
-                <button type="button" onClick={handleRemoveCover}
-                  style={{ display: 'flex', alignItems: 'center', padding: '5px 8px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', border: 'none', color: 'white', cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
-                  <X size={12} />
-                </button>
-              </div>
-            </div>
-          ) : (
-            <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
-              onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.background = 'rgba(99,102,241,0.04)' }}
-              onDragLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.background = 'none' }}
-              onDrop={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.background = 'none'; const file = e.dataTransfer.files?.[0]; if (file?.type.startsWith('image/')) handleCoverSelect(file) }}
-              style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit', transition: 'all 0.15s' }}
-              onMouseEnter={e => { e.currentTarget.style.borderColor = '#d1d5db'; e.currentTarget.style.color = '#6b7280' }}
-              onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
-              <Camera size={15} /> {uploadingCover ? t('common.uploading') : t('dashboard.addCoverImage')}
-            </button>
-          )}
-        </div>}
-
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">
-            {t('dashboard.tripTitle')} <span className="text-red-500">*</span>
-          </label>
-          <input type="text" value={formData.title} onChange={e => canEditTrip && update('title', e.target.value)}
-            required readOnly={!canEditTrip} placeholder={t('dashboard.tripTitlePlaceholder')} className={inputCls} />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.tripDescription')}</label>
-          <textarea value={formData.description} onChange={e => canEditTrip && update('description', e.target.value)}
-            readOnly={!canEditTrip} placeholder={t('dashboard.tripDescriptionPlaceholder')} rows={3}
-            className={`${inputCls} resize-none`} />
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1.5">
-              <Calendar className="inline w-4 h-4 mr-1" />{t('dashboard.startDate')}
-            </label>
-            <CustomDatePicker value={formData.start_date} onChange={v => update('start_date', v)} placeholder={t('dashboard.startDate')} />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1.5">
-              <Calendar className="inline w-4 h-4 mr-1" />{t('dashboard.endDate')}
-            </label>
-            <CustomDatePicker value={formData.end_date} onChange={v => update('end_date', v)} placeholder={t('dashboard.endDate')} />
-          </div>
-        </div>
-
-        {!formData.start_date && !formData.end_date && (
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1.5">
-              {t('dashboard.dayCount')}
-            </label>
-            <input type="number" min={1} max={365} value={formData.day_count}
-              onChange={e => update('day_count', Math.max(1, Math.min(365, Number(e.target.value) || 1)))}
-              className={inputCls} />
-            <p className="text-xs text-slate-400 mt-1.5">{t('dashboard.dayCountHint')}</p>
-          </div>
-        )}
-
-        {/* Reminder — only visible to owner (or when creating) */}
-        {(!isEditing || trip?.user_id === currentUser?.id || currentUser?.role === 'admin') && (
-        <div className={!tripRemindersEnabled ? 'opacity-50' : ''}>
-          <label className="block text-sm font-medium text-slate-700 mb-1.5">
-            <Bell className="inline w-4 h-4 mr-1" />{t('trips.reminder')}
-          </label>
-          {!tripRemindersEnabled ? (
-            <p className="text-xs text-slate-400 bg-slate-50 rounded-lg p-3">
-              {t('trips.reminderDisabledHint')}
-            </p>
-          ) : (
-            <>
-              <div className="flex flex-wrap gap-2">
-                {[
-                  { value: 0, label: t('trips.reminderNone') },
-                  { value: 1, label: `1 ${t('trips.reminderDay')}` },
-                  { value: 3, label: `3 ${t('trips.reminderDays')}` },
-                  { value: 9, label: `9 ${t('trips.reminderDays')}` },
-                ].map(opt => (
-                  <button key={opt.value} type="button"
-                    onClick={() => { update('reminder_days', opt.value); setCustomReminder(false) }}
-                    className={`px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${
-                      !customReminder && formData.reminder_days === opt.value
-                        ? 'bg-slate-900 text-white border-slate-900'
-                        : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
-                    }`}>
-                    {opt.label}
-                  </button>
-                ))}
-                <button type="button"
-                  onClick={() => { setCustomReminder(true); if ([0, 1, 3, 9].includes(formData.reminder_days)) update('reminder_days', 7) }}
-                  className={`px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${
-                    customReminder
-                      ? 'bg-slate-900 text-white border-slate-900'
-                      : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
-                  }`}>
-                  {t('trips.reminderCustom')}
-                </button>
-              </div>
-              {customReminder && (
-                <div className="flex items-center gap-2 mt-2">
-                  <input type="number" min={1} max={30}
-                    value={formData.reminder_days}
-                    onChange={e => update('reminder_days', Math.max(1, Math.min(30, Number(e.target.value) || 1)))}
-                    className="w-20 px-3 py-1.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-300" />
-                  <span className="text-xs text-slate-500">{t('trips.reminderDaysBefore')}</span>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-        )}
-
-        {/* Members — only for new trips */}
-        {!isEditing && allUsers.filter(u => u.id !== currentUser?.id).length > 0 && (
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1.5">
-              <UserPlus className="inline w-4 h-4 mr-1" />{t('dashboard.addMembers')}
-            </label>
-            {selectedMembers.length > 0 && (
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
-                {selectedMembers.map(uid => {
-                  const user = allUsers.find(u => u.id === uid)
-                  if (!user) return null
-                  return (
-                    <span key={uid} onClick={() => setSelectedMembers(prev => prev.filter(id => id !== uid))}
-                      style={{
-                        display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 99,
-                        background: 'var(--bg-secondary)', fontSize: 12, fontWeight: 500, color: 'var(--text-primary)', cursor: 'pointer',
-                        border: '1px solid var(--border-primary)',
-                      }}>
-                      {user.username}
-                      <X size={11} style={{ color: 'var(--text-faint)' }} />
-                    </span>
-                  )
-                })}
-              </div>
-            )}
-            <div style={{ display: 'flex', gap: 8 }}>
-              <CustomSelect
-                value={memberSelectValue}
-                onChange={value => {
-                  if (value) { setSelectedMembers(prev => prev.includes(Number(value)) ? prev : [...prev, Number(value)]); setMemberSelectValue('') }
-                }}
-                placeholder={t('dashboard.addMember')}
-                options={allUsers.filter(u => u.id !== currentUser?.id && !selectedMembers.includes(u.id)).map(u => ({ value: u.id, label: u.username }))}
-                searchable
-                size="sm"
-              />
-            </div>
-          </div>
-        )}
-
-      </form>
-    </Modal>
-  )
-}

client/src/components/Trips/TripMembersModal.tsx

@@ -1,375 +0,0 @@
-import { useState, useEffect } from 'react'
-import Modal from '../shared/Modal'
-import { tripsApi, authApi, shareApi } from '../../api/client'
-import { useToast } from '../shared/Toast'
-import { useAuthStore } from '../../store/authStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useTripStore } from '../../store/tripStore'
-import { Crown, UserMinus, UserPlus, Users, LogOut, Link2, Trash2, Copy, Check } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { getApiErrorMessage } from '../../types'
-import CustomSelect from '../shared/CustomSelect'
-
-interface AvatarProps {
-  username: string
-  avatarUrl: string | null
-  size?: number
-}
-
-function Avatar({ username, avatarUrl, size = 32 }: AvatarProps) {
-  if (avatarUrl) {
-    return <img src={avatarUrl} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
-  }
-  const letter = (username || '?')[0].toUpperCase()
-  const colors = ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4']
-  const color = colors[letter.charCodeAt(0) % colors.length]
-  return (
-    <div style={{
-      width: size, height: size, borderRadius: '50%', background: color,
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      fontSize: size * 0.4, fontWeight: 700, color: 'white', flexShrink: 0,
-    }}>
-      {letter}
-    </div>
-  )
-}
-
-function ShareLinkSection({ tripId, t }: { tripId: number; t: (key: string, params?: Record<string, string | number>) => string }) {
-  const [shareToken, setShareToken] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [copied, setCopied] = useState(false)
-  const [perms, setPerms] = useState({ share_map: true, share_bookings: true, share_packing: false, share_budget: false, share_collab: false })
-  const toast = useToast()
-
-  useEffect(() => {
-    shareApi.getLink(tripId).then(d => {
-      setShareToken(d.token)
-      if (d.token) setPerms({ share_map: d.share_map ?? true, share_bookings: d.share_bookings ?? true, share_packing: d.share_packing ?? false, share_budget: d.share_budget ?? false, share_collab: d.share_collab ?? false })
-      setLoading(false)
-    }).catch(() => setLoading(false))
-  }, [tripId])
-
-  const shareUrl = shareToken ? `${window.location.origin}/shared/${shareToken}` : null
-
-  const handleCreate = async () => {
-    try {
-      const d = await shareApi.createLink(tripId, perms)
-      setShareToken(d.token)
-    } catch { toast.error(t('share.createError')) }
-  }
-
-  const handleUpdatePerms = async (key: string, val: boolean) => {
-    const newPerms = { ...perms, [key]: val }
-    setPerms(newPerms)
-    if (shareToken) {
-      try { await shareApi.createLink(tripId, newPerms) } catch {}
-    }
-  }
-
-  const handleDelete = async () => {
-    try {
-      await shareApi.deleteLink(tripId)
-      setShareToken(null)
-    } catch {}
-  }
-
-  const handleCopy = () => {
-    if (shareUrl) {
-      navigator.clipboard.writeText(shareUrl)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    }
-  }
-
-  if (loading) return null
-
-  return (
-    <div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
-        <Link2 size={14} style={{ color: 'var(--text-muted)' }} />
-        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{t('share.linkTitle')}</span>
-      </div>
-      <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 10, lineHeight: 1.5 }}>{t('share.linkHint')}</p>
-
-      {/* Permission checkboxes */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
-        {[
-          { key: 'share_map', label: t('share.permMap'), always: true },
-          { key: 'share_bookings', label: t('share.permBookings') },
-          { key: 'share_packing', label: t('share.permPacking') },
-          { key: 'share_budget', label: t('share.permBudget') },
-          { key: 'share_collab', label: t('share.permCollab') },
-        ].map(opt => (
-          <button key={opt.key} onClick={() => !opt.always && handleUpdatePerms(opt.key, !perms[opt.key])}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 20,
-              border: '1.5px solid', fontSize: 11, fontWeight: 500, cursor: opt.always ? 'default' : 'pointer',
-              fontFamily: 'inherit', transition: 'all 0.12s',
-              background: perms[opt.key] ? 'var(--text-primary)' : 'transparent',
-              borderColor: perms[opt.key] ? 'var(--text-primary)' : 'var(--border-primary)',
-              color: perms[opt.key] ? 'var(--bg-primary)' : 'var(--text-muted)',
-              opacity: opt.always ? 0.7 : 1,
-            }}>
-            {perms[opt.key] ? <Check size={10} /> : null}
-            {opt.label}
-          </button>
-        ))}
-      </div>
-
-      {shareUrl ? (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px',
-            background: 'var(--bg-tertiary)', borderRadius: 8, border: '1px solid var(--border-faint)',
-          }}>
-            <input type="text" value={shareUrl} readOnly style={{
-              flex: 1, border: 'none', background: 'none', fontSize: 11, color: 'var(--text-primary)',
-              outline: 'none', fontFamily: 'monospace',
-            }} />
-            <button onClick={handleCopy} style={{
-              display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 6,
-              border: 'none', background: copied ? '#16a34a' : 'var(--accent)', color: copied ? 'white' : 'var(--accent-text)',
-              fontSize: 10, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'background 0.2s',
-            }}>
-              {copied ? <><Check size={10} /> {t('common.copied')}</> : <><Copy size={10} /> {t('common.copy')}</>}
-            </button>
-          </div>
-          <button onClick={handleDelete} style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-            padding: '6px 0', borderRadius: 8, border: '1px solid rgba(239,68,68,0.3)',
-            background: 'rgba(239,68,68,0.06)', color: '#ef4444', fontSize: 11, fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit',
-          }}>
-            <Trash2 size={11} /> {t('share.deleteLink')}
-          </button>
-        </div>
-      ) : (
-        <button onClick={handleCreate} style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-          width: '100%', padding: '8px 0', borderRadius: 8, border: '1px dashed var(--border-primary)',
-          background: 'none', color: 'var(--text-muted)', fontSize: 12, fontWeight: 500,
-          cursor: 'pointer', fontFamily: 'inherit',
-        }}>
-          <Link2 size={12} /> {t('share.createLink')}
-        </button>
-      )}
-    </div>
-  )
-}
-
-interface TripMembersModalProps {
-  isOpen: boolean
-  onClose: () => void
-  tripId: number
-  tripTitle: string
-}
-
-export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }: TripMembersModalProps) {
-  const [data, setData] = useState(null)
-  const [allUsers, setAllUsers] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState('')
-  const [adding, setAdding] = useState(false)
-  const [removingId, setRemovingId] = useState(null)
-  const toast = useToast()
-  const { user } = useAuthStore()
-  const { t } = useTranslation()
-  const can = useCanDo()
-  const trip = useTripStore((s) => s.trip)
-  const canManageMembers = can('member_manage', trip)
-  const canManageShare = can('share_manage', trip)
-
-  useEffect(() => {
-    if (isOpen && tripId) {
-      loadMembers()
-      loadAllUsers()
-    }
-  }, [isOpen, tripId])
-
-  const loadMembers = async () => {
-    setLoading(true)
-    try {
-      const d = await tripsApi.getMembers(tripId)
-      setData(d)
-    } catch {
-      toast.error(t('members.loadError'))
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const loadAllUsers = async () => {
-    try {
-      const d = await authApi.listUsers()
-      setAllUsers(d.users)
-    } catch {}
-  }
-
-  const handleAdd = async () => {
-    if (!selectedUserId) return
-    setAdding(true)
-    try {
-      const target = allUsers.find(u => String(u.id) === String(selectedUserId))
-      await tripsApi.addMember(tripId, target.username)
-      setSelectedUserId('')
-      await loadMembers()
-      toast.success(`${target.username} ${t('members.added')}`)
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('members.addError')))
-    } finally {
-      setAdding(false)
-    }
-  }
-
-  const handleRemove = async (userId, isSelf) => {
-    const msg = isSelf
-      ? t('members.confirmLeave')
-      : t('members.confirmRemove')
-    if (!confirm(msg)) return
-    setRemovingId(userId)
-    try {
-      await tripsApi.removeMember(tripId, userId)
-      if (isSelf) { onClose(); window.location.reload() }
-      else { await loadMembers(); toast.success(t('members.removed')) }
-    } catch {
-      toast.error(t('members.removeError'))
-    } finally {
-      setRemovingId(null)
-    }
-  }
-
-  // Users not yet in the trip
-  const existingIds = new Set([
-    data?.owner?.id,
-    ...(data?.members?.map(m => m.id) || []),
-  ])
-  const availableUsers = allUsers.filter(u => !existingIds.has(u.id))
-
-  const isCurrentOwner = data?.owner?.id === user?.id
-  const allMembers = data ? [
-    { ...data.owner, role: 'owner' },
-    ...data.members,
-  ] : []
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="3xl">
-      <div style={{ display: 'grid', gridTemplateColumns: canManageShare ? '1fr 1fr' : '1fr', gap: 24, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} className="share-modal-grid">
-        <style>{`@media (max-width: 640px) { .share-modal-grid { grid-template-columns: 1fr !important; } }`}</style>
-
-        {/* Left column: Members */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-
-        {/* Trip name */}
-        <div style={{ padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: 10, border: '1px solid var(--border-secondary)' }}>
-          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>{t('nav.trip')}</div>
-          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{tripTitle}</div>
-        </div>
-
-        {/* Add member dropdown */}
-        {canManageMembers && <div>
-          <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>
-            {t('members.inviteUser')}
-          </label>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <CustomSelect
-              value={selectedUserId}
-              onChange={value => setSelectedUserId(value)}
-              placeholder={t('members.selectUser')}
-              options={[
-                { value: '', label: t('members.selectUser') },
-                ...availableUsers.map(u => ({
-                  value: u.id,
-                  label: u.username,
-                })),
-              ]}
-              searchable
-              style={{ flex: 1 }}
-              size="sm"
-            />
-            <button
-              onClick={handleAdd}
-              disabled={adding || !selectedUserId}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 5, padding: '8px 14px',
-                background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10,
-                fontSize: 13, fontWeight: 600, cursor: adding || !selectedUserId ? 'default' : 'pointer',
-                fontFamily: 'inherit', opacity: adding || !selectedUserId ? 0.4 : 1, flexShrink: 0,
-              }}
-            >
-              <UserPlus size={13} /> {adding ? '…' : t('members.invite')}
-            </button>
-          </div>
-          {availableUsers.length === 0 && allUsers.length > 0 && canManageMembers && (
-            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '6px 0 0' }}>{t('members.allHaveAccess')}</p>
-          )}
-        </div>}
-
-        {/* Members list */}
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
-            <Users size={13} style={{ color: 'var(--text-faint)' }} />
-            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>
-              {t('members.access')} ({allMembers.length} {allMembers.length === 1 ? t('members.person') : t('members.persons')})
-            </span>
-          </div>
-
-          {loading ? (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-              {[1, 2].map(i => (
-                <div key={i} style={{ height: 48, background: 'var(--bg-tertiary)', borderRadius: 10, animation: 'pulse 1.5s ease-in-out infinite' }} />
-              ))}
-            </div>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {allMembers.map(member => {
-                const isSelf = member.id === user?.id
-                const canRemove = isSelf || (canManageMembers && member.role !== 'owner')
-                return (
-                  <div key={member.id} style={{
-                    display: 'flex', alignItems: 'center', gap: 10,
-                    padding: '8px 12px', borderRadius: 10, background: 'var(--bg-secondary)',
-                    border: '1px solid var(--border-secondary)',
-                  }}>
-                    <Avatar username={member.username} avatarUrl={member.avatar_url} />
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{member.username}</span>
-                        {isSelf && <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>({t('members.you')})</span>}
-                        {member.role === 'owner' && (
-                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, fontWeight: 700, color: '#d97706', background: '#fef9c3', padding: '1px 6px', borderRadius: 99 }}>
-                            <Crown size={9} /> {t('members.owner')}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                    {canRemove && (
-                      <button
-                        onClick={() => handleRemove(member.id, isSelf)}
-                        disabled={removingId === member.id}
-                        title={isSelf ? t('members.leaveTrip') : t('members.removeAccess')}
-                        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', borderRadius: 6, display: 'flex', color: 'var(--text-faint)', opacity: removingId === member.id ? 0.4 : 1 }}
-                        onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-                        onMouseLeave={e => e.currentTarget.style.color = '#9ca3af'}
-                      >
-                        {isSelf ? <LogOut size={14} /> : <UserMinus size={14} />}
-                      </button>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </div>
-
-        </div>
-
-        {/* Right column: Share Link */}
-        {canManageShare && <div style={{ borderLeft: '1px solid var(--border-faint)', paddingLeft: 24 }}>
-        <ShareLinkSection tripId={tripId} t={t} />
-        </div>}
-
-        <style>{`@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }`}</style>
-      </div>
-    </Modal>
-  )
-}

client/src/components/Vacay/VacayCalendar.tsx

@@ -1,98 +0,0 @@
-import { useMemo, useState, useCallback } from 'react'
-import { useVacayStore } from '../../store/vacayStore'
-import { useTranslation } from '../../i18n'
-import { isWeekend } from './holidays'
-import VacayMonthCard from './VacayMonthCard'
-import { Building2, MousePointer2 } from 'lucide-react'
-
-export default function VacayCalendar() {
-  const { t } = useTranslation()
-  const { selectedYear, selectedUserId, entries, companyHolidays, toggleEntry, toggleCompanyHoliday, plan, users, holidays } = useVacayStore()
-  const [companyMode, setCompanyMode] = useState(false)
-
-  const companyHolidaySet = useMemo(() => {
-    const s = new Set()
-    companyHolidays.forEach(h => s.add(h.date))
-    return s
-  }, [companyHolidays])
-
-  const entryMap = useMemo(() => {
-    const map = {}
-    entries.forEach(e => {
-      if (!map[e.date]) map[e.date] = []
-      map[e.date].push(e)
-    })
-    return map
-  }, [entries])
-
-  const blockWeekends = plan?.block_weekends !== false
-  const weekendDays: number[] = plan?.weekend_days ? String(plan.weekend_days).split(',').map(Number) : [0, 6]
-  const companyHolidaysEnabled = plan?.company_holidays_enabled !== false
-
-  const handleCellClick = useCallback(async (dateStr) => {
-    if (companyMode) {
-      if (!companyHolidaysEnabled) return
-      await toggleCompanyHoliday(dateStr)
-      return
-    }
-    if (holidays[dateStr]) return
-    if (blockWeekends && isWeekend(dateStr, weekendDays)) return
-    if (companyHolidaysEnabled && companyHolidaySet.has(dateStr)) return
-    await toggleEntry(dateStr, selectedUserId || undefined)
-  }, [companyMode, toggleEntry, toggleCompanyHoliday, holidays, companyHolidaySet, blockWeekends, companyHolidaysEnabled, selectedUserId])
-
-  const selectedUser = users.find(u => u.id === selectedUserId)
-
-  return (
-    <div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-        {Array.from({ length: 12 }, (_, i) => (
-          <VacayMonthCard
-            key={i}
-            year={selectedYear}
-            month={i}
-            holidays={holidays}
-            companyHolidaySet={companyHolidaySet}
-            companyHolidaysEnabled={companyHolidaysEnabled}
-            entryMap={entryMap}
-            onCellClick={handleCellClick}
-            companyMode={companyMode}
-            blockWeekends={blockWeekends}
-            weekendDays={weekendDays}
-          />
-        ))}
-      </div>
-
-      {/* Floating toolbar */}
-      <div className="sticky bottom-3 sm:bottom-4 mt-3 sm:mt-4 flex items-center justify-center z-30 px-2">
-        <div className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-xl border" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }}>
-          <button
-            onClick={() => setCompanyMode(false)}
-            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
-            style={{
-              background: !companyMode ? 'var(--text-primary)' : 'transparent',
-              color: !companyMode ? 'var(--bg-card)' : 'var(--text-muted)',
-              border: companyMode ? '1px solid var(--border-primary)' : '1px solid transparent',
-            }}>
-            <MousePointer2 size={13} />
-            {selectedUser && <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: selectedUser.color }} />}
-            {selectedUser ? selectedUser.username : t('vacay.modeVacation')}
-          </button>
-          {companyHolidaysEnabled && (
-            <button
-              onClick={() => setCompanyMode(true)}
-              className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
-              style={{
-                background: companyMode ? '#d97706' : 'transparent',
-                color: companyMode ? '#fff' : 'var(--text-muted)',
-                border: !companyMode ? '1px solid var(--border-primary)' : '1px solid transparent',
-              }}>
-              <Building2 size={13} />
-              {t('vacay.modeCompany')}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

client/src/components/Vacay/VacayMonthCard.tsx

@@ -1,139 +0,0 @@
-import { useMemo } from 'react'
-import { useTranslation } from '../../i18n'
-import { isWeekend } from './holidays'
-import type { HolidaysMap, VacayEntry } from '../../types'
-
-const WEEKDAY_KEYS = ['vacay.mon', 'vacay.tue', 'vacay.wed', 'vacay.thu', 'vacay.fri', 'vacay.sat', 'vacay.sun'] as const
-
-function hexToRgba(hex: string, alpha: number): string {
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r},${g},${b},${alpha})`
-}
-
-interface VacayMonthCardProps {
-  year: number
-  month: number
-  holidays: HolidaysMap
-  companyHolidaySet: Set<string>
-  companyHolidaysEnabled?: boolean
-  entryMap: Record<string, VacayEntry[]>
-  onCellClick: (date: string) => void
-  companyMode: boolean
-  blockWeekends: boolean
-  weekendDays?: number[]
-}
-
-export default function VacayMonthCard({
-  year, month, holidays, companyHolidaySet, companyHolidaysEnabled = true, entryMap,
-  onCellClick, companyMode, blockWeekends, weekendDays = [0, 6]
-}: VacayMonthCardProps) {
-  const { t, locale } = useTranslation()
-
-  const weekdays = WEEKDAY_KEYS.map(k => t(k))
-  const monthName = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(year, month, 1)), [locale, year, month])
-  
-  const weeks = useMemo(() => {
-    const firstDay = new Date(year, month, 1)
-    const daysInMonth = new Date(year, month + 1, 0).getDate()
-    let startDow = firstDay.getDay() - 1
-    if (startDow < 0) startDow = 6
-    const cells = []
-    for (let i = 0; i < startDow; i++) cells.push(null)
-    for (let d = 1; d <= daysInMonth; d++) cells.push(d)
-    while (cells.length % 7 !== 0) cells.push(null)
-    const w = []
-    for (let i = 0; i < cells.length; i += 7) w.push(cells.slice(i, i + 7))
-    return w
-  }, [year, month])
-
-  const pad = (n) => String(n).padStart(2, '0')
-
-  return (
-    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
-      <div className="px-3 py-2 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
-        <span className="text-xs font-semibold" style={{ color: 'var(--text-primary)', textTransform: 'capitalize' }}>{monthName}</span>
-      </div>
-
-      <div className="grid grid-cols-7 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
-        {weekdays.map((wd, i) => (
-          <div key={wd} className="text-center text-[10px] font-medium py-1" style={{ color: i >= 5 ? 'var(--text-faint)' : 'var(--text-muted)' }}>
-            {wd}
-          </div>
-        ))}
-      </div>
-
-      <div>
-        {weeks.map((week, wi) => (
-          <div key={wi} className="grid grid-cols-7">
-            {week.map((day, di) => {
-              if (day === null) return <div key={di} style={{ height: 28 }} />
-
-              const dateStr = `${year}-${pad(month + 1)}-${pad(day)}`
-              const dayOfWeek = new Date(year, month, day).getDay()
-              const weekend = weekendDays.includes(dayOfWeek)
-              const holiday = holidays[dateStr]
-              const isCompany = companyHolidaysEnabled && companyHolidaySet.has(dateStr)
-              const dayEntries = entryMap[dateStr] || []
-              const isBlocked = !!holiday || (weekend && blockWeekends) || (isCompany && !companyMode)
-
-              return (
-                <div
-                  key={di}
-                  title={holiday ? (holiday.label ? `${holiday.label}: ${holiday.localName}` : holiday.localName) : undefined}
-                  className="relative flex items-center justify-center cursor-pointer transition-colors"
-                  style={{
-                    height: 28,
-                    background: weekend ? 'var(--bg-secondary)' : 'transparent',
-                    borderTop: '1px solid var(--border-secondary)',
-                    borderRight: '1px solid var(--border-secondary)',
-                    cursor: isBlocked ? 'default' : 'pointer',
-                  }}
-                  onClick={() => onCellClick(dateStr)}
-                  onMouseEnter={e => { if (!isBlocked) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                  onMouseLeave={e => { e.currentTarget.style.background = weekend ? 'var(--bg-secondary)' : 'transparent' }}
-                >
-                  {holiday && <div className="absolute inset-0.5 rounded" style={{ background: hexToRgba(holiday.color, 0.12) }} />}
-                  {isCompany && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(245,158,11,0.15)' }} />}
-
-                  {dayEntries.length === 1 && (
-                    <div className="absolute inset-0.5 rounded" style={{ backgroundColor: dayEntries[0].person_color, opacity: 0.4 }} />
-                  )}
-                  {dayEntries.length === 2 && (
-                    <div className="absolute inset-0.5 rounded" style={{
-                      background: `linear-gradient(135deg, ${dayEntries[0].person_color} 50%, ${dayEntries[1].person_color} 50%)`,
-                      opacity: 0.4,
-                    }} />
-                  )}
-                  {dayEntries.length === 3 && (
-                    <div className="absolute inset-0.5 rounded overflow-hidden" style={{ opacity: 0.4 }}>
-                      <div className="absolute top-0 left-0 w-1/2 h-full" style={{ backgroundColor: dayEntries[0].person_color }} />
-                      <div className="absolute top-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[1].person_color }} />
-                      <div className="absolute bottom-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[2].person_color }} />
-                    </div>
-                  )}
-                  {dayEntries.length >= 4 && (
-                    <div className="absolute inset-0.5 rounded overflow-hidden" style={{ opacity: 0.4 }}>
-                      <div className="absolute top-0 left-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[0].person_color }} />
-                      <div className="absolute top-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[1].person_color }} />
-                      <div className="absolute bottom-0 left-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[2].person_color }} />
-                      <div className="absolute bottom-0 right-0 w-1/2 h-1/2" style={{ backgroundColor: dayEntries[3].person_color }} />
-                    </div>
-                  )}
-
-                  <span className="relative z-[1] text-[11px] font-medium" style={{
-                    color: holiday ? holiday.color : weekend ? 'var(--text-faint)' : 'var(--text-primary)',
-                    fontWeight: dayEntries.length > 0 ? 700 : 500,
-                  }}>
-                    {day}
-                  </span>
-                </div>
-              )
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}