From 22297ff51470047c1d5e9a0ca408beaba99fa546 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 22 May 2023 23:24:16 +0530
Subject: [PATCH] chore: pinned note ui change

---
 .../ContentListView/ListItemFlagIcons.tsx     | 10 ++------
 .../ListItemNotePreviewText.tsx               |  9 +++++--
 .../ContentListView/ListItemTitle.tsx         | 24 ++++++++++++-------
 .../ContentListView/NoteListItem.tsx          | 13 +---------
 4 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
index 1b28b59f2..cfa8493f8 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
+++ b/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" />
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx
index 379d40308..271971665 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx
+++ b/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"
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx
index e55d69ece..8fd7a3277 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx
+++ b/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
-        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] ${
-          item.archived ? 'opacity-60' : ''
-        }`}
-      >
-        {item.title}
-      </div>
-    </>
+    <div
+      className={classNames(
+        '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.pinned && (
+        <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>
   )
 }
diff --git a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
index be4b27423..5e104f93f 100644
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/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
-        className="p-4"
-        item={item}
-        hideIcon={hideIcon}
-        hasFiles={hasFiles}
-        hasBorder={hasOffsetBorder}
-      />
+      <ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
     </div>
   )
 }