Issues

## Problem We plan to email up to 39K legacy users who signed up 8–14 years ago on salon.io. Under GDPR (EU users are the majority), we need a compliant basis for contacting them. ## Requirements ### Legal Basis - **Legitimate interest** (Art. 6(1)(f) GDPR) is the most viable basis — we have an existing customer relationship and are informing them about a successor service for their data/content. - Document the legitimate interest assessment (LIA) before sending. ### Email Content Requirements - Every email must include a working **unsubscribe link** (one-click, per CAN-SPAM and GDPR) - Every email must link to the **privacy policy**: https://docs.salon.io/docs/en/legal/privacy - Every email must link to the **terms of service**: https://docs.salon.io/docs/en/legal/terms - Emails must clearly identify the sender (salon.io / New Salon, Stefan) - Physical address in footer (required by CAN-SPAM, good practice for GDPR) ### Technical Requirements - Resend supports one-click unsubscribe headers (List-Unsubscribe) - CRM must track unsubscribe status — never re-email someone who unsubscribed - SPF/DKIM/DMARC must be configured on sending domain before any volume send - Bounce handling: remove hard bounces from future sends ### Tiered Send Strategy (Risk Mitigation) - **Test batch**: 10 emails to known addresses — verify deliverability - **Tier 1**: 210 VIP users — warm, engaged, low risk - **Tier 2–6**: Graduated sends per [Kickfund PRD](https://docs.salon.io/docs/en/legal/terms) - **Tier 8**: 32K bulk send — only after earlier tiers prove deliverability and low complaint rates - Monitor spam complaint rate: stay under 0.1% (Google/Yahoo requirement) ### Data Handling - Legacy user emails stored in MongoDB (CRM). Do not export to third-party tools without DPA. - Users who migrate to New Salon consent to new [Terms](https://docs.salon.io/docs/en/legal/terms) and [Privacy Policy](https://docs.salon.io/docs/en/legal/privacy) during signup/account linking. - Provide data export/deletion path for legacy users who request it (GDPR Art. 15/17) ## Acceptance Criteria - [ ] Legitimate Interest Assessment documented - [ ] Unsubscribe mechanism working in Resend - [ ] CRM tracks unsubscribe status per user - [ ] SPF/DKIM/DMARC verified on sending domain - [ ] Email templates include: unsubscribe link, privacy policy link, terms link, physical address - [ ] Bounce handling configured - [ ] Test batch sent and verified before Tier 1

This would allow for greater creative freedom and create an interesting visual dynamic, particularly in editorial, portfolio, or magazine layouts. Interesting options: right, left, top, bottom

Enable automatic_tax in Stripe checkout sessions. Requires EU OSS registration. Add tax_id_collection for B2B reverse charge. Full checklist in docs/ongoing/TAX-AND-PAYMENTS-PLAN.md (all items unchecked). Split from #14 — tier enforcement is complete, Tax is not started.

Public-facing user profile page. Frontend design penned out in new-salon-app/new-salon-profile.pen.

user: "trying to create a page called "home" gives error, probably because internally you have home by default"

