From 758e5be07e38c5b73cd3d9fc0d61f6b524951b5d Mon Sep 17 00:00:00 2001
From: Mike Mhlv <mhlv@anytype.io>
Date: Fri, 6 Jun 2025 12:44:28 +0100
Subject: [PATCH] JS-7004: wip

---
 src/scss/block/dataview/view/list.scss        |  9 ++-
 .../block/dataview/view/list/row.tsx          | 75 ++++++++++++-------
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/scss/block/dataview/view/list.scss b/src/scss/block/dataview/view/list.scss
index 720c1b835d..6d4cffa00a 100644
--- a/src/scss/block/dataview/view/list.scss
+++ b/src/scss/block/dataview/view/list.scss
@@ -12,6 +12,13 @@
 				.cellContent:not(.isName) { display: none; }
 			}
 
+			.sides { display: flex; align-items: center; justify-content: space-between; gap: 0px 16px; }
+			.sides {
+				.side.right {
+					.cellContent:first-child::before { display: none; }
+				}
+			}
+
 			.dropTarget { height: 100%; padding: 0px 0px 10px 0px; }
 
 			.cellContent { 
@@ -108,4 +115,4 @@
 			.row { padding-left: 0px !important; height: 34px !important; }
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/ts/component/block/dataview/view/list/row.tsx b/src/ts/component/block/dataview/view/list/row.tsx
index a18c67964c..95fb216954 100644
--- a/src/ts/component/block/dataview/view/list/row.tsx
+++ b/src/ts/component/block/dataview/view/list/row.tsx
@@ -12,16 +12,29 @@ const Row = observer(class Row extends React.Component<Props> {
 
 	_isMounted = false;
 	node: any = null;
+	refNames: any[] = [];
 
 	render () {
 		const { rootId, block, recordId, getRecord, getView, onRef, style, onContext, getIdPrefix, isInline, isCollection, onDragRecordStart, onSelectToggle } = this.props;
 		const view = getView();
-		const relations = view.getVisibleRelations();
 		const idPrefix = getIdPrefix();
 		const subId = S.Record.getSubId(rootId, block.id);
 		const record = getRecord(recordId);
 		const cn = [ 'row' ];
 
+		const relations = view.getVisibleRelations();
+		const nameIndex = relations.findIndex(it => it.relationKey == 'name');
+		const left = [];
+		const right = [];
+
+		relations.forEach((el, idx) => {
+			if (idx <= nameIndex) {
+				left.push(el);
+			} else {
+				right.push(el);
+			};
+		});
+
 		// Subscriptions
 		const { hideIcon } = view;
 		const { done } = record;
@@ -30,33 +43,41 @@ const Row = observer(class Row extends React.Component<Props> {
 			cn.push('isDone');
 		};
 
-		let content = (
-			<>
-				{relations.map((vr: any, i: number) => {
-					const relation = S.Record.getRelationByKey(vr.relationKey);
-					const id = Relation.cellId(idPrefix, relation.relationKey, record.id);
+		const mapper = (vr: any, i: number) => {
+			const relation = S.Record.getRelationByKey(vr.relationKey);
+			const id = Relation.cellId(idPrefix, relation.relationKey, record.id);
 
-					return (
-						<Cell
-							key={'list-cell-' + relation.relationKey}
-							elementId={id}
-							ref={ref => onRef(ref, id)}
-							{...this.props}
-							getRecord={() => record}
-							subId={subId}
-							relationKey={relation.relationKey}
-							viewType={I.ViewType.List}
-							idPrefix={idPrefix}
-							onClick={e => this.onCellClick(e, relation)}
-							isInline={true}
-							tooltipParam={{ text: relation.name, typeX: I.MenuDirection.Left, offsetX: 14 }}
-							arrayLimit={2}
-							iconSize={relation.relationKey == 'name' ? 24 : 18}
-							withName={true}
-						/>
-					);
-				})}
-			</>
+			return (
+				<Cell
+					key={'list-cell-' + relation.relationKey}
+					elementId={id}
+					ref={ref => onRef(ref, id)}
+					{...this.props}
+					getRecord={() => record}
+					subId={subId}
+					relationKey={relation.relationKey}
+					viewType={I.ViewType.List}
+					idPrefix={idPrefix}
+					onClick={e => this.onCellClick(e, relation)}
+					isInline={true}
+					tooltipParam={{ text: relation.name, typeX: I.MenuDirection.Left, offsetX: 14 }}
+					arrayLimit={2}
+					iconSize={relation.relationKey == 'name' ? 24 : 18}
+					withName={true}
+				/>
+			);
+		};
+
+		let content = (
+			<div className="sides">
+				<div className="side left">
+					{left.map(mapper)}
+				</div>
+				<div className="side right">
+					{right.map(mapper)}
+				</div>
+				{/*{relations.map(mapper)}*/}
+			</div>
 		);
 
 		if (!isInline) {