fix(ui): remove transition-opacity from page icon hover reveal (#191) (#196)

* fix(ui): remove transition-opacity from page icon hover reveal (#191)

Co-authored-by: Ona <no-reply@ona.com>

* fix: [ci-fix] make page-images bucket migration idempotent

The staging job runs `supabase db reset --linked` which drops the public
schema but not the storage schema. The INSERT INTO storage.buckets and
CREATE POLICY statements failed on re-runs because the objects already
existed. Added ON CONFLICT DO NOTHING for the bucket insert and wrapped
policies in DO blocks with duplicate_object exception handlers.

Co-authored-by: Ona <no-reply@ona.com>

---------

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

src/components/page-icon-design-spec.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+/**
+ * Regression test for issue #191: the "Add icon" hover-reveal button
+ * must not use transition-opacity. Design spec requires instant hover states.
+ */
+describe("page-icon design spec compliance", () => {
+  const source = readFileSync(join(__dirname, "page-icon.tsx"), "utf-8");
+
+  it("hover-reveal wrapper does not use transition classes", () => {
+    // Design spec: "Hover states: no transition (instant)."
+    // The opacity-0 → opacity-100 hover reveal must be instant.
+    const lines = source.split("\n");
+    const hoverRevealLines = lines.filter(
+      (line) =>
+        line.includes("opacity-0") &&
+        line.includes("group-hover")
+    );
+
+    for (const line of hoverRevealLines) {
+      expect(line).not.toContain("transition-opacity");
+      expect(line).not.toMatch(/duration-\d+/);
+    }
+  });
+});

src/components/page-icon.tsx

@@ -66,7 +66,7 @@ export function PageIcon({ pageId, initialIcon }: PageIconProps) {
   }
 
   return (
-    <div className="mb-1 opacity-0 group-hover/page-header:opacity-100 transition-opacity">
+    <div className="mb-1 opacity-0 group-hover/page-header:opacity-100">
       <EmojiPicker
         open={open}
         onOpenChange={setOpen}

supabase/migrations/20260417165531_create_page_images_bucket.sql

@@ -8,22 +8,32 @@ VALUES (
   true,
   5242880, -- 5 MB
   ARRAY['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml']
-);
+)
+ON CONFLICT (id) DO NOTHING;
 
 -- Authenticated users can upload images
-CREATE POLICY "Authenticated users can upload page images"
-  ON storage.objects FOR INSERT
-  TO authenticated
-  WITH CHECK (bucket_id = 'page-images');
+DO $$ BEGIN
+  CREATE POLICY "Authenticated users can upload page images"
+    ON storage.objects FOR INSERT
+    TO authenticated
+    WITH CHECK (bucket_id = 'page-images');
+EXCEPTION WHEN duplicate_object THEN NULL;
+END $$;
 
 -- Anyone can view uploaded images (public bucket)
-CREATE POLICY "Public read access for page images"
-  ON storage.objects FOR SELECT
-  TO public
-  USING (bucket_id = 'page-images');
+DO $$ BEGIN
+  CREATE POLICY "Public read access for page images"
+    ON storage.objects FOR SELECT
+    TO public
+    USING (bucket_id = 'page-images');
+EXCEPTION WHEN duplicate_object THEN NULL;
+END $$;
 
 -- Image owners can delete their uploads
-CREATE POLICY "Users can delete own page images"
-  ON storage.objects FOR DELETE
-  TO authenticated
-  USING (bucket_id = 'page-images' AND (storage.foldername(name))[1] = 'uploads' AND auth.uid() = owner);
+DO $$ BEGIN
+  CREATE POLICY "Users can delete own page images"
+    ON storage.objects FOR DELETE
+    TO authenticated
+    USING (bucket_id = 'page-images' AND (storage.foldername(name))[1] = 'uploads' AND auth.uid() = owner);
+EXCEPTION WHEN duplicate_object THEN NULL;
+END $$;