From 05dd906b252c90ce0708204c5834641c0c409578 Mon Sep 17 00:00:00 2001
From: yasyuk <yasyukyura@gmail.com>
Date: Fri, 29 May 2026 15:13:30 +0100
Subject: [PATCH] feat(list): use Bin vertical grid for List view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Compact row height: 28px → 42px to match Bin spacing
- Detailed row icon size: 48px → 32px to match Bin detailed view
- Hover uses full-row ::before highlight (border-radius: 8px) with drag handle outside (left: 11px)
- Selection highlight border-radius matches hover (8px override)
- dropTarget/selectionTarget flex-centered so content is vertically centered at new height
- isRegular iconObject styling matches Bin's detailed icon treatment
- New Object add row inherits row height and uses same hover/centering

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/scss/block/dataview/view/list.scss        | 44 ++++++++++++++-----
 src/ts/component/block/dataview/view/list.tsx |  2 +-
 .../block/dataview/view/list/row.tsx          |  2 +-
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/scss/block/dataview/view/list.scss b/src/scss/block/dataview/view/list.scss
index fd3b2bfb8b..c78343f155 100644
--- a/src/scss/block/dataview/view/list.scss
+++ b/src/scss/block/dataview/view/list.scss
@@ -11,10 +11,15 @@
 
 			.icon.edit, .icon.expand { background-color: unset; box-shadow: 0px 0px; }
 
-		    .row { 
-				height: 28px !important; width: 100%; padding-left: 12px; display: block; white-space: nowrap; position: relative; 
+		    .row {
+				height: 42px !important; width: 100%; padding-left: 12px; display: block; white-space: nowrap; position: relative;
 			}
 			.row {
+				.dropTarget { display: flex; align-items: center; height: 100%; }
+				.selectionTarget { display: flex; align-items: center; width: 100%; height: 100%; }
+				.selectionTarget.isSelectionSelected::after,
+				.selectionTarget.isKeyboardFocused::after { border-radius: 8px; }
+
 				.icon.drag { left: 0px; }
 
 				&.isDone { color: var(--color-text-secondary); }
@@ -29,10 +34,12 @@
 				}
 
 				&:hover, &.hover {
-					.icon.drag { opacity: 1; }
+					&::before {
+						content: ''; position: absolute; top: 0px; bottom: 0px; left: 11px; right: 0px;
+						background-color: var(--color-shape-highlight-medium); border-radius: 8px; pointer-events: none;
+					}
 
-					.selectionTarget,
-					.cell.add { background-color: var(--color-shape-highlight-medium); border-radius: 6px; }
+					.icon.drag { opacity: 1; }
 
 					.cellWrapper.isName {
 						.cellContent:not(.isEditing) { max-width: calc(100% - 26px); }
@@ -62,7 +69,7 @@
 			.dropTarget.isOver.top::before { top: -2px; }
 			.dropTarget.isOver.bottom::before { bottom: -2px; }
 
-			.sides { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px 12px; }
+			.sides { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px 12px; width: 100%; }
 			.sides {
 				.side { display: flex; flex-direction: row; align-items: center; overflow: hidden; }
 				.side.left { flex: 1 1 auto; min-width: 40%; }
@@ -78,10 +85,10 @@
 				> .cellWrapper { flex-grow: 0; }
 			}
 
-			.row.add { height: 28px; padding-top: 0px; margin-top: 2px; }
+			.row.add { margin-top: 2px; }
 			.row.add {
-				.cell.add { padding: 0px; height: 28px; }
-				.btn { height: 100%; width: 100%; padding-top: 4px; padding-left: 4px; }
+				.cell.add { padding: 0px; height: 100%; display: flex; align-items: center; }
+				.btn { display: flex; align-items: center; height: 100%; width: 100%; padding-left: 4px; }
 			}
 
 			.cellWrapper,
@@ -168,6 +175,24 @@
 
 			&.isRegular {
 				.row { height: 64px !important; }
+				.iconObject { border-radius: 6px; background-color: var(--color-shape-highlight-medium); }
+				.iconObject {
+					&.isPage {
+						.iconEmoji { line-height: 20px; }
+						.iconCommon,
+						.smileImage { width: 20px; height: 20px; margin: -10px 0px 0px -10px; }
+					}
+					&.isBookmark {
+						.iconCommon { width: 20px; height: 20px; margin: -10px 0px 0px -10px; }
+					}
+					&.isFile,
+					&.isImage,
+					&.isVideo,
+					&.isAudio,
+					&.isPdf,
+					&.isArchive,
+					&.isTask { background-color: unset; }
+				}
 				.row {
 					.dropTarget { display: flex; align-items: center; height: 100%; }
 					.dropTarget.isOver.top::before { top: -3px; }
@@ -192,7 +217,6 @@
 					}
 				}
 
-				.row.add { height: 28px; display: block; }
 			}
 		}
 	}
diff --git a/src/ts/component/block/dataview/view/list.tsx b/src/ts/component/block/dataview/view/list.tsx
index 46d92a2d01..544c7ad8e2 100644
--- a/src/ts/component/block/dataview/view/list.tsx
+++ b/src/ts/component/block/dataview/view/list.tsx
@@ -5,7 +5,7 @@ import BodyRow from './list/row';
 import AddRow from './grid/body/add';
 import * as I from 'Interface';
 
-const HEIGHT_COMPACT = 32;
+const HEIGHT_COMPACT = 42;
 const HEIGHT_REGULAR = 64;
 
 const ViewList = forwardRef<I.ViewRef, I.ViewComponent>((props, ref) => {
diff --git a/src/ts/component/block/dataview/view/list/row.tsx b/src/ts/component/block/dataview/view/list/row.tsx
index 605a07c039..c113b647bc 100644
--- a/src/ts/component/block/dataview/view/list/row.tsx
+++ b/src/ts/component/block/dataview/view/list/row.tsx
@@ -186,7 +186,7 @@ const ListRow = forwardRef<I.RowRef, Props>((props, ref) => {
 				<IconObject
 					id={`list-icon-${record.id}`}
 					object={record}
-					size={48}
+					size={32}
 					canEdit={!props.readonly && U.Object.isTaskLayout(record.layout)}
 					noClick={true}
 				/>