## Summary Implement an affiliate/referral program that turns paying customers into a scalable growth channel. The program — called "New Salon Partners" — lets any paying customer earn 20% recurring commissions for 12 months on referred subscriptions, with partner perks and milestone rewards. ## Program Structure **Eligibility:** Any paying customer (Basic, Premium, Pro, or Pro Lifetime) with at least one active subscription. No application process — auto-eligible. **Commission Model: 20% Recurring for 12 Months** | Detail | Value | |---|---| | Rate | 20% of referred customer's subscription revenue | | Type | Recurring — pays on every successful renewal | | Duration | 12 months from referred customer's first payment | | Cookie window | 90 days | | Attribution | Last-click with referral code override | **Revenue per Referral:** | Referred Tier | Monthly Commission | Total over 12 months | |---|---|---| | Basic (€10/mo) | €2/mo | €24 | | Premium (€20/mo) | €4/mo | €48 | | Pro (€40/mo) | €8/mo | €96 | | Pro Lifetime (€399-499) | €79.80-99.80 (one-time) | €79.80-99.80 | **Payouts:** €25 minimum threshold, monthly on the 15th. Options: PayPal, bank transfer, or account credit. **Tier Bonuses:** Pro/Pro Lifetime affiliates get 25% commission instead of 20%. ## Partner Perks | Perk | Requirement | |---|---| | Partner badge on profile | Any paid tier | | Referral dashboard | Any paid tier | | Early access to features | 5+ referrals | | Partner directory listing | 10+ referrals | | Priority support | 10+ referrals | | Annual partner spotlight | Top 10 partners | ## Milestone Rewards | Milestone | Reward | |---|---| | First referral | Welcome Partner email + badge | | 5 paying referrals | 1 month free on current tier | | 10 paying referrals | Lifetime "Founding Partner" badge + directory listing | | 25 paying referrals | Free upgrade to next tier for 6 months | | 50 paying referrals | Pro Lifetime granted | ## Implementation Plan ### Phase 1: Launch with Rewardful (Pre-Launch → Launch Day) - Sign up for Rewardful ($49/mo), connect Stripe, configure 20%/12mo/90-day - Add Rewardful tracking script + Stripe checkout metadata integration - Update `/{username}/settings/invite` with referral link and basic stats - Create `/partners` landing page ### Phase 2: Custom Build (when 50+ active affiliates) - Full custom solution with Supabase tables (`affiliates`, `referral_conversions`, `affiliate_payouts`, `referral_clicks`) - Integrated dashboard in settings, partner badges, milestone automation - Stripe webhook integration for automatic commission tracking ## Revenue Impact (Conservative Estimate, Year 1) - 20 active affiliates × 3 referrals each = 60 new paying customers - Annual revenue from referrals: €10,800 - Commission cost: €2,160 + €540 (Rewardful) - **Net revenue gain: €8,100** ## Competitor Comparison | Platform | Commission | Type | Cookie | |---|---|---|---| | Squarespace | $100-200 | One-time | 30 days | | Wix | $100 | One-time | 30 days | | Webflow | 50% | Recurring, 12 months | 90 days | | **New Salon** | 20% | Recurring, 12 months | 90 days | *Full spec: `new-salon-app/docs/ongoing/AFFILIATE-PROGRAM-PLAN.md`*

## Summary Implement the SLN credit economy as an internal ledger on Supabase. This is Phase 1 of the SAL Protocol — a launch-ready credit system with zero blockchain dependency. Users see "credits" or "SLN balance" while the underlying mechanics are forward-compatible with on-chain settlement in later phases. ## Key Details **Exchange Rate:** Fixed at 1000 SLN = €10 (1 SLN = €0.01) **Onboarding:** New users receive +100 SLN (~€1.00) on email confirmation, plus 5 invite slots. **Invite System:** - Sending an invite costs 20 SLN - When invitee publishes a site: inviter gets +100 SLN (5x return) - When invitee upgrades to Basic: inviter gets +500 SLN bonus + 200 SLN commission - When invitee upgrades to Premium/Pro: inviter gets +1000 SLN bonus + 400-800 SLN commission - Maximum return per invite: 1,600 SLN on 20 SLN investment (80x) **Commission on Upgrades:** 20% of the subscription's first payment, converted to SLN at fixed rate. Recurring commissions deferred to Phase 2. **Spending SLN (at launch):** - Send invite: 20 SLN - Apply as subscription discount: 1:1 at €0.01/SLN - Upgrade to Basic Monthly: 1000 SLN - Cash out: Min 1000 SLN (€10), PayPal or bank transfer, manual review, monthly **Credit Expiry:** 24 months of account inactivity (no login) ## Database Changes - Extend `user_profiles` with `sln_balance`, `invite_slots_total`, `invite_slots_used` - New table: `sln_transactions` (full double-entry ledger with type, amount, balance_after) - New table: `sln_cashout_requests` (manual payout queue) - Extend `invite_requests` with inviter tracking - Atomic `credit_sln` RPC function for all balance mutations - Daily reconciliation query to verify balance integrity ## New API Routes | Route | Method | Purpose | |---|---|---| | `/api/sln/balance` | GET | Current SLN balance and slot count | | `/api/sln/transactions` | GET | Paginated transaction history | | `/api/sln/cashout` | POST | Submit cash-out request | | `/api/sln/apply-discount` | POST | Calculate SLN discount for checkout | | `/api/admin/sln/cashouts` | GET | Pending cash-out requests (admin) | | `/api/admin/sln/cashouts/[id]` | PATCH | Approve/reject cash-out | | `/api/admin/sln/adjust` | POST | Manual balance adjustment | ## Integration Points 1. **Signup flow** — +100 SLN on email confirmation 2. **Invite flow** — SLN debit on send, reward on invitee site publish 3. **Stripe webhook** — Commission on referred user's first subscription payment 4. **Checkout flow** — SLN discount support with atomic debit on payment confirmation 5. **Settings page** — Replace invite placeholder with full balance/transaction/cashout UI ## Phase 2 Migration Path Phase 1 Supabase ledger maps 1:1 to Phase 2 on-chain (BSV-20 SLN tokens). User balances minted as tokens, transaction history archived, UI stays the same. Only visible change is a wallet connection step. *Full spec: `new-salon-app/docs/ongoing/SLN-PHASE-1-INTERNAL-LEDGER.md`*

