add initial crates and apps

This commit is contained in:
Evan Carroll 2026-01-12 15:34:40 -06:00
parent 5c87ba3519
commit 1ca300098f
113 changed files with 28169 additions and 0 deletions

View file

@ -0,0 +1,90 @@
[package]
name = "chattyness-app"
version.workspace = true
edition.workspace = true
[lib]
crate-type = ["cdylib", "rlib"]
[[bin]]
name = "chattyness-app"
path = "src/main.rs"
[dependencies]
chattyness-admin-ui.workspace = true
chattyness-user-ui.workspace = true
chattyness-db.workspace = true
chattyness-error.workspace = true
leptos.workspace = true
leptos_meta.workspace = true
leptos_router.workspace = true
leptos_axum = { workspace = true, optional = true }
axum = { workspace = true, optional = true }
tower = { workspace = true, optional = true }
tower-http = { workspace = true, optional = true }
tower-sessions = { workspace = true, optional = true }
tower-sessions-sqlx-store = { workspace = true, optional = true }
sqlx = { workspace = true, optional = true }
clap = { workspace = true, optional = true }
tokio = { workspace = true, optional = true }
dotenvy = { workspace = true, optional = true }
tracing = { workspace = true, optional = true }
tracing-subscriber = { workspace = true, optional = true }
serde.workspace = true
uuid.workspace = true
# WASM dependencies
console_error_panic_hook = { workspace = true, optional = true }
wasm-bindgen = { workspace = true, optional = true }
[features]
default = ["ssr"]
ssr = [
"leptos/ssr",
"leptos_axum",
"axum",
"tower",
"tower-http",
"tower-sessions",
"tower-sessions-sqlx-store",
"sqlx",
"clap",
"tokio",
"dotenvy",
"tracing",
"tracing-subscriber",
"chattyness-admin-ui/ssr",
"chattyness-user-ui/ssr",
"chattyness-db/ssr",
"chattyness-error/ssr",
]
# Unified hydrate feature - admin routes are lazy-loaded via #[lazy] macro
hydrate = [
"leptos/hydrate",
"chattyness-user-ui/hydrate",
"chattyness-admin-ui/hydrate",
"console_error_panic_hook",
"wasm-bindgen",
]
[package.metadata.leptos]
# Project name used for output artifacts
output-name = "chattyness-app"
# Site configuration (paths relative to workspace root)
site-root = "target/site"
site-pkg-dir = "pkg"
site-addr = "127.0.0.1:3000"
reload-port = 3003
# Tailwind CSS (path relative to this Cargo.toml)
tailwind-input-file = "style/tailwind.css"
# Build settings
bin-features = ["ssr"]
bin-default-features = false
lib-features = ["hydrate"]
lib-default-features = false
# Environment
env = "DEV"

View file

@ -0,0 +1 @@
../../../target/site-owner/static/chattyness-owner.css

View file

View file

