Redesigning Saimiar anciliary information

src/App.scss

@@ -41,10 +41,19 @@ input {
     padding-bottom: 1em;
 }
 
-.synclass {
+.additionalNotes {
+    color: #a63333;
+}
+
+.semField {
+    font-variant: small-caps;
+    color: #6a3131;
+}
+
+.saimiarNounMorpho {
     color: #a63333;
     i {
-        margin-right: 10px;
+        color: #6a3131;
 
     }
 }

src/App.tsx

@@ -103,6 +103,19 @@ const Results = (props: ResultsProps) => {
     );
 };
 
+const convertSearchBoxShorthand = (input: string, conlang: Conlang): string => {
+    if (conlang === Conlang.Saimiar) {
+        return input
+            .replaceAll(/ee/g, "ê")
+            .replaceAll(/oo/g, "ô")
+            .replaceAll(/o'/g, "ø")
+            .replaceAll(/c'/g, "ç")
+            .replaceAll(/n'/g, "ŋ");
+    }
+
+    return input;
+};
+
 const App = (_props) => {
     const defaultConlang = window.sessionStorage.getItem("conlang") as Conlang || Conlang.Saimiar;
     const [searchResults, setSearchResults] = useState(null);
@@ -117,33 +130,17 @@ const App = (_props) => {
         window.sessionStorage.setItem("conlang", conlang);
     };
 
-    const searchConlang = (_evt) => {
-        const searchTerm = searchBoxInput;
-        if (searchTerm === "") {
-            setSearchResults(null);
-            setSearchTerm(null);
-            setDirection(null);
-            return;
-        }
-
-        searchEntry(searchTerm, conlang, SearchDirection.ToEnglish, (json) => {
-            setSearchResults(json);
-            setSearchTerm(searchTerm);
-            setDirection(SearchDirection.ToEnglish);
-        });
-    };
-
-    const searchEng = (_evt) => {
-        const searchTerm = searchBoxInput;
+    const handleSearch = (direction: SearchDirection) => {
+        const searchTerm = convertSearchBoxShorthand(searchBoxInput, conlang);
         if (searchTerm === "") {
             setSearchResults(null);
             setSearchTerm(null);
             setDirection(null);
         } else {
-            searchEntry(searchTerm, conlang, SearchDirection.ToConlang, (json) => {
+            searchEntry(searchTerm, conlang, direction, (json) => {
                 setSearchResults(json);
                 setSearchTerm(searchTerm);
-                setDirection(SearchDirection.ToConlang);
+                setDirection(direction);
             });
         }
     };
@@ -181,8 +178,8 @@ const App = (_props) => {
                     </div>
                     <br/>
                     { langSelectDropdown }
-                    <button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
-                    <button onClick={ searchEng } className="searchButton">English</button>
+                    <button onClick={ () => handleSearch(SearchDirection.ToEnglish) } className="searchButton">{renderConlang(conlang)}</button>
+                    <button onClick={ () => handleSearch(SearchDirection.ToConlang) } className="searchButton">English</button>
                     <button onClick={ showPasswordBox } className="searchButton">Password</button>
                 </div>
                 <Results

src/Entries.tsx

@@ -54,16 +54,11 @@ const EntryBase = (props: BaseProps) => {
             : <a href="" onClick={edit}>Edit</a>);
     };
 
-    const expand = (evt) => {
-        evt.preventDefault();
-    };
-
     return (
         <div className="searchResult" key={ props.id }>
             <div style={mainEntryStyle}>
                 <span><b>{ props.conlangEntry }</b> { engTranslation }</span>
                 <span style={controlStyle}>
-                    <a href="" onClick={expand}>Expand</a>
                     <EditControls onSave={save} />
                 </span>
             </div>
@@ -77,38 +72,45 @@ const SaiEntry = (props: {entry: SaiEntryProps}) => {
 
     const synCategory = entry.syn_category;
     const isNominal = synCategory === "nominal";
+    const barStyle = {
+        display: "inline-flex",
+        gap: "1em",
+    };
+
+    let morphology = null;
+    if (isNominal) {
+        const decl = declineSaimiar(entry);
+        if (decl) {
+            morphology = (<span className="saimiarNounMorpho">
+        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>, Adp: <i>{decl.adp}</i>,
+        All: <i>{decl.all}</i>, Loc: <i>{decl.loc}</i>, Ell: <i>{decl.ell}</i>,
+        Inst: <i>{decl.inst}</i>, Rel: <i>{decl.rel}</i>
+            </span>);
+        }
+    }
 
     const langSpecific = (
-        <div>
-            <span className="synclass">
+        <div className="additionalNotes">
+            <span style={barStyle}>
+                <span className="synCategory">
                     <i>{ entry.syn_category }</i>
-                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
-                <br/>
-                { isNominal ? formatMorphology(entry) : null }
                 </span>
+                <span className="morphType">
+                    { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+                </span>
+                { entry.etym ? <span className="etym">etym.: <i>{entry.etym}</i></span>
+                    : null
+                }
+                { entry.semantic_field ? <span className="semField">{entry.semantic_field}</span> : null }
+            </span>
+            <br/>
+            { morphology }
         </div>
     );
 
     return <EntryBase id={entry.id} conlang={Conlang.Saimiar} conlangEntry={entry.sai} english={entry.eng} langSpecific={langSpecific} />;
 };
 
-function formatMorphology(entry) {
-    const decl = declineSaimiar(entry);
-    if (!decl) {
-        return "";
-    }
-
-    return (<span style={ {fontSize: "medium", color: "#6a3131"} } >
-        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
-        Adp: <i>{decl.adp}</i>,
-        All: <i>{decl.all}</i>,
-        Loc: <i>{decl.loc}</i>,
-        Ell: <i>{decl.ell}</i>,
-        Inst: <i>{decl.inst}</i>,
-        Rel: <i>{decl.rel}</i>
-    </span>);
-}
-
 const JutEntry = (props: {entry: JutEntryProps}) => {
     const {entry} = props;