Add inspector view using allotment

packages/web/components/elements/Button.tsx

@@ -249,6 +249,8 @@ export const Button = styled('button', {
 
       },
       articleActionIcon: {
+        display: 'flex',
+        alignItems: 'center',
         bg: 'transparent',
         border: 'none',
         cursor: 'pointer',

packages/web/components/elements/EditLabelChipStack.tsx

@@ -75,3 +75,34 @@ export function EditLabelChipStack(
     </SpanBox>
   )
 }
+
+type ColoredStackProps = {
+  colors: string[]
+}
+
+export const ColoredStack = (props: ColoredStackProps): JSX.Element => {
+  const colors = useMemo(() => {
+    if (props.colors.length > 7) {
+      const set = new Set(props.colors)
+      return Array.from(set).slice(0, 7)
+    }
+    return props.colors
+  }, [props])
+
+  return (
+    <>
+      {colors.map((color, idx) => (
+        <SpanBox
+          key={`label-color${idx}`}
+          css={{
+            marginLeft: -15,
+            height: '100%',
+            display: 'inline-flex',
+          }}
+        >
+          <Circle size={14} color={color} weight="fill" />
+        </SpanBox>
+      ))}
+    </>
+  )
+}

packages/web/components/elements/StyledText.tsx

@@ -198,6 +198,20 @@ const textVariants = {
       fontSize: '$2',
       lineHeight: '1.25',
     },
+    emptyListMessage: {
+      p: '10px',
+      mt: '15px',
+      width: '100%',
+      fontSize: '13px',
+      fontFamily: '$inter',
+      color: '$thTextSubtle',
+      alignItems: 'center',
+      justifyContent: 'center',
+      mb: '100px',
+      bg: '$thBackground2', // isDark ? '#3D3D3D' : '$thBackground',
+      borderRadius: '6px',
+      boxShadow: '0px 4px 4px rgba(33, 33, 33, 0.1)',
+    },
   },
 }
 

packages/web/components/elements/icons/LeftPanelToggleIcon.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class LeftPanelToggleIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 26).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 26 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M4.90039 6.73861C4.90039 6.18607 5.11988 5.65617 5.51058 5.26547C5.90129 4.87477 6.43119 4.65527 6.98372 4.65527H19.4837C20.0363 4.65527 20.5662 4.87477 20.9569 5.26547C21.3476 5.65617 21.5671 6.18607 21.5671 6.73861V19.2386C21.5671 19.7911 21.3476 20.321 20.9569 20.7117C20.5662 21.1024 20.0363 21.3219 19.4837 21.3219H6.98372C6.43119 21.3219 5.90129 21.1024 5.51058 20.7117C5.11988 20.321 4.90039 19.7911 4.90039 19.2386V6.73861Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10.1094 4.65527V21.3219"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}

packages/web/components/elements/icons/OutlineIcon.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class OutlineIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 26).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 25 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M9.375 6.93164H20.8333"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9.375 13.1816H20.8333"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9.375 19.4316H20.8333"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5.20898 6.93164V6.94164"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5.20898 13.1816V13.1916"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5.20898 19.4316V19.4416"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}

packages/web/components/elements/icons/TreeDownIcon.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class TreeDownIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 18).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M4.5 6.75L9 11.25L13.5 6.75"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}

packages/web/components/elements/icons/TreeRightIcon.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class TreeRightIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 18).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 18 18"
+        fill="none"
+      >
+        <g>
+          <path
+            d="M6.75 13.5L11.25 9L6.75 4.5"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}

packages/web/components/patterns/ArticleNotes.tsx

@@ -15,17 +15,17 @@ import 'react-markdown-editor-lite/lib/index.css'
 import throttle from 'lodash/throttle'
 import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
 import { Highlight } from '../../lib/networking/fragments/highlightFragment'
-import Counter from './MDEditorSavePlugin'
+import SavePlugin from './MDEditorSavePlugin'
 import { isDarkTheme } from '../../lib/themeUpdater'
-import { RcEditorStyles } from './RcEditorStyles'
+import { MDEditorSettings, RcEditorStyles } from './RcEditorStyles'
 
 const mdParser = new MarkdownIt()
 
 MdEditor.use(Plugins.TabInsert, {
   tabMapValue: 1, // note that 1 means a '\t' instead of ' '.
 })
 
