implemented identity, updated session, added 'workings' list

added paginated querying, added 'common'

app/client/main.tsx

@@ -1,7 +1,7 @@
 import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, from } from '@apollo/client';
 import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
 import { onError } from '@apollo/client/link/error';
-import { Skeleton } from '@chakra-ui/react';
+import { Box, Center, Spinner } from '@chakra-ui/react';
 import '@client/assets/styles/index.css';
 import '@client/assets/styles/nerd-fonts-icons.css';
 import { Provider as ChakraProvider } from '@client/components/ui/provider';
@@ -10,6 +10,7 @@ import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { StrictMode, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { AuthProvider, useRestAuth } from './hooks/auth';
+import { IdentityProvider, useIdentityQuery } from './hooks/identity';
 
 // TanStackRouter - Import the generated route tree
 import { Session } from '@generated/types';
@@ -59,7 +60,11 @@ function App() {
     return (
       <StrictMode>
         <ChakraProvider>
-          <Skeleton />
+          <Box pos="absolute" inset="0">
+            <Center h="full">
+              <Spinner color="colorPalette.500" />
+            </Center>
+          </Box>
         </ChakraProvider>
       </StrictMode>
     );
@@ -113,7 +118,7 @@ function App() {
         <ApolloProvider client={client}>
           <ChakraProvider>
             <Toaster />
-            <RouterProvider router={router} context={{ isAuthenticated: authHeaders != null }} />
+            <RouterProviderWrapper authHeaders={authHeaders} />
           </ChakraProvider>
         </ApolloProvider>
       </AuthProvider>
@@ -121,6 +126,28 @@ function App() {
   );
 }
 
+function RouterProviderWrapper({ authHeaders }: { authHeaders: Session | null }) {
+  const userId = authHeaders?.userId;
+  const { data, loading, refetch } = useIdentityQuery({ skip: userId == null });
+
+  if (loading)
+    return (
+      <Box pos="absolute" inset="0">
+        <Center h="full">
+          <Spinner color="colorPalette.500" />
+        </Center>
+      </Box>
+    );
+
+  return (
+    <IdentityProvider
+      value={userId != null && data != null ? { data: data.identity, refetch } : null}
+    >
+      <RouterProvider router={router} context={{ isAuthenticated: authHeaders != null }} />
+    </IdentityProvider>
+  );
+}
+
 const rootElement = document.getElementById('root')!;
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);