From 19d788c6c85bf132b019448f40fee5b1cdc3467a Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Tue, 9 Sep 2025 17:02:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20display=20pin=20on=20top?=
 =?UTF-8?q?=20of=20doc=20emoji=20or=20default=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding a new .svg pin image to display in the top right corner
of doc leading emoji or default icon
---
 CHANGELOG.md                                  |  1 +
 .../docs/doc-management/assets/pin.svg        | 41 ++++++++++++
 .../doc-management/components/DocIcon.tsx     | 66 +++++++++++++++----
 .../components/SimpleDocItem.tsx              | 32 ++++-----
 .../components/LeftPanelFavoriteItem.tsx      |  2 +-
 5 files changed, 107 insertions(+), 35 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-management/assets/pin.svg

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47a628b9ba..ccbfe66c58 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/assets/pin.svg b/src/frontend/apps/impress/src/features/docs/doc-management/assets/pin.svg
new file mode 100644
index 0000000000..3b6e4a2ea7
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/assets/pin.svg
@@ -0,0 +1,41 @@
+<svg
+  width="33"
+  height="33"
+  viewBox="0 0 33 33"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_pin)">
+    <rect
+      x="10.0132"
+      y="10.0132"
+      width="12.9736"
+      height="12.9736"
+      rx="6.48682"
+      fill="currentColor"
+    />
+    <rect
+      x="10.0132"
+      y="10.0132"
+      width="12.9736"
+      height="12.9736"
+      rx="6.48682"
+      stroke="white"
+      stroke-width="1.21628"
+    />
+    <path
+      d="M17.9595 16.5L18.9325 17.473V18.2028H16.8648V20.5137L16.4999 20.8786L16.1351 20.5137V18.2028H14.0674V17.473L15.0404 16.5V13.8242H14.5539V13.0944H18.446V13.8242H17.9595V16.5Z"
+      fill="white"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_pin">
+      <rect
+        width="32"
+        height="32"
+        fill="white"
+        transform="translate(0.5 0.5)"
+      />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
index 0bcc3aa5a4..01a1929d25 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
@@ -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>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index ab11f0a2d6..5e8375f867 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.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
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
index 11926085d7..fda9de94da 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.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} />