Add flags

package.json

@@ -26,6 +26,7 @@
     "@webscopeio/react-textarea-autocomplete": "^4.9.2",
     "buffer": "^6.0.3",
     "emoji-mart": "^5.5.2",
+    "flag-icons": "^6.11.0",
     "hls.js": "^1.4.6",
     "lodash": "^4.17.21",
     "lodash.uniqby": "^4.7.0",

src/hooks/lang.ts

@@ -1,7 +1,7 @@
 import { ExternalStore } from "@snort/shared";
 import { useSyncExternalStore } from "react";
 
-export const DefaultLocale = "en";
+export const DefaultLocale = "en-US";
 
 class LangStore extends ExternalStore<string> {
   setLang(lang: string) {

src/intl.tsx

@@ -11,7 +11,7 @@ async function importLang(code: string) {
   return Object.fromEntries(ent) as Record<string, string>;
 }
 
-export const AllLocales = ["en", "de", "es", "th", "nl", "ja", "fa", "sw", "sv"];
+export const AllLocales = [DefaultLocale, "de-DE", "es-ES", "th-TH", "nl-NL", "ja-JP", "fa-IR", "sw-KE", "sv-SE"];
 
 const getMessages = (locale: string) => {
   const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0];

src/pages/layout.css

@@ -167,3 +167,11 @@ button span.hide-on-mobile {
 .profile-menu {
   cursor: pointer;
 }
+
+.flag {
+  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
+  border-radius: 100%;
+  background-size: cover;
+}

src/pages/layout.tsx

@@ -1,4 +1,6 @@
+import "flag-icons/css/flag-icons.css";
 import "./layout.css";
+
 import { useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Outlet, useNavigate } from "react-router-dom";
@@ -29,8 +31,8 @@ export function LayoutPage() {
       <Menu
         menuClassName="ctx-menu"
         menuButton={
-          <div className="flex f-center g24">
+          <div className="flex f-center g12">
-            <div className="flag"></div>
+            <div className={`flag fi fi-${lang.split(/[-_]/i)[1]?.toLowerCase()}`}></div>
             <div className="uppercase pointer">
               <b>{lang.includes("-") ? lang.split("-")[0] : lang}</b>
             </div>

src/translations/en.json

@@ -128,4 +128,4 @@
   "x82IOl": "Mute",
   "yzKwBQ": "eg. nsec1xyz",
   "zVDHAu": "Zap Alert"
-}
+}

yarn.lock

@@ -5579,6 +5579,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flag-icons@npm:^6.11.0":
+  version: 6.11.0
+  resolution: "flag-icons@npm:6.11.0"
+  checksum: 859c4dfa104bbaa3bf49484764e1d9144d644c8acfff581591e925733d5b4731226be065b91ccac4b0e30a49fda6ba3c1468af4d5e35642dcefd03f468040efe
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^3.0.4":
   version: 3.1.0
   resolution: "flat-cache@npm:3.1.0"
@@ -9954,6 +9961,7 @@ __metadata:
     emoji-mart: ^5.5.2
     eslint: ^8.48.0
     eslint-webpack-plugin: ^4.0.1
+    flag-icons: ^6.11.0
     hls.js: ^1.4.6
     html-webpack-plugin: ^5.5.1
     lodash: ^4.17.21