Refactor search icon in ApiKeysSection to use FontAwesome

- Replaced the existing search icon with FontAwesome's `faSearch` for improved consistency and visual appeal.
- Updated the `Settings.tsx` file to import and utilize the FontAwesomeIcon component, enhancing the UI component's design.

Author: jamiepine

interface/src/components/Sidebar.tsx

@@ -55,13 +55,13 @@ export function Sidebar({ liveStates, collapsed, onToggle }: SidebarProps) {
 			{/* Logo + collapse toggle */}
 			<div className="flex h-12 items-center border-b border-sidebar-line px-3">
 			{collapsed ? (
-				<Button onClick={onToggle} variant="ghost" size="icon" className="h-full w-full">
-					<img src={`${BASE_PATH}/ball.png`} alt="" className="h-6 w-6" draggable={false} />
-				</Button>
+				<button onClick={onToggle} className="flex h-full w-full items-center justify-center">
+					<img src={`${BASE_PATH}/ball.png`} alt="" className="h-6 w-6 transition-transform duration-150 ease-out hover:scale-110 active:scale-95" draggable={false} />
+				</button>
 			) : (
 				<div className="flex flex-1 items-center justify-between">
 					<Link to="/" className="flex items-center gap-2">
-						<img src={`${BASE_PATH}/ball.png`} alt="" className="h-6 w-6 flex-shrink-0" draggable={false} />
+						<img src={`${BASE_PATH}/ball.png`} alt="" className="h-6 w-6 flex-shrink-0 transition-transform duration-150 ease-out hover:scale-110 active:scale-95" draggable={false} />
 						<span className="whitespace-nowrap font-plex text-sm font-semibold text-sidebar-ink">
 							Spacebot
 						</span>

interface/src/lib/providerIcons.tsx

@@ -38,8 +38,8 @@ function OpenCodeZenIcon({ size = 24, className }: IconProps) {
 			focusable="false"
 		>
 			<g clipPath={`url(#${clipPathId})`}>
-				<path d="M24 32H8V16H24V32Z" fill="#4B4646" />
-				<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC" />
+				<path d="M24 32H8V16H24V32Z" fill="currentColor" opacity="0.4" />
+				<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="currentColor" />
 			</g>
 			<defs>
 				<clipPath id={clipPathId}>

interface/src/routes/Settings.tsx

@@ -1,10 +1,12 @@
 import {useState, useEffect, useRef} from "react";
 import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import {api, type GlobalSettingsResponse} from "@/api/client";
-import {Button, Input, SettingSidebarButton, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem} from "@/ui";
+import {Button, Input, SettingSidebarButton, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Toggle} from "@/ui";
 import {useSearch, useNavigate} from "@tanstack/react-router";
 import {ChannelSettingCard, DisabledChannelCard} from "@/components/ChannelSettingCard";
 import {ProviderIcon} from "@/lib/providerIcons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSearch} from "@fortawesome/free-solid-svg-icons";
 
 import {parse as parseToml} from "smol-toml";
 
@@ -502,9 +504,7 @@ function ApiKeysSection({settings, isLoading}: GlobalSettingsSectionProps) {
 				<div className="flex flex-col gap-3">
 					<div className="rounded-lg border border-app-line bg-app-box p-4">
 						<div className="flex items-center gap-3">
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-app-darkBox text-ink-faint">
-								<span className="text-lg">🔍</span>
-							</div>
+							<FontAwesomeIcon icon={faSearch} className="text-ink-faint" />
 							<div className="flex-1">
 								<div className="flex items-center gap-2">
 									<span className="text-sm font-medium text-ink">Brave Search</span>
@@ -655,20 +655,19 @@ function ServerSection({settings, isLoading}: GlobalSettingsSectionProps) {
 			) : (
 				<div className="flex flex-col gap-4">
 					<div className="rounded-lg border border-app-line bg-app-box p-4">
-						<label className="flex items-center gap-3">
-							<input
-								type="checkbox"
-								checked={apiEnabled}
-								onChange={(e) => setApiEnabled(e.target.checked)}
-								className="h-4 w-4"
-							/>
+						<div className="flex items-center justify-between">
 							<div>
 								<span className="text-sm font-medium text-ink">Enable API Server</span>
 								<p className="mt-0.5 text-sm text-ink-dull">
 									Disable to prevent the HTTP API from starting
 								</p>
 							</div>
-						</label>
+							<Toggle
+								size="sm"
+								checked={apiEnabled}
+								onCheckedChange={setApiEnabled}
+							/>
+						</div>
 					</div>
 
 					<div className="rounded-lg border border-app-line bg-app-box p-4">