feat: plex sans font and tidy up

src/App.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
 
 code {
    font-family: "JetBrains Mono";

src/components/EntriesListSidebar.tsx

@@ -48,7 +48,7 @@ export default function EntriesListSidebar() {
 					<SidebarMenuButton asChild className="rounded-none">
 						<a href="#">
 							<FileText />
-                     <span>Entries</span>
+							<span className="font-medium">Entries</span>
 							<Badge className="ml-0" variant="secondary">
 								{entries?.count}
 							</Badge>

src/components/EntryReferences.tsx

@@ -1,24 +1,7 @@
-import { useQuery } from "@tanstack/react-query"
-import api from "../api/eolas-api"
 import { Link } from "react-router"
 import { Badge } from "./ui/badge"
 
-export default function EntryReferences({ entryTitle }) {
+export default function EntryReferences({ tags, backlinks, outlinks }) {
-	const { data: tags, isLoading: tagsLoading } = useQuery({
-		queryKey: [`tags_for_${entryTitle}`],
-		queryFn: () => api.get(`/tags/${entryTitle}`).then((res) => res.data),
-	})
-
-	const { data: backlinks, isLoading: backlinksLoading } = useQuery({
-		queryKey: [`backlinks_for_${entryTitle}`],
-		queryFn: () => api.get(`/entries/backlinks/${entryTitle}`).then((res) => res.data),
-	})
-
-	const { data: outlinks, isLoading: outlinksLoading } = useQuery({
-		queryKey: [`outlinks_for_${entryTitle}`],
-		queryFn: () => api.get(`/entries/outlinks/${entryTitle}`).then((res) => res.data),
-	})
-
    return (
       <div className="w-full md:flex flex-row justify-stretch gap-3">
          <div className="w-full">

src/components/NetworkGraph.tsx

@@ -14,7 +14,7 @@ export default function NetworkGraph({ data }) {
 		allowInvalidContainer: true,
 		defaultEdgeColor: "#a4a4a4",
 		labelColor: { color: "#0a0a0a" },
-      labelFont: "Inter",
+		labelFont: "IBM Plex Sans",
 		labelSize: 14,
 		labelWeight: "400",
 		labelRenderedSizeThreshold: nodeCount > 15 ? 10 : 8,

src/components/TagListSidebar.tsx

@@ -48,7 +48,7 @@ export default function TagListSidebar() {
 					<SidebarMenuButton asChild className="rounded-none">
 						<a href="#">
 							<Tags />
-                     <span>Tags</span>
+							<span className="font-medium">Tags</span>
 							<Badge className="ml-0" variant="secondary">
 								{tags?.count}
 							</Badge>

src/containers/EntryMetadata.tsx

@@ -1,10 +1,29 @@
+import { useQuery } from "@tanstack/react-query"
+import api from "../api/eolas-api"
 import EntryReferences from "@/components/EntryReferences"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Bookmark } from "lucide-react"
-import { History } from "lucide-react"
 import { Braces } from "lucide-react"
-
+import { Badge } from "@/components/ui/badge"
+import { convertDateFriendly } from "@/lib/utils"
 export default function EntryMetadata({ entryTitle, history, metadata }) {
+   const { data: tags } = useQuery({
+      queryKey: [`tags_for_${entryTitle}`],
+      queryFn: () => api.get(`/tags/${entryTitle}`).then((res) => res.data),
+   })
+
+   const { data: backlinks } = useQuery({
+      queryKey: [`backlinks_for_${entryTitle}`],
+      queryFn: () => api.get(`/entries/backlinks/${entryTitle}`).then((res) => res.data),
+   })
+
+   const { data: outlinks } = useQuery({
+      queryKey: [`outlinks_for_${entryTitle}`],
+      queryFn: () => api.get(`/entries/outlinks/${entryTitle}`).then((res) => res.data),
+   })
+
+   const sizeInKb = parseFloat((metadata?.fileSize / 1000).toFixed(1))
+
    return (
       <Tabs defaultValue="references" className="w-full h-full flex flex-col">
          <TabsList className="rounded-none shadow-none drop-shadow-none w-full bg-sidebar sticky top-0 z-10 flex-shrink-0">
@@ -16,14 +35,6 @@ export default function EntryMetadata({ entryTitle, history, metadata }) {
                References
             </TabsTrigger>
 
-				<TabsTrigger
-					className="pl-2 justify-start text-sm font-semibold rounded-none shadow-none data-[state=active]:border-1 data-[state=active]:border-border py-4"
-					value="history"
-				>
-					<History />
-					History
-				</TabsTrigger>
-
             <TabsTrigger
                className="pl-2 justify-start text-sm font-semibold rounded-none shadow-none data-[state=active]:border-1 data-[state=active]:border-border py-4"
                value="metadata"
@@ -35,16 +46,20 @@ export default function EntryMetadata({ entryTitle, history, metadata }) {
 
          <div className="flex-1 overflow-auto">
             <TabsContent value="references" className="px-2 lg:px-2 m-0">
-					<EntryReferences entryTitle={entryTitle} />
+               <EntryReferences tags={tags} backlinks={backlinks} outlinks={outlinks} />
             </TabsContent>
-				<TabsContent className="pl-4 lg:pl-6 m-0" value="history">
+            <TabsContent className="px-2 lg:px-2 m-0" value="metadata">
                <div className="w-full">
-						<p>Last modified: {history.lastModified}</p>
+                  <div className="flex mb-4 gap-2">
+                     <Badge variant="secondary">Last modified</Badge>
+                     <div className="text-sm">
+                        {convertDateFriendly(new Date(history.lastModified))}
+                     </div>
+                  </div>
+                  <div className="flex mb-2 gap-2">
+                     <Badge variant="secondary">Size on disk</Badge>
+                     <div className="text-sm">{sizeInKb} Kb</div>
                   </div>
-				</TabsContent>
-				<TabsContent className="pl-4 lg:pl-6 m-0" value="metadata">
-					<div className="w-full">
-						<p>Size on disk: {metadata.fileSize} B</p>
                </div>
             </TabsContent>
          </div>

src/index.css

@@ -122,7 +122,7 @@ html {
 	}
 
 	html {
-      font-family: "Inter", sans-serif;
+		font-family: "IBM Plex Sans", sans-serif;
 	}
 
 	body {

src/lib/utils.ts

@@ -4,3 +4,26 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
 }
+
+export const convertDateFriendly = (isoStamp) => {
+	const months = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December",
+	]
+
+	const unixSeconds = new Date(isoStamp)
+	const day = unixSeconds.getDate()
+	const month = months[unixSeconds.getMonth()]
+	const year = unixSeconds.getFullYear()
+	return `${day} ${month} ${year}`
+}