diff --git a/client/ui-wails/frontend/src/components/Button.tsx b/client/ui-wails/frontend/src/components/Button.tsx index 24792d192..c9bf164b6 100644 --- a/client/ui-wails/frontend/src/components/Button.tsx +++ b/client/ui-wails/frontend/src/components/Button.tsx @@ -14,7 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes, Bu export const buttonVariants = cva( [ "relative", - "text-sm focus:z-10 focus:ring-2 font-medium focus:outline-none whitespace-nowrap shadow-sm", + "text-sm focus:z-10 focus:ring-2 font-semibold focus:outline-none whitespace-nowrap shadow-sm", "inline-flex gap-2 items-center justify-center transition-colors focus:ring-offset-1", "disabled:opacity-40 disabled:cursor-not-allowed disabled:dark:text-nb-gray-300 dark:ring-offset-neutral-950/50", ], @@ -153,8 +153,7 @@ export const Button = forwardRef(function Button }} {...props} > - {copy !== undefined && - (copied ? : )} + {copy !== undefined && (copied ? : )} {children} ); diff --git a/client/ui-wails/frontend/src/components/NetBirdVersionCard.tsx b/client/ui-wails/frontend/src/components/NetBirdVersionCard.tsx new file mode 100644 index 000000000..8c98b084b --- /dev/null +++ b/client/ui-wails/frontend/src/components/NetBirdVersionCard.tsx @@ -0,0 +1,91 @@ +import { ReactNode } from "react"; +import { Browser } from "@wailsio/runtime"; +import { Update as UpdateSvc } from "@bindings/services"; +import { Button } from "@/components/Button"; +import { useStatus } from "@/hooks/useStatus"; +import { cn } from "@/lib/cn"; + +function openUrl(url: string) { + void Browser.OpenURL(url).catch(() => window.open(url, "_blank")); +} + +function formatLastChecked(date: Date) { + return date.toLocaleString(undefined, { + month: "short", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + }); +} + +function triggerUpdate() { + UpdateSvc.Trigger().catch(() => {}); +} + +export function NetBirdVersionCard() { + const { status } = useStatus(); + const updateVersion = (status?.events ?? []) + .map((e) => e.metadata?.["new_version_available"]) + .find((v): v is string => Boolean(v)); + + if (updateVersion) { + return ( + +
+ Version {updateVersion} is available. + + What's new? + +
+ + + ); + } + + return ( + +
+ Last checked on {formatLastChecked(new Date())} + Changelog +
+ + + ); +} + +function Card({ children, className }: { children: ReactNode; className?: string }) { + return ( +
+ {children} +
+ ); +} + +function Title({ children }: { children: ReactNode }) { + return

{children}

; +} + +function Link({ url, children }: { url: string; children: ReactNode }) { + return ( + + ); +} diff --git a/client/ui-wails/frontend/src/modules/settings/SettingsAbout.tsx b/client/ui-wails/frontend/src/modules/settings/SettingsAbout.tsx index 56646ca76..0e28531d0 100644 --- a/client/ui-wails/frontend/src/modules/settings/SettingsAbout.tsx +++ b/client/ui-wails/frontend/src/modules/settings/SettingsAbout.tsx @@ -1,9 +1,8 @@ import { Browser } from "@wailsio/runtime"; -import { Update as UpdateSvc } from "@bindings/services"; import netbirdFull from "@/assets/logos/netbird-full.svg"; import pkg from "../../../package.json"; import { useStatus } from "@/hooks/useStatus"; -import { Button } from "@/components/Button"; +import { NetBirdVersionCard } from "@/components/NetBirdVersionCard"; import { useAccentTrigger } from "@/modules/settings/SettingsAccent"; const LEGAL_LINKS: { label: string; url: string }[] = [ @@ -17,29 +16,11 @@ function openUrl(url: string) { void Browser.OpenURL(url).catch(() => window.open(url, "_blank")); } -function formatLastChecked(date: Date) { - return date.toLocaleString(undefined, { - year: "numeric", - month: "short", - day: "numeric", - hour: "2-digit", - minute: "2-digit", - }); -} - export function SettingsAbout() { const { status } = useStatus(); const guiVersion = pkg.version; const daemonVersion = status?.daemonVersion ?? "—"; - const updateVersion = (status?.events ?? []) - .map((e) => e.metadata?.["new_version_available"]) - .find((v): v is string => Boolean(v)); - - const triggerUpdate = () => { - UpdateSvc.Trigger().catch(() => {}); - }; - const handleVersionClick = useAccentTrigger(); return ( @@ -59,44 +40,7 @@ export function SettingsAbout() {

GUI v{guiVersion}

- {updateVersion ? ( -
-
-

- Version {updateVersion} is available. -

- -
- -
- ) : ( -
-

- Last checked for updates on {formatLastChecked(new Date())} -

- -
- )} +

© {new Date().getFullYear()} NetBird. All Rights Reserved. diff --git a/client/ui-wails/frontend/src/modules/settings/SettingsContext.tsx b/client/ui-wails/frontend/src/modules/settings/SettingsContext.tsx index f0a2c982c..350113733 100644 --- a/client/ui-wails/frontend/src/modules/settings/SettingsContext.tsx +++ b/client/ui-wails/frontend/src/modules/settings/SettingsContext.tsx @@ -10,6 +10,7 @@ import { import { Settings as SettingsSvc } from "@bindings/services"; import type { Config } from "@bindings/services/models.js"; import { useProfile } from "@/modules/profile/ProfileContext.tsx"; +import { SkeletonSettings } from "@/modules/skeletons/SkeletonSettings.tsx"; const SAVE_DEBOUNCE_MS = 400; @@ -138,15 +139,15 @@ const useSettingsState = () => { }; export const SettingsProvider = ({ children }: { children: ReactNode }) => { - const { config, error, setField, saveField, saveFields, saveNow } = - useSettingsState(); + const { config, error, setField, saveField, saveFields, saveNow } = useSettingsState(); + // TODO: Better displaying of errors return ( <> {error &&

{error}

}
{!config ? ( -
Loading…
+ ) : ( { + return ( +
+
+ +
+ + +
+
+ + +
+
+
+ +
+ + + +
+
+
+ ); +};