austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

refactor: consolidate web app UI foundation

Browse Source
This commit is contained in:
3252a8
2026-05-11 23:25:34 +03:00
parent 9f338c3416
commit 6a367c1dec
47 changed files with 713 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bot/app/web/frontend/jsconfig.json
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$lib/*": ["src/lib/*"],
"$components/*": ["src/lib/components/*"]
}
},
"include": ["src/**/*"]
}
bot/app/web/frontend/src/App.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import { createBillingStore } from "./lib/webapp/stores/billingStore.js";
import { createDevicesStore } from "./lib/webapp/stores/devicesStore.js";
import { createAccountStore } from "./lib/webapp/stores/accountStore.js";
import { Tooltip } from "bits-ui";
import { Tooltip } from "$components/ui/primitives.js";
import BrandMark from "./BrandMark.svelte";
import PreviewBoard from "./PreviewBoard.svelte";
bot/app/web/frontend/src/PreviewBoard.svelte
+2 -2
View File
@@ -19,8 +19,8 @@
Zap,
} from "lucide-svelte";
import Button from "./lib/components/ui/button.svelte";
import Card from "./lib/components/ui/card.svelte";
import Button from "$components/ui/button.svelte";
import Card from "$components/ui/card.svelte";
import BackTitle from "./preview/BackTitle.svelte";
import PhoneFrame from "./preview/PhoneFrame.svelte";
import PreviewMethods from "./preview/PreviewMethods.svelte";
bot/app/web/frontend/src/admin/AdminPanel.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
UsersRound,
} from "lucide-svelte";
import { onMount, setContext } from "svelte";
import { Select } from "bits-ui";
import { Select } from "$components/ui/primitives.js";
import BrandMark from "../BrandMark.svelte";
import AdsSection from "./sections/AdsSection.svelte";
bot/app/web/frontend/src/admin/sections/AdsSection.svelte
+2 -2
View File
@@ -1,8 +1,8 @@
<script>
import { Trash2 } from "lucide-svelte";
import { getContext, onMount } from "svelte";
import Dialog from "../../lib/components/ui/dialog.svelte";
import { Label } from "bits-ui";
import Dialog from "$components/ui/dialog.svelte";
import { Label } from "$components/ui/primitives.js";
export let at;
export let fmtMoney;
bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script>
import { Send, ChevronDown, Check } from "lucide-svelte";
import { getContext } from "svelte";
import { Label, Select } from "bits-ui";
import { Label, Select } from "$components/ui/primitives.js";
export let at;
export let optionLabel;
bot/app/web/frontend/src/admin/sections/PromosSection.svelte
+2 -2
View File
@@ -1,8 +1,8 @@
<script>
import { Trash2 } from "lucide-svelte";
import { getContext, onMount } from "svelte";
import Dialog from "../../lib/components/ui/dialog.svelte";
import { Label } from "bits-ui";
import Dialog from "$components/ui/dialog.svelte";
import { Label } from "$components/ui/primitives.js";
export let at;
export let fmtDateShort;
bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script>
import { ChevronRight, Eye, EyeOff, X } from "lucide-svelte";
import { Accordion, Switch } from "bits-ui";
import { Accordion, Switch } from "$components/ui/primitives.js";
import { getContext, onMount } from "svelte";
export let at;
bot/app/web/frontend/src/admin/sections/StatsSection.svelte
+32 -34
View File
@@ -2,8 +2,14 @@
import { Activity, Radio, Server, TrendingDown, TrendingUp } from "lucide-svelte";
import { getContext, onMount } from "svelte";
import Badge from "../../lib/components/shadcn/badge.svelte";
import * as Card from "../../lib/components/shadcn/card/index.js";
import Badge from "$components/ui/badge.svelte";
import * as Card from "$components/ui/card/index.js";
import {
AdminDashboardGrid,
AdminDashboardStack,
AdminEmptyState,
AdminSectionHeader,
} from "$components/patterns/admin/index.js";
export let at;
export let fmtDate = (value) => value;
@@ -125,13 +131,11 @@
</script>
{#if statsError}
<div class="admin-empty">{at("stats_error", { error: statsError }, "")}</div>
<AdminEmptyState>{at("stats_error", { error: statsError }, "")}</AdminEmptyState>
{:else if showSkeleton}
<div class="admin-cn-dashboard-stack">
<div class="admin-dashboard-section-head">
<h3>{at("stats_section_audience", {}, "")}</h3>
</div>
<div class="admin-cn-dashboard-grid admin-cn-dashboard-grid--3">
<AdminDashboardStack>
<AdminSectionHeader title={at("stats_section_audience", {}, "")} />
<AdminDashboardGrid columns={3}>
{#each Array(3) as _, i (i)}
<Card.Root class="admin-cn-card-skeleton">
<Card.Header>
@@ -144,7 +148,7 @@
</Card.Footer>
</Card.Root>
{/each}
</div>
</AdminDashboardGrid>
<Card.Root class="admin-cn-card-skeleton">
<Card.Header>
<span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span>
@@ -156,9 +160,7 @@
</div>
</Card.Content>
</Card.Root>
<div class="admin-dashboard-section-head">
<h3>{at("stats_recent_payments", {}, "")}</h3>
</div>
<AdminSectionHeader title={at("stats_recent_payments", {}, "")} />
<div class="admin-table-wrap">
<table class="admin-table admin-table-skeleton" aria-hidden="true">
<thead>
@@ -185,15 +187,15 @@
</tbody>
</table>
</div>
</div>
</AdminDashboardStack>
{:else if stats}
<div class="admin-cn-dashboard-stack">
<div class="admin-dashboard-section-head">
<h3>{at("stats_section_audience", {}, "")}</h3>
<small>{at("stats_section_audience_hint", {}, "")}</small>
</div>
<AdminDashboardStack>
<AdminSectionHeader
title={at("stats_section_audience", {}, "")}
description={at("stats_section_audience_hint", {}, "")}
/>
<div class="admin-cn-dashboard-grid admin-cn-dashboard-grid--3">
<AdminDashboardGrid columns={3}>
<Card.Root>
<Card.Header>
<Card.Description>{at("stats_label_users", {}, "")}</Card.Description>
@@ -243,12 +245,12 @@
<div class="admin-cn-card-footer-muted">{at("stats_card_inactive_caption", {}, "")}</div>
</Card.Footer>
</Card.Root>
</div>
</AdminDashboardGrid>
<div class="admin-dashboard-section-head">
<h3>{at("stats_section_revenue", {}, "")}</h3>
<small>{at("stats_section_revenue_hint", {}, "")}</small>
</div>
<AdminSectionHeader
title={at("stats_section_revenue", {}, "")}
description={at("stats_section_revenue_hint", {}, "")}
/>
<Card.Root>
<Card.Header>
@@ -356,14 +358,10 @@
</Card.Content>
</Card.Root>
<div class="admin-dashboard-section-head">
<h3>{at("stats_section_panel", {}, "")}</h3>
{#if panelPayload?.error}
<small>{at("stats_panel_unavailable", {}, "")}</small>
{:else if panelMetrics}
<small>{at("stats_section_panel_hint", {}, "")}</small>
{/if}
</div>
<AdminSectionHeader
title={at("stats_section_panel", {}, "")}
description={panelPayload?.error ? at("stats_panel_unavailable", {}, "") : panelMetrics ? at("stats_section_panel_hint", {}, "") : ""}
/>
{#if panelPayload?.error}
<p class="admin-muted" style="margin:0;">{at("stats_panel_unavailable_detail", {}, "")}</p>
@@ -511,10 +509,10 @@
</tbody>
</table>
{:else}
<div class="admin-card-body"><span class="admin-muted">{at("no_data", {}, "")}</span></div>
<AdminEmptyState tone="card"><span class="admin-muted">{at("no_data", {}, "")}</span></AdminEmptyState>
{/if}
</div>
</Card.Content>
</Card.Root>
</div>
</AdminDashboardStack>
{/if}
bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script>
import { Tabs, Select, Switch, Label } from "bits-ui";
import Dialog from "../../lib/components/ui/dialog.svelte";
import { Tabs, Select, Switch, Label } from "$components/ui/primitives.js";
import Dialog from "$components/ui/dialog.svelte";
import { Check, ChevronDown, Plus, Save, Trash2, X } from "lucide-svelte";
import { getContext } from "svelte";
import { normalizeUuidList } from "../../lib/admin/tariffDraft.js";
bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
+2 -2
View File
@@ -1,6 +1,6 @@
<script>
import { Label, Select, Separator, Tabs } from "bits-ui";
import Dialog from "../../lib/components/ui/dialog.svelte";
import { Label, Select, Separator, Tabs } from "$components/ui/primitives.js";
import Dialog from "$components/ui/dialog.svelte";
import {
CalendarDays, Copy, CreditCard, ExternalLink, Eye, Info, Key,
Mail, Map, MessageSquare, MousePointerClick, QrCode, RefreshCw, Send,
bot/app/web/frontend/src/admin/sections/UsersSection.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script>
import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-svelte";
import { Label, Select } from "bits-ui";
import { Label, Select } from "$components/ui/primitives.js";
import { getContext, onMount } from "svelte";
export let at = (key) => key;
bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardGrid.svelte
+18
View File
@@ -0,0 +1,18 @@
<script>
import { cn } from "$lib/utils.js";
export let columns = 1;
let className = "";
export { className as class };
</script>
<div
class={cn(
"admin-cn-dashboard-grid",
columns === 3 && "admin-cn-dashboard-grid--3",
className,
)}
{...$$restProps}
>
<slot />
</div>
bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardStack.svelte
+10
View File
@@ -0,0 +1,10 @@
<script>
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
</script>
<div class={cn("admin-cn-dashboard-stack", className)} {...$$restProps}>
<slot />
</div>
bot/app/web/frontend/src/lib/components/patterns/admin/AdminEmptyState.svelte
+11
View File
@@ -0,0 +1,11 @@
<script>
import { cn } from "$lib/utils.js";
export let tone = "default";
let className = "";
export { className as class };
</script>
<div class={cn(tone === "card" ? "admin-card-body" : "admin-empty", className)} {...$$restProps}>
<slot />
</div>
bot/app/web/frontend/src/lib/components/patterns/admin/AdminSectionHeader.svelte
+11
View File
@@ -0,0 +1,11 @@
<script>
export let title = "";
export let description = "";
</script>
<div class="admin-dashboard-section-head">
<h3>{title}</h3>
{#if description}
<small>{description}</small>
{/if}
</div>
bot/app/web/frontend/src/lib/components/patterns/admin/index.js
+4
View File
@@ -0,0 +1,4 @@
export { default as AdminDashboardGrid } from "./AdminDashboardGrid.svelte";
export { default as AdminDashboardStack } from "./AdminDashboardStack.svelte";
export { default as AdminEmptyState } from "./AdminEmptyState.svelte";
export { default as AdminSectionHeader } from "./AdminSectionHeader.svelte";
bot/app/web/frontend/src/lib/components/shadcn/badge.svelte → bot/app/web/frontend/src/lib/components/ui/badge.svelte
+4 -2
View File
@@ -1,7 +1,7 @@
<script>
import { cn } from "../../utils.js";
import { cn } from "$lib/utils.js";
/** @type {'default' | 'outline' | 'destructive'} */
/** @type {'default' | 'outline' | 'destructive' | 'success' | 'muted'} */
export let variant = "default";
let className = "";
@@ -14,6 +14,8 @@
"admin-cn-badge",
variant === "outline" && "admin-cn-badge-outline",
variant === "destructive" && "admin-cn-badge-destructive",
variant === "success" && "admin-cn-badge-success",
variant === "muted" && "admin-cn-badge-muted",
className,
)}
{...$$restProps}
bot/app/web/frontend/src/lib/components/ui/button.svelte
+26 -18
View File
@@ -1,5 +1,6 @@
<script>
import { cn } from "../../utils.js";
import { cva } from "class-variance-authority";
import { cn } from "$lib/utils.js";
export let type = "button";
export let variant = "default";
@@ -10,29 +11,36 @@
let className = "";
export { className as class };
const variants = {
default: "btn btn-primary",
secondary: "btn btn-secondary",
outline: "btn btn-outline",
ghost: "btn btn-ghost",
telegram: "btn btn-telegram",
icon: "btn btn-icon",
};
const sizes = {
default: "",
sm: "btn-sm",
lg: "btn-lg",
icon: "btn-square",
};
const buttonVariants = cva("btn", {
variants: {
variant: {
default: "btn-primary",
secondary: "btn-secondary",
outline: "btn-outline",
ghost: "btn-ghost",
telegram: "btn-telegram",
icon: "btn-icon",
},
size: {
default: "",
sm: "btn-sm",
lg: "btn-lg",
icon: "btn-square",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
</script>
{#if href}
<a class={cn(variants[variant], sizes[size], className)} {href} onclick={onclick} {...$$restProps}>
<a class={cn(buttonVariants({ variant, size }), className)} {href} onclick={onclick} {...$$restProps}>
<slot />
</a>
{:else}
<button class={cn(variants[variant], sizes[size], className)} {type} {disabled} onclick={onclick} {...$$restProps}>
<button class={cn(buttonVariants({ variant, size }), className)} {type} {disabled} onclick={onclick} {...$$restProps}>
<slot />
</button>
{/if}
bot/app/web/frontend/src/lib/components/ui/card.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../utils.js";
import { cn } from "$lib/utils.js";
export let active = false;
export let compact = false;
bot/app/web/frontend/src/lib/components/shadcn/card/card-action.svelte → bot/app/web/frontend/src/lib/components/ui/card/card-action.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/card-content.svelte → bot/app/web/frontend/src/lib/components/ui/card/card-content.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/card-description.svelte → bot/app/web/frontend/src/lib/components/ui/card/card-description.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/card-footer.svelte → bot/app/web/frontend/src/lib/components/ui/card/card-footer.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/card-header.svelte → bot/app/web/frontend/src/lib/components/ui/card/card-header.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/card-title.svelte → bot/app/web/frontend/src/lib/components/ui/card/card-title.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/card.svelte → bot/app/web/frontend/src/lib/components/ui/card/card.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../../utils.js";
import { cn } from "$lib/utils.js";
let className = "";
export { className as class };
bot/app/web/frontend/src/lib/components/shadcn/card/index.js → bot/app/web/frontend/src/lib/components/ui/card/index.js
View File
bot/app/web/frontend/src/lib/components/ui/dialog.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script>
import { X } from "lucide-svelte";
import { cn } from "../../utils.js";
import { cn } from "$lib/utils.js";
import Button from "./button.svelte";
export let open = false;
bot/app/web/frontend/src/lib/components/ui/index.js
+7
View File
@@ -0,0 +1,7 @@
export { default as Badge } from "./badge.svelte";
export { default as Button } from "./button.svelte";
export { default as Dialog } from "./dialog.svelte";
export { default as Input } from "./input.svelte";
export { default as LegacyCard } from "./card.svelte";
export * as Card from "./card/index.js";
export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "./primitives.js";
bot/app/web/frontend/src/lib/components/ui/input.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script>
import { cn } from "../../utils.js";
import { cn } from "$lib/utils.js";
export let value = "";
export let type = "text";
bot/app/web/frontend/src/lib/components/ui/primitives.js
+1
View File
@@ -0,0 +1 @@
export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "bits-ui";
bot/app/web/frontend/src/styles.css
+2
View File
@@ -1,6 +1,8 @@
@import "./styles/tailwind.css";
@import "./styles/base.css";
@import "./styles/controls.css";
@import "./styles/dialogs.css";
@import "./styles/components.css";
@import "./styles/webapp.css";
@import "./styles/admin.css";
@import "./styles/admin-controls.css";
bot/app/web/frontend/src/styles/admin.css
-172
View File
@@ -412,178 +412,6 @@
font-size: 12px;
}
/* shadcn-svelte–style primitives (dashboard example), themed for admin — no Tailwind */
.admin-cn-dashboard-stack {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.admin-cn-dashboard-grid {
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
.admin-cn-dashboard-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.admin-cn-card[data-slot="card"] {
display: flex;
flex-direction: column;
min-width: 0;
border-radius: 12px;
border: 1px solid var(--admin-border);
background: var(--admin-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.admin-cn-card-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: flex-start;
gap: 4px 12px;
padding: 14px 16px 0;
}
.admin-cn-card-header > [data-slot="card-description"] {
grid-column: 1;
grid-row: 1;
}
.admin-cn-card-header > [data-slot="card-title"] {
grid-column: 1;
grid-row: 2;
}
.admin-cn-card-header > [data-slot="card-action"] {
grid-column: 2;
grid-row: 1 / span 2;
align-self: flex-start;
justify-self: end;
}
.admin-cn-card-header--lead > [data-slot="card-title"] {
grid-row: 1;
}
.admin-cn-card-header--lead > [data-slot="card-description"] {
grid-row: 2;
}
.admin-cn-card-description {
margin: 0;
font-size: 12px;
font-weight: 500;
color: var(--admin-muted);
}
.admin-cn-card-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--admin-text);
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.admin-cn-card-title--section {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.admin-cn-card-skeleton {
min-height: 132px;
}
@media (min-width: 900px) {
.admin-cn-card-title {
font-size: 1.65rem;
}
}
.admin-cn-card-footer {
padding: 12px 16px 14px;
margin-top: auto;
border-top: 1px solid color-mix(in srgb, var(--admin-border) 70%, transparent);
}
.admin-cn-card-footer--stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-size: 13px;
}
.admin-cn-card-footer-primary {
font-weight: 600;
color: var(--admin-text);
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.admin-cn-card-footer-muted {
color: var(--admin-muted);
font-size: 12px;
line-height: 1.35;
}
.admin-cn-card-content {
padding: 12px 16px 14px;
display: grid;
gap: 12px;
min-width: 0;
}
.admin-cn-card-content--flush {
padding-top: 4px;
}
.admin-cn-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
border: 1px solid var(--admin-border);
background: color-mix(in srgb, var(--admin-surface-2) 88%, var(--admin-bg));
color: var(--admin-text);
}
.admin-cn-badge :global(svg) {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.admin-cn-badge-outline {
background: transparent;
border-color: var(--admin-border);
color: var(--admin-muted);
}
.admin-cn-badge-destructive {
background: color-mix(in srgb, #ff6b6b 16%, var(--admin-surface));
border-color: color-mix(in srgb, #ff6b6b 35%, var(--admin-border));
color: color-mix(in srgb, #ff6b6b 92%, var(--admin-text));
}
.admin-dashboard-section {
margin-top: 20px;
}
bot/app/web/frontend/src/styles/components.css
+182
View File
@@ -0,0 +1,182 @@
/* Shared shadcn-svelte style primitives, themed for the local admin palette. */
.admin-cn-dashboard-stack {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.admin-cn-dashboard-grid {
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
.admin-cn-dashboard-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.admin-cn-card[data-slot="card"] {
display: flex;
flex-direction: column;
min-width: 0;
border-radius: 12px;
border: 1px solid var(--admin-border);
background: var(--admin-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.admin-cn-card-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: flex-start;
gap: 4px 12px;
padding: 14px 16px 0;
}
.admin-cn-card-header > [data-slot="card-description"] {
grid-column: 1;
grid-row: 1;
}
.admin-cn-card-header > [data-slot="card-title"] {
grid-column: 1;
grid-row: 2;
}
.admin-cn-card-header > [data-slot="card-action"] {
grid-column: 2;
grid-row: 1 / span 2;
align-self: flex-start;
justify-self: end;
}
.admin-cn-card-header--lead > [data-slot="card-title"] {
grid-row: 1;
}
.admin-cn-card-header--lead > [data-slot="card-description"] {
grid-row: 2;
}
.admin-cn-card-description {
margin: 0;
font-size: 12px;
font-weight: 500;
color: var(--admin-muted);
}
.admin-cn-card-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--admin-text);
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.admin-cn-card-title--section {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.admin-cn-card-skeleton {
min-height: 132px;
}
@media (min-width: 900px) {
.admin-cn-card-title {
font-size: 1.65rem;
}
}
.admin-cn-card-footer {
padding: 12px 16px 14px;
margin-top: auto;
border-top: 1px solid color-mix(in srgb, var(--admin-border) 70%, transparent);
}
.admin-cn-card-footer--stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-size: 13px;
}
.admin-cn-card-footer-primary {
font-weight: 600;
color: var(--admin-text);
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.admin-cn-card-footer-muted {
color: var(--admin-muted);
font-size: 12px;
line-height: 1.35;
}
.admin-cn-card-content {
padding: 12px 16px 14px;
display: grid;
gap: 12px;
min-width: 0;
}
.admin-cn-card-content--flush {
padding-top: 4px;
}
.admin-cn-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
border: 1px solid var(--admin-border);
background: color-mix(in srgb, var(--admin-surface-2) 88%, var(--admin-bg));
color: var(--admin-text);
}
.admin-cn-badge :global(svg) {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.admin-cn-badge-outline {
background: transparent;
border-color: var(--admin-border);
color: var(--admin-muted);
}
.admin-cn-badge-destructive {
background: color-mix(in srgb, var(--danger) 16%, var(--admin-surface));
border-color: color-mix(in srgb, var(--danger) 35%, var(--admin-border));
color: color-mix(in srgb, var(--danger) 92%, var(--admin-text));
}
.admin-cn-badge-success {
background: color-mix(in srgb, var(--accent) 14%, var(--admin-surface));
border-color: color-mix(in srgb, var(--accent) 32%, var(--admin-border));
color: color-mix(in srgb, var(--accent) 88%, var(--admin-text));
}
.admin-cn-badge-muted {
background: color-mix(in srgb, var(--admin-surface-2) 70%, var(--admin-bg));
color: var(--admin-muted);
}
bot/app/web/frontend/src/styles/tailwind.css
+31
View File
@@ -0,0 +1,31 @@
@layer theme, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@source "../**/*.{svelte,js}";
@theme {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
--color-background: var(--bg);
--color-foreground: var(--text);
--color-muted: var(--muted);
--color-dim: var(--dim);
--color-border: var(--border);
--color-ring: var(--admin-ring);
--color-accent: var(--accent);
--color-destructive: var(--danger);
--color-admin-bg: var(--admin-bg);
--color-admin-surface: var(--admin-surface);
--color-admin-surface-2: var(--admin-surface-2);
--color-admin-elev: var(--admin-elev);
--color-admin-border: var(--admin-border);
--color-admin-text: var(--admin-text);
--color-admin-muted: var(--admin-muted);
--color-admin-dim: var(--admin-dim);
--radius-card: 12px;
--radius-control: var(--radius);
}
bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
+5 -5
View File
@@ -1,11 +1,11 @@
<script>
import { ArrowLeft, CheckCircle2, CircleX, LockKeyhole, RefreshCw, TriangleAlert } from "lucide-svelte";
import { Tooltip } from "bits-ui";
import { Tooltip } from "$components/ui/primitives.js";
import Button from "../lib/components/ui/button.svelte";
import Card from "../lib/components/ui/card.svelte";
import Dialog from "../lib/components/ui/dialog.svelte";
import Input from "../lib/components/ui/input.svelte";
import Button from "$components/ui/button.svelte";
import Card from "$components/ui/card.svelte";
import Dialog from "$components/ui/dialog.svelte";
import Input from "$components/ui/input.svelte";
import {
planKey as planKeyFn,
planDisplayTitle as planDisplayTitleFn,
bot/app/web/frontend/src/webapp/TariffDialogs.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script>
import { ArrowRight, CheckCircle2, LockKeyhole } from "lucide-svelte";
import Button from "../lib/components/ui/button.svelte";
import Button from "$components/ui/button.svelte";
import {
planKey as planKeyFn,
planUnitHint as planUnitHintFn,
@@ -12,8 +12,8 @@
import { formatCompactNumber } from "../lib/webapp/formatters.js";
import { Bitcoin, CreditCard } from "lucide-svelte";
import Card from "../lib/components/ui/card.svelte";
import Dialog from "../lib/components/ui/dialog.svelte";
import Card from "$components/ui/card.svelte";
import Dialog from "$components/ui/dialog.svelte";
export let applyTariffChange = () => {};
export let changeConfirmOpen = false;
bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
+4 -4
View File
@@ -1,11 +1,11 @@
<script>
import { ArrowLeft, Mail, RefreshCw, Send, TriangleAlert } from "lucide-svelte";
import { Tooltip } from "bits-ui";
import { Tooltip } from "$components/ui/primitives.js";
import Button from "../../lib/components/ui/button.svelte";
import Button from "$components/ui/button.svelte";
import BrandMark from "../../BrandMark.svelte";
import Card from "../../lib/components/ui/card.svelte";
import Input from "../../lib/components/ui/input.svelte";
import Card from "$components/ui/card.svelte";
import Input from "$components/ui/input.svelte";
export let screen;
export let CFG;
bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
+2 -2
View File
@@ -1,8 +1,8 @@
<script>
import { CircleX, Plus, RefreshCw, Smartphone } from "lucide-svelte";
import Button from "../../lib/components/ui/button.svelte";
import Card from "../../lib/components/ui/card.svelte";
import Button from "$components/ui/button.svelte";
import Card from "$components/ui/card.svelte";
import { devicesCountLabel, devicesLimitLabel, devicesPercent } from "../../lib/webapp/devicesLabels.js";
export let devicesBusy = false;
bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
+2 -2
View File
@@ -2,8 +2,8 @@
import { CheckCircle2, ChevronsUpDown, CircleX, Database, Download, Gift, RefreshCw } from "lucide-svelte";
import BrandMark from "../../BrandMark.svelte";
import Button from "../../lib/components/ui/button.svelte";
import Card from "../../lib/components/ui/card.svelte";
import Button from "$components/ui/button.svelte";
import Card from "$components/ui/card.svelte";
import { formatTrafficGb } from "../../lib/webapp/formatters.js";
import {
trafficPercent as trafficPercentFn,
bot/app/web/frontend/src/webapp/screens/InviteScreen.svelte
+4 -4
View File
@@ -1,10 +1,10 @@
<script>
import { Copy, Gift, Ticket, TriangleAlert } from "lucide-svelte";
import { Tooltip } from "bits-ui";
import { Tooltip } from "$components/ui/primitives.js";
import Button from "../../lib/components/ui/button.svelte";
import Card from "../../lib/components/ui/card.svelte";
import Input from "../../lib/components/ui/input.svelte";
import Button from "$components/ui/button.svelte";
import Card from "$components/ui/card.svelte";
import Input from "$components/ui/input.svelte";
export let referral = {};
export let referralBonusDetails = [];
bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
+3 -3
View File
@@ -1,9 +1,9 @@
<script>
import { ArrowRight, Check, CheckCircle2, ChevronsUpDown, FileText, Globe2, Mail, Send, Shield, UserRound } from "lucide-svelte";
import { Select } from "bits-ui";
import { Select } from "$components/ui/primitives.js";
import Button from "../../lib/components/ui/button.svelte";
import Card from "../../lib/components/ui/card.svelte";
import Button from "$components/ui/button.svelte";
import Card from "$components/ui/card.svelte";
export let currentLang = "ru";
export let currentLanguageOption = null;
bot/app/web/frontend/vite.config.mjs
+8 -1
View File
@@ -1,6 +1,7 @@
import path from "node:path";
import { fileURLToPath } from "node:url";
import tailwindcss from "@tailwindcss/vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { defineConfig } from "vite";
@@ -8,7 +9,13 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
const templateDir = path.resolve(__dirname, "../templates");
export default defineConfig({
plugins: [svelte()],
resolve: {
alias: {
$lib: path.resolve(__dirname, "src/lib"),
$components: path.resolve(__dirname, "src/lib/components"),
},
},
plugins: [tailwindcss(), svelte()],
build: {
outDir: templateDir,
emptyOutDir: false,