|
|
|
@ -1,6 +1,5 @@ |
|
|
|
import classNames from "classnames"; |
|
|
|
|
|
|
|
import { useCallback, useEffect, useState } from "react"; |
|
|
|
import { useCallback, useEffect, useState } from "react"; |
|
|
|
import Sticky from "react-stickynode"; |
|
|
|
import Sticky from "react-sticky-el"; |
|
|
|
import { useAsync } from "react-use"; |
|
|
|
import { useAsync } from "react-use"; |
|
|
|
|
|
|
|
|
|
|
|
import { getBackendMeta } from "@/backend/accounts/meta"; |
|
|
|
import { getBackendMeta } from "@/backend/accounts/meta"; |
|
|
|
@ -10,34 +9,25 @@ import { Divider } from "@/components/utils/Divider"; |
|
|
|
import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; |
|
|
|
import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; |
|
|
|
import { useIsMobile } from "@/hooks/useIsMobile"; |
|
|
|
import { useIsMobile } from "@/hooks/useIsMobile"; |
|
|
|
import { conf } from "@/setup/config"; |
|
|
|
import { conf } from "@/setup/config"; |
|
|
|
|
|
|
|
import { useAuthStore } from "@/stores/auth"; |
|
|
|
|
|
|
|
|
|
|
|
function BackendUrl(props: { url: string }) { |
|
|
|
const rem = 16; |
|
|
|
const url = props.url.replace(/https?:\/\//, ""); |
|
|
|
|
|
|
|
|
|
|
|
function SecureBadge(props: { url: string }) { |
|
|
|
const secure = props.url.startsWith("https://"); |
|
|
|
const secure = props.url.startsWith("https://"); |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="flex items-center gap-2"> |
|
|
|
<div className="flex items-center gap-1 -mx-1 ml-3 px-1 rounded bg-largeCard-background font-bold"> |
|
|
|
<div |
|
|
|
<Icon icon={secure ? Icons.LOCK : Icons.UNLOCK} /> |
|
|
|
title={secure ? "Secure" : "Insecure"} |
|
|
|
Secure |
|
|
|
className={classNames( |
|
|
|
|
|
|
|
"w-5 min-w-[1.25rem] h-5 rounded flex justify-center items-center", |
|
|
|
|
|
|
|
secure ? "bg-emerald-200/30 text-white" : "bg-red-600/20 text-white" |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Icon |
|
|
|
|
|
|
|
className="opacity-50" |
|
|
|
|
|
|
|
icon={secure ? Icons.LOCK : Icons.UNLOCK} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{url} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export function SidebarPart() { |
|
|
|
export function SidebarPart() { |
|
|
|
const { isMobile } = useIsMobile(); |
|
|
|
const { isMobile } = useIsMobile(); |
|
|
|
|
|
|
|
const { account } = useAuthStore(); |
|
|
|
// eslint-disable-next-line no-restricted-globals
|
|
|
|
// eslint-disable-next-line no-restricted-globals
|
|
|
|
const hostname = location.hostname; |
|
|
|
const hostname = location.hostname; |
|
|
|
const rem = 16; |
|
|
|
|
|
|
|
const [activeLink, setActiveLink] = useState(""); |
|
|
|
const [activeLink, setActiveLink] = useState(""); |
|
|
|
|
|
|
|
|
|
|
|
const settingLinks = [ |
|
|
|
const settingLinks = [ |
|
|
|
@ -54,7 +44,6 @@ export function SidebarPart() { |
|
|
|
return getBackendMeta(backendUrl); |
|
|
|
return getBackendMeta(backendUrl); |
|
|
|
}, [backendUrl]); |
|
|
|
}, [backendUrl]); |
|
|
|
|
|
|
|
|
|
|
|
// TODO loading/error state for backend
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
function recheck() { |
|
|
|
function recheck() { |
|
|
|
const windowHeight = |
|
|
|
const windowHeight = |
|
|
|
@ -97,11 +86,13 @@ export function SidebarPart() { |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<div className="text-settings-sidebar-type-inactive sidebar-boundary"> |
|
|
|
<Sticky |
|
|
|
<Sticky |
|
|
|
enabled={!isMobile} |
|
|
|
topOffset={-6 * rem} |
|
|
|
top={10 * rem} // 10rem
|
|
|
|
stickyClassName="pt-[6rem]" |
|
|
|
className="text-settings-sidebar-type-inactive" |
|
|
|
disabled={isMobile} |
|
|
|
|
|
|
|
hideOnBoundaryHit={false} |
|
|
|
|
|
|
|
boundaryElement=".sidebar-boundary" |
|
|
|
> |
|
|
|
> |
|
|
|
<div className="hidden lg:block"> |
|
|
|
<div className="hidden lg:block"> |
|
|
|
<SidebarSection title="Settings"> |
|
|
|
<SidebarSection title="Settings"> |
|
|
|
@ -119,28 +110,56 @@ export function SidebarPart() { |
|
|
|
<Divider /> |
|
|
|
<Divider /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<SidebarSection className="text-sm" title="App information"> |
|
|
|
<SidebarSection className="text-sm" title="App information"> |
|
|
|
<div className="flex justify-between items-center space-x-3"> |
|
|
|
<div className="px-3 py-3.5 rounded-lg bg-largeCard-background bg-opacity-50 grid grid-cols-2 gap-4"> |
|
|
|
<span>Version</span> |
|
|
|
{/* Hostname */} |
|
|
|
<span>{conf().APP_VERSION}</span> |
|
|
|
<div className="col-span-2 space-y-1"> |
|
|
|
</div> |
|
|
|
<p className="text-type-dimmed font-medium">Hostname</p> |
|
|
|
<div className="flex justify-between items-center space-x-3"> |
|
|
|
<p className="text-white">{hostname}</p> |
|
|
|
<span>Domain</span> |
|
|
|
</div> |
|
|
|
<span className="text-right">{hostname}</span> |
|
|
|
|
|
|
|
|
|
|
|
{/* Backend URL */} |
|
|
|
|
|
|
|
<div className="col-span-2 space-y-1"> |
|
|
|
|
|
|
|
<p className="text-type-dimmed font-medium flex items-center"> |
|
|
|
|
|
|
|
Backend URL |
|
|
|
|
|
|
|
<SecureBadge url={backendUrl} /> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="text-white"> |
|
|
|
|
|
|
|
{backendUrl.replace(/https?:\/\//, "")} |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* User ID */} |
|
|
|
|
|
|
|
<div className="col-span-2 space-y-1"> |
|
|
|
|
|
|
|
<p className="text-type-dimmed font-medium">User ID</p> |
|
|
|
|
|
|
|
<p className="text-white">{account?.userId ?? "Not logged in"}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* App version */} |
|
|
|
|
|
|
|
<div className="col-span-1 space-y-1"> |
|
|
|
|
|
|
|
<p className="text-type-dimmed font-medium">App version</p> |
|
|
|
|
|
|
|
<p className="text-type-dimmed px-2 py-1 rounded bg-settings-sidebar-badge inline-block"> |
|
|
|
|
|
|
|
{conf().APP_VERSION} |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Backend version */} |
|
|
|
|
|
|
|
<div className="col-span-1 space-y-1"> |
|
|
|
|
|
|
|
<p className="text-type-dimmed font-medium">Backend version</p> |
|
|
|
|
|
|
|
<p className="text-type-dimmed px-2 py-1 rounded bg-settings-sidebar-badge inline-flex items-center gap-1"> |
|
|
|
|
|
|
|
{backendMeta.error ? ( |
|
|
|
|
|
|
|
<Icon |
|
|
|
|
|
|
|
icon={Icons.WARNING} |
|
|
|
|
|
|
|
className="text-type-danger text-base" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
) : null} |
|
|
|
|
|
|
|
{backendMeta.loading ? ( |
|
|
|
|
|
|
|
<div className="h-4 w-12 bg-type-dimmed/20 rounded" /> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
backendMeta?.value?.version || "Unknown" |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{backendMeta.value ? ( |
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
<div className="flex justify-between items-center space-x-3"> |
|
|
|
|
|
|
|
<span>Backend Version</span> |
|
|
|
|
|
|
|
<span>{backendMeta.value.version}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="flex justify-between items-center space-x-3"> |
|
|
|
|
|
|
|
<span className="whitespace-nowrap">Backend URL</span> |
|
|
|
|
|
|
|
<span className="text-right"> |
|
|
|
|
|
|
|
<BackendUrl url={backendUrl} /> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) : null} |
|
|
|
|
|
|
|
</SidebarSection> |
|
|
|
</SidebarSection> |
|
|
|
</Sticky> |
|
|
|
</Sticky> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
mrjvs
2 years ago