From 5ba0b949750c427d52c272b8339d230605a4e037 Mon Sep 17 00:00:00 2001
From: Aaron <aaronklinker1@gmail.com>
Date: Tue, 30 Apr 2024 16:07:14 -0500
Subject: [PATCH] feat: Sync settings and stock per-project

---
 web/components/BomTab.vue                    |  2 +-
 web/components/PartListItem.vue              |  2 +-
 web/components/ProjectSidebar.vue            | 16 ++---
 web/components/SettingsTab.vue               | 53 +++++++++++----
 web/components/StockMatrixInput.vue          | 70 ++++++++++----------
 web/components/StockTab.vue                  | 30 ++++++++-
 web/composables/useBladeWidth.ts             | 10 ---
 web/composables/useBladeWidthSetting.ts      |  8 ---
 web/composables/useBoardLayoutsQuery.ts      | 29 ++++++--
 web/composables/useCutlistConfig.ts          | 14 ----
 web/composables/useDeleteSettingsMutation.ts | 17 +++++
 web/composables/useDistanceUnit.ts           |  3 -
 web/composables/useExtraSpace.ts             | 10 ---
 web/composables/useExtraSpaceSetting.ts      |  8 ---
 web/composables/useFormatDistance.ts         |  8 +--
 web/composables/useOptimizeFor.ts            |  7 --
 web/composables/useOptimizeForSetting.ts     |  8 ---
 web/composables/useParseStock.ts             |  9 +++
 web/composables/useProjectId.ts              |  4 ++
 web/composables/useProjectListQuery.ts       |  2 +-
 web/composables/useProjectSettings.ts        | 68 +++++++++++++++++++
 web/composables/useProjectSettingsStore.ts   |  3 +
 web/composables/useProjectTabMap.ts          |  2 +-
 web/composables/useSaveSettingsMutation.ts   | 12 ----
 web/composables/useSetSettingsMutation.ts    | 25 +++++++
 web/composables/useSettingsQuery.ts          | 10 +++
 web/composables/useShowPartNumbers.ts        |  3 -
 web/composables/useStock.ts                  | 12 ----
 web/layouts/default.vue                      |  2 +-
 web/plugins/vue-query.ts                     |  2 +-
 web/utils/accounts/AccountService.ts         | 29 +++++++-
 web/utils/accounts/FirebaseAccountService.ts | 16 +++--
 web/utils/accounts/LocalAccountService.ts    | 44 ++++++++----
 web/utils/accounts/index.ts                  |  2 +-
 34 files changed, 347 insertions(+), 193 deletions(-)
 delete mode 100644 web/composables/useBladeWidth.ts
 delete mode 100644 web/composables/useBladeWidthSetting.ts
 delete mode 100644 web/composables/useCutlistConfig.ts
 create mode 100644 web/composables/useDeleteSettingsMutation.ts
 delete mode 100644 web/composables/useDistanceUnit.ts
 delete mode 100644 web/composables/useExtraSpace.ts
 delete mode 100644 web/composables/useExtraSpaceSetting.ts
 delete mode 100644 web/composables/useOptimizeFor.ts
 delete mode 100644 web/composables/useOptimizeForSetting.ts
 create mode 100644 web/composables/useParseStock.ts
 create mode 100644 web/composables/useProjectId.ts
 create mode 100644 web/composables/useProjectSettings.ts
 create mode 100644 web/composables/useProjectSettingsStore.ts
 delete mode 100644 web/composables/useSaveSettingsMutation.ts
 create mode 100644 web/composables/useSetSettingsMutation.ts
 create mode 100644 web/composables/useSettingsQuery.ts
 delete mode 100644 web/composables/useShowPartNumbers.ts
 delete mode 100644 web/composables/useStock.ts

diff --git a/web/components/BomTab.vue b/web/components/BomTab.vue
index 40d8300..1566b78 100644
--- a/web/components/BomTab.vue
+++ b/web/components/BomTab.vue
@@ -4,7 +4,7 @@ import type { BoardLayoutLeftover } from '@aklinker1/cutlist';
 const url = useAssemblyUrl();
 const { data: doc } = useDocumentQuery(url);
 const { data, isLoading } = useBoardLayoutsQuery();
