Translation dashboard

build/index.js

@@ -627,4 +627,5 @@ module.exports = {
   options: buildOptions,
   gatherGitHistory,
   buildSPAs,
+  getLastCommitURL,
 };

client/src/app.tsx

@@ -20,6 +20,7 @@ import { Settings } from "./settings";
 import { Plus } from "./plus";
 
 const AllFlaws = React.lazy(() => import("./flaws"));
+const AllTranslations = React.lazy(() => import("./translations"));
 const DocumentEdit = React.lazy(() => import("./document/forms/edit"));
 const DocumentCreate = React.lazy(() => import("./document/forms/create"));
 const DocumentManage = React.lazy(() => import("./document/forms/manage"));
@@ -132,6 +133,14 @@ export function App(appProps) {
                     </StandardLayout>
                   }
                 />
+                <Route
+                  path="/_translations"
+                  element={
+                    <StandardLayout>
+                      <AllTranslations />
+                    </StandardLayout>
+                  }
+                />
                 <Route
                   path="/_edit/*"
                   element={

client/src/translations/index.scss

@@ -0,0 +1,112 @@
+.all-translations {
+  .error-message {
+    background-color: rgb(252, 159, 159);
+    padding: 10px;
+    margin: 25px 0;
+
+    h3,
+    h4 {
+      margin-top: 0;
+    }
+
+    h3 span.page {
+      margin-left: 10px;
+      color: #666;
+    }
+
+    p {
+      margin-bottom: 3px;
+    }
+  }
+
+  .loading {
+    text-align: center;
+    margin: 200px;
+
+    progress {
+      width: 600px;
+      height: 30px;
+      border-radius: 2px;
+    }
+  }
+
+  table {
+    width: 100%;
+
+    th.sortable.active {
+      background-color: rgb(237, 237, 237);
+    }
+    th.sortable.active.reverse {
+      transform: rotate(-180deg);
+    }
+
+    td a .url-prefix {
+      margin-right: 2px;
+      color: rgb(159, 159, 159);
+      font-size: 80%;
+    }
+    td .document-title-preview {
+      // color: rgb(118, 118, 118);
+    }
+
+    td .last_modified.ahead a {
+      color: green;
+    }
+    td .last_modified.behind a {
+      color: orange;
+    }
+  }
+
+  .document-warnings {
+    background-color: rgb(255, 215, 154);
+  }
+
+  .search-times {
+    margin-top: 60px;
+    p {
+      font-size: 70%;
+    }
+  }
+
+  .pagination {
+    text-align: center;
+    margin: 20px;
+    a.disabled {
+      color: rgb(159, 159, 159);
+    }
+    a {
+      padding: 10px;
+    }
+  }
+
+  div.filter-documents {
+    .filters {
+      // XXX Can someone please turn this into a CSS grid
+      float: left;
+      width: 300px;
+
+      h4 {
+        border-bottom: 1px solid #efefef;
+        margin-bottom: 10px;
+      }
+
+      ul.search-flaws-rows {
+        padding-left: 0;
+        li {
+          list-style: none;
+        }
+      }
+    }
+    .documents {
+      margin-left: 300px;
+
+      h4.subheader {
+        margin-top: 2px;
+      }
+
+      th.sortable {
+        cursor: ns-resize;
+      }
+    }
+  }
+}