format(frontend): change line width to 100

Foxnouns.Backend/Middleware/AuthorizationMiddleware.cs

@@ -18,7 +18,8 @@ public class AuthorizationMiddleware : IMiddleware
 
         var token = ctx.GetToken();
         if (token == null)
-            throw new ApiError.Unauthorized("This endpoint requires an authenticated user.", ErrorCode.AuthenticationRequired);
+            throw new ApiError.Unauthorized("This endpoint requires an authenticated user.",
+                ErrorCode.AuthenticationRequired);
         if (attribute.Scopes.Length > 0 && attribute.Scopes.Except(token.Scopes.ExpandScopes()).Any())
             throw new ApiError.Forbidden("This endpoint requires ungranted scopes.",
                 attribute.Scopes.Except(token.Scopes.ExpandScopes()), ErrorCode.MissingScopes);

Foxnouns.Frontend/.prettierrc

@@ -1,3 +1,4 @@
 {
-	"useTabs": true
+	"useTabs": true,
+	"printWidth": 100
 }

Foxnouns.Frontend/app/components/nav/Logo.tsx

@@ -13,10 +13,7 @@ export default function Logo() {
 				</clipPath>
 			</defs>
 			<g transform="translate(-49.754 -142.39)">
-				<g
-					transform="matrix(.33073 0 0 -.33073 50.093 154.62)"
-					clipPath="url(#clipPath16)"
-				>
+				<g transform="matrix(.33073 0 0 -.33073 50.093 154.62)" clipPath="url(#clipPath16)">
 					<path
 						d="m35.347 20.107-8.899 3.294-3.323 10.891c-0.128 0.42-0.516 0.708-0.956 0.708-0.439 0-0.828-0.288-0.956-0.708l-3.322-10.891-8.9-3.294c-0.393-0.146-0.653-0.52-0.653-0.938s0.26-0.793 0.653-0.937l8.896-3.293 3.323-11.223c0.126-0.425 0.516-0.716 0.959-0.716s0.833 0.291 0.959 0.716l3.324 11.223 8.896 3.293c0.392 0.144 0.652 0.519 0.652 0.937s-0.26 0.792-0.653 0.938"
 						fill="#aa8ed6"

Foxnouns.Frontend/app/components/nav/Navbar.tsx

@@ -6,11 +6,7 @@ import Logo from "./Logo";
 import Nav from "react-bootstrap/Nav";
 import Navbar from "react-bootstrap/Navbar";
 import NavDropdown from "react-bootstrap/NavDropdown";
-import {
-	BrightnessHigh,
-	BrightnessHighFill,
-	MoonFill,
-} from "react-bootstrap-icons";
+import { BrightnessHigh, BrightnessHighFill, MoonFill } from "react-bootstrap-icons";
 
 export default function MainNavbar({
 	user,
@@ -48,40 +44,39 @@ export default function MainNavbar({
 				? MoonFill
 				: BrightnessHighFill;
 
+	const theme = settings.dark_mode ? "dark" : "light";
+
 	return (
-		<Navbar expand="lg" className="mb-4 mx-2">
+		<Navbar expand="lg" className={`mb-4 mx-2 bg-${theme}`} color={theme} variant={theme}>
 			<Navbar.Brand to="/" as={Link}>
 				<Logo />
 			</Navbar.Brand>
 			<Navbar.Toggle aria-controls="main-navbar" />
 			<Navbar.Collapse id="main-navbar">
-				<Nav className="ms-auto">{userMenu}</Nav>
+				<Nav className="ms-auto">
+					{userMenu}
+					<fetcher.Form method="POST" action="/dark-mode">
+						<NavDropdown
+							title={
+								<>
+									<ThemeIcon /> Theme
+								</>
+							}
+							align="end"
+						>
+							<NavDropdown.Item as="button" name="theme" value="auto" type="submit">
+								Automatic
+							</NavDropdown.Item>
+							<NavDropdown.Item as="button" name="theme" value="dark" type="submit">
+								Dark mode
+							</NavDropdown.Item>
+							<NavDropdown.Item as="button" name="theme" value="light" type="submit">
+								Light mode
+							</NavDropdown.Item>
+						</NavDropdown>
+					</fetcher.Form>
+				</Nav>
 			</Navbar.Collapse>
-			<fetcher.Form method="POST" action="/dark-mode">
-				<NavDropdown
-					title={
-						<>
-							<ThemeIcon /> Theme
-						</>
-					}
-					align="end"
-				>
-					<NavDropdown.Item as="button" name="theme" value="auto" type="submit">
-						Automatic
-					</NavDropdown.Item>
-					<NavDropdown.Item as="button" name="theme" value="dark" type="submit">
-						Dark mode
-					</NavDropdown.Item>
-					<NavDropdown.Item
-						as="button"
-						name="theme"
-						value="light"
-						type="submit"
-					>
-						Light mode
-					</NavDropdown.Item>
-				</NavDropdown>
-			</fetcher.Form>
 		</Navbar>
 	);
 }

Foxnouns.Frontend/app/entry.server.tsx

@@ -25,18 +25,8 @@ export default function handleRequest(
 	loadContext: AppLoadContext,
 ) {
 	return isbot(request.headers.get("user-agent") || "")
-		? handleBotRequest(
-				request,
-				responseStatusCode,
-				responseHeaders,
-				remixContext,
-			)
-		: handleBrowserRequest(
-				request,
-				responseStatusCode,
-				responseHeaders,
-				remixContext,
-			);
+		? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
+		: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
 }
 
 function handleBotRequest(
@@ -48,11 +38,7 @@ function handleBotRequest(
 	return new Promise((resolve, reject) => {
 		let shellRendered = false;
 		const { pipe, abort } = renderToPipeableStream(
-			<RemixServer
-				context={remixContext}
-				url={request.url}
-				abortDelay={ABORT_DELAY}
-			/>,
+			<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
 			{
 				onAllReady() {
 					shellRendered = true;
@@ -98,11 +84,7 @@ function handleBrowserRequest(
 	return new Promise((resolve, reject) => {
 		let shellRendered = false;
 		const { pipe, abort } = renderToPipeableStream(
-			<RemixServer
-				context={remixContext}
-				url={request.url}
-				abortDelay={ABORT_DELAY}
-			/>,
+			<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
 			{
 				onShellReady() {
 					shellRendered = true;

Foxnouns.Frontend/app/lib/request.server.ts

@@ -35,15 +35,11 @@ export default async function serverRequest<T>(
 		} as ApiError;
 	}
 
-	if (resp.status < 200 || resp.status >= 400)
-		throw (await resp.json()) as ApiError;
+	if (resp.status < 200 || resp.status >= 400) throw (await resp.json()) as ApiError;
 	return (await resp.json()) as T;
 }
 
-export function getCookie(
-	req: Request,
-	cookieName: string,
-): string | undefined {
+export function getCookie(req: Request, cookieName: string): string | undefined {
 	const header = req.headers.get("Cookie");
 	if (!header) return undefined;
 
@@ -53,11 +49,7 @@ export function getCookie(
 
 const YEAR = 365 * 86400;
 
-export const writeCookie = (
-	cookieName: string,
-	value: string,
-	maxAge: number | undefined = YEAR,
-) =>
+export const writeCookie = (cookieName: string, value: string, maxAge: number | undefined = YEAR) =>
 	serializeCookie(cookieName, value, {
 		maxAge,
 		path: "/",

Foxnouns.Frontend/app/root.tsx

@@ -32,11 +32,7 @@ export const loader: LoaderFunction = async ({ request }) => {
 			const user = await serverRequest<User>("GET", "/users/@me", { token });
 			meUser = user;
 
-			settings = await serverRequest<UserSettings>(
-				"GET",
-				"/users/@me/settings",
-				{ token },
-			);
+			settings = await serverRequest<UserSettings>("GET", "/users/@me/settings", { token });
 		} catch (e) {
 			// If we get an unauthorized error, clear the token, as it's not valid anymore.
 			if ((e as ApiError).code === ErrorCode.AuthenticationRequired) {

Foxnouns.Frontend/server.js

@@ -31,10 +31,7 @@ if (viteDevServer) {
 	app.use(viteDevServer.middlewares);
 } else {
 	// Vite fingerprints its assets so we can cache forever.
-	app.use(
-		"/assets",
-		express.static("build/client/assets", { immutable: true, maxAge: "1y" }),
-	);
+	app.use("/assets", express.static("build/client/assets", { immutable: true, maxAge: "1y" }));
 }
 
 // Everything else (like favicon.ico) is cached for an hour. You may want to be
@@ -47,6 +44,4 @@ app.use(morgan("tiny"));
 app.all("*", remixHandler);
 
 const port = env.PORT || 3000;
-app.listen(port, () =>
-	console.log(`Express server listening at http://localhost:${port}`),
-);
+app.listen(port, () => console.log(`Express server listening at http://localhost:${port}`));