From ccb2e3771cd7f7c7074cb34786b2cadc5f5cba07 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sat, 30 Aug 2025 11:29:46 +0300
Subject: [PATCH 1/4] move copy button to components

---
 src/components/ui/copy-button.tsx | 38 +++++++++++++++++++++++++++++++
 src/pages/TableDetails.tsx        | 38 +------------------------------
 2 files changed, 39 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ui/copy-button.tsx

diff --git a/src/components/ui/copy-button.tsx b/src/components/ui/copy-button.tsx
new file mode 100644
index 0000000..e885d78
--- /dev/null
+++ b/src/components/ui/copy-button.tsx
@@ -0,0 +1,38 @@
+import { ReactElement, useState } from "react";
+import { Button } from "./button";
+import { MdCheck, MdContentCopy } from "react-icons/md";
+
+interface CopyButtonProps {
+    children: ReactElement;
+    textToCopy: string;
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({ children, textToCopy }) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1000);
+        } catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
+
+    return (
+        <div className="font-mono group relative flex items-center justify-between">
+            <div>{children}</div>
+            <Button
+                onClick={handleCopy}
+                className="opacity-0 group-hover:opacity-100 transition-opacity"
+            >
+                {copied ? (
+                    <MdCheck className="text-gray-400" />
+                ) : (
+                    <MdContentCopy className="text-gray-400" />
+                )}
+            </Button>
+        </div>
+    );
+};
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 370ebfb..9aa2b93 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -3,43 +3,7 @@ import { GetTableResponse, HttpValidationError, Bibliography } from "../clients/
 import { getTableAdminApiV1TableGet } from "../clients/admin/sdk.gen";
 import { useNavigate, useParams } from "react-router-dom";
 import { CommonTable, Column } from "../components/ui/common-table";
