Merge pull request #2317 from Shoaibdev7/Add-link-out-button-to-sidebar

Enhance [Sidebar]: Add `External Link` Button for Improved Navigation
stakwork · Oct 15, 2024 · 8905e93 · 8905e93
2 parents 5004eff + 178e0b1
commit 8905e93
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/src/components/App/SideBar/SelectedNodeView/Default/index.tsx b/src/components/App/SideBar/SelectedNodeView/Default/index.tsx
@@ -12,6 +12,7 @@ import { Text } from '~/components/common/Text'
 import { TypeBadge } from '~/components/common/TypeBadge'
 import AiPauseIcon from '~/components/Icons/AiPauseIcon'
 import AiPlayIcon from '~/components/Icons/AiPlayIcon'
+import LinkIcon from '~/components/Icons/LinkIcon'
 import { useAppStore } from '~/stores/useAppStore'
 import { useSelectedNode } from '~/stores/useGraphStore'
 import { colors } from '~/utils/colors'
@@ -71,6 +72,7 @@ export const Default = () => {
   const hasImage = !!selectedNode.properties?.image_url
   const hasAudio = !!selectedNode.properties?.audio_EN
   const customKeys = selectedNode.properties || {}
+  const sourceLink = selectedNode.properties?.source_link
 
   return (
     <StyledContainer>
@@ -88,8 +90,16 @@ export const Default = () => {
       ) : null}
 
       <StyledContent grow={1} justify="flex-start" pt={hasImage ? 0 : 8} shrink={1}>
-        <Flex ml={24} mt={20} style={{ width: 'fit-content' }}>
+        <Flex ml={24} mt={20} style={{ width: 'fit-content', flexDirection: 'row', alignItems: 'center' }}>
           <TypeBadge type={selectedNode.node_type || ''} />
+          {sourceLink && (
+            <StyledLinkIcon
+              href={`${sourceLink}${(sourceLink as string).includes('?') ? '&' : '?'}open=system`}
+              target="_blank"
+            >
+              <LinkIcon />
+            </StyledLinkIcon>
+          )}
         </Flex>
 
         <StyledWrapper>
@@ -125,7 +135,7 @@ const NodeDetail = ({ label, value, hasAudio, isPlaying, togglePlay }: Props) =>
   const isLong = (value as string).length > 140
   const searchTerm = useAppStore((s) => s.currentSearch)
 
-  if (!value || label === 'Audio EN') {
+  if (!value || label === 'Audio EN' || label === 'Source Link') {
     return null
   }
 
@@ -252,3 +262,14 @@ const AudioButton = styled(Button)`
 const StyledAudio = styled.audio`
   display: none;
 `
+
+const StyledLinkIcon = styled.a`
+  margin-left: 6px;
+  color: ${colors.GRAY6};
+  margin-top: 4px;
+
+  svg {
+    width: 1.3em;
+    height: 1.3em;
+  }
+`