wip: settings screen

2023-11-16 17:48:29 +07:00
parent 6dc4e1cde6
commit 954b729dc9
16 changed files with 548 additions and 78 deletions
--- a/src/shared/icons/advancedSettings.tsx
+++ b/src/shared/icons/advancedSettings.tsx
@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+export function AdvancedSettingsIcon(
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M13.75 7h-10m10 0a3.25 3.25 0 116.5 0 3.25 3.25 0 11-6.5 0zm6.5 10h-8m0 0a3.25 3.25 0 11-6.5 0m6.5 0a3.25 3.25 0 10-6.5 0m0 0h-2"
+      ></path>
+    </svg>
+  );
+}
--- a/src/shared/icons/dark.tsx
+++ b/src/shared/icons/dark.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function DarkIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M21.248 11.811a6.5 6.5 0 01-9.06-9.06 9.25 9.25 0 109.06 9.06z"
+      ></path>
+    </svg>
+  );
+}
--- a/src/shared/icons/index.ts
+++ b/src/shared/icons/index.ts
@@ -78,3 +78,9 @@ export * from './heading2';
 export * from './heading3';
 export * from './bold';
 export * from './italic';
+export * from './user';
+export * from './advancedSettings';
+export * from './info';
+export * from './light';
+export * from './dark';
+export * from './system';
--- a/src/shared/icons/info.tsx
+++ b/src/shared/icons/info.tsx
@@ -0,0 +1,32 @@
+import { SVGProps } from 'react';
+
+export function InfoIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M10.75 11H12v5.25M21.25 12a9.25 9.25 0 11-18.5 0 9.25 9.25 0 0118.5 0z"
+      ></path>
+      <rect
+        width="1.25"
+        height="1.25"
+        x="11.375"
+        y="7.375"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.25"
+        rx="0.625"
+      ></rect>
+    </svg>
+  );
+}
--- a/src/shared/icons/light.tsx
+++ b/src/shared/icons/light.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function LightIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M11.998 3.29V1.769M5.84 18.158l-1.077 1.078m7.235 2.997v-1.524m7.235-15.944l-1.077 1.077M20.707 12h1.523m-4.074 6.159l1.077 1.077M1.766 12h1.523m1.474-7.235L5.84 5.842m9.87 2.446a5.25 5.25 0 11-7.424 7.424 5.25 5.25 0 017.424-7.424z"
+      ></path>
+    </svg>
+  );
+}
--- a/src/shared/icons/system.tsx
+++ b/src/shared/icons/system.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function SystemModeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M3.75 12.25V12a8.25 8.25 0 1116.5 0v.25m-18.5 4h20.5m-15.5 4h10.5"
+      ></path>
+    </svg>
+  );
+}
--- a/src/shared/icons/user.tsx
+++ b/src/shared/icons/user.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from 'react';
+
+export function UserIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M5.857 18.916C7.171 16.996 9.332 15.75 12 15.75c2.668 0 4.83 1.247 6.143 3.166m-12.286 0A9.215 9.215 0 0012 21.25c2.358 0 4.51-.882 6.143-2.334m-12.286 0a9.25 9.25 0 1112.286 0M15.25 10a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0z"
+      ></path>
+    </svg>
+  );
+}
--- a/src/shared/layouts/settings.tsx
+++ b/src/shared/layouts/settings.tsx
@@ -1,10 +1,17 @@
-import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
+import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { WindowTitlebar } from 'tauri-controls';

 import { useStorage } from '@libs/storage/provider';

-import { SecureIcon, SettingsIcon } from '@shared/icons';
+import {
+  AdvancedSettingsIcon,
+  ArrowLeftIcon,
+  InfoIcon,
+  SecureIcon,
+  SettingsIcon,
+  UserIcon,
+} from '@shared/icons';

 export function SettingsLayout() {
  const { db } = useStorage();
@@ -17,77 +24,88 @@ export function SettingsLayout() {
        <div data-tauri-drag-region className="h-9" />
      )}
      <div className="flex h-full min-h-0 w-full flex-col gap-8 overflow-y-auto pb-10">
-        <div className="flex h-20 w-full items-end justify-center gap-0.5 border-b border-neutral-200 pb-2 dark:border-neutral-800">
-          <NavLink
-            to="/settings/"
-            className={({ isActive }) =>
-              twMerge(
-                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900',
-                isActive
-                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
-                  : ''
-              )
-            }
-          >
-            <SettingsIcon className="h-6 w-6" />
-            <p className="text-sm font-medium">User</p>
-          </NavLink>
-          <NavLink
-            to="/settings/general"
-            className={({ isActive }) =>
-              twMerge(
-                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
-                isActive
-                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
-                  : ''
-              )
-            }
-          >
-            <SettingsIcon className="h-6 w-6" />
-            <p className="text-sm font-medium">General</p>
-          </NavLink>
-          <NavLink
-            to="/settings/backup"
-            className={({ isActive }) =>
-              twMerge(
-                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
-                isActive
-                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
-                  : ''
-              )
-            }
-          >
-            <SecureIcon className="h-6 w-6" />
-            <p className="text-sm font-medium">Backup</p>
-          </NavLink>
-          <NavLink
-            to="/settings/advanced"
-            className={({ isActive }) =>
-              twMerge(
-                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
-                isActive
-                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
-                  : ''
-              )
-            }
-          >
-            <SettingsIcon className="h-6 w-6" />
-            <p className="text-sm font-medium">Advanced</p>
-          </NavLink>
-          <NavLink
-            to="/settings/about"
-            className={({ isActive }) =>
-              twMerge(
-                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
-                isActive
-                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
-                  : ''
-              )
-            }
-          >
-            <SettingsIcon className="h-6 w-6" />
-            <p className="text-sm font-medium">About</p>
-          </NavLink>
+        <div className="flex h-20 w-full items-center justify-between border-b border-neutral-200 px-2 pb-2 dark:border-neutral-900">
+          <div>
+            <Link
+              to="/"
+              className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
+            >
+              <ArrowLeftIcon className="h-5 w-5" />
+            </Link>
+          </div>
+          <div className="flex items-center gap-0.5">
+            <NavLink
+              to="/settings/"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                  isActive
+                    ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : ''
+                )
+              }
+            >
+              <UserIcon className="h-6 w-6" />
+              <p className="text-sm font-medium">User</p>
+            </NavLink>
+            <NavLink
+              to="/settings/general"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                  isActive
+                    ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : ''
+                )
+              }
+            >
+              <SettingsIcon className="h-6 w-6" />
+              <p className="text-sm font-medium">General</p>
+            </NavLink>
+            <NavLink
+              to="/settings/backup"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                  isActive
+                    ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : ''
+                )
+              }
+            >
+              <SecureIcon className="h-6 w-6" />
+              <p className="text-sm font-medium">Backup</p>
+            </NavLink>
+            <NavLink
+              to="/settings/advanced"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                  isActive
+                    ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : ''
+                )
+              }
+            >
+              <AdvancedSettingsIcon className="h-6 w-6" />
+              <p className="text-sm font-medium">Advanced</p>
+            </NavLink>
+            <NavLink
+              to="/settings/about"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                  isActive
+                    ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                    : ''
+                )
+              }
+            >
+              <InfoIcon className="h-6 w-6" />
+              <p className="text-sm font-medium">About</p>
+            </NavLink>
+          </div>
+          <div />
        </div>
        <Outlet />
        <ScrollRestoration />