fix: address tabnabbing, stale closure, null coalescing, a11y, and color index bugs

- ExternalPill: add rel="noopener noreferrer" when target="_blank"
- useAppLayoutKeys: functional updater for setCollapsed to prevent stale closure on rapid keypresses
- Tabs: ?? over || for tab fallback so empty-string IDs are handled correctly
- KeyHint: replace dismiss div with button for keyboard/a11y; add React.Fragment keys to mapped modifier/key arrays
- UserAvatar: Math.abs() on color index to handle non-letter initials

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: alx-xo

src/components/AppLayout/useAppLayoutKeys.ts

@@ -11,10 +11,10 @@ export function useAppLayoutKeys() {
         event.key.toLowerCase() === keybinds.toggle.key.toLowerCase()
       ) {
         event.preventDefault();
-        setCollapsed(!collapsed);
+        setCollapsed((prev) => !prev);
       }
     },
-    [keybinds, collapsed, setCollapsed],
+    [keybinds, setCollapsed],
   );
 
   useEffect(() => {

src/components/ExternalPill/index.tsx

@@ -45,6 +45,7 @@ export function ExternalPill({
     <a
       href={href}
       target={target}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
       title={title}
       className={cn(
         "inline-flex flex-row items-center gap-1.5 rounded-xl border px-3.5 py-2 text-zinc-700 transition-colors duration-500 hover:border-zinc-300 hover:bg-zinc-50 hover:text-black dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:bg-zinc-900 hover:dark:text-white",

src/components/KeyHint/index.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { Icon } from "@/components/Icon";
+import React from "react";
 
 type Modifier = "shift" | "ctrlorcommand" | "alt" | "meta" | "esc";
 
@@ -46,21 +47,21 @@ function KeyHintKeys({ modifiers, keys }: KeyHintItemProps) {
   return (
     <div className="flex flex-row items-center gap-1">
       {modifiers.map((modifier, index) => (
-        <>
+        <React.Fragment key={modifier}>
           <Key value={modifierMap[modifier]} />
           {index < modifiers.length - 1 && (
             <span className="text-sm text-body-muted">+</span>
           )}
-        </>
+        </React.Fragment>
       ))}
       {keys.length > 0 && <span className="text-sm text-body-muted">+</span>}
       {keys.map((key, index) => (
-        <>
+        <React.Fragment key={key}>
           <Key value={key.toUpperCase()} />
           {index < keys.length - 1 && (
             <span className="text-sm text-body-muted">+</span>
           )}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );
@@ -96,13 +97,14 @@ export function KeyHint({
       <div className="flex w-full flex-row items-center self-start border-b px-2.5 py-0.5 text-[10px] font-semibold tracking-wide text-body-muted uppercase select-none dark:text-body-muted/80">
         <div>{titleText}</div>
         {dismissable && (
-          <div
+          <button
+            type="button"
             className="ml-auto cursor-pointer hover:text-foreground"
             onClick={onDismiss}
-            title="Close"
+            aria-label="Dismiss"
           >
             <Icon name="x" className="h-3.5 w-3.5" />
-          </div>
+          </button>
         )}
       </div>
       <div className="flex flex-row items-center gap-1 px-4 py-3.5">

src/components/Tabs/index.tsx

@@ -48,11 +48,11 @@ export function Tabs<I extends string>({
   className,
 }: TabsProps<I>) {
   const [activeTab, setActiveTab] = useState<I>(
-    selectedTab || children[0].props.id,
+    selectedTab ?? children[0].props.id,
   );
 
   useEffect(() => {
-    setActiveTab(selectedTab || children[0].props.id);
+    setActiveTab(selectedTab ?? children[0].props.id);
   }, [selectedTab]);
 
   const validChildren = React.Children.toArray(children).filter(

src/components/UserAvatar/index.tsx

@@ -29,7 +29,7 @@ function getFallbackColor(name: string | undefined) {
   const firstLetter = name[0].toLowerCase();
 
   const index = firstLetter.charCodeAt(0) - "a".charCodeAt(0);
-  return fallbackColors[index % fallbackColors.length];
+  return fallbackColors[Math.abs(index) % fallbackColors.length];
 }
 
 export function UserAvatar({