Skip to content

Commit

Permalink
feat: system settings page and add event source max timeout
Browse files Browse the repository at this point in the history
  • Loading branch information
zmh-program committed Dec 15, 2023
1 parent d496635 commit 8990c7c
Show file tree
Hide file tree
Showing 24 changed files with 784 additions and 23 deletions.
2 changes: 1 addition & 1 deletion app/src-tauri/tauri.conf.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
},
"package": {
"productName": "chatnio",
"version": "3.7.5"
"version": "3.7.6"
},
"tauri": {
"allowlist": {
Expand Down
1 change: 1 addition & 0 deletions app/src/assets/admin/all.less
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "broadcast";
@import "channel";
@import "charge";
@import "system";

.admin-page {
position: relative;
Expand Down
13 changes: 13 additions & 0 deletions app/src/assets/admin/system.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.system {
width: 100%;
height: max-content;
padding: 2rem;
display: flex;
flex-direction: column;

.system-card {
width: 100%;
height: 100%;
min-height: 20vh;
}
}
141 changes: 141 additions & 0 deletions app/src/assets/ui.less
Original file line number Diff line number Diff line change
Expand Up @@ -123,3 +123,144 @@ input[type="number"] {
background: hsl(var(--selection));
}
}

.paragraph {
display: flex;
flex-direction: column;
margin: 0.5rem 0;
padding: 1.5rem;
border-radius: var(--radius);
background: hsl(var(--background));
color: hsl(var(--text));
border: 1px solid hsl(var(--border));
transition: .25s;
cursor: pointer;

&.collapsable {
.paragraph-content {
max-height: var(--max-height);
will-change: max-height;
overflow: hidden;
transition: .5s;
}

&.collapsed {
padding-bottom: 1rem;

.paragraph-content {
max-height: 0;
}
}
}

.paragraph-content {
& > * {
margin-bottom: 1rem;

&:last-child {
margin-bottom: 0;
}
}
}

.paragraph-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-bottom: 1.5rem;
align-items: center;
transform: translateY(-0.25rem);
}

.paragraph-title {
position: relative;
display: flex;
flex-direction: row;
font-size: 1.05rem;
user-select: none;
line-height: 1.1rem;
color: hsl(var(--text-secondary));
transition: .25s;

&:before {
content: '';
margin-right: 0.5rem;
height: 1.25rem;
width: 2px;
border-radius: 1px;
background: hsl(var(--text-secondary));
transition: .25s;
}
}

.paragraph-item {
display: flex;
flex-direction: row;
white-space: nowrap;
align-items: center;
font-size: 0.9rem;

label {
font-size: 0.9rem;
font-weight: normal;
}

& > * {
margin-right: 1rem;

&:last-child {
margin-right: 0;
}
}
}

.paragraph-description {
display: flex;
flex-direction: row;
align-items: center;
color: hsl(var(--text-secondary));
width: 100%;
height: max-content;
font-size: 0.9rem;
margin: 0.75rem 0;

svg {
margin-right: 0.5rem;
flex-shrink: 0;
}
}

.paragraph-footer {
display: flex;
flex-direction: row;
margin-top: 1rem;

& > * {
margin-right: 1rem;

&:last-child {
margin-right: 0;
}
}
}

&:hover {
border-color: hsl(var(--border-hover));

.paragraph-title {
color: hsl(var(--text));

&:before {
background: hsl(var(--text));
}
}
}

&.config-paragraph {
.paragraph-content {
input {
margin-left: auto;
}
}
}
}
86 changes: 86 additions & 0 deletions app/src/components/Paragraph.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from "react";
import { ChevronDown, Info } from "lucide-react";
import { cn } from "@/components/ui/lib/utils.ts";
import { Button } from "@/components/ui/button.tsx";
import Markdown from "@/components/Markdown.tsx";

export type ParagraphProps = {
title?: string;
children: React.ReactNode;
configParagraph?: boolean;
isCollapsed?: boolean;
onCollapse?: () => void;
defaultCollapsed?: boolean;
};

function Paragraph({
title,
children,
configParagraph,
isCollapsed,
onCollapse,
defaultCollapsed,
}: ParagraphProps) {
const [collapsed, setCollapsed] = React.useState(defaultCollapsed ?? false);

React.useEffect(() => onCollapse && onCollapse(), [collapsed]);

return (
<div
className={cn(
`paragraph`,
configParagraph && `config-paragraph`,
isCollapsed && `collapsable`,
collapsed && `collapsed`,
)}
>
<div
className={`paragraph-header`}
onClick={() => setCollapsed(!collapsed)}
>
{title && <div className={`paragraph-title`}>{title}</div>}
<div className={`grow`} />
{isCollapsed && (
<Button size={`icon`} variant={`ghost`} className={`w-8 h-8`}>
<ChevronDown
className={cn(
`w-4 h-4 transition-transform duration-300`,
collapsed && `transform rotate-180`,
)}
/>
</Button>
)}
</div>
<div
className={`paragraph-content`}
style={
{
"--max-height": collapsed ? "0px" : "1000px",
} as React.CSSProperties
}
>
{children}
</div>
</div>
);
}

function ParagraphItem({ children }: { children: React.ReactNode }) {
return <div className={`paragraph-item`}>{children}</div>;
}

export function ParagraphDescription({ children }: { children: string }) {
return (
<div className={`paragraph-description`}>
<Info size={16} />
<Markdown children={children} />
</div>
);
}

function ParagraphFooter({ children }: { children: React.ReactNode }) {
return <div className={`paragraph-footer`}>{children}</div>;
}

export default Paragraph;
export { ParagraphItem, ParagraphFooter };
2 changes: 1 addition & 1 deletion app/src/components/admin/ChargeWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ function ChargeTable({ data, dispatch, onRefresh }: ChargeTableProps) {
<TableCell>
<Badge>{charge.type.split("-")[0]}</Badge>
</TableCell>
<TableCell className={`select-none`}>
<TableCell>
<pre>{charge.models.join("\n")}</pre>
</TableCell>
<TableCell>
Expand Down
8 changes: 7 additions & 1 deletion app/src/components/admin/MenuBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { closeMenu, selectMenu } from "@/store/menu.ts";
import React, { useMemo } from "react";
import {
CandlestickChart,
GitFork,
LayoutDashboard,
Radio,
Settings,
Expand Down Expand Up @@ -60,14 +61,19 @@ function MenuBar() {
/>
<MenuItem
title={t("admin.channel")}
icon={<Settings />}
icon={<GitFork />}
path={"/channel"}
/>
<MenuItem
title={t("admin.prize")}
icon={<CandlestickChart />}
path={"/charge"}
/>
<MenuItem
title={t("admin.settings")}
icon={<Settings />}
path={"/system"}
/>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion app/src/components/admin/assemblies/BroadcastTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ function CreateBroadcastDialog(props: CreateBroadcastDialogProps) {
<DialogClose asChild>
<Button variant={`outline`}>{t("admin.cancel")}</Button>
</DialogClose>
<Button variant={`default`} onClick={postBroadcast}>
<Button variant={`default`} onClick={postBroadcast} loading={true}>
{t("admin.post")}
</Button>
</DialogFooter>
Expand Down
2 changes: 2 additions & 0 deletions app/src/components/home/ChatWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import ActionButton from "@/components/home/assemblies/ActionButton.tsx";
import ChatInput from "@/components/home/assemblies/ChatInput.tsx";
import ScrollAction from "@/components/home/assemblies/ScrollAction.tsx";
import { connectionEvent } from "@/events/connection.ts";
import { chatEvent } from "@/events/chat.ts";

type InterfaceProps = {
setWorking: (working: boolean) => void;
Expand Down Expand Up @@ -68,6 +69,7 @@ function ChatWrapper() {
const [instance, setInstance] = useState<HTMLElement | null>(null);

manager.setDispatch(dispatch);
chatEvent.addEventListener(() => setWorking(false));

function clearFile() {
setFiles([]);
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/home/assemblies/ChatAction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export const ChatAction = React.forwardRef<HTMLDivElement, ChatActionProps>(
<div
className={`action chat-action ${className}`}
onClick={onClick}
ref={ref} // @ts-ignore
style={{ "--width": `${labelWidth}px` }}
ref={ref}
style={{ "--width": `${labelWidth}px` } as React.CSSProperties}
>
{children}
<div className="text" ref={label}>
Expand Down
Loading

0 comments on commit 8990c7c

Please sign in to comment.