[DataEntryTable] Redesign UX for narrow window

src/components/DataEntry/DataEntryTable/RecentEntryCold.tsx

@@ -0,0 +1,74 @@
+import { Edit } from "@mui/icons-material";
+import { Grid2 } from "@mui/material";
+import { ReactElement, memo } from "react";
+
+import { Word, WritingSystem } from "api/models";
+import { NoteButton } from "components/Buttons";
+import { AudioSummary } from "components/WordCard";
+import theme from "types/theme";
+import { TypographyWithFont } from "utilities/fontComponents";
+import { firstGlossText } from "utilities/wordUtilities";
+
+const idAffix = "recent-entry";
+
+export interface RecentEntryColdProps {
+  analysisLang: WritingSystem;
+  entry: Word;
+  rowIndex: number;
+  senseGuid: string;
+}
+
+/** Displays a recently entered word that a user cannot edit. */
+export function RecentEntryCold(props: RecentEntryColdProps): ReactElement {
+  const sense = props.entry.senses.find((s) => s.guid === props.senseGuid);
+  const gloss = sense ? firstGlossText(sense, props.analysisLang.bcp47) : "";
+
+  return (
+    <Grid2 alignItems="center" container id={`${idAffix}-${props.rowIndex}`}>
+      <Grid2
+        size={4}
+        style={{ paddingInline: theme.spacing(2), position: "relative" }}
+      >
+        <TypographyWithFont vernacular>
+          {props.entry.vernacular}
+        </TypographyWithFont>
+      </Grid2>
+
+      <Grid2
+        size={4}
+        style={{ paddingInline: theme.spacing(2), position: "relative" }}
+      >
+        <TypographyWithFont analysis lang={props.analysisLang.bcp47}>
+          {gloss}
+        </TypographyWithFont>
+      </Grid2>
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        {props.entry.note.text ? (
+          <NoteButton disabled noteText={props.entry.note.text} />
+        ) : null}
+      </Grid2>
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <AudioSummary count={props.entry.audio.length} />
+      </Grid2>
+
+      <Grid2 size={1} />
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <Edit />
+      </Grid2>
+    </Grid2>
+  );
+}
+
+export default memo(RecentEntryCold);

src/components/DataEntry/DataEntryTable/RecentEntryHot.tsx

