Feature/code lookup

src/app/PageRoutes.tsx

@@ -7,6 +7,7 @@ import DocsPage from '@pages/DocsPage';
 import IntroPage from '@pages/IntroPage';
 import LuckySearchPage from '@pages/LuckySearchPage';
 import PrivacyPolicyPage from '@pages/PrivacyPolicyPage';
+import CodeLookupPage from '@pages/code-lookup/CodeLookupPage';
 
 export default function PageRoutes() {
   return (
@@ -23,6 +24,7 @@ export default function PageRoutes() {
         <Route path={LangNavPageName.About} element={<AboutPage />} />
         <Route path={LangNavPageName.PrivacyPolicy} element={<PrivacyPolicyPage />} />
         <Route path={LangNavPageName.DataCoverage} element={<DataCoveragePage />} />
+        <Route path={LangNavPageName.Codes} element={<CodeLookupPage />} />
       </Routes>
     </>
   );
@@ -55,4 +57,5 @@ export enum LangNavPageName {
   About = 'about',
   PrivacyPolicy = 'privacy-policy',
   DataCoverage = 'data-coverage',
+  Codes = 'codes',
 }

src/pages/code-lookup/CodeLookupPage.css

@@ -0,0 +1,73 @@
+.code-lookup-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 2em 1.5em;
+}
+
+.code-lookup-container h2 {
+    margin-top: 0;
+}
+
+.code-lookup-textareas {
+    display: flex;
+    gap: 1em;
+    margin-top: 1em;
+}
+
+@media (max-width: 640px) {
+    .code-lookup-textareas {
+        flex-direction: column;
+    }
+}
+
+.code-lookup-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+
+.code-lookup-column label {
+    font-weight: 600;
+}
+
+.code-lookup-textarea {
+    width: 100%;
+    min-height: 220px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.95em;
+    line-height: 1.6;
+    padding: 0.75em;
+    border: 1px solid var(--color-text-secondary);
+    border-radius: 6px;
+    background-color: var(--color-background);
+    color: var(--color-text);
+    resize: vertical;
+    box-sizing: border-box;
+}
+
+.code-lookup-textarea:focus {
+    outline: 2px solid var(--color-button-primary);
+    border-color: var(--color-button-primary);
+}
+
+.code-lookup-textarea[readonly] {
+    background-color: color-mix(in srgb, var(--color-button-secondary), var(--color-background) 50%);
+}
+
+.code-lookup-actions {
+    display: flex;
+    gap: 0.75em;
+    margin-top: 1em;
+    flex-wrap: wrap;
+}
+
+.code-lookup-status {
+    margin-top: 1em;
+    font-size: 0.9em;
+    color: var(--color-text-secondary);
+}
+
+.code-lookup-status .warning {
+    color: var(--color-text-orange);
+}

src/pages/code-lookup/CodeLookupPage.tsx

@@ -0,0 +1,21 @@
+import React, { Suspense } from 'react';
+
+import Loading from '@widgets/Loading';
+
+const PageParamsProvider = React.lazy(() => import('@features/params/PageParamsProvider'));
+const DataProvider = React.lazy(() => import('@features/data/context/DataProvider'));
+const CodeLookupPageBody = React.lazy(() => import('./CodeLookupPageBody'));
+
+const CodeLookupPage: React.FC = () => {
+    return (
+        <Suspense fallback={<Loading />}>
+            <PageParamsProvider>
+                <DataProvider>
+                    <CodeLookupPageBody />
+                </DataProvider>
+            </PageParamsProvider>
+        </Suspense>
+    );
+};
+
+export default CodeLookupPage;

src/pages/code-lookup/CodeLookupPageBody.tsx

@@ -0,0 +1,89 @@
+import { useDataContext } from '@features/data/context/useDataContext';
+import React, { useState } from 'react';
+import './CodeLookupPage.css';
+import { batchLookup, BatchMatchResult } from './batchMatchLogic';
+
+const CodeLookupPageBody: React.FC = () => {
+    const { languagesInSelectedSource } = useDataContext();
+    const [inputText, setInputText] = useState('');
+    const [outputText, setOutputText] = useState('');
+    const [statusMessages, setStatusMessages] = useState<string[]>([]);
+    const [copied, setCopied] = useState(false);
+
+    const isLoading = languagesInSelectedSource.length === 0;
+
+    function handleLookup() {
+        const lines = inputText.split('\n');
+        const results: BatchMatchResult[] = batchLookup(lines, languagesInSelectedSource);
+
+        const codes = results.map((r) => r.code);
+        setOutputText(codes.join('\n'));
+
+        const warnings: string[] = [];
+        results.forEach((r, i) => {
+            if (r.warning) {
+                warnings.push(`Line ${i + 1}: ${r.warning}`);
+            }
+        });
+        setStatusMessages(warnings);
+        setCopied(false);
+    }
+
+    async function handleCopy() {
+        try {
+            await navigator.clipboard.writeText(outputText);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch { }
+    }
+
+    return (
+        <div className="code-lookup-container">
+            <h2>Language Code Lookup</h2>
+            <p>
+                Enter language names below (one per line) and click <strong>Look Up</strong> to get their
+                language codes. Example: <code>Punjabi</code> &gt;&gt; <code>lah/pan</code>.
+            </p>
+            <div className="code-lookup-textareas">
+                <div className="code-lookup-column">
+                    <label htmlFor="batch-input">Language Names</label>
+                    <textarea
+                        id="batch-input"
+                        className="code-lookup-textarea"
+                        placeholder={'Example:\nUrdu\nPunjabi\nHindko'}
+                        value={inputText}
+                        onChange={(e) => setInputText(e.target.value)}
+                    />
+                </div>
+                <div className="code-lookup-column">
+                    <label htmlFor="batch-output">Language Codes</label>
+                    <textarea
+                        id="batch-output"
+                        className="code-lookup-textarea"
+                        readOnly
+                        value={outputText}
+                    />
+                </div>
+            </div>
+            <div className="code-lookup-actions">
+                <button className="primary" onClick={handleLookup} disabled={isLoading || inputText.trim() === ''}>
+                    {isLoading ? 'Loading data...' : 'Look Up'}
+                </button>
+                {outputText && (
+                    <button onClick={handleCopy}>{copied ? 'Copied!' : 'Copy Output'}</button>
+                )}
+            </div>
+            {statusMessages.length > 0 && (
+                <div className="code-lookup-status">
+                    {statusMessages.map((msg, i) => (
+                        <div key={i} className="warning">
+                            {msg}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CodeLookupPageBody;