#35: add record id to the page & unify filename style

src/App.tsx

@@ -7,8 +7,8 @@ import { TableDetailsPage } from "./pages/TableDetails";
 import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
 import { RecordCrossmatchDetailsPage } from "./pages/RecordCrossmatchDetails";
 import { TablesPage } from "./pages/Tables";
-import { Layout } from "./components/ui/layout";
-import { SearchBar } from "./components/ui/searchbar";
+import { Layout } from "./components/ui/Layout";
+import { SearchBar } from "./components/ui/Searchbar";
 
 function App() {
   return (

src/components/ui/badge.tsx → src/components/ui/Badge.tsx

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

src/components/ui/catalog-data.tsx → src/components/ui/CatalogData.tsx

@@ -1,12 +1,12 @@
 import { ReactElement } from "react";
-import { CommonTable, Column } from "./common-table";
+import { CommonTable, Column } from "./CommonTable";
 import { Catalogs, Schema } from "../../clients/backend/types.gen";
 import {
   Declination,
   RightAscension,
   Quantity,
   QuantityWithError,
-} from "./astronomy";
+} from "./Astronomy";
 
 interface CatalogDataProps {
   catalogs: Catalogs;

src/components/ui/common-table.tsx → 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 "./Hint";
+import { Loading } from "./Loading";
 
 export type CellPrimitive = ReactElement | string | number;
 

src/components/ui/copy-button.tsx → src/components/ui/CopyButton.tsx

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

src/components/ui/error-page.tsx → src/components/ui/ErrorPage.tsx

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

src/components/ui/footer.tsx → src/components/ui/Footer.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Link as ReactDomLink } from "react-router-dom";
-import { Button } from "./button";
-import { Link } from "./link";
+import { Button } from "./Button";
+import { Link } from "./Link";
 import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
 
 const footerContent = (

src/components/ui/layout.tsx → src/components/ui/Layout.tsx

@@ -1,4 +1,4 @@
-import { Footer } from "./footer";
+import { Footer } from "./Footer";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (

src/components/ui/pagination.tsx → src/components/ui/Pagination.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { Button } from "./button";
+import { Button } from "./Button";
 
 type PaginationProps = {
   page: number;

src/components/ui/searchbar.tsx → src/components/ui/Searchbar.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useState } from "react";
 import { Link, NavigateFunction, useNavigate } from "react-router-dom";
 import classNames from "classnames";
-import { Button } from "./button";
+import { Button } from "./Button";
 
 interface SearchBarProps {
   initialValue?: string;

src/pages/CrossmatchResults.tsx

@@ -4,10 +4,10 @@ import {
   CommonTable,
   Column,
   CellPrimitive,
-} from "../components/ui/common-table";
-import { Badge } from "../components/ui/badge";
-import { DropdownFilter } from "../components/ui/dropdown-filter";
-import { TextFilter } from "../components/ui/text-filter";
+} from "../components/ui/CommonTable";
+import { Badge } from "../components/ui/Badge";
+import { DropdownFilter } from "../components/ui/DropdownFilter";
+import { TextFilter } from "../components/ui/TextFilter";
 import { getCrossmatchRecords } from "../clients/admin/sdk.gen";
 import type {
   GetRecordsCrossmatchResponse,
@@ -16,12 +16,12 @@ import type {
   ValidationError,
 } from "../clients/admin/types.gen";
 import { getResource } from "../resources/resources";
-import { Button } from "../components/ui/button";
-import { Loading } from "../components/ui/loading";
-import { ErrorPage } from "../components/ui/error-page";
-import { Link } from "../components/ui/link";
+import { Button } from "../components/ui/Button";
+import { Loading } from "../components/ui/Loading";
+import { ErrorPage } from "../components/ui/ErrorPage";
+import { Link } from "../components/ui/Link";
 import { useDataFetching } from "../hooks/useDataFetching";
-import { Pagination } from "../components/ui/pagination";
+import { Pagination } from "../components/ui/Pagination";
 import { adminClient } from "../clients/config";
 
 interface CrossmatchFiltersProps {

src/pages/Home.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { Link } from "../components/ui/link";
+import { Link } from "../components/ui/Link";
 
 const homePageHint: ReactElement = (
   <div>

src/pages/NotFound.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
-import { ErrorPage } from "../components/ui/error-page";
-import { Button } from "../components/ui/button";
+import { ErrorPage } from "../components/ui/ErrorPage";
+import { Button } from "../components/ui/Button";
 import { useEffect } from "react";
 
 export function NotFoundPage() {

src/pages/ObjectDetails.tsx

@@ -1,10 +1,10 @@
 import { ReactElement, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { AladinViewer } from "../components/ui/aladin";
-import { Loading } from "../components/ui/loading";
-import { ErrorPage } from "../components/ui/error-page";
-import { CatalogData } from "../components/ui/catalog-data";
-import { Link } from "../components/ui/link";
+import { AladinViewer } from "../components/ui/Aladin";
+import { Loading } from "../components/ui/Loading";
+import { ErrorPage } from "../components/ui/ErrorPage";
+import { CatalogData } from "../components/ui/CatalogData";
+import { Link } from "../components/ui/Link";
 import { querySimple } from "../clients/backend/sdk.gen";
 import { PgcObject, Schema } from "../clients/backend/types.gen";
 import { useDataFetching } from "../hooks/useDataFetching";

src/pages/RecordCrossmatchDetails.tsx

@@ -1,9 +1,9 @@
 import { ReactElement, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { AladinViewer } from "../components/ui/aladin";
-import { Loading } from "../components/ui/loading";
-import { ErrorPage } from "../components/ui/error-page";
-import { CatalogData } from "../components/ui/catalog-data";
+import { AladinViewer } from "../components/ui/Aladin";
+import { Loading } from "../components/ui/Loading";
+import { ErrorPage } from "../components/ui/ErrorPage";
+import { CatalogData } from "../components/ui/CatalogData";
 import { getRecordCrossmatch } from "../clients/admin/sdk.gen";
 import {
   GetRecordCrossmatchResponse,
@@ -13,7 +13,8 @@ import {
 } from "../clients/admin/types.gen";
 import { Schema as BackendSchema } from "../clients/backend/types.gen";
 import { getResource } from "../resources/resources";
-import { Link } from "../components/ui/link";
+import { Link } from "../components/ui/Link";
+import { CopyButton } from "../components/ui/CopyButton";
 import { useDataFetching } from "../hooks/useDataFetching";
 import { adminClient } from "../clients/config";
 
@@ -149,6 +150,12 @@ function RecordCrossmatchDetails({
               {crossmatch.catalogs.designation.name}
             </h2>
           )}
+          <p className="flex items-center gap-2 mb-2">
+            Record ID:{" "}
+            <CopyButton textToCopy={crossmatch.record_id}>
+              <span className="font-mono">{crossmatch.record_id}</span>
+            </CopyButton>
+          </p>
           <p>
             Status:{" "}
             {getResource(`crossmatch.status.${crossmatch.status}`).Title}

src/pages/SearchResults.tsx

@@ -4,16 +4,16 @@ import {
   useNavigate,
   useSearchParams,
 } from "react-router-dom";
-import { SearchBar } from "../components/ui/searchbar";
-import { CommonTable, Column } from "../components/ui/common-table";
-import { Loading } from "../components/ui/loading";
-import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
+import { SearchBar } from "../components/ui/Searchbar";
+import { CommonTable, Column } from "../components/ui/CommonTable";
+import { Loading } from "../components/ui/Loading";
+import { ErrorPage, ErrorPageHomeButton } from "../components/ui/ErrorPage";
 import { useDataFetching } from "../hooks/useDataFetching";
 import { querySimple } from "../clients/backend/sdk.gen";
 import { QuerySimpleResponse } from "../clients/backend/types.gen";
-import { Link } from "../components/ui/link";
-import { Declination, RightAscension } from "../components/ui/astronomy";
-import { Pagination } from "../components/ui/pagination";
+import { Link } from "../components/ui/Link";
+import { Declination, RightAscension } from "../components/ui/Astronomy";
+import { Pagination } from "../components/ui/Pagination";
 import { backendClient } from "../clients/config";
 
 function searchHandler(navigate: NavigateFunction) {

src/pages/TableDetails.tsx

@@ -10,13 +10,13 @@ import {
   CellPrimitive,
   Column,
   CommonTable,
-} from "../components/ui/common-table";
-import { Button } from "../components/ui/button";
-import { CopyButton } from "../components/ui/copy-button";
-import { Badge } from "../components/ui/badge";
-import { Link } from "../components/ui/link";
-import { Loading } from "../components/ui/loading";
-import { ErrorPage } from "../components/ui/error-page";
+} from "../components/ui/CommonTable";
+import { Button } from "../components/ui/Button";
+import { CopyButton } from "../components/ui/CopyButton";
+import { Badge } from "../components/ui/Badge";
+import { Link } from "../components/ui/Link";
+import { Loading } from "../components/ui/Loading";
+import { ErrorPage } from "../components/ui/ErrorPage";
 import { getResource } from "../resources/resources";
 import { useDataFetching } from "../hooks/useDataFetching";
 import { backendClient } from "../clients/config";

src/pages/Tables.tsx

@@ -4,20 +4,20 @@ import {
   CommonTable,
   Column,
   CellPrimitive,
-} from "../components/ui/common-table";
-import { DropdownFilter } from "../components/ui/dropdown-filter";
-import { TextFilter } from "../components/ui/text-filter";
+} from "../components/ui/CommonTable";
+import { DropdownFilter } from "../components/ui/DropdownFilter";
+import { TextFilter } from "../components/ui/TextFilter";
 import { getTableList } from "../clients/admin/sdk.gen";
 import type {
   GetTableListResponse,
   TableListItem,
   ValidationError,
 } from "../clients/admin/types.gen";
-import { Loading } from "../components/ui/loading";
-import { ErrorPage } from "../components/ui/error-page";
-import { Link } from "../components/ui/link";
+import { Loading } from "../components/ui/Loading";
+import { ErrorPage } from "../components/ui/ErrorPage";
+import { Link } from "../components/ui/Link";
 import { useDataFetching } from "../hooks/useDataFetching";
-import { Pagination } from "../components/ui/pagination";
+import { Pagination } from "../components/ui/Pagination";
 import { adminClient } from "../clients/config";
 
 const SEARCH_DEBOUNCE_MS = 300;