From e9b957ffd2cb73b7e3f7482cf777a815da91c4cb Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 4 Aug 2026 01:54:55 +0300
Subject: [PATCH] feat: add info button variant and reuse it in mobile sessions
 sheet

Adds a new info-styled button variant for consistent secondary actions.
Updates mobile sessions sheet actions to use the shared Button component.
Cleans up the mobile footer buttons with the shared sizing and styling system.
---
 packages/ui/src/apps/MobileSessionsSheet.tsx | 30 +++++++++++---------
 packages/ui/src/components/ui/button.tsx     | 13 +++++++++
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/apps/MobileSessionsSheet.tsx b/packages/ui/src/apps/MobileSessionsSheet.tsx
index fb85e607..5f93651b 100644
--- a/packages/ui/src/apps/MobileSessionsSheet.tsx
+++ b/packages/ui/src/apps/MobileSessionsSheet.tsx
@@ -1800,26 +1800,28 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
             style={{ paddingBottom: 'calc(0.375rem + var(--oc-safe-area-bottom, 0px))' }}
           >
             {footer.instanceLabel && footer.onOpenInstances ? (
-              <button
+              <Button
                 type="button"
-                className="flex h-10 min-w-0 flex-1 items-center gap-2 rounded-xl px-2 text-left transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+                variant="info"
+                size="lg"
+                className="min-w-0 shrink justify-start"
                 onClick={footer.onOpenInstances}
                 aria-label={t('mobile.menu.instances')}
                 style={{ touchAction: 'manipulation' }}
               >
-                <Icon name="server" className="size-[18px] shrink-0 text-muted-foreground" />
-                <span className="block min-w-0 truncate typography-ui-label text-foreground">
-                  {footer.instanceLabel}
-                </span>
-              </button>
+                <Icon name="server" className="size-[18px]" />
+                <span className="block min-w-0 truncate">{footer.instanceLabel}</span>
+              </Button>
             ) : (
               <div className="min-w-0 flex-1" />
             )}
             <div className="flex shrink-0 items-center gap-1">
               {footer.onOpenUpdate ? (
-                <button
+                <Button
                   type="button"
-                  className="relative flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  variant="default"
+                  size="lg"
+                  className="w-10 px-0"
                   onClick={footer.onOpenUpdate}
                   aria-label={t('mobile.menu.update')}
                   title={t('mobile.menu.update')}
@@ -1827,18 +1829,20 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
                 >
                   <Icon name="download" className="size-5" />
                   <span className="absolute right-2 top-2 inline-flex size-2 rounded-full bg-primary" aria-hidden />
-                </button>
+                </Button>
               ) : null}
-              <button
+              <Button
                 type="button"
-                className="flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                variant="default"
+                size="lg"
+                className="w-10 px-0"
                 onClick={footer.onOpenSettings}
                 aria-label={t('mobile.menu.settings')}
                 title={t('mobile.menu.settings')}
                 style={{ touchAction: 'manipulation' }}
               >
                 <Icon name="settings-3" className="size-5" />
-              </button>
+              </Button>
             </div>
           </div>
         ) : null}
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index dd79e144..e38fd187 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -32,6 +32,18 @@ const TINT_DESTRUCTIVE = [
   "dark:active:bg-[color-mix(in_srgb,var(--status-error)_20%,transparent)]",
 ].join(" ")
 
+const TINT_INFO = [
+  "bg-[color-mix(in_srgb,var(--status-info)_4%,var(--background))]",
+  "text-[var(--status-info)]",
+  "border border-[color-mix(in_srgb,var(--status-info)_8%,transparent)]",
+  "hover:bg-[color-mix(in_srgb,var(--status-info)_7%,var(--background))]",
+  "active:bg-[color-mix(in_srgb,var(--status-info)_10%,var(--background))]",
+  "dark:bg-[color-mix(in_srgb,var(--status-info)_7%,transparent)]",
+  "dark:border-[color-mix(in_srgb,var(--status-info)_12%,transparent)]",
+  "dark:hover:bg-[color-mix(in_srgb,var(--status-info)_10%,transparent)]",
+  "dark:active:bg-[color-mix(in_srgb,var(--status-info)_14%,transparent)]",
+].join(" ")
+
 const buttonVariants = cva(
   [
     "group relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[10px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] typography-ui-label font-medium lowercase tracking-[0.01em] shrink-0 select-none",
@@ -49,6 +61,7 @@ const buttonVariants = cva(
           TINT_DESTRUCTIVE,
           "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         ),
+        info: TINT_INFO,
         neutral:
           "bg-interactive-hover text-foreground border border-border/60 hover:bg-interactive-active",
         outline: