add virtual groups for recent and frequent

client/src/graphql/queries.ts

@@ -81,3 +81,43 @@ export const GET_USERS = gql`
     }
   }
 `;
+
+export const GET_RECENT_TASKS = gql`
+  query GetRecentTasks {
+    recentTasks {
+      id
+      name
+      group_id
+      print_count
+      last_printed_at
+      steps {
+        id
+        name
+        instructions
+        order
+        print_count
+        last_printed_at
+      }
+    }
+  }
+`;
+
+export const GET_FREQUENT_TASKS = gql`
+  query GetFrequentTasks {
+    frequentTasks {
+      id
+      name
+      group_id
+      print_count
+      last_printed_at
+      steps {
+        id
+        name
+        instructions
+        order
+        print_count
+        last_printed_at
+      }
+    }
+  }
+`;

client/src/hooks/useTaskData.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
-import { GET_GROUPS, GET_TASKS, GET_STEP } from '../graphql/queries';
+import { GET_GROUPS, GET_TASKS, GET_STEP, GET_RECENT_TASKS, GET_FREQUENT_TASKS } from '../graphql/queries';
 import { PRINT_TASK, PRINT_STEP, CREATE_NOTE, CREATE_GROUP, CREATE_TASK, CREATE_STEP } from '../graphql/mutations';
 import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';
 import { doesExist, isArray } from '../utils/typeGuards';
@@ -120,6 +120,8 @@ export function useTaskData() {
     variables: { id: selectedStep?.id },
     skip: !selectedStep?.id,
   });
+  const { data: recentTasksData, loading: recentTasksLoading } = useQuery(GET_RECENT_TASKS);
+  const { data: frequentTasksData, loading: frequentTasksLoading } = useQuery(GET_FREQUENT_TASKS);
 
   const [printTask] = useMutation(PRINT_TASK);
   const [printStep] = useMutation(PRINT_STEP);
@@ -224,6 +226,35 @@ export function useTaskData() {
     ? groupsData.groups.map((group: GraphQLGroup) => toGroupWithTasks(group)).filter(doesExist)
     : [];
 
+  const recentTasks = isArray(recentTasksData?.recentTasks)
+    ? recentTasksData.recentTasks.map((task: GraphQLTask) => toTaskWithSteps(task)).filter(doesExist)
+    : [];
+
+  const frequentTasks = isArray(frequentTasksData?.frequentTasks)
+    ? frequentTasksData.frequentTasks.map((task: GraphQLTask) => toTaskWithSteps(task)).filter(doesExist)
+    : [];
+
+  // Create virtual groups for recent and frequent tasks
+  const virtualGroups: GroupWithTasks[] = [
+    {
+      id: -1, // Use negative IDs for virtual groups
+      name: 'Recent Tasks',
+      created_at: new Date(),
+      updated_at: new Date(),
+      tasks: recentTasks,
+    },
+    {
+      id: -2,
+      name: 'Frequent Tasks',
+      created_at: new Date(),
+      updated_at: new Date(),
+      tasks: frequentTasks,
+    },
+  ];
+
+  // Combine virtual groups with regular groups
+  const allGroups = [...virtualGroups, ...groups];
+
   const tasks = isArray(tasksData?.tasks)
     ? tasksData.tasks.map((task: GraphQLTask) => toTaskWithSteps(task)).filter(doesExist)
     : [];
@@ -231,10 +262,10 @@ export function useTaskData() {
   const step = stepData?.step ? toStepWithNotes(stepData.step) : undefined;
 
   return {
-    groups,
+    groups: allGroups,
     tasks,
     step,
-    loading: groupsLoading || tasksLoading || stepLoading,
+    loading: groupsLoading || tasksLoading || stepLoading || recentTasksLoading || frequentTasksLoading,
     selectedGroup,
     selectedTask,
     selectedStep,

client/src/layouts/DesktopLayout.tsx

@@ -29,6 +29,8 @@ export function DesktopLayout({
           <Typography variant="h6">Groups</Typography>
           <CreateButtons type="group" />
         </Box>
+
+        {/* Groups List */}
         {groups.map((group) => (
           <Box
             key={group.id}
@@ -50,7 +52,7 @@ export function DesktopLayout({
         <Box sx={{ width: 250, borderRight: 1, borderColor: 'divider', p: 2 }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
             <Typography variant="h6">Tasks</Typography>
-            <CreateButtons type="task" parentId={String(selectedGroup.id)} />
+            {selectedGroup.id > 0 && <CreateButtons type="task" parentId={String(selectedGroup.id)} />}
           </Box>
           {selectedGroup.tasks.map((task) => (
             <Box

client/src/layouts/MobileLayout.tsx

@@ -8,11 +8,11 @@ function isGroupView(selectedGroup?: GroupWithTasks) {
 }
 
 function isTaskView(selectedGroup?: GroupWithTasks, selectedTask?: TaskWithSteps) {
-  return !!selectedGroup && !selectedTask;
+  return selectedGroup && !selectedTask;
 }
 
 function isStepView(selectedTask?: TaskWithSteps, selectedStep?: StepWithNotes) {
-  return !!selectedTask && !selectedStep;
+  return selectedTask && !selectedStep;
 }
 
 export function MobileLayout({
@@ -76,12 +76,16 @@ export function MobileLayout({
               <Typography variant="h6">Groups</Typography>
               <CreateButtons type="group" />
             </Box>
+
+            {/* Groups List */}
             {groupList.map((group) => (
               <Box
                 key={group.id}
                 sx={{
                   p: 2,
                   cursor: 'pointer',
+                  bgcolor: selectedGroup?.id === group.id ? 'action.selected' : 'transparent',
+                  '&:hover': { bgcolor: 'action.hover' },
                 }}
                 onClick={() => onGroupSelect(group)}
               >
@@ -95,7 +99,7 @@ export function MobileLayout({
           <>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
               <Typography variant="h6">Tasks</Typography>
-              <CreateButtons type="task" parentId={String(selectedGroup?.id)} />
+              {selectedGroup.id > 0 && <CreateButtons type="task" parentId={String(selectedGroup.id)} />}
             </Box>
             <Box>
               {taskList.map((task) => (