From 66f928ca2462372f9ba95b6efb929e33b1ced716 Mon Sep 17 00:00:00 2001
From: Mahad Kalam <55807755+skyfallwastaken@users.noreply.github.com>
Date: Wed, 25 Feb 2026 10:43:52 +0000
Subject: [PATCH] OS switcher tabs updates (#1002)

* Add OS switcher tabs to WakatimeSetup page

- Add segmented control with macOS/Linux/Codespaces, Windows, and Advanced tabs
- Default tab is auto-detected from user agent (server-side)
- Show WSL option in mac/linux tab label only when user is on Windows
- Use modal-matching cubic-bezier easing for tab transitions

* Add system test for WakatimeSetup OS switcher tabs

* Extract repeated tab classes into tabClass helper

* Remove Xcode reference from setup subtitle

* Show Xcode in subtitle only on macOS/Linux tab

* pf

* Update test/system/wakatime_setup_test.rb

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 .../pages/WakatimeSetup/Index.svelte          | 35 ++++++++++---------
 test/system/wakatime_setup_test.rb            | 30 ++++++++++++++++
 2 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 test/system/wakatime_setup_test.rb

diff --git a/app/javascript/pages/WakatimeSetup/Index.svelte b/app/javascript/pages/WakatimeSetup/Index.svelte
index 7a19c68..130b05d 100644
--- a/app/javascript/pages/WakatimeSetup/Index.svelte
+++ b/app/javascript/pages/WakatimeSetup/Index.svelte
@@ -16,6 +16,15 @@
 
   let activeSection = $state(setup_os === "windows" ? "windows" : "mac-linux");
   let isWindows = setup_os === "windows";
+
+  const tabBase =
+    "flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]";
+  const tabActive = "bg-darkless text-surface-content shadow-sm";
+  const tabInactive = "text-secondary hover:text-surface-content";
+  function tabClass(section: string) {
+    return `${tabBase} ${activeSection === section ? tabActive : tabInactive}`;
+  }
+
   let hasHeartbeat = $state(false);
   let heartbeatTimeAgo = $state("");
   let checkCount = $state(0);
@@ -33,8 +42,11 @@
   ];
 
   const sharedTitle = "Configure Hackatime";
-  const sharedSubtitle =
+  const macLinuxSubtitle =
     "This creates your config file and validates your API key. And if you're using VS Code, a JetBrains IDE, Zed, or Xcode, we'll even set up the plugins for you!";
+  const windowsSubtitle =
+    "This creates your config file and validates your API key. And if you're using VS Code, a JetBrains IDE, or Zed, we'll even set up the plugins for you!";
+  const advancedSubtitle = macLinuxSubtitle;
 
   function showSuccess(timeAgo: string) {
     hasHeartbeat = true;
@@ -123,28 +135,19 @@
 
       <div class="flex gap-1 p-1 bg-darker border border-darkless rounded-xl">
         <button
-          class="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] {activeSection ===
-          'mac-linux'
-            ? 'bg-darkless text-surface-content shadow-sm'
-            : 'text-secondary hover:text-surface-content'}"
+          class={tabClass("mac-linux")}
           onclick={() => (activeSection = "mac-linux")}
         >
           macOS / Linux{isWindows ? " / WSL" : ""} / Codespaces
         </button>
         <button
-          class="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] {activeSection ===
-          'windows'
-            ? 'bg-darkless text-surface-content shadow-sm'
-            : 'text-secondary hover:text-surface-content'}"
+          class={tabClass("windows")}
           onclick={() => (activeSection = "windows")}
         >
           Windows
         </button>
         <button
-          class="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] {activeSection ===
-          'advanced'
-            ? 'bg-darkless text-surface-content shadow-sm'
-            : 'text-secondary hover:text-surface-content'}"
+          class={tabClass("advanced")}
           onclick={() => (activeSection = "advanced")}
         >
           Advanced
@@ -155,7 +158,7 @@
         <div class="bg-dark border border-darkless rounded-xl p-8 shadow-sm">
           <div class="mb-6">
             <h3 class="text-xl font-semibold mb-2">{sharedTitle}</h3>
-            <p class="text-secondary text-sm">{sharedSubtitle}</p>
+            <p class="text-secondary text-sm">{macLinuxSubtitle}</p>
           </div>
 
           <div
@@ -267,7 +270,7 @@
         <div class="bg-dark border border-darkless rounded-xl p-8 shadow-sm">
           <div class="mb-6">
             <h3 class="text-xl font-semibold mb-2">{sharedTitle}</h3>
-            <p class="text-secondary text-sm">{sharedSubtitle}</p>
+            <p class="text-secondary text-sm">{windowsSubtitle}</p>
           </div>
 
           <div class="space-y-4">
@@ -355,7 +358,7 @@
         <div class="bg-dark border border-darkless rounded-xl p-8 shadow-sm">
           <div class="mb-6">
             <h3 class="text-xl font-semibold mb-2">{sharedTitle}</h3>
-            <p class="text-secondary text-sm">{sharedSubtitle}</p>
+            <p class="text-secondary text-sm">{advancedSubtitle}</p>
           </div>
 
           <div class="bg-purple/10 border border-purple/20 rounded-lg p-4 mb-4">
diff --git a/test/system/wakatime_setup_test.rb b/test/system/wakatime_setup_test.rb
new file mode 100644
index 0000000..45b1f33
--- /dev/null
+++ b/test/system/wakatime_setup_test.rb
@@ -0,0 +1,30 @@
+require "application_system_test_case"
+
+class WakatimeSetupTest < ApplicationSystemTestCase
+  setup do
+    @user = User.create!(timezone: "UTC")
+    sign_in_as(@user)
+  end
+
+  test "shows OS switcher tabs and can switch between them" do
+    visit my_wakatime_setup_path
+
+    # Default tab should be macOS / Linux / Codespaces (non-Windows user agent)
+    assert_text "Configure Hackatime"
+    assert_text "curl -fsSL"
+
+    # Switch to Windows tab
+    click_on "Windows"
+    assert_text "Open PowerShell"
+    assert_text "install.ps1"
+
+    # Switch to Advanced tab
+    click_on "Advanced"
+    assert_text "~/.wakatime.cfg"
+    assert_text "api_url"
+
+    # Switch back to macOS / Linux tab
+    click_on "macOS / Linux / Codespaces"
+    assert_text "curl -fsSL"
+  end
+end