Add TOTP field support and restructured ItemFieldValues components

packages/web/src/components/ItemFieldValue/OTP.tsx

@@ -0,0 +1,64 @@
+import styled from "@emotion/styled"
+import type { ItemSection } from "opvault.js"
+import { useCallback, useState } from "react"
+import { useTranslate } from "../../i18n"
+import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
+import { Container } from "./Container"
+import { useCopy } from "./hooks"
+
+const OTPItemContainer = styled(Container)`
+  margin: 5px 0;
+`
+
+const OTPItem = ({ children }: { children: string }) => {
+  const { onRightClick } = useItemFieldContextMenu()
+  const onCopy = useCopy(children)
+
+  return (
+    <OTPItemContainer onContextMenu={onRightClick} onClick={onCopy} style={{}}>
+      {children}
+    </OTPItemContainer>
+  )
+}
+
+const ItemCount = styled(Container)`
+  opacity: 0.5;
+  user-select: none;
+`
+
+export const OTP: React.FC<{
+  field: Pick<ItemSection.Concealed, "v">
+}> = ({ field }) => {
+  const t = useTranslate()
+  const [show, setShow] = useState(false)
+
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onToggle = useCallback(() => setShow(x => !x), [])
+  const fields = field.v.split(" ")
+
+  return (
+    <>
+      {show ? (
+        <div
+          onContextMenu={onRightClick}
+          onDoubleClick={() => setShow(x => !x)}
+          style={{
+            fontFamily: "var(--monospace)",
+            paddingTop: 5,
+          }}
+        >
+          {fields.map((item, i) => (
+            <OTPItem key={i}>{item}</OTPItem>
+          ))}
+        </div>
+      ) : (
+        <ItemCount onContextMenu={onRightClick} onClick={onToggle}>
+          {fields.length} {fields.length === 1 ? t.noun.item : t.noun.items}
+        </ItemCount>
+      )}
+      <ContextMenuContainer>
+        <Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
+      </ContextMenuContainer>
+    </>
+  )
+}