Consistent Settings (#198)

* Only countup on first load.

* random fixes

* Consistent settings + Alphatized routes in App.tsx

packages/interface/src/App.tsx

@@ -27,11 +27,17 @@ import { PhotosScreen } from './screens/Photos';
 import { RedirectPage } from './screens/Redirect';
 import { SettingsScreen } from './screens/Settings';
 import { TagScreen } from './screens/Tag';
+import AppearanceSettings from './screens/settings/AppearanceSettings';
 import ExperimentalSettings from './screens/settings/ExperimentalSettings';
 import GeneralSettings from './screens/settings/GeneralSettings';
+import KeysSettings from './screens/settings/KeysSetting';
 import LibrarySettings from './screens/settings/LibrarySettings';
 import LocationSettings from './screens/settings/LocationSettings';
 import SecuritySettings from './screens/settings/SecuritySettings';
+import ContactsSettings from './screens/settings/SharingSettings';
+import SharingSettings from './screens/settings/SharingSettings';
+import SyncSettings from './screens/settings/SyncSettings';
+import TagsSettings from './screens/settings/TagsSettings';
 import './style.scss';
 
 const queryClient = new QueryClient();
@@ -97,17 +103,17 @@ function SettingsRoutes({ modal = false }) {
 					element={modal ? <Modal children={<SettingsScreen />} /> : <SettingsScreen />}
 				>
 					<Route index element={<GeneralSettings />} />
-					<Route path="general" element={<GeneralSettings />} />
-					<Route path="security" element={<SecuritySettings />} />
-					<Route path="appearance" element={<></>} />
+
+					<Route path="appearance" element={<AppearanceSettings />} />
 					<Route path="experimental" element={<ExperimentalSettings />} />
-					<Route path="locations" element={<LocationSettings />} />
+					<Route path="general" element={<GeneralSettings />} />
+					<Route path="keys" element={<KeysSettings />} />
 					<Route path="library" element={<LibrarySettings />} />
-					<Route path="media" element={<></>} />
-					<Route path="keys" element={<></>} />
-					<Route path="tags" element={<></>} />
-					<Route path="sync" element={<></>} />
-					<Route path="contacts" element={<></>} />
+					<Route path="security" element={<SecuritySettings />} />
+					<Route path="locations" element={<LocationSettings />} />
+					<Route path="sharing" element={<SharingSettings />} />
+					<Route path="sync" element={<SyncSettings />} />
+					<Route path="tags" element={<TagsSettings />} />
 				</Route>
 			</Routes>
 		</SlideUp>

packages/interface/src/screens/settings/AppearanceSettings.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
+
+export default function AppearanceSettings() {
+	return (
+		<SettingsContainer>
+			<SettingsHeader title="Appearance" description="Change the look of your client." />
+		</SettingsContainer>
+	);
+}

packages/interface/src/screens/settings/GeneralSettings.tsx

@@ -1,11 +1,8 @@
-import { useBridgeCommand, useBridgeQuery } from '@sd/client';
-import { Button } from '@sd/ui';
-import { Input } from '@sd/ui';
-import React, { useState } from 'react';
+import { useBridgeQuery } from '@sd/client';
+import React from 'react';
 
 import { InputContainer } from '../../components/primitive/InputContainer';
 import Listbox from '../../components/primitive/Listbox';
-import Slider from '../../components/primitive/Slider';
 import { SettingsContainer } from '../../components/settings/SettingsContainer';
 import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
@@ -18,10 +15,6 @@ export default function GeneralSettings() {
 				title="General Settings"
 				description="Basic settings related to this client."
 			/>
-			<p className="px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
-				<b>Note: </b>This is a pre-alpha build of Spacedrive, many features are yet to be
-				functional.
-			</p>
 
 			{/* <InputContainer
         title="Test scan directory"

packages/interface/src/screens/settings/KeysSetting.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
+
+export default function KeysSettings() {
+	return (
+		<SettingsContainer>
+			<SettingsHeader title="Keys" description="Manage your keys." />
+		</SettingsContainer>
+	);
+}

packages/interface/src/screens/settings/LibrarySettings.tsx

@@ -5,7 +5,7 @@ import { InputContainer } from '../../components/primitive/InputContainer';
 import { SettingsContainer } from '../../components/settings/SettingsContainer';
 import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
-type LibrarySecurity = 'public' | 'password' | 'vault';
+// type LibrarySecurity = 'public' | 'password' | 'vault';
 
 export default function LibrarySettings() {
 	// const locations = useBridgeQuery("SysGetLocation")

packages/interface/src/screens/settings/LocationSettings.tsx

@@ -1,15 +1,14 @@
-import { Button } from '@sd/ui';
 import React from 'react';
 
 import { InputContainer } from '../../components/primitive/InputContainer';
 import { SettingsContainer } from '../../components/settings/SettingsContainer';
 import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
-const exampleLocations = [
-	{ option: 'Macintosh HD', key: 'macintosh_hd' },
-	{ option: 'LaCie External', key: 'lacie_external' },
-	{ option: 'Seagate 8TB', key: 'seagate_8tb' }
-];
+// const exampleLocations = [
+// 	{ option: 'Macintosh HD', key: 'macintosh_hd' },
+// 	{ option: 'LaCie External', key: 'lacie_external' },
+// 	{ option: 'Seagate 8TB', key: 'seagate_8tb' }
+// ];
 
 export default function LocationSettings() {
 	// const locations = useBridgeQuery("SysGetLocation")

packages/interface/src/screens/settings/SharingSettings.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
+
+export default function SharingSettings() {
+	return (
+		<SettingsContainer>
+			<SettingsHeader title="Sharing" description="Manage who has access to your libraries." />
+		</SettingsContainer>
+	);
+}

packages/interface/src/screens/settings/SyncSettings.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
+
+export default function SyncSettings() {
+	return (
+		<SettingsContainer>
+			<SettingsHeader title="Sync" description="Manage how Spacedrive syncs." />
+		</SettingsContainer>
+	);
+}

packages/interface/src/screens/settings/TagsSettings.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
+
+export default function TagsSettings() {
+	return (
+		<SettingsContainer>
+			<SettingsHeader title="Tags" description="Manage your tags." />
+		</SettingsContainer>
+	);
+}