Improve patch list layout: lightskyblue title, single line with truncate, date only

This commit is contained in:
backuppc
2025-12-02 17:27:38 +09:00
parent 02e718fdb6
commit 7732403a0d

View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { FileText, Search, RefreshCw, Calendar, User, Edit3 } from 'lucide-react';
import { FileText, Search, RefreshCw, Calendar, Edit3, User } from 'lucide-react';
import { comms } from '@/communication';
import { BoardItem } from '@/types';
@@ -168,38 +168,29 @@ export function PatchList() {
boardList.map((item) => (
<div
key={item.idx}
className="px-6 py-4 hover:bg-white/5 transition-colors cursor-pointer"
className="px-6 py-3 hover:bg-white/5 transition-colors cursor-pointer"
onClick={() => handleRowClick(item)}
>
<div className="flex items-center justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 flex-shrink-0">
{item.header && (
<span className="px-2 py-0.5 bg-primary-500/20 text-primary-400 text-xs rounded">
<span className="px-2 py-0.5 bg-primary-500/20 text-primary-400 text-xs rounded whitespace-nowrap">
{item.header}
</span>
)}
{item.cate && (
<span className="px-2 py-0.5 bg-white/10 text-white/70 text-xs rounded">
<span className="px-2 py-0.5 bg-white/10 text-white/70 text-xs rounded whitespace-nowrap">
{item.cate}
</span>
)}
</div>
<h4 className="text-white font-medium mb-1">{item.title}</h4>
<p className="text-white/60 text-sm line-clamp-1">{item.contents}</p>
</div>
<div className="flex flex-col items-end gap-1 flex-shrink-0">
<div className="flex items-center text-white/60 text-xs">
<User className="w-3 h-3 mr-1" />
{item.wuid_name || item.wuid}
</div>
<div className="flex items-center text-white/60 text-xs">
<h4 className="text-[#87CEEB] font-medium flex-1 min-w-0 truncate">{item.title}</h4>
<div className="flex items-center text-white/60 text-xs flex-shrink-0">
<Calendar className="w-3 h-3 mr-1" />
{formatDate(item.wdate)}
</div>
</div>
</div>
</div>
))
)}
</div>