-const distanceUnit = useDistanceUnit();
+const { distanceUnit } = useProjectSettings();
 const formatDistance = useFormatDistance();
 
 const rows = computed(() => {
diff --git a/web/components/PartListItem.vue b/web/components/PartListItem.vue
index 4b5d1b1..e8180fb 100644
--- a/web/components/PartListItem.vue
+++ b/web/components/PartListItem.vue
@@ -21,7 +21,7 @@ const fontSize = usePx(() =>
   ),
 );
 
-const showPartNumbers = useShowPartNumbers();
+const { showPartNumbers } = useProjectSettings();
 </script>
 
 <template>
diff --git a/web/components/ProjectSidebar.vue b/web/components/ProjectSidebar.vue
index 91ec776..9fd24ce 100644
--- a/web/components/ProjectSidebar.vue
+++ b/web/components/ProjectSidebar.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import type { HorizontalNavigationLink } from '#ui/types';
 
-const url = useAssemblyUrl();
-const { data: doc } = useDocumentQuery();
-const { isFetching: isFetchingLayouts } = useBoardLayoutsQuery();
-const { data: boardLayouts } = useBoardLayoutsQuery();
+const { data: boardLayouts, isFetching: isFetchingLayouts } =
+  useBoardLayoutsQuery();
 const refresh = useRefreshOnshapeQueries();
 
 const warningsBadge = computed(() => {
@@ -21,10 +19,10 @@ const links = computed<HorizontalNavigationLink[]>(() => [
     click: () => void (tab.value = 'bom'),
   },
   {
-    label: 'Stock',
-    icon: 'i-heroicons-truck',
-    active: tab.value === 'stock',
-    click: () => void (tab.value = 'stock'),
+    label: 'Boards',
+    icon: 'i-fluent-emoji-high-contrast-wood',
+    active: tab.value === 'boards',
+    click: () => void (tab.value = 'boards'),
   },
   {
     label: 'Warnings',
@@ -92,7 +90,7 @@ const editProject = useEditProject();
     <div class="relative flex-1">
       <div class="absolute inset-0 overflow-auto">
         <BomTab v-if="tab === 'bom'" />
-        <StockTab v-else-if="tab === 'stock'" />
+        <StockTab v-else-if="tab === 'boards'" />
         <WarningsTab v-else-if="tab === 'warnings'" class="p-8" />
         <SettingsTab v-else-if="tab === 'settings'" class="p-8" />
       </div>
diff --git a/web/components/SettingsTab.vue b/web/components/SettingsTab.vue
index 053ebdc..61c8e0d 100644
--- a/web/components/SettingsTab.vue
+++ b/web/components/SettingsTab.vue
@@ -1,33 +1,55 @@
 <script lang="ts" setup>
 import { Distance } from '@aklinker1/cutlist';
 
-const optimize = useOptimizeForSetting();
-const bladeWidth = useBladeWidthSetting();
-const distanceUnit = useDistanceUnit();
-const showPartNumbers = useShowPartNumbers();
-const extraSpace = useExtraSpaceSetting();
+const {
+  bladeWidth,
+  distanceUnit,
+  extraSpace,
+  optimize,
+  showPartNumbers,
+  isLoading,
+  changes,
+  resetSettings: resetLocal,
+} = useProjectSettings();
 
 // Convert values when units change
 watch(distanceUnit, (newUnit, oldUnit) => {
   if (!newUnit || !oldUnit) return;
 
-  const convertValue = (value: Ref<string | number>) => {
+  const convertDistance = (value: Ref<string | number | undefined>) => {
+    if (value.value == null) return;
     const dist = new Distance(value.value + oldUnit);
     value.value = dist[newUnit];
   };
-  convertValue(bladeWidth);
-  convertValue(extraSpace);
+  convertDistance(bladeWidth);
+  convertDistance(extraSpace);
 });
+
+const projectId = useProjectId();
+const { mutate: _save, isPending: isSaving } = useSetSettingsMutation();
+function save() {
+  _save({
+    projectId: projectId.value,
+    changes: toRaw(changes.value),
+  });
+}
+
+const { mutate: _reset, isPending: isResetting } = useDeleteSettingsMutation();
+function reset() {
+  _reset(projectId.value, {
+    onSettled: () => resetLocal(),
+  });
+}
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <form v-if="!isLoading" class="flex flex-col gap-4" @submit.prevent="save">
     <UFormGroup label="Distance unit">
       <USelect v-model="distanceUnit" :options="['in', 'm', 'mm']" />
     </UFormGroup>
 
     <UFormGroup :label="`Blade width (${distanceUnit}):`">
-      <UInput v-model="bladeWidth" type="number" />
+      <UInput v-model="bladeWidth" type="number" min="0" step="0.00001" />
     </UFormGroup>
 
     <UFormGroup :label="`Extra space (${distanceUnit}):`">
@@ -40,8 +62,11 @@ watch(distanceUnit, (newUnit, oldUnit) => {
 
     <UCheckbox v-model="showPartNumbers" label="Show part numbers in preview" />
 
-    <p class="text-sm opacity-50 text-center pt-8">
-      Settings are saved when returning to the website.
-    </p>
-  </div>
+    <div class="flex flex-row-reverse gap-4">
+      <UButton type="submit" :loading="isSaving">Save Changes</UButton>
+      <UButton color="gray" :loading="isResetting" @click="reset"
+        >Reset</UButton
+      >
+    </div>
+  </form>
 </template>
diff --git a/web/components/StockMatrixInput.vue b/web/components/StockMatrixInput.vue
index 3daf416..2bbc0be 100644
--- a/web/components/StockMatrixInput.vue
+++ b/web/components/StockMatrixInput.vue
@@ -1,46 +1,48 @@
 <script lang="ts" setup>
-import { StockMatrix } from '@aklinker1/cutlist';
-import { z } from 'zod';
-import YAML from 'js-yaml';
+import { reduceStockMatrix } from '@aklinker1/cutlist';
 
-const model = defineModel<StockMatrix[]>();
+const value = defineModel<string>({ required: true });
 
-const getModelString = () =>
-  YAML.dump(model.value, { indent: 2, flowLevel: 2 });
-
-const text = ref(getModelString());
+const internalValue = ref(value.value);
+onMounted(() => {
+  internalValue.value = value.value;
+});
 
-const textModel = computed<string>({
-  get() {
-    return text.value;
-  },
-  set(value) {
+const parseStock = useParseStock();
+const err = ref<unknown>();
+watchThrottled(
+  internalValue,
+  (internalValue) => {
     try {
-      text.value = value;
-      model.value = z.array(StockMatrix).parse(YAML.load(value));
-      error.value = undefined;
-    } catch (err) {
-      error.value = err;
+      console.log(1);
+      const stock = reduceStockMatrix(parseStock(internalValue));
+      console.log(2, stock);
+      value.value = internalValue;
+      err.value = undefined;
+    } catch (error) {
+      err.value = error;
+      console.error(error);
     }
   },
-});
-
-const error = ref<unknown>();
+  {
+    throttle: 500,
+    leading: false,
+    trailing: true,
+  },
+);
 </script>
 
 <template>
-  <div class="absolute inset-0 flex flex-col p-4 overlfow-auto gap-4">
-    <textarea
-      v-model="textModel"
-      class="font-mono flex-1 resize-none bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 p-4 outline-none rounded-lg whitespace-pre"
-    />
-    <div
-      v-if="error"
-      class="bg-red-900 shrink-0 p-4 rounded-lg border border-red-600"
-    >
-      <p class="text-white whitespace-pre-wrap">
-        {{ error }}
-      </p>
-    </div>
+  <textarea
+    v-model="internalValue"
+    class="font-mono flex-1 resize-none bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 p-4 outline-none rounded-lg whitespace-pre"
+  />
+  <div
+    v-if="err"
+    class="bg-red-900 shrink-0 p-4 rounded-lg border border-red-600"
+  >
+    <p class="text-white whitespace-pre-wrap">
+      {{ err }}
+    </p>
   </div>
 </template>
diff --git a/web/components/StockTab.vue b/web/components/StockTab.vue
index 39a6327..4e807ef 100644
--- a/web/components/StockTab.vue
+++ b/web/components/StockTab.vue
@@ -1,9 +1,33 @@
 <script lang="ts" setup>
-const { data } = useBoardLayoutsQuery();
+const { stock, resetStock } = useProjectSettings();
 
-const stock = useStock();
+const projectId = useProjectId();
+const { mutate: _save, isPending: isSaving } = useSetSettingsMutation();
+function save() {
+  console.log('SAVING...');
+  _save({
+    projectId: projectId.value,
+    changes: { stock: stock.value },
+  });
+}
+
+const { mutate: _reset, isPending: isResetting } = useDeleteSettingsMutation();
+function reset() {
+  _reset(projectId.value, {
+    onSettled: () => resetStock(),
+  });
+}
 </script>
 
 <template>
-  <StockMatrixInput v-model="stock" />
+  <div class="absolute inset-0 flex flex-col p-4 gap-4">
+    <StockMatrixInput v-if="stock != null" v-model="stock" />
+
+    <div class="shrink-0 flex flex-row-reverse gap-4">
+      <UButton type="submit" :loading="isSaving" @click="save">Save</UButton>
+      <UButton color="gray" :loading="isResetting" @click="reset"
+        >Reset</UButton
+      >
+    </div>
+  </div>
 </template>
diff --git a/web/composables/useBladeWidth.ts b/web/composables/useBladeWidth.ts
deleted file mode 100644
index 3048a5a..0000000
--- a/web/composables/useBladeWidth.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Distance } from '@aklinker1/cutlist';
-
-/**
- * Returns the blade width in standard units based off the settings.
- */
-export default function () {
-  const bladeWidth = useBladeWidthSetting();
-  const unit = useDistanceUnit();
-  return computed(() => new Distance(bladeWidth.value + unit.value).m);
-}
diff --git a/web/composables/useBladeWidthSetting.ts b/web/composables/useBladeWidthSetting.ts
deleted file mode 100644
index 26caed3..0000000
--- a/web/composables/useBladeWidthSetting.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Stores the preference from the settings page directly. Unless you're on the
- * settings page, you should probably use `useBladeWidth` instead for the
- * standardized value.
- */
-export default createGlobalState(() =>
-  useLocalStorage('@cutlist/blade-width', '0.125'),
-);
diff --git a/web/composables/useBoardLayoutsQuery.ts b/web/composables/useBoardLayoutsQuery.ts
index 9623f1e..d081821 100644
--- a/web/composables/useBoardLayoutsQuery.ts
+++ b/web/composables/useBoardLayoutsQuery.ts
@@ -1,11 +1,16 @@
 import { useQuery } from '@tanstack/vue-query';
-import { generateBoardLayouts } from '@aklinker1/cutlist';
+import {
+  Distance,
+  generateBoardLayouts,
+  type Config,
+} from '@aklinker1/cutlist';
 
 export default function () {
   const loader = useOnshapeLoader();
   const url = useAssemblyUrl();
-  const config = useCutlistConfig();
-  const stock = useStock();
+  const { bladeWidth, optimize, extraSpace, distanceUnit, stock } =
+    useProjectSettings();
+  const parseStock = useParseStock();
 
   const partsQuery = useQuery({
     queryKey: ['onshape', 'board-layouts', url],
@@ -15,9 +20,23 @@ export default function () {
 
   const layouts = computed(() => {
     const parts = partsQuery.data.value;
-    if (parts == null) return undefined;
+    if (
+      parts == null ||
+      bladeWidth.value == null ||
+      extraSpace.value == null ||
+      optimize.value == null ||
+      distanceUnit.value == null ||
+      stock.value == null
+    )
+      return;
 
-    return generateBoardLayouts(toRaw(parts), stock.value, config.value);
+    const config: Config = {
+      bladeWidth: new Distance(bladeWidth.value + distanceUnit.value).m,
+      extraSpace: new Distance(extraSpace.value + distanceUnit.value).m,
+      optimize: optimize.value === 'Cuts' ? 'cuts' : 'space',
+      precision: 1e-5,
+    };
+    return generateBoardLayouts(toRaw(parts), parseStock(stock.value), config);
   });
 
   return {
diff --git a/web/composables/useCutlistConfig.ts b/web/composables/useCutlistConfig.ts
deleted file mode 100644
index b91a0df..0000000
--- a/web/composables/useCutlistConfig.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Config } from '@aklinker1/cutlist';
-
-export default createSharedComposable(() => {
-  const bladeWidth = useBladeWidth();
-  const optimize = useOptimizeFor();
-  const extraSpace = useExtraSpace();
-
-  return computed<Config>(() => ({
-    bladeWidth: bladeWidth.value,
-    optimize: optimize.value,
-    extraSpace: extraSpace.value,
-    precision: 1e-5,
-  }));
-});
diff --git a/web/composables/useDeleteSettingsMutation.ts b/web/composables/useDeleteSettingsMutation.ts
new file mode 100644
index 0000000..6e2e9e3
--- /dev/null
+++ b/web/composables/useDeleteSettingsMutation.ts
@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+export default function () {
+  const accountService = useAccountService();
+  const client = useQueryClient();
+
+  return useMutation({
+    mutationFn(projectId: string | undefined) {
+      return accountService.value.deleteSettings(projectId);
+    },
+    onSettled() {
+      client.invalidateQueries({
+        queryKey: ['settings'],
+      });
+    },
+  });
+}
diff --git a/web/composables/useDistanceUnit.ts b/web/composables/useDistanceUnit.ts
deleted file mode 100644
index c1892a8..0000000
--- a/web/composables/useDistanceUnit.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default createGlobalState(() =>
-  useLocalStorage<'in' | 'm' | 'mm'>('@cutlist/distance-unit', 'in'),
-);
diff --git a/web/composables/useExtraSpace.ts b/web/composables/useExtraSpace.ts
deleted file mode 100644
index 8e93a84..0000000
--- a/web/composables/useExtraSpace.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Distance } from '@aklinker1/cutlist';
-
-/**
- * Returns the extra space in standard units based off the settings.
- */
-export default function () {
-  const extraSpace = useExtraSpaceSetting();
-  const unit = useDistanceUnit();
-  return computed(() => new Distance(extraSpace.value + unit.value).m);
-}
diff --git a/web/composables/useExtraSpaceSetting.ts b/web/composables/useExtraSpaceSetting.ts
deleted file mode 100644
index 14548a6..0000000
--- a/web/composables/useExtraSpaceSetting.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Stores the preference from the settings page directly. Unless you're on the
- * settings page, you should probably use `useExtraSpace` instead for the
- * standardized value.
- */
-export default createGlobalState(() =>
-  useLocalStorage('@cutlist/extra-space', '0'),
-);
diff --git a/web/composables/useFormatDistance.ts b/web/composables/useFormatDistance.ts
index 257f3aa..2a59b86 100644
--- a/web/composables/useFormatDistance.ts
+++ b/web/composables/useFormatDistance.ts
@@ -1,16 +1,16 @@
 import { Distance, toFraction } from '@aklinker1/cutlist';
 
 export default function () {
-  const unit = useDistanceUnit();
+  const { distanceUnit } = useProjectSettings();
 
   return (m: number | undefined | null) => {
-    if (m == null) return;
+    if (m == null || toValue(distanceUnit) == null) return;
 
     const distance = new Distance(m);
-    if (toValue(unit) === 'in') {
+    if (toValue(distanceUnit) === 'in') {
       return `${toFraction(distance.in)}"`;
     }
-    if (toValue(unit) === 'mm') {
+    if (toValue(distanceUnit) === 'mm') {
       return `${distance.mm}mm`;
     }
     return `${distance.m.toFixed(3)}m`;
diff --git a/web/composables/useOptimizeFor.ts b/web/composables/useOptimizeFor.ts
deleted file mode 100644
index c3f2212..0000000
--- a/web/composables/useOptimizeFor.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Returns the parsed optimize config based on the raw settings.
- */
-export default function () {
-  const optimize = useOptimizeForSetting();
-  return computed(() => (optimize.value === 'Cuts' ? 'cuts' : 'space'));
-}
diff --git a/web/composables/useOptimizeForSetting.ts b/web/composables/useOptimizeForSetting.ts
deleted file mode 100644
index 1453502..0000000
--- a/web/composables/useOptimizeForSetting.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Stores the preference from the settings page directly. Unless you're on the
- * settings page, you should probably use `useOptimze` instead for the
- * standardized value.
- */
-export default createGlobalState(() =>
-  useLocalStorage('@cutlist/optimize', 'Cuts'),
-);
diff --git a/web/composables/useParseStock.ts b/web/composables/useParseStock.ts
new file mode 100644
index 0000000..a52e141
--- /dev/null
+++ b/web/composables/useParseStock.ts
@@ -0,0 +1,9 @@
+import { StockMatrix } from '@aklinker1/cutlist';
+import { z } from 'zod';
+import YAML from 'js-yaml';
+
+export default function () {
+  return (stock: string): StockMatrix[] => {
+    return z.array(StockMatrix).parse(YAML.load(stock));
+  };
+}
diff --git a/web/composables/useProjectId.ts b/web/composables/useProjectId.ts
new file mode 100644
index 0000000..9f51751
--- /dev/null
+++ b/web/composables/useProjectId.ts
@@ -0,0 +1,4 @@
+export default function () {
+  const project = useProject();
+  return computed(() => project.value?.id);
+}
diff --git a/web/composables/useProjectListQuery.ts b/web/composables/useProjectListQuery.ts
index c1b2946..475c5ce 100644
--- a/web/composables/useProjectListQuery.ts
+++ b/web/composables/useProjectListQuery.ts
@@ -3,10 +3,10 @@ import { useQuery } from '@tanstack/vue-query';
 export default function () {
   const account = useAccountService();
   const accountId = useAccountServiceId();
-  const user = useCurrentUser();
   return useQuery({
     queryKey: ['projects', accountId],
     queryFn: () => account.value.listProjects(),
     initialData: [],
+    refetchOnMount: true,
   });
 }
diff --git a/web/composables/useProjectSettings.ts b/web/composables/useProjectSettings.ts
new file mode 100644
index 0000000..5bbf943
--- /dev/null
+++ b/web/composables/useProjectSettings.ts
@@ -0,0 +1,68 @@
+export default function () {
+  const store = useProjectSettingsStore();
+  const projectId = useProjectId();
+
+  const defineSettingValue = <T extends keyof AccountSettings>(key: T) =>
+    computed({
+      get() {
+        return store.value[String(toValue(projectId))]?.[key];
+      },
+      set(value) {
+        store.value[String(toValue(projectId))] ??= {};
+        store.value[String(toValue(projectId))][key] = value;
+      },
+    });
+
+  const bladeWidth = defineSettingValue('bladeWidth');
+  const distanceUnit = defineSettingValue('distanceUnit');
+  const extraSpace = defineSettingValue('extraSpace');
+  const optimize = defineSettingValue('optimize');
+  const showPartNumbers = defineSettingValue('showPartNumbers');
+  const stock = defineSettingValue('stock');
+
+  const { data: settings, isLoading } = useSettingsQuery(projectId);
+  watch(settings, () => {
+    resetSettings();
+    resetStock();
+  });
+
+  const changes = computed(() => {
+    const changes: Partial<AccountSettings> = {};
+    if (settings.value?.bladeWidth !== bladeWidth.value)
+      changes.bladeWidth = bladeWidth.value;
+    if (settings.value?.distanceUnit !== distanceUnit.value)
+      changes.distanceUnit = distanceUnit.value;
+    if (settings.value?.extraSpace !== extraSpace.value)
+      changes.extraSpace = extraSpace.value;
+    if (settings.value?.optimize !== optimize.value)
+      changes.optimize = optimize.value;
+    if (settings.value?.showPartNumbers !== showPartNumbers.value)
+      changes.showPartNumbers = showPartNumbers.value;
+    if (settings.value?.stock !== stock.value) changes.stock = stock.value;
+    return changes;
+  });
+
+  const resetSettings = () => {
+    bladeWidth.value = settings.value?.bladeWidth;
+    distanceUnit.value = settings.value?.distanceUnit;
+    extraSpace.value = settings.value?.extraSpace;
+    optimize.value = settings.value?.optimize;
+    showPartNumbers.value = settings.value?.showPartNumbers;
+  };
+  const resetStock = () => {
+    stock.value = settings.value?.stock;
+  };
+
+  return {
+    bladeWidth,
+    distanceUnit,
+    extraSpace,
+    optimize,
+    showPartNumbers,
+    stock,
+    resetSettings,
+    resetStock,
+    isLoading,
+    changes,
+  };
+}
diff --git a/web/composables/useProjectSettingsStore.ts b/web/composables/useProjectSettingsStore.ts
new file mode 100644
index 0000000..00d22c0
--- /dev/null
+++ b/web/composables/useProjectSettingsStore.ts
@@ -0,0 +1,3 @@
+export default createGlobalState(() =>
+  ref<Record<string, Partial<AccountSettings>>>({}),
+);
diff --git a/web/composables/useProjectTabMap.ts b/web/composables/useProjectTabMap.ts
index 815fe12..71eed38 100644
--- a/web/composables/useProjectTabMap.ts
+++ b/web/composables/useProjectTabMap.ts
@@ -2,4 +2,4 @@ export default createGlobalState(() =>
   useSessionStorage<Record<string, Tab | undefined>>('@cutlist/tab-map', {}),
 );
 
-export type Tab = 'bom' | 'stock' | 'settings' | 'warnings';
+export type Tab = 'bom' | 'boards' | 'settings' | 'warnings';
diff --git a/web/composables/useSaveSettingsMutation.ts b/web/composables/useSaveSettingsMutation.ts
deleted file mode 100644
index 42fbb8e..0000000
--- a/web/composables/useSaveSettingsMutation.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useMutation } from '@tanstack/vue-query';
-import type { AccountSettings } from '~/utils';
-
-export default function () {
-  const accountService = useAccountService();
-
-  return useMutation({
-    mutationFn(changes: Partial<AccountSettings>) {
-      return accountService.value.setSettings(changes);
-    },
-  });
-}
diff --git a/web/composables/useSetSettingsMutation.ts b/web/composables/useSetSettingsMutation.ts
new file mode 100644
index 0000000..ce72c7b
--- /dev/null
+++ b/web/composables/useSetSettingsMutation.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import type { AccountSettings } from '~/utils';
+
+export default function () {
+  const accountService = useAccountService();
+  const client = useQueryClient();
+
+  return useMutation({
+    mutationFn({
+      projectId,
+      changes,
+    }: {
+      projectId: string | undefined;
+      changes: Partial<AccountSettings>;
+    }) {
+      console.log('SAVING...', { changes });
+      return accountService.value.setSettings(projectId, changes);
+    },
+    onSettled() {
+      client.invalidateQueries({
+        queryKey: ['settings'],
+      });
+    },
+  });
+}
diff --git a/web/composables/useSettingsQuery.ts b/web/composables/useSettingsQuery.ts
new file mode 100644
index 0000000..44e65b5
--- /dev/null
+++ b/web/composables/useSettingsQuery.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/vue-query';
+
+export default function (projectId: Ref<string | undefined>) {
+  const account = useAccountService();
+  const accountId = useAccountServiceId();
+  return useQuery({
+    queryKey: ['settings', accountId, projectId],
+    queryFn: () => account.value.getSettings(projectId.value),
+  });
+}
diff --git a/web/composables/useShowPartNumbers.ts b/web/composables/useShowPartNumbers.ts
deleted file mode 100644
index aa323bf..0000000
--- a/web/composables/useShowPartNumbers.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default createGlobalState(() =>
-  useLocalStorage('@cutlist/use-part-numbers', true),
-);
diff --git a/web/composables/useStock.ts b/web/composables/useStock.ts
deleted file mode 100644
index 957d1c9..0000000
--- a/web/composables/useStock.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { StockMatrix } from '@aklinker1/cutlist';
-
-export default createGlobalState(() =>
-  useLocalStorage<StockMatrix[]>('@cutlist/stock', [
-    {
-      material: 'Oak, Red',
-      length: ['3ft', '4ft', '6ft', '8ft'],
-      thickness: ['0.75in'],
-      width: ['1.5in', '2.5in', '3.5in', '5.5in', '7.5in'],
-    },
-  ]),
-);
diff --git a/web/layouts/default.vue b/web/layouts/default.vue
index 49ffb93..0da34d3 100644
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@@ -21,7 +21,7 @@ const closeTab = useCloseTab();
     <ul class="shrink-0 flex">
       <!-- Home Link -->
       <TabListItem to="/" hide-close class="sticky left-0">
-        <UIcon name="i-heroicons-home-solid" class="size-4" />
+        <UIcon name="i-heroicons-home-solid" class="h-4 w-6" />
       </TabListItem>
 
       <TabList class="flex-1">
diff --git a/web/plugins/vue-query.ts b/web/plugins/vue-query.ts
index 6dd93fa..20cab8d 100644
--- a/web/plugins/vue-query.ts
+++ b/web/plugins/vue-query.ts
@@ -19,7 +19,7 @@ export default defineNuxtPlugin((nuxt) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
-        refetchOnMount: true,
+        refetchOnMount: false,
         refetchOnWindowFocus: false,
         retry: false,
       },
diff --git a/web/utils/accounts/AccountService.ts b/web/utils/accounts/AccountService.ts
index 59b2a95..6d78614 100644
--- a/web/utils/accounts/AccountService.ts
+++ b/web/utils/accounts/AccountService.ts
@@ -1,9 +1,15 @@
+import YAML from 'js-yaml';
 import type { Project } from '../projects';
+import type { StockMatrix } from '@aklinker1/cutlist';
 
 export interface AccountService {
   id: string;
-  getSettings(): Promise<AccountSettings>;
-  setSettings(changes: Partial<AccountSettings>): Promise<void>;
+  getSettings(projectId: string | undefined): Promise<AccountSettings>;
+  setSettings(
+    projectId: string | undefined,
+    changes: Partial<AccountSettings>,
+  ): Promise<void>;
+  deleteSettings(projectId: string | undefined): Promise<void>;
   listProjects(): Promise<Project[]>;
   saveProject(newProject: Project): Promise<void>;
   removeProject(id: string): Promise<void>;
@@ -11,16 +17,33 @@ export interface AccountService {
 
 export interface AccountSettings {
   bladeWidth: number;
-  distanceUnit: string;
+  distanceUnit: 'in' | 'm' | 'mm';
   extraSpace: number;
   optimize: 'Cuts' | 'Space';
   showPartNumbers: boolean;
+  stock: string;
 }
 
+const DEFAULT_STOCK: StockMatrix[] = [
+  {
+    material: 'Oak, Red',
+    length: ['3ft', '4ft', '6ft', '8ft'],
+    thickness: ['0.5in', '0.75in', '1in'],
+    width: ['1.5in', '2.5in', '3.5in', '5.5in', '7.5in'],
+  },
+  {
+    material: 'Plywood',
+    width: ['4ft'],
+    length: ['8ft'],
+    thickness: ['0.25in', '0.5in', '0.75in'],
+  },
+];
+
 export const DEFAULT_SETTINGS: AccountSettings = {
   bladeWidth: 0.125,
   distanceUnit: 'in',
   extraSpace: 0,
   optimize: 'Cuts',
   showPartNumbers: true,
+  stock: YAML.dump(DEFAULT_STOCK, { indent: 2, flowLevel: 2 }),
 };
diff --git a/web/utils/accounts/FirebaseAccountService.ts b/web/utils/accounts/FirebaseAccountService.ts
index 9ed5079..bbd8d2f 100644
--- a/web/utils/accounts/FirebaseAccountService.ts
+++ b/web/utils/accounts/FirebaseAccountService.ts
@@ -7,7 +7,7 @@ import {
   collection,
   doc,
 } from 'firebase/firestore';
-import { db, firebaseAuth, usersRef } from '../firebase';
+import { firebaseAuth, usersRef } from '../firebase';
 import { DEFAULT_SETTINGS } from './AccountService';
 
 export function createFirebaseAccountService(): AccountService {
@@ -16,21 +16,25 @@ export function createFirebaseAccountService(): AccountService {
     return firebaseAuth.currentUser.uid;
   };
 
-  const settingsDoc = () => doc(usersRef, getUid(), 'settings', 'default');
+  const settingsDoc = (projectId: string | undefined) =>
+    doc(usersRef, getUid(), 'settings', projectId ?? 'default');
   const projectsRef = () => collection(usersRef, getUid(), 'projects');
   const projectDoc = (id: string) => doc(usersRef, getUid(), 'projects', id);
 
   return {
     id: 'firebase',
-    async getSettings() {
-      const res = await getDoc(settingsDoc());
+    async getSettings(projectId) {
+      const res = await getDoc(settingsDoc(projectId));
       return {
         ...DEFAULT_SETTINGS,
         ...(res.exists() ? res.data() : {}),
       };
     },
-    async setSettings(changes) {
-      await setDoc(settingsDoc(), changes, { merge: true });
+    async setSettings(projectId, changes) {
+      await setDoc(settingsDoc(projectId), changes, { merge: true });
+    },
+    async deleteSettings(projectId) {
+      await deleteDoc(settingsDoc(projectId));
     },
     async listProjects() {
       const q = query(projectsRef());
diff --git a/web/utils/accounts/LocalAccountService.ts b/web/utils/accounts/LocalAccountService.ts
index c84e52f..ba5e304 100644
--- a/web/utils/accounts/LocalAccountService.ts
+++ b/web/utils/accounts/LocalAccountService.ts
@@ -6,15 +6,24 @@ import {
 } from './AccountService';
 
 export function createLocalAccountService(): AccountService {
-  const settingsStorageKeys: Record<keyof AccountSettings, string> = {
+  const _settingsStorageKeys: Record<keyof AccountSettings, string> = {
     bladeWidth: '@cutlist/blade-width',
     distanceUnit: '@cutlist/distance-unit',
     extraSpace: '@cutlist/extra-space',
     optimize: '@cutlist/optimize',
     showPartNumbers: '@cutlist/use-part-numbers',
+    stock: '@cutlist/stock',
   };
   const projectsStorageKey = '@cutlist/projects';
 
+  const getKey = <T extends keyof AccountSettings>(
+    key: T,
+    projectId: string | undefined,
+  ) => {
+    if (projectId == null) return _settingsStorageKeys[key];
+    return `${_settingsStorageKeys[key]}?id=${projectId}`;
+  };
+
   const parseNumber = (str: string | null): number | undefined => {
     const v = Number(str ?? undefined);
     if (isNaN(v)) return undefined;
@@ -25,30 +34,33 @@ export function createLocalAccountService(): AccountService {
     return str === 'true';
   };
 
-  const getSettings = (): AccountSettings => {
+  const getSettings = (projectId: string | undefined): AccountSettings => {
     const settings: Partial<AccountSettings> = {};
 
     const bladeWidth = parseNumber(
-      localStorage.getItem(settingsStorageKeys.bladeWidth),
+      localStorage.getItem(getKey('bladeWidth', projectId)),
     );
     if (bladeWidth != null) settings.bladeWidth = bladeWidth;
 
     const extraSpace = parseNumber(
-      localStorage.getItem(settingsStorageKeys.extraSpace),
+      localStorage.getItem(getKey('extraSpace', projectId)),
     );
     if (extraSpace != null) settings.extraSpace = extraSpace;
 
-    const optimize = localStorage.getItem(settingsStorageKeys.optimize);
+    const optimize = localStorage.getItem(getKey('optimize', projectId));
     if (optimize != null)
       settings.optimize = optimize as AccountSettings['optimize'];
 
     const showPartNumbers = parseBoolean(
-      localStorage.getItem(settingsStorageKeys.showPartNumbers),
+      localStorage.getItem(getKey('showPartNumbers', projectId)),
     );
     if (showPartNumbers != null) settings.showPartNumbers = showPartNumbers;
 
-    const distanceUnit = localStorage.getItem(settingsStorageKeys.distanceUnit);
-    if (distanceUnit != null) settings.distanceUnit = distanceUnit;
+    const distanceUnit = localStorage.getItem(
+      getKey('distanceUnit', projectId),
+    );
+    if (distanceUnit != null)
+      settings.distanceUnit = distanceUnit as AccountSettings['distanceUnit'];
 
     return {
       ...DEFAULT_SETTINGS,
@@ -66,18 +78,24 @@ export function createLocalAccountService(): AccountService {
 
   return {
     id: 'local',
-    async getSettings() {
-      return getSettings();
+    async getSettings(projectId) {
+      return getSettings(projectId);
     },
-    async setSettings(changes) {
+    async setSettings(projectId, changes) {
       Object.entries(changes).forEach(([key, value]) => {
-        const localStorageKey =
-          settingsStorageKeys[key as keyof AccountSettings];
+        const localStorageKey = getKey(key as keyof AccountSettings, projectId);
         if (!localStorageKey) return;
 
         localStorage.setItem(localStorageKey, String(value));
       });
     },
+    async deleteSettings(projectId) {
+      Object.keys(_settingsStorageKeys).forEach((key) =>
+        localStorage.removeItem(
+          getKey(key as keyof AccountSettings, projectId),
+        ),
+      );
+    },
     async listProjects() {
       return listProjects();
     },
diff --git a/web/utils/accounts/index.ts b/web/utils/accounts/index.ts
index 75f47c7..da684a5 100644
--- a/web/utils/accounts/index.ts
+++ b/web/utils/accounts/index.ts
@@ -1,3 +1,3 @@
 export * from './AccountService';
-export * from './firebaseAccountService';
+export * from './FirebaseAccountService';
 export * from './LocalAccountService';