@ -0,0 +1,326 @@
//! Combined application for lazy-loading admin interface.
//!
//! This module provides a unified app that serves both user and admin interfaces,
//! with the admin interface lazy-loaded to reduce initial WASM bundle size.
use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
use leptos_router::{
components::{Route, Router, Routes},
ParamSegment, StaticSegment,
};
// Re-export user pages for inline route definitions
use chattyness_user_ui::pages::{
HomePage, LoginPage, PasswordResetPage, RealmPage, SignupPage,
};
// Lazy-load admin pages to split WASM bundle
// Each lazy function includes the admin CSS stylesheet for on-demand loading
#[lazy]
fn lazy_dashboard() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="dashboard" base_path="/admin">
<chattyness_admin_ui::pages::DashboardPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_login() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::LoginLayout>
<chattyness_admin_ui::pages::LoginPage />
</chattyness_admin_ui::components::LoginLayout>
}.into_any()
}
#[lazy]
fn lazy_config() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="config" base_path="/admin">
<chattyness_admin_ui::pages::ConfigPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_users() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="users" base_path="/admin">
<chattyness_admin_ui::pages::UsersPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_user_new() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="users" base_path="/admin">
<chattyness_admin_ui::pages::UserNewPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_user_detail() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="users" base_path="/admin">
<chattyness_admin_ui::pages::UserDetailPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_staff() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="staff" base_path="/admin">
<chattyness_admin_ui::pages::StaffPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_realms() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="realms" base_path="/admin">
<chattyness_admin_ui::pages::RealmsPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_realm_new() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="realms" base_path="/admin">
<chattyness_admin_ui::pages::RealmNewPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_realm_detail() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="realms" base_path="/admin">
<chattyness_admin_ui::pages::RealmDetailPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_scenes() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="scenes" base_path="/admin">
<chattyness_admin_ui::pages::ScenesPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_scene_new() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="scenes_new" base_path="/admin">
<chattyness_admin_ui::pages::SceneNewPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
#[lazy]
fn lazy_scene_detail() -> AnyView {
view! {
<Stylesheet href="/static/css/admin.css"/>
<chattyness_admin_ui::components::AuthenticatedLayout current_page="scenes" base_path="/admin">
<chattyness_admin_ui::pages::SceneDetailPage />
</chattyness_admin_ui::components::AuthenticatedLayout>
}.into_any()
}
/// Admin loading fallback - shown on both server (SSR) and client until lazy content loads.
#[component]
fn AdminLoading() -> impl IntoView {
view! {
<div class="admin-loading">
<div class="loading-spinner"></div>
<p>"Loading admin panel..."</p>
</div>
}
}
/// Macro to generate lazy admin route view functions.
/// Both SSR and client render the same Suspense structure initially.
/// On SSR: Suspense child is empty, so fallback always shows.
/// On client: Suspense child is the lazy content, which loads after hydration.
macro_rules! lazy_admin_view {
($name:ident, $lazy_fn:ident) => {
fn $name() -> impl IntoView {
view! {
<Suspense fallback=AdminLoading>
{
// On server: empty content, Suspense shows fallback
// On client: lazy content loads after hydration
#[cfg(feature = "ssr")]
{ () }
#[cfg(feature = "hydrate")]
{ Suspend::new(async { $lazy_fn().await }) }
}
</Suspense>
}
}
};
}
// Generate view functions for each admin route
lazy_admin_view!(admin_login_view, lazy_login);
lazy_admin_view!(admin_dashboard_view, lazy_dashboard);
lazy_admin_view!(admin_config_view, lazy_config);
lazy_admin_view!(admin_users_view, lazy_users);
lazy_admin_view!(admin_user_new_view, lazy_user_new);
lazy_admin_view!(admin_user_detail_view, lazy_user_detail);
lazy_admin_view!(admin_staff_view, lazy_staff);
lazy_admin_view!(admin_realms_view, lazy_realms);
lazy_admin_view!(admin_realm_new_view, lazy_realm_new);
lazy_admin_view!(admin_realm_detail_view, lazy_realm_detail);
lazy_admin_view!(admin_scenes_view, lazy_scenes);
lazy_admin_view!(admin_scene_new_view, lazy_scene_new);
lazy_admin_view!(admin_scene_detail_view, lazy_scene_detail);
/// Combined app state for unified SSR.
#[cfg(feature = "ssr")]
#[derive(Clone)]
pub struct CombinedAppState {
pub pool: sqlx::PgPool,
pub leptos_options: LeptosOptions,
}
#[cfg(feature = "ssr")]
impl axum::extract::FromRef<CombinedAppState> for LeptosOptions {
fn from_ref(state: &CombinedAppState) -> Self {
state.leptos_options.clone()
}
}
#[cfg(feature = "ssr")]
impl axum::extract::FromRef<CombinedAppState> for sqlx::PgPool {
fn from_ref(state: &CombinedAppState) -> Self {
state.pool.clone()
}
}
/// Combined shell for SSR.
pub fn combined_shell(options: LeptosOptions) -> impl IntoView {
view! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<AutoReload options=options.clone() />
<HydrationScripts options />
<MetaTags />
</head>
<body class="bg-gray-900 text-white antialiased">
<CombinedApp />
</body>
</html>
}
}
/// Combined application component with lazy-loaded admin routes.
///
/// User routes are eagerly loaded, admin routes are lazy-loaded via LocalResource
/// to ensure consistent SSR/hydration (server renders fallback, client loads lazy content).
#[component]
pub fn CombinedApp() -> impl IntoView {
provide_meta_context();
view! {
<Stylesheet id="leptos" href="/static/chattyness-app.css" />
<Title text="Chattyness - Virtual Community Spaces" />
<Router>
<main>
<Routes fallback=|| "Page not found.".into_view()>
// ==========================================
// User routes (eager loading)
// ==========================================
<Route path=StaticSegment("") view=LoginPage />
<Route path=StaticSegment("signup") view=SignupPage />
<Route path=StaticSegment("home") view=HomePage />
<Route path=StaticSegment("password-reset") view=PasswordResetPage />
<Route path=(StaticSegment("realms"), ParamSegment("slug")) view=RealmPage />
// ==========================================
// Admin routes (lazy loading)
// Server renders fallback, client loads lazy WASM after hydration.
// ==========================================
<Route
path=(StaticSegment("admin"), StaticSegment("login"))
view=admin_login_view
/>
<Route
path=StaticSegment("admin")
view=admin_dashboard_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("config"))
view=admin_config_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("users"))
view=admin_users_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("users"), StaticSegment("new"))
view=admin_user_new_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("users"), ParamSegment("user_id"))
view=admin_user_detail_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("staff"))
view=admin_staff_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("realms"))
view=admin_realms_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("realms"), StaticSegment("new"))
view=admin_realm_new_view
/>
// Scene routes (must come before realm detail to match first)
<Route
path=(StaticSegment("admin"), StaticSegment("realms"), ParamSegment("slug"), StaticSegment("scenes"))
view=admin_scenes_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("realms"), ParamSegment("slug"), StaticSegment("scenes"), StaticSegment("new"))
view=admin_scene_new_view
/>
<Route
path=(StaticSegment("admin"), StaticSegment("realms"), ParamSegment("slug"), StaticSegment("scenes"), ParamSegment("scene_id"))
view=admin_scene_detail_view
/>
// Realm detail (must come after more specific routes)
<Route
path=(StaticSegment("admin"), StaticSegment("realms"), ParamSegment("slug"))
view=admin_realm_detail_view
/>
</Routes>
</main>
</Router>
}
}

View file

@ -0,0 +1,20 @@
#![recursion_limit = "256"]
//! App WASM hydration entry point.
//!
//! This provides unified hydration for the combined app, with lazy-loaded
//! admin routes for optimal bundle size.
mod app;
pub use app::{combined_shell, CombinedApp};
#[cfg(feature = "ssr")]
pub use app::CombinedAppState;
#[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
console_error_panic_hook::set_once();
// Use hydrate_lazy to enable lazy component loading
leptos::mount::hydrate_lazy(CombinedApp);
}

View file

