Add writing session page - not functional yet

app/components/editor/main-menu.tsx

@@ -34,6 +34,7 @@ import {
 	DropdownMenuSubTrigger,
 	DropdownMenuTrigger,
 } from '~/components/ui/dropdown-menu'
+import { ROUTES } from '~/lib/constants'
 import { allShortcuts } from '~/lib/hooks/useKeyboardShortcuts'
 import { EditorShortcuts } from '~/lib/types'
 import { getShortcutWithModifiers } from '~/lib/utils'
@@ -147,12 +148,17 @@ const MainMenu = ({
 								{/*		<span>Resume Previous Session</span>*/}
 								{/*	</span>*/}
 								{/*</DropdownMenuItem>*/}
-								{/*<DropdownMenuItem>*/}
-								{/*	<span className='w-full h-full flex items-center justify-start cursor-pointer'>*/}
-								{/*		<ListIcon className='mr-2 w-4 h-4' />*/}
-								{/*		<span>View All Sessions</span>*/}
-								{/*	</span>*/}
-								{/*</DropdownMenuItem>*/}
+								<DropdownMenuItem>
+									<Link
+										prefetch='intent'
+										to={ROUTES.VIEW.WRITING_SESSIONS}
+									>
+										<span className='w-full h-full flex items-center justify-start cursor-pointer'>
+											<ListIcon className='mr-2 w-4 h-4' />
+											<span>View All Sessions</span>
+										</span>
+									</Link>
+								</DropdownMenuItem>
 							</DropdownMenuSubContent>
 						</DropdownMenuPortal>
 					</DropdownMenuSub>

app/lib/constants.ts

@@ -108,4 +108,8 @@ export const ROUTES = {
 		BASE: '/editor',
 		NEW_POST: '/editor/posts',
 	},
+	VIEW: {
+		POSTS: '/posts',
+		WRITING_SESSIONS: '/sessions',
+	},
 }

app/routes/sessions._index.tsx

@@ -0,0 +1,64 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { formatDistanceToNow } from 'date-fns'
+import { DataTable } from '~/components/common/data-table'
+import { arls } from '~/services/arls'
+
+export const clientLoader = async () => {
+	const sessions = await arls.writingSessions.findMany()
+	console.log(sessions)
+
+	return {}
+}
+
+interface WritingSession {
+	content: string
+	duration: number
+	effort: string
+}
+
+const columns: ColumnDef<WritingSession>[] = [
+	{
+		accessorKey: 'content',
+		cell: ({ row }) => (
+			<div
+				className='w-[360px] text-left truncate'
+				title={row.original?.content || 'Untitled'}
+			>
+				{row.original?.content || 'Untitled'}
+			</div>
+		),
+		header: 'Content Title',
+	},
+	{
+		accessorKey: 'effort',
+		cell: ({ row }) => (
+			<div className='w-[360px] text-left truncate'>
+				{row.original?.effort}
+			</div>
+		),
+		header: 'Effort',
+	},
+	{
+		accessorKey: 'duration',
+		cell: ({ row }) => (
+			<span className='px-4 text-center'>
+				{formatDistanceToNow(new Date(row.original.duration), {
+					addSuffix: true,
+				})}
+			</span>
+		),
+		header: 'Duration',
+	},
+]
+const WritingSessionsHome = () => {
+	return (
+		<>
+			<div className='prose dark:prose-invert max-w-none flex w-full flex items-center justify-between text-white'>
+				<h1 className='mb-4 text-center'>Writing Sessions</h1>
+			</div>
+			<DataTable columns={columns} data={[]} search={{ show: false }} />
+		</>
+	)
+}
+
+export default WritingSessionsHome

app/routes/sessions.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from '@remix-run/react'
+
+import ViewLayout from '~/layouts/view'
+
+const WritingSessionsRoot = () => {
+	return (
+		<ViewLayout>
+			<Outlet />
+		</ViewLayout>
+	)
+}
+
+export default WritingSessionsRoot