feat: wordlists user interface

2025-08-14 14:38:46 -06:00
parent 8481a897dc
commit b4e802fdec
25 changed files with 744 additions and 8 deletions
--- a/src/components/wordList/EditWordList.tsx
+++ b/src/components/wordList/EditWordList.tsx
@@ -0,0 +1,114 @@
+import { type FC, useRef, useState } from 'react'
+import Button from '@/components/ui/Button'
+import Dialog from '@/components/ui/Dialog'
+import { useStore } from '@/store'
+import '@/components/wordList/editWordlList.css'
+import Input from '../ui/Input'
+import Textarea from '../ui/Textarea'
+
+export interface RenameWordListProps {
+  currentWordList: string
+}
+
+const EditWordList: FC<RenameWordListProps> = ({ currentWordList }) => {
+  const [internalStatus, setInternalStatus] = useState<string | undefined>()
+  const [newName, setNewName] = useState<string | undefined>(undefined)
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  return (
+    <>
+      <Button
+        type="button"
+        icon
+        disabled={currentWordList === ''}
+        onClick={() => {
+          if (dialogRef.current === null || currentWordList === '') {
+            return
+          }
+          const wordList = useStore.getState().wordLists[currentWordList]
+          if (wordList === undefined) {
+            return
+          }
+          setNewName(currentWordList)
+          setInternalStatus(wordList.join('\n'))
+          dialogRef.current.showModal()
+        }}
+      >
+        <i className="fa fa-fw fa-pencil"></i>
+      </Button>
+      <Dialog id="st-rnd-wordlist-edit-dialog" ref={dialogRef}>
+        <div>
+          <h2 id="st-rnd-wordlist-edit-dialog-title">
+            Edit Word List: <span>{currentWordList}</span>
+          </h2>
+          <label htmlFor="st-rnd-wordlist-name">Name</label>
+          <p className="st-rnd-small-text">
+            Name of the word list, used in placeholder and macros.
+          </p>
+          <Input
+            id="st-rnd-wordlist-name"
+            type="text"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+          />
+          <label htmlFor="st-rnd-wordlist-words">Words</label>
+          <p className="st-rnd-small-text">
+            Words separated by newlines, words can be more than one word!
+          </p>
+          <Textarea
+            id="st-rnd-wordlist-words"
+            value={internalStatus}
+            onChange={(e) => setInternalStatus(e.target.value)}
+            rows={10}
+          />
+          <div id="st-rnd-wordlist-actions">
+            <Button
+              type="button"
+              neutral
+              onClick={() => {
+                if (dialogRef.current === null) {
+                  return
+                }
+                dialogRef.current.close()
+                setInternalStatus(undefined)
+                setNewName(undefined)
+              }}
+            >
+              Close
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                if (
+                  currentWordList === '' ||
+                  newName === undefined ||
+                  internalStatus === undefined ||
+                  dialogRef.current === null
+                ) {
+                  return
+                }
+                if (newName === '') {
+                  alert('Name cannot be empty')
+                  return
+                }
+                const addWordList = useStore.getState().addWordList
+                if (currentWordList !== newName) {
+                  const removeWordList = useStore.getState().removeWordList
+                  removeWordList(currentWordList)
+                }
+                addWordList(newName, internalStatus.split('\n'))
+                dialogRef.current.close()
+                setInternalStatus(undefined)
+                setNewName(undefined)
+              }}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    </>
+  )
+}
+
+export default EditWordList