Add Social Buttons

[mirmirmirr]

This PR into main updates with the addition of social links for discord and github

[Copilot]

Pull request overview

Adds Discord and GitHub social links to the header controls, including a new mobile radial “more options” menu, and extends the shared Button component to support custom styling.

Changes:

• Add Discord/GitHub buttons to the desktop header and to the mobile “more options” radial menu.
• Extend Button with a style override prop and adjust tooltip hover behavior.
• Adjust the app’s outer container spacing (margin → padding).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/components/header/ButtonTray.tsx	Adds social buttons and replaces the mobile dropdown with a radial animated menu.
src/components/Button.tsx	Adds customStyles prop and changes tooltip trigger behavior to peer-hover.
src/App.tsx	Adjusts outer container spacing and includes a commented-out SocialTray placeholder.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

These social buttons change padding on hover (hover:p-1.5 vs base p-3), which will change the button’s rendered size and can cause layout shift/jitter in the desktop header as neighboring buttons move. Prefer a size-preserving hover effect (e.g., scale transform on the icon/button, or keep padding constant).

Suggested change

	customStyles="hover:bg-[#5865f2] hover:text-[#e0e3ff] hover:p-1.5 p-3 transition-all duration-300"
	>
	<BiLogoDiscordAlt className="group-hover:w-8 group-hover:h-8 w-5 h-5 transition-all duration-300" />
	</Button>
	<Button
	onClick={handleGithubClick}
	tooltip="View on GitHub"
	customStyles="hover:bg-[#8534F3] hover:text-[#e0e3ff] hover:p-1.5 p-3 transition-all duration-300"
	>
	<BiLogoGithub className="group-hover:w-8 group-hover:h-8 w-5 h-5 transition-all duration-300" />
	customStyles="hover:bg-[#5865f2] hover:text-[#e0e3ff] p-3 transition-all duration-300"
	>
	<BiLogoDiscordAlt className="w-5 h-5 transition-transform duration-300 group-hover:scale-125" />
	</Button>
	<Button
	onClick={handleGithubClick}
	tooltip="View on GitHub"
	customStyles="hover:bg-[#8534F3] hover:text-[#e0e3ff] p-3 transition-all duration-300"
	>
	<BiLogoGithub className="w-5 h-5 transition-transform duration-300 group-hover:scale-125" />

[Copilot]

There is a commented-out <SocialTray /> left in the header. Since this PR adds social links via ButtonTray, this commented code is now misleading—please remove it or wire up the component if it’s intended to ship.

Suggested change

{/* <SocialTray /> */}

[Copilot]

This PR changes the main layout container from margin (m-*) to padding (p-*). That’s a visual/layout change not described in the PR description (“addition of social links”). If it’s required for the social buttons, please document the reason in the PR description; otherwise consider reverting to keep the change scoped.