-MdEditor.use(Counter)
+MdEditor.use(SavePlugin)
 
 type NoteSectionProps = {
   targetId: string
@@ -181,32 +181,11 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
         ref={editorRef}
         value={props.text}
         placeholder={props.placeHolder}
-        view={{ menu: true, md: true, html: false }}
-        canView={{
-          menu: true,
-          md: true,
-          html: true,
-          both: false,
-          fullScreen: false,
-          hideMenu: false,
-        }}
-        plugins={[
-          'tab-insert',
-          'header',
-          'font-bold',
-          'font-italic',
-          'font-underline',
-          'font-strikethrough',
-          'list-unordered',
-          'list-ordered',
-          'block-quote',
-          'link',
-          'auto-resize',
-          'save',
-        ]}
+        view={MDEditorSettings.view}
+        canView={MDEditorSettings.canView}
+        plugins={MDEditorSettings.plugins}
         style={{
           width: '100%',
-          height: '180px',
         }}
         renderHTML={(text: string) => mdParser.render(text)}
         onChange={handleEditorChange}

packages/web/components/patterns/ArticleSubtitle.tsx

@@ -1,39 +1,41 @@
 import { Box, StyledLink } from './../elements/LayoutPrimitives'
 import { StyledText } from './../../components/elements/StyledText'
 import { formattedLongDate } from './../../lib/dateFormatting'
+import { ReadableItem } from '../../lib/networking/queries/useGetLibraryItemsQuery'
+import { siteName } from './LibraryCards/LibraryCardStyles'
 
 type SubtitleStyle = 'footnote' | 'shareSubtitle'
 
 type ArticleSubtitleProps = {
-  href: string
+  item: ReadableItem
   author?: string
   style?: SubtitleStyle
-  hideButton?: boolean
 }
 
 export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
   const textStyle = props.style || 'footnote'
-  const subtitle = articleSubtitle(props.href, props.author)
+  const subtitle = articleSubtitle(props.item, props.author)
 
   return (
     <Box>
       <StyledText style={textStyle} css={{ wordBreak: 'break-word' }}>
         {subtitle} {subtitle && <span style={{ bottom: 1 }}>• </span>}{' '}
-        {!props.hideButton && !shouldHideUrl(props.href) && (
-          <>
-            <StyledLink
-              href={props.href}
-              target="_blank"
-              rel="noreferrer"
-              css={{
-                textDecoration: 'underline',
-                color: '$grayTextContrast',
-              }}
-            >
-              See original
-            </StyledLink>
-          </>
-        )}
+        {props.item.originalArticleUrl &&
+          !shouldHideUrl(props.item.originalArticleUrl) && (
+            <>
+              <StyledLink
+                href={props.item.originalArticleUrl}
+                target="_blank"
+                rel="noreferrer"
+                css={{
+                  textDecoration: 'underline',
+                  color: '$grayTextContrast',
+                }}
+              >
+                See original
+              </StyledLink>
+            </>
+          )}
       </StyledText>
     </Box>
   )
@@ -76,12 +78,15 @@ function shouldHideUrl(url: string): boolean {
   return false
 }
 
-function articleSubtitle(url: string, author?: string): string | undefined {
-  const origin = new URL(url).origin
-  const hideUrl = shouldHideUrl(url)
+function articleSubtitle(
+  item: ReadableItem,
+  author?: string
+): string | undefined {
+  const origin = new URL(item.originalArticleUrl).origin
+  const hideUrl = shouldHideUrl(item.originalArticleUrl)
   if (author) {
     const auth = `${authoredByText(author)}`
-    return hideUrl ? auth : `${auth}, ${new URL(url).hostname}`
+    return hideUrl ? auth : `${auth}, ${siteName(item)}`
   } else {
     if (hideUrl) {
       return undefined

packages/web/components/patterns/HighlightBar.tsx

@@ -30,7 +30,7 @@ type PageCoordinates = {
 export type HighlightAction =
   | 'delete'
   | 'create'
-  | 'comment'
+  | 'createWithNote'
   | 'share'
   | 'post'
   | 'unshare'
@@ -172,11 +172,10 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           </Button>
         </>
       )}
-
       <Button
         title={props.isNewHighlight ? `Create highlight w/note` : 'Add note'}
         style="highlightBarIcon"
-        onClick={() => props.handleButtonClick('comment')}
+        onClick={() => props.handleButtonClick('createWithNote')}
         onMouseEnter={() => {
           setHovered('note')
         }}