From 66fd461dc3f34b571bdc1295d4e89f3909c9d34e Mon Sep 17 00:00:00 2001
From: Lemon <lemonknowsall@gmail.com>
Date: Wed, 18 Mar 2026 19:28:17 -0700
Subject: [PATCH] Use SVG mask for truly transparent ring gap on planet FAB

Replaces the background-colored stroke hack with an SVG mask
that cuts the ring path out of the planet body, making the gap
genuinely see-through to whatever is behind the button.
---
 src/components/FloatingComposeButton.tsx | 30 ++++++++++++++----------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/FloatingComposeButton.tsx b/src/components/FloatingComposeButton.tsx
index c1e027af..a2e3b99c 100644
--- a/src/components/FloatingComposeButton.tsx
+++ b/src/components/FloatingComposeButton.tsx
@@ -55,18 +55,24 @@ export function FloatingComposeButton({ kind = 1, href, onFabClick, icon }: Floa
           viewBox="0 0 24 24"
           className="absolute inset-0 w-full h-full"
         >
-          {/* Planet body */}
-          <circle cx="12" cy="12" r="8" className="fill-accent" />
-          {/* Ring gap — wider background-colored stroke to create visible border around the ring */}
-          <path
-            d="M4.05 13c-1.7 1.8-2.5 3.5-1.8 4.5c1.1 1.9 6.4 1 11.8-2s8.9-7.1 7.7-9c-.6-1-2.4-1.2-4.7-.7"
-            fill="none"
-            className="stroke-background"
-            strokeWidth="4"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          {/* Ring — accent-colored, drawn on top of the gap */}
+          <defs>
+            {/* Mask: white = visible, black = cut out */}
+            <mask id="planet-body-mask">
+              <circle cx="12" cy="12" r="8" fill="white" />
+              {/* Cut out the ring path where it crosses the body */}
+              <path
+                d="M4.05 13c-1.7 1.8-2.5 3.5-1.8 4.5c1.1 1.9 6.4 1 11.8-2s8.9-7.1 7.7-9c-.6-1-2.4-1.2-4.7-.7"
+                fill="none"
+                stroke="black"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </mask>
+          </defs>
+          {/* Planet body with ring gap cut out */}
+          <circle cx="12" cy="12" r="8" className="fill-accent" mask="url(#planet-body-mask)" />
+          {/* Ring — accent-colored */}
           <path
             d="M4.05 13c-1.7 1.8-2.5 3.5-1.8 4.5c1.1 1.9 6.4 1 11.8-2s8.9-7.1 7.7-9c-.6-1-2.4-1.2-4.7-.7"
             fill="none"