feat(recipes): add toolbar toggle and settings preview for masonry layout

static/css/components/modal/settings-modal.css

@@ -911,6 +911,93 @@
     outline: none;
 }
 
+/* Recipes layout segmented control with visual previews */
+.layout-options-control {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.layout-options {
+    display: flex;
+    gap: 6px;
+    width: 100%;
+}
+
+.layout-option {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 8px;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+    background-color: var(--lora-surface);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.layout-option:hover,
+.layout-option:focus-visible {
+    border-color: var(--lora-accent);
+    outline: none;
+}
+
+.layout-option.active {
+    border-color: var(--lora-accent);
+    background-color: rgba(from var(--lora-accent) r g b / 0.12);
+    color: var(--lora-accent);
+}
+
+.layout-option-label {
+    font-size: 0.85em;
+    white-space: nowrap;
+}
+
+.layout-option-preview {
+    width: 72px;
+    height: 44px;
+    padding: 4px;
+    border-radius: var(--border-radius-xs);
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    box-sizing: border-box;
+}
+
+.layout-option-preview span {
+    background: currentColor;
+    opacity: 0.4;
+    border-radius: 1px;
+}
+
+.layout-preview-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 3px;
+}
+
+.layout-preview-masonry {
+    display: flex;
+    gap: 3px;
+    align-items: flex-start;
+}
+
+.layout-preview-masonry span {
+    flex: 1;
+    height: 100%;
+}
+
+.layout-preview-masonry span:nth-child(2) {
+    height: 60%;
+}
+
+.layout-preview-masonry span:nth-child(3) {
+    height: 80%;
+}
+
 /* Range Slider Control */
 .range-control {
     width: 100%;

static/css/layout.css

@@ -168,6 +168,34 @@
     border-color: var(--lora-accent);
 }
 
+/* Recipes layout toggle (grid / masonry) — segmented control in the toolbar */
+.layout-toggle-group {
+    display: flex;
+    gap: 0;
+}
+
+.layout-toggle-group .layout-toggle-btn {
+    min-width: 36px;
+    width: 36px;
+    padding: 4px 0;
+    border-radius: 0;
+}
+
+.layout-toggle-group .layout-toggle-btn:first-child {
+    border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);
+    border-right: none;
+}
+
+.layout-toggle-group .layout-toggle-btn:last-child {
+    border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
+}
+
+.layout-toggle-group .layout-toggle-btn:hover,
+.layout-toggle-group .layout-toggle-btn:focus-visible {
+    transform: none;
+    box-shadow: var(--shadow-xs);
+}
+
 /* Keyboard shortcut indicator styling */
 .shortcut-key {
     display: inline-flex;