Feat: Build out server shell

Frontend/src/components/shell/TopBar/TopBar.module.scss

@@ -1,8 +1,8 @@
 .topBar {
-  --topbar-control-size: var(--control-size-md);
+  --topbar-control-size: 2.5rem;
   min-height: 4rem;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4) var(--space-3);
@@ -12,6 +12,7 @@
 .identity {
   min-width: 0;
   display: grid;
+  justify-items: start;
   gap: 0;
 }
 
@@ -22,55 +23,50 @@
   letter-spacing: 0.08em;
 }
 
-.title {
-  @include text-title;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-
-  strong {
-    font: inherit;
-    font-weight: var(--font-weight-title);
-  }
-}
-
-.context {
-  color: var(--color-text-muted);
-}
-
+.controls,
 .actions {
   display: flex;
   align-items: center;
+}
+
+.controls {
   gap: var(--space-1);
 }
 
-.actionButton,
-.themeButton {
-  height: var(--topbar-control-size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  @include interactive-frame();
+.actions {
+  gap: var(--space-1);
 }
 
 .actionButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: var(--topbar-control-size);
+  height: var(--topbar-control-size);
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  flex-shrink: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--color-text-muted);
+  transition:
+    background-color 220ms var(--easing-standard),
+    color 220ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
 }
 
-.themeButton {
-  width: auto;
-  padding-inline: var(--space-2);
-  gap: var(--space-1);
+.actionButton:hover {
+  background: color-mix(in srgb, var(--color-text) 8%, transparent);
   color: var(--color-text);
 }
 
-.actionButton,
-.themeButton {
-  @include interactive-frame-hover();
-}
-
-.themeLabel {
-  @include text-label;
+.actionButton:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
+  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
+  color: var(--color-text);
 }
 
 @include respond-down(mobile) {
@@ -82,4 +78,8 @@
   .actions {
     display: none;
   }
+
+  .controls {
+    gap: 0;
+  }
 }