Add flags

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="flag"></div>
+          <div className="flex f-center g12">
+            <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"
-}
+}