@ -0,0 +1,196 @@
#![recursion_limit = "256"]
//! App server entry point.
//!
//! This server runs on port 3000 and serves both user and admin interfaces
//! using a unified CombinedApp with lazy-loaded admin routes.
//!
//! Both interfaces share the same `chattyness_app` database role with RLS.
#[cfg(feature = "ssr")]
mod server {
use axum::Router;
use clap::Parser;
use leptos::prelude::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use sqlx::postgres::PgPoolOptions;
use std::net::SocketAddr;
use std::path::Path;
use std::sync::Arc;
use tower_http::services::ServeDir;
use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
use chattyness_app::{combined_shell, CombinedApp, CombinedAppState};
use chattyness_user_ui::api::WebSocketState;
/// CLI arguments.
#[derive(Parser)]
#[command(name = "chattyness-app")]
#[command(about = "Chattyness App Server (User + Admin UI)")]
struct Args {
/// Host to bind to
#[arg(long, env = "HOST", default_value = "127.0.0.1")]
host: String,
/// Port to bind to
#[arg(long, env = "APP_PORT", default_value = "3000")]
port: u16,
/// Database password for chattyness_app role
#[arg(long, env = "DB_CHATTYNESS_APP")]
db_password: String,
/// Use secure cookies
#[arg(long, env = "SECURE_COOKIES", default_value = "false")]
secure_cookies: bool,
}
pub async fn main() -> Result<(), Box<dyn std::error::Error>> {
// Load environment variables
dotenvy::dotenv().ok();
// Initialize logging
tracing_subscriber::registry()
.with(
tracing_subscriber::EnvFilter::try_from_default_env()
.unwrap_or_else(|_| "chattyness_app=debug,chattyness_user_ui=debug,tower_http=debug".into()),
)
.with(tracing_subscriber::fmt::layer())
.init();
// Parse arguments
let args = Args::parse();
tracing::info!("Starting Chattyness App Server");
// Create database pool for app access (fixed connection string, RLS-constrained)
let database_url = format!(
"postgres://chattyness_app:{}@localhost/chattyness",
args.db_password
);
let pool = PgPoolOptions::new()
.max_connections(20)
.connect(&database_url)
.await?;
tracing::info!("Connected to database (app role with RLS)");
// Configure Leptos
let cargo_toml = concat!(env!("CARGO_MANIFEST_DIR"), "/Cargo.toml");
let conf = get_configuration(Some(cargo_toml)).unwrap();
let leptos_options = conf.leptos_options;
let addr = SocketAddr::new(args.host.parse()?, args.port);
// Create session layer (shared between user and admin interfaces)
let session_layer =
chattyness_user_ui::auth::session::create_session_layer(pool.clone(), args.secure_cookies)
.await;
// Create combined app state
let app_state = CombinedAppState {
pool: pool.clone(),
leptos_options: leptos_options.clone(),
};
// Generate routes for the combined app
let routes = generate_route_list(CombinedApp);
// Get site paths from Leptos config
let manifest_dir = Path::new(env!("CARGO_MANIFEST_DIR"));
let workspace_root = manifest_dir.parent().unwrap().parent().unwrap();
let site_root = workspace_root.join(&*leptos_options.site_root);
// site-pkg-dir is now "pkg" to match wasm_split's hardcoded /pkg/ imports
let pkg_dir = site_root.join("pkg");
let public_dir = manifest_dir.join("public");
// --split mode puts WASM/JS in target/site-app/pkg/ instead of configured location
let split_pkg_dir = workspace_root.join("target/site-app/pkg");
tracing::info!("Serving pkg files from: {}", pkg_dir.display());
tracing::info!("Serving split WASM from: {}", split_pkg_dir.display());
// Shared assets directory for uploaded files (realm images, etc.)
let assets_dir = Path::new("/srv/chattyness/assets");
// Create WebSocket state for real-time channel presence
let ws_state = Arc::new(WebSocketState::new());
// Create state types for each API router
let user_api_state = chattyness_user_ui::AppState {
pool: pool.clone(),
leptos_options: leptos_options.clone(),
ws_state: ws_state.clone(),
};
let admin_api_state = chattyness_admin_ui::AdminAppState {
pool: pool.clone(),
leptos_options: leptos_options.clone(),
};
// Build nested API routers with their own state
let user_api_router = chattyness_user_ui::api::api_router()
.with_state(user_api_state);
let admin_api_router = chattyness_admin_ui::api::admin_api_router()
.with_state(admin_api_state);
// Create RLS layer for row-level security
let rls_layer = chattyness_user_ui::auth::RlsLayer::new(pool.clone());
// Build the unified app
// Layer order (outer to inner): session -> rls -> router
// This ensures session is available when RLS middleware runs
let app = Router::new()
// API routes (with their own state)
.nest("/api", user_api_router)
.nest("/api/admin", admin_api_router)
// Leptos routes with unified shell
.leptos_routes_with_context(
&app_state,
routes,
{
let pool = pool.clone();
move || {
provide_context(pool.clone());
}
},
{
let leptos_options = leptos_options.clone();
move || combined_shell(leptos_options.clone())
},
)
.with_state(app_state)
// Serve pkg files at /pkg (wasm_split hardcodes /pkg/ imports)
// Fallback to split_pkg_dir for --split mode output
.nest_service("/pkg", ServeDir::new(&pkg_dir).fallback(ServeDir::new(&split_pkg_dir)))
// Uploaded assets (realm backgrounds, etc.) - must come before /static
.nest_service("/static/realm", ServeDir::new(assets_dir.join("realm")))
// Server-level assets (avatar props, etc.)
.nest_service("/static/server", ServeDir::new(assets_dir.join("server")))
// Also serve at /static for backwards compatibility
.nest_service("/static", ServeDir::new(&pkg_dir).fallback(ServeDir::new(&split_pkg_dir)))
.nest_service("/favicon.ico", tower_http::services::ServeFile::new(public_dir.join("favicon.ico")))
// Serve admin CSS at standardized path (symlinked from owner build)
.nest_service("/static/css/admin.css", tower_http::services::ServeFile::new(public_dir.join("admin.css")))
// Apply middleware layers (order: session outer, rls inner)
.layer(rls_layer)
.layer(session_layer);
tracing::info!("Listening on http://{}", addr);
tracing::info!(" User UI: http://{}/", addr);
tracing::info!(" Admin UI: http://{}/admin", addr);
// Start server
let listener = tokio::net::TcpListener::bind(&addr).await?;
axum::serve(listener, app.into_make_service()).await?;
Ok(())
}
}
#[cfg(feature = "ssr")]
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
server::main().await
}
#[cfg(not(feature = "ssr"))]
fn main() {
// This is for WASM build, which is handled by lib.rs
}

View file

