Merge branch 'dap-4799' of github.com:dapplets/mutable-web-monorepo into dap-4799

Author: alsakhaev

apps/extension/src/contentscript/multitable-panel/components/application-card.tsx

@@ -42,14 +42,14 @@ const CardContent = styled.div`
   width: 100%;
 `
 
-type TTextLink = {
+type TText = {
   bold?: boolean
   small?: boolean
   ellipsis?: boolean
   $color?: string
 }
 
-const TextLink = styled.div<TTextLink>`
+const Text = styled.div<TText>`
   display: block;
   margin: 0;
   font-size: 14px;
@@ -117,7 +117,7 @@ const SideLine = styled.div`
 `
 
 const DocumentCardList = styled.div`
-  width: 100%;
+  width: calc(100% - 32px);
   margin-right: 10px;
   display: flex;
   flex-direction: column;
@@ -241,16 +241,27 @@ const ApplicationCard: React.FC<IApplicationCard> = ({
         </Thumbnail>
 
         <CardContent>
-          <TextLink $color={textColor} bold ellipsis>
+          <Text $color={textColor} bold ellipsis>
             {metadata.name || appId}
-          </TextLink>
+          </Text>
 
-          <TextLink small ellipsis>
+          <Text small ellipsis>
             {source === EntitySourceType.Local && (
-              <Badge margin="0 8px 0 0" text={source} theme={'yellow'} />
+              <Badge
+                margin="0 8px 0 0"
+                text={source}
+                theme={'yellow'}
+                style={{ transform: 'translate(0px, -1px)' }}
+              />
             )}{' '}
             {accountId ? `@${accountId}` : null}
-          </TextLink>
+          </Text>
+
+          {src ? (
+            <Text small ellipsis title={src}>
+              {`ID: ${src}`}
+            </Text>
+          ) : null}
         </CardContent>
 
         <ButtonLink

apps/extension/src/contentscript/multitable-panel/components/badge.tsx

@@ -59,16 +59,26 @@ export interface IBadgeProps {
   size?: keyof typeof SizeMap
   icon?: React.JSX.Element
   onClick?: React.MouseEventHandler<HTMLSpanElement>
+  style?: React.CSSProperties
 }
 
-export const Badge: FC<IBadgeProps> = ({ text, theme, margin, icon, onClick, size = 'tiny' }) => {
+export const Badge: FC<IBadgeProps> = ({
+  text,
+  theme,
+  margin,
+  icon,
+  onClick,
+  size = 'tiny',
+  style,
+}) => {
   return (
     <Wrapper
       $margin={margin}
       $theme={theme}
       onClick={onClick}
       $isClickable={!!onClick}
       $size={size}
+      style={style}
     >
       {icon ? <span style={{ fontSize: SizeMap[size].iconSize }}>{icon}</span> : null}
       <span>{text}</span>

apps/extension/src/contentscript/multitable-panel/components/document-card.tsx

@@ -10,7 +10,6 @@ const Card = styled.div`
   border-radius: 10px;
   background: #f8f9ff;
   border: 1px solid #eceef0;
-  font-family: sans-serif;
   &:hover {
     background: rgba(24, 121, 206, 0.1);
   }
@@ -90,7 +89,7 @@ const CardContent = styled.div`
   width: 100%;
 `
 
-const TextLink = styled.div<{ bold?: boolean; small?: boolean; ellipsis?: boolean }>`
+const Text = styled.div<{ bold?: boolean; small?: boolean; ellipsis?: boolean }>`
   display: block;
   margin: 0;
   font-size: 14px;
@@ -171,16 +170,22 @@ export const DocumentCard: React.FC<Props> = ({
         </ThumbnailGroup>
 
         <CardContent>
-          <TextLink bold ellipsis>
+          <Text bold ellipsis>
             {metadata?.name || (srcParts && srcParts[2]) || 'New Document'}
-          </TextLink>
+          </Text>
 
-          <TextLink small ellipsis>
+          <Text small ellipsis>
             {source === EntitySourceType.Local && (
               <Badge margin="0 8px 0 0" text={source} theme={'yellow'} />
             )}{' '}
             {srcParts?.[0] && `@${srcParts[0]}`}
-          </TextLink>
+          </Text>
+
+          {src ? (
+            <Text small ellipsis title={src}>
+              {`ID: ${src}`}
+            </Text>
+          ) : null}
         </CardContent>
         <ButtonLink className={disabled ? 'disabled' : ''} disabled={disabled} onClick={onChange}>
           <CheckedIcon />