Dictionary mode

build.ts

@@ -1,6 +1,7 @@
 import * as packageJson from './package.json';
 import * as path from 'path';
 import { promises as fs } from 'fs';
+import { execSync } from 'child_process';
 
 import * as esbuild from 'esbuild';
 import axios, { AxiosResponse } from 'axios';
@@ -200,6 +201,8 @@ const Plugin = {
   },
 };
 
+execSync('ts-node scripts/gen-lang-registry.ts', { stdio: 'inherit' });
+
 // TODO: Switch `yarn serve` to use `esbuild.serve` which prevents stale
 // responses and minimizes FS writes.
 void esbuild.build({

config.ts

@@ -3,14 +3,15 @@ import { Config, Mode } from './src/types';
 export default {
   defaultLocale: 'eng',
   htmlUrl: 'https://beta.apertium.org/',
-  apyURL: 'https://beta.apertium.org/apy',
+  //apyURL: 'https://beta.apertium.org/apy',
+  apyURL: 'http://localhost:2737',
 
-  defaultMode: Mode.Translation,
-  enabledModes: new Set([Mode.Translation, Mode.Analysis, Mode.Generation, Mode.Sandbox]),
+  defaultMode: Mode.Dictionary,
+  enabledModes: new Set([Mode.Translation, Mode.Dictionary]),
   translationChaining: true,
 
-  subtitle: 'Beta',
-  subtitleColor: 'rgb(220, 41, 38)',
+  subtitle: 'Urum',
+  subtitleColor: 'rgb(38, 214, 220)',
 
   stringReplacements: {
     '{{maintainer}}': "<a href='https://wiki.apertium.org/wiki/Apertium' target='_blank' rel='noopener'>Apertium</a>",

scripts/gen-lang-registry.ts

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import path from 'path';
+
+const LANGS_DIR = path.resolve(__dirname, '../src/components/dictionary/langs');
+const INDEX_FILE = path.resolve(__dirname, '../src/components/dictionary/index.ts');
+
+async function generateRegistry() {
+  const files = fs.readdirSync(LANGS_DIR).filter((f) => f.endsWith('.ts'));
+
+  const imports = files
+    .map((file) => {
+      const name = path.basename(file, '.ts');
+      return `import { ${name}Plugin } from './langs/${name}';`;
+    })
+    .join('\n');
+
+  const registry = files
+    .map((file) => {
+      const name = path.basename(file, '.ts');
+      return `  ${JSON.stringify(name)}: ${name}Plugin,`;
+    })
+    .join('\n');
+
+  const content = `import Dictionary from './Dictionary';\n${imports}\nimport { LanguagePlugin } from './types';\n\nexport const languageRegistry: Record<string, LanguagePlugin> = {\n${registry}\n};\n\nexport default Dictionary;\n`;
+
+  fs.writeFileSync(INDEX_FILE, content);
+}
+
+generateRegistry();

src/App.tsx

@@ -14,6 +14,7 @@
 import { Mode } from './types';
 
 import Analyzer from './components/Analyzer';
+import Dictionary from './components/dictionary';
 import { Path as DocTranslationPath } from './components/translator/DocTranslationForm';
 import Footer from './components/footer';
 import Generator from './components/Generator';
@@ -31,6 +32,7 @@
   [Mode.Analysis]: Analyzer,
   [Mode.Generation]: Generator,
   [Mode.Sandbox]: Sandbox,
+  [Mode.Dictionary]: Dictionary, // dict
 } as Record<Mode, React.ComponentType<unknown>>;
 
 const App = ({ setLocale }: { setLocale: React.Dispatch<React.SetStateAction<string>> }): React.ReactElement => {
@@ -93,7 +95,7 @@
   React.useEffect(() => matomoInstance.trackPageView(), [matomoInstance]);
 
   return (
     <MatomoProvider value={matomoInstance}>
       <StringsContext.Provider value={strings}>
         <WithInstallationAlert>
           <div
@@ -133,14 +135,14 @@
             </Container>
             <div ref={pushRef} style={{ height: '60px' }} />
           </div>
           <Footer pushRef={pushRef} wrapRef={wrapRef} />
         </WithInstallationAlert>
       </StringsContext.Provider>
     </MatomoProvider>
   );
 };
 
 const ConnectedApp: React.VoidFunctionComponent = () => (
   <HashRouter hashType="noslash">
     <WithLocale>{(props) => <App {...props} />}</WithLocale>
   </HashRouter>

src/components/dictionary/CombinedWord.css

@@ -0,0 +1,18 @@
+.roman-numeral {
+  margin-left: 0.5rem;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.pos-tag {
+  margin-left: 0.5rem;
+  color: #6c757d;
+  font-size: 0.875rem;
+}
+
+.entry-divider {
+  border: none;
+  border-top: 1px solid #dee2e6;
+  margin: 1rem 0;
+}

src/components/dictionary/CombinedWord.tsx

@@ -0,0 +1,228 @@
+import React, { useState, useEffect, useContext } from 'react';
+import './Word.css';
+import './CombinedWord.css';
+import Spinner from 'react-bootstrap/Spinner';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Paradigm from './Paradigm';
+import { APyContext } from '../../context';
+import { useLocalization, useLocalizationPOS } from '../../util/localization';
+import { getPosTag } from '../../util/posLocalization';
+import { languageRegistry } from './index';
+
+export interface Entry {
+  head: string;
+  defs: string[];
+  similarTo?: string;
+  extraTags?: string[];
+}
+
+const toRoman = (n: number): string => {
+  const lookup: Record<number, string> = {
+    1: 'I',
+    2: 'II',
+    3: 'III',
+    4: 'IV',
+    5: 'V',
+    6: 'VI',
+    7: 'VII',
+    8: 'VIII',
+    9: 'IX',
+    10: 'X',
+  };
+  return lookup[n] || n.toString();
+};
+
+interface EntryBlockProps {
+  surface: string;
+  entry: Entry;
+  lang: string;
+  index: number;
+  total: number;
+  onDefinitionClick: (def: string) => void;
+  searchWord: string;
+}
+
+const EntryBlock: React.FC<EntryBlockProps> = ({
+  surface,
+  entry,
+  lang,
+  index,
+  total,
+  onDefinitionClick,
+  searchWord,
+}) => {
+  const apyFetch = useContext(APyContext);
+  const { t } = useLocalization();
+  const { locale } = useLocalizationPOS();
+
+  const plugin = languageRegistry[lang] || null;
+  const availableModes = plugin?.getAvailableModes ? plugin.getAvailableModes(locale) : [];
+
+  const rawBlocks = plugin
+    ? plugin.addParadigms({ head: entry.head, mode: availableModes[0] || '', locale, t, apyFetch })
+    : [];
+  const hasParadigms = Array.isArray(rawBlocks) && rawBlocks.length > 0;
+
+  const [expanded, setExpanded] = useState(false);
+  const [loadingParadigm, setLoadingParadigm] = useState(false);
+  const [mode, setMode] = useState<string>(availableModes[0] || '');
+
+  useEffect(() => {
+    if (availableModes.length && !availableModes.includes(mode)) {
+      setMode(availableModes[0]);
+    }
+  }, [availableModes, mode, locale]);
+
+  const tags: string[] = [];
+  let m: RegExpExecArray | null;
+  const re = /<([^>]+)>/g;
+  while ((m = re.exec(entry.head))) tags.push(m[1]);
+  const displayTag = tags.length ? getPosTag(locale, tags.join('.')) : null;
+
+  const showRoman = total > 1;
+  const roman = showRoman ? toRoman(index + 1) : '';
+
+  const cleanSurface = surface;
+  const cleanDefs = entry.defs.map((d) => d.replace(/<[^>]+>/g, ''));
+
+  const cleanedSearch = searchWord.replace(/<[^>]+>/g, '');
+  const nonExact = cleanSurface !== cleanedSearch;
+
+  const extraTagsString = entry.extraTags && entry.extraTags.length ? entry.extraTags.join('') : '';
+  const extraTokens = Array.from(extraTagsString.matchAll(/<([^>]+)>/g)).map((mm) => mm[1]);
+
+  const segmentMorphLabels = (tokens: string[]): string | null => {
+    let i = 0;
+    const labels: string[] = [];
+    while (i < tokens.length) {
+      let foundLabel: string | null = null;
+      let foundLen = 0;
+      for (let j = tokens.length; j > i; j--) {
+        const key = tokens.slice(i, j).join('.');
+        const lbl = getPosTag(locale, key);
+        if (lbl && lbl !== key) {
+          foundLabel = lbl;
+          foundLen = j - i;
+          break;
+        }
+      }
+      if (foundLabel) {
+        labels.push(foundLabel);
+        i += foundLen;
+      } else {
+        i += 1;
+      }
+    }
+    return labels.length ? labels.join(' ') : null;
+  };
+
+  const morphLabel = segmentMorphLabels(extraTokens);
+  const extraDisplay = morphLabel || extraTagsString;
+
+  const handleToggle = () => {
+    if (!expanded) {
+      setExpanded(true);
+      setLoadingParadigm(true);
+    } else {
+      setExpanded(false);
+    }
+  };
+
+  return (
+    <div className="pos-block">
+      <div className="word-header">
+        <span className="word-text">
+          {cleanSurface}
+          {showRoman && <span className="roman-numeral">{roman}</span>}
+          {displayTag && <span className="pos-tag">({displayTag})</span>}
+        </span>
+      </div>
+      <ol className="word-definitions">
+        {cleanDefs.map((rawDef, i) => {
+          const def = rawDef;
+          return (
+            <li key={i} className="definition-item" onClick={() => onDefinitionClick(def)}>
+              {def}
+            </li>
+          );
+        })}
+      </ol>
+      {entry.similarTo && (
+        <div className="extra-tag-info small text-muted mt-1">
+          <small>
+            <em>{t('Similar_To')}</em> {entry.similarTo}
+          </small>
+        </div>
+      )}
+      {nonExact && extraTagsString && (
+        <div className="extra-tag-info small text-muted mt-1">
+          {extraDisplay}: {cleanedSearch}
+        </div>
+      )}
+      {hasParadigms && (
+        <div className="expand-controls mt-1">
+          <button type="button" className="expand-button" onClick={handleToggle} disabled={loadingParadigm}>
+            {loadingParadigm ? (
+              <>
+                <Spinner animation="border" size="sm" className="me-2" />
+                {t('Expand_Paradigms')}
+              </>
+            ) : expanded ? (
+              t('Collapse_Paradigms')
+            ) : (
+              t('Expand_Paradigms')
+            )}
+          </button>
+          {expanded && availableModes.length > 1 && (
+            <Dropdown onSelect={(k) => typeof k === 'string' && setMode(k)}>
+              <Dropdown.Toggle id="mode-dropdown" className="expand-button">
+                {mode}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {availableModes.map((mk) => (
+                  <Dropdown.Item key={mk} eventKey={mk}>
+                    {mk}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
+        </div>
+      )}
+      {hasParadigms && expanded && (
+        <div className="word-paradigm">
+          <Paradigm head={entry.head} lang={lang} mode={mode} onLoaded={() => setLoadingParadigm(false)} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface CombinedWordProps {
+  surface: string;
+  entries: Entry[];
+  lang: string;
+  onDefinitionClick: (def: string) => void;
+  searchWord: string;
+}
+
+const CombinedWord: React.FC<CombinedWordProps> = ({ surface, entries, lang, onDefinitionClick, searchWord }) => (
+  <div className="word-card">
+    {entries.map((e, idx) => (
+      <React.Fragment key={idx}>
+        <EntryBlock
+          surface={surface}
+          entry={e}
+          lang={lang}
+          index={idx}
+          total={entries.length}
+          onDefinitionClick={onDefinitionClick}
+          searchWord={searchWord}
+        />
+        {idx < entries.length - 1 && <div className="entry-divider" />}
+      </React.Fragment>
+    ))}
+  </div>
+);
+
+export default CombinedWord;