sanity-plugin-workspace-home 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workspace-home",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A home screen for your multi-workspace Sanity Studio",
   "keywords": [
     "sanity",

package/src/components/WorkspaceHome.tsx

@@ -1,16 +1,42 @@
 import {useActiveWorkspace, useWorkspaces} from 'sanity'
-import {Button, Flex, Container, Stack, Heading, Card} from '@sanity/ui'
+import {Box, Text, TextInput, Flex, Container, Stack, Heading, Card} from '@sanity/ui'
+import React, {useRef, useEffect, useState, useMemo, useCallback} from 'react'
 
 import WorkspacePreview from './WorkspacePreview'
-import {useEffect} from 'react'
 
 export default function WorkspaceHome() {
-  const [home, ...workspaces] = useWorkspaces()
+  const [, ...workspaces] = useWorkspaces()
   const {setActiveWorkspace} = useActiveWorkspace()
 
+  // Handle search query
+  const [query, setQuery] = useState('')
+  const searchInput = useRef(null)
+  const handleQuery = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setQuery(e.target.value)
+    },
+    [setQuery]
+  )
+
+  // filter workspaces if name, dataset or title matches query
+  const filteredWorkspaces = useMemo(() => {
+    return workspaces.filter((workspace) => {
+      return (
+        workspace.name.toLowerCase().includes(query.toLowerCase()) ||
+        workspace.dataset.toLowerCase().includes(query.toLowerCase()) ||
+        workspace.title.toLowerCase().includes(query.toLowerCase())
+      )
+    })
+  }, [workspaces, query])
+
   // Listen to keypress of workspace index
   useEffect(() => {
     const handleKeypress = (event: KeyboardEvent) => {
+      // Ignore if search query exists or search input is focused
+      if (query || searchInput.current === document.activeElement) {
+        return
+      }
+
       const index = parseInt(event.key, 10) - 1
       if (index >= 0 && index < workspaces.length) {
         setActiveWorkspace(workspaces[index].name)
@@ -22,7 +48,7 @@ export default function WorkspaceHome() {
     return () => {
       window.removeEventListener('keypress', handleKeypress)
     }
-  }, [workspaces, setActiveWorkspace])
+  }, [query, workspaces, setActiveWorkspace])
 
   return (
     <Card tone="transparent" height="fill">
@@ -30,9 +56,26 @@ export default function WorkspaceHome() {
         <Container>
           <Stack space={4}>
             <Heading>Workspaces</Heading>
-            {workspaces.map((workspace, index) => (
-              <WorkspacePreview key={workspace.name} workspace={workspace} index={index} />
-            ))}
+            <Card padding={[2, 3, 4, 4]} radius={3} shadow={2}>
+              <Stack space={3}>
+                <Stack space={2}>
+                  <Text size={1} weight="semibold">
+                    Search
+                  </Text>
+                  <TextInput ref={searchInput} value={query} onChange={handleQuery} />
+                </Stack>
+                <Box>
+                  {filteredWorkspaces.map((workspace, index) => (
+                    <WorkspacePreview
+                      key={workspace.name}
+                      workspace={workspace}
+                      index={index}
+                      query={query}
+                    />
+                  ))}
+                </Box>
+              </Stack>
+            </Card>
           </Stack>
         </Container>
       </Flex>

package/src/components/WorkspacePreview.tsx

@@ -1,5 +1,5 @@
-import {Button, Hotkeys, Stack, Box, Flex, Heading, Card, Text} from '@sanity/ui'
-// import {StarIcon} from '@sanity/icons'
+import {Grid, Button, Hotkeys, Stack, Box, Flex, Card, Text} from '@sanity/ui'
+import {DatabaseIcon} from '@sanity/icons'
 import React, {createElement, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {useActiveWorkspace, WorkspaceSummary} from 'sanity'
@@ -24,10 +24,13 @@ export const MediaCard = styled(Card)`
 export type WorkspacePreviewProps = {
   workspace: WorkspaceSummary
   index: number
+  query: string
 }
 
 export default function WorkspacePreview(props: WorkspacePreviewProps) {
-  const {icon, title, name, subtitle} = props.workspace
+  const {workspace, index, query} = props
+  const {icon, title, name, subtitle, dataset} = workspace
+
   const {setActiveWorkspace} = useActiveWorkspace()
   const iconComponent = useMemo(() => createIcon(icon), [icon])
 
@@ -42,25 +45,45 @@ export default function WorkspacePreview(props: WorkspacePreviewProps) {
   //     localStorage.setItem('favoriteWorkspace', name)
   //   }, [name])
 
+  const hotKeyIndex = index + 1 === 10 ? 0 : index + 1
+
   return (
-    <Card shadow={1} radius={2}>
-      <Flex align="center" gap={[2, 3, 4, 4]} paddingX={[2, 3, 4, 4]}>
-        <Hotkeys keys={[String(props.index + 1)]} padding={2} />
-        <Box flex={1}>
+    <Card borderTop={Boolean(index)} tone="default">
+      <Grid columns={5} gap={[2, 3, 4, 4]} paddingY={1}>
+        <Card columnStart={1} columnEnd={3}>
           <Stack>
             <Button mode="bleed" tone="default" onClick={() => setActiveWorkspace(name)}>
               <Flex align="center" gap={[2, 3, 4, 4]}>
                 {iconComponent ? <MediaCard>{createIcon(iconComponent)}</MediaCard> : null}
                 <Box flex={1}>
                   <Stack space={[1, 2, 3, 3]}>
-                    <Heading>{title || name}</Heading>
+                    <Text size={3} weight="semibold">
+                      {title || name}
+                    </Text>
                     {subtitle ? <Text muted>{subtitle}</Text> : null}
                   </Stack>
                 </Box>
               </Flex>
             </Button>
           </Stack>
-        </Box>
+        </Card>
+        <Card columnStart={3} columnEnd={5}>
+          <Flex height="fill" align="center" gap={2}>
+            <Text size={1} weight="semibold">
+              <DatabaseIcon />
+            </Text>
+            <Text size={1} weight="semibold">
+              {dataset}
+            </Text>
+          </Flex>
+        </Card>
+        <Card paddingRight={[2, 3, 3, 3]}>
+          <Flex height="fill" align="center" justify="flex-end">
+            {!query && hotKeyIndex < 10 ? (
+              <Hotkeys keys={[String(hotKeyIndex)]} padding={2} />
+            ) : null}
+          </Flex>
+        </Card>
         {/* <Button
           mode={isFavourite ? 'default' : 'bleed'}
           tone={isFavourite ? 'primary' : 'default'}
@@ -71,7 +94,7 @@ export default function WorkspacePreview(props: WorkspacePreviewProps) {
             setFavoriteWorkspace()
           }}
         /> */}
-      </Flex>
+      </Grid>
     </Card>
   )
 }