Implement big text view and preliminary i18n

packages/web/src/components/ItemFieldValue.tsx

@@ -3,6 +3,7 @@ import type { ItemSection, ItemField } from "opvault.js"
 import { FieldType } from "opvault.js"
 import { useCallback, useMemo, useState } from "react"
 import { parseMonthYear } from "../utils"
+import { BigTextView } from "./BigTextView"
 import { ErrorBoundary } from "./ErrorBoundary"
 import { useItemFieldContextMenu } from "./ItemFieldContextMenu"
 
@@ -12,11 +13,19 @@ const Password: React.FC<{
   field: ItemSection.Concealed
 }> = ({ field }) => {
   const [show, setShow] = useState(false)
+  const [bigText, showBigText] = useState(false)
+
   const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
   const onToggle = useCallback(() => setShow(x => !x), [])
   const onCopy = useCallback(() => {
     navigator.clipboard.writeText(field.v)
   }, [field.v])
+  const onOpenBigText = useCallback(() => {
+    showBigText(true)
+  }, [])
+  const onCloseBigText = useCallback(() => {
+    showBigText(false)
+  }, [])
 
   return (
     <>
@@ -30,9 +39,11 @@ const Password: React.FC<{
       >
         {show ? field.v : "·".repeat(10)}
       </Container>
+      {bigText && <BigTextView onClose={onCloseBigText}>{field.v}</BigTextView>}
       <ContextMenuContainer>
         <Item onClick={onCopy}>Copier</Item>
         <Item onClick={onToggle}>{show ? "Cacher" : "Afficher"}</Item>
+        {!bigText && <Item onClick={onOpenBigText}>Afficher en gros caractères</Item>}
       </ContextMenuContainer>
     </>
   )
@@ -52,6 +63,22 @@ const DateView: React.FC<{ field: ItemSection.Date }> = ({ field }) => {
   return <Container>{date.toLocaleDateString()}</Container>
 }
 
+const TextView: React.FC<{ value: string }> = ({ value }) => {
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value)
+  }, [value])
+
+  return (
+    <>
+      <Container onContextMenu={onRightClick}>{value}</Container>
+      <ContextMenuContainer>
+        <Item onClick={onCopy}>Copier</Item>
+      </ContextMenuContainer>
+    </>
+  )
+}
+
 export const ItemFieldValue: React.FC<{
   field: ItemSection.Any
 }> = ({ field }) => {
@@ -80,7 +107,7 @@ export const ItemFieldValue: React.FC<{
 
   return (
     <ErrorBoundary>
-      <Container>{field.v}</Container>
+      <TextView value={field.v} />
     </ErrorBoundary>
   )
 }