feat: a few ui changes (#772)

### TL;DR

Added torch glow effect to the authentication screen and enhanced the TorchGlow component to support an "always show" mode.

### What changed?

- Added an `alwaysShow` prop to the `TorchGlow` component with a default value of `false`
- Modified the visibility logic in `TorchGlow` to respect the new `alwaysShow` prop
- Integrated the `TorchGlow` component into the `AuthScreen` with `alwaysShow={true}`
- Added a ref to the cave background in `AuthScreen` to properly position the glow effect
- Fixed the width of the auth form container to be exactly 320px instead of max-width

### How to test?

1. Open the authentication screen
2. Verify that the torch glow effect appears when moving the cursor over the cave background
3. Confirm the effect works regardless of dark/light mode or cursor glow settings
4. Check that the auth form has a fixed width of 320px

### Why make this change?

The torch glow effect enhances the visual appeal of the cave-themed authentication screen, creating a more immersive and engaging user experience. The `alwaysShow` option allows the effect to be used in specific contexts regardless of user preferences, while still respecting those preferences elsewhere in the application.

Author: k11kirky

apps/twig/src/renderer/components/TorchGlow.tsx

@@ -4,9 +4,13 @@ import { useEffect, useState } from "react";
 
 interface TorchGlowProps {
   containerRef: React.RefObject<HTMLElement | null>;
+  alwaysShow?: boolean;
 }
 
-export function TorchGlow({ containerRef }: TorchGlowProps) {
+export function TorchGlow({
+  containerRef,
+  alwaysShow = false,
+}: TorchGlowProps) {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
   const cursorGlow = useSettingsStore((state) => state.cursorGlow);
   const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(
@@ -43,8 +47,9 @@ export function TorchGlow({ containerRef }: TorchGlowProps) {
     };
   }, [containerRef]);
 
-  // Only show in dark mode when hovering and cursor glow is enabled
-  if (!isDarkMode || !cursorGlow || !isHovering || !mousePos) return null;
+  // Only show in dark mode when hovering and cursor glow is enabled (unless alwaysShow)
+  const shouldShow = alwaysShow || (isDarkMode && cursorGlow);
+  if (!shouldShow || !isHovering || !mousePos) return null;
 
   return (
     <>

apps/twig/src/renderer/features/auth/components/AuthScreen.tsx

@@ -1,12 +1,13 @@
 import { DraggableTitleBar } from "@components/DraggableTitleBar";
+import { TorchGlow } from "@components/TorchGlow";
 import { useAuthStore } from "@features/auth/stores/authStore";
 import { Box, Button, Flex, Text } from "@radix-ui/themes";
 import caveHero from "@renderer/assets/images/cave-hero.jpg";
 import twigLogo from "@renderer/assets/images/twig-logo.svg";
 import { trpcVanilla } from "@renderer/trpc/client";
 import type { CloudRegion } from "@shared/types/oauth";
 import { useMutation } from "@tanstack/react-query";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { LoginForm } from "./LoginForm";
 import { SignupForm } from "./SignupForm";
 
@@ -41,6 +42,7 @@ export const getErrorMessage = (error: unknown) => {
 type AuthMode = "login" | "signup";
 
 export function AuthScreen() {
+  const caveBackgroundRef = useRef<HTMLDivElement>(null);
   const [region, setRegion] = useState<CloudRegion>("us");
   const [authMode, setAuthMode] = useState<AuthMode>("login");
   const { loginWithOAuth, signupWithOAuth } = useAuthStore();
@@ -89,8 +91,13 @@ export function AuthScreen() {
   const errorMessage = getErrorMessage(error);
 
   return (
-    <Flex height="100vh" style={{ position: "relative" }}>
+    <Flex
+      ref={caveBackgroundRef}
+      height="100vh"
+      style={{ position: "relative" }}
+    >
       <DraggableTitleBar />
+      <TorchGlow containerRef={caveBackgroundRef} alwaysShow />
       {/* Full-screen cave painting background */}
       <div
         style={{
@@ -112,7 +119,7 @@ export function AuthScreen() {
           zIndex: 1,
         }}
       >
-        <Flex direction="column" gap="6" style={{ maxWidth: "320px" }}>
+        <Flex direction="column" gap="6" style={{ width: "320px" }}>
           <Flex direction="column" gap="4">
             <img
               src={twigLogo}