Fix emoji not displayed in cards with target (#157)

* Fix emoji not displayed in cards with target

* Only have hover effect on card when clickable

* Use 4 instead of 2

src/components/DocumentView/Table/RecordCard.tsx

@@ -78,11 +78,15 @@ export async function RecordCard(
                     'place-self-start',
                     'p-4',
                     'text-sm',
-                    'text-dark/8',
-                    'transition-colors',
-                    'group-hover:text-dark/10',
-                    'dark:text-light/8',
-                    'dark:group-hover:text-light/10',
+                    target
+                        ? [
+                              'transition-colors',
+                              'text-dark/8',
+                              'dark:text-light/8',
+                              'group-hover:text-dark/10',
+                              'dark:group-hover:text-light/10',
+                          ]
+                        : ['text-dark/10', 'dark:text-light/10'],
                 )}
             >
                 {view.columns.map((column) => {
@@ -99,9 +103,7 @@ export async function RecordCard(
         'shadow-dark/[0.02]',
         'rounded-md',
         'straight-corners:rounded-none',
-        'hover:before:ring-dark/4',
         'dark:shadow-transparent',
-        'dark:hover:before:ring-light/4',
         'z-0',
         'before:pointer-events-none',
         'before:grid-area-1-1',
@@ -118,17 +120,17 @@ export async function RecordCard(
 
     if (target) {
         return (
-            <a href={target.href} className={tcls(style)}>
+            <a
+                href={target.href}
+                className={tcls(style, [
+                    'hover:before:ring-dark/4',
+                    'dark:hover:before:ring-light/4',
+                ])}
+            >
                 {body}
             </a>
         );
     }
 
-    return (
-        <div
-            className={tcls([style, 'hover:before:ring-dark/2', 'dark:hover:before:ring-light/2'])}
-        >
-            {body}
-        </div>
-    );
+    return <div className={tcls(style)}>{body}</div>;
 }

src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -2,7 +2,7 @@ import IconStar from '@geist-ui/icons/star';
 import { ContentRef, DocumentBlockTable } from '@gitbook/api';
 import assertNever from 'assert-never';
 
-import { Checkbox, Link } from '@/components/primitives';
+import { Checkbox, Emoji, Link } from '@/components/primitives';
 import { getNodeFragmentByName } from '@/lib/document';
 import { tcls } from '@/lib/tailwind';
 import { filterOutNullable } from '@/lib/typescript';
@@ -135,6 +135,9 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
             const resolved = value ? await context.resolveContentRef(value as ContentRef) : null;
             return (
                 <Tag className={tcls('text-base', 'text-balance')}>
+                    {resolved && resolved.emoji ? (
+                        <Emoji code={resolved.emoji} style={['mr-2']} />
+                    ) : null}
                     {resolved ? <Link href={resolved.href}>{resolved.text}</Link> : null}
                 </Tag>
             );

src/lib/references.ts

@@ -8,6 +8,8 @@ import { resolvePageId } from './pages';
 export interface ResolvedContentRef {
     /** Text to render in the content ref */
     text: string;
+    /** Emoji associated with the reference */
+    emoji?: string;
     /** URL to open for the content ref */
     href: string;
     /** True if the content ref is active */
@@ -65,13 +67,16 @@ export async function resolveContentRef(
             return {
                 href: pageHref(pages, page, linksContext),
                 text: page.title,
+                emoji: page.emoji,
                 active: page.id === activePage?.id,
             };
         }
 
+        const isCurrentPage = page.id === activePage?.id;
         return {
             href: pageHref(pages, page, linksContext, contentRef.anchor),
-            text: page.title + '#' + contentRef.anchor,
+            text: (isCurrentPage ? '' : page.title) + '#' + contentRef.anchor,
+            emoji: isCurrentPage ? undefined : page.emoji,
             active: false,
         };
     } else if (contentRef.kind === 'space' && contentRef.space === space.id) {