feat: create basic settings modal

2025-12-09 15:05:35 +00:00 · 2024-05-17 00:44:08 +02:00
parent 53aa7bc22b
commit a910b898c7
7 changed files with 124 additions and 46 deletions
--- a/inertia/components/common/modal/_modal_wrapper.tsx
+++ b/inertia/components/common/modal/_modal_wrapper.tsx
@@ -9,7 +9,7 @@ const ModalWrapper = styled.div(({ theme }) => ({
  height: '100%',
  width: '100%',
  background: rgba(theme.colors.black, 0.35),
-  backdropFilter: 'blur(0.25em)',
+  backdropFilter: 'blur(0.1em)',
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column',
--- a/inertia/components/dashboard/side_nav/side_navigation.tsx
+++ b/inertia/components/dashboard/side_nav/side_navigation.tsx
@@ -5,8 +5,8 @@ import { IoAdd } from 'react-icons/io5';
 import { MdOutlineAdminPanelSettings } from 'react-icons/md';
 import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list';
 import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
-import OpenSettingsButton from '~/components/dashboard/side_nav/open_settings';
 import UserCard from '~/components/dashboard/side_nav/user_card';
+import ModalSettings from '~/components/settings/modal';
 import useActiveCollection from '~/hooks/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';

@@ -21,6 +21,10 @@ const AdminButton = styled(Item)(({ theme }) => ({
  color: theme.colors.lightRed,
 }));

+const SettingsButton = styled(Item)(({ theme }) => ({
+  color: theme.colors.grey,
+}));
+
 const AddButton = styled(ItemLink)(({ theme }) => ({
  color: theme.colors.primary,
 }));
@@ -34,7 +38,7 @@ export default function SideNavigation() {
        <AdminButton>
          <MdOutlineAdminPanelSettings /> Administrator
        </AdminButton>
-        <OpenSettingsButton />
+        <ModalSettings openItem={SettingsButton} />
        <AddButton
          href={appendCollectionId(
            route('link.create-form').url,
--- a/inertia/components/navbar/navbar.tsx
+++ b/inertia/components/navbar/navbar.tsx
@@ -3,11 +3,14 @@ import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { IoIosLogOut } from 'react-icons/io';
 import Dropdown from '~/components/common/dropdown/dropdown';
-import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
+import {
+  DropdownItemButton,
+  DropdownItemLink,
+} from '~/components/common/dropdown/dropdown_item';
 import ExternalLink from '~/components/common/external_link';
 import RoundedImage from '~/components/common/rounded_image';
 import UnstyledList from '~/components/common/unstyled/unstyled_list';
-import useDarkTheme from '~/hooks/use_dark_theme';
+import ModalSettings from '~/components/settings/modal';
 import useUser from '~/hooks/use_user';
 import PATHS from '../../../app/constants/paths';

@@ -57,14 +60,6 @@ export default function Navbar() {
        </li>
      </NavList>
      <NavList right>
-        <li>
-          <select>
-            <option>EN</option>
-          </select>
-        </li>
-        <li>
-          <ThemeSwitch />
-        </li>
        <li>
          <ExternalLink href={PATHS.REPO_GITHUB}>GitHub</ExternalLink>
        </li>
@@ -74,22 +69,7 @@ export default function Navbar() {
              <Link href={route('dashboard').url}>Dashboard</Link>
            </li>
            <li>
-              <Dropdown
-                label={
-                  <UserCard>
-                    <RoundedImage
-                      src={user.avatarUrl}
-                      width={22}
-                      referrerPolicy="no-referrer"
-                    />
-                    {user.nickName}
-                  </UserCard>
-                }
-              >
-                <DropdownItemLink href={route('auth.logout').url} danger>
-                  <IoIosLogOut /> Logout
-                </DropdownItemLink>
-              </Dropdown>
+              <ProfileDropdown />
            </li>
          </>
        ) : (
@@ -102,13 +82,25 @@ export default function Navbar() {
  );
 }

-function ThemeSwitch() {
-  const { isDarkTheme, toggleDarkTheme } = useDarkTheme();
+function ProfileDropdown() {
+  const { user } = useUser();
  return (
-    <input
-      type="checkbox"
-      onChange={({ target }) => toggleDarkTheme(target.checked)}
-      checked={isDarkTheme}
-    />
+    <Dropdown
+      label={
+        <UserCard>
+          <RoundedImage
+            src={user!.avatarUrl}
+            width={22}
+            referrerPolicy="no-referrer"
+          />
+          {user!.nickName}
+        </UserCard>
+      }
+    >
+      <ModalSettings openItem={DropdownItemButton} />
+      <DropdownItemLink href={route('auth.logout').url} danger>
+        <IoIosLogOut /> Logout
+      </DropdownItemLink>
+    </Dropdown>
  );
 }
--- a/inertia/components/dashboard/side_nav/open_settings.tsx
+++ b/inertia/components/dashboard/side_nav/open_settings.tsx
@@ -1,24 +1,29 @@
-import styled from '@emotion/styled';
 import { BsGear } from 'react-icons/bs';
 import Modal from '~/components/common/modal/modal';
-import { Item } from '~/components/dashboard/side_nav/nav_item';
+import ThemeSwitcher from '~/components/theme_switcher';
 import useToggle from '~/hooks/use_modal';

-const SettingsButton = styled(Item)(({ theme }) => ({
-  color: theme.colors.grey,
-}));
-
-export default function OpenSettingsButton() {
+export default function ModalSettings({
+  openItem: OpenItem,
+}: {
+  // TODO: fix this :()
+  openItem: any;
+}) {
  const { isShowing, open, close } = useToggle();
-
  return (
    <>
-      <SettingsButton onClick={open}>
+      <OpenItem onClick={open}>
        <BsGear />
        Settings
-      </SettingsButton>
+      </OpenItem>
      <Modal title="Settings" opened={isShowing} close={close}>
        Modal settings
+        <hr />
+        <select>
+          <option>EN</option>
+        </select>
+        <hr />
+        <ThemeSwitcher />
      </Modal>
    </>
  );
--- a/inertia/components/theme_switcher.tsx
+++ b/inertia/components/theme_switcher.tsx
@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+import Toggle from 'react-toggle';
+import 'react-toggle/style.css';
+import useDarkTheme from '~/hooks/use_dark_theme';
+
+export default function ThemeSwitcher() {
+  const { isDarkTheme, toggleDarkTheme } = useDarkTheme();
+
+  if (typeof window === 'undefined') {
+    return <Fragment />;
+  }
+
+  return (
+    <Toggle
+      onChange={({ target }) => toggleDarkTheme(target.checked)}
+      checked={isDarkTheme}
+      name="theme-switcher"
+      id="theme-switcher"
+      icons={{
+        checked: '☀️',
+        unchecked: '🌑',
+      }}
+    />
+  );
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
        "react-i18next": "^14.1.1",
        "react-icons": "^5.1.0",
        "react-swipeable": "^7.0.1",
+        "react-toggle": "^4.1.3",
        "reflect-metadata": "^0.2.2",
        "uuid": "^9.0.1"
      },
@@ -55,6 +56,7 @@
        "@types/node": "^20.12.7",
        "@types/react": "^18.3.1",
        "@types/react-dom": "^18.3.0",
+        "@types/react-toggle": "^4.0.5",
        "@types/uuid": "^9.0.8",
        "@vitejs/plugin-react": "^4.2.1",
        "eslint": "^8.57.0",
@@ -2993,6 +2995,15 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-toggle": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.5.tgz",
+      "integrity": "sha512-MHHEDe7GnF/EhLtI5sT70Dqab8rwlgjRZtu/u6gmfbYd+HeYxWiUSRog16+1BCfkz7Wy2VU6+TPU2oCsDtqDzA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/semver": {
      "version": "7.5.8",
      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -8060,6 +8071,15 @@
        "url": "https://github.com/fb55/nth-check?sponsor=1"
      }
    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.13.1",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -8795,6 +8815,23 @@
      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-3.0.0.tgz",
      "integrity": "sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ=="
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    },
    "node_modules/property-information": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
@@ -9041,6 +9078,19 @@
        "react": "^16.8.3 || ^17 || ^18"
      }
    },
+    "node_modules/react-toggle": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
+      "integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
+      "dependencies": {
+        "classnames": "^2.2.5"
+      },
+      "peerDependencies": {
+        "prop-types": ">= 15.3.0 < 19",
+        "react": ">= 15.3.0 < 19",
+        "react-dom": ">= 15.3.0 < 19"
+      }
+    },
    "node_modules/read-package-up": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/read-package-up/-/read-package-up-11.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
    "@types/node": "^20.12.7",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
+    "@types/react-toggle": "^4.0.5",
    "@types/uuid": "^9.0.8",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
@@ -89,6 +90,7 @@
    "react-i18next": "^14.1.1",
    "react-icons": "^5.1.0",
    "react-swipeable": "^7.0.1",
+    "react-toggle": "^4.1.3",
    "reflect-metadata": "^0.2.2",
    "uuid": "^9.0.1"
  },