corrad-af-2024/test-site-settings.md

Site Settings Features Test Guide

Features Implemented ✅

1. Font Size Stepper for Site Name

Location: Site Settings > Appearance Tab > Site Name Styling

Test Steps:

1. Navigate to /devtool/config/site-settings
2. Click on the "Appearance" tab
3. Locate the "Site Name Font Size" section
4. Use the stepper buttons (+/-) to change the font size (12px - 36px)
5. Observe the live preview showing the size change
6. Check the current size indicator showing the exact pixel value

Expected Results:

• Font size changes in real-time in the preview
• Size indicator updates with current pixel value
• Header and sidemenu site name reflect the new size after saving

2. Google Fonts Suggestions Dropdown

Location: Site Settings > Appearance Tab > Font Configuration

Test Steps:

1. In the same "Appearance" tab, scroll to "Font Configuration"
2. Open the "Popular Google Fonts" dropdown
3. Select a font (e.g., "Inter", "Poppins", "Roboto")
4. Verify the font is applied immediately
5. Check that a success toast notification appears
6. Verify the "Current Font" section updates

Expected Results:

• Dropdown contains 15 popular Google Fonts
• Font applies immediately when selected
• Success notification shows: "[Font Name] font applied successfully"
• Current font section shows the new font name and Google Fonts URL
• Dropdown resets after selection

3. Show Site Name in Header Toggle

Location: Site Settings > Basic Tab

Test Steps:

1. Go to the "Basic" tab
2. Locate the "Show site name in header" toggle
3. Toggle it OFF
4. Navigate to any other page
5. Check the header - site name should be hidden
6. Return to settings and toggle it ON
7. Check the header - site name should be visible again

Expected Results:

• When OFF: Site name is hidden in both header and sidemenu
• When ON: Site name is visible in both header and sidemenu
• Changes apply immediately without needing to save

4. Consistent UI Components

Verification Points:

• Uses rs-button components with proper variants (primary, outline)
• Uses rs-card components for layout
• Consistent spacing and typography
• Uses FontSizeStepper component with proper props
• Proper dark mode support
• Icons from Iconify (ic: prefix)

Design Patterns Used:

• Border rounded containers with proper padding
• Gray borders with dark mode variants
• Consistent form input styling
• Proper spacing with Tailwind classes
• Live preview sidebar with real-time updates

Database Fields Added ✅

• siteNameFontSize (Int, default: 18) - Already existed in Prisma schema
• Field is properly handled in API endpoints
• Synced with global site settings composable

API Integration ✅

• All settings are saved to /api/devtool/config/site-settings
• Font size is included in the POST request body
• Settings load correctly on page refresh
• Changes persist across browser sessions

Components Updated ✅

1. pages/devtool/config/site-settings/index.vue

   • Added font size stepper
   • Added Google Fonts dropdown
   • Enhanced live preview
   • Added visual feedback

2. components/layouts/Header.vue

   • Applied dynamic font sizing
   • Respects show/hide toggle

3. components/layouts/sidemenu/index.vue

   • Applied scaled font sizing
   • Respects show/hide toggle

4. composables/useSiteSettings.js

   • Added siteNameFontSize field
   • Maintains global state consistency

Testing Checklist ✅

• Font size stepper works (12px - 36px range)
• Font size preview updates in real-time
• Font size applies to header site name
• Font size applies to sidemenu site name (scaled)
• Google Fonts dropdown has 15 options
• Google Font selection applies immediately
• Font source URL updates when Google Font selected
• Show/hide toggle works for header
• Show/hide toggle works for sidemenu
• Live preview sidebar reflects all changes
• Settings save and persist correctly
• Dark mode compatibility
• Mobile responsiveness
• Toast notifications appear for font changes
• All UI components follow design system