From 561a2d24b376ea178e37694eeb14b1702c478451 Mon Sep 17 00:00:00 2001
From: thomasabishop <thomasabishop@tuta.com>
Date: Wed, 6 Aug 2025 18:45:55 +0100
Subject: [PATCH] refactor: rename templates and use full height for Main

---
 src/App.tsx                                  |  8 +-
 src/pages/Settings.tsx                       |  4 +-
 src/pages/home.tsx                           | 81 +++++++++++---------
 src/templates/{Main.tsx => MainTemplate.tsx} |  6 +-
 src/templates/Page.tsx                       | 23 ------
 src/templates/PageTemplate.tsx               | 24 ++++++
 src/templates/{Tag.tsx => TagTemplate.tsx}   | 12 ++-
 7 files changed, 87 insertions(+), 71 deletions(-)
 rename src/templates/{Main.tsx => MainTemplate.tsx} (71%)
 delete mode 100644 src/templates/Page.tsx
 create mode 100644 src/templates/PageTemplate.tsx
 rename src/templates/{Tag.tsx => TagTemplate.tsx} (86%)

diff --git a/src/App.tsx b/src/App.tsx
index 7ff7e1b..632270e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,8 +3,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import Home from "@/pages/home"
 import "./App.css"
-import Tag from "./templates/Tag"
-import Entry from "./templates/Entry"
+import TagTemplate from "./templates/TagTemplate"
+import EntryTemplate from "./templates/EntryTemplate"
 import Settings from "./pages/Settings"
 
 const queryClient = new QueryClient({
@@ -24,8 +24,8 @@ export default function App() {
             <Routes>
                <Route index element={<Home />} />
                <Route path="/settings" element={<Settings />} />
-               <Route path="/entries/:entry" element={<Entry />} />
-               <Route path="/tags/:tag" element={<Tag />} />
+               <Route path="/entries/:entry" element={<EntryTemplate />} />
+               <Route path="/tags/:tag" element={<TagTemplate />} />
             </Routes>
             <ReactQueryDevtools initialIsOpen={false} />
          </QueryClientProvider>
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index f1cd341..2674fe7 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,6 +1,6 @@
-import Page from "@/templates/Page"
+import PageTemplate from "@/templates/PageTemplate"
 import { default as SettingsContainer } from "@/containers/Settings"
 
 export default function Settings() {
-   return <Page pageTitle="Settings" pageBody={<SettingsContainer />} />
+   return <PageTemplate pageTitle="Settings" pageBody={<SettingsContainer />} />
 }
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 3314108..aef46f3 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,21 +1,23 @@
-import Main from "@/templates/Main"
+import MainTemplate from "@/templates/MainTemplate"
 import RecentEdits from "@/containers/RecentEdits"
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
 
 import { Button } from "@/components/ui/button"
 export default function Home() {
-	return (
-		<>
-			<Main pageTitle="Home">
-				<div className="flex-1 flex flex-col overflow-auto">
-					<div className="@container/main flex flex-col">
-						<div className="p-4 lg:p-6 flex flex-1">
-							<div className="border w-full">
-								<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
-									<h2 className="scroll-m-20 font-semibold">Welcome</h2>
-								</div>
-								<div className="p-4 lg:p-6">
-									<p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
+   return (
+      <>
+         <MainTemplate pageTitle="Home">
+            <div className="flex-1 flex flex-col overflow-auto">
+               <div className="@container/main flex flex-col">
+                  <div className="p-4 lg:p-6 flex flex-1">
+                     <div className="border w-full">
+                        <div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
+                           <h2 className="scroll-m-20 font-semibold">Welcome</h2>
+                        </div>
+                        <div className="p-4 lg:p-6">
+                           <p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
+                              {/*
+
 										<HoverCard>
 											<HoverCardTrigger asChild>
 												<Button
@@ -38,21 +40,30 @@ export default function Home() {
 												</div>
 											</HoverCardContent>
 										</HoverCard>
-										is{" "}
-										<a
-											className="text-foreground underline-offset-3 font-medium underline hover:text-gray-700 dark:hover:text-green-300"
-											href="#"
-										>
-											my
-										</a>{" "}
-										technical knowledge management system, or "second-brain", comprising
-										notes from the study of software engineering and computer science.
-									</p>
-								</div>
-							</div>
-						</div>
+									
+										*/}
+                              Eólas is{" "}
+                              <a
+                                 className="text-foreground underline-offset-3 font-medium underline hover:text-gray-700 dark:hover:text-green-300"
+                                 href="#"
+                              >
+                                 my
+                              </a>{" "}
+                              technical knowledge management system, or "second-brain", comprising
+                              notes from the study of software engineering and computer
+                              science.{" "}
+                           </p>
 
-						{/*
+                           <p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
+                              🇮🇪 The word <i>eólas</i> (pronounced "aw-lus") is Irish for
+                              "knowledge", especially knowledge gained through practical experience.
+                              🇮🇪
+                           </p>
+                        </div>
+                     </div>
+                  </div>
+
+                  {/*
 									
 									<div className="bg-muted rounded-none p-3 font-medium text-sm text-muted-foreground my-4 mb-6">
 										<p className="">
@@ -74,12 +85,12 @@ I'm
 
 
 									*/}
-						<div className="px-4 lg:px-6 flex-1 flex">
-							<RecentEdits />
-						</div>
-					</div>
-				</div>
-			</Main>
-		</>
-	)
+                  <div className="px-4 lg:px-6 flex-1 flex">
+                     <RecentEdits />
+                  </div>
+               </div>
+            </div>
+         </MainTemplate>
+      </>
+   )
 }
diff --git a/src/templates/Main.tsx b/src/templates/MainTemplate.tsx
similarity index 71%
rename from src/templates/Main.tsx
rename to src/templates/MainTemplate.tsx
index 6919fbf..46a4f7f 100644
--- a/src/templates/Main.tsx
+++ b/src/templates/MainTemplate.tsx
@@ -3,14 +3,14 @@ import { AppSidebar } from "@/containers/AppSidebar"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 import { ThemeProvider } from "@/context/ThemeProvider"
 
-export default function Main({ children, pageTitle }) {
+export default function MainTemplate({ children, pageTitle }) {
    return (
       <ThemeProvider storageKey="app-theme">
          <SidebarProvider variant="inset">
             <AppSidebar />
-            <SidebarInset>
+            <SidebarInset className="flex flex-col h-screen">
                <AppHeader pageTitle={pageTitle} />
-               <main>{children}</main>
+               <main className="flex-1 overflow-hidden">{children}</main>
             </SidebarInset>
          </SidebarProvider>
       </ThemeProvider>
diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx
deleted file mode 100644
index f084b6a..0000000
--- a/src/templates/Page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Main from "./Main"
-
-export default function Page({ pageTitle = null, pageBody = null, titleComponent = null }) {
-	return (
-		<Main>
-			<div className="flex-1 flex flex-col overflow-auto">
-				<div className="@container/main flex flex-col">
-					<div className="flex flex-1">
-						<div className="border-none w-full">
-							<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
-								<h2 className="scroll-m-20 font-semibold">
-									{titleComponent ? titleComponent : <span>{pageTitle}</span>}
-								</h2>
-							</div>
-
-							<div className="p-4 lg:p-6">{pageBody}</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</Main>
-	)
-}
diff --git a/src/templates/PageTemplate.tsx b/src/templates/PageTemplate.tsx
new file mode 100644
index 0000000..216c4c3
--- /dev/null
+++ b/src/templates/PageTemplate.tsx
@@ -0,0 +1,24 @@
+import MainTemplate from "./MainTemplate"
+
+
+export default function Page({ pageTitle = null, pageBody = null, titleComponent = null }) {
+	return (
+		<MainTemplate>
+			<div className="flex flex-col h-full">
+				<div className="@container/main flex flex-col flex-1">
+					<div className="flex flex-col flex-1">
+						<div className="border-none flex flex-col flex-1">
+							<div className="border-b py-2 px-4 lg:px-6 bg-sidebar flex-shrink-0">
+								<h2 className="scroll-m-20 font-semibold">
+									{titleComponent ? titleComponent : <span>{pageTitle}</span>}
+								</h2>
+							</div>
+
+							<div className="flex-1 overflow-auto">{pageBody}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</MainTemplate>
+	)
+}
\ No newline at end of file
diff --git a/src/templates/Tag.tsx b/src/templates/TagTemplate.tsx
similarity index 86%
rename from src/templates/Tag.tsx
rename to src/templates/TagTemplate.tsx
index 3a6c16e..052622d 100644
--- a/src/templates/Tag.tsx
+++ b/src/templates/TagTemplate.tsx
@@ -1,5 +1,5 @@
 import { useParams } from "react-router"
-import Page from "./Page"
+import PageTemplate from "./PageTemplate"
 import { useQuery } from "@tanstack/react-query"
 import api from "@/api/eolas-api"
 import { DataTable } from "@/components/DataTable"
@@ -34,7 +34,7 @@ const columns = [
    },
 ]
 
-export default function Tag() {
+export default function TagTemplate() {
    const { tag } = useParams()
 
    const { data, isLoading } = useQuery({
@@ -43,7 +43,7 @@ export default function Tag() {
    })
 
    return (
-      <Page
+      <PageTemplate
          titleComponent={
             <div className="flex">
                <span className="mr-2 text-muted-foreground">Entries tagged:</span>
@@ -53,7 +53,11 @@ export default function Tag() {
                </Badge>
             </div>
          }
-         pageBody={<DataTable columns={columns} data={data?.data || []} loading={isLoading} />}
+         pageBody={
+         <div className="p-4 lg:p-6">
+         <DataTable columns={columns} data={data?.data || []} loading={isLoading} />
+         </div>
+      }
       />
    )
 }