Photo carousel with private Supabase Storage

[rastermanden]

Summary

• Multi-photo carousel in gem detail view — arrows, dot navigation, smooth slide transition
• Multiple photo upload in the add form — tap zone repeatedly to append photos; × to remove before saving
• Photos stored in private Supabase Storage (gem-photos bucket) using signed URLs (1h expiry)
• Signed URLs generated on-demand for both carousel and list thumbnails
• Handles legacy public URLs stored before bucket was made private

Supabase setup required

Run in SQL Editor if not already done:

Storage RLS (gem-photos bucket must be private):

CREATE POLICY "Authenticated upload to gem-photos"
ON storage.objects FOR INSERT TO authenticated
WITH CHECK (bucket_id = 'gem-photos' AND auth.uid()::text = split_part(name, '/', 1));

CREATE POLICY "auth_read" ON storage.objects FOR SELECT TO authenticated
USING (bucket_id = 'gem-photos');

gem_photos table (optional — enables multi-photo per gem):

CREATE TABLE gem_photos (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  gem_id uuid REFERENCES gems(id) ON DELETE CASCADE,
  photo_url text NOT NULL,
  sort_order int DEFAULT 0,
  created_at timestamptz DEFAULT now()
);
ALTER TABLE gem_photos ENABLE ROW LEVEL SECURITY;
CREATE POLICY "gem_photos_policy" ON gem_photos
  USING (gem_id IN (SELECT id FROM gems WHERE user_id = auth.uid()))
  WITH CHECK (gem_id IN (SELECT id FROM gems WHERE user_id = auth.uid()));

Test plan

• Add gem with 3 photos — carousel shows all 3 with arrows and dots
• Tap × on a thumbnail before saving — excluded from upload
• Open existing gem with single photo_url — displays correctly in carousel
• Open gem with no photos — emoji header shown
• Thumbnails in list load correctly via signed URLs

🤖 Generated with Claude Code