feat: rework settings modal

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -7,7 +7,7 @@ import SearchModal from '~/components/dashboard/search/search_modal';
 import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list';
 import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
 import UserCard from '~/components/dashboard/side_nav/user_card';
-import ModalSettings from '~/components/settings/modal';
+import ModalSettings from '~/components/settings/settings_modal';
 import useActiveCollection from '~/hooks/use_active_collection';
 import useUser from '~/hooks/use_user';
 import { rgba } from '~/lib/color';

inertia/components/navbar/navbar.tsx

@@ -12,7 +12,7 @@ import {
 import ExternalLink from '~/components/common/external_link';
 import RoundedImage from '~/components/common/rounded_image';
 import UnstyledList from '~/components/common/unstyled/unstyled_list';
-import ModalSettings from '~/components/settings/modal';
+import ModalSettings from '~/components/settings/settings_modal';
 import useUser from '~/hooks/use_user';
 
 type NavbarListDirection = {

inertia/components/settings/modal.tsx

@@ -1,39 +0,0 @@
-import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { useTranslation } from 'react-i18next';
-import { PiGearLight } from 'react-icons/pi';
-import Modal from '~/components/common/modal/modal';
-import LangSelector from '~/components/lang_selector';
-import ThemeSwitcher from '~/components/theme_switcher';
-import useToggle from '~/hooks/use_modal';
-import useUser from '~/hooks/use_user';
-
-export default function ModalSettings({
-  openItem: OpenItem,
-}: {
-  // TODO: fix this :()
-  openItem: any;
-}) {
-  const { t } = useTranslation('common');
-  const { isShowing, open, close } = useToggle();
-  const { isAuthenticated } = useUser();
-  return (
-    <>
-      <OpenItem onClick={open}>
-        <PiGearLight size={20} />
-        {t('settings')}
-      </OpenItem>
-      <Modal title={t('settings')} opened={isShowing} close={close}>
-        <LangSelector />
-        <hr />
-        <ThemeSwitcher />
-        {isAuthenticated && (
-          <>
-            <hr />
-            <Link href={route('auth.logout').url}>{t('logout')}</Link>
-          </>
-        )}
-      </Modal>
-    </>
-  );
-}

inertia/components/settings/profile.tsx

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import dayjs from 'dayjs';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import RoundedImage from '~/components/common/rounded_image';
+import UnstyledList from '~/components/common/unstyled/unstyled_list';
+import { DATE_FORMAT } from '~/constants';
+import useUser from '~/hooks/use_user';
+
+const ProfileStyle = styled(UnstyledList)({
+  display: 'flex',
+  gap: '1.25em',
+});
+
+const Column = styled.li({
+  display: 'flex',
+  gap: '1rem',
+  flexDirection: 'column',
+});
+
+const Field = styled.li({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export default function Profile() {
+  const { user, isAuthenticated } = useUser();
+  const { t } = useTranslation('common');
+
+  const avatarLabel = t('avatar', {
+    name: user?.name,
+  });
+
+  if (!isAuthenticated) {
+    return <Fragment />;
+  }
+
+  return (
+    <ProfileStyle>
+      <Column>
+        <RoundedImage
+          src={user.avatarUrl}
+          width={96}
+          height={96}
+          alt={avatarLabel}
+          title={avatarLabel}
+        />
+        <Link href={route('auth.logout').url}>{t('logout')}</Link>
+      </Column>
+      <Column>
+        <Field>
+          <b>{t('name')}</b> {user.fullname}
+        </Field>
+        <Field>
+          <b>{t('email')}</b> {user.email}
+        </Field>
+        <Field>
+          <b>{t('member-since')}</b>{' '}
+          {dayjs(user.createdAt.toString()).format(DATE_FORMAT)}
+        </Field>
+      </Column>
+    </ProfileStyle>
+  );
+}

inertia/components/settings/settings_modal.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next';
+import { CiDark } from 'react-icons/ci';
+import { FaUser } from 'react-icons/fa';
+import { IoLanguageOutline } from 'react-icons/io5';
+import { PiGearLight } from 'react-icons/pi';
+import FormField from '~/components/common/form/_form_field';
+import Modal from '~/components/common/modal/modal';
+import Tabs, { Tab } from '~/components/common/tabs/tabs';
+import LangSelector from '~/components/lang_selector';
+import Profile from '~/components/settings/profile';
+import ThemeSwitcher from '~/components/theme_switcher';
+import useToggle from '~/hooks/use_modal';
+import useUser from '~/hooks/use_user';
+export default function ModalSettings({
+  openItem: OpenItem,
+}: {
+  // TODO: fix this :()
+  openItem: any;
+}) {
+  const { t } = useTranslation('common');
+  const { isShowing, open, close } = useToggle();
+  const { isAuthenticated } = useUser();
+
+  let tabs: Tab[] = [
+    {
+      title: t('lang'),
+      content: <LangSelector />,
+      icon: IoLanguageOutline,
+    },
+    {
+      title: 'Theme',
+      content: (
+        <FormField css={{ flexDirection: 'row' }}>
+          <label>Dark theme?</label>
+          <ThemeSwitcher />
+        </FormField>
+      ),
+      icon: CiDark,
+    },
+  ];
+
+  if (isAuthenticated) {
+    tabs.push({
+      title: t('profile'),
+      content: <Profile />,
+      icon: FaUser,
+    });
+  }
+
+  return (
+    <>
+      <OpenItem onClick={open}>
+        <PiGearLight size={20} />
+        {t('settings')}
+      </OpenItem>
+      <Modal
+        title={t('settings')}
+        opened={isShowing}
+        close={close}
+        css={{ justifyContent: 'flex-start' }}
+      >
+        <Tabs tabs={tabs} />
+      </Modal>
+    </>
+  );
+}

inertia/i18n/locales/en/common.json

@@ -52,7 +52,8 @@
   "select-your-lang": "Change the language",
   "name": "Name",
   "email": "Email",
+  "member-since": "Member since",
   "footer": {
     "made_by": "Made with ❤\uFE0F by"
   }
-}
+}

inertia/i18n/locales/fr/common.json

@@ -52,7 +52,8 @@
   "select-your-lang": "Modifier la langue",
   "name": "Nom",
   "email": "Email",
+  "member-since": "Membre depuis",
   "footer": {
     "made_by": "Fait avec ❤\uFE0F par"
   }
-}
+}