feat: add socials icons

web/package.json

@@ -54,6 +54,7 @@
 		"@fontsource/ibm-plex-mono": "^5.3.0",
 		"@fontsource/ibm-plex-sans": "^5.3.0",
 		"@lucide/svelte": "^1.33.0",
-		"fflate": "^0.8.3"
+		"fflate": "^0.8.3",
+		"simple-icons": "^16.34.0"
 	}
 }

web/pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       fflate:
         specifier: ^0.8.3
         version: 0.8.3
+      simple-icons:
+        specifier: ^16.34.0
+        version: 16.34.0
     devDependencies:
       '@csstools/postcss-global-data':
         specifier: ^4.0.0
@@ -1387,6 +1390,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-icons@16.34.0:
+    resolution: {integrity: sha512-UTxKn0PVspk84B2hHF3Dqiqht1yDjJmDc/t4cO7PyCQxCMk6OjEu95pnpGjhLaGeQ4qBrGASbefTIe/+czrX7g==}
+    engines: {node: '>=0.12.18'}
+
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
@@ -2805,6 +2812,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-icons@16.34.0: {}
+
   sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29

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: "Этот инструмент не обрабатывает изображения",