feat: Add empty state and move selection checkbox

Author: PRTTMPRPHT

desktop/src/views/Pro/ListWorkspaces.tsx

@@ -38,6 +38,8 @@ import { IWorkspaceStore } from "@/contexts/DevPodContext/workspaceStore"
 import { TWorkspaceStatusFilterState, WorkspaceSorter, WorkspaceStatusFilter } from "@/components"
 import { determineDisplayStatus } from "@/views/Pro/Workspace/WorkspaceStatus"
 
+import EmptyImage from "@/images/empty-default.svg"
+
 export function ListWorkspaces() {
   const { store } = useWorkspaceStore<IWorkspaceStore<string, ProWorkspaceInstance>>()
   const instances = useWorkspaces<ProWorkspaceInstance>()
@@ -171,7 +173,20 @@ export function ListWorkspaces() {
                 />
               </HStack>
             </HStack>
-            <List w="full" mb="4">
+            <List w="full" h={"full"} mb="4">
+              {!sortedWorkspaces?.length && (
+                <VStack
+                  w={"full"}
+                  h={"full"}
+                  justifyContent={"center"}
+                  alignItems={"center"}
+                  flexGrow={1}>
+                  <Image src={EmptyImage} />
+                  <Text fontWeight={"semibold"} fontSize={"sm"} color={"text.secondary"}>
+                    No items found
+                  </Text>
+                </VStack>
+              )}
               {sortedWorkspaces?.map((instance) => (
                 <ListItem key={instance.id}>
                   <WorkspaceInstanceCard

desktop/src/views/Pro/Workspace/WorkspaceCardHeader.tsx

@@ -17,10 +17,12 @@ import { TIDE, TIDEs, TWorkspaceSource } from "@/types"
 import { useGroupIDEs, useIDEs } from "@/useIDEs"
 import { ChevronDownIcon } from "@chakra-ui/icons"
 import {
+  Box,
   Button,
   ButtonGroup,
-  HStack,
+  Checkbox,
   Heading,
+  HStack,
   IconButton,
   Menu,
   MenuButton,
@@ -30,10 +32,9 @@ import {
   Text,
   TextProps,
   VStack,
-  Checkbox,
-  Box,
 } from "@chakra-ui/react"
-import React, { ReactNode, createContext, useContext, useCallback } from "react"
+import React, { createContext, ReactNode, useCallback, useContext } from "react"
+
 type TWorkspaceCardHeaderContext = ProWorkspaceInstance
 const WorkspaceCardHeaderContext = createContext<TWorkspaceCardHeaderContext>(null!)
 
@@ -59,16 +60,11 @@ export function WorkspaceCardHeader({
   return (
     <HStack justify="space-between" align="start">
       <VStack align="start" spacing={0}>
-        {showSource && (
-          <Text color="gray.500">
-            {source?.gitRepository || source?.image || source?.localFolder}
-          </Text>
-        )}
         <HStack alignItems={"center"}>
           {showSelection && (
             <Box mr={"1"} onClick={(e) => e.stopPropagation()}>
               <Checkbox
-                mt={"1.5"}
+                mt={"1"}
                 isChecked={isSelected}
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => {
@@ -77,6 +73,13 @@ export function WorkspaceCardHeader({
               />
             </Box>
           )}
+          {showSource && (
+            <Text color="gray.500">
+              {source?.gitRepository || source?.image || source?.localFolder}
+            </Text>
+          )}
+        </HStack>
+        <HStack alignItems={"center"}>
           <Heading size="md" my="1">
             <Text
               fontWeight="bold"