shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor admin theme handling and optimize initialization.

Browse Source 
Simplified theme detection logic and improved the loading screen for better performance on slower networks. Adjusted styles, reorganized imports, and removed unnecessary rendering logic in `main.tsx`.
This commit is contained in:
dswbx
2025-01-10 18:33:12 +01:00
parent c7d983942f
commit 87e07570d4
4 changed files with 174 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/src/modules/server/AdminController.tsx
View File

@@ -174,23 +174,14 @@ export class AdminController extends Controller {
<script type="module" src={"/@vite/client"} /> <script type="module" src={"/@vite/client"} />
</Fragment> </Fragment>
)} )}
<style dangerouslySetInnerHTML={{ __html: "body { margin: 0; padding: 0; }" }} />
</head> </head>
<body style={{ backgroundColor: theme === "light" ? "#fff" : "#000" }}> <body>
<div id="root" /> <div id="root">
<div id="app"> <div id="loading" style={style(theme)}>
<div <span style={{ opacity: 0.3, fontSize: 14, fontFamily: "monospace" }}>
id="loading" Initializing...
style={{ </span>
height: "100vh",
width: "100vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontFamily: "monospace",
opacity: 0.3
}}
>
Initializing...
</div> </div>
</div> </div>
<script <script
@@ -205,3 +196,32 @@ export class AdminController extends Controller {
); );
} }
} }
const style = (theme: "light" | "dark" = "light") => {
const base = {
margin: 0,
padding: 0,
height: "100vh",
width: "100vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale"
};
const styles = {
light: {
color: "rgb(9,9,11)",
backgroundColor: "rgb(250,250,250)"
},
dark: {
color: "rgb(250,250,250)",
backgroundColor: "rgb(30,31,34)"
}
};
return {
...base,
...styles[theme]
};
};

9
app/src/ui/Admin.tsx
View File

