Merged origin/master into Code cleanup

packages/ui/src/routes/[projectId]/components/BranchCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { BaseBranch, Branch, Commit } from '$lib/vbranches/types';
-	import { getContext, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { dropzone } from '$lib/utils/draggable';
 	import {
 		isDraggableHunk,
@@ -15,7 +15,6 @@
 	import type { BranchController } from '$lib/vbranches/branchController';
 	import type { User, getCloudApiClient } from '$lib/backend/cloud';
 	import Resizer from '$lib/components/Resizer.svelte';
-	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
 	import lscache from 'lscache';
 	import CommitDialog from './CommitDialog.svelte';
 	import { writable, type Writable } from 'svelte/store';
@@ -30,6 +29,7 @@
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import Scrollbar from '$lib/components/Scrollbar.svelte';
 	import type { UIEventHandler } from 'svelte/elements';
+	import { persisted } from '@square/svelte-store';
 
 	export let branch: Branch;
 	export let readonly = false;
@@ -44,8 +44,6 @@
 	export let selectedFileId: Writable<string | undefined>;
 	export let prService: PrService;
 
-	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
-
 	const allExpanded = writable(false);
 	const allCollapsed = writable(false);
 	const aiGenEnabled = projectAiGenEnabled(projectId);
@@ -55,7 +53,8 @@
 	let contents: HTMLElement;
 	let scrolled = false;
 
-	const laneWidthKey = 'laneWidth:';
+	const defaultBranchWidthRem = persisted<number | undefined>(30, 'defaulBranchWidth' + projectId);
+	const laneWidthKey = 'laneWidth_';
 	let laneWidth: number;
 
 	$: {
@@ -124,7 +123,7 @@
 
 	onMount(() => {
 		expandFromCache();
-		laneWidth = lscache.get(laneWidthKey + branch.id) ?? $userSettings.defaultLaneWidth;
+		laneWidth = lscache.get(laneWidthKey + branch.id);
 	});
 
 	const selectedOwnership = writable(Ownership.fromBranch(branch));
@@ -223,7 +222,7 @@
 </script>
 
 <div bind:this={rsViewport} class="resize-viewport">
-	<div class="branch-card" style:width={maximized ? '100%' : `${laneWidth}px`}>
+	<div class="branch-card" style:width={`${laneWidth || $defaultBranchWidthRem}rem`}>
 		<div class="flex flex-col">
 			<BranchHeader
 				{readonly}
@@ -378,13 +377,9 @@
 			inside={!$selectedFileId}
 			minWidth={320}
 			on:width={(e) => {
-				laneWidth = e.detail;
+				laneWidth = e.detail / 16;
 				lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
-				userSettings.update((s) => ({
-					...s,
-					defaultLaneWidth: laneWidth
-				}));
-				return true;
+				$defaultBranchWidthRem = laneWidth;
 			}}
 		/>
 	{/if}

packages/ui/src/routes/[projectId]/components/BranchLane.svelte

@@ -57,6 +57,7 @@
 			conflicted={selected.conflicted}
 			branchId={branch.id}
 			file={selected}
+			{projectId}
 			{projectPath}
 			{branchController}
 			{selectedOwnership}

packages/ui/src/routes/[projectId]/components/FileCard.svelte

@@ -19,7 +19,9 @@
 	import Scrollbar from '$lib/components/Scrollbar.svelte';
 	import Resizer from '$lib/components/Resizer.svelte';
 	import lscache from 'lscache';
+	import { persisted } from '@square/svelte-store';
 
+	export let projectId: string;
 	export let branchId: string;
 	export let file: File;
 	export let conflicted: boolean;
@@ -33,7 +35,8 @@
 	let contents: HTMLElement;
 	let rsViewport: HTMLElement;
 
-	const fileWidthKey = 'fileWidth:';
+	const defaultFileWidthRem = persisted<number | undefined>(30, 'defaulFileWidth' + projectId);
+	const fileWidthKey = 'fileWidth_';
 	let fileWidth: number;
 
 	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
@@ -97,7 +100,7 @@
 		};
 	}
 
-	fileWidth = lscache.get(fileWidthKey + file.id) ?? $userSettings.defaultFileWidth;
+	fileWidth = lscache.get(fileWidthKey + file.id);
 </script>
 
 <div
@@ -112,7 +115,7 @@
 	<div
 		id={`file-${file.id}`}
 		class="file-card"
-		style:width={`${fileWidth}px`}
+		style:width={`${fileWidth || $defaultFileWidthRem}rem`}
 		class:opacity-80={isFileLocked}
 	>
 		<FileCardHeader {file} {isFileLocked} on:close />
@@ -240,13 +243,9 @@
 		inside
 		minWidth={240}
 		on:width={(e) => {
-			fileWidth = e.detail;
-			lscache.set(fileWidthKey + file.id, e.detail, 7 * 1440); // 7 day ttl
-			userSettings.update((s) => ({
-				...s,
-				defaultFileWidth: e.detail
-			}));
-			return true;
+			fileWidth = e.detail / 16;
+			lscache.set(fileWidthKey + file.id, fileWidth, 7 * 1440); // 7 day ttl
+			$defaultFileWidthRem = fileWidth;
 		}}
 	/>
 </div>

packages/ui/src/routes/[projectId]/navigation/Navigation.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
-	import { getContext } from 'svelte';
 	import type { BranchController } from '$lib/vbranches/branchController';
 	import type { User } from '$lib/backend/cloud';
 	import BaseBranchCard from './BaseBranchCard.svelte';
 	import type { Project, ProjectService } from '$lib/backend/projects';
 	import Footer from './Footer.svelte';
 	import AppUpdater from './AppUpdater.svelte';
-	import type { Loadable } from '@square/svelte-store';
+	import { persisted, type Loadable } from '@square/svelte-store';
 	import type { Update } from '../../updater';
 	import DomainButton from './DomainButton.svelte';
 	import type { PrService } from '$lib/github/pullrequest';
@@ -30,7 +28,10 @@
 	export let prService: PrService;
 	export let projectService: ProjectService;
 
-	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
+	const defaultTrayWidthRem = persisted<number | undefined>(
+		undefined,
+		'defaulTrayWidth_ ' + project.id
+	);
 
 	$: base$ = baseBranchService.base$;
 
@@ -40,7 +41,7 @@
 
 <div
 	class="navigation relative z-30 flex w-80 shrink-0 flex-col border-r"
-	style:width={$userSettings.trayWidth ? `${$userSettings.trayWidth}px` : null}
+	style:width={$defaultTrayWidthRem ? $defaultTrayWidthRem + 'rem' : null}
 	bind:this={viewport}
 	role="menu"
 	tabindex="0"
@@ -96,10 +97,7 @@
 		direction="right"
 		minWidth={320}
 		on:width={(e) => {
-			userSettings.update((s) => ({
-				...s,
-				trayWidth: e.detail
-			}));
+			$defaultTrayWidthRem = e.detail / 16;
 		}}
 	/>
 </div>