feat(settings): per-user font size setting with server persistence#65
Open
arawal wants to merge 1 commit into
Open
feat(settings): per-user font size setting with server persistence#65arawal wants to merge 1 commit into
arawal wants to merge 1 commit into
Conversation
|
Preview deployment: https://pr-65.dev-valet-turnkey-client.pages.dev |
arawal
force-pushed
the
feat/per-user-font-scale
branch
from
10f1401 to
c78208f
Compare
Add a font size slider (80%-150%, 10% steps) to the Appearance section of user settings. The setting is persisted server-side (users.font_scale DB column) and cached locally in localStorage (Zustand ui store) for instant apply on page load without a flash. - Migration 0020: ALTER TABLE users ADD COLUMN font_scale REAL DEFAULT 1.0 - Drizzle schema, rowToUser, and updateUserProfile updated - PATCH /auth/me validates fontScale (min 0.8, max 1.5) - Shared User type gets fontScale field - Zustand ui store gets fontScale + setFontScale (persisted) - FontScaleProvider hook applies document.documentElement.style.fontSize and reconciles server value into the store after auth hydration - Settings UI: range slider with live % label, Reset button, and a 600ms debounce before the PATCH /auth/me call
arawal
force-pushed
the
feat/per-user-font-scale
branch
from
c78208f to
d835105
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Add a font size slider (80%-150%, 10% steps, default 100%) to the Appearance section of user settings. Moving the slider scales the entire site instantly by setting
document.documentElement.style.fontSize- since the app has no explicit root font-size and Tailwind sizes are all rem-based, this scales virtually everything.Why
Users have different comfort levels and display densities. A global font scale is the lowest-friction way to accommodate this without touching individual components.
How
Server persistence (source of truth across devices)
0020:ALTER TABLE users ADD COLUMN font_scale REAL DEFAULT 1.0PATCH /auth/menow acceptsfontScale(validatedz.number().min(0.8).max(1.5))GET /auth/mereturns it as part of the existinguserobject (no change needed)Local cache (instant apply on load, no flash)
uistore getsfontScale+setFontScale, included in thevalet-uilocalStorage keyFontScaleProvider(mounted inapp.tsxalongsideThemeProvider) applies the scale to the DOM and reconciles the server value into the store after auth hydration - server wins, ensuring cross-device consistencySettings UI
80%-150%, step 10%)PATCH /auth/mecall by 600ms