Add addons to expansion bar

api/v1/models/server.py

@@ -16,15 +16,15 @@ required_settings = [
     "LOGIN.LOGIN_LIMIT",
 ]
 
-recommended_settings = [
+summary_settings = [
     "LOGIN.CLIENT_VER",
     "MAIN.ENABLE_TRUST_CASTING",
+    "MAP.LEVEL_SYNC_ENABLE",
     "MAIN.HOMEPOINT_TELEPORT",
     "MAIN.ENABLE_SURVIVAL_GUIDE",
-    "MAP.LEVEL_SYNC_ENABLE",
-    "MAIN.ENABLE_ROE",
     "MAIN.ENABLE_FIELD_MANUALS",
     "MAIN.ENABLE_GROUNDS_TOMES",
+    "MAIN.ENABLE_ROE",
 ]
 
 expansions_settings = {
@@ -146,14 +146,14 @@ class Server(models.Model):
                 )
 
             settings_summary = {}
-            for setting in recommended_settings:
+            for setting in summary_settings:
                 if server_settings[setting]:
                     settings_summary[setting] = server_settings[setting]
             # Check customizations
             for key, value in server_settings.items():
                 if (
                     key not in required_settings
-                    and key not in recommended_settings
+                    and key not in summary_settings
                     and key not in expansions_settings
                     and (key not in default_settings or default_settings[key] != value)
                 ):

client/src/components/Header/SearchServers.tsx

@@ -1,4 +1,4 @@
-import { RestartAlt } from '@mui/icons-material';
+import { RestartAlt, Sort } from '@mui/icons-material';
 import {
   Box,
   Container,
@@ -497,52 +497,10 @@ export default function SearchServers({
             </ToggleButton>
           </ToggleButtonGroup>
         </Grid>
-        {/* Records of Eminence */}
-        <Grid
-          item
-          xs={4}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Typography id="roe-button-group" variant="caption">
-            Records of Eminence
-          </Typography>
-          <ToggleButtonGroup
-            value={searchState.recordsOfEminence}
-            onChange={(_event, value) => {
-              handleChange('recordsOfEminence', value);
-            }}
-            size="small"
-            aria-labelledby="records-of-eminence-button-group"
-            exclusive
-            sx={{
-              display: 'flex',
-              width: '100%',
-            }}
-          >
-            <ToggleButton
-              value="disabled"
-              aria-label="records-of-eminence-disabled"
-              className="py-0"
-              sx={{ width: '50%' }}
-            >
-              Disabled
-            </ToggleButton>
-            <ToggleButton
-              value="enabled"
-              aria-label="records-of-eminence-enabled"
-              className="py-0"
-              sx={{ width: '50%' }}
-            >
-              Enabled
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
         {/* Fields of Valor */}
         <Grid
           item
-          xs={4}
+          xs={6}
           display="flex"
           flexDirection="column"
           alignItems="center"
@@ -584,7 +542,7 @@ export default function SearchServers({
         {/* Grounds of Valor */}
         <Grid
           item
-          xs={4}
+          xs={6}
           display="flex"
           flexDirection="column"
           alignItems="center"
@@ -623,7 +581,65 @@ export default function SearchServers({
             </ToggleButton>
           </ToggleButtonGroup>
         </Grid>
+        {/* Records of Eminence */}
+        <Grid
+          item
+          xs={6}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+        >
+          <Typography id="roe-button-group" variant="caption">
+            Records of Eminence
+          </Typography>
+          <ToggleButtonGroup
+            value={searchState.recordsOfEminence}
+            onChange={(_event, value) => {
+              handleChange('recordsOfEminence', value);
+            }}
+            size="small"
+            aria-labelledby="records-of-eminence-button-group"
+            exclusive
+            sx={{
+              display: 'flex',
+              width: '100%',
+            }}
+          >
+            <ToggleButton
+              value="disabled"
+              aria-label="records-of-eminence-disabled"
+              className="py-0"
+              sx={{ width: '50%' }}
+            >
+              Disabled
+            </ToggleButton>
+            <ToggleButton
+              value="enabled"
+              aria-label="records-of-eminence-enabled"
+              className="py-0"
+              sx={{ width: '50%' }}
+            >
+              Enabled
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Grid>
+        <Grid
+          item
+          xs={6}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+        >
           <Box className="flex min-w-full justify-end pt-2">
+            <Tooltip title="Sort" arrow disableInteractive>
+              <IconButton
+              // onClick={() => {
+              //   setSearchState(SearchStateDefaults);
+              // }}
+              >
+                <Sort />
+              </IconButton>
+            </Tooltip>
             <Tooltip title="Reset filters." arrow disableInteractive>
               <IconButton
                 onClick={() => {
@@ -635,6 +651,7 @@ export default function SearchServers({
             </Tooltip>
           </Box>
         </Grid>
+      </Grid>
     </Container>
   );
 }

client/src/components/Server/ExpansionsBar.tsx

@@ -1,7 +1,8 @@
-import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { AddCircleOutline } from '@mui/icons-material';
+import { Box, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import { ServerData } from '../../data/ServerData';
 
-const expansions = [
+const expansionButtons = [
   <ToggleButton
     key="rotz"
     value="rotz"
@@ -52,21 +53,54 @@ const expansions = [
 type ExpansionBarProps = { server: ServerData };
 
 export default function ExpansionBar({ server }: ExpansionBarProps) {
+  const { expansions } = server;
+
+  const addons = ['acp', 'amk', 'asa', 'abyssea', 'voidwatch', 'rov', 'tvr'];
+
+  let enabledAddons = addons.filter((prop) => expansions[prop]);
+
+  enabledAddons = enabledAddons.map((prop) => {
+    if (prop === 'abyssea' || prop === 'voidwatch') {
+      return prop.charAt(0).toUpperCase() + prop.slice(1);
+    }
+    return prop.toUpperCase();
+  });
+
   return (
+    <Box className="flex items-center">
       <ToggleButtonGroup
         size="small"
         value={
-        server.expansions && [
-          server.expansions.rotz && 'rotz',
-          server.expansions.cop && 'cop',
-          server.expansions.toau && 'toau',
-          server.expansions.wotg && 'wotg',
-          server.expansions.soa && 'soa',
+          expansions && [
+            expansions.rotz && 'rotz',
+            expansions.cop && 'cop',
+            expansions.toau && 'toau',
+            expansions.wotg && 'wotg',
+            expansions.soa && 'soa',
           ]
         }
-      sx={{ '& button': { lineHeight: 1.0 } }}
+        sx={{ '& button': { maxHeight: '1rem' } }}
       >
-      {expansions}
+        {expansionButtons}
       </ToggleButtonGroup>
+      {enabledAddons.length !== 0 && (
+        <Tooltip
+          title={
+            <div style={{ whiteSpace: 'pre-line' }}>
+              {enabledAddons.join('\n')}
+            </div>
+          }
+          placement="right"
+          disableInteractive
+          arrow
+        >
+          <AddCircleOutline
+            style={{
+              maxHeight: '1rem',
+            }}
+          />
+        </Tooltip>
+      )}
+    </Box>
   );
 }

client/src/components/Server/ServerCard.tsx

@@ -186,7 +186,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
               </Tooltip>
             </Box>
           </Box>
-          <CardContent className="grow py-1">
+          <Box className="grow py-1 pl-4">
             <Box className="flex content-center">
               <Typography
                 variant="h5"
@@ -260,7 +260,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
               )}
             </Box>
             <ExpansionBar server={server} />
-          </CardContent>
+          </Box>
           <Box className="flex items-center justify-center">
             <Typography
               variant="h5"
@@ -281,21 +281,36 @@ export default function ServerCard({ server, children }: ServerCardProps) {
         >
           {server.settings_summary['MAIN.SERVER_MESSAGE'] && (
             <>
+              <Divider>
+                <Typography
+                  variant="caption"
+                  color={(theme) => alpha(theme.palette.divider, 0.6)}
+                >
+                  Server Message
+                </Typography>
+              </Divider>
               <Box className="flex justify-center">
                 <Typography variant="body2">
                   {server.settings_summary['MAIN.SERVER_MESSAGE']}
                 </Typography>
               </Box>
-              <Divider sx={{ marginY: 1 }} />
             </>
           )}
+          <Divider>
+            <Typography
+              variant="caption"
+              color={(theme) => alpha(theme.palette.divider, 0.6)}
+            >
+              Settings{!isSettingsDataGridChild && ' Summary'}
+            </Typography>
+          </Divider>
           {children}
         </AccordionDetails>
       </Accordion>
       <Divider />
-      <CardContent className="flex flex-wrap justify-between py-0">
+      <CardContent className="flex flex-wrap justify-between py-0 pr-0">
         <Box className="flex items-center whitespace-nowrap">
-          <Typography variant="caption">
+          <Typography variant="caption" sx={{ lineHeight: 1 }}>
             {server.active_sessions} active sessions
           </Typography>
           {server.login_limit !== 1 && (
@@ -307,9 +322,10 @@ export default function ServerCard({ server, children }: ServerCardProps) {
               <img
                 src={CopyImageIcon}
                 alt=""
+                className="my-1"
                 style={{
-                  maxHeight: '1em',
-                  marginLeft: '0.5em',
+                  maxHeight: '1rem',
+                  marginLeft: '0.5rem',
                 }}
                 onContextMenu={(event) => event.preventDefault()}
               />
@@ -318,6 +334,9 @@ export default function ServerCard({ server, children }: ServerCardProps) {
         </Box>
         <Box className="flex items-center whitespace-nowrap">
           {/* <ServerDetailsModal id={server.id} /> */}
+          <Typography variant="caption" sx={{ lineHeight: 1 }}>
+            Updated: {new Date(server.updated).toLocaleString()}
+          </Typography>
           <Tooltip
             title={
               isSettingsDataGridChild ? 'Scroll to top.' : 'View full settings.'
@@ -333,15 +352,20 @@ export default function ServerCard({ server, children }: ServerCardProps) {
               disableRipple
             >
               {isSettingsDataGridChild ? (
-                <ArrowCircleUp className="p-1" />
+                <ArrowCircleUp
+                  style={{
+                    maxHeight: '1rem',
+                  }}
+                />
               ) : (
-                <Info className="p-1" />
+                <Info
+                  style={{
+                    maxHeight: '1rem',
+                  }}
+                />
               )}
             </IconButton>
           </Tooltip>
-          <Typography variant="caption">
-            Updated: {new Date(server.updated).toLocaleString()}
-          </Typography>
         </Box>
       </CardContent>
     </Card>