dokril/ProxyWarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refactor application structure and simplify implementation

Browse Source
This commit is contained in:
dokril
2026-07-22 00:08:09 +03:00
parent dbba3806cc
commit 90b2eb507c
74 changed files with 11362 additions and 6814 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/app.css
+136 -25
View File
@@ -1,3 +1,4 @@
/* Foundations: tokens, document defaults, and scrollbars. */
:root {
--app-footer-height: 54px;
--app-change-dock-height: 0px;
@@ -5,7 +6,9 @@
--change-row-count: 1;
--app-header-row-height: 0px;
--app-tab-height: 46px;
--app-header-height: calc(var(--app-header-row-height) + var(--app-tab-height));
--app-header-height: calc(
var(--app-header-row-height) + var(--app-tab-height)
);
--motion-fast: 120ms;
--motion-standard: 180ms;
--motion-panel: 220ms;
@@ -24,8 +27,8 @@
--border-strong: #343b49;
--focus-ring: #3b82f6;
font-family:
"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas,
"Liberation Mono", monospace;
"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular,
Consolas, "Liberation Mono", monospace;
color: #e5e7eb;
background: #101216;
font-synthesis: none;
@@ -93,6 +96,7 @@ button:disabled {
opacity: 0.56;
}
/* UI primitives shared by buttons, menus, popovers, tabs, and service rows. */
.ui-button,
.ui-icon-button {
appearance: none;
@@ -357,14 +361,26 @@ button:disabled {
.ui-busy-ring-segment.bottom {
width: var(--busy-ring-long);
height: var(--busy-ring-thickness);
background: linear-gradient(90deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
background: linear-gradient(
90deg,
transparent,
#60a5fa 24%,
#bbf7d0 54%,
transparent
);
}
.ui-busy-ring-segment.right,
.ui-busy-ring-segment.left {
width: var(--busy-ring-thickness);
height: var(--busy-ring-short);
background: linear-gradient(180deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
background: linear-gradient(
180deg,
transparent,
#60a5fa 24%,
#bbf7d0 54%,
transparent
);
}
.ui-busy-ring-segment.top {
@@ -639,14 +655,26 @@ button:disabled {
.ui-service-border-glow-segment.bottom {
width: var(--busy-ring-long);
height: var(--busy-ring-thickness);
background: linear-gradient(90deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
background: linear-gradient(
90deg,
transparent,
#60a5fa 24%,
#bbf7d0 54%,
transparent
);
}
.ui-service-border-glow-segment.right,
.ui-service-border-glow-segment.left {
width: var(--busy-ring-thickness);
height: var(--busy-ring-short);
background: linear-gradient(180deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
background: linear-gradient(
180deg,
transparent,
#60a5fa 24%,
#bbf7d0 54%,
transparent
);
}
.ui-service-border-glow-segment.top {
@@ -758,16 +786,25 @@ button:disabled {
}
}
/* Application shell, tab panels, and shared workspace layout. */
.simple-shell {
display: block;
height: 100vh;
overflow: hidden;
background: #101216;
padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height) + var(--app-admin-prompt-height));
padding: var(--app-header-height) 0
calc(
var(--app-footer-height) + var(--app-change-dock-height) +
var(--app-admin-prompt-height)
);
}
.simple-shell.has-change-dock {
--app-change-dock-height: clamp(60px, calc(20px + (var(--change-row-count) * 26px)), 220px);
--app-change-dock-height: clamp(
60px,
calc(20px + (var(--change-row-count) * 26px)),
220px
);
}
.simple-shell.has-admin-prompt {
@@ -779,7 +816,10 @@ button:disabled {
grid-template-rows: minmax(0, 1fr);
align-content: stretch;
min-height: 0;
height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height) - var(--app-admin-prompt-height));
height: calc(
100vh - var(--app-header-height) - var(--app-footer-height) -
var(--app-change-dock-height) - var(--app-admin-prompt-height)
);
width: 100%;
border: 0;
border-radius: 0;
@@ -1076,6 +1116,7 @@ button:disabled {
text-align: center;
}
/* Read-only summary panel and power state. */
.summary-main {
align-self: stretch;
display: grid;
@@ -1116,9 +1157,14 @@ button:disabled {
width: clamp(180px, 30vw, 268px);
aspect-ratio: 1;
overflow: hidden;
border: 0;
border: 1px solid #3f4b5e;
border-radius: 50%;
background: transparent;
background: radial-gradient(
circle at 48% 38%,
#263244 0%,
#151c28 62%,
#0c1119 100%
);
box-shadow:
0 22px 54px rgba(0, 0, 0, 0.48),
0 0 38px rgba(59, 130, 246, 0.1);
@@ -1154,17 +1200,42 @@ button:disabled {
z-index: 1;
}
.summary-toggle-button img {
display: block;
width: 100%;
height: 100%;
.summary-toggle-face {
display: grid;
place-items: center;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
border: 1px solid #4b596e;
color: #98a4b8;
background: radial-gradient(circle at 48% 38%, #283446 0%, #151c27 72%);
box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.46);
pointer-events: none;
transform: scale(1.18);
user-select: none;
}
.summary-status-control.on .summary-toggle-button {
border-color: #19b985;
background: radial-gradient(
circle at 48% 38%,
#193b36 0%,
#12251f 62%,
#0b1513 100%
);
box-shadow:
0 22px 54px rgba(0, 0, 0, 0.48),
0 0 42px rgba(25, 185, 133, 0.24);
}
.summary-status-control.on .summary-toggle-face {
border-color: #2fd5a0;
color: #5ce6b8;
background: radial-gradient(circle at 48% 38%, #205044 0%, #143029 72%);
box-shadow:
inset 0 0 28px rgba(0, 0, 0, 0.34),
0 0 30px rgba(47, 213, 160, 0.18);
}
.summary-state-label {
color: #e5e7eb;
font-size: clamp(22px, 3.4vw, 34px);
@@ -1173,6 +1244,14 @@ button:disabled {
text-align: center;
}
.network-disclosure {
grid-column: 1 / -1;
margin: 0;
color: #8d99ae;
font-size: 11px;
line-height: 1.45;
}
.summary-state-label.ok {
color: #bbf7d0;
}
@@ -1422,14 +1501,26 @@ button.summary-card:hover {
.finder-border-glow-segment.bottom {
width: var(--busy-ring-long);
height: var(--busy-ring-thickness);
background: linear-gradient(90deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
background: linear-gradient(
90deg,
transparent,
#60a5fa 24%,
#bbf7d0 54%,
transparent
);
}
.finder-border-glow-segment.right,
.finder-border-glow-segment.left {
width: var(--busy-ring-thickness);
height: var(--busy-ring-short);
background: linear-gradient(180deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
background: linear-gradient(
180deg,
transparent,
#60a5fa 24%,
#bbf7d0 54%,
transparent
);
}
.finder-border-glow-segment.top {
@@ -1708,9 +1799,12 @@ button.summary-card:hover {
padding: 10px;
}
/* Proxy endpoint inputs, subscription workspace, and route checks. */
.connection-check {
display: grid;
grid-template-columns: minmax(190px, 1fr) minmax(220px, auto) minmax(132px, auto) auto;
grid-template-columns:
minmax(190px, 1fr) minmax(220px, auto) minmax(132px, auto)
auto;
gap: 10px;
align-items: center;
min-width: 0;
@@ -2081,6 +2175,7 @@ button.summary-card:hover {
font-weight: 800;
}
/* Route-chain visualization and packet states. */
.route-chain {
position: relative;
display: grid;
@@ -2300,6 +2395,7 @@ button.summary-card:hover {
justify-content: flex-start;
}
/* Pending configuration diff and apply controls. */
.changes-dock {
position: fixed;
right: 0;
@@ -2730,6 +2826,7 @@ button.summary-card:hover {
border: 0;
}
/* Activity log dock and administrator prompt. */
.log-dock {
position: fixed;
right: 0;
@@ -2766,7 +2863,9 @@ button.summary-card:hover {
gap: 10px;
align-items: baseline;
padding: 0 8px;
transition: opacity 180ms ease, transform 180ms ease;
transition:
opacity 180ms ease,
transform 180ms ease;
}
.log-current.hidden {
@@ -2880,6 +2979,7 @@ button.summary-card:hover {
color: #b6c2d4;
}
/* Motion and responsive overrides. */
@keyframes finder-border-top {
0% {
left: -116px;
@@ -3014,11 +3114,19 @@ button.summary-card:hover {
@media (max-width: 680px) {
.simple-shell {
padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height) + var(--app-admin-prompt-height));
padding: var(--app-header-height) 0
calc(
var(--app-footer-height) + var(--app-change-dock-height) +
var(--app-admin-prompt-height)
);
}
.simple-shell.has-change-dock {
--app-change-dock-height: clamp(104px, calc(82px + (var(--change-row-count) * 25px)), 260px);
--app-change-dock-height: clamp(
104px,
calc(82px + (var(--change-row-count) * 25px)),
260px
);
}
.simple-shell.has-admin-prompt {
@@ -3026,7 +3134,10 @@ button.summary-card:hover {
}
.simple-panel {
height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height) - var(--app-admin-prompt-height));
height: calc(
100vh - var(--app-header-height) - var(--app-footer-height) -
var(--app-change-dock-height) - var(--app-admin-prompt-height)
);
padding: 12px 12px 16px;
}