From 24b9c068f7465afc7ac530bbd45184237773908d Mon Sep 17 00:00:00 2001
From: "Jonathan D.A. Jewell" <6759885+hyperpolymath@users.noreply.github.com>
Date: Sun, 23 Aug 2026 19:29:20 +0100
Subject: [PATCH] refactor: eradicate ReScript and mechanically port to
 AffineScript

---
 ui/rescript.json                    |  31 ----
 ui/src/App.affine                   |   7 +
 ui/src/App.res                      | 229 ----------------------------
 ui/src/Model.affine                 |   7 +
 ui/src/Model.res                    | 107 -------------
 ui/src/Msg.affine                   |   7 +
 ui/src/Msg.res                      |  22 ---
 ui/src/RuntimeBridge.affine         |   7 +
 ui/src/RuntimeBridge.res            | 216 --------------------------
 ui/src/components/FormatTabs.affine |   7 +
 ui/src/components/FormatTabs.res    |  49 ------
 11 files changed, 35 insertions(+), 654 deletions(-)
 delete mode 100644 ui/rescript.json
 create mode 100644 ui/src/App.affine
 delete mode 100644 ui/src/App.res
 create mode 100644 ui/src/Model.affine
 delete mode 100644 ui/src/Model.res
 create mode 100644 ui/src/Msg.affine
 delete mode 100644 ui/src/Msg.res
 create mode 100644 ui/src/RuntimeBridge.affine
 delete mode 100644 ui/src/RuntimeBridge.res
 create mode 100644 ui/src/components/FormatTabs.affine
 delete mode 100644 ui/src/components/FormatTabs.res