@ -0,0 +1,78 @@
@import "tailwindcss";
/* Source paths (relative to this CSS file's location) */
/* Only scan user-ui sources - admin-ui CSS is lazy-loaded from /admin.css */
@source "../src/**/*.rs";
@source "../public/**/*.html";
@source "../../../crates/chattyness-user-ui/src/**/*.rs";
@source not "../../../target";
/* Custom theme extensions */
@theme {
--color-realm-50: #f0f9ff;
--color-realm-100: #e0f2fe;
--color-realm-200: #bae6fd;
--color-realm-300: #7dd3fc;
--color-realm-400: #38bdf8;
--color-realm-500: #0ea5e9;
--color-realm-600: #0284c7;
--color-realm-700: #0369a1;
--color-realm-800: #075985;
--color-realm-900: #0c4a6e;
--color-realm-950: #082f49;
}
/* User-specific styles only */
@import "./user.css";
/* Base styles for accessibility */
@layer base {
/* Focus visible for keyboard navigation */
:focus-visible {
@apply outline-2 outline-offset-2 outline-blue-500;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
/* Component styles used by user-ui */
@layer components {
/* Form input base styles */
.input-base {
@apply w-full px-4 py-3 bg-gray-700 border border-gray-600
rounded-lg text-white placeholder-gray-400
focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-colors duration-200;
}
/* Button base styles */
.btn-primary {
@apply px-6 py-3 bg-blue-600 hover:bg-blue-700
disabled:bg-gray-600 disabled:cursor-not-allowed
text-white font-semibold rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800
transition-colors duration-200;
}
.btn-secondary {
@apply px-6 py-3 bg-gray-600 hover:bg-gray-500
disabled:bg-gray-700 disabled:cursor-not-allowed
text-white font-semibold rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-800
transition-colors duration-200;
}
/* Error message styles */
.error-message {
@apply p-4 bg-red-900/50 border border-red-500 rounded-lg text-red-200;
}
}

View file

@ -0,0 +1,8 @@
/**
* User Interface Styles
*
* CSS custom properties and component styles for the user-facing interface.
* This file is imported after admin.css to allow user-specific overrides.
*/
/* User-specific styles will be added here as needed */

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,86 @@
[package]
name = "chattyness-owner"
version.workspace = true
edition.workspace = true
[lib]
crate-type = ["cdylib", "rlib"]
[[bin]]
name = "chattyness-owner"
path = "src/main.rs"
[dependencies]
chattyness-admin-ui.workspace = true
chattyness-db.workspace = true
chattyness-error.workspace = true
leptos.workspace = true
leptos_meta.workspace = true
leptos_router.workspace = true
leptos_axum = { workspace = true, optional = true }
axum = { workspace = true, optional = true }
tower = { workspace = true, optional = true }
tower-http = { workspace = true, optional = true }
tower-sessions = { workspace = true, optional = true }
tower-sessions-sqlx-store = { workspace = true, optional = true }
sqlx = { workspace = true, optional = true }
clap = { workspace = true, optional = true }
tokio = { workspace = true, optional = true }
dotenvy = { workspace = true, optional = true }
tracing = { workspace = true, optional = true }
tracing-subscriber = { workspace = true, optional = true }
serde.workspace = true
uuid.workspace = true
# WASM dependencies
console_error_panic_hook = { workspace = true, optional = true }
wasm-bindgen = { workspace = true, optional = true }
[features]
default = ["ssr"]
ssr = [
"leptos/ssr",
"leptos_axum",
"axum",
"tower",
"tower-http",
"tower-sessions",
"tower-sessions-sqlx-store",
"sqlx",
"clap",
"tokio",
"dotenvy",
"tracing",
"tracing-subscriber",
"chattyness-admin-ui/ssr",
"chattyness-db/ssr",
"chattyness-error/ssr",
]
hydrate = [
"leptos/hydrate",
"chattyness-admin-ui/hydrate",
"console_error_panic_hook",
"wasm-bindgen",
]
[package.metadata.leptos]
# Project name used for output artifacts
output-name = "chattyness-owner"
# Site configuration (paths relative to workspace root)
site-root = "target/site-owner"
site-pkg-dir = "static"
site-addr = "127.0.0.1:3001"
reload-port = 3002
# Tailwind CSS (path relative to this Cargo.toml)
tailwind-input-file = "style/tailwind.css"
# Build settings
bin-features = ["ssr"]
bin-default-features = false
lib-features = ["hydrate"]
lib-default-features = false
# Environment
env = "DEV"

View file

View file

@ -0,0 +1,9 @@
#![recursion_limit = "256"]
//! Owner app WASM hydration entry point.
#[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
console_error_panic_hook::set_once();
leptos::mount::hydrate_body(chattyness_admin_ui::AdminApp);
}

View file

@ -0,0 +1,151 @@
#![recursion_limit = "256"]
//! Owner app server entry point.
//!
//! This server runs on port 3001 and serves the admin UI with the
//! `chattyness_owner` database role (no RLS restrictions).
#[cfg(feature = "ssr")]
mod server {
use axum::{response::Redirect, routing::get, Router};
use clap::Parser;
use leptos::prelude::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use sqlx::postgres::PgPoolOptions;
use std::net::SocketAddr;
use std::path::Path;
use tower_http::services::ServeDir;
use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
use chattyness_admin_ui::{admin_shell, AdminApp, AdminAppState};
/// CLI arguments.
#[derive(Parser)]
#[command(name = "chattyness-owner")]
#[command(about = "Chattyness Owner Admin Server")]
struct Args {
/// Host to bind to
#[arg(long, env = "HOST", default_value = "127.0.0.1")]
host: String,
/// Port to bind to
#[arg(long, env = "OWNER_PORT", default_value = "3001")]
port: u16,
/// Database password for chattyness_owner role
#[arg(long, env = "DB_CHATTYNESS_OWNER")]
db_password: String,
/// Use secure cookies
#[arg(long, env = "SECURE_COOKIES", default_value = "false")]
secure_cookies: bool,
}
pub async fn main() -> Result<(), Box<dyn std::error::Error>> {
// Load environment variables
dotenvy::dotenv().ok();
// Initialize logging
tracing_subscriber::registry()
.with(
tracing_subscriber::EnvFilter::try_from_default_env()
.unwrap_or_else(|_| "chattyness_owner=debug,tower_http=debug".into()),
)
.with(tracing_subscriber::fmt::layer())
.init();
// Parse arguments
let args = Args::parse();
tracing::info!("Starting Chattyness Owner Server");
// Create database pool for owner access (fixed connection string)
let database_url = format!(
"postgres://chattyness_owner:{}@localhost/chattyness",
args.db_password
);
let pool = PgPoolOptions::new()
.max_connections(10)
.connect(&database_url)
.await?;
tracing::info!("Connected to database (owner role)");
// Configure Leptos
let cargo_toml = concat!(env!("CARGO_MANIFEST_DIR"), "/Cargo.toml");
let conf = get_configuration(Some(cargo_toml)).unwrap();
let leptos_options = conf.leptos_options;
let addr = SocketAddr::new(args.host.parse()?, args.port);
// Create session layer
let session_layer =
chattyness_admin_ui::auth::create_admin_session_layer(pool.clone(), args.secure_cookies)
.await;
// Create app state
let app_state = AdminAppState {
pool: pool.clone(),
leptos_options: leptos_options.clone(),
};
// Generate routes
let routes = generate_route_list(AdminApp);
// Get site paths from Leptos config
// site_root is relative to workspace root, make it absolute
let manifest_dir = Path::new(env!("CARGO_MANIFEST_DIR"));
let workspace_root = manifest_dir.parent().unwrap().parent().unwrap();
let site_root = workspace_root.join(&*leptos_options.site_root);
let static_dir = site_root.join("static");
let favicon_path = manifest_dir.join("public/favicon.ico");
tracing::info!("Serving static files from: {}", site_root.display());
// Admin CSS path
let admin_css_path = static_dir.join("chattyness-owner.css");
// Shared assets directory for uploaded files (realm images, etc.)
let assets_dir = Path::new("/srv/chattyness/assets");
// Build the app
let app = Router::new()
// Redirect root to admin
.route("/", get(|| async { Redirect::permanent("/admin") }))
// Nest API routes under /api/admin (matches frontend expectations when UI is at /admin)
.nest("/api/admin", chattyness_admin_ui::api::admin_api_router().with_state(app_state.clone()))
// Uploaded assets (realm backgrounds, props, etc.) - must come before /static
.nest_service("/assets/server", ServeDir::new(assets_dir.join("server")))
.nest_service("/static/realm", ServeDir::new(assets_dir.join("realm")))
// Static files (build output: JS, CSS, WASM)
.nest_service("/static", ServeDir::new(&static_dir))
.nest_service("/favicon.ico", tower_http::services::ServeFile::new(&favicon_path))
// Serve admin CSS at standardized path
.nest_service("/static/css/admin.css", tower_http::services::ServeFile::new(&admin_css_path))
// Leptos routes
.leptos_routes(&app_state, routes, {
let leptos_options = leptos_options.clone();
move || admin_shell(leptos_options.clone())
})
// Apply session middleware
.layer(session_layer)
.with_state(app_state);
tracing::info!("Listening on http://{}", addr);
// Start server
let listener = tokio::net::TcpListener::bind(&addr).await?;
axum::serve(listener, app.into_make_service()).await?;
Ok(())
}
}
#[cfg(feature = "ssr")]
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
server::main().await
}
#[cfg(not(feature = "ssr"))]
fn main() {
// This is for WASM build, which is handled by lib.rs
}

