Improve UI slightly

makefile

@@ -1,18 +1,17 @@
-GIT_VERSION = `git rev-parse --short HEAD`
+check:
+	@output=$$(yarn run --silent prettier --check src 2>&1) || { echo "$$output"; exit 1; }
+	@output=$$(yarn run --silent eslint src 2>&1) || { echo "$$output"; exit 1; }
+	@yarn build
 
-run:
-	yarn dev
+fix:
+	@output=$$(yarn run --silent prettier --write src 2>&1) || { echo "$$output"; exit 1; }
+	@output=$$(yarn run --silent eslint --fix src 2>&1) || { echo "$$output"; exit 1; }
 
-build:
-	yarn build
 
-check:
-	yarn run prettier --check src
-	yarn eslint src
+GIT_VERSION = `git rev-parse --short HEAD`
 
-fix:
-	yarn run prettier --write src
-	yarn eslint --fix src
+run:
+	yarn dev
 
 gen:
 	yarn run openapi-ts -i http://leda.sao.ru/api/openapi.json -o ./src/clients/backend

src/App.tsx

@@ -14,76 +14,48 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route
-          path="/"
-          element={
-            <Layout>
-              <SearchBar logoSize="large" />
-              <HomePage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/query"
-          element={
-            <Layout>
-              <SearchResultsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/object/:pgcId"
-          element={
-            <Layout>
-              <SearchBar />
-              <ObjectDetailsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/table/:tableName"
-          element={
-            <Layout>
-              <SearchBar />
-              <TableDetailsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/tables"
-          element={
-            <Layout>
-              <SearchBar />
-              <TablesPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/crossmatch"
-          element={
-            <Layout>
-              <CrossmatchResultsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="/records/:recordId/crossmatch"
-          element={
-            <Layout>
-              <SearchBar />
-              <RecordCrossmatchDetailsPage />
-            </Layout>
-          }
-        />
-        <Route
-          path="*"
-          element={
-            <Layout>
-              <SearchBar />
-              <NotFoundPage />
-            </Layout>
-          }
-        />
+        <Route element={<Layout />}>
+          <Route
+            path="/"
+            element={
+              <>
+                <SearchBar logoSize="large" />
+                <HomePage />
+              </>
+            }
+          />
+          <Route path="/query" element={<SearchResultsPage />} />
+          <Route
+            path="/object/:pgcId"
+            element={
+              <>
+                <SearchBar />
+                <ObjectDetailsPage />
+              </>
+            }
+          />
+          <Route path="/table/:tableName" element={<TableDetailsPage />} />
+          <Route path="/tables" element={<TablesPage />} />
+          <Route path="/crossmatch" element={<CrossmatchResultsPage />} />
+          <Route
+            path="/records/:recordId/crossmatch"
+            element={
+              <>
+                <SearchBar />
+                <RecordCrossmatchDetailsPage />
+              </>
+            }
+          />
+          <Route
+            path="*"
+            element={
+              <>
+                <SearchBar />
+                <NotFoundPage />
+              </>
+            }
+          />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

src/components/ui/Link.tsx → src/components/core/Link.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, ReactNode } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import { MdOpenInNew } from "react-icons/md";
 
 interface LinkProps {
@@ -14,22 +15,25 @@ export function Link(props: LinkProps): ReactElement {
   const className = props.className
     ? `${baseClass} ${props.className}`
     : baseClass;
+  const combinedClassName = `${className} inline-flex items-center gap-1`;
 
-  const linkProps = props.external
-    ? {
-        target: "_blank",
-        rel: "noopener noreferrer",
-      }
-    : {};
+  if (props.external) {
+    return (
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={props.href}
+        className={combinedClassName}
+      >
+        {content}
+        <MdOpenInNew />
+      </a>
+    );
+  }
 
   return (
-    <a
-      {...linkProps}
-      href={props.href}
-      className={`${className} inline-flex items-center gap-1`}
-    >
+    <RouterLink to={props.href} className={combinedClassName}>
       {content}
-      {props.external && <MdOpenInNew />}
-    </a>
+    </RouterLink>
   );
 }

src/components/ui/Badge.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { Link } from "./Link";
+import { Link } from "../core/Link";
 
 interface BadgeProps {
   children: React.ReactNode;

src/components/ui/CatalogData.tsx

@@ -6,7 +6,7 @@ import {
   RightAscension,
   Quantity,
   QuantityWithError,
-} from "./Astronomy";
+} from "../core/Astronomy";
 
 interface CatalogDataProps {
   catalogs: Catalogs;

src/components/ui/CommonTable.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, ReactNode } from "react";
 import classNames from "classnames";
-import { Hint } from "./Hint";
-import { Loading } from "./Loading";
+import { Hint } from "../core/Hint";
+import { Loading } from "../core/Loading";
 
 export type CellPrimitive = ReactElement | string | number;
 

src/components/ui/CopyButton.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useState } from "react";
-import { Button } from "./Button";
+import { Button } from "../core/Button";
 import { MdCheck, MdContentCopy } from "react-icons/md";
 
 interface CopyButtonProps {

src/components/ui/ErrorPage.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import { Button } from "./Button";
+import { Button } from "../core/Button";
 
 interface ErrorPageProps {
   title?: string;

src/components/ui/Layout.tsx

@@ -1,10 +1,15 @@
-import { Footer } from "./Footer";
+import { Outlet } from "react-router-dom";
+import { Navbar } from "./Navbar";
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export function Layout() {
   return (
-    <div className="min-h-screen flex flex-col">
-      <div className="flex-grow p-8">{children}</div>
-      <Footer />
+    <div className="min-h-screen flex">
+      <Navbar />
+      <div className="ml-12 flex flex-col flex-grow min-h-screen">
+        <div className="flex-grow p-8">
+          <Outlet />
+        </div>
+      </div>
     </div>
   );
 }