[Refactor] Sidebar cleanup (and a bit more that's related)

e2e/settings.spec.ts

@@ -33,7 +33,10 @@ electronTest('Settings', async (app, page) => {
   })
 
   await test.step('shows the Advanced settings', async () => {
-    await page.getByTestId('settings').click()
+    await page
+      .locator('.Sidebar')
+      .locator('.Sidebar__item', { hasText: 'Settings' })
+      .click()
     page.getByText('Global Settings')
     await page.getByText('Advanced').click()
   })

src/backend/main.ts

@@ -1668,7 +1668,7 @@ ipcMain.on('processShortcut', async (e, combination: string) => {
       break
     // hotkey to open the settings on frontend
     case 'ctrl+k':
-      sendFrontendMessage('openScreen', '/settings/app/default/general')
+      sendFrontendMessage('openScreen', '/settings/general')
       break
     // hotkey to open the downloads screen on frontend
     case 'ctrl+j':

src/frontend/App.tsx

@@ -118,7 +118,7 @@ const router = createHashRouter([
         lazy: makeLazyFunc(import('./screens/WebView'))
       },
       {
-        path: 'settings/:runner/:appName/:type',
+        path: 'settings/:type',
         lazy: makeLazyFunc(import('./screens/Settings'))
       },
       {

src/frontend/components/UI/Sidebar/components/CurrentDownload/index.css

@@ -0,0 +1,52 @@
+.Sidebar {
+  .currentDownload {
+    font-size: var(--text-sm);
+    padding: var(--space-md) 0;
+    transition: 300ms;
+    margin-top: var(--space-sm);
+    align-self: end;
+
+    & > .gameTitle {
+      font-size: var(--text-md);
+      transition: 600ms;
+      font-weight: var(--bold);
+    }
+
+    &:hover > .gameTitle {
+      color: var(--accent-overlay);
+      transition: 600ms;
+    }
+
+    .downloadStatus {
+      color: var(--success);
+      font-family: var(--secondary-font-family);
+      font-style: italic;
+      font-weight: normal;
+      font-size: var(--text-sm);
+      line-height: var(--text-sm);
+    }
+
+    .MuiLinearProgress-bar1Determinate {
+      background-color: var(--success);
+    }
+
+    .statusIcon {
+      display: none;
+      margin-inline-end: 10px;
+      svg {
+        width: 27px;
+        height: auto;
+        color: var(--success);
+      }
+    }
+  }
+
+  &.collapsed {
+    .statusIcon {
+      display: block;
+    }
+    .full-size {
+      display: none;
+    }
+  }
+}

src/frontend/components/UI/Sidebar/components/CurrentDownload/index.tsx

@@ -8,7 +8,7 @@ import Box from '@mui/material/Box'
 import { getGameInfo } from 'frontend/helpers'
 import { hasProgress } from 'frontend/hooks/hasProgress'
 import { Runner } from 'common/types'
-import './index.scss'
+import './index.css'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
 import Badge from '@mui/material/Badge'
@@ -52,37 +52,35 @@ export default React.memo(function CurrentDownload({ appName, runner }: Props) {
   }
 
   return (
-    <>
-      <Link to={`/download-manager`} className="currentDownload">
-        <span className="statusIcon" title={`${getStatus()} - ${gameTitle}`}>
-          <Badge
-            badgeContent={`${Math.round(progress.percent ?? 0)}%`}
-            color="primary"
-          >
-            <FontAwesomeIcon icon={faDownload} />
-          </Badge>
-        </span>
+    <Link to={`/download-manager`} className="currentDownload">
+      <span className="statusIcon" title={`${getStatus()} - ${gameTitle}`}>
+        <Badge
+          badgeContent={`${Math.round(progress.percent ?? 0)}%`}
+          color="primary"
+        >
+          <FontAwesomeIcon icon={faDownload} />
+        </Badge>
+      </span>
 
-        <div className="full-size">
-          <span className="gameTitle">{gameTitle ?? 'GameName'}</span>
-          <br />
-          <span className="downloadStatus">{getStatus()}</span>
-          <br />
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Box sx={{ width: '100%', mr: 1 }}>
-              <LinearProgress
-                variant="determinate"
-                value={progress.percent || 0}
-              />
-            </Box>
-            <Box sx={{ minWidth: 35 }}>
-              <Typography variant="body2">{`${Math.round(
-                progress.percent || 0
-              )}%`}</Typography>
-            </Box>
+      <div className="full-size">
+        <span className="gameTitle">{gameTitle ?? 'GameName'}</span>
+        <br />
+        <span className="downloadStatus">{getStatus()}</span>
+        <br />
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box sx={{ width: '100%', mr: 1 }}>
+            <LinearProgress
+              variant="determinate"
+              value={progress.percent || 0}
+            />
           </Box>
-        </div>
-      </Link>
-    </>
+          <Box sx={{ minWidth: 35 }}>
+            <Typography variant="body2">{`${Math.round(
+              progress.percent || 0
+            )}%`}</Typography>
+          </Box>
+        </Box>
+      </div>
+    </Link>
   )
 })

src/frontend/components/UI/Sidebar/components/HeroicVersion/index.css

@@ -0,0 +1,47 @@
+.Sidebar {
+  .heroicVersion {
+    display: flex;
+    gap: 5px;
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition: 300ms;
+    color: var(--brand-text-01);
+
+    &:hover {
+      color: var(--accent);
+    }
+  }
+
+  .heroicNewReleases {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    font-size: var(--text-sm);
+
+    & > a {
+      color: var(--accent);
+      transition: 300ms;
+      -webkit-app-region: no-drag;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--accent-overlay);
+      }
+    }
+  }
+
+  &.collapsed {
+    .heroicVersion {
+      font-size: var(--text-xs);
+      text-align: center;
+    }
+
+    .heroicVersion__title {
+      display: none;
+    }
+
+    .heroicNewReleases {
+      display: none;
+    }
+  }
+}

src/frontend/components/UI/Sidebar/components/HeroicVersion/index.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
 import { ChangelogModal } from '../../../ChangelogModal'
+import './index.css'
 
 type Release = {
   html_url: string

src/frontend/components/UI/Sidebar/components/SidebarItem/index.css

@@ -0,0 +1,111 @@
+.Sidebar {
+  .Sidebar__item {
+    --sidebar-item-inactive-text-color: var(
+      --navbar-inactive,
+      var(--navbar-accent)
+    );
+    --sidebar-hover-text-color: var(--text-hover);
+    --sidebar-item-active-text-color: var(
+      --navbar-active,
+      var(--accent-overlay, var(--accent))
+    );
+    --sidebar-active-item-background: var(--navbar-active-background);
+
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    padding: var(--space-xs) var(--sidebar-horizontal-padding);
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: var(--text-md);
+    color: var(--sidebar-item-inactive-text-color);
+    transition: color 250ms;
+    text-align: start;
+    font-family: var(--primary-font-family);
+
+    .Sidebar__itemIcon {
+      width: 24px;
+      display: inline-flex;
+      justify-content: center;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sidebar-hover-text-color);
+      outline-offset: -2px;
+    }
+
+    &.active {
+      color: var(--sidebar-item-active-text-color);
+
+      .Sidebar__itemIcon {
+        color: currentColor;
+      }
+
+      &.SidebarLinks__subItem {
+        font-weight: var(--bold);
+      }
+    }
+    &.active:not(.SidebarLinks__subItem) {
+      background-color: var(--sidebar-active-item-background);
+    }
+
+    &.SidebarLinks__subItem {
+      &,
+      &:hover {
+        padding-block: var(--space-3xs);
+        padding-inline: var(--space-xl) var(--sidebar-horizontal-padding);
+        font-size: var(--text-sm);
+        line-height: 20px;
+        white-space: break-spaces;
+      }
+      &::before {
+        content: '• ';
+      }
+      & + .Sidebar__item:not(.SidebarLinks__subItem) {
+        margin-top: 4px;
+      }
+    }
+
+    &:hover {
+      background-color: var(--navbar-active-background);
+      transition: 0.1s;
+      padding-inline-start: 12px;
+    }
+
+    @media screen and (max-width: 730px) {
+      &,
+      &:hover {
+        padding: var(--space-3xs) var(--sidebar-horizontal-padding)
+          var(--space-3xs) var(--space-lg);
+      }
+    }
+  }
+
+  &.collapsed {
+    .Sidebar__item {
+      padding: var(--space-xs) 0;
+
+      & > span {
+        display: none;
+      }
+
+      &.SidebarLinks__subItem {
+        padding: var(--space-xs) var(--sidebar-horizontal-padding);
+        &::before {
+          display: none;
+        }
+      }
+
+      &.active svg,
+      & svg {
+        transform: scale(1.2);
+        padding: var(--space-2xs) 0;
+      }
+
+      .Sidebar__itemIcon {
+        margin: 0 auto;
+      }
+    }
+  }
+}