- Extend CollectionConfig with `collectionSource`: pages / images / text / video / all - Collection rendering per source type: pages as page cards, images as masonry grid, text as list, video as video grid - Extend `CollectionSettings.tsx` with source type selector - Preview count updates live - Add to collection shortcut from asset gallery (tag assignment) **Files:** `src/components/salon/editor/CollectionSettings.tsx`, `src/types/blocks.ts`, `src/hooks/use-collection.ts`

- Import site logo from legacy profile (`header_image`, `logo` field) - Translate legacy nav styles: horizontal, vertical to sidebar, center to horizontal-centered, none to horizontal - Import navigation colors and font settings - Detect legacy filtered pages and create collection-enabled sections with tag filters - Full caption import from `asset.title` and `i18n.[lang].title` (not just alt text) **Files:** `app/api/migration/import-stream/route.ts`, `src/lib/migration/legacy-service.ts`

- Database: create `tags` + `asset_tags` join tables (normalized approach) - Add TagInput to image, text, and video edit panels - Asset gallery: tag display on thumbnails, filtering by tag, bulk tag assignment - Tag cloud of used tags - Sort by tag, date, size, name **Files:** Supabase migration, `ImageEditPanel.tsx`, `TextEditPanel.tsx`, `VideoEditPanel.tsx`, `AssetGallery.tsx`

- Expand SiteThemeSelector from presets-only to custom editing - Allow editing individual colors within a preset (primary, secondary, accent, background, text) - Typography presets: Google Fonts subset (20-30 curated fonts), font size scale selector - Per-section style overrides (color scheme, font override) - Live preview as colors/fonts change **Files:** `src/components/theme/SiteThemeSelector.tsx`, `src/types/site-theme.ts`

allow Navigation to hide automatically. expand on hoover.

bases on vercel's workflow builder, inspired by vuo

I would like to suggest an additional option for the video settings. Currently, videos already support useful playback options such as: autoplay loop muted show controls As an additional feature, it would be great to have a “play on hover” / “start on hover” option. This could create a much more subtle and interactive way of using motion content, especially in galleries, grids, or portfolio layouts, where constant autoplay can sometimes feel visually overwhelming. A hover-triggered playback option could allow motion to appear only when the user intentionally interacts with a specific element, creating a cleaner and more dynamic browsing experience.

I would like to suggest an additional navigation option. Currently, there are several navigation modes available: - horizontal navigation with permanently visible links - sidebar navigation with a permanent vertical list of links - burger navigation with a separate overlay screen While these options already offer flexibility, I sometimes find that permanently visible navigation elements interrupt the visual flow of a page, while the current burger overlay can feel a bit detached from the browsing experience. I would therefore love a more minimal expandable navigation system. For example: clicking the burger icon could simply expand a clean list of links directly over the current page after selecting a link, the menu would automatically collapse again alternatively, a similar expandable/collapsible navigation could also work from the logo area (similar to sidebar navigation, but hidden until activated) The idea would be to have navigation available when needed, while otherwise keeping the page visually clean and uninterrupted. I think this could create a smoother and more elegant browsing experience, especially for visually driven or minimal layouts.

Description: Currently, the Burger Overlay (the menu that opens when clicking the hamburger icon) only allows a solid background color with customizable color and typography settings. This limits the visual flexibility of the overlay and can interrupt the overall design flow of the page. Suggested solution: Add more background options for the Burger Overlay, including: A transparent overlay option, allowing the current page background to remain visible behind the menu The option to upload and use a custom background image for the overlay This would allow the menu links to appear directly over the existing page background or over a specifically designed background image. Benefit: This would create a more seamless and visually consistent user experience, while offering greater design freedom and better integration of the navigation menu into the overall page aesthetic.

Description: In the Canvas layout, it is currently possible to move individual images or the entire layout, but not multiple selected elements at once. This often limits the full potential of the Canvas layout mode. For example, if I need to create space in the middle of a longer and possibly complex layout, I cannot shift a group of elements (e.g. all items on one side) together. Instead, I have to move each element individually to make space for the image I want to insert. This can result in having to partially dismantle and rebuild the layout. Since this mode enables highly customized and intricate designs, this may require undoing work that took significant time and effort to create. Suggested solution: Allow selecting multiple assets (e.g. via the Assets panel) and moving them as a group, similar to layer selection in design tools like Photoshop. Benefit: This would make editing layouts in Canvas mode much faster and more efficient, both for simple arrangements (e.g. inserting an image into a row of elements) and for more complex compositions. It would also better support the intuitive creative potential of the Canvas workflow by preserving carefully arranged layouts and avoiding unnecessary rework. This improvement would benefit both horizontal and vertical use cases.

