Prevent admin from resetting their own role.

src/app/(main)/NavBar.module.css

@@ -7,6 +7,7 @@
   background: var(--base75);
   border-bottom: 1px solid var(--base300);
   padding: 0 20px;
+  z-index: 200;
 }
 
 .logo {

src/app/(main)/UpdateNotice.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useEffect, useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from 'react-basics';

src/app/(main)/settings/users/[userId]/UserEditForm.tsx

@@ -8,13 +8,13 @@ import {
   TextField,
   SubmitButton,
   PasswordField,
-  useToasts,
 } from 'react-basics';
-import { useApi, useMessages } from 'components/hooks';
+import { useApi, useLogin, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
+import { UserContext } from './UserProvider';
 
-export function UserEditForm({ userId, data }: { userId: string; data: object }) {
+export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({
@@ -29,13 +29,14 @@ export function UserEditForm({ userId, data }: { userId: string; data: object })
     }) => post(`/users/${userId}`, { username, password, role }),
   });
   const ref = useRef(null);
-  const { showToast } = useToasts();
+  const user = useContext(UserContext);
+  const { user: login } = useLogin();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        showToast({ message: formatMessage(messages.saved), variant: 'success' });
         ref.current.reset(data);
+        onSave?.();
       },
     });
   };
@@ -53,7 +54,7 @@ export function UserEditForm({ userId, data }: { userId: string; data: object })
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 300 }}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={user} style={{ width: 300 }}>
       <FormRow label={formatMessage(labels.username)}>
         <FormInput name="username">
           <TextField />
@@ -69,15 +70,17 @@ export function UserEditForm({ userId, data }: { userId: string; data: object })
           <PasswordField autoComplete="new-password" />
         </FormInput>
       </FormRow>
-      <FormRow label={formatMessage(labels.role)}>
+      {user.id !== login.id && (
-        <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
+        <FormRow label={formatMessage(labels.role)}>
-          <Dropdown renderValue={renderValue}>
+          <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
-            <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
+            <Dropdown renderValue={renderValue}>
-            <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
+              <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
+              <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-          </Dropdown>
+              <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
-        </FormInput>
+            </Dropdown>
-      </FormRow>
+          </FormInput>
+        </FormRow>
+      )}
       <FormButtons>
         <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
       </FormButtons>

src/app/(main)/settings/users/[userId]/UserPage.tsx

@@ -1,6 +1,11 @@
 'use client';
 import UserSettings from './UserSettings';
+import UserProvider from './UserProvider';
 
 export default function ({ userId }: { userId: string }) {
-  return <UserSettings userId={userId} />;
+  return (
+    <UserProvider userId={userId}>
+      <UserSettings userId={userId} />
+    </UserProvider>
+  );
 }

src/app/(main)/settings/users/[userId]/UserProvider.tsx

@@ -0,0 +1,24 @@
+import { createContext, ReactNode, useEffect } from 'react';
+import { useModified, useUser } from 'components/hooks';
+import { Loading } from 'react-basics';
+
+export const UserContext = createContext(null);
+
+export function UserProvider({ userId, children }: { userId: string; children: ReactNode }) {
+  const { modified } = useModified(`user:${userId}`);
+  const { data: user, isFetching, isLoading, refetch } = useUser(userId);
+
+  useEffect(() => {
+    if (modified) {
+      refetch();
+    }
+  }, [modified]);
+
+  if (isFetching && isLoading) {
+    return <Loading position="page" />;
+  }
+
+  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+}
+
+export default UserProvider;

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -1,19 +1,21 @@
-import { Key, useState } from 'react';
+import { Key, useContext, useState } from 'react';
-import { Item, Loading, Tabs } from 'react-basics';
+import { Item, Tabs, useToasts } from 'react-basics';
 import Icons from 'components/icons';
-import UserEditForm from '../UserEditForm';
+import UserEditForm from './UserEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import { useMessages, useUser } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import UserWebsites from './UserWebsites';
+import { UserContext } from './UserProvider';
 
 export function UserSettings({ userId }: { userId: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const [tab, setTab] = useState<Key>('details');
-  const { data: user, isLoading } = useUser(userId, { gcTime: 0 });
+  const user = useContext(UserContext);
+  const { showToast } = useToasts();
 
-  if (isLoading) {
+  const handleSave = () => {
-    return <Loading />;
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-  }
+  };
 
   return (
     <>
@@ -22,7 +24,7 @@ export function UserSettings({ userId }: { userId: string }) {
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>
       </Tabs>
-      {tab === 'details' && <UserEditForm userId={userId} data={user} />}
+      {tab === 'details' && <UserEditForm userId={userId} onSave={handleSave} />}
       {tab === 'websites' && <UserWebsites userId={userId} />}
     </>
   );

src/app/(main)/websites/[websiteId]/realtime/Realtime.module.css

@@ -11,6 +11,6 @@
   top: 0;
   background: var(--base50);
   border-bottom: 1px solid var(--base300);
-  z-index: var(--z-index-overlay);
+  z-index: 1;
   padding: 10px 0;
 }

src/app/(main)/websites/[websiteId]/reports/page.tsx

@@ -1,5 +1,5 @@
 import WebsiteReportsPage from './WebsiteReportsPage';
 
-export default function WebsiteReportsPage({ params: { websiteId } }) {
+export default function ({ params: { websiteId } }) {
   return <WebsiteReportsPage websiteId={websiteId} />;
 }

src/components/input/TeamsButton.module.css

@@ -4,6 +4,7 @@
 
 .menu {
   background: var(--base50);
+  min-width: 260px;
 }
 
 .heading {

src/components/input/TeamsButton.tsx

@@ -29,7 +29,7 @@ export function TeamsButton({ teamId }: { teamId: string }) {
       </Button>
       <Popup alignment="end">
         {(close: () => void) => (
-          <Menu variant="popup" onSelect={handleSelect.bind(null, close)}>
+          <Menu className={styles.menu} variant="popup" onSelect={handleSelect.bind(null, close)}>
             <div className={styles.heading}>{formatMessage(labels.myAccount)}</div>
             <Item key={user.id} className={classNames({ [styles.selected]: !teamId })}>
               <Flexbox gap={10} alignItems="center">