refactor(frontend): Root layout route (#5275)

frontend/__tests__/routes/_oh.test.tsx

@@ -3,7 +3,7 @@ import { createRemixStub } from "@remix-run/testing";
 import { screen, waitFor, within } from "@testing-library/react";
 import { renderWithProviders } from "test-utils";
 import userEvent from "@testing-library/user-event";
-import MainApp from "#/routes/_oh";
+import MainApp from "#/routes/_oh/route";
 import * as CaptureConsent from "#/utils/handle-capture-consent";
 import i18n from "#/i18n";
 

frontend/src/components/modals/account-settings-modal.tsx → frontend/src/components/modals/account-settings-form.tsx

@@ -14,19 +14,19 @@ import { useAuth } from "#/context/auth-context";
 import { useUserPrefs } from "#/context/user-prefs-context";
 import { handleCaptureConsent } from "#/utils/handle-capture-consent";
 
-interface AccountSettingsModalProps {
+interface AccountSettingsFormProps {
   onClose: () => void;
   selectedLanguage: string;
   gitHubError: boolean;
   analyticsConsent: string | null;
 }
 
-function AccountSettingsModal({
+export function AccountSettingsForm({
   onClose,
   selectedLanguage,
   gitHubError,
   analyticsConsent,
-}: AccountSettingsModalProps) {
+}: AccountSettingsFormProps) {
   const { gitHubToken, setGitHubToken, logout } = useAuth();
   const { saveSettings } = useUserPrefs();
   const { t } = useTranslation();
@@ -136,5 +136,3 @@ function AccountSettingsModal({
     </ModalBody>
   );
 }
-
-export default AccountSettingsModal;

frontend/src/routes/_oh/buttons/all-hands-logo-button.tsx

@@ -0,0 +1,13 @@
+import AllHandsLogo from "#/assets/branding/all-hands-logo.svg?react";
+
+interface AllHandsLogoButtonProps {
+  onClick: () => void;
+}
+
+export function AllHandsLogoButton({ onClick }: AllHandsLogoButtonProps) {
+  return (
+    <button type="button" aria-label="All Hands Logo" onClick={onClick}>
+      <AllHandsLogo width={34} height={23} />
+    </button>
+  );
+}

frontend/src/routes/_oh/buttons/docs-button.tsx

@@ -0,0 +1,15 @@
+import DocsIcon from "#/icons/docs.svg?react";
+
+export function DocsButton() {
+  return (
+    <a
+      href="https://docs.all-hands.dev"
+      aria-label="Documentation"
+      target="_blank"
+      rel="noreferrer noopener"
+      className="w-8 h-8 rounded-full hover:opacity-80 flex items-center justify-center"
+    >
+      <DocsIcon width={28} height={28} />
+    </a>
+  );
+}

frontend/src/routes/_oh/buttons/exit-project-button.tsx

@@ -0,0 +1,18 @@
+import NewProjectIcon from "#/icons/new-project.svg?react";
+
+interface ExitProjectButtonProps {
+  onClick: () => void;
+}
+
+export function ExitProjectButton({ onClick }: ExitProjectButtonProps) {
+  return (
+    <button
+      data-testid="new-project-button"
+      type="button"
+      aria-label="Start new project"
+      onClick={onClick}
+    >
+      <NewProjectIcon width={28} height={28} />
+    </button>
+  );
+}

frontend/src/routes/_oh/buttons/settings-button.tsx

@@ -0,0 +1,18 @@
+import CogTooth from "#/assets/cog-tooth";
+
+interface SettingsButtonProps {
+  onClick: () => void;
+}
+
+export function SettingsButton({ onClick }: SettingsButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label="Settings"
+      className="w-8 h-8 rounded-full hover:opacity-80 flex items-center justify-center"
+      onClick={onClick}
+    >
+      <CogTooth />
+    </button>
+  );
+}