src/App.scss

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

src/App.tsx

@@ -103,19 +103,6 @@ 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);
@@ -130,17 +117,33 @@ const App = (_props) => {
         window.sessionStorage.setItem("conlang", conlang);
     };
 
-    const handleSearch = (direction: SearchDirection) => {
+    const searchConlang = (_evt) => {
-        const searchTerm = convertSearchBoxShorthand(searchBoxInput, conlang);
+        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;
         if (searchTerm === "") {
             setSearchResults(null);
             setSearchTerm(null);
             setDirection(null);
         } else {
-            searchEntry(searchTerm, conlang, direction, (json) => {
+            searchEntry(searchTerm, conlang, SearchDirection.ToConlang, (json) => {
                 setSearchResults(json);
                 setSearchTerm(searchTerm);
-                setDirection(direction);
+                setDirection(SearchDirection.ToConlang);
             });
         }
     };
@@ -178,8 +181,8 @@ const App = (_props) => {
                     </div>
                     <br/>
                     { langSelectDropdown }
-                    <button onClick={ () => handleSearch(SearchDirection.ToEnglish) } className="searchButton">{renderConlang(conlang)}</button>
+                    <button onClick={ searchConlang } className="searchButton">{renderConlang(conlang)}</button>
-                    <button onClick={ () => handleSearch(SearchDirection.ToConlang) } className="searchButton">English</button>
+                    <button onClick={ searchEng } className="searchButton">English</button>
                     <button onClick={ showPasswordBox } className="searchButton">Password</button>
                 </div>
                 <Results

src/Entries.tsx

@@ -54,11 +54,16 @@ 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>
@@ -72,45 +77,38 @@ 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 className="additionalNotes">
+        <div>
-            <span style={barStyle}>
+            <span className="synclass">
-                <span className="synCategory">
                 <i>{ entry.syn_category }</i>
-                </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 }
+                { isNominal ? formatMorphology(entry) : null }
+            </span>
         </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;