feat: add Reading Pane at Bottom mail layout #262

components/settings/layout-settings.tsx

@@ -20,8 +20,6 @@ function MailLayoutPreview({
   value: MailLayout;
   t: (key: string) => string;
 }) {
-  const isSplit = value === 'split';
-
   return (
     <div className="mt-3 rounded-xl border border-border bg-background p-3">
       <div>
@@ -33,7 +31,7 @@ function MailLayoutPreview({
         <div className="flex h-28">
           <div className="w-11 border-r border-border bg-muted/40" />
 
-          {isSplit ? (
+          {value === 'split' && (
             <>
               <div className="w-28 border-r border-border bg-background">
                 {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
@@ -56,7 +54,9 @@ function MailLayoutPreview({
                 <div className="mt-1.5 h-2 w-2/3 rounded bg-foreground/10" />
               </div>
             </>
-          ) : (
+          )}
+
+          {value === 'focus' && (
             <div className="flex-1 bg-background px-2 py-2">
               <div className="space-y-1.5">
                 {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
@@ -76,6 +76,32 @@ function MailLayoutPreview({
               </div>
             </div>
           )}
+
+          {value === 'horizontal' && (
+            <div className="flex-1 flex flex-col bg-background">
+              <div className="border-b border-border bg-background">
+                {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
+                  <div
+                    key={row.subject}
+                    className={cn(
+                      'border-b border-border px-2 py-1 text-[10px] last:border-b-0',
+                      row.selected && 'bg-primary/10'
+                    )}
+                  >
+                    <div className="truncate text-foreground">
+                      <span className="font-medium">{row.sender}</span>
+                      <span className="mx-1.5 text-muted-foreground">{row.subject}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="flex-1 bg-background px-3 py-2">
+                <div className="h-2 w-20 rounded bg-foreground/10" />
+                <div className="mt-1.5 h-1.5 w-full rounded bg-foreground/10" />
+                <div className="mt-1 h-1.5 w-5/6 rounded bg-foreground/10" />
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -100,6 +126,7 @@ export function LayoutSettings() {
             options={[
               { value: 'split', label: tEmail('mail_layout.split') },
               { value: 'focus', label: tEmail('mail_layout.focus') },
+              { value: 'horizontal', label: tEmail('mail_layout.horizontal') },
             ]}
           />
           <MailLayoutPreview value={mailLayout} t={tEmail} />