View file

@ -0,0 +1,463 @@
/**
* Owner/Admin Interface Styles
*
* Theme overrides for the owner/admin interface.
* shared.css is imported in tailwind.css before this file.
*/
/* =========================================
Owner Theme Overrides
========================================= */
:root {
/* Background colors - darker blue theme */
--color-bg-primary: #1a1a2e;
--color-bg-secondary: #16213e;
--color-bg-tertiary: #0f3460;
--color-bg-hover: #1e3a5f;
/* Text colors */
--color-text-primary: #eee;
--color-text-secondary: #a0aec0;
--color-text-muted: #6b7280;
/* Border colors */
--color-border: #374151;
--color-border-focus: #7c3aed;
/* Accent colors - purple theme */
--color-accent: #7c3aed;
--color-accent-hover: #6d28d9;
--color-accent-text: #ffffff;
}
/* =========================================
Owner-Specific Body Styles
========================================= */
body.admin-app {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--color-bg-primary);
color: var(--color-text-primary);
line-height: 1.6;
min-height: 100vh;
margin: 0;
padding: 0;
}
/* =========================================
Owner Layout Styles
========================================= */
.admin-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 240px;
background: var(--color-bg-secondary);
border-right: 1px solid var(--color-border);
padding: 1.5rem 0;
position: fixed;
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.admin-content {
margin-left: 240px;
flex: 1;
padding: 2rem;
min-height: 100vh;
background: var(--color-bg-primary);
}
/* =========================================
Owner Sidebar Styles
========================================= */
.sidebar-header {
padding: 0 1.5rem 1.5rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-brand {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-accent);
text-decoration: none;
}
.sidebar-brand:hover {
opacity: 0.9;
}
.sidebar-badge {
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
background: var(--color-accent);
color: white;
border-radius: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Navigation */
.nav-list {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
.nav-item {
margin: 0.125rem 0;
}
.nav-link {
display: block;
padding: 0.5rem 1.5rem;
color: var(--color-text-secondary);
text-decoration: none;
transition: all 0.15s ease;
}
.nav-link:hover {
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.nav-item.active .nav-link {
background: var(--color-accent);
color: white;
}
.nav-section {
margin-top: 1rem;
}
.nav-section-title {
display: block;
padding: 0.5rem 1.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav-sublist {
list-style: none;
padding: 0;
margin: 0;
}
.nav-sublist .nav-link {
padding-left: 2.5rem;
font-size: 0.875rem;
}
.sidebar-footer {
padding: var(--spacing-md);
border-top: 1px solid var(--color-border);
margin-top: auto;
}
.sidebar-link {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-sm);
text-align: center;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.sidebar-link:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
.sidebar-logout {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
margin-top: var(--spacing-sm);
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: var(--font-sm);
cursor: pointer;
transition: all var(--transition-fast);
}
.sidebar-logout:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
/* =========================================
Owner Page Header Overrides
========================================= */
.page-header {
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 2rem;
}
/* =========================================
Owner Card Overrides
========================================= */
.card {
border: 1px solid var(--color-border);
}
.card-title {
color: var(--color-accent);
}
/* =========================================
Owner Table Overrides
========================================= */
.data-table th {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.table-link {
font-weight: 500;
}
/* =========================================
Owner Dashboard Styles
========================================= */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
text-align: center;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: var(--color-accent);
}
.stat-title {
font-size: var(--font-sm);
color: var(--color-text-secondary);
margin-top: var(--spacing-xs);
}
.dashboard-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
/* =========================================
Owner User/Realm Detail Styles
========================================= */
.user-header,
.realm-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 2rem;
}
.user-info h2,
.realm-info h2 {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.realm-badges {
display: flex;
gap: var(--spacing-sm);
}
.realm-description {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
}
.realm-description h4 {
font-size: var(--font-lg);
margin-bottom: var(--spacing-sm);
color: var(--color-text-secondary);
}
/* =========================================
Owner Form Styles
========================================= */
.section-title {
font-size: var(--font-lg);
font-weight: 600;
color: var(--color-accent);
margin: var(--spacing-lg) 0 var(--spacing-md) 0;
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--color-border);
}
.tab-buttons {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.required {
color: var(--color-text-error);
}
.temp-password {
display: block;
background: var(--color-bg-tertiary);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
font-family: monospace;
margin: var(--spacing-sm) 0;
word-break: break-all;
}
/* =========================================
Owner Action Buttons
========================================= */
.action-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
/* =========================================
Owner Login Layout
========================================= */
.login-layout {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
background: var(--color-bg-primary);
}
.login-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem;
width: 100%;
max-width: 400px;
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.login-subtitle {
color: var(--color-text-muted);
}
/* =========================================
Owner Config Page Styles
========================================= */
.config-section {
margin-bottom: var(--spacing-xl);
}
.config-section h3 {
font-size: var(--font-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--color-accent);
}
.config-item {
margin-bottom: var(--spacing-md);
}
.config-item label {
display: block;
font-weight: 500;
margin-bottom: var(--spacing-xs);
}
.config-item .form-help {
margin-top: var(--spacing-xs);
}
/* =========================================
Responsive Styles
========================================= */
@media (max-width: 768px) {
.sidebar {
width: 100%;
position: relative;
height: auto;
}
.admin-content {
margin-left: 0;
padding: 1rem;
}
.dashboard-grid {
grid-template-columns: repeat(2, 1fr);
}
.form-row {
flex-direction: column;
}
.page-header {
flex-direction: column;
align-items: stretch;
}
.page-header-actions {
justify-content: flex-start;
}
}

View file

@ -0,0 +1,879 @@
/**
* Shared CSS Variables and Component Styles
*
* This file defines CSS custom properties and base styles for shared components.
* Each theme (owner/user) should define their own values for these variables.
*/
/* =========================================
CSS Custom Properties
========================================= */
:root {
/* These are default values - override in theme-specific CSS */
/* Text colors */
--color-text-primary: #ffffff;
--color-text-secondary: #9ca3af;
--color-text-muted: #6b7280;
--color-text-error: #ef4444;
--color-text-success: #22c55e;
--color-text-warning: #f59e0b;
--color-text-info: #3b82f6;
/* Background colors */
--color-bg-primary: #111827;
--color-bg-secondary: #1f2937;
--color-bg-tertiary: #374151;
--color-bg-hover: #374151;
/* Border colors */
--color-border: #374151;
--color-border-focus: #6366f1;
/* Accent/action colors */
--color-accent: #6366f1;
--color-accent-hover: #4f46e5;
--color-accent-text: #ffffff;
/* Status colors */
--color-status-active: #22c55e;
--color-status-suspended: #f59e0b;
--color-status-banned: #ef4444;
--color-status-pending: #8b5cf6;
--color-status-inactive: #6b7280;
/* Role colors */
--color-role-owner: #f59e0b;
--color-role-admin: #ef4444;
--color-role-moderator: #8b5cf6;
--color-role-member: #3b82f6;
--color-role-guest: #6b7280;
/* Privacy colors */
--color-privacy-public: #22c55e;
--color-privacy-unlisted: #f59e0b;
--color-privacy-private: #ef4444;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-full: 9999px;
/* Font sizes */
--font-xs: 0.75rem;
--font-sm: 0.875rem;
--font-base: 1rem;
--font-lg: 1.125rem;
--font-xl: 1.25rem;
--font-2xl: 1.5rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
/* Transitions */
--transition-fast: 150ms;
--transition-base: 200ms;
--transition-slow: 300ms;
}
/* =========================================
Base Styles
========================================= */
* {
box-sizing: border-box;
}
/* =========================================
Button Styles
========================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-sm);
font-weight: 500;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
}
.btn:disabled,
.btn-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background-color: var(--color-accent);
color: var(--color-accent-text);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--color-accent-hover);
}
.btn-secondary {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
background-color: var(--color-bg-hover);
}
.btn-danger {
background-color: var(--color-status-banned);
color: white;
}
.btn-danger:hover:not(:disabled) {
opacity: 0.9;
}
.btn-warning {
background-color: var(--color-status-suspended);
color: white;
}
.btn-warning:hover:not(:disabled) {
opacity: 0.9;
}
/* =========================================
Form Styles
========================================= */
.form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.form-row > .form-group {
flex: 1;
min-width: 200px;
}
.form-label {
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-text-primary);
}
.required-mark {
color: var(--color-text-error);
margin-left: var(--spacing-xs);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-base);
color: var(--color-text-primary);
background-color: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
.form-color {
width: 100px;
height: 40px;
padding: 2px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-tertiary);
}
.form-help {
font-size: var(--font-xs);
color: var(--color-text-muted);
}
.checkbox-group {
display: flex;
flex-direction: column;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
cursor: pointer;
}
.form-checkbox {
width: 1rem;
height: 1rem;
margin-top: 2px;
accent-color: var(--color-accent);
}
.checkbox-text {
display: flex;
flex-direction: column;
color: var(--color-text-primary);
}
.checkbox-description {
font-size: var(--font-sm);
color: var(--color-text-muted);
}
.form-actions {
display: flex;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.search-box {
display: flex;
gap: var(--spacing-sm);
}
.search-input {
flex: 1;
}
/* =========================================
Card Styles
========================================= */
.card {
background-color: var(--color-bg-secondary);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
}
.card-title {
font-size: var(--font-xl);
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--spacing-lg);
}
/* =========================================
Page Header Styles
========================================= */
.page-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.page-header-text {
flex: 1;
}
.page-title {
font-size: var(--font-2xl);
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
}
.page-subtitle {
font-size: var(--font-base);
color: var(--color-text-secondary);
margin: var(--spacing-xs) 0 0 0;
}
.page-header-actions {
display: flex;
gap: var(--spacing-sm);
}
/* =========================================
Alert Styles
========================================= */
.alert {
padding: var(--spacing-md);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.alert p {
margin: 0;
}
.alert-error {
background-color: rgba(239, 68, 68, 0.1);
border: 1px solid var(--color-text-error);
color: var(--color-text-error);
}
.alert-success {
background-color: rgba(34, 197, 94, 0.1);
border: 1px solid var(--color-text-success);
color: var(--color-text-success);
}
.alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border: 1px solid var(--color-text-warning);
color: var(--color-text-warning);
}
.alert-info {
background-color: rgba(59, 130, 246, 0.1);
border: 1px solid var(--color-text-info);
color: var(--color-text-info);
}
/* =========================================
Badge Styles
========================================= */
.status-badge,
.role-badge,
.privacy-badge,
.badge,
.nsfw-badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-xs);
font-weight: 500;
border-radius: var(--radius-full);
text-transform: capitalize;
}
/* Status badges */
.status-active {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-status-active);
}
.status-suspended {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-status-suspended);
}
.status-banned {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-status-banned);
}
.status-pending {
background-color: rgba(139, 92, 246, 0.2);
color: var(--color-status-pending);
}
.status-inactive {
background-color: rgba(107, 114, 128, 0.2);
color: var(--color-status-inactive);
}
/* Role badges */
.role-owner {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-role-owner);
}
.role-admin {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-role-admin);
}
.role-moderator {
background-color: rgba(139, 92, 246, 0.2);
color: var(--color-role-moderator);
}
.role-member {
background-color: rgba(59, 130, 246, 0.2);
color: var(--color-role-member);
}
.role-guest {
background-color: rgba(107, 114, 128, 0.2);
color: var(--color-role-guest);
}
/* Privacy badges */
.privacy-public {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-privacy-public);
}
.privacy-unlisted {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-privacy-unlisted);
}
.privacy-private {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-privacy-private);
}
/* Generic badges */
.badge-primary {
background-color: rgba(99, 102, 241, 0.2);
color: var(--color-accent);
}
.badge-secondary {
background-color: rgba(107, 114, 128, 0.2);
color: var(--color-text-secondary);
}
.badge-success {
background-color: rgba(34, 197, 94, 0.2);
color: var(--color-text-success);
}
.badge-warning {
background-color: rgba(245, 158, 11, 0.2);
color: var(--color-text-warning);
}
.badge-error {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-text-error);
}
.nsfw-badge {
background-color: rgba(239, 68, 68, 0.2);
color: var(--color-status-banned);
text-transform: uppercase;
}
/* =========================================
Table Styles
========================================= */
.table-container {
overflow-x: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: var(--spacing-sm) var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.data-table th {
font-size: var(--font-sm);
font-weight: 600;
color: var(--color-text-secondary);
background-color: var(--color-bg-tertiary);
}
.data-table td {
font-size: var(--font-sm);
color: var(--color-text-primary);
}
.data-table tbody tr:hover {
background-color: var(--color-bg-hover);
}
.table-row-clickable {
cursor: pointer;
}
.table-link {
color: var(--color-accent);
text-decoration: none;
}
.table-link:hover {
text-decoration: underline;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.pagination-info {
color: var(--color-text-secondary);
font-size: var(--font-sm);
}
/* =========================================
Modal Styles
========================================= */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
}
.modal-backdrop {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
.modal-content {
position: relative;
background-color: var(--color-bg-secondary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
max-width: 28rem;
width: calc(100% - 2rem);
margin: var(--spacing-md);
padding: var(--spacing-lg);
border: 1px solid var(--color-border);
}
.modal-content-large {
max-width: 42rem;
}
.modal-close {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
padding: var(--spacing-xs);
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
transition: color var(--transition-fast);
}
.modal-close:hover {
color: var(--color-text-primary);
}
.modal-close-icon {
width: 1.5rem;
height: 1.5rem;
}
.modal-body {
text-align: center;
}
.modal-title {
font-size: var(--font-xl);
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 var(--spacing-md) 0;
}
.modal-message {
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-lg) 0;
}
.modal-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
@media (min-width: 640px) {
.modal-actions {
flex-direction: row;
justify-content: center;
}
}
.modal-actions-center {
justify-content: center;
}
/* =========================================
Admin Layout Styles
========================================= */
.admin-layout {
display: flex;
min-height: 100vh;
}
.admin-sidebar {
width: 16rem;
background-color: var(--color-bg-primary);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
position: fixed;
height: 100vh;
left: 0;
top: 0;
}
.admin-content {
flex: 1;
margin-left: 16rem;
padding: var(--spacing-xl);
background-color: var(--color-bg-primary);
min-height: 100vh;
}
.sidebar-header {
padding: var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
}
.sidebar-brand {
font-size: var(--font-xl);
font-weight: 700;
color: var(--color-text-primary);
text-decoration: none;
display: block;
}
.sidebar-brand:hover {
color: var(--color-accent);
}
.sidebar-subtitle {
font-size: var(--font-sm);
color: var(--color-text-muted);
display: block;
margin-top: var(--spacing-xs);
}
.sidebar-nav {
flex: 1;
padding: var(--spacing-md);
overflow-y: auto;
}
.nav-section {
margin-top: var(--spacing-lg);
}
.nav-section-title {
display: block;
font-size: var(--font-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--spacing-sm) var(--spacing-md);
}
.nav-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
margin-bottom: var(--spacing-xs);
}
.nav-item:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
.nav-item-active {
background-color: var(--color-accent);
color: var(--color-accent-text);
}
.nav-item-active:hover {
background-color: var(--color-accent-hover);
color: var(--color-accent-text);
}
.nav-icon {
width: 1.25rem;
height: 1.25rem;
}
.sidebar-footer {
padding: var(--spacing-md);
border-top: 1px solid var(--color-border);
}
.sidebar-link {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--font-sm);
text-align: center;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.sidebar-link:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
/* =========================================
Detail Grid Styles
========================================= */
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.detail-item {
padding: var(--spacing-sm);
}
.detail-label {
font-size: var(--font-xs);
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--spacing-xs);
}
.detail-value {
color: var(--color-text-primary);
}
/* =========================================
Empty State Styles
========================================= */
.empty-state {
text-align: center;
padding: var(--spacing-xl);
color: var(--color-text-muted);
}
.empty-state p {
margin-bottom: var(--spacing-md);
}
/* =========================================
Centered Layout Styles
========================================= */
.centered-layout {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
background-color: var(--color-bg-primary);
}
/* =========================================
Loading Spinner Styles
========================================= */
.loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
padding: var(--spacing-xl);
}
.spinner {
width: 2rem;
height: 2rem;
border: 3px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-message {
color: var(--color-text-muted);
font-size: var(--font-sm);
}
/* =========================================
Utility Classes
========================================= */
.mt-4 {
margin-top: var(--spacing-md);
}
.mb-4 {
margin-bottom: var(--spacing-md);
}
.text-muted {
color: var(--color-text-muted);
}
.text-success {
color: var(--color-text-success);
}
.text-error {
color: var(--color-text-error);
}

View file

@ -0,0 +1,83 @@
@import "tailwindcss";
/* Source paths (relative to this CSS file's location) */
@source "../src/**/*.rs";
@source "../public/**/*.html";
@source "../../../crates/chattyness-admin-ui/src/**/*.rs";
@source not "../../../target";
/* Custom theme extensions */
@theme {
--color-realm-50: #f0f9ff;
--color-realm-100: #e0f2fe;
--color-realm-200: #bae6fd;
--color-realm-300: #7dd3fc;
--color-realm-400: #38bdf8;
--color-realm-500: #0ea5e9;
--color-realm-600: #0284c7;
--color-realm-700: #0369a1;
--color-realm-800: #075985;
--color-realm-900: #0c4a6e;
--color-realm-950: #082f49;
}
/* Import shared component styles, then admin theme overrides */
@import "./shared.css";
@import "./admin.css";
/* Base styles for accessibility */
@layer base {
/* Focus visible for keyboard navigation */
:focus-visible {
@apply outline-2 outline-offset-2 outline-blue-500;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
}
/* Component styles */
@layer components {
/* Form input base styles */
.input-base {
@apply w-full px-4 py-3 bg-gray-700 border border-gray-600
rounded-lg text-white placeholder-gray-400
focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-colors duration-200;
}
/* Button base styles */
.btn-primary {
@apply px-6 py-3 bg-blue-600 hover:bg-blue-700
disabled:bg-gray-600 disabled:cursor-not-allowed
text-white font-semibold rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800
transition-colors duration-200;
}
.btn-secondary {
@apply px-6 py-3 bg-gray-600 hover:bg-gray-500
disabled:bg-gray-700 disabled:cursor-not-allowed
text-white font-semibold rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-800
transition-colors duration-200;
}
/* Error message styles */
.error-message {
@apply p-4 bg-red-900/50 border border-red-500 rounded-lg text-red-200;
}
/* Card styles */
.card {
@apply bg-gray-800 rounded-lg shadow-xl p-6;
}
}

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,96 @@
/* tslint:disable */
/* eslint-disable */
/**
* The `ReadableStreamType` enum.
*
* *This API requires the following crate features to be activated: `ReadableStreamType`*
*/
type ReadableStreamType = "bytes";
export class IntoUnderlyingByteSource {
private constructor();
free(): void;
[Symbol.dispose](): void;
pull(controller: ReadableByteStreamController): Promise<any>;
start(controller: ReadableByteStreamController): void;
cancel(): void;
readonly autoAllocateChunkSize: number;
readonly type: ReadableStreamType;
}
export class IntoUnderlyingSink {
private constructor();
free(): void;
[Symbol.dispose](): void;
abort(reason: any): Promise<any>;
close(): Promise<any>;
write(chunk: any): Promise<any>;
}
export class IntoUnderlyingSource {
private constructor();
free(): void;
[Symbol.dispose](): void;
pull(controller: ReadableStreamDefaultController): Promise<any>;
cancel(): void;
}
export function hydrate(): void;
export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
export interface InitOutput {
readonly memory: WebAssembly.Memory;
readonly hydrate: () => void;
readonly __wbg_intounderlyingbytesource_free: (a: number, b: number) => void;
readonly intounderlyingbytesource_autoAllocateChunkSize: (a: number) => number;
readonly intounderlyingbytesource_cancel: (a: number) => void;
readonly intounderlyingbytesource_pull: (a: number, b: any) => any;
readonly intounderlyingbytesource_start: (a: number, b: any) => void;
readonly intounderlyingbytesource_type: (a: number) => number;
readonly __wbg_intounderlyingsink_free: (a: number, b: number) => void;
readonly __wbg_intounderlyingsource_free: (a: number, b: number) => void;
readonly intounderlyingsink_abort: (a: number, b: any) => any;
readonly intounderlyingsink_close: (a: number) => any;
readonly intounderlyingsink_write: (a: number, b: any) => any;
readonly intounderlyingsource_cancel: (a: number) => void;
readonly intounderlyingsource_pull: (a: number, b: any) => any;
readonly wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___wasm_bindgen_3ecf883c72d93b1f___JsValue_____: (a: number, b: number, c: any) => void;
readonly wasm_bindgen_3ecf883c72d93b1f___closure__destroy___dyn_core_2ca9b9bcaa049ca7___ops__function__FnMut__wasm_bindgen_3ecf883c72d93b1f___JsValue____Output_______: (a: number, b: number) => void;
readonly wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke______: (a: number, b: number) => void;
readonly wasm_bindgen_3ecf883c72d93b1f___closure__destroy___dyn_core_2ca9b9bcaa049ca7___ops__function__FnMut_____Output_______: (a: number, b: number) => void;
readonly wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___web_sys_ad13626d47bc89a9___features__gen_Event__Event_____: (a: number, b: number, c: any) => void;
readonly wasm_bindgen_3ecf883c72d93b1f___closure__destroy___dyn_core_2ca9b9bcaa049ca7___ops__function__FnMut__web_sys_ad13626d47bc89a9___features__gen_Event__Event____Output_______: (a: number, b: number) => void;
readonly wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___bool_: (a: number, b: number) => number;
readonly wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___js_sys_21257ab1a865f8ae___Function__js_sys_21257ab1a865f8ae___Function_____: (a: number, b: number, c: any, d: any) => void;
readonly __wbindgen_malloc: (a: number, b: number) => number;
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
readonly __wbindgen_exn_store: (a: number) => void;
readonly __externref_table_alloc: () => number;
readonly __wbindgen_externrefs: WebAssembly.Table;
readonly __wbindgen_free: (a: number, b: number, c: number) => void;
readonly __wbindgen_start: () => void;
}
export type SyncInitInput = BufferSource | WebAssembly.Module;
/**
* Instantiates the given `module`, which can either be bytes or
* a precompiled `WebAssembly.Module`.
*
* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
*
* @returns {InitOutput}
*/
export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
/**
* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
* for everything else, calls `WebAssembly.instantiate` directly.
*
* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
*
* @returns {Promise<InitOutput>}
*/
export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,32 @@
/* tslint:disable */
/* eslint-disable */
export const memory: WebAssembly.Memory;
export const hydrate: () => void;
export const __wbg_intounderlyingbytesource_free: (a: number, b: number) => void;
export const intounderlyingbytesource_autoAllocateChunkSize: (a: number) => number;
export const intounderlyingbytesource_cancel: (a: number) => void;
export const intounderlyingbytesource_pull: (a: number, b: any) => any;
export const intounderlyingbytesource_start: (a: number, b: any) => void;
export const intounderlyingbytesource_type: (a: number) => number;
export const __wbg_intounderlyingsink_free: (a: number, b: number) => void;
export const __wbg_intounderlyingsource_free: (a: number, b: number) => void;
export const intounderlyingsink_abort: (a: number, b: any) => any;
export const intounderlyingsink_close: (a: number) => any;
export const intounderlyingsink_write: (a: number, b: any) => any;
export const intounderlyingsource_cancel: (a: number) => void;
export const intounderlyingsource_pull: (a: number, b: any) => any;
export const wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___wasm_bindgen_3ecf883c72d93b1f___JsValue_____: (a: number, b: number, c: any) => void;
export const wasm_bindgen_3ecf883c72d93b1f___closure__destroy___dyn_core_2ca9b9bcaa049ca7___ops__function__FnMut__wasm_bindgen_3ecf883c72d93b1f___JsValue____Output_______: (a: number, b: number) => void;
export const wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke______: (a: number, b: number) => void;
export const wasm_bindgen_3ecf883c72d93b1f___closure__destroy___dyn_core_2ca9b9bcaa049ca7___ops__function__FnMut_____Output_______: (a: number, b: number) => void;
export const wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___web_sys_ad13626d47bc89a9___features__gen_Event__Event_____: (a: number, b: number, c: any) => void;
export const wasm_bindgen_3ecf883c72d93b1f___closure__destroy___dyn_core_2ca9b9bcaa049ca7___ops__function__FnMut__web_sys_ad13626d47bc89a9___features__gen_Event__Event____Output_______: (a: number, b: number) => void;
export const wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___bool_: (a: number, b: number) => number;
export const wasm_bindgen_3ecf883c72d93b1f___convert__closures_____invoke___js_sys_21257ab1a865f8ae___Function__js_sys_21257ab1a865f8ae___Function_____: (a: number, b: number, c: any, d: any) => void;
export const __wbindgen_malloc: (a: number, b: number) => number;
export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
export const __wbindgen_exn_store: (a: number) => void;
export const __externref_table_alloc: () => number;
export const __wbindgen_externrefs: WebAssembly.Table;
export const __wbindgen_free: (a: number, b: number, c: number) => void;
export const __wbindgen_start: () => void;