thomasabishop/eolas-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: rename templates and use full height for Main

Browse source
This commit is contained in:
Thomas Bishop 2025-08-06 18:45:55 +01:00
parent e0c8a4ec73
commit 561a2d24b3
7 changed files with 87 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.tsx
View file

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

4
src/pages/Settings.tsx
View file

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

81
src/pages/home.tsx
View file

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

6
src/templates/Main.tsx → src/templates/MainTemplate.tsx
View file

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

23
src/templates/Page.tsx
View file

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

24
src/templates/PageTemplate.tsx Normal file
View file

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

12
src/templates/Tag.tsx → src/templates/TagTemplate.tsx
View file

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