From 898de9c17669d0ae507338e0ff180c1a47c63cce Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 18 Jun 2026 01:02:26 +0200
Subject: [PATCH] appview/fragment/pill: add concave corners & borders when in
 focus mode

Signed-off-by: eti <eti@eti.tf>
---
 .../pages/templates/focus/fragments/pill.html | 10 ++++----
 input.css                                     | 23 +++++++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/appview/pages/templates/focus/fragments/pill.html b/appview/pages/templates/focus/fragments/pill.html
index fa3c413e..f4b49d23 100644
--- a/appview/pages/templates/focus/fragments/pill.html
+++ b/appview/pages/templates/focus/fragments/pill.html
@@ -1,9 +1,11 @@
 {{ define "focus/pill" }}
     {{ if .Focusing }}
     {{ $offFocus := and .FocusLink .CurrentPath (not (hasPrefix .CurrentPath .FocusLink)) }}
-    <div id="focus-pill" class="fixed bottom-0 left-1/2 -translate-x-1/2 z-50 select-none">
+    <div id="focus-border" class="ring-inset ring-4 ring-indigo-600 rounded-2xl fixed inset w-screen h-screen z-50 pointer-events-none
+      before:ring-inset before:ring-4 before:ring-indigo-600 before:fixed before:inset before:w-screen before:h-screen before:z-50 before:pointer-events-none"></div>
+    <div id="focus-pill" class="focus-pill fixed bottom-1 left-1/2 -translate-x-1/2 z-50 select-none">
       {{ if $offFocus }}<a href="{{ .FocusLink }}" class="absolute inset-0 z-0 no-underline" aria-label="Return to focus"></a>{{ end }}
-      <div class="relative flex items-center gap-12 bg-indigo-600 text-sm text-white rounded-t-lg px-4 py-2 shadow-lg">
+      <div class="relative flex items-center gap-12 bg-indigo-600 text-sm text-white rounded-t-lg px-4 py-2">
 
       <form method="POST" action="/focus/end" class="relative z-10 inline m-0">
         <button type="submit" class="flex items-center gap-1 text-white hover:text-indigo-200 bg-transparent border-0 p-0 cursor-pointer text-sm">
@@ -13,8 +15,8 @@
 
       {{ $remaining := sub .FocusCount 1 }}
       {{ if $offFocus }}
-        <span class="flex items-center gap-2 whitespace-nowrap animate-pulse">
-          {{ i "route-off" "size-4" }}
+        <span class="flex items-center gap-2 whitespace-nowrap">
+          {{ i "route-off" "size-4 animate-pulse" }}
           Off track
           {{ if gt $remaining 0 }}
             <span class="opacity-75">{{ $remaining }} remaining</span>
diff --git a/input.css b/input.css
index af00177c..727686f1 100644
--- a/input.css
+++ b/input.css
@@ -1621,3 +1621,26 @@ actor-typeahead::part(menu) {
         } /* white */
     }
 }
+
+.focus-pill {
+    --r: 10px;
+
+    &::before,
+    &::after {
+        @apply bg-indigo-600 absolute bottom-0;
+        content: "";
+        width: var(--r);
+        height: var(--r);
+        -webkit-mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000);
+        mask: radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000);
+    }
+    
+    &::before {
+        left: calc(-1 * var(--r));
+        @apply -scale-x-100;
+    }
+    
+    &::after {
+        right: calc(-1 * var(--r));
+    }
+}
-- 
2.51.2