Merge pull request #3 from handsomezhuzhu/v0/kdaugh14-4907-a84156e8

feat: add GitHub link button

app/page.tsx

@@ -27,6 +27,7 @@ import {
   Monitor,
   Languages,
   Check,
+  Github,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -657,6 +658,22 @@ export default function TwoFactorAuth() {
               </div>
             </div>
             <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                asChild
+              >
+                <a
+                  href="https://github.com/handsomezhuzhu/2fa-tool"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="GitHub"
+                >
+                  <Github className="h-5 w-5" />
+                  <span className="sr-only">GitHub</span>
+                </a>
+              </Button>
+
               <Button
                 variant="ghost"
                 size="icon"
@@ -847,6 +864,7 @@ export default function TwoFactorAuth() {
 
                       {showAdvanced && (
                         <div className="mt-4 space-y-4">
+                          <div className="grid grid-cols-2 gap-4">
                             <div className="space-y-2">
                               <Label>{t.algorithm}</Label>
                               <Select
@@ -882,6 +900,7 @@ export default function TwoFactorAuth() {
                                 </SelectContent>
                               </Select>
                             </div>
+                          </div>
                           <div className="space-y-2">
                             <Label>{t.period}</Label>
                             <Input
@@ -1237,7 +1256,7 @@ function TokenCard({ token, code, timeLeft, showCode, onCopy, onEdit, onDelete,
                   <Edit2 className="h-4 w-4 mr-2" />
                   {t.edit}
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                <DropdownMenuItem onClick={onDelete} className="text-red-500 focus:text-red-500 focus:bg-red-500/10">
                   <Trash2 className="h-4 w-4 mr-2" />
                   {t.delete}
                 </DropdownMenuItem>

components/ui/toast.tsx

@@ -31,7 +31,7 @@ const toastVariants = cva(
       variant: {
         default: 'border bg-background text-foreground',
         destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
+          'destructive group border-red-500 bg-red-500 text-white dark:border-red-600 dark:bg-red-600',
       },
     },
     defaultVariants: {
@@ -44,11 +44,19 @@ const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
     VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
+>(({ className, variant, onPointerDown, onMouseDown, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
       className={cn(toastVariants({ variant }), className)}
+      onPointerDown={(e) => {
+        e.stopPropagation()
+        onPointerDown?.(e)
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation()
+        onMouseDown?.(e)
+      }}
       {...props}
     />
   )
@@ -73,14 +81,24 @@ ToastAction.displayName = ToastPrimitives.Action.displayName
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
+>(({ className, onClick, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-100 transition-opacity hover:text-foreground focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
       className,
     )}
     toast-close=""
+    onClick={(e) => {
+      e.stopPropagation()
+      onClick?.(e)
+    }}
+    onPointerDown={(e) => {
+      e.stopPropagation()
+    }}
+    onMouseDown={(e) => {
+      e.stopPropagation()
+    }}
     {...props}
   >
     <X className="h-4 w-4" />