✨(frontend) display pin on top of doc emoji or default icon

Adding a new .svg pin image to display in the top right corner
of doc leading emoji or default icon

Author: olaurendeau

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to
 ### Added 
 
 - ✨(api) add API route to fetch document content #1206
+- ✨(frontend) display pin on top of doc emoji or default icon #1358
 
 ### Changed
 

src/frontend/apps/impress/src/features/docs/doc-management/assets/pin.svg

@@ -1,36 +1,74 @@
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
-import { Text, TextType } from '@/components';
+import { Box, Text, TextType } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import Pin from '../assets/pin.svg';
 
 type DocIconProps = TextType & {
   emoji?: string | null;
   defaultIcon: React.ReactNode;
+  isPinned?: boolean;
 };
 
 export const DocIcon = ({
   emoji,
   defaultIcon,
+  isPinned = false,
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
   ...textProps
 }: DocIconProps) => {
   const { t } = useTranslation();
-
-  if (!emoji) {
-    return <>{defaultIcon}</>;
-  }
+  const { colorsTokens } = useCunninghamTheme();
 
   return (
-    <Text
-      {...textProps}
-      $size={$size}
-      $variation={$variation}
-      $weight={$weight}
-      aria-hidden="true"
-      aria-label={t('Document emoji icon')}
+    <Box
+      $css={css`
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        place-items: center;
+      `}
     >
-      {emoji}
-    </Text>
+      <Box
+        $css={css`
+          grid-column-start: 1;
+          grid-row-start: 1;
+        `}
+      >
+        {!emoji ? (
+          <>{defaultIcon}</>
+        ) : (
+          <Text
+            {...textProps}
+            $size={$size}
+            $variation={$variation}
+            $weight={$weight}
+            aria-hidden="true"
+            aria-label={t('Document emoji icon')}
+          >
+            {emoji}
+          </Text>
+        )}
+      </Box>
+      {isPinned && (
+        <Box
+          $css={css`
+            grid-column-start: 1;
+            grid-row-start: 1;
+            transform: translate(25%, -25%);
+          `}
+        >
+          <Pin
+            color={colorsTokens['primary-500']}
+            aria-hidden="true"
+            aria-label={t('Pin document icon')}
+          />
+        </Box>
+      )}
+    </Box>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx

@@ -7,7 +7,6 @@ import { useCunninghamTheme } from '@/cunningham';
 import { Doc, getEmojiAndTitle, useTrans } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
-import PinnedDocumentIcon from '../assets/pinned-document.svg';
 import SimpleFileIcon from '../assets/simple-document.svg';
 
 import { DocIcon } from './DocIcon';
@@ -60,25 +59,18 @@ export const SimpleDocItem = ({
         $padding={`${spacingsTokens['3xs']} 0`}
         data-testid={isPinned ? `doc-pinned-${doc.id}` : undefined}
       >
-        {isPinned ? (
-          <PinnedDocumentIcon
-            aria-hidden="true"
-            aria-label={t('Pin document icon')}
-            color={colorsTokens['primary-500']}
-          />
-        ) : (
-          <DocIcon
-            emoji={emoji}
-            defaultIcon={
-              <SimpleFileIcon
-                aria-hidden="true"
-                aria-label={t('Simple document icon')}
-                color={colorsTokens['primary-500']}
-              />
-            }
-            $size="25px"
-          />
-        )}
+        <DocIcon
+          emoji={emoji}
+          isPinned={isPinned}
+          defaultIcon={
+            <SimpleFileIcon
+              aria-hidden="true"
+              aria-label={t('Simple document icon')}
+              color={colorsTokens['primary-500']}
+            />
+          }
+          $size="25px"
+        />
       </Box>
       <Box $justify="center" $overflow="auto">
         <Text

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -54,7 +54,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
         $css="overflow: auto;"
         aria-label={`${doc.title}, ${t('Updated')} ${DateTime.fromISO(doc.updated_at).toRelative()}`}
       >
-        <SimpleDocItem showAccesses doc={doc} />
+        <SimpleDocItem showAccesses doc={doc} isPinned={true} />
       </StyledLink>
       <div className="pinned-actions">
         <DocsGridActions doc={doc} openShareModal={shareModal.open} />