From c27e8af58a5a05e5a54aa95aa1564d8912fdc0d8 Mon Sep 17 00:00:00 2001
From: Xilin Jia <6257601+XilinJia@users.noreply.github.com>
Date: Wed, 13 Mar 2024 09:51:29 +0000
Subject: [PATCH] fix sidebar display issue, desktop

---
 README.md                                     |  4 +++
 packages/app-desktop/gui/Root.tsx             |  6 +---
 packages/app-desktop/gui/Sidebar/Sidebar.tsx  | 28 +++++++------------
 .../app-desktop/gui/Sidebar/styles/index.ts   | 21 ++++++++++++--
 packages/app-desktop/package.json             |  2 +-
 5 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 9ea2dac..0d5dd19 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,10 @@ This is a major updates based on massive technical enhancements.
 * Ensured strict type and null safety checking
 * Fixed a major problems in editor and local files sync related to Android 11 and newer
 
+### Version 2.15.1
+
+Fixed sidebar display issue on desktop
+
 ### Prior versions:
 [Desktop](readme/about/changelog/desktop.md)
 
diff --git a/packages/app-desktop/gui/Root.tsx b/packages/app-desktop/gui/Root.tsx
index 715289b..abd69b6 100644
--- a/packages/app-desktop/gui/Root.tsx
+++ b/packages/app-desktop/gui/Root.tsx
@@ -232,15 +232,11 @@ class RootComponent extends React.Component<Props, any> {
 		};
 
 		return (
-			// disableVendorPrefixes not exist
-			// <StyleSheetManager disableVendorPrefixes>
-			<StyleSheetManager>
+			<StyleSheetManager disableVendorPrefixes>
 				<ThemeProvider theme={theme}>
 					<StyleSheetContainer themeId={this.props.themeId}></StyleSheetContainer>
 					<MenuBar />
 					<GlobalStyle />
-					{/* style doesn't exist?? */}
-					{/* <Navigator style={navigatorStyle} screens={screens} className={`profile-${this.props.profileConfigCurrentProfileId}`} /> */}
 					<Navigator style={navigatorStyle} screens={screens} className={`profile-${this.props.profileConfigCurrentProfileId}`} />
 					{this.renderModalMessage(this.modalDialogProps())}
 					{this.renderDialogs()}
diff --git a/packages/app-desktop/gui/Sidebar/Sidebar.tsx b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
index 2b49ba6..af11b88 100644
--- a/packages/app-desktop/gui/Sidebar/Sidebar.tsx
+++ b/packages/app-desktop/gui/Sidebar/Sidebar.tsx
@@ -82,7 +82,8 @@ interface Props {
 	noteCount?: number;
 
 	dispatch?: Dispatch;
-	onClick?: () => void;
+	// onClick?: () => void;
+	onClick?: (event: any) => void;
 	onFolderDragStart_?: React.DragEventHandler<HTMLDivElement>;
 	onFolderDragOver_?: React.DragEventHandler<HTMLDivElement>;
 	onFolderDrop_?: React.DragEventHandler<HTMLDivElement>;
@@ -135,19 +136,14 @@ function FolderItem(props: Props): React.JSX.Element {
 	const shareIcon = shareId && !parentId ? <StyledShareIcon className="fas fa-share-alt"></StyledShareIcon> : null;
 
 	return (
-		// depth, selected not exist
-		// <StyledListItem depth={depth} selected={selected} className={`list-item-container list-item-depth-${depth} ${selected ? 'selected' : ''}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
-		<StyledListItem className={`list-item-container list-item-depth-${depth} ${selected ? 'selected' : ''}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
-			{/* onFolderToggleClick_ needs event argument */}
-			{/* <ExpandLink themeId={props.themeId} hasChildren={hasChildren} folderId={folderId} onClick={onFolderToggleClick_} isExpanded={isExpanded} /> */}
-			<ExpandLink themeId={props.themeId} hasChildren={hasChildren} folderId={folderId} isExpanded={isExpanded} />
+		<StyledListItem depth={depth} selected={selected} className={`list-item-container list-item-depth-${depth} ${selected ? 'selected' : ''}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
+			<ExpandLink themeId={props.themeId} hasChildren={hasChildren} folderId={folderId} onClick={props.onFolderToggleClick_} isExpanded={isExpanded} />
 			<StyledListItemAnchor
 				ref={anchorRef}
 				className="list-item"
-				// the following not exist
-				// isConflictFolder={folderId === Folder.conflictFolderId()}
-				// selected={selected}
-				// shareId={shareId}
+				isConflictFolder={folderId === Folder.conflictFolderId()}
+				selected={selected}
+				shareId={shareId}
 				href="#"
 				data-id={folderId}
 				data-type={BaseModel.TYPE_FOLDER}
@@ -156,8 +152,7 @@ function FolderItem(props: Props): React.JSX.Element {
 				onClick={() => {
 					if (folderId && folderItem_click) folderItem_click(folderId);
 				}}
-			// onFolderToggleClick_ needs event argument
-			// onDoubleClick={onFolderToggleClick_}
+				onDoubleClick={props.onFolderToggleClick_}
 			>
 				{showFolderIcon && folderIcon ? renderFolderIcon(folderIcon) : null}<StyledSpanFix className="title" style={{ lineHeight: 0 }}>{folderTitle}</StyledSpanFix>
 				{shareIcon} {noteCountComp}
@@ -651,9 +646,7 @@ const SidebarComponent = (props: Props): React.JSX.Element => {
 		// }
 
 		return (
-			// depth selected not exist
-			// <StyledListItem depth={0} selected={selected}
-			<StyledListItem
+			<StyledListItem depth={0} selected={selected}
 				className={`list-item-container ${selected ? 'selected' : ''}`}
 				key={tag.id}
 				onDrop={onTagDrop_}
@@ -664,8 +657,7 @@ const SidebarComponent = (props: Props): React.JSX.Element => {
 					ref={anchorRef}
 					className="list-item"
 					href="#"
-					// selected not exist
-					// selected={selected}
+					selected={selected}
 					data-id={tag.id}
 					data-type={BaseModel.TYPE_TAG}
 					onContextMenu={itemContextMenu}
diff --git a/packages/app-desktop/gui/Sidebar/styles/index.ts b/packages/app-desktop/gui/Sidebar/styles/index.ts
index 40df915..8cbb493 100644
--- a/packages/app-desktop/gui/Sidebar/styles/index.ts
+++ b/packages/app-desktop/gui/Sidebar/styles/index.ts
@@ -44,7 +44,18 @@ export const StyledHeaderLabel = styled.span`
 	font-weight: bold;
 `;
 
-export const StyledListItem = styled.div`
+type StyledListItemProps = {
+	depth?: number;
+	selected?: boolean;
+	className?: string;
+	onDragStart?: React.DragEventHandler<HTMLDivElement>;
+	onDragOver?: React.DragEventHandler<HTMLDivElement>;
+	onDrop?: React.DragEventHandler<HTMLDivElement>;
+	draggable?: boolean;
+	'data-folder-id'?: string;
+};
+
+export const StyledListItem = styled.div<StyledListItemProps>`
 	box-sizing: border-box;
 	height: 30px;
 	display: flex;
@@ -67,7 +78,13 @@ function listItemTextColor(props: any) {
 	return props.theme.color2;
 }
 
-export const StyledListItemAnchor = styled.a`
+type StyledListItemAnchorProps = {
+	selected?: boolean;
+	shareId?: string;
+	isConflictFolder?: boolean;
+};
+
+export const StyledListItemAnchor = styled.a<StyledListItemAnchorProps>`
 	font-size: ${(props: any) => Math.round(props.theme.fontSize * 1.0833333)}px;
 	text-decoration: none;
 	color: ${(props: any) => listItemTextColor(props)};
diff --git a/packages/app-desktop/package.json b/packages/app-desktop/package.json
index 13ba375..18c4d7d 100644
--- a/packages/app-desktop/package.json
+++ b/packages/app-desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xilinota/app-desktop",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "Xilinota for Desktop",
   "main": "main.js",
   "private": true,