remove unused stuff, refactor frontend folder structure

2026-10-01 19:19:07 +02:00 · 2026-05-28 16:26:13 +02:00
parent e09bc8894d
commit 51b243bdfa
92 changed files with 953 additions and 1629 deletions
@@ -0,0 +1,56 @@
+import { useTranslation } from "react-i18next";
+import { AlertCircleIcon, BookText } from "lucide-react";
+import { Browser } from "@wailsio/runtime";
+import { Button } from "@/components/buttons/Button";
+import { useStatus } from "@/contexts/StatusContext.tsx";
+
+const DOCS_URL = "https://docs.netbird.io/how-to/installation";
+
+function openUrl(url: string) {
+    void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
+}
+
+export const DaemonUnavailableOverlay = () => {
+    const { t } = useTranslation();
+    const { isDaemonUnavailable } = useStatus();
+
+    if (!isDaemonUnavailable) return null;
+
+    return (
+        <div
+            className={
+                "fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"
+            }
+            onKeyDown={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+        >
+            <div className={"flex flex-col items-center gap-5 px-8 max-w-lg text-center"}>
+                <div
+                    className={
+                        "h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-red-500"
+                    }
+                >
+                    <AlertCircleIcon size={20} />
+                </div>
+
+                <div className={"flex flex-col items-center gap-1"}>
+                    <p className={"text-base font-medium text-nb-gray-50"}>
+                        {t("daemon.unavailable.title")}
+                    </p>
+                    <p className={"text-sm text-nb-gray-300"}>
+                        {t("daemon.unavailable.description")}
+                    </p>
+                </div>
+
+                <div className={"wails-no-draggable"}>
+                    <Button variant={"secondary"} size={"xs"} onClick={() => openUrl(DOCS_URL)}>
+                        <BookText size={14} />
+                        {t("daemon.unavailable.docsLink")}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,63 @@
+import { ComponentType } from "react";
+import { useTranslation } from "react-i18next";
+import { Browser } from "@wailsio/runtime";
+import { ExternalLinkIcon, LucideProps } from "lucide-react";
+import { cn } from "@/lib/cn";
+import { SquareIcon } from "@/components/SquareIcon";
+
+type Props = {
+    icon: ComponentType<LucideProps>;
+    title: string;
+    description?: string;
+    learnMoreUrl?: string;
+    learnMoreTopic?: string;
+    className?: string;
+};
+
+const openUrl = (url: string) => {
+    void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
+};
+
+export const EmptyState = ({
+    icon,
+    title,
+    description,
+    learnMoreUrl,
+    learnMoreTopic,
+    className,
+}: Props) => {
+    const { t } = useTranslation();
+    return (
+        <div className={cn("py-12 text-center", className)}>
+            <div
+                className={
+                    "flex flex-col items-center justify-center max-w-sm mx-auto relative top-7"
+                }
+            >
+                <SquareIcon icon={icon} className={"mb-3"} />
+                <p className={"text-base font-medium text-nb-gray-200 mb-1"}>{title}</p>
+                {description && <p className={"text-sm text-nb-gray-350"}>{description}</p>}
+                {learnMoreUrl && learnMoreTopic && (
+                    <p className={"text-sm text-nb-gray-350"}>
+                        {t("common.learnMoreAbout")}{" "}
+                        <a
+                            href={learnMoreUrl}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                openUrl(learnMoreUrl);
+                            }}
+                            className={cn(
+                                "text-netbird hover:underline underline-offset-4",
+                                "cursor-pointer wails-no-draggable",
+                                "inline-flex items-center gap-1",
+                            )}
+                        >
+                            {learnMoreTopic}
+                            <ExternalLinkIcon size={12} className={"shrink-0"} />
+                        </a>
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,22 @@
+import { ComponentType } from "react";
+import { FunnelXIcon, LucideProps } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { EmptyState } from "./EmptyState";
+
+type Props = {
+    icon?: ComponentType<LucideProps>;
+    title?: string;
+    description?: string;
+};
+
+export const NoResults = ({ icon = FunnelXIcon, title, description }: Props) => {
+    const { t } = useTranslation();
+    return (
+        <EmptyState
+            icon={icon}
+            title={title ?? t("common.noResults.title")}
+            description={description ?? t("common.noResults.description")}
+            className={"relative -top-3.5"}
+        />
+    );
+};
@@ -0,0 +1,20 @@
+import { GlobeOffIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { EmptyState } from "./EmptyState";
+
+export const NotConnectedState = () => {
+    const { t } = useTranslation();
+    return (
+        <div
+            className={
+                "h-full min-h-[260px] flex-1 flex items-center justify-center px-6 pb-20 top-1 relative"
+            }
+        >
+            <EmptyState
+                icon={GlobeOffIcon}
+                title={t("notConnected.title")}
+                description={t("notConnected.description")}
+            />
+        </div>
+    );
+};