From 8439727b152accf61f0c28158b92788510ca086e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 3 Nov 2025 18:51:13 -0600
Subject: [PATCH] feat(web): improve calendar abacus preview styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CalendarPreview changes:
- Remove showNumbers display from all abaci for cleaner calendar look
- Increase day abaci scaleFactor from 0.35 to 1.0 (fills grid squares)
- Remove year from month title (shows only month name)

CalendarConfigPanel changes:
- Replace link to /create with inline AbacusDisplayDropdown
- Add preview abacus showing current style (value=12, 2 columns)
- Users can now edit abacus styles directly in calendar page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/CalendarConfigPanel.tsx        | 23 ++++++++-----------
 .../calendar/components/CalendarPreview.tsx   |  8 +++++--
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx b/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx
index c0a31278..441b5e3d 100644
--- a/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx
+++ b/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx
@@ -2,7 +2,7 @@
 
 import { css } from '../../../../../styled-system/css'
 import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
-import Link from 'next/link'
+import { AbacusDisplayDropdown } from '@/components/AbacusDisplayDropdown'
 
 interface CalendarConfigPanelProps {
   month: number
@@ -243,7 +243,7 @@ export function CalendarConfigPanel({
         </select>
       </fieldset>
 
-      {/* Abacus Styling Info */}
+      {/* Abacus Styling */}
       <div
         data-section="styling-info"
         className={css({
@@ -259,7 +259,7 @@ export function CalendarConfigPanel({
             color: 'gray.300',
           })}
         >
-          Using your saved abacus style:
+          Calendar abacus style preview:
         </p>
         <div
           className={css({
@@ -273,22 +273,17 @@ export function CalendarConfigPanel({
             columns={2}
             customStyles={abacusConfig.customStyles}
             scaleFactor={0.5}
+            showNumbers={false}
           />
         </div>
-        <Link
-          href="/create"
-          data-action="edit-style"
+        <div
           className={css({
-            display: 'block',
-            textAlign: 'center',
-            fontSize: '0.875rem',
-            color: 'yellow.400',
-            textDecoration: 'underline',
-            _hover: { color: 'yellow.300' },
+            display: 'flex',
+            justifyContent: 'center',
           })}
         >
-          Edit your abacus style →
-        </Link>
+          <AbacusDisplayDropdown />
+        </div>
       </div>
 
       {/* Generate Button */}
diff --git a/apps/web/src/app/create/calendar/components/CalendarPreview.tsx b/apps/web/src/app/create/calendar/components/CalendarPreview.tsx
index 5b194376..116343ac 100644
--- a/apps/web/src/app/create/calendar/components/CalendarPreview.tsx
+++ b/apps/web/src/app/create/calendar/components/CalendarPreview.tsx
@@ -87,6 +87,7 @@ export function CalendarPreview({ month, year, format }: CalendarPreviewProps) {
               columns={4}
               customStyles={abacusConfig.customStyles}
               scaleFactor={0.4}
+              showNumbers={false}
             />
           </div>
 
@@ -103,6 +104,7 @@ export function CalendarPreview({ month, year, format }: CalendarPreviewProps) {
               columns={2}
               customStyles={abacusConfig.customStyles}
               scaleFactor={0.8}
+              showNumbers={false}
             />
           </div>
 
@@ -184,7 +186,7 @@ export function CalendarPreview({ month, year, format }: CalendarPreviewProps) {
             color: 'yellow.400',
           })}
         >
-          {MONTHS[month - 1]} {year}
+          {MONTHS[month - 1]}
         </h2>
         <div
           className={css({
@@ -197,6 +199,7 @@ export function CalendarPreview({ month, year, format }: CalendarPreviewProps) {
             columns={4}
             customStyles={abacusConfig.customStyles}
             scaleFactor={0.6}
+            showNumbers={false}
           />
         </div>
       </div>
@@ -244,7 +247,8 @@ export function CalendarPreview({ month, year, format }: CalendarPreviewProps) {
                 value={day}
                 columns={2}
                 customStyles={abacusConfig.customStyles}
-                scaleFactor={0.35}
+                scaleFactor={1.0}
+                showNumbers={false}
               />
             )}
           </div>