chore: pinned note ui change

packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { ListableContentItem } from './Types/ListableContentItem'
+import { classNames } from '@standardnotes/snjs'
 
 type Props = {
   item: {
@@ -10,7 +11,6 @@ type Props = {
     pinned: ListableContentItem['pinned']
     starred: ListableContentItem['starred']
   }
-  hideIcon?: boolean
   hasFiles?: boolean
   hasBorder?: boolean
   isFileBackedUp?: boolean
@@ -19,14 +19,13 @@ type Props = {
 
 const ListItemFlagIcons: FunctionComponent<Props> = ({
   item,
-  hideIcon = false,
   hasFiles = false,
   hasBorder = true,
   isFileBackedUp = false,
   className,
 }) => {
   return (
-    <div className={`flex items-start ${hasBorder && 'border-b border-solid border-border'} ${className} pl-0`}>
+    <div className={classNames('flex items-start pl-0', hasBorder && 'border-b border-solid border-border', className)}>
       {item.locked && (
         <span className="flex items-center" title="Editing Disabled">
           <Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="medium" />
@@ -42,11 +41,6 @@ const ListItemFlagIcons: FunctionComponent<Props> = ({
           <Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
         </span>
       )}
-      {hideIcon && item.pinned && (
-        <span className="ml-1.5 flex items-center" title="Pinned">
-          <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="medium" />
-        </span>
-      )}
       {hasFiles && (
         <span className="ml-1.5 flex items-center" title="Files">
           <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="medium" />

packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx

@@ -1,4 +1,4 @@
-import { sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
+import { classNames, sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
 import { FunctionComponent } from 'react'
 
 type Props = {
@@ -13,7 +13,12 @@ const ListItemNotePreviewText: FunctionComponent<Props> = ({ item, hidePreview,
   }
 
   return (
-    <div className={`overflow-hidden overflow-ellipsis text-base lg:text-sm ${item.archived ? 'opacity-60' : ''}`}>
+    <div
+      className={classNames(
+        'overflow-hidden overflow-ellipsis text-base lg:text-sm',
+        item.archived ? 'opacity-60' : '',
+      )}
+    >
       {item.preview_html && (
         <div
           className="my-1"

packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx

@@ -1,16 +1,22 @@
 import { FunctionComponent } from 'react'
 import { ListableContentItem } from './Types/ListableContentItem'
+import Icon from '../Icon/Icon'
+import { classNames } from '@standardnotes/snjs'
 
 export const ListItemTitle: FunctionComponent<{ item: ListableContentItem }> = ({ item }) => {
   return (
-    <>
+    <div
-      <div
+      className={classNames(
-        className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${
+        'break-word mr-2 overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3]',
-          item.archived ? 'opacity-60' : ''
+        item.archived ? 'opacity-60' : '',
-        }`}
+      )}
-      >
+    >
-        {item.title}
+      {item.pinned && (
-      </div>
+        <span className="mr-1.5 inline-flex rounded-full bg-info p-0.5 text-info-contrast">
-    </>
+          <Icon type="pin-filled" size="custom" className="h-3 w-3" />
+        </span>
+      )}
+      {item.title}
+    </div>
   )
 }

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -85,11 +85,6 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
       {!hideIcon ? (
         <div className="mr-0 flex flex-col items-center justify-between gap-2 p-4 pr-4">
           <Icon type={icon} className={`text-accessory-tint-${tint}`} />
-          {item.pinned && (
-            <div className="rounded-full bg-info p-1 text-info-contrast">
-              <Icon type="pin-filled" size="custom" className="h-3 w-3" />
-            </div>
-          )}
         </div>
       ) : (
         <div className="pr-4" />
@@ -101,13 +96,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
         <ListItemTags hideTags={hideTags} tags={tags} />
         <ListItemConflictIndicator item={item} />
       </div>
-      <ListItemFlagIcons
+      <ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
-        className="p-4"
-        item={item}
-        hideIcon={hideIcon}
-        hasFiles={hasFiles}
-        hasBorder={hasOffsetBorder}
-      />
     </div>
   )
 }