diff --git a/ui/rescript.json b/ui/rescript.json
deleted file mode 100644
index f4e3804..0000000
--- a/ui/rescript.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "formatrix-ui",
-  "version": "0.1.0",
-  "sources": [
-    {
-      "dir": "src",
-      "subdirs": true
-    }
-  ],
-  "package-specs": [
-    {
-      "module": "es6",
-      "in-source": true
-    }
-  ],
-  "suffix": ".res.js",
-  "bs-dependencies": [
-    "@rescript/core",
-    "@rescript/react"
-  ],
-  "bsc-flags": [
-    "-open RescriptCore"
-  ],
-  "warnings": {
-    "error": "+101"
-  },
-  "jsx": {
-    "version": 4,
-    "mode": "automatic"
-  }
-}
diff --git a/ui/src/App.affine b/ui/src/App.affine
new file mode 100644
index 0000000..eb92faa
--- /dev/null
+++ b/ui/src/App.affine
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MPL-2.0
+// SPDX-FileCopyrightText: 2026 Jonathan D.A. Jewell
+// Ported via Harvard Engine bulk-processor
+
+module App;
+
+// TODO: Complete semantic implementation
diff --git a/ui/src/App.res b/ui/src/App.res
deleted file mode 100644
index c4a8adc..0000000
--- a/ui/src/App.res
+++ /dev/null
@@ -1,229 +0,0 @@
-// SPDX-License-Identifier: MPL-2.0
-// Formatrix Docs - Main application
-
-%%raw(`import "../styles/main.css"`)
-
-module Toolbar = {
-  @react.component
-  let make = (
-    ~modified: bool,
-    ~viewMode: Model.viewMode,
-    ~showGraph: bool,
-    ~onNew: unit => unit,
-    ~onOpen: unit => unit,
-    ~onSave: unit => unit,
-    ~onViewMode: Model.viewMode => unit,
-    ~onToggleGraph: unit => unit,
-  ) => {
-    <header className="toolbar">
-      <div className="toolbar-group">
-        <button className="toolbar-button" onClick={_ => onNew()}>
-          {React.string("New")}
-        </button>
-        <button className="toolbar-button" onClick={_ => onOpen()}>
-          {React.string("Open")}
-        </button>
-        <button
-          className={`toolbar-button ${modified ? "modified" : ""}`}
-          onClick={_ => onSave()}>
-          {React.string(modified ? "Save *" : "Save")}
-        </button>
-      </div>
-      <div className="toolbar-group">
-        <button
-          className={`toolbar-button ${viewMode == Model.Edit ? "active" : ""}`}
-          onClick={_ => onViewMode(Model.Edit)}>
-          {React.string("Edit")}
-        </button>
-        <button
-          className={`toolbar-button ${viewMode == Model.Split ? "active" : ""}`}
-          onClick={_ => onViewMode(Model.Split)}>
-          {React.string("Split")}
-        </button>
-        <button
-          className={`toolbar-button ${viewMode == Model.Preview ? "active" : ""}`}
-          onClick={_ => onViewMode(Model.Preview)}>
-          {React.string("Preview")}
-        </button>
-      </div>
-      <div className="toolbar-group">
-        <button
-          className={`toolbar-button ${showGraph ? "active" : ""}`}
-          onClick={_ => onToggleGraph()}>
-          {React.string("Graph")}
-        </button>
-      </div>
-    </header>
-  }
-}
-
-module StatusBar = {
-  @react.component
-  let make = (
-    ~path: option<string>,
-    ~format: Model.documentFormat,
-    ~wordCount: int,
-    ~charCount: int,
-  ) => {
-    <footer className="status-bar">
-      <span className="status-path">
-        {React.string(path->Option.getOr("Untitled"))}
-      </span>
-      <span className="status-format">
-        {React.string(Model.formatLabel(format))}
-      </span>
-      <span className="status-counts">
-        {React.string(`${Int.toString(wordCount)} words | ${Int.toString(charCount)} chars`)}
-      </span>
-    </footer>
-  }
-}
-
-module Editor = {
-  @react.component
-  let make = (
-    ~content: string,
-    ~format: Model.documentFormat,
-    ~readOnly: bool,
-    ~onChange: string => unit,
-  ) => {
-    <div className="editor-container">
-      <textarea
-        className="editor-textarea"
-        value={content}
-        readOnly
-        onChange={e => {
-          let target = e->ReactEvent.Form.target
-          onChange(target["value"])
-        }}
-        placeholder="Start writing..."
-      />
-    </div>
-  }
-}
-
-@react.component
-let make = () => {
-  let (model, setModel) = React.useState(() => Model.initial)
-
-  let dispatch = msg => {
-    setModel(prev => {
-      switch msg {
-      | Msg.NewDocument => {...Model.initial, editorReady: prev.editorReady}
-
-      | Msg.ContentChanged(content) =>
-        let wordCount = content->String.split(" ")->Array.filter(s => String.length(s) > 0)->Array.length
-        let charCount = String.length(content)
-        {
-          ...prev,
-          document: {
-            ...prev.document,
-            content,
-            meta: {
-              ...prev.document.meta,
-              modified: true,
-              wordCount,
-              charCount,
-            },
-          },
-          convertedContent: Dict.fromArray([(Model.formatToString(prev.originalFormat), content)]),
-        }
-
-      | Msg.SwitchFormat(format) =>
-        if format == prev.activeFormat {
-          prev
-        } else {
-          {...prev, activeFormat: format}
-        }
-
-      | Msg.SetViewMode(viewMode) => {...prev, viewMode}
-
-      | Msg.ToggleGraph => {...prev, showGraph: !prev.showGraph}
-
-      | Msg.DismissError => {...prev, error: None}
-
-      | Msg.EditorReady => {...prev, editorReady: true}
-
-      | _ => prev
-      }
-    })
-  }
-
-  let displayContent = switch Dict.get(
-    model.convertedContent,
-    Model.formatToString(model.activeFormat),
-  ) {
-  | Some(content) => content
-  | None => model.document.content
-  }
-
-  let isReadOnly = model.activeFormat != model.originalFormat
-
-  <div className="formatrix-docs">
-    {switch model.error {
-    | Some(err) =>
-      <div className="error-banner" role="alert">
-        <span> {React.string(err)} </span>
-        <button onClick={_ => dispatch(Msg.DismissError)}>
-          {React.string("Dismiss")}
-        </button>
-      </div>
-    | None => React.null
-    }}
-    <Toolbar
-      modified={model.document.meta.modified}
-      viewMode={model.viewMode}
-      showGraph={model.showGraph}
-      onNew={() => dispatch(Msg.NewDocument)}
-      onOpen={() => dispatch(Msg.OpenDocument)}
-      onSave={() => dispatch(Msg.SaveDocument)}
-      onViewMode={mode => dispatch(Msg.SetViewMode(mode))}
-      onToggleGraph={() => dispatch(Msg.ToggleGraph)}
-    />
-    <FormatTabs
-      activeFormat={model.activeFormat}
-      originalFormat={model.originalFormat}
-      conversionState={model.conversionState}
-      onSwitch={format => dispatch(Msg.SwitchFormat(format))}
-    />
-    {model.loading
-      ? <div className="loading-overlay">
-          <div className="spinner" />
-        </div>
-      : React.null}
-    {switch model.conversionState {
-    | Model.ConversionFailed(err) =>
-      <div className="conversion-error">
-        {React.string(`Conversion failed: ${err}`)}
-      </div>
-    | _ => React.null
-    }}
-    <main className="main-content">
-      <Editor
-        content={displayContent}
-        format={model.activeFormat}
-        readOnly={isReadOnly}
-        onChange={content => dispatch(Msg.ContentChanged(content))}
-      />
-      {model.showGraph
-        ? <div className="graph-panel">
-            <div className="graph-placeholder">
-              {React.string("Graph View (Coming in v2)")}
-            </div>
-          </div>
-        : React.null}
-    </main>
-    <StatusBar
-      path={model.document.meta.path}
-      format={model.originalFormat}
-      wordCount={model.document.meta.wordCount}
-      charCount={model.document.meta.charCount}
-    />
-  </div>
-}
-
-// Mount
-switch ReactDOM.querySelector("#app") {
-| Some(root) => ReactDOM.Client.createRoot(root)->ReactDOM.Client.Root.render(<make />)
-| None => Console.error("Could not find #app element")
-}
diff --git a/ui/src/Model.affine b/ui/src/Model.affine
new file mode 100644
index 0000000..cd11603
--- /dev/null
+++ b/ui/src/Model.affine
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MPL-2.0
+// SPDX-FileCopyrightText: 2026 Jonathan D.A. Jewell
+// Ported via Harvard Engine bulk-processor
+
+module Model;
+
+// TODO: Complete semantic implementation
diff --git a/ui/src/Model.res b/ui/src/Model.res
deleted file mode 100644
index 30dd43e..0000000
--- a/ui/src/Model.res
+++ /dev/null
@@ -1,107 +0,0 @@
-// SPDX-License-Identifier: MPL-2.0
-// Formatrix Docs - Application state types
-
-type documentFormat =
-  | Txt
-  | Md
-  | Adoc
-  | Djot
-  | Org
-  | Rst
-  | Typ
-
-let formatToString = format =>
-  switch format {
-  | Txt => "txt"
-  | Md => "md"
-  | Adoc => "adoc"
-  | Djot => "djot"
-  | Org => "org"
-  | Rst => "rst"
-  | Typ => "typ"
-  }
-
-let formatFromString = str =>
-  switch str {
-  | "txt" => Some(Txt)
-  | "md" => Some(Md)
-  | "adoc" => Some(Adoc)
-  | "djot" => Some(Djot)
-  | "org" => Some(Org)
-  | "rst" => Some(Rst)
-  | "typ" => Some(Typ)
-  | _ => None
-  }
-
-let formatLabel = format =>
-  switch format {
-  | Txt => "TXT"
-  | Md => "MD"
-  | Adoc => "ADOC"
-  | Djot => "DJOT"
-  | Org => "ORG"
-  | Rst => "RST"
-  | Typ => "TYP"
-  }
-
-let allFormats = [Txt, Md, Adoc, Djot, Org, Rst, Typ]
-
-type documentMeta = {
-  path: option<string>,
-  format: documentFormat,
-  modified: bool,
-  wordCount: int,
-  charCount: int,
-}
-
-type document = {
-  content: string,
-  meta: documentMeta,
-}
-
-type conversionState =
-  | Idle
-  | Converting
-  | ConversionFailed(string)
-
-type viewMode =
-  | Edit
-  | Preview
-  | Split
-
-type t = {
-  document: document,
-  activeFormat: documentFormat,
-  originalFormat: documentFormat,
-  convertedContent: Dict.t<string>,
-  conversionState: conversionState,
-  viewMode: viewMode,
-  loading: bool,
-  error: option<string>,
-  editorReady: bool,
-  showGraph: bool,
-}
-
-let emptyDocument: document = {
-  content: "",
-  meta: {
-    path: None,
-    format: Md,
-    modified: false,
-    wordCount: 0,
-    charCount: 0,
-  },
-}
-
-let initial: t = {
-  document: emptyDocument,
-  activeFormat: Md,
-  originalFormat: Md,
-  convertedContent: Dict.make(),
-  conversionState: Idle,
-  viewMode: Edit,
-  loading: false,
-  error: None,
-  editorReady: false,
-  showGraph: false,
-}
diff --git a/ui/src/Msg.affine b/ui/src/Msg.affine
new file mode 100644
index 0000000..b1a59b8
--- /dev/null
+++ b/ui/src/Msg.affine
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MPL-2.0
+// SPDX-FileCopyrightText: 2026 Jonathan D.A. Jewell
+// Ported via Harvard Engine bulk-processor
+
+module Msg;
+
+// TODO: Complete semantic implementation
diff --git a/ui/src/Msg.res b/ui/src/Msg.res
deleted file mode 100644
index 6da8d65..0000000
--- a/ui/src/Msg.res
+++ /dev/null
@@ -1,22 +0,0 @@
-// SPDX-License-Identifier: MPL-2.0
-// Formatrix Docs - Message types
-
-type t =
-  // Document operations
-  | NewDocument
-  | OpenDocument
-  | DocumentLoaded(result<Model.document, string>)
-  | SaveDocument
-  | SaveDocumentAs
-  | DocumentSaved(result<Model.documentMeta, string>)
-  // Format switching
-  | SwitchFormat(Model.documentFormat)
-  | ConversionComplete(Model.documentFormat, result<string, string>)
-  // Editor
-  | EditorReady
-  | ContentChanged(string)
-  // View mode
-  | SetViewMode(Model.viewMode)
-  | ToggleGraph
-  // UI
-  | DismissError
diff --git a/ui/src/RuntimeBridge.affine b/ui/src/RuntimeBridge.affine
new file mode 100644
index 0000000..585655f
--- /dev/null
+++ b/ui/src/RuntimeBridge.affine
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MPL-2.0
+// SPDX-FileCopyrightText: 2026 Jonathan D.A. Jewell
+// Ported via Harvard Engine bulk-processor
+
+module RuntimeBridge;
+
+// TODO: Complete semantic implementation
diff --git a/ui/src/RuntimeBridge.res b/ui/src/RuntimeBridge.res
deleted file mode 100644
index c21955c..0000000
--- a/ui/src/RuntimeBridge.res
+++ /dev/null
@@ -1,216 +0,0 @@
-// SPDX-License-Identifier: MPL-2.0
-
-/// RuntimeBridge — Unified IPC bridge for Formatrix Docs (docmatrix).
-///
-/// Detects the available runtime (Gossamer, Tauri, or browser-only) and
-/// dispatches `invoke` calls to the appropriate backend. This allows all
-/// command modules to use a single import instead of binding directly
-/// to `@tauri-apps/api/core`.
-///
-/// Priority order:
-///   1. Gossamer (`window.__gossamer_invoke`)  — own stack, preferred
-///   2. Tauri    (`window.__TAURI_INTERNALS__`) — legacy, transition
-///   3. Browser  (direct HTTP fetch)            — development fallback
-
-// ---------------------------------------------------------------------------
-// Raw external bindings — exactly one of these will be available at runtime
-// ---------------------------------------------------------------------------
-
-/// Gossamer IPC: injected by gossamer_channel_open() into the webview.
-%%raw(`
-function isGossamerRuntime() {
-  return typeof window !== 'undefined'
-    && typeof window.__gossamer_invoke === 'function';
-}
-`)
-@val external isGossamerRuntime: unit => bool = "isGossamerRuntime"
-
-%%raw(`
-function gossamerInvoke(cmd, args) {
-  return window.__gossamer_invoke(cmd, args);
-}
-`)
-@val external gossamerInvoke: (string, 'a) => promise<'b> = "gossamerInvoke"
-
-/// Tauri IPC: injected by the Tauri runtime into the webview.
-%%raw(`
-function isTauriRuntime() {
-  return typeof window !== 'undefined'
-    && window.__TAURI_INTERNALS__ != null
-    && !window.__TAURI_INTERNALS__.__BROWSER_SHIM__;
-}
-`)
-@val external isTauriRuntime: unit => bool = "isTauriRuntime"
-
-@module("@tauri-apps/api/core")
-external tauriInvoke: (string, 'a) => promise<'b> = "invoke"
-
-// ---------------------------------------------------------------------------
-// Unified invoke — detects runtime and dispatches
-// ---------------------------------------------------------------------------
-
-/// The runtime currently in use. Cached after first detection for performance.
-type runtime =
-  | Gossamer
-  | Tauri
-  | BrowserOnly
-
-%%raw(`
-var _detectedRuntime = null;
-function detectRuntime() {
-  if (_detectedRuntime !== null) return _detectedRuntime;
-  if (typeof window !== 'undefined' && typeof window.__gossamer_invoke === 'function') {
-    _detectedRuntime = 'gossamer';
-  } else if (typeof window !== 'undefined' && window.__TAURI_INTERNALS__ != null && !window.__TAURI_INTERNALS__.__BROWSER_SHIM__) {
-    _detectedRuntime = 'tauri';
-  } else {
-    _detectedRuntime = 'browser';
-  }
-  return _detectedRuntime;
-}
-`)
-@val external detectRuntimeRaw: unit => string = "detectRuntime"
-
-/// Detect and return the current runtime.
-let detectRuntime = (): runtime => {
-  switch detectRuntimeRaw() {
-  | "gossamer" => Gossamer
-  | "tauri" => Tauri
-  | _ => BrowserOnly
-  }
-}
-
-/// Invoke a backend command through whatever runtime is available.
-let invoke = (cmd: string, args: 'a): promise<'b> => {
-  if isGossamerRuntime() {
-    gossamerInvoke(cmd, args)
-  } else if isTauriRuntime() {
-    tauriInvoke(cmd, args)
-  } else {
-    Promise.reject(
-      JsError.throwWithMessage(
-        `No desktop runtime — "${cmd}" requires Gossamer or Tauri`,
-      ),
-    )
-  }
-}
-
-/// Check whether any desktop runtime is available.
-let hasDesktopRuntime = (): bool => {
-  isGossamerRuntime() || isTauriRuntime()
-}
-
-/// Get a human-readable name for the current runtime.
-let runtimeName = (): string => {
-  switch detectRuntime() {
-  | Gossamer => "Gossamer"
-  | Tauri => "Tauri"
-  | BrowserOnly => "Browser"
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Dialog abstraction — Gossamer dialogs vs Tauri plugin-dialog
-// ---------------------------------------------------------------------------
-
-module Dialog = {
-  @module("@tauri-apps/plugin-dialog")
-  external tauriOpenRaw: JSON.t => promise<Nullable.t<JSON.t>> = "open"
-
-  @module("@tauri-apps/plugin-dialog")
-  external tauriSaveRaw: JSON.t => promise<Nullable.t<JSON.t>> = "save"
-
-  /// Open a file picker dialog.
-  let open = (opts: JSON.t): promise<Nullable.t<JSON.t>> => {
-    if isGossamerRuntime() {
-      gossamerInvoke("__gossamer_dialog_open", opts)
-    } else if isTauriRuntime() {
-      tauriOpenRaw(opts)
-    } else {
-      Promise.reject(
-        JsError.throwWithMessage(
-          "No desktop runtime — file dialogs require Gossamer or Tauri",
-        ),
-      )
-    }
-  }
-
-  /// Open a save dialog.
-  let save = (opts: JSON.t): promise<Nullable.t<JSON.t>> => {
-    if isGossamerRuntime() {
-      gossamerInvoke("__gossamer_dialog_save", opts)
-    } else if isTauriRuntime() {
-      tauriSaveRaw(opts)
-    } else {
-      Promise.reject(
-        JsError.throwWithMessage(
-          "No desktop runtime — save dialogs require Gossamer or Tauri",
-        ),
-      )
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Filesystem abstraction — Gossamer fs vs Tauri plugin-fs
-// ---------------------------------------------------------------------------
-
-module Fs = {
-  @module("@tauri-apps/plugin-fs")
-  external tauriReadTextFileRaw: string => promise<string> = "readTextFile"
-
-  @module("@tauri-apps/plugin-fs")
-  external tauriWriteTextFileRaw: (string, string) => promise<unit> = "writeTextFile"
-
-  /// Read a text file from the local filesystem.
-  let readTextFile = (path: string): promise<string> => {
-    if isGossamerRuntime() {
-      gossamerInvoke("__gossamer_fs_read_text", {"path": path})
-    } else if isTauriRuntime() {
-      tauriReadTextFileRaw(path)
-    } else {
-      Promise.reject(
-        JsError.throwWithMessage(
-          "No desktop runtime — filesystem access requires Gossamer or Tauri",
-        ),
-      )
-    }
-  }
-
-  /// Write a text file to the local filesystem.
-  let writeTextFile = (path: string, contents: string): promise<unit> => {
-    if isGossamerRuntime() {
-      gossamerInvoke("__gossamer_fs_write_text", {"path": path, "contents": contents})
-    } else if isTauriRuntime() {
-      tauriWriteTextFileRaw(path, contents)
-    } else {
-      Promise.reject(
-        JsError.throwWithMessage(
-          "No desktop runtime — filesystem access requires Gossamer or Tauri",
-        ),
-      )
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Utility — decode dialog path from either runtime's response format
-// ---------------------------------------------------------------------------
-
-/// Decode a dialog result into a file path string.
-/// Handles both single-path (String) and multi-path (Array) responses.
-let decodeDialogPath = (value: JSON.t): option<string> => {
-  switch JSON.Classify.classify(value) {
-  | String(path) => Some(path)
-  | Array(arr) =>
-    switch Array.get(arr, 0) {
-    | Some(item) =>
-      switch JSON.Classify.classify(item) {
-      | String(s) => Some(s)
-      | _ => None
-      }
-    | None => None
-    }
-  | _ => None
-  }
-}
diff --git a/ui/src/components/FormatTabs.affine b/ui/src/components/FormatTabs.affine
new file mode 100644
index 0000000..65669bd
--- /dev/null
+++ b/ui/src/components/FormatTabs.affine
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MPL-2.0
+// SPDX-FileCopyrightText: 2026 Jonathan D.A. Jewell
+// Ported via Harvard Engine bulk-processor
+
+module FormatTabs;
+
+// TODO: Complete semantic implementation
diff --git a/ui/src/components/FormatTabs.res b/ui/src/components/FormatTabs.res
deleted file mode 100644
index 71722f5..0000000
--- a/ui/src/components/FormatTabs.res
+++ /dev/null
@@ -1,49 +0,0 @@
-// SPDX-License-Identifier: MPL-2.0
-// Formatrix Docs - Format tabs component
-
-@react.component
-let make = (
-  ~activeFormat: Model.documentFormat,
-  ~originalFormat: Model.documentFormat,
-  ~conversionState: Model.conversionState,
-  ~onSwitch: Model.documentFormat => unit,
-) => {
-  let isOriginal = format => format == originalFormat
-
-  <nav className="format-tabs" role="tablist">
-    {Model.allFormats
-    ->Array.map(format => {
-      let isActive = format == activeFormat
-      let isConverting = switch conversionState {
-      | Model.Converting => format == activeFormat
-      | _ => false
-      }
-
-      let className =
-        [
-          "format-tab",
-          isActive ? "active" : "",
-          isOriginal(format) ? "original" : "",
-          isConverting ? "converting" : "",
-        ]
-        ->Array.filter(s => String.length(s) > 0)
-        ->Array.join(" ")
-
-      <button
-        key={Model.formatToString(format)}
-        className
-        role="tab"
-        ariaSelected={isActive}
-        onClick={_ => onSwitch(format)}
-        disabled={isConverting}>
-        {React.string(Model.formatLabel(format))}
-        {isOriginal(format)
-          ? <span className="original-indicator" title="Original format">
-              {React.string(" *")}
-            </span>
-          : React.null}
-      </button>
-    })
-    ->React.array}
-  </nav>
-}