From b5fa0e280bff2e75f4dedd505609fdc477bb3fd9 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Mon, 13 Apr 2026 15:41:09 +0300
Subject: [PATCH] refactor(frontend): move comments above detail blocks

---
 frontend/src/app/procurement/page.tsx         | 54 ++++++-------
 .../components/requests/RequestListItem.tsx   | 78 +++++++++----------
 2 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/frontend/src/app/procurement/page.tsx b/frontend/src/app/procurement/page.tsx
index c2dfe7f9..ee4fad88 100644
--- a/frontend/src/app/procurement/page.tsx
+++ b/frontend/src/app/procurement/page.tsx
@@ -829,33 +829,6 @@ export default function ProcurementPage() {
 
                   {(expanded || commentsOpen) && (
                     <div className="mt-4 space-y-3 px-4 pb-4">
-                      {expanded ? (
-                        <ProcurementRequestDetailContent
-                          request={resolvedDetail}
-                          displayUserName={displayUserName}
-                          footer={(
-                            <ProcurementRequestActionButtons
-                              request={req}
-                              busyKey={busyKey}
-                              canManage={canManage}
-                              isAuthor={isAuthor}
-                              isExecutor={isExecutor}
-                              isFinal={isFinal}
-                              showApprovalActions={false}
-                              showSecondaryActions={false}
-                              onSubmit={handleSubmit}
-                              onEdit={openEdit}
-                              onDelete={handleDelete}
-                              onApprove={handleApprove}
-                              onReject={handleReject}
-                              onStart={handleStart}
-                              onComplete={handleComplete}
-                              onCancel={handleCancel}
-                            />
-                          )}
-                        />
-                      ) : null}
-
                       {commentsOpen ? (
                         <div className={expanded ? "app-surface rounded-xl p-3" : "app-surface-elevated rounded-xl p-3"}>
                           <div className="space-y-2">
@@ -893,6 +866,33 @@ export default function ProcurementPage() {
                           </div>
                         </div>
                       ) : null}
+
+                      {expanded ? (
+                        <ProcurementRequestDetailContent
+                          request={resolvedDetail}
+                          displayUserName={displayUserName}
+                          footer={(
+                            <ProcurementRequestActionButtons
+                              request={req}
+                              busyKey={busyKey}
+                              canManage={canManage}
+                              isAuthor={isAuthor}
+                              isExecutor={isExecutor}
+                              isFinal={isFinal}
+                              showApprovalActions={false}
+                              showSecondaryActions={false}
+                              onSubmit={handleSubmit}
+                              onEdit={openEdit}
+                              onDelete={handleDelete}
+                              onApprove={handleApprove}
+                              onReject={handleReject}
+                              onStart={handleStart}
+                              onComplete={handleComplete}
+                              onCancel={handleCancel}
+                            />
+                          )}
+                        />
+                      ) : null}
                     </div>
                   )}
                 </article>
diff --git a/frontend/src/components/requests/RequestListItem.tsx b/frontend/src/components/requests/RequestListItem.tsx
index fc69b8d1..e18bffd0 100644
--- a/frontend/src/components/requests/RequestListItem.tsx
+++ b/frontend/src/components/requests/RequestListItem.tsx
@@ -304,8 +304,46 @@ export function RequestListItem({
 
         {(rowOpen || commentsOpen) ? (
           <div className="app-surface-elevated mt-4 rounded-xl p-4">
+            {commentsOpen ? (
+              <div className={rowOpen ? "app-surface rounded-xl p-3" : "app-surface rounded-xl p-3"}>
+                <div className="space-y-2">
+                  {comments.length === 0 ? (
+                    <p className="app-text-muted text-xs">Комментариев пока нет</p>
+                  ) : (
+                    comments.map((comment) => (
+                      <div
+                        key={comment.id}
+                        className="app-surface-muted rounded-lg px-3 py-2 text-xs text-[var(--foreground)]"
+                      >
+                        <div className="mb-1 flex items-center justify-between gap-2">
+                          <span className="font-medium">{displayUserName(comment.author)}</span>
+                          <div className="flex items-center gap-2">
+                            <span className="app-text-muted">{formatDate(comment.created_at)}</span>
+                            {Boolean(comment.author?.id && currentUserId === comment.author.id) ? (
+                              <CommentDeleteButton
+                                onClick={() => onDeleteComment(request.id, comment.id)}
+                              />
+                            ) : null}
+                          </div>
+                        </div>
+                        <p className="app-text-wrap text-[var(--foreground)]">{comment.text}</p>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="mt-2">
+                  <CommentComposer
+                    value={commentDraft}
+                    onChange={(value) => onSetCommentDraft(request.id, value)}
+                    onSubmit={() => onAddComment(request.id)}
+                    disabled={busyKey === `comment-${request.id}`}
+                  />
+                </div>
+              </div>
+            ) : null}
+
             {rowOpen ? (
-              <div className="space-y-3 text-xs">
+              <div className={`${commentsOpen ? "mt-3" : ""} space-y-3 text-xs`}>
                 <div className="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
                   <div>
                     <span className="app-text-muted">Принял решение:</span>{" "}
@@ -387,44 +425,6 @@ export function RequestListItem({
                 </div>
               </div>
             ) : null}
-
-            {commentsOpen ? (
-              <div className={rowOpen ? "app-surface mt-3 rounded-xl p-3" : "app-surface rounded-xl p-3"}>
-                <div className="space-y-2">
-                  {comments.length === 0 ? (
-                    <p className="app-text-muted text-xs">Комментариев пока нет</p>
-                  ) : (
-                    comments.map((comment) => (
-                      <div
-                        key={comment.id}
-                        className="app-surface-muted rounded-lg px-3 py-2 text-xs text-[var(--foreground)]"
-                      >
-                        <div className="mb-1 flex items-center justify-between gap-2">
-                          <span className="font-medium">{displayUserName(comment.author)}</span>
-                          <div className="flex items-center gap-2">
-                            <span className="app-text-muted">{formatDate(comment.created_at)}</span>
-                            {Boolean(comment.author?.id && currentUserId === comment.author.id) ? (
-                              <CommentDeleteButton
-                                onClick={() => onDeleteComment(request.id, comment.id)}
-                              />
-                            ) : null}
-                          </div>
-                        </div>
-                        <p className="app-text-wrap text-[var(--foreground)]">{comment.text}</p>
-                      </div>
-                    ))
-                  )}
-                </div>
-                <div className="mt-2">
-                  <CommentComposer
-                    value={commentDraft}
-                    onChange={(value) => onSetCommentDraft(request.id, value)}
-                    onSubmit={() => onAddComment(request.id)}
-                    disabled={busyKey === `comment-${request.id}`}
-                  />
-                </div>
-              </div>
-            ) : null}
           </div>
         ) : null}
       </div>