refactor: layout components

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/App.tsx

@@ -7,9 +7,9 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { BaseStyles, Box, ThemeProvider } from '@primer/react';
+import { BaseStyles, ThemeProvider } from '@primer/react';
 
-import { Sidebar } from './components/Sidebar';
+import { AppLayout } from './components/layout/AppLayout';
 import { AppContext, AppProvider } from './context/App';
 import { AccountsRoute } from './routes/Accounts';
 import { FiltersRoute } from './routes/Filters';
@@ -38,8 +38,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <Box className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
-              <Sidebar />
+            <AppLayout>
               <Routes>
                 <Route
                   path="/"
@@ -83,7 +82,7 @@ export const App = () => {
                   element={<LoginWithOAuthAppRoute />}
                 />
               </Routes>
-            </Box>
+            </AppLayout>
           </Router>
         </AppProvider>
       </BaseStyles>

src/renderer/components/filters/ReasonFilter.tsx

@@ -17,8 +17,9 @@ export const ReasonFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-reasons" className="mb-3">
+    <fieldset id="filter-reasons">
       <Title icon={NoteIcon}>Reason</Title>
+
       <Stack direction="vertical" gap="condensed">
         {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
           const reasonDetails = getReasonDetails(reason);

src/renderer/components/filters/StateFilter.tsx

@@ -19,8 +19,8 @@ export const StateFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-state" className="mb-3">
-      <Stack direction="horizontal" gap="condensed" align="baseline">
+    <fieldset id="filter-state">
+      <Stack direction="horizontal" gap="condensed">
         <Title icon={IssueOpenedIcon}>State</Title>
         <Tooltip
           name="tooltip-filter-state"

src/renderer/components/filters/SubjectTypeFilter.tsx

@@ -19,7 +19,7 @@ export const SubjectTypeFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-subject-type" className="mb-3">
+    <fieldset id="filter-subject-type">
       <Stack direction="horizontal" gap="condensed" align="baseline">
         <Title icon={BellIcon}>Type</Title>
         <Tooltip

src/renderer/components/filters/UserHandleFilter.tsx

@@ -119,7 +119,7 @@ export const UserHandleFilter: FC = () => {
   };
 
   return (
-    <fieldset id="filter-user-handles" className="mb-3">
+    <fieldset id="filter-user-handles">
       <Stack direction="horizontal" gap="condensed" align="baseline">
         <Title icon={MentionIcon}>Handles</Title>
         <Tooltip

src/renderer/components/filters/UserTypeFilter.tsx

@@ -25,7 +25,7 @@ export const UserTypeFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-user-types" className="mb-3">
+    <fieldset id="filter-user-types">
       <Stack direction="horizontal" gap="condensed" align="baseline">
         <Title icon={FeedPersonIcon}>User Type</Title>
         <Tooltip

src/renderer/components/layout/AppLayout.tsx

@@ -0,0 +1,22 @@
+import { Box } from '@primer/react';
+import type { FC, ReactNode } from 'react';
+
+import { Sidebar } from '../Sidebar';
+
+interface AppLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * AppLayout is the main container for the application.
+ * It handles the basic layout with sidebar and content area.
+ */
+export const AppLayout: FC<AppLayoutProps> = ({ children }) => {
+  return (
+    <Box className="flex flex-col max-h-screen bg-gitify-background">
+      <Sidebar />
+      {/* Content area with left padding to make space for the sidebar */}
+      <Box className="flex-1 pl-sidebar">{children}</Box>
+    </Box>
+  );
+};

src/renderer/components/layout/Contents.tsx

@@ -1,14 +1,20 @@
 import { Box } from '@primer/react';
 import type { FC, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
 
 interface IContents {
   children: ReactNode;
+  padding?: boolean;
 }
 
-export const Contents: FC<IContents> = (props: IContents) => {
+/**
+ * Contents component holds the main content of a page.
+ * It provides proper padding and handles scrolling.
+ */
+export const Contents: FC<IContents> = ({ children, padding = true }) => {
   return (
-    <Box className="grow overflow-x-auto px-8 pb-2 mb-12 ">
-      {props.children}
+    <Box className={cn('grow overflow-y-auto mb-4', padding && 'px-8')}>
+      {children}
     </Box>
   );
 };

src/renderer/components/layout/Page.tsx

@@ -1,15 +1,20 @@
 import { Box } from '@primer/react';
 import type { FC, ReactNode } from 'react';
 
-interface IPage {
+interface PageProps {
   children: ReactNode;
   id: string;
 }
 
-export const Page: FC<IPage> = (props: IPage) => {
+/**
+ * Page component represents a single page view.
+ * It creates a column layout for header, content, and footer.
+ * The height is 100% to fill the parent container.
+ */
+export const Page: FC<PageProps> = ({ children, id }) => {
   return (
-    <Box className="flex flex-col h-screen" data-testid={props.id}>
-      {props.children}
+    <Box className="flex flex-col h-screen" data-testid={id}>
+      {children}
     </Box>
   );
 };

src/renderer/components/primitives/Footer.tsx

@@ -1,16 +1,20 @@
 import { Box, Stack } from '@primer/react';
 import type { FC, ReactNode } from 'react';
 
-interface IFooter {
+interface FooterProps {
   children: ReactNode;
-  justify: 'end' | 'space-between';
+  justify: 'end' | 'space-between' | 'start' | 'center';
 }
 
-export const Footer: FC<IFooter> = (props: IFooter) => {
+/**
+ * Footer component displays actions at the bottom of the page.
+ * It is fixed to the viewport bottom.
+ */
+export const Footer: FC<FooterProps> = ({ children, justify }) => {
   return (
-    <Box className="fixed bottom-0 left-sidebar right-0 bg-gitify-footer">
-      <Stack direction="horizontal" justify={props.justify} padding="condensed">
-        {props.children}
+    <Box className="left-sidebar bg-gitify-footer">
+      <Stack direction="horizontal" justify={justify} padding="condensed">
+        {children}
       </Stack>
     </Box>
   );