From 9aae9e33bdf3df0eba7d30663719a7566aa13fba Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Tue, 31 Mar 2026 09:55:09 +0200
Subject: [PATCH] =?UTF-8?q?feat(07-02):=20add=20tooltipText=20to=20registr?=
 =?UTF-8?q?y=20fields=20+=20render=20=E2=93=98=20in=20FieldRenderer=20and?=
 =?UTF-8?q?=20PasswordField?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Populate tooltipText for azureblob.sas_url, azureblob.key, and onedrive.token in registry
- Add tooltipText prop and showTooltip state to PasswordField with toggle button + panel
- Add showTooltip state to FieldRenderer; pass tooltipText to PasswordField for password branch
- Add ⓘ button + panel for text/select branches in FieldRenderer
- Use sr-only span for accessible name to avoid getByLabelText collision
---
 src/components/ui/FieldRenderer.tsx | 54 ++++++++++++++++++++++++-----
 src/components/ui/PasswordField.tsx | 27 ++++++++++++---
 src/schemas/registry.ts             |  3 ++
 3 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/FieldRenderer.tsx b/src/components/ui/FieldRenderer.tsx
index f86ef55..ab0513d 100644
--- a/src/components/ui/FieldRenderer.tsx
+++ b/src/components/ui/FieldRenderer.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { UseFormRegister, FieldError } from 'react-hook-form';
 import type { FieldDef } from '../../schemas/registry';
 import { PasswordField } from './PasswordField';
@@ -9,6 +10,8 @@ interface FieldRendererProps {
 }
 
 export function FieldRenderer({ field, register, error }: FieldRendererProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
   // provider field: single-option select — hide from UI, auto-register with default value
   if (field.key === 'provider' && field.options?.length === 1) {
     return (
@@ -29,6 +32,7 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
         registration={register(field.key)}
         placeholder={field.placeholder}
         helpText={field.helpText}
+        tooltipText={field.tooltipText}
       />
     );
   }
@@ -36,10 +40,27 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
   if (field.inputType === 'select' && field.options) {
     return (
       <div className="flex flex-col gap-1">
-        <label htmlFor={field.key} className="text-sm font-medium text-gray-700">
-          {field.label}
-          {field.required && <span className="ml-1 text-red-500">*</span>}
-        </label>
+        <div className="flex items-center gap-1">
+          <label htmlFor={field.key} className="text-sm font-medium text-gray-700">
+            {field.label}
+            {field.required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+          {field.tooltipText && (
+            <button
+              type="button"
+              onClick={() => setShowTooltip(v => !v)}
+              aria-label={`More info about ${field.label}`}
+              className="text-blue-500 hover:text-blue-700 text-xs leading-none"
+            >
+              ⓘ
+            </button>
+          )}
+        </div>
+        {field.tooltipText && showTooltip && (
+          <p className="text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1.5 mt-1">
+            {field.tooltipText}
+          </p>
+        )}
         <select
           id={field.key}
           className={[
@@ -61,10 +82,27 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
   // text (default)
   return (
     <div className="flex flex-col gap-1">
-      <label htmlFor={field.key} className="text-sm font-medium text-gray-700">
-        {field.label}
-        {field.required && <span className="ml-1 text-red-500">*</span>}
-      </label>
+      <div className="flex items-center gap-1">
+        <label htmlFor={field.key} className="text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="ml-1 text-red-500">*</span>}
+        </label>
+        {field.tooltipText && (
+          <button
+            type="button"
+            onClick={() => setShowTooltip(v => !v)}
+            className="text-blue-500 hover:text-blue-700 text-xs leading-none"
+          >
+            <span className="sr-only">More info about {field.label}</span>
+            <span aria-hidden="true">ⓘ</span>
+          </button>
+        )}
+      </div>
+      {field.tooltipText && showTooltip && (
+        <p className="text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1.5 mt-1">
+          {field.tooltipText}
+        </p>
+      )}
       <input
         id={field.key}
         type="text"
diff --git a/src/components/ui/PasswordField.tsx b/src/components/ui/PasswordField.tsx
index 3befc7f..c933786 100644
--- a/src/components/ui/PasswordField.tsx
+++ b/src/components/ui/PasswordField.tsx
@@ -8,15 +8,34 @@ interface PasswordFieldProps {
   registration: UseFormRegisterReturn;
   placeholder?: string;
   helpText?: string;
+  tooltipText?: string;
 }
 
-export function PasswordField({ id, label, error, registration, placeholder, helpText }: PasswordFieldProps) {
+export function PasswordField({ id, label, error, registration, placeholder, helpText, tooltipText }: PasswordFieldProps) {
   const [show, setShow] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
   return (
     <div className="flex flex-col gap-1">
-      <label htmlFor={id} className="text-sm font-medium text-gray-700">
-        {label}
-      </label>
+      <div className="flex items-center gap-1">
+        <label htmlFor={id} className="text-sm font-medium text-gray-700">
+          {label}
+        </label>
+        {tooltipText && (
+          <button
+            type="button"
+            onClick={() => setShowTooltip(v => !v)}
+            className="text-blue-500 hover:text-blue-700 text-xs leading-none"
+          >
+            <span className="sr-only">More info about {label}</span>
+            <span aria-hidden="true">ⓘ</span>
+          </button>
+        )}
+      </div>
+      {tooltipText && showTooltip && (
+        <p className="text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1.5 mt-1">
+          {tooltipText}
+        </p>
+      )}
       <div className="relative">
         <input
           id={id}
diff --git a/src/schemas/registry.ts b/src/schemas/registry.ts
index a7d749a..019e624 100644
--- a/src/schemas/registry.ts
+++ b/src/schemas/registry.ts
@@ -41,6 +41,7 @@ export const BACKEND_REGISTRY = {
         inputType: 'password',
         required: false,
         helpText: 'Base64-encoded storage account key. Provide either this or a SAS URL, not both.',
+        tooltipText: 'The full storage account key grants unrestricted read/write access to all containers in the account. Keep this secret. If you only need limited access, use a SAS URL instead.',
       },
       {
         key: 'sas_url',
@@ -49,6 +50,7 @@ export const BACKEND_REGISTRY = {
         required: false,
         placeholder: 'https://mystorageaccount.blob.core.windows.net/?sv=...',
         helpText: 'Full SAS URL including account and container. Provide either this or an access key, not both.',
+        tooltipText: 'A SAS URL (Shared Access Signature) bundles the storage endpoint with a time-limited, scope-limited token. It grants access only to containers you specify and expires automatically. Use this if you want limited-access credentials. If you have the full account key, switch to Access Key.',
       },
     ],
   },
@@ -142,6 +144,7 @@ export const BACKEND_REGISTRY = {
         required: true,
         placeholder: '{"access_token":"...","token_type":"Bearer","refresh_token":"...","expiry":"..."}',
         helpText: 'Paste the JSON token from: rclone authorize "onedrive"',
+        tooltipText: 'This is the JSON token obtained by running `rclone authorize "onedrive"` on a machine with a browser. The command opens a browser window, you authenticate, and rclone prints a JSON token — paste that entire JSON blob here.',
       },
       {
         key: 'drive_id',