6 files changed, 15 insertions, 19 deletions

diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index f436bf0..e6da59f 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -20,11 +20,12 @@
 
 import FilledInput from '@mui/material/FilledInput';
 import { styled } from '@mui/material/styles';
-import { Service } from '@sophie/shared';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import Service from '../../stores/Service';
+
 import GoAdornment from './GoAdornment';
 import LocationOverlayInput from './LocationOverlayInput';
 import UrlAdornment from './UrlAdornment';
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 77b02b6..ce59692 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -26,10 +26,11 @@ import IconRefresh from '@mui/icons-material/Refresh';
 import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import { Service } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import Service from '../../stores/Service';
+
 function NavigationButtons({
   service,
 }: {
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 144f860..5db8a0c 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -20,10 +20,11 @@
 
 import Badge from '@mui/material/Badge';
 import { styled, useTheme } from '@mui/material/styles';
-import { Service } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
+import type Service from '../../stores/Service';
+
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
   slot: 'Root',
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 2241476..eba21b5 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -65,11 +65,8 @@ const ServiceSwitcherTab = styled(Tab, {
 }));
 
 function ServiceSwitcher(): JSX.Element {
-  const store = useStore();
-  const {
-    settings: { selectedService },
-    services,
-  } = store;
+  const { settings, services } = useStore();
+  const { selectedService } = settings;
 
   return (
     <ServiceSwitcherRoot
@@ -77,7 +74,7 @@ function ServiceSwitcher(): JSX.Element {
       orientation="vertical"
       value={selectedService === undefined ? false : selectedService.id}
       onChange={(_event, newValue: string) =>
-        store.setSelectedServiceId(newValue)
+        settings.setSelectedServiceId(newValue)
       }
     >
       {services.map((service) => (
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index 164b066..bacbf07 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -27,15 +27,13 @@ import React from 'react';
 import { useStore } from '../StoreProvider';
 
 export default observer(() => {
-  const store = useStore();
-  const {
-    shared: { shouldUseDarkColors },
-  } = store;
+  const { shared } = useStore();
+  const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
       aria-label="Toggle dark mode"
-      onClick={() => store.toggleDarkMode()}
+      onClick={() => shared.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 60033b0..d2f0745 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -45,17 +45,15 @@ function ToggleLocationBarIcon({
 }
 
 function ToggleLocationBarButton(): JSX.Element {
-  const store = useStore();
-  const {
-    settings: { selectedService, showLocationBar },
-  } = store;
+  const { settings } = useStore();
+  const { selectedService, showLocationBar } = settings;
 
   return (
     <IconButton
       aria-pressed={showLocationBar}
       aria-controls={LOCATION_BAR_ID}
       aria-label="Show location bar"
-      onClick={() => store.toggleLocationBar()}
+      onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
         loading={selectedService?.state === 'loading'}