-import { Button } from "../components/ui/button";
-import { MdContentCopy, MdCheck } from "react-icons/md";
-
-interface CopyButtonProps {
-    children: ReactElement;
-    textToCopy: string;
-}
-
-const CopyButton: React.FC<CopyButtonProps> = ({ children, textToCopy }) => {
-    const [copied, setCopied] = useState(false);
-
-    const handleCopy = async () => {
-        try {
-            await navigator.clipboard.writeText(textToCopy);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1000);
-        } catch (err) {
-            console.error('Failed to copy text: ', err);
-        }
-    };
-
-    return (
-        <div className="font-mono group relative flex items-center justify-between">
-            <div>{children}</div>
-            <Button
-                onClick={handleCopy}
-                className="opacity-0 group-hover:opacity-100 transition-opacity"
-            >
-                {copied ? (
-                    <MdCheck className="text-gray-400" />
-                ) : (
-                    <MdContentCopy className="text-gray-400" />
-                )}
-            </Button>
-        </div>
-    );
-};
+import { CopyButton } from "../components/ui/copy-button";
 
 function renderBibliography(bib: Bibliography): ReactElement {
     var authors = ""

From 7ed4fa5686eb9b18d90698dfd5a0b40893879bec Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sat, 30 Aug 2025 12:37:38 +0300
Subject: [PATCH 2/4] move links to common place & added common hint component
 & simplify footer

---
 package.json                       |  1 +
 src/App.tsx                        |  5 +++-
 src/components/ui/common-table.tsx | 16 +++++++++----
 src/components/ui/footer.tsx       | 37 ++++--------------------------
 src/components/ui/hint.tsx         | 23 +++++++++++++++++++
 src/components/ui/link.tsx         | 13 +++++++++++
 src/pages/TableDetails.tsx         | 12 ++++++++--
 7 files changed, 68 insertions(+), 39 deletions(-)
 create mode 100644 src/components/ui/hint.tsx
 create mode 100644 src/components/ui/link.tsx

diff --git a/package.json b/package.json
index f5b443c..7b4bd59 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@tailwindcss/vite": "^4.0.9",
     "axios": "^1.11.0",
     "classnames": "^2.5.1",
+    "flowbite-react": "^0.12.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
diff --git a/src/App.tsx b/src/App.tsx
index 061a44d..34ca67b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -53,7 +53,10 @@ function App() {
         />
         <Route
           path="*"
-          element={<NotFoundPage />}
+          element={
+            <Layout>
+              <NotFoundPage />
+            </Layout>}
         />
       </Routes>
     </BrowserRouter>
diff --git a/src/components/ui/common-table.tsx b/src/components/ui/common-table.tsx
index 646a389..b314e04 100644
--- a/src/components/ui/common-table.tsx
+++ b/src/components/ui/common-table.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import classNames from "classnames";
+import { Hint } from "./hint";
 
 export interface Column {
     name: string;
     renderCell?: (value: any) => React.ReactNode;
+    hint?: ReactElement;
 }
 
 interface CommonTableProps {
@@ -33,7 +35,7 @@ export const CommonTable: React.FC<CommonTableProps> = ({
         }
 
         if (value === undefined || value === null) {
-            return <span className="text-gray-400 italic">NULL</span>;
+            return <div />;
         }
 
         if (React.isValidElement(value)) {
@@ -44,7 +46,7 @@ export const CommonTable: React.FC<CommonTableProps> = ({
     };
 
     return (
-        <div className={classNames("w-full", className)}>
+        <div className={classNames("w-full z-0", className)}>
             {children && (
                 <div className={classNames("mb-1 p-4 bg-gray-50 rounded-sm", headerClassName)}>
                     {children}
@@ -63,7 +65,13 @@ export const CommonTable: React.FC<CommonTableProps> = ({
                                         columnHeaderClassName
                                     )}
                                 >
-                                    {column.name}
+                                    {column.hint ? (
+                                        <Hint hintContent={column.hint}>
+                                            <span>{column.name}</span>
+                                        </Hint>
+                                    ) : (
+                                        column.name
+                                    )}
                                 </th>
                             ))}
                         </tr>
diff --git a/src/components/ui/footer.tsx b/src/components/ui/footer.tsx
index 29c433a..ea600e8 100644
--- a/src/components/ui/footer.tsx
+++ b/src/components/ui/footer.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Button } from "./button";
+import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
 
 const footerContent = `
 Information: https://hyperleda.github.io/
@@ -24,46 +25,18 @@ export function Footer() {
           className="fixed bottom-4 right-4 z-10 transition-colors"
           aria-label="Expand footer"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="text-white"
-          >
-            <polyline points="18 15 12 9 6 15"></polyline>
-          </svg>
+          <MdKeyboardArrowUp />
         </Button>
       ) : (
         <footer className="fixed bottom-0 left-0 right-0 py-3 border-t bg-[#2a2a2a] border-gray-800 z-10 shadow-lg backdrop-blur-sm bg-opacity-95 mx-8 mb-3 rounded transition-all">
           <div className="flex justify-between items-start">
-            <div className="max-w-4xl w-full mx-auto prose prose-invert leading-none prose-sm">
+            <div className="max-w-4xl w-full mx-auto leading-none prose-sm">
               <ReactMarkdown remarkPlugins={[remarkGfm]}>
                 {footerContent}
               </ReactMarkdown>
             </div>
-            <Button
-              onClick={toggleCollapse}
-              className="text-gray-400 hover:text-white transition-colors mr-3"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
+            <Button onClick={toggleCollapse} className="mr-3">
+              <MdKeyboardArrowDown />
             </Button>
           </div>
         </footer>
diff --git a/src/components/ui/hint.tsx b/src/components/ui/hint.tsx
new file mode 100644
index 0000000..f141c11
--- /dev/null
+++ b/src/components/ui/hint.tsx
@@ -0,0 +1,23 @@
+import { Tooltip } from "flowbite-react";
+import { ReactElement } from "react";
+import { MdHelpOutline } from "react-icons/md";
+import 'rc-tooltip/assets/bootstrap_white.css';
+
+interface HintProps {
+    children: ReactElement;
+    hintContent: ReactElement;
+    className?: string;
+}
+
+export const Hint: React.FC<HintProps> = ({ children, hintContent, className = "" }) => {
+    return (
+        <div className={`relative flex items-center gap-2 ${className}`}>
+            <div>{children}</div>
+            <div className="flex gap-2">
+                <Tooltip content={hintContent} arrow={false} placement="top" className="bg-gray-600 px-2 border-1">
+                    <MdHelpOutline />
+                </Tooltip>
+            </div>
+        </div >
+    );
+};
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
new file mode 100644
index 0000000..2a006df
--- /dev/null
+++ b/src/components/ui/link.tsx
@@ -0,0 +1,13 @@
+import React, { ReactElement } from "react";
+
+interface LinkProps {
+    children: ReactElement | string;
+    href: string;
+}
+
+
+export const Link: React.FC<LinkProps> = ({ children, href }) => {
+    return <a target="_blank" rel="noopener noreferrer" href={href}>
+        {children}
+    </a>
+}
\ No newline at end of file
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 9aa2b93..f0eb6a2 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -4,6 +4,7 @@ import { getTableAdminApiV1TableGet } from "../clients/admin/sdk.gen";
 import { useNavigate, useParams } from "react-router-dom";
 import { CommonTable, Column } from "../components/ui/common-table";
 import { CopyButton } from "../components/ui/copy-button";
+import { Link } from "../components/ui/link";
 
 function renderBibliography(bib: Bibliography): ReactElement {
     var authors = ""
@@ -20,7 +21,7 @@ function renderBibliography(bib: Bibliography): ReactElement {
     const targetLink = "https://ui.adsabs.harvard.edu/abs/" + bib.bibcode + "/abstract"
 
     return <CopyButton textToCopy={bib.bibcode}>
-        <div><a target="_blank" rel="noopener noreferrer" href={targetLink}>{bib.bibcode}</a> | {authors}: "{bib.title}"</div>
+        <div><Link href={targetLink}>{bib.bibcode}</Link> | {authors}: "{bib.title}"</div>
     </CopyButton>
 }
 
@@ -87,7 +88,14 @@ const renderTableDetails = (tableName: string, table: GetTableResponse) => {
         { name: "Name", renderCell: renderColumnName },
         { name: "Description" },
         { name: "Unit" },
-        { name: "UCD", renderCell: renderUCD },
+        {
+            name: "UCD",
+            renderCell: renderUCD,
+            hint: <p>
+                Unified Content Descriptor. Describes astronomical quantities in a structured way. For more information
+                see <Link href="https://www.ivoa.net/documents/latest/UCD.html">IVOA Recommendation</Link>.
+            </p>
+        },
     ]
 
     var columnInfoValues: any[] = []

From 65e9d468ae03be630946489e395cb24ea35291ea Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sat, 30 Aug 2025 13:37:08 +0300
Subject: [PATCH 3/4] cleanup css & remove markdown & make footer cooler

---
 src/components/ui/footer.tsx | 64 +++++++++++++++++++++---------------
 src/components/ui/hint.tsx   |  3 +-
 src/components/ui/link.tsx   |  8 ++---
 src/index.css                | 19 +----------
 src/pages/Home.tsx           | 47 +++++++++++++++++---------
 src/pages/TableDetails.tsx   |  2 +-
 6 files changed, 76 insertions(+), 67 deletions(-)

diff --git a/src/components/ui/footer.tsx b/src/components/ui/footer.tsx
index ea600e8..c21a4d4 100644
--- a/src/components/ui/footer.tsx
+++ b/src/components/ui/footer.tsx
@@ -1,14 +1,13 @@
 import { useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { Link as ReactDomLink } from "react-router-dom";
 import { Button } from "./button";
+import { Link } from "./link";
 import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
 
-const footerContent = `
-Information: https://hyperleda.github.io/
-
-Old version: http://leda.univ-lyon1.fr/
-`;
+const footerContent = <div className="prose prose-invert prose-a:no-underline">
+  <div>Information: <Link href="https://hyperleda.github.io/" /></div>
+  <div>Old version: <Link href="http://leda.univ-lyon1.fr/" /></div>
+</div>
 
 export function Footer() {
   const [isCollapsed, setIsCollapsed] = useState(true);
@@ -19,28 +18,39 @@ export function Footer() {
 
   return (
     <>
-      {isCollapsed ? (
-        <Button
-          onClick={toggleCollapse}
-          className="fixed bottom-4 right-4 z-10 transition-colors"
-          aria-label="Expand footer"
-        >
-          <MdKeyboardArrowUp />
-        </Button>
-      ) : (
-        <footer className="fixed bottom-0 left-0 right-0 py-3 border-t bg-[#2a2a2a] border-gray-800 z-10 shadow-lg backdrop-blur-sm bg-opacity-95 mx-8 mb-3 rounded transition-all">
-          <div className="flex justify-between items-start">
-            <div className="max-w-4xl w-full mx-auto leading-none prose-sm">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {footerContent}
-              </ReactMarkdown>
+      <Button
+        onClick={toggleCollapse}
+        className={`fixed bottom-4 right-4 z-10 transition-all duration-100 ease-in-out ${isCollapsed ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none'
+          }`}
+        aria-label="Expand footer"
+      >
+        <MdKeyboardArrowUp />
+      </Button>
+
+      <footer
+        className={`fixed bottom-0 border-1 left-0 right-0 py-3 z-10 shadow-lg backdrop-blur-sm bg-opacity-99 mx-10 mb-3 rounded transition-all duration-300 ease-in-out ${isCollapsed
+          ? 'opacity-0 translate-y-full pointer-events-none'
+          : 'opacity-100 translate-y-0'
+          }`}
+      >
+        <div className="flex justify-between items-start">
+          <div className="max-w-4xl w-full mx-auto leading-none prose-sm">
+            <div className="flex items-center gap-4">
+              <ReactDomLink to="/">
+                <img
+                  src="/logo.png"
+                  alt="HyperLeda Logo"
+                  className="h-8"
+                />
+              </ReactDomLink>
+              {footerContent}
             </div>
-            <Button onClick={toggleCollapse} className="mr-3">
-              <MdKeyboardArrowDown />
-            </Button>
           </div>
-        </footer>
-      )}
+          <Button onClick={toggleCollapse} className="mr-3">
+            <MdKeyboardArrowDown />
+          </Button>
+        </div>
+      </footer>
     </>
   );
 }
diff --git a/src/components/ui/hint.tsx b/src/components/ui/hint.tsx
index f141c11..5f30f4b 100644
--- a/src/components/ui/hint.tsx
+++ b/src/components/ui/hint.tsx
@@ -1,7 +1,6 @@
 import { Tooltip } from "flowbite-react";
 import { ReactElement } from "react";
 import { MdHelpOutline } from "react-icons/md";
-import 'rc-tooltip/assets/bootstrap_white.css';
 
 interface HintProps {
     children: ReactElement;
@@ -11,7 +10,7 @@ interface HintProps {
 
 export const Hint: React.FC<HintProps> = ({ children, hintContent, className = "" }) => {
     return (
-        <div className={`relative flex items-center gap-2 ${className}`}>
+        <div className={`relative flex items-center justify-center gap-2 ${className}`}>
             <div>{children}</div>
             <div className="flex gap-2">
                 <Tooltip content={hintContent} arrow={false} placement="top" className="bg-gray-600 px-2 border-1">
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index 2a006df..671ccf2 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement } from "react";
 
 interface LinkProps {
-    children: ReactElement | string;
+    children?: ReactElement | string;
     href: string;
 }
 
-
 export const Link: React.FC<LinkProps> = ({ children, href }) => {
-    return <a target="_blank" rel="noopener noreferrer" href={href}>
-        {children}
+    const content = children ?? href
+    return <a target="_blank" rel="noopener noreferrer" href={href} className="text-green-500 hover:text-green-600 transition-colors">
+        {content}
     </a>
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 8ed283d..b51a0e5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,17 +12,6 @@
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
 }
 
 body {
@@ -41,10 +30,4 @@ h1 {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 468048b..8932a42 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,17 +1,36 @@
 import { useNavigate } from "react-router-dom";
 import { SearchBar } from "../components/ui/searchbar";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { ReactElement } from "react";
+import { Link } from "../components/ui/link";
 
-const homePageHint = `
-Examples:
-- Search by name: [name:IC1445](/query?q=name:IC1445)
-- Search by PGC number: [pgc:112642](/query?q=pgc:112642)
-
-The search conditions can be concatenated with AND or OR operators. For example:
-- Search by name and PGC number: [name:IC1445 and pgc:112642](/query?q=name:IC1445%20AND%20pgc:112642)
-- Search by name or PGC number: [name:IC4445 or pgc:87422](/query?q=name:IC1445%20OR%20pgc:112642)
-`;
+const homePageHint: ReactElement = (
+  <div>
+    <div>Examples:</div>
+    <ul>
+      <li>
+        Search by name: <Link href="/query?q=name:IC1445">name:IC1445</Link>
+      </li>
+      <li>
+        Search by PGC number: <Link href="/query?q=pgc:112642">pgc:112642</Link>
+      </li>
+    </ul>
+    <div>
+      The search conditions can be concatenated with AND or OR operators. For example:
+    </div>
+    <ul>
+      <li>
+        Search by name and PGC number: <Link href="/query?q=name:IC1445%20AND%20pgc:112642">
+          name:IC1445 and pgc:112642
+        </Link>
+      </li>
+      <li>
+        Search by name or PGC number: <Link href="/query?q=name:IC1445%20OR%20pgc:112642">
+          name:IC4445 or pgc:87422
+        </Link>
+      </li>
+    </ul>
+  </div>
+);
 
 export const HomePage: React.FC = () => {
   const navigate = useNavigate();
@@ -23,10 +42,8 @@ export const HomePage: React.FC = () => {
   return (
     <div className="p-4">
       <SearchBar onSearch={handleSearch} logoSize="large" />
-      <div className="max-w-4xl mx-auto mt-8 prose prose-invert leading-none">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>
-          {homePageHint}
-        </ReactMarkdown>
+      <div className="max-w-4xl mx-auto mt-8 prose prose-invert leading-none prose-a:no-underline">
+        {homePageHint}
       </div>
     </div>
   );
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index f0eb6a2..39995c3 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -109,7 +109,7 @@ const renderTableDetails = (tableName: string, table: GetTableResponse) => {
         })
     });
 
-    return <div className="px-8">
+    return <div className="p-4">
         <CommonTable columns={infoColumns} data={infoValues} className="pb-5">
             <h2 className="text-2xl font-bold text-white mb-2">{table.description}</h2>
             <p className="text-gray-300 font-mono">{tableName}</p>

From d971b4b83b9a345c868415e29c31b805a0bbdd55 Mon Sep 17 00:00:00 2001
From: Artyom Zaporozhets <kraysent@gmail.com>
Date: Sat, 30 Aug 2025 13:42:58 +0300
Subject: [PATCH 4/4] move tooltip up

---
 src/components/ui/hint.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/hint.tsx b/src/components/ui/hint.tsx
index 5f30f4b..93331ac 100644
--- a/src/components/ui/hint.tsx
+++ b/src/components/ui/hint.tsx
@@ -10,10 +10,10 @@ interface HintProps {
 
 export const Hint: React.FC<HintProps> = ({ children, hintContent, className = "" }) => {
     return (
-        <div className={`relative flex items-center justify-center gap-2 ${className}`}>
+        <div className={`flex items-center justify-center gap-2 ${className}`}>
             <div>{children}</div>
-            <div className="flex gap-2">
-                <Tooltip content={hintContent} arrow={false} placement="top" className="bg-gray-600 px-2 border-1">
+            <div>
+                <Tooltip content={hintContent} arrow={false} placement="top" className="bg-gray-600 px-2 border-1 max-w-xl">
                     <MdHelpOutline />
                 </Tooltip>
             </div>