@@ -54,16 +54,19 @@ function AdminInternal() {
); );
} }
const Skeleton = ({ theme = "light" }: { theme?: string }) => { const Skeleton = ({ theme }: { theme?: string }) => {
const actualTheme =
(theme ?? document.querySelector("html")?.classList.contains("light")) ? "light" : "dark";
return ( return (
<div id="bknd-admin" className={(theme ?? "light") + " antialiased"}> <div id="bknd-admin" className={actualTheme + " antialiased"}>
<AppShell.Root> <AppShell.Root>
<header <header
data-shell="header" data-shell="header"
className="flex flex-row w-full h-16 gap-2.5 border-muted border-b justify-start bg-muted/10" className="flex flex-row w-full h-16 gap-2.5 border-muted border-b justify-start bg-muted/10"
> >
<div className="max-h-full flex hover:bg-primary/5 link p-2.5 w-[134px] outline-none"> <div className="max-h-full flex hover:bg-primary/5 link p-2.5 w-[134px] outline-none">
<Logo theme={theme} /> <Logo theme={actualTheme} />
</div> </div>
<nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center"> <nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center">
{[...new Array(5)].map((item, key) => ( {[...new Array(5)].map((item, key) => (

251
app/src/ui/main.css
View File

@@ -1,210 +1,211 @@
@import "./components/form/json-schema/styles.css"; @import "./components/form/json-schema/styles.css";
@import '@xyflow/react/dist/style.css'; @import "@xyflow/react/dist/style.css";
@import "@mantine/core/styles.css"; @import "@mantine/core/styles.css";
@import '@mantine/notifications/styles.css'; @import "@mantine/notifications/styles.css";
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html.fixed, html.fixed body { html.fixed,
top: 0; html.fixed body {
left: 0; top: 0;
height: 100%; left: 0;
width: 100%; height: 100%;
position: fixed; width: 100%;
overflow: hidden; position: fixed;
overscroll-behavior-x: contain; overflow: hidden;
touch-action: none; overscroll-behavior-x: contain;
touch-action: none;
} }
#bknd-admin, .bknd-admin { #bknd-admin,
--color-primary: 9 9 11; /* zinc-950 */ .bknd-admin {
--color-background: 250 250 250; /* zinc-50 */ --color-primary: 9 9 11; /* zinc-950 */
--color-muted: 228 228 231; /* ? */ --color-background: 250 250 250; /* zinc-50 */
--color-darkest: 0 0 0; /* black */ --color-muted: 228 228 231; /* ? */
--color-lightest: 255 255 255; /* white */ --color-darkest: 0 0 0; /* black */
--color-lightest: 255 255 255; /* white */
&.dark { &.dark {
--color-primary: 250 250 250; /* zinc-50 */ --color-primary: 250 250 250; /* zinc-50 */
--color-background: 9 9 11; /* zinc-950 */ --color-background: 30 31 34;
--color-muted: 39 39 42; /* zinc-800 */ --color-muted: 47 47 52;
--color-darkest: 255 255 255; /* white */ --color-darkest: 255 255 255; /* white */
--color-lightest: 0 0 0; /* black */ --color-lightest: 24 24 27; /* black */
} }
&.dark {
--color-primary: 250 250 250; /* zinc-50 */
--color-background: 30 31 34;
--color-muted: 47 47 52;
--color-darkest: 255 255 255; /* white */
--color-lightest: 24 24 27; /* black */
}
@mixin light { @mixin light {
--mantine-color-body: rgb(250 250 250); --mantine-color-body: rgb(250 250 250);
} }
@mixin dark { @mixin dark {
--mantine-color-body: rgb(9 9 11); --mantine-color-body: rgb(9 9 11);
} }
table { table {
font-size: inherit; font-size: inherit;
} }
} }
html, body { html,
font-size: 14px; body {
-webkit-font-smoothing: antialiased; font-size: 14px;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
overscroll-behavior-y: none; -moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none;
} }
#bknd-admin { #bknd-admin {
@apply bg-background text-primary overflow-hidden h-dvh w-dvw; @apply bg-background text-primary overflow-hidden h-dvh w-dvw;
::selection { ::selection {
@apply bg-muted; @apply bg-muted;
} }
input { input {
&::selection { &::selection {
@apply bg-primary/15; @apply bg-primary/15;
}
} }
}
} }
body, body,
#bknd-admin { #bknd-admin {
@apply flex flex-1 flex-col h-dvh w-dvw; @apply flex flex-1 flex-col h-dvh w-dvw;
} }
@layer components { @layer components {
.link { .link {
@apply transition-colors active:translate-y-px; @apply transition-colors active:translate-y-px;
} }
.img-responsive { .img-responsive {
@apply max-h-full w-auto; @apply max-h-full w-auto;
} }
/** /**
* debug classes * debug classes
*/ */
.bordered-red { .bordered-red {
@apply border-2 border-red-500; @apply border-2 border-red-500;
} }
.bordered-green { .bordered-green {
@apply border-2 border-green-500; @apply border-2 border-green-500;
} }
.bordered-blue { .bordered-blue {
@apply border-2 border-blue-500; @apply border-2 border-blue-500;
} }
.bordered-violet { .bordered-violet {
@apply border-2 border-violet-500; @apply border-2 border-violet-500;
} }
.bordered-yellow { .bordered-yellow {
@apply border-2 border-yellow-500; @apply border-2 border-yellow-500;
} }
} }
@layer utilities {} @layer utilities {
}
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
.app-scrollbar::-webkit-scrollbar { .app-scrollbar::-webkit-scrollbar {
display: none; display: none;
} }
/* Hide scrollbar for IE, Edge and Firefox */ /* Hide scrollbar for IE, Edge and Firefox */
.app-scrollbar { .app-scrollbar {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
div[data-radix-scroll-area-viewport] > div:first-child { div[data-radix-scroll-area-viewport] > div:first-child {
display: block !important; display: block !important;
min-width: 100% !important; min-width: 100% !important;
max-width: 100%; max-width: 100%;
} }
/* hide calendar icon on inputs */ /* hide calendar icon on inputs */
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator { input[type="date"]::-webkit-calendar-picker-indicator {
display: none; display: none;
} }
/* cm */ /* cm */
.cm-editor { .cm-editor {
display: flex; display: flex;
flex: 1; flex: 1;
} }
.animate-fade-in { .animate-fade-in {
animation: fadeInAnimation 200ms ease; animation: fadeInAnimation 200ms ease;
} }
@keyframes fadeInAnimation { @keyframes fadeInAnimation {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
input[readonly]::placeholder, input[disabled]::placeholder { input[readonly]::placeholder,
opacity: 0.1; input[disabled]::placeholder {
opacity: 0.1;
} }
.react-flow__pane, .react-flow__renderer, .react-flow__node, .react-flow__edge { .react-flow__pane,
cursor: inherit !important; .react-flow__renderer,
.drag-handle { .react-flow__node,
cursor: grab; .react-flow__edge {
} cursor: inherit !important;
.drag-handle {
cursor: grab;
}
} }
.react-flow .react-flow__edge path, .react-flow .react-flow__edge path,
.react-flow__connectionline path { .react-flow__connectionline path {
stroke-width: 2; stroke-width: 2;
} }
.mantine-TextInput-wrapper input { .mantine-TextInput-wrapper input {
font-family: inherit; font-family: inherit;
line-height: 1; line-height: 1;
} }
.cm-editor { .cm-editor {
background: transparent; background: transparent;
} }
.cm-editor.cm-focused { .cm-editor.cm-focused {
outline: none; outline: none;
} }
.flex-animate { .flex-animate {
transition: flex-grow 0.2s ease, background-color 0.2s ease; transition: flex-grow 0.2s ease, background-color 0.2s ease;
} }
.flex-initial { .flex-initial {
flex: 0 1 auto; flex: 0 1 auto;
} }
.flex-open { .flex-open {
flex: 1 1 0; flex: 1 1 0;
} }
#bknd-admin, .bknd-admin { #bknd-admin,
/* Chrome, Edge, and Safari */ .bknd-admin {
& *::-webkit-scrollbar { /* Chrome, Edge, and Safari */
@apply w-1; & *::-webkit-scrollbar {
&:horizontal { @apply w-1;
@apply h-px; &:horizontal {
} @apply h-px;
} }
}
& *::-webkit-scrollbar-track { & *::-webkit-scrollbar-track {
@apply bg-transparent w-1; @apply bg-transparent w-1;
} }
& *::-webkit-scrollbar-thumb { & *::-webkit-scrollbar-thumb {
@apply bg-primary/25; @apply bg-primary/25;
} }
} }

25
app/src/ui/main.tsx
View File

@@ -1,26 +1,13 @@
import * as React from "react"; import * as React from "react";
import * as ReactDOM from "react-dom/client"; import * as ReactDOM from "react-dom/client";
import Admin from "./Admin";
import "./main.css"; import "./main.css";
import Admin from "./Admin"; ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
function ClientApp() { <Admin withProvider />
return <Admin withProvider />; </React.StrictMode>
} );
// Render the app
const rootElement = document.getElementById("app")!;
const shouldRender =
!rootElement.innerHTML ||
(rootElement.childElementCount === 1 && rootElement.firstElementChild?.id === "loading");
if (shouldRender) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<ClientApp />
</React.StrictMode>
);
}
// REGISTER ERROR OVERLAY // REGISTER ERROR OVERLAY
if (process.env.NODE_ENV !== "production") { if (process.env.NODE_ENV !== "production") {