feat: add spacing option to friends locations card and favtories cards (#1477)

src/views/Favorites/composables/useFavoritesCardScaling.js

@@ -28,12 +28,33 @@ export function useFavoritesCardScaling(options = {}) {
         max: options.max ?? 1,
         step: options.step ?? 0.01
     };
+    const spacingSlider = {
+        min: options.spacingMin ?? 0.5,
+        max: options.spacingMax ?? 1.5,
+        step: options.spacingStep ?? 0.05
+    };
     const baseWidth = options.baseWidth ?? 260;
     const baseGap = options.baseGap ?? 12;
     const gapStep = options.gapStep ?? 8;
     const configKey = options.configKey ?? '';
+    const spacingConfigKey = options.spacingConfigKey ?? '';
+    const basePaddingY = options.basePaddingY ?? 8;
+    const basePaddingX = options.basePaddingX ?? 10;
+    const baseContentGap = options.baseContentGap ?? 10;
+    const baseActionGap = options.baseActionGap ?? 8;
+    const baseActionGroupGap = options.baseActionGroupGap ?? 6;
+    const baseActionMargin = options.baseActionMargin ?? 8;
+    const baseCheckboxMargin = options.baseCheckboxMargin ?? 10;
+    const minGap = options.minGap ?? 4;
+    const minPadding = options.minPadding ?? 4;
+    const defaultSpacing = clamp(
+        options.defaultSpacing ?? 1,
+        spacingSlider.min,
+        spacingSlider.max
+    );
 
     const cardScaleBase = ref(1);
+    const cardSpacingBase = ref(defaultSpacing);
     const containerRef = ref(null);
     const containerWidth = ref(0);
 
@@ -69,15 +90,59 @@ export function useFavoritesCardScaling(options = {}) {
             const nextValue = clamp(Number(value) || 1, slider.min, slider.max);
             cardScaleBase.value = nextValue;
             if (configKey) {
-                configRepository.setString(configKey, nextValue);
+                configRepository.setString(configKey, String(nextValue));
+            }
+        }
+    });
+
+    const cardSpacing = computed({
+        get: () => cardSpacingBase.value,
+        set: (value) => {
+            const nextValue = clamp(
+                Number(value) || 1,
+                spacingSlider.min,
+                spacingSlider.max
+            );
+            cardSpacingBase.value = nextValue;
+            if (spacingConfigKey) {
+                configRepository.setString(spacingConfigKey, String(nextValue));
             }
         }
     });
 
     const gridStyle = computed(() => {
         const minWidth = baseWidth * cardScale.value;
-        const rawGap = baseGap + (cardScale.value - 1) * gapStep;
-        const gap = Math.max(6, rawGap);
+        const spacing = cardSpacing.value;
+        const adjustedGapBase = baseGap + (cardScale.value - 1) * gapStep;
+        const gap = Math.max(minGap, adjustedGapBase * spacing);
+        const paddingY = Math.max(
+            minPadding,
+            basePaddingY * cardScale.value * spacing
+        );
+        const paddingX = Math.max(
+            minPadding,
+            basePaddingX * cardScale.value * spacing
+        );
+        const contentGap = Math.max(
+            minPadding,
+            baseContentGap * cardScale.value * spacing
+        );
+        const actionsGap = Math.max(
+            minPadding,
+            baseActionGap * cardScale.value * spacing
+        );
+        const actionsGroupGap = Math.max(
+            minPadding,
+            baseActionGroupGap * cardScale.value * spacing
+        );
+        const actionsMargin = Math.max(
+            0,
+            baseActionMargin * cardScale.value * spacing
+        );
+        const checkboxMargin = Math.max(
+            0,
+            baseCheckboxMargin * cardScale.value * spacing
+        );
 
         return (count = 1, options = {}) => {
             const width = Math.max(containerWidth.value ?? 0, 0);
@@ -100,9 +165,7 @@ export function useFavoritesCardScaling(options = {}) {
             const columns = Math.max(1, Math.min(safeCount, requestedColumns));
             const forceStretch = Boolean(options?.forceStretch);
             const disableAutoStretch = Boolean(options?.disableAutoStretch);
-            const matchMaxColumnWidth = Boolean(
-                options?.matchMaxColumnWidth
-            );
+            const matchMaxColumnWidth = Boolean(options?.matchMaxColumnWidth);
             const shouldStretch =
                 !disableAutoStretch &&
                 (forceStretch || itemCount >= maxColumns);
@@ -133,7 +196,15 @@ export function useFavoritesCardScaling(options = {}) {
                 '--favorites-card-gap': `${Math.round(gap)}px`,
                 '--favorites-card-target-width': `${Math.round(cardWidth)}px`,
                 '--favorites-grid-columns': `${columns}`,
-                '--favorites-card-scale': `${cardScale.value.toFixed(2)}`
+                '--favorites-card-scale': `${cardScale.value.toFixed(2)}`,
+                '--favorites-card-padding-y': `${Math.round(paddingY)}px`,
+                '--favorites-card-padding-x': `${Math.round(paddingX)}px`,
+                '--favorites-card-content-gap': `${Math.round(contentGap)}px`,
+                '--favorites-card-action-gap': `${Math.round(actionsGap)}px`,
+                '--favorites-card-action-group-gap': `${Math.round(actionsGroupGap)}px`,
+                '--favorites-card-action-margin': `${Math.round(actionsMargin)}px`,
+                '--favorites-card-checkbox-margin': `${Math.round(checkboxMargin)}px`,
+                '--favorites-card-spacing-scale': `${cardSpacing.value.toFixed(2)}`
             };
         };
     });
@@ -184,34 +255,46 @@ export function useFavoritesCardScaling(options = {}) {
     });
 
     onBeforeMount(async () => {
-        if (!configKey) {
-            return;
-        }
-
         try {
-            const storedScale = await configRepository.getString(
-                configKey,
-                '1'
-            );
-            const parsedValue = parseFloat(storedScale);
-            if (!Number.isNaN(parsedValue)) {
-                cardScaleBase.value = clamp(
-                    parsedValue,
-                    slider.min,
-                    slider.max
+            if (configKey) {
+                const storedScale = await configRepository.getString(
+                    configKey,
+                    '1'
                 );
+                const parsedScale = parseFloat(storedScale);
+                if (!Number.isNaN(parsedScale)) {
+                    cardScaleBase.value = clamp(
+                        parsedScale,
+                        slider.min,
+                        slider.max
+                    );
+                }
+            }
+
+            if (spacingConfigKey) {
+                const storedSpacing = await configRepository.getString(
+                    spacingConfigKey,
+                    String(defaultSpacing)
+                );
+                const parsedSpacing = parseFloat(storedSpacing);
+                if (!Number.isNaN(parsedSpacing)) {
+                    cardSpacingBase.value = clamp(
+                        parsedSpacing,
+                        spacingSlider.min,
+                        spacingSlider.max
+                    );
+                }
             }
         } catch (error) {
-            console.error(
-                'Failed to load favorites card scale preference',
-                error
-            );
+            console.error('Failed to load favorites card preferences', error);
         }
     });
 
     return {
         cardScale,
+        cardSpacing,
         slider,
+        spacingSlider,
         containerRef,
         gridStyle
     };