feat: add socials icons

web/src/lib/components/layout/TopBar.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import BrandIcon from "$lib/components/ui/BrandIcon.svelte";
 	import LangToggle from "$lib/components/ui/LangToggle.svelte";
 	import ThemeToggle from "$lib/components/ui/ThemeToggle.svelte";
+	import { t } from "$lib/i18n/t";
+	import { siGithub, siTelegram, siTwitch } from "simple-icons";
 	import TopNav from "./TopNav.svelte";
 
 	interface Props {
@@ -23,6 +26,33 @@
 	</a>
 	<TopNav />
 	<div class="top-actions">
+		<a
+			class="social"
+			href="https://github.com/Ku6epXBOCTuK/easy-png-tools"
+			target="_blank"
+			rel="noopener noreferrer"
+			aria-label={t("ui.github")}
+		>
+			<BrandIcon path={siGithub.path} size={16} />
+		</a>
+		<a
+			class="social"
+			href="https://t.me/Ku6epXBOCTuK_feed"
+			target="_blank"
+			rel="noopener noreferrer"
+			aria-label={t("ui.telegram")}
+		>
+			<BrandIcon path={siTelegram.path} size={16} />
+		</a>
+		<a
+			class="social"
+			href="https://www.twitch.tv/ku6epxboctuk"
+			target="_blank"
+			rel="noopener noreferrer"
+			aria-label={t("ui.twitch")}
+		>
+			<BrandIcon path={siTwitch.path} size={16} />
+		</a>
 		<ThemeToggle {theme} {ontoggle} />
 		<LangToggle />
 	</div>
@@ -64,4 +94,12 @@
 		align-items: center;
 		gap: var(--space-xl);
 	}
+	.social {
+		display: inline-flex;
+		align-items: center;
+		color: var(--color-text-muted);
+	}
+	.social:hover {
+		color: var(--color-text);
+	}
 </style>

web/src/lib/components/ui/BrandIcon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		path: string;
+		size?: number;
+	}
+	let { path, size = 16 }: Props = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	aria-hidden="true"
+>
+	<path d={path} />
+</svg>

web/src/lib/i18n/en.ts

@@ -170,6 +170,9 @@ export const en: Dict = {
 		language: "Language",
 		addFav: "Add to favorites",
 		removeFav: "Remove from favorites",
+		github: "GitHub",
+		telegram: "Telegram",
+		twitch: "Twitch",
 	},
 	errors: {
 		noImageRun: "This tool does not process images",

web/src/lib/i18n/ru.ts

@@ -171,6 +171,9 @@ export const ru: Dict = {
 		language: "Язык",
 		addFav: "В избранное",
 		removeFav: "Убрать из избранного",
+		github: "GitHub",
+		telegram: "Telegram",
+		twitch: "Twitch",
 	},
 	errors: {
 		noImageRun: "Этот инструмент не обрабатывает изображения",