correct canonical URLs on custom domains etc etc) so your users have good SEO, also make sure its only accessible on the custom domain when user sets one, and that the salon url redirects properly to the custom domain to avoid dublicate content issues and when users port sites from the old salon, the redirects must pass the link juice (301 redirect vs 302)

## Overview Integrate [Agent Browser](https://agent-browser.dev/) — a headless browser automation CLI built for AI agents — to enable automated end-to-end testing, migration verification, and quality assurance across the New Salon platform. Agent Browser uses a Rust CLI + Playwright daemon architecture with a token-efficient "refs" system (~200-400 tokens vs ~3000-5000 for full DOM), making it ideal for AI-driven testing workflows. --- ## Implementation Plan ### Phase 1: Setup & Infrastructure - Install Agent Browser CLI (npm or Homebrew) - Configure daemon settings for our development environment - Set up test runner scripts in `package.json` (e.g., `npm run test:e2e`) - Create `/tests/e2e/` directory structure with shared utilities - Document setup in CLAUDE.md and developer onboarding guide ### Phase 2: Layout Engine Visual Testing - Write automated visual tests for all 8 layout engines: - Canvas: free-form positioning, block overlap, z-index - Mosaic: tile responsiveness, aspect ratios - Slideshow: navigation, transitions, caption display - Justified: row filling, aspect-ratio preservation - Column: snap-to-grid, responsive breakpoints - Fixed Height: row height consistency, floating images - Variable Size: masonry layout, variable widths - Square: uniform aspect ratio grid alignment - Screenshot comparison baselines for each engine - Test across viewport sizes (mobile, tablet, desktop) ### Phase 3: Editor Flow Testing - Block CRUD operations (create, edit, delete, reorder) - Drag-and-drop interactions via @dnd-kit - Section management (add, reorder, delete sections) - Panel interactions (Page, Section, Layout tabs) - Navigation editor flows - Theme switching and preview - Rich text editing (TipTap) interactions ### Phase 4: Migration Verification - Automated comparison between legacy salon.io pages and migrated new.salon.io pages - Fetch legacy page via salon.io JSON API - Render migrated version and capture screenshots - Pixel-diff or structural comparison reporting - Batch verification across migrated user sites ### Phase 5: Payment & Auth Flow Testing - Stripe Checkout session creation and redirect - Subscription management (upgrade, downgrade, cancel, reactivate) - Customer Portal access and navigation - Test all 5 tiers: Free, Basic, Premium, Pro, Pro Lifetime - Webhook handling verification - Auth flows: sign up, sign in, password reset, magic links ### Phase 6: Public Site & SEO Auditing - Crawl published user sites for meta tag verification - OpenGraph and social sharing preview validation - Accessibility audit (WCAG compliance checks) - Custom domain routing and SSL verification - Content width modes (full-bleed, full, wide, inset) rendering - Theme CSS variable application on public pages ### Phase 7: CI/CD Integration - Add Agent Browser tests to Vercel deployment pipeline - Post-deploy smoke tests on preview and production URLs - Failure alerting and screenshot capture on test failures - Test result reporting and trend tracking - Multi-session isolation for parallel test execution --- ## Key Benefits - **Token efficiency**: Refs system uses 10-20x fewer tokens than full DOM, reducing AI testing costs - **Multi-session isolation**: Test authenticated vs anonymous views simultaneously - **CLI-first**: Easy to script into CI/CD pipelines - **Cross-platform**: Works on macOS, Linux, Windows ## Dependencies - Agent Browser CLI (Rust + Node.js) - Playwright (managed by Agent Browser daemon) - Chrome/Chromium browser ## Notes - We already have Playwright MCP connected — Agent Browser complements it for CI/CD and batch testing - Start with Phase 1-2 post-launch (after March 13, 2026) - Prioritize layout engine visual testing as highest-value first use case

- Database: `content_translations` table + `languages`/`default_language` columns on `websites` - Editor: floating toolbar language switcher pill (only when 2+ languages enabled) - Viewer: `?lang=de` URL param, `Accept-Language` detection, `hreflang` SEO tags - Translatable content: text blocks, image captions/alt, page titles/descriptions, nav labels, site title **Files:** Supabase migration, `src/hooks/use-translations.ts`, `EditorLayout.tsx`, `TextEditPanel.tsx`, `ImageEditPanel.tsx`

- Database: `follows`, `likes`, `posts` tables - Post types: site published (auto), page added (auto), image shared, text post, repost - Following feed (content from people you follow) - Discover feed (trending/new content across platform) - Like button on sites, pages, images - Follow/unfollow on user profiles - Basic in-app notification system **Files:** Supabase migration, new components in `src/components/social/`