opengovsg
diff --git a/‎apps/studio/src/components/ErrorBoundary/DefaultTrpcError.tsx‎
Lines changed: 1 addition & 1 deletion b/‎apps/studio/src/components/ErrorBoundary/DefaultTrpcError.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/studio/src/components/PageEditor/LinkEditorModal.tsx‎
Lines changed: 14 additions & 26 deletions b/‎apps/studio/src/components/PageEditor/LinkEditorModal.tsx‎
Lines changed: 14 additions & 26 deletions
diff --git a/‎apps/studio/src/components/ResourceSelector/ResourceItem.tsx‎
Lines changed: 57 additions & 89 deletions b/‎apps/studio/src/components/ResourceSelector/ResourceItem.tsx‎
Lines changed: 57 additions & 89 deletions
@@ -1,6 +1,6 @@
+import type { FallbackProps } from "react-error-boundary"
 import { useRouter } from "next/router"
 import { type TRPC_ERROR_CODE_KEY } from "@trpc/server/rpc"
-import { FallbackProps } from "react-error-boundary"
 
 import { trpc } from "~/utils/trpc"
 import { FullscreenSpinner } from "../FullscreenSpinner"
 
@@ -8,7 +8,6 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Text,
 } from "@chakra-ui/react"
 import {
   Button,
@@ -33,7 +32,6 @@ import {
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { useZodForm } from "~/lib/form"
 import { getReferenceLink, getResourceIdFromReferenceLink } from "~/utils/link"
-import { trpc } from "~/utils/trpc"
 import { ResourceSelector } from "../ResourceSelector"
 import { FileAttachment } from "./FileAttachment"
 
@@ -48,31 +46,21 @@ interface PageLinkElementProps {
 
 const PageLinkElement = ({ value, onChange }: PageLinkElementProps) => {
   const { siteId } = useQueryParse(editSiteSchema)
-
-  const selectedResourceId = getResourceIdFromReferenceLink(value)
-
-  const { data: resource } = trpc.resource.getWithFullPermalink.useQuery({
-    resourceId: selectedResourceId,
-  })
-
   return (
-    <>
-      <ResourceSelector
-        siteId={String(siteId)}
-        onChange={(resourceId) =>
-          onChange(getReferenceLink({ siteId: String(siteId), resourceId }))
-        }
-        selectedResourceId={selectedResourceId}
-      />
-
-      {!!resource && (
-        <Box bg="utility.feedback.info-subtle" p="0.75rem" w="full" mt="0.5rem">
-          <Text textStyle="caption-1">
-            You selected /{resource.fullPermalink}
-          </Text>
-        </Box>
-      )}
-    </>
+    <ResourceSelector
+      interactionType="link"
+      siteId={siteId}
+      onChange={(resourceId) =>
+        onChange(
+          getReferenceLink({
+            siteId: String(siteId),
+            resourceId: resourceId ?? "",
+          }),
+        )
+      }
+      selectedResourceId={getResourceIdFromReferenceLink(value)}
+      fileExplorerHeight={12}
+    />
   )
 }
 
 
@@ -1,109 +1,77 @@
-import type { IconType } from "react-icons"
-import { Suspense, useMemo } from "react"
-import { Box, HStack, Icon, Skeleton, Text } from "@chakra-ui/react"
+import type { ButtonProps } from "@opengovsg/design-system-react"
+import { Icon, Skeleton, Text, VStack } from "@chakra-ui/react"
 import { dataAttr } from "@chakra-ui/utils"
 import { Button } from "@opengovsg/design-system-react"
-import { QueryErrorResetBoundary } from "@tanstack/react-query"
-import { ResourceType } from "~prisma/generated/generatedEnums"
-import { ErrorBoundary } from "react-error-boundary"
-import { BiData, BiFile, BiFolder, BiLink, BiLockAlt } from "react-icons/bi"
 
-import type { RouterOutput } from "~/utils/trpc"
+import type { ResourceItemContent } from "~/schemas/resource"
+import { getIcon } from "~/utils/resources"
 
-type ResourceItemProps = Pick<
-  RouterOutput["resource"]["getChildrenOf"]["items"][number],
-  "permalink" | "type"
-> & {
-  isSelected: boolean
-  isDisabled: boolean
-  onResourceItemSelect: () => void
+interface ResourceItemProps {
+  item: ResourceItemContent
+  isDisabled?: boolean
+  isHighlighted?: boolean
+  handleOnClick?: () => void
+  hasAdditionalLeftPadding?: boolean
+  isLoading?: boolean
 }
 
-const SuspendableResourceItem = ({
-  permalink,
-  type,
-  isSelected,
-  isDisabled,
-  onResourceItemSelect,
-}: ResourceItemProps) => {
-  const icon: IconType = useMemo(() => {
-    switch (type) {
-      case ResourceType.CollectionLink:
-        return BiLink
-      case ResourceType.Folder:
-        return BiFolder
-      case ResourceType.CollectionPage:
-      case ResourceType.Page:
-      case ResourceType.IndexPage:
-        return BiFile
-      case ResourceType.Collection:
-        return BiData
-    }
-  }, [type])
-
+const ResourceItemContainer = (props: ButtonProps) => {
   return (
     <Button
       variant="clear"
       w="full"
       justifyContent="flex-start"
-      color="base.content.default"
-      isDisabled={isDisabled}
-      data-selected={dataAttr(isSelected)}
+      color={"base.content.default"}
+      height="fit-content"
+      alignItems="flex-start"
+      gap="0.25rem"
+      {...props}
+    />
+  )
+}
+
+export const ResourceItemSkeleton = () => {
+  return (
+    <ResourceItemContainer isDisabled>
+      <VStack alignItems="flex-start" textAlign="left" gap="0.25rem">
+        <Skeleton width="12rem" height="1.125rem" variant="pulse" />
+        <Skeleton width="18rem" height="1.125rem" variant="pulse" />
+      </VStack>
+    </ResourceItemContainer>
+  )
+}
+
+export const ResourceItem = ({
+  item,
+  isDisabled,
+  isHighlighted = false,
+  handleOnClick,
+  hasAdditionalLeftPadding = false,
+}: ResourceItemProps) => {
+  return (
+    <ResourceItemContainer
+      data-selected={dataAttr(isHighlighted)}
       _selected={{
         color: "interaction.main.default",
-        bgColor: "interaction.muted.main.active",
-        _hover: {
-          bgColor: "unset",
-        },
-      }}
-      _active={{
-        bgColor: "interaction.tinted.main.active",
-      }}
-      _disabled={{
-        color: "interaction.support.disabled-content",
-        bgColor: "unset",
-        cursor: "not-allowed",
+        bg: "interaction.muted.main.active",
         _hover: {
-          bgColor: "unset",
+          color: "interaction.main.default",
+          bg: "interaction.muted.main.active",
         },
       }}
-      _hover={{
-        bgColor: "interaction.muted.main.hover",
-      }}
-      pl="2.25rem"
-      py="0.375rem"
-      borderRadius="0.25rem"
-      onClick={onResourceItemSelect}
-      leftIcon={<Icon as={icon} />}
+      {...(hasAdditionalLeftPadding && { pl: "2.25rem" })}
+      onClick={handleOnClick}
+      leftIcon={<Icon as={getIcon(item.type)} />}
+      isDisabled={isDisabled}
     >
-      <HStack align="start" w="full" justify="space-between">
-        <Text textStyle="caption-1" noOfLines={1}>
-          /{permalink}
+      <VStack alignItems="flex-start" textAlign="left" gap="0.25rem">
+        <Text noOfLines={1} textStyle="caption-1">
+          {item.title}
         </Text>
-        {isDisabled && <Icon as={BiLockAlt} fontSize="0.75rem" />}
-      </HStack>
-    </Button>
-  )
-}
-
-export const ResourceItem = (props: ResourceItemProps) => {
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary
-          onReset={reset}
-          fallbackRender={({ resetErrorBoundary }) => (
-            <Box>
-              There was an error!
-              <Button onClick={() => resetErrorBoundary()}>Try again</Button>
-            </Box>
-          )}
-        >
-          <Suspense fallback={<Skeleton />}>
-            <SuspendableResourceItem {...props} />
-          </Suspense>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
+        <Text noOfLines={1} textStyle="caption-2">
+          {`/${item.permalink}`}
+        </Text>
+      </VStack>
+    </ResourceItemContainer>
   )
 }