[WIP] Encryption for secure values (#183)

src-web/components/SelectFile.tsx

@@ -1,9 +1,12 @@
 import { open } from '@tauri-apps/plugin-dialog';
 import classNames from 'classnames';
 import mime from 'mime';
+import type { ReactNode } from 'react';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import { IconButton } from './core/IconButton';
+import { IconTooltip } from './core/IconTooltip';
+import { Label } from './core/Label';
 import { HStack } from './core/Stacks';
 
 type Props = Omit<ButtonProps, 'type'> & {
@@ -12,6 +15,8 @@ type Props = Omit<ButtonProps, 'type'> & {
   directory?: boolean;
   inline?: boolean;
   noun?: string;
+  help?: ReactNode;
+  label?: ReactNode;
 };
 
 // Special character to insert ltr text in rtl element
@@ -25,6 +30,8 @@ export function SelectFile({
   directory,
   noun,
   size = 'sm',
+  label,
+  help,
   ...props
 }: Props) {
   const handleClick = async () => {
@@ -46,41 +53,55 @@ export function SelectFile({
   const selectOrChange = (filePath ? 'Change ' : 'Select ') + itemLabel;
 
   return (
-    <HStack className="group relative justify-stretch overflow-hidden">
-      <Button
-        className={classNames(className, 'font-mono text-xs rtl mr-1.5', inline && 'w-full')}
-        color="secondary"
-        onClick={handleClick}
-        size={size}
-        {...props}
-      >
-        {rtlEscapeChar}
-        {inline ? filePath || selectOrChange : selectOrChange}
-      </Button>
-
-      {!inline && (
-        <>
-          {filePath && (
-            <IconButton
-              size={size}
-              variant="border"
-              icon="x"
-              title={'Unset ' + itemLabel}
-              onClick={handleClear}
-            />
-          )}
-          <div
-            className={classNames(
-              'font-mono truncate rtl pl-1.5 pr-3 text-text',
-              size === 'xs' && 'text-xs',
-              size === 'sm' && 'text-sm',
-            )}
-          >
-            {rtlEscapeChar}
-            {filePath ?? `No ${itemLabel.toLowerCase()} selected`}
-          </div>
-        </>
+    <div>
+      {label && (
+        <Label htmlFor={null} help={help}>
+          {label}
+        </Label>
       )}
-    </HStack>
+      <HStack className="relative justify-stretch overflow-hidden">
+        <Button
+          className={classNames(
+            className,
+            'rtl mr-1.5',
+            inline && 'w-full',
+            filePath && inline && 'font-mono text-xs',
+          )}
+          color="secondary"
+          onClick={handleClick}
+          size={size}
+          {...props}
+        >
+          {rtlEscapeChar}
+          {inline ? filePath || selectOrChange : selectOrChange}
+        </Button>
+
+        {!inline && (
+          <>
+            {filePath && (
+              <IconButton
+                size={size}
+                variant="border"
+                icon="x"
+                title={'Unset ' + itemLabel}
+                onClick={handleClear}
+              />
+            )}
+            <div
+              className={classNames(
+                'truncate rtl pl-1.5 pr-3 text-text',
+                filePath && 'font-mono',
+                size === 'xs' && filePath && 'text-xs',
+                size === 'sm' && filePath && 'text-sm',
+              )}
+            >
+              {rtlEscapeChar}
+              {filePath ?? `No ${itemLabel.toLowerCase()} selected`}
+            </div>
+            {filePath == null && help && !label && <IconTooltip content={help} />}
+          </>
+        )}
+      </HStack>
+    </div>
   );
 }