feat: Add adjustable text size setting to interface (#19186)
* Add adjustable text size setting to interface Introduces a user-configurable text size (scale) setting, accessible via a slider in the interface settings. Updates CSS and Sidebar chat item components to respect the new --app-text-scale variable, and persists the setting in the store. Adds related i18n strings and ensures the text scale is applied globally and clamped to allowed values. * Refactor text scale logic into utility module Moved all text scale related constants and functions from components and stores into a new utility module (src/lib/utils/text-scale.ts). Updated imports and usage in Interface.svelte and index.ts to use the new module, improving code organization and reusability. * Adjust sidebar chat scaling without extra classes keep sidebar markup using existing Tailwind utility classes so chat items render identically pre-feature move all text-scale sizing into app.css under the #sidebar-chat-item selectors change the root font-size multiplier to use 1rem instead of an explicit 16px so browser/user preferences propagate * Update Switch.svelte Adjust toggles from fixed pixel to rem to scale with the text size * Update Interface.svelte Updated label from 'Text Scale' to 'UI Scale'. Added padding around slider * Update app.css Added comments
This commit is contained in:
55
src/lib/utils/text-scale.ts
Normal file
55
src/lib/utils/text-scale.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
const TEXT_SCALE_VALUES = [1, 1.1, 1.2, 1.3, 1.4, 1.5] as const;
|
||||
|
||||
export type TextScale = (typeof TEXT_SCALE_VALUES)[number];
|
||||
|
||||
export const TEXT_SCALE_MIN = TEXT_SCALE_VALUES[0];
|
||||
export const TEXT_SCALE_MAX = TEXT_SCALE_VALUES[TEXT_SCALE_VALUES.length - 1];
|
||||
|
||||
export const DEFAULT_TEXT_SCALE: TextScale = 1;
|
||||
export const DEFAULT_TEXT_SCALE_INDEX = TEXT_SCALE_VALUES.findIndex(
|
||||
(scale) => scale === DEFAULT_TEXT_SCALE
|
||||
);
|
||||
|
||||
export const getScaleFromIndex = (index: number): TextScale => {
|
||||
if (!Number.isFinite(index)) {
|
||||
return TEXT_SCALE_VALUES[DEFAULT_TEXT_SCALE_INDEX];
|
||||
}
|
||||
|
||||
return TEXT_SCALE_VALUES[index] ?? TEXT_SCALE_VALUES[DEFAULT_TEXT_SCALE_INDEX];
|
||||
};
|
||||
|
||||
export const findClosestTextScaleIndex = (value: unknown): number => {
|
||||
const numeric = Number(value);
|
||||
|
||||
if (!Number.isFinite(numeric)) {
|
||||
return DEFAULT_TEXT_SCALE_INDEX;
|
||||
}
|
||||
|
||||
let closestIndex = DEFAULT_TEXT_SCALE_INDEX;
|
||||
let smallestDistance = Number.POSITIVE_INFINITY;
|
||||
|
||||
TEXT_SCALE_VALUES.forEach((scale, idx) => {
|
||||
const distance = Math.abs(scale - numeric);
|
||||
|
||||
if (distance < smallestDistance) {
|
||||
closestIndex = idx;
|
||||
smallestDistance = distance;
|
||||
}
|
||||
});
|
||||
|
||||
return closestIndex;
|
||||
};
|
||||
|
||||
export const resolveTextScale = (value: unknown): TextScale => {
|
||||
return TEXT_SCALE_VALUES[findClosestTextScaleIndex(value)] ?? DEFAULT_TEXT_SCALE;
|
||||
};
|
||||
|
||||
export const setDocumentTextScale = (scale: TextScale) => {
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty('--app-text-scale', scale.toString());
|
||||
};
|
||||
|
||||
export { TEXT_SCALE_VALUES };
|
||||
Reference in New Issue
Block a user