refactor: rename templates and use full height for Main

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 TagTemplate from "./templates/TagTemplate"
-import Entry from "./templates/Entry"
+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="/entries/:entry" element={<EntryTemplate />} />
-               <Route path="/tags/:tag" element={<Tag />} />
+               <Route path="/tags/:tag" element={<TagTemplate />} />
             </Routes>
             <ReactQueryDevtools initialIsOpen={false} />
          </QueryClientProvider>

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 />} />
 }

src/pages/home.tsx

@@ -1,4 +1,4 @@
-import Main from "@/templates/Main"
+import MainTemplate from "@/templates/MainTemplate"
 import RecentEdits from "@/containers/RecentEdits"
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
 
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 export default function Home() {
    return (
       <>
-			<Main pageTitle="Home">
+         <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">
@@ -16,6 +16,8 @@ export default function Home() {
                         </div>
                         <div className="p-4 lg:p-6">
                            <p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
+                              {/*
+
 										<HoverCard>
 											<HoverCardTrigger asChild>
 												<Button
@@ -38,7 +40,9 @@ export default function Home() {
 												</div>
 											</HoverCardContent>
 										</HoverCard>
-										is{" "}
+									
+										*/}
+                              Eólas is{" "}
                               <a
                                  className="text-foreground underline-offset-3 font-medium underline hover:text-gray-700 dark:hover:text-green-300"
                                  href="#"
@@ -46,7 +50,14 @@ export default function Home() {
                                  my
                               </a>{" "}
                               technical knowledge management system, or "second-brain", comprising
-										notes from the study of software engineering and computer science.
+                              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>
@@ -79,7 +90,7 @@ I'm
                   </div>
                </div>
             </div>
-			</Main>
+         </MainTemplate>
       </>
    )
 }

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>

src/templates/Page.tsx

@@ -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>
-	)
-}

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>
+	)
+}

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>
+      }
       />
    )
 }