refactor(layout): extract first panel border to SplitPanel component

Made-with: Cursor

Author: Innei

src/components/draft/draft-recovery-modal.tsx

@@ -472,7 +472,7 @@ export const DraftRecoveryModal = defineComponent({
                 max={0.4}
                 class="h-full"
               >
-                <div class="flex h-full flex-col border-r border-neutral-200 dark:border-neutral-800">
+                <div class="flex h-full flex-col">
                   {/* Version list header */}
                   <div class="flex items-center gap-2 border-b border-neutral-200 px-4 py-2.5 dark:border-neutral-800">
                     <GitCompare class="size-4 text-neutral-500" />

src/components/layout/master-detail-layout.tsx

@@ -74,12 +74,7 @@ export const MasterDetailLayout = defineComponent({
           max={props.max}
           class="h-full"
         >
-          <div
-            class={[
-              'h-full overflow-hidden border-r border-neutral-200 dark:border-neutral-800',
-              props.listBgClass,
-            ]}
-          >
+          <div class={['h-full overflow-hidden', props.listBgClass]}>
             {slots.list?.()}
           </div>
           <div

src/components/layout/split-panel-layout.tsx

@@ -84,9 +84,7 @@ export const SplitPanelLayout = defineComponent({
         max={props.max}
         class="h-full"
       >
-        <div class="h-full overflow-hidden border-r border-neutral-200 dark:border-neutral-800">
-          {slots.list?.()}
-        </div>
+        <div class="h-full overflow-hidden">{slots.list?.()}</div>
         <div class="h-full min-w-0 flex-1 overflow-hidden">
           {props.showPanel ? slots.panel?.() : slots.empty?.()}
         </div>

src/components/layout/split-panel.tsx

@@ -74,7 +74,18 @@ export const SplitPanel = defineComponent({
           onDragEnd={props.onDragEnd}
         >
           {{
-            1: () => renderPanel(panels[0]),
+            1: () => (
+              <div
+                class={[
+                  'h-full overflow-hidden',
+                  props.direction === 'vertical'
+                    ? 'border-b border-neutral-200 dark:border-neutral-800'
+                    : 'border-r border-neutral-200 dark:border-neutral-800',
+                ]}
+              >
+                {renderPanel(panels[0])}
+              </div>
+            ),
             2: () => renderPanel(panels[1]),
             'resize-trigger': () => (
               <SplitResizeTrigger triggerClass={props.resizeTriggerClass} />

src/views/drafts/components/draft-detail-base.tsx

@@ -600,7 +600,7 @@ export const DraftDetailBase = defineComponent({
               resizeTriggerClass="z-[10]"
               class="h-full"
             >
-              <div class="flex h-full flex-col border-r border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+              <div class="flex h-full flex-col bg-white dark:bg-neutral-900">
                 {renderVersionList()}
               </div>
               <div class="flex h-full flex-col bg-neutral-50 dark:bg-neutral-950">