@@ -0,0 +1,182 @@
+import { Check } from "@mui/icons-material";
+import { Grid2, IconButton } from "@mui/material";
+import { ReactElement, memo, useState } from "react";
+
+import { Pronunciation, Word, WritingSystem } from "api/models";
+import { NoteButton } from "components/Buttons";
+import {
+  DeleteEntry,
+  GlossWithSuggestions,
+  VernWithSuggestions,
+} from "components/DataEntry/DataEntryTable/EntryCellComponents";
+import PronunciationsBackend from "components/Pronunciations/PronunciationsBackend";
+import theme from "types/theme";
+import { FileWithSpeakerId, newGloss } from "types/word";
+import { firstGlossText } from "utilities/wordUtilities";
+
+const idAffix = "recent-entry";
+
+export interface RecentEntryHotProps {
+  rowIndex: number;
+  entry: Word;
+  senseGuid: string;
+  updateGloss: (index: number, gloss: string) => void;
+  updateNote: (index: number, newText: string) => Promise<void>;
+  updateVern: (index: number, newVern: string, targetWordId?: string) => void;
+  removeEntry: (index: number) => void;
+  addAudioToWord: (wordId: string, file: FileWithSpeakerId) => void;
+  delAudioFromWord: (wordId: string, fileName: string) => void;
+  repAudioInWord: (wordId: string, audio: Pronunciation) => void;
+  focusNewEntry: () => void;
+  analysisLang: WritingSystem;
+  vernacularLang: WritingSystem;
+  disabled?: boolean;
+  close: () => void;
+}
+
+/**
+ * Displays a recently entered word that a user can still edit
+ */
+export function RecentEntryHot(props: RecentEntryHotProps): ReactElement {
+  const sense = props.entry.senses.find((s) => s.guid === props.senseGuid)!;
+  if (sense.glosses.length < 1) {
+    sense.glosses.push(newGloss("", props.analysisLang.bcp47));
+  }
+  const [editing, setEditing] = useState(false);
+  const [gloss, setGloss] = useState(
+    firstGlossText(sense, props.analysisLang.bcp47)
+  );
+  const [vernacular, setVernacular] = useState(props.entry.vernacular);
+
+  const updateGlossField = (gloss: string): void => {
+    setEditing(gloss !== firstGlossText(sense, props.analysisLang.bcp47));
+    setGloss(gloss);
+  };
+  const updateVernField = (vern: string): void => {
+    setEditing(vern !== props.entry.vernacular);
+    setVernacular(vern);
+  };
+
+  function conditionallyUpdateGloss(): void {
+    if (firstGlossText(sense, props.analysisLang.bcp47) !== gloss) {
+      props.updateGloss(props.rowIndex, gloss);
+      props.close();
+    }
+  }
+
+  function conditionallyUpdateVern(): void {
+    if (vernacular.trim()) {
+      if (props.entry.vernacular !== vernacular) {
+        props.updateVern(props.rowIndex, vernacular);
+        props.close();
+      }
+    } else {
+      setVernacular(props.entry.vernacular);
+    }
+  }
+
+  const handleRemoveEntry = (): void => props.removeEntry(props.rowIndex);
+  const handleUpdateNote = async (noteText: string): Promise<void> => {
+    await props.updateNote(props.rowIndex, noteText);
+    props.close();
+  };
+
+  return (
+    <Grid2
+      alignItems="center"
+      container
+      id={`${idAffix}-${props.rowIndex}`}
+      rowSpacing={1}
+    >
+      <Grid2
+        size={11}
+        style={{ paddingInline: theme.spacing(2), position: "relative" }}
+      >
+        <VernWithSuggestions
+          vernacular={vernacular}
+          isNew
+          isDisabled={props.disabled || props.entry.senses.length > 1}
+          updateVernField={updateVernField}
+          onBlur={() => conditionallyUpdateVern()}
+          handleEnter={() => {
+            vernacular && props.focusNewEntry();
+          }}
+          vernacularLang={props.vernacularLang}
+          textFieldId={`${idAffix}-${props.rowIndex}-vernacular`}
+        />
+      </Grid2>
+
+      <Grid2 size={1}>
+        <IconButton onClick={props.close}>
+          <Check sx={{ color: (t) => t.palette.success.main }} />
+        </IconButton>
+      </Grid2>
+
+      <Grid2
+        size={11}
+        style={{ paddingInline: theme.spacing(2), position: "relative" }}
+      >
+        <GlossWithSuggestions
+          gloss={gloss}
+          isDisabled={props.disabled}
+          isNew
+          updateGlossField={updateGlossField}
+          onBlur={() => conditionallyUpdateGloss()}
+          handleEnter={() => {
+            gloss && props.focusNewEntry();
+          }}
+          analysisLang={props.analysisLang}
+          textFieldId={`${idAffix}-${props.rowIndex}-gloss`}
+        />
+      </Grid2>
+
+      <Grid2 size={1} />
+
+      <Grid2
+        size={2}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <NoteButton
+          disabled={editing || props.disabled}
+          noteText={props.entry.note.text}
+          updateNote={handleUpdateNote}
+          buttonId={`${idAffix}-${props.rowIndex}-note`}
+        />
+      </Grid2>
+
+      <Grid2
+        size={8}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <PronunciationsBackend
+          audio={props.entry.audio}
+          disabled={editing || props.disabled}
+          wordId={props.entry.id}
+          deleteAudio={(fileName) => {
+            props.delAudioFromWord(props.entry.id, fileName);
+          }}
+          replaceAudio={(audio) => props.repAudioInWord(props.entry.id, audio)}
+          uploadAudio={(file) => {
+            props.addAudioToWord(props.entry.id, file);
+          }}
+        />
+      </Grid2>
+
+      <Grid2 size={1} />
+
+      <Grid2
+        size={1}
+        style={{ paddingInline: theme.spacing(1), position: "relative" }}
+      >
+        <DeleteEntry
+          removeEntry={handleRemoveEntry}
+          buttonId={`${idAffix}-${props.rowIndex}-delete`}
+          confirmId={"addWords.deleteRowWarning"}
+          disabled={editing || props.disabled}
+        />
+      </Grid2>
+    </Grid2>
+  );
+}
+
+export default memo(RecentEntryHot);