Add unit setting (#183)

* Add Toggle component

* Add default units to settings

* Add defaultBaseUnit, shorten settings names

* Make debug panel use Toggle, fix colors

* add eslint-plugin-css-modules

src/useStore.ts

@@ -91,6 +91,13 @@ export type GuiModes =
       position: Position
     }
 
+type UnitSystem = 'imperial' | 'metric'
+
+export const baseUnits: Record<UnitSystem, string[]> = {
+  imperial: ['in', 'ft'],
+  metric: ['mm', 'cm', 'm'],
+}
+
 interface DefaultDir {
   base?: BaseDirectory
   dir: string
@@ -152,6 +159,10 @@ export interface StoreState {
   setDefaultDir: (dir: DefaultDir) => void
   defaultProjectName: string
   setDefaultProjectName: (defaultProjectName: string) => void
+  defaultUnitSystem: UnitSystem,
+  setDefaultUnitSystem: (defaultUnitSystem: UnitSystem) => void
+  defaultBaseUnit: string,
+  setDefaultBaseUnit: (defaultBaseUnit: string) => void
   showHomeMenu: boolean
   setHomeShowMenu: (showMenu: boolean) => void
   homeMenuItems: {
@@ -314,6 +325,10 @@ export const useStore = create<StoreState>()(
       setDefaultDir: (dir) => set({ defaultDir: dir }),
       defaultProjectName: 'new-project-$n',
       setDefaultProjectName: (defaultProjectName) => set({ defaultProjectName }),
+      defaultUnitSystem: 'imperial',
+      setDefaultUnitSystem: (defaultUnitSystem) => set({ defaultUnitSystem }),
+      defaultBaseUnit: 'in',
+      setDefaultBaseUnit: (defaultBaseUnit) => set({ defaultBaseUnit }),
       showHomeMenu: true,
       setHomeShowMenu: (showHomeMenu) => set({ showHomeMenu }),
       homeMenuItems: [],
@@ -331,6 +346,8 @@ export const useStore = create<StoreState>()(
             'code',
             'defaultDir',
             'defaultProjectName',
+            'defaultUnitSystem',
+            'defaultBaseUnit',
             'token',
             'debugPanel'
           ].includes(key))