From 4de4cab9bbd1f9519f4215e572d3341f905108fd Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Mon, 24 Mar 2025 10:57:14 +0000 Subject: [PATCH] ui improvements --- src/Components/AppShell/NavBar.tsx | 110 +--------------- src/Components/AppShell/UserControl.tsx | 119 ++++++++++++++++++ src/Components/Profile/Templates/TabsView.tsx | 6 +- src/Components/Templates/ThemeControl.tsx | 8 +- 4 files changed, 129 insertions(+), 114 deletions(-) create mode 100644 src/Components/AppShell/UserControl.tsx diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 3eae1284..1744a767 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -1,24 +1,14 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon' -import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon' import { useEffect, useRef, useState } from 'react' import { Link, useLocation } from 'react-router-dom' -import { toast } from 'react-toastify' -import { useAuth } from '#components/Auth/useAuth' -import { useItems } from '#components/Map/hooks/useItems' import { ThemeControl } from '#components/Templates/ThemeControl' import { useAppState, useSetAppState } from './hooks/useAppState' - -import type { Item } from '#types/Item' +import { UserControl } from './UserControl' export default function NavBar({ appName }: { appName: string }) { - const { isAuthenticated, user, logout } = useAuth() - - const [userProfile, setUserProfile] = useState({} as Item) - const items = useItems() - const appState = useAppState() const setAppState = useSetAppState() @@ -26,14 +16,6 @@ export default function NavBar({ appName }: { appName: string }) { setAppState({ sideBarOpen: !appState.sideBarOpen }) } - useEffect(() => { - const profile = - user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer) - profile - ? setUserProfile(profile) - : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' }) - }, [user, items]) - const nameRef = useRef(null) const [nameWidth, setNameWidth] = useState(0) const location = useLocation() @@ -49,24 +31,6 @@ export default function NavBar({ appName }: { appName: string }) { embedded !== 'true' && setShowNav(true) }, [location]) - const onLogout = async () => { - await toast.promise(logout(), { - success: { - render() { - return 'Bye bye' - }, - // other options - icon: '👋', - }, - error: { - render({ data }) { - return JSON.stringify(data) - }, - }, - pending: 'logging out ..', - }) - } - if (showNav) { return ( <> @@ -102,77 +66,7 @@ export default function NavBar({ appName }: { appName: string }) { {appState.showThemeControl && } - - {isAuthenticated ? ( -
- - {userProfile.image && ( -
-
- -
-
- )} -
{userProfile.name || user?.first_name}
- -
- - -
-
- ) : ( -
-
- -
Login
- - - -
Sign Up
- -
-
- -
    -
  • - Login -
    • -
  • - Sign Up -
    • -
-
-
- )} + ) diff --git a/src/Components/AppShell/UserControl.tsx b/src/Components/AppShell/UserControl.tsx new file mode 100644 index 00000000..03c1669b --- /dev/null +++ b/src/Components/AppShell/UserControl.tsx @@ -0,0 +1,119 @@ +import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' +import { useState, useEffect } from 'react' +import { Link } from 'react-router-dom' +import { toast } from 'react-toastify' + +import { useAuth } from '#components/Auth/useAuth' +import { useItems } from '#components/Map/hooks/useItems' + +import { useAppState } from './hooks/useAppState' + +import type { Item } from '#types/Item' + +export const UserControl = () => { + const { isAuthenticated, user, logout } = useAuth() + const appState = useAppState() + + const [userProfile, setUserProfile] = useState({} as Item) + const items = useItems() + + useEffect(() => { + const profile = + user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer) + profile + ? setUserProfile(profile) + : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' }) + }, [user, items]) + + const onLogout = async () => { + await toast.promise(logout(), { + success: { + render() { + return 'Bye bye' + }, + // other options + icon: '👋', + }, + error: { + render({ data }) { + return JSON.stringify(data) + }, + }, + pending: 'logging out ..', + }) + } + return ( + <> + {isAuthenticated ? ( +
+ + {userProfile.image && ( +
+
+ +
+
+ )} +
{userProfile.name || user?.first_name}
+ +
+ + +
+
+ ) : ( +
+
+ +
Login
+ + + +
Sign Up
+ +
+
+ +
    +
  • + Login +
    • +
  • + Sign Up +
    • +
+
+
+ )} + + ) +} diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index bccb2cc8..26768d6f 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -123,7 +123,7 @@ export const TabsView = ({ role='tabpanel' className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden' > - +
{attestations .filter((a) => a.to.some((t) => t.directus_users_id === item.user_created?.id)) @@ -135,7 +135,9 @@ export const TabsView = ({
{a.emoji}
diff --git a/src/Components/Templates/ThemeControl.tsx b/src/Components/Templates/ThemeControl.tsx index 6aa09f42..6ed593fc 100644 --- a/src/Components/Templates/ThemeControl.tsx +++ b/src/Components/Templates/ThemeControl.tsx @@ -22,8 +22,8 @@ export const ThemeControl = () => { useEffect(() => { if (theme !== 'default') { localStorage.setItem('theme', JSON.stringify(theme)) - document.documentElement.setAttribute('data-theme', theme) - } + } else localStorage.removeItem('theme') + document.documentElement.setAttribute('data-theme', theme) }, [theme]) return ( @@ -42,12 +42,12 @@ export const ThemeControl = () => {
    {themes.map((t) => (