feat(admin): enhance operations guidance and session handling

src/components/admin/admin-field-label.tsx

@@ -10,6 +10,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 
 type AdminFieldLabelProps = {
   htmlFor: string;
@@ -19,6 +20,64 @@ type AdminFieldLabelProps = {
   className?: string;
 };
 
+type AdminHelpIconProps = {
+  helpText: string;
+  helpAriaLabel: string;
+  helpId: string;
+};
+
+type AdminHelpTextProps = AdminHelpIconProps & {
+  children: ReactNode;
+  className?: string;
+};
+
+export function AdminHelpIcon({
+  helpText,
+  helpAriaLabel,
+  helpId,
+}: AdminHelpIconProps): React.ReactElement {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            className="text-muted-foreground"
+            aria-label={helpAriaLabel}
+            data-field-help={helpId}
+          />
+        }
+      >
+        <CircleHelp aria-hidden="true" />
+      </TooltipTrigger>
+      <TooltipContent
+        side="top"
+        align="start"
+        className="max-w-80 whitespace-normal text-left leading-relaxed"
+      >
+        <p>{helpText}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function AdminHelpText({
+  children,
+  helpText,
+  helpAriaLabel,
+  helpId,
+  className,
+}: AdminHelpTextProps): React.ReactElement {
+  return (
+    <span className={cn("inline-flex items-center gap-1", className)}>
+      <span>{children}</span>
+      <AdminHelpIcon helpText={helpText} helpAriaLabel={helpAriaLabel} helpId={helpId} />
+    </span>
+  );
+}
+
 export function AdminFieldLabel({
   htmlFor,
   children,
@@ -39,29 +98,11 @@ export function AdminFieldLabel({
       <Label htmlFor={htmlFor} className={className}>
         {children}
       </Label>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-xs"
-              className="text-muted-foreground"
-              aria-label={helpAriaLabel}
-              data-field-help={htmlFor}
-            />
-          }
-        >
-          <CircleHelp aria-hidden="true" />
-        </TooltipTrigger>
-        <TooltipContent
-          side="top"
-          align="start"
-          className="max-w-80 whitespace-normal text-left leading-relaxed"
-        >
-          <p>{helpText}</p>
-        </TooltipContent>
-      </Tooltip>
+      <AdminHelpIcon
+        helpText={helpText}
+        helpAriaLabel={helpAriaLabel ?? String(children)}
+        helpId={htmlFor}
+      />
     </div>
   );
 }