chore: Add docs button and improve consistency of the footer

crates/web/frontend/src/components/docs-button/docs-button.tsx

@@ -0,0 +1,28 @@
+import { Book, BookOpen } from "lucide-react";
+import ActionButton from "../action-button/action-button";
+import { type MouseEvent, useCallback } from "react";
+
+interface Props {
+	className?: string;
+}
+
+export const DocsButton = ({ className }: Props) => {
+	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+		window.open("/docs", "_blank");
+		e.preventDefault();
+	}, []);
+
+	return (
+		<ActionButton
+			description="Check the GQ documentation"
+			className={className}
+			variant="subtle"
+			onClick={handleClick}
+		>
+			<a href="/docs" rel="noreferrer" target="_blank" className="flex items-center select-none">
+				<BookOpen className="w-3.5 h-3.5 mr-2" />
+				<span className="text-xxs font-normal mt-[2px]">Docs</span>
+			</a>
+		</ActionButton>
+	);
+};

crates/web/frontend/src/components/footer/footer.tsx

@@ -3,6 +3,7 @@ import { LinkEditor } from "../link-editor/link-editor";
 import ShortcutPopup from "../shortcut-popup/shortcut-popup";
 import StarCount from "../star-count/star-count";
 import { WebAssemblyBadge } from "../web-assembly-badge/web-assembly-badge";
+import { DocsButton } from "../docs-button/docs-button";
 
 interface FooterProps {
 	linkEditors: boolean;
@@ -22,6 +23,7 @@ const Footer = ({ linkEditors, handleToggleLinked, className }: FooterProps) =>
 				/>
 			</div>
 			<div className="flex">
+				<DocsButton className="h-full px-4" />
 				<StarCount className="h-full px-4" />
 				<WebAssemblyBadge className="h-full px-4" />
 			</div>

crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx

@@ -2,7 +2,7 @@ import { useOnboarding } from "@/hooks/use-onboarding";
 import { cn, isMac } from "@/lib/utils";
 import type { Data } from "@/model/data";
 import type FileType from "@/model/file-type";
-import { Book, History, Settings, Share } from "lucide-react";
+import { Album, Book, BookMarked, History, Settings, Share } from "lucide-react";
 import { type MutableRefObject, useCallback, useEffect, useState } from "react";
 import ActionButton from "../action-button/action-button";
 import ExamplesTab from "../examples-tab/examples-tab";
@@ -115,7 +115,7 @@ export const LeftSidebar = ({
 						variant="subtle"
 						onClick={() => handleClick("examples")}
 					>
-						<Book
+						<BookMarked
 							className={cn(
 								"w-4 h-4 transition-opacity",
 								selectedTab !== "examples" && "opacity-80",

crates/web/frontend/src/components/star-count/star-count.tsx

@@ -10,15 +10,10 @@ interface Props {
 
 const StarCount = ({ className }: Props) => {
 	const [stars, setStars] = useState<string>();
-	const [clicked, setClicked] = useState<boolean>(false);
 	const [fetching, setFetching] = useState<boolean>(true);
 
 	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-		setClicked(true);
-		setTimeout(() => {
-			window.open("https://github.com/jorgehermo9/gq", "_blank");
-			setClicked(false);
-		}, 0);
+		window.open("https://github.com/jorgehermo9/gq", "_blank");
 		e.preventDefault();
 	}, []);
 
@@ -38,13 +33,13 @@ const StarCount = ({ className }: Props) => {
 			onClick={handleClick}
 		>
 			<a href="https://github.com/jorgehermo9/gq" className="flex items-center select-none">
-				<Github className="w-3.5 h-3.5 mr-1" />
+				<Github className="w-3.5 h-3.5 mr-2" />
 				{fetching ? (
 					<Loader />
 				) : (
-					<div className="animate-in fade-in duration-300 flex items-center">
-						<span className="text-[0.7rem] font-medium mr-1">{stars}</span>
-						<Star className="w-2 h-2 text-accent data-[visible=false]:opacity-0 data-[visible=true]:opacity-1 transition-opacity" />
+					<div className="animate-in fade-in duration-300 flex items-center mt-[2px]">
+						<span className="text-xxs font-normal mr-1">{stars}</span>
+						<Star className="w-2 h-2 mb-[1px] text-accent data-[visible=false]:opacity-0 data-[visible=true]:opacity-1 transition-opacity" />
 					</div>
 				)}
 			</a>

crates/web/frontend/src/components/web-assembly-badge/web-assembly-badge.tsx

@@ -4,9 +4,9 @@ import Image from "next/image";
 export const WebAssemblyBadge = ({ className }: React.HTMLProps<HTMLDivElement>) => {
 	return (
 		<div className={cn("flex items-center", className)}>
-			<span className="text-xxs font-mono font-normal">Powered by</span>
+			<span className="text-xxs font-normal">Powered by</span>
 			<Image
-				className="ml-2 inline mb-[2px]"
+				className="ml-2 inline"
 				src="/web-assembly-icon.svg"
 				alt="Web Assemboy logo"
 				width={12}