Merge branch 'ui-refactor' into ui-refactor-ui

client/ui/frontend/src/lib/MainModuleContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+export type MainModule = "peers" | "settings";
+
+type Ctx = {
+    active: MainModule;
+    setActive: (m: MainModule) => void;
+};
+
+const MainModuleContext = createContext<Ctx | null>(null);
+
+export const MainModuleProvider = ({ children }: { children: ReactNode }) => {
+    const [active, setActive] = useState<MainModule>("peers");
+    return (
+        <MainModuleContext.Provider value={{ active, setActive }}>
+            {children}
+        </MainModuleContext.Provider>
+    );
+};
+
+export const useMainModule = () => {
+    const ctx = useContext(MainModuleContext);
+    if (!ctx) {
+        throw new Error("useMainModule must be used within MainModuleProvider");
+    }
+    return ctx;
+};

client/ui/frontend/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

client/ui/frontend/src/lib/color.ts

@@ -0,0 +1,17 @@
+import chroma from "chroma-js";
+
+export const generateColorFromString = (str?: string) => {
+    if (!str) return "#f68330";
+    if (str.includes("System")) return "#808080";
+    if (str.toLowerCase().startsWith("netbird")) return "#f68330";
+    let hash = 0;
+    str.split("").forEach((char) => {
+        hash = char.charCodeAt(0) + ((hash << 5) - hash);
+    });
+    let colour = "#";
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 0xff;
+        colour += value.toString(16).padStart(2, "0");
+    }
+    return chroma(colour).saturate(2).luminance(0.4).hex();
+};

client/ui/frontend/src/lib/welcome.ts

@@ -0,0 +1,23 @@
+const ART = `
+    _   __     __  ____  _          __   ______          __    __  __
+   / | / /__  / /_/ __ )(_)________/ /  / ____/___ ___  / /_  / / / /
+  /  |/ / _ \\/ __/ __  / / ___/ __  /  / / __/ __ \`__ \\/ __ \\/ /_/ /
+ / /|  /  __/ /_/ /_/ / / /  / /_/ /  / /_/ / / / / / / /_/ / __  /
+/_/ |_/\\___/\\__/_____/_/_/   \\__,_/   \\____/_/ /_/ /_/_.___/_/ /_/
+`;
+
+export function welcome() {
+    const message = `%c${ART}%c
+NetBird — The Only Secure Access Platform You'll Ever Need.
+
+WEBSITE:      https://netbird.io/
+WE'RE HIRING: https://careers.netbird.io/
+OPEN SOURCE:  https://github.com/netbirdio/netbird
+`;
+
+    console.log(
+        message,
+        "color: #f68330; font-family: monospace; font-weight: normal; line-height: 1;",
+        "color: #f5f5f5; font-family: monospace; font-weight: normal; line-height: 1.4;",
+    );
+}