forked from Kieran/snort
feat: relays cleanup
This commit is contained in:
parent
fcd2c8a3a0
commit
e627cddd24
@ -141,7 +141,6 @@
|
||||
|
||||
.trash-icon {
|
||||
color: var(--error);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.note-expand .body {
|
||||
|
@ -1,8 +1,6 @@
|
||||
.relay {
|
||||
margin-top: 10px;
|
||||
background-color: var(--gray-secondary);
|
||||
border-radius: 5px;
|
||||
text-align: start;
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
overflow: hidden;
|
||||
@ -12,33 +10,3 @@
|
||||
.relay > div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.relay-extra {
|
||||
padding: 5px;
|
||||
margin: 0 5px;
|
||||
background-color: var(--gray-tertiary);
|
||||
border-radius: 0 0 5px 5px;
|
||||
white-space: nowrap;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--gray);
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
margin-left: 0.5em;
|
||||
padding: 2px 10px;
|
||||
background-color: var(--gray);
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
@ -1,18 +1,17 @@
|
||||
import "./Relay.css";
|
||||
import { useContext, useMemo } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { RelaySettings } from "@snort/system";
|
||||
import { unixNowMs } from "@snort/shared";
|
||||
import classNames from "classnames";
|
||||
|
||||
import useRelayState from "Feed/RelayState";
|
||||
import { SnortContext } from "@snort/system-react";
|
||||
import { getRelayName, unwrap } from "SnortUtils";
|
||||
import useLogin from "Hooks/useLogin";
|
||||
import { setRelays } from "Login";
|
||||
import Icon from "Icons/Icon";
|
||||
|
||||
import messages from "../messages";
|
||||
import { removeRelay, setRelays } from "Login";
|
||||
import { RelayFavicon } from "./RelaysMetadata";
|
||||
import { AsyncIcon } from "Element/AsyncIcon";
|
||||
|
||||
export interface RelayProps {
|
||||
addr: string;
|
||||
@ -42,48 +41,52 @@ export default function Relay(props: RelayProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`relay w-max`}>
|
||||
<div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
|
||||
<Icon name="wifi" />
|
||||
<div className="relay">
|
||||
<div className={classNames("flex items-center", state?.connected ? "bg-success" : "bg-error")}>
|
||||
<RelayFavicon url={props.addr} />
|
||||
</div>
|
||||
<div className="grow flex-col">
|
||||
<div className="flex mb10">
|
||||
<b className="f-2">{name}</b>
|
||||
<div className="f-1">
|
||||
<FormattedMessage {...messages.Write} />
|
||||
<span
|
||||
className="checkmark"
|
||||
<div className="flex flex-col g8">
|
||||
<div>
|
||||
<b>{name}</b>
|
||||
</div>
|
||||
{!state?.ephemeral && (
|
||||
<div className="flex g8">
|
||||
<AsyncIcon
|
||||
iconName="write"
|
||||
iconSize={16}
|
||||
className={classNames("button-icon-sm transparent", { active: relaySettings.write })}
|
||||
onClick={() =>
|
||||
configure({
|
||||
write: !relaySettings.write,
|
||||
read: relaySettings.read,
|
||||
})
|
||||
}>
|
||||
<Icon name={relaySettings.write ? "check" : "close"} size={12} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="f-1">
|
||||
<FormattedMessage {...messages.Read} />
|
||||
<span
|
||||
className="checkmark"
|
||||
}
|
||||
/>
|
||||
<AsyncIcon
|
||||
iconName="read"
|
||||
iconSize={16}
|
||||
className={classNames("button-icon-sm transparent", { active: relaySettings.read })}
|
||||
onClick={() =>
|
||||
configure({
|
||||
write: relaySettings.write,
|
||||
read: !relaySettings.read,
|
||||
})
|
||||
}>
|
||||
<Icon name={relaySettings.read ? "check" : "close"} size={12} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="grow"></div>
|
||||
<div>
|
||||
<span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>
|
||||
<Icon name="gear" size={12} />
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<AsyncIcon
|
||||
iconName="trash"
|
||||
iconSize={16}
|
||||
className="button-icon-sm transparent trash-icon"
|
||||
onClick={() => removeRelay(login, props.addr)}
|
||||
/>
|
||||
<AsyncIcon
|
||||
iconName="gear"
|
||||
iconSize={16}
|
||||
className="button-icon-sm transparent"
|
||||
onClick={() => navigate(state?.id ?? "")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
@ -1,45 +1,9 @@
|
||||
.favicon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 100%;
|
||||
margin-right: 12px;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.relay-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.relay-settings {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.relay-settings svg:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.relay-settings svg.enabled {
|
||||
.relay-active {
|
||||
color: var(--highlight);
|
||||
}
|
||||
.relay-settings svg.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.relay-settings svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.relay-url {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
.relay-url {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
@ -5,14 +5,19 @@ import { useState } from "react";
|
||||
import { FullRelaySettings } from "@snort/system";
|
||||
import Icon from "Icons/Icon";
|
||||
|
||||
const RelayFavicon = ({ url }: { url: string }) => {
|
||||
export const RelayFavicon = ({ url }: { url: string }) => {
|
||||
const cleanUrl = url
|
||||
.replace(/^wss:\/\//, "https://")
|
||||
.replace(/^ws:\/\//, "http://")
|
||||
.replace(/\/$/, "");
|
||||
const [faviconUrl, setFaviconUrl] = useState(`${cleanUrl}/favicon.ico`);
|
||||
return (
|
||||
<img className="favicon" src={faviconUrl} onError={() => setFaviconUrl(Nostrich)} alt={`favicon for ${url}`} />
|
||||
<img
|
||||
className="circle favicon"
|
||||
src={faviconUrl}
|
||||
onError={() => setFaviconUrl(Nostrich)}
|
||||
alt={`favicon for ${url}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -25,12 +30,12 @@ const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
|
||||
<>
|
||||
{relays?.map(({ url, settings }) => {
|
||||
return (
|
||||
<div key={url} className="card relay-card">
|
||||
<div key={url} className="card flex g8">
|
||||
<RelayFavicon url={url} />
|
||||
<code className="relay-url f-ellipsis">{url}</code>
|
||||
<div className="relay-settings">
|
||||
<Icon name="read" className={settings.read ? "enabled" : "disabled"} />
|
||||
<Icon name="write" className={settings.write ? "enabled" : "disabled"} />
|
||||
<code className="grow f-ellipsis">{url}</code>
|
||||
<div className="flex g8">
|
||||
<Icon name="read" className={settings.read ? "relay-active" : "disabled"} />
|
||||
<Icon name="write" className={settings.write ? "relay-active" : "disabled"} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -45,11 +45,10 @@ const RelaySettingsPage = () => {
|
||||
|
||||
function addRelay() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col g8">
|
||||
<h4>
|
||||
<FormattedMessage {...messages.AddRelays} />
|
||||
</h4>
|
||||
<div className="flex mb10">
|
||||
<input
|
||||
type="text"
|
||||
className="grow"
|
||||
@ -57,11 +56,10 @@ const RelaySettingsPage = () => {
|
||||
value={newRelay}
|
||||
onChange={handleNewRelayChange}
|
||||
/>
|
||||
</div>
|
||||
<button className="secondary mb10" onClick={() => addNewRelay()}>
|
||||
<button className="secondary" onClick={() => addNewRelay()}>
|
||||
<FormattedMessage {...messages.Add} />
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -77,31 +75,28 @@ const RelaySettingsPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col g8">
|
||||
<h3>
|
||||
<FormattedMessage {...messages.Relays} />
|
||||
</h3>
|
||||
<div className="flex flex-col mb10">
|
||||
<div className="flex flex-col g8">
|
||||
{Object.keys(relays.item || {}).map(a => (
|
||||
<Relay addr={a} key={a} />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex mt10">
|
||||
<div className="grow"></div>
|
||||
<AsyncButton type="button" onClick={() => saveRelays(system, publisher, relays.item)} disabled={login.readonly}>
|
||||
<FormattedMessage {...messages.Save} />
|
||||
</AsyncButton>
|
||||
</div>
|
||||
{addRelay()}
|
||||
<h3>
|
||||
<FormattedMessage defaultMessage="Other Connections" />
|
||||
</h3>
|
||||
<div className="flex flex-col mb10">
|
||||
<div className="flex flex-col g8">
|
||||
{otherConnections.map(a => (
|
||||
<Relay addr={a.address} key={a.id} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user