From 96ec3629a21074d1dbf84f12e24d7c907308c63d Mon Sep 17 00:00:00 2001
From: bdim404 <i@bdim.moe>
Date: Fri, 13 Mar 2026 17:33:50 +0800
Subject: [PATCH] feat: enhance layout and styling in CharactersPanel and
 ChaptersPanel for improved UI

---
 qwen3-tts-frontend/src/pages/Audiobook.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/qwen3-tts-frontend/src/pages/Audiobook.tsx b/qwen3-tts-frontend/src/pages/Audiobook.tsx
index 24faf41..63a0c66 100644
--- a/qwen3-tts-frontend/src/pages/Audiobook.tsx
+++ b/qwen3-tts-frontend/src/pages/Audiobook.tsx
@@ -1189,7 +1189,7 @@ function CharactersPanel({
 
   if (collapsed && hasChaptersOutline) {
     return (
-      <div className="w-44 shrink-0 flex flex-col border-r border-emerald-500/20 bg-emerald-500/5 overflow-hidden">
+      <div className="w-44 shrink-0 flex flex-col rounded-xl border border-emerald-500/20 bg-emerald-500/5 overflow-hidden">
         <div className="flex items-center justify-between px-2 py-2 shrink-0 border-b border-emerald-500/20">
           <span className="text-xs font-medium text-emerald-400/80 truncate">
             {t('projectCard.chapters.title', { count: detail!.chapters.length })}
@@ -1198,14 +1198,14 @@ function CharactersPanel({
             <PanelLeftOpen className="h-3.5 w-3.5" />
           </Button>
         </div>
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto px-2 py-2 space-y-1.5">
           {detail!.chapters.map(ch => {
             const chTitle = ch.title || t('projectCard.chapters.defaultTitle', { index: ch.chapter_index + 1 })
             const dotClass = ch.status === 'done' ? 'bg-green-400' : ch.status === 'error' ? 'bg-destructive' : ch.status === 'parsing' || ch.status === 'generating' ? 'bg-amber-400' : ch.status === 'ready' ? 'bg-blue-400' : 'bg-muted-foreground/50'
             return (
               <button
                 key={ch.id}
-                className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/60 border-b border-border/30 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                className="w-full flex items-center gap-1.5 px-3 py-2 text-left rounded-lg border bg-muted/30 shadow-sm hover:bg-muted/60 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
                 onClick={() => onScrollToChapter(ch.id)}
               >
                 <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotClass}`} />
@@ -1219,7 +1219,7 @@ function CharactersPanel({
   }
 
   return (
-    <div className="w-72 shrink-0 flex flex-col border-r border-blue-500/20 bg-blue-500/5 overflow-hidden">
+    <div className="w-72 shrink-0 flex flex-col rounded-xl border border-blue-500/20 bg-blue-500/5 overflow-hidden">
       <div className="flex items-center justify-between px-3 py-2 shrink-0">
         <span className="text-xs font-medium text-blue-400/80">
           {t('projectCard.characters.title', { count: charCount })}
@@ -1245,7 +1245,7 @@ function CharactersPanel({
       ) : (
         <div className="flex-1 overflow-y-auto px-2 py-2 space-y-1.5">
           {detail.characters.map(char => (
-            <div key={char.id} className="border rounded px-3 py-2">
+            <div key={char.id} className="border rounded-lg px-3 py-2 bg-muted/30 shadow-sm">
               {editingCharId === char.id ? (
                 <div className="space-y-2">
                   <Input
@@ -1570,7 +1570,7 @@ function ChaptersPanel({
         </div>
       </DialogContent>
     </Dialog>
-    <div className="flex-1 flex flex-col bg-emerald-500/5 overflow-hidden">
+    <div className="flex-1 flex flex-col rounded-xl border border-emerald-500/20 bg-emerald-500/5 overflow-hidden">
       <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between px-3 py-2 shrink-0">
         <span className="text-xs font-medium text-emerald-400/80">
           {t('projectCard.chapters.title', { count: detail?.chapters.length ?? 0 })}
@@ -2418,7 +2418,7 @@ export default function Audiobook() {
                 </div>
               )}
 
-              <div className="flex-1 flex overflow-hidden mt-2">
+              <div className="flex-1 flex overflow-hidden mt-2 px-2 pb-2 gap-2">
                 <CharactersPanel
                   project={selectedProject}
                   detail={detail}