fix: update checkbox ui and fix tab to switch element focus

src/renderer/src/components/ui/button/variants.tsx

@@ -2,7 +2,7 @@ import { cn } from "@renderer/lib/utils"
 import { cva } from "class-variance-authority"
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {

src/renderer/src/components/ui/checkbox.tsx

@@ -1,27 +1,24 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { cn } from "@renderer/lib/utils"
-import { Check } from "lucide-react"
 import * as React from "react"
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="size-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<"input"> & {
+    onCheckedChange?: (checked: boolean) => void
+  }
+>(({ className, onCheckedChange, ...props }, ref) => (
+        <input
+          type="checkbox"
+          ref={ref}
+          className={cn("checkbox", className)}
+          {...props}
+          onChange={(event) => {
+            onCheckedChange?.(event.target.checked)
+            props.onChange?.(event)
+          }}
+        />
+      ))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export { Checkbox }

src/renderer/src/components/ui/switch.tsx

@@ -8,7 +8,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
       "duration-200 data-[state=checked]:bg-theme-accent data-[state=unchecked]:bg-theme-inactive dark:data-[state=unchecked]:bg-theme-accent-100/10",
       className,
     )}

src/renderer/src/components/ui/tabs.tsx

@@ -67,7 +67,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-theme-foreground",
+      "inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-theme-foreground",
       tabsTriggerVariants({ variant }),
       className,
     )}
@@ -83,7 +83,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none",
       className,
     )}
     {...props}

src/renderer/src/components/user-button.tsx

@@ -110,7 +110,7 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
     return <LoginButton {...props} />
   }
   return (
-    <Link to="/profile">
+    <Link to="/profile" tabIndex={-1}>
       <ActionButton tooltip="Profile">
         <UserButton className="h-5 p-0" hideName />
       </ActionButton>

src/renderer/src/modules/entry-column/index.tsx

@@ -288,7 +288,7 @@ const ListHeader: FC<{
             )}
           </ActionButton>
           <Popover open={markPopoverOpen} onOpenChange={setMarkPopoverOpen}>
-            <PopoverTrigger>
+            <PopoverTrigger asChild>
               <ActionButton
                 shortcut={shortcuts.entries.markAllAsRead.key}
                 tooltip="Mark All as Read"

src/renderer/src/modules/feed-column/index.tsx

@@ -109,7 +109,7 @@ export function FeedColumn() {
         )}
         <div className="flex items-center gap-2" onClick={stopPropagation}>
           <ProfileButton method="modal" />
-          <Link to="/discover">
+          <Link to="/discover" tabIndex={-1}>
             <ActionButton shortcut="Meta+T" tooltip="Add">
               <i className="i-mgc-add-cute-re size-5 text-theme-vibrancyFg" />
             </ActionButton>

src/renderer/src/pages/(external)/redirect.tsx

@@ -49,14 +49,24 @@ export function Component() {
         {" "}
         and safely close this page.
       </h2>
-      <StyledButton
-        className="h-14 rounded-lg px-10 text-lg"
-        onClick={async () => window.open(await getCallbackUrl())}
-      >
-        Open
-        {" "}
-        {APP_NAME}
-      </StyledButton>
+      <div className="center flex gap-4">
+        <StyledButton
+          variant="plain"
+          className="h-14 border-transparent px-10 text-base"
+          onClick={() => navigate("/")}
+        >
+          Continue in Browser
+        </StyledButton>
+
+        <StyledButton
+          className="h-14 !rounded-full px-10 text-lg"
+          onClick={async () => window.open(await getCallbackUrl())}
+        >
+          Open
+          {" "}
+          {APP_NAME}
+        </StyledButton>
+      </div>
     </div>
   )
 }

src/renderer/src/styles/base.css

@@ -9,6 +9,10 @@ body,
   @apply font-theme;
 }
 
+:focus-visible {
+  outline: theme(colors.theme.accent.DEFAULT) auto 1px;
+}
+
 button,
 a {
   @apply cursor-default;

src/renderer/src/styles/tailwind-extend.css

@@ -53,6 +53,12 @@
   .shadow-modal {
     @apply shadow-2xl shadow-stone-300 dark:shadow-stone-800;
   }
+  /* Utils */
+  .no-animation {
+    --btn-focus-scale: 1;
+    --animation-btn: 0;
+    --animation-input: 0;
+  }
 }
 
 /* Radio styling */
@@ -139,3 +145,79 @@
     background-color: oklch(0.232607 0.013807 253.101);
   }
 }
+
+/* Checkbox */
+@layer components {
+  .checkbox {
+    --chkbg: theme(colors.theme.accent.DEFAULT);
+    --chkfg: theme(colors.zinc.100);
+
+    flex-shrink: 0;
+    height: 0.9em;
+    width: 0.9em;
+    cursor: pointer;
+    appearance: none;
+    border-radius: 5px;
+    border-width: 1px;
+    border-color: theme(colors.zinc.500);
+    --tw-border-opacity: 0.2;
+  }
+
+  .checkbox:focus {
+    box-shadow: none;
+  }
+
+  .checkbox:focus-visible {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: theme(colors.theme.accent.DEFAULT);
+    border-color: theme(colors.theme.accent.DEFAULT);
+  }
+
+  .checkbox:disabled {
+    border-width: 0;
+    cursor: not-allowed;
+    border-color: transparent;
+    --tw-bg-opacity: 1;
+    background-color: var(--chkbg);
+    opacity: 0.2;
+  }
+
+  .checkbox:checked,
+  .checkbox[aria-checked="true"] {
+    background-repeat: no-repeat;
+    animation: checkmark var(--animation-input, 0.2s) ease-out;
+    border-color: theme(colors.theme.accent.DEFAULT);
+    background-color: var(--chkbg);
+    background-image: linear-gradient(
+        -45deg,
+        transparent 65%,
+        var(--chkbg) 65.99%
+      ),
+      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
+      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
+      linear-gradient(
+        45deg,
+        var(--chkbg) 30%,
+        var(--chkfg) 30.99%,
+        var(--chkfg) 40%,
+        transparent 40.99%
+      ),
+      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
+  }
+
+  @keyframes checkmark {
+    0% {
+      background-position-y: 5px;
+    }
+
+    50% {
+      background-position-y: -2px;
+    }
+
+    to {
+      background-position-y: 0;
+    }
+  }
+}