Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sharang Parnerkar
|
4424db5acb | ||
 sharang
|
927fbc8ecb | ||
|
sharang
|
e67a13535a | ||
|
sharang
|
df0063abc0 |
@@ -35,11 +35,16 @@ impl ComplianceAgent {
|
|||||||
config.litellm_model.clone(),
|
config.litellm_model.clone(),
|
||||||
config.litellm_embed_model.clone(),
|
config.litellm_embed_model.clone(),
|
||||||
));
|
));
|
||||||
|
let http = reqwest::Client::builder()
|
||||||
|
.timeout(std::time::Duration::from_secs(30))
|
||||||
|
.connect_timeout(std::time::Duration::from_secs(10))
|
||||||
|
.build()
|
||||||
|
.unwrap_or_default();
|
||||||
Self {
|
Self {
|
||||||
config,
|
config,
|
||||||
db,
|
db,
|
||||||
llm,
|
llm,
|
||||||
http: reqwest::Client::new(),
|
http,
|
||||||
session_streams: Arc::new(DashMap::new()),
|
session_streams: Arc::new(DashMap::new()),
|
||||||
session_pause: Arc::new(DashMap::new()),
|
session_pause: Arc::new(DashMap::new()),
|
||||||
session_semaphore: Arc::new(Semaphore::new(DEFAULT_MAX_CONCURRENT_SESSIONS)),
|
session_semaphore: Arc::new(Semaphore::new(DEFAULT_MAX_CONCURRENT_SESSIONS)),
|
||||||
|
|||||||
@@ -19,12 +19,17 @@ impl LlmClient {
|
|||||||
model: String,
|
model: String,
|
||||||
embed_model: String,
|
embed_model: String,
|
||||||
) -> Self {
|
) -> Self {
|
||||||
|
let http = reqwest::Client::builder()
|
||||||
|
.timeout(std::time::Duration::from_secs(300))
|
||||||
|
.connect_timeout(std::time::Duration::from_secs(10))
|
||||||
|
.build()
|
||||||
|
.unwrap_or_default();
|
||||||
Self {
|
Self {
|
||||||
base_url,
|
base_url,
|
||||||
api_key,
|
api_key,
|
||||||
model,
|
model,
|
||||||
embed_model,
|
embed_model,
|
||||||
http: reqwest::Client::new(),
|
http,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -174,19 +174,26 @@ impl PipelineOrchestrator {
|
|||||||
k.expose_secret().to_string()
|
k.expose_secret().to_string()
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
let cve_alerts = match async {
|
let cve_alerts = match tokio::time::timeout(
|
||||||
|
std::time::Duration::from_secs(600),
|
||||||
|
async {
|
||||||
cve_scanner
|
cve_scanner
|
||||||
.scan_dependencies(&repo_id, &mut sbom_entries)
|
.scan_dependencies(&repo_id, &mut sbom_entries)
|
||||||
.await
|
.await
|
||||||
}
|
}
|
||||||
.instrument(tracing::info_span!("stage_cve_scanning"))
|
.instrument(tracing::info_span!("stage_cve_scanning")),
|
||||||
|
)
|
||||||
.await
|
.await
|
||||||
{
|
{
|
||||||
Ok(alerts) => alerts,
|
Ok(Ok(alerts)) => alerts,
|
||||||
Err(e) => {
|
Ok(Err(e)) => {
|
||||||
tracing::warn!("[{repo_id}] CVE scanning failed: {e}");
|
tracing::warn!("[{repo_id}] CVE scanning failed: {e}");
|
||||||
Vec::new()
|
Vec::new()
|
||||||
}
|
}
|
||||||
|
Err(_) => {
|
||||||
|
tracing::warn!("[{repo_id}] CVE scanning timed out after 10 minutes");
|
||||||
|
Vec::new()
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Stage 4: Pattern Scanning (GDPR + OAuth)
|
// Stage 4: Pattern Scanning (GDPR + OAuth)
|
||||||
|
|||||||
@@ -6,11 +6,16 @@ use compliance_core::models::embedding::{CodeEmbedding, EmbeddingBuildRun, Embed
|
|||||||
use compliance_core::models::graph::CodeNode;
|
use compliance_core::models::graph::CodeNode;
|
||||||
use compliance_graph::graph::chunking::extract_chunks;
|
use compliance_graph::graph::chunking::extract_chunks;
|
||||||
use compliance_graph::graph::embedding_store::EmbeddingStore;
|
use compliance_graph::graph::embedding_store::EmbeddingStore;
|
||||||
|
use futures_util::stream::{FuturesUnordered, StreamExt};
|
||||||
use tracing::{error, info};
|
use tracing::{error, info};
|
||||||
|
|
||||||
use crate::error::AgentError;
|
use crate::error::AgentError;
|
||||||
use crate::llm::LlmClient;
|
use crate::llm::LlmClient;
|
||||||
|
|
||||||
|
const EMBED_BATCH_SIZE: usize = 20;
|
||||||
|
const EMBED_CONCURRENCY: usize = 4;
|
||||||
|
const EMBED_FLUSH_EVERY: usize = 200;
|
||||||
|
|
||||||
/// RAG pipeline for building embeddings and performing retrieval
|
/// RAG pipeline for building embeddings and performing retrieval
|
||||||
pub struct RagPipeline {
|
pub struct RagPipeline {
|
||||||
llm: Arc<LlmClient>,
|
llm: Arc<LlmClient>,
|
||||||
@@ -77,25 +82,33 @@ impl RagPipeline {
|
|||||||
.await
|
.await
|
||||||
.map_err(|e| AgentError::Other(format!("Failed to delete old embeddings: {e}")))?;
|
.map_err(|e| AgentError::Other(format!("Failed to delete old embeddings: {e}")))?;
|
||||||
|
|
||||||
// Step 3: Batch embed (small batches to stay within model limits)
|
// Step 3: Batch embed with bounded concurrency. Flush to Mongo and
|
||||||
let batch_size = 20;
|
// update progress periodically so the dashboard can show live status.
|
||||||
let mut all_embeddings = Vec::new();
|
let mut pending = Vec::with_capacity(EMBED_FLUSH_EVERY);
|
||||||
let mut embedded_count = 0u32;
|
let mut embedded_count = 0u32;
|
||||||
|
|
||||||
for batch_start in (0..chunks.len()).step_by(batch_size) {
|
// Build the list of batch indices to process.
|
||||||
let batch_end = (batch_start + batch_size).min(chunks.len());
|
let batches: Vec<(usize, usize)> = (0..chunks.len())
|
||||||
let batch_chunks = &chunks[batch_start..batch_end];
|
.step_by(EMBED_BATCH_SIZE)
|
||||||
|
.map(|start| (start, (start + EMBED_BATCH_SIZE).min(chunks.len())))
|
||||||
// Prepare texts: context_header + content
|
|
||||||
let texts: Vec<String> = batch_chunks
|
|
||||||
.iter()
|
|
||||||
.map(|c| format!("{}\n{}", c.context_header, c.content))
|
|
||||||
.collect();
|
.collect();
|
||||||
|
|
||||||
match self.llm.embed(texts).await {
|
let mut batch_iter = batches.into_iter();
|
||||||
Ok(vectors) => {
|
let mut in_flight = FuturesUnordered::new();
|
||||||
|
|
||||||
|
// Prime up to EMBED_CONCURRENCY batches.
|
||||||
|
for _ in 0..EMBED_CONCURRENCY {
|
||||||
|
if let Some((start, end)) = batch_iter.next() {
|
||||||
|
in_flight.push(self.embed_batch(&chunks[start..end], start, end));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
while let Some(result) = in_flight.next().await {
|
||||||
|
match result {
|
||||||
|
Ok((start, end, vectors)) => {
|
||||||
|
let batch_chunks = &chunks[start..end];
|
||||||
for (chunk, embedding) in batch_chunks.iter().zip(vectors) {
|
for (chunk, embedding) in batch_chunks.iter().zip(vectors) {
|
||||||
all_embeddings.push(CodeEmbedding {
|
pending.push(CodeEmbedding {
|
||||||
id: None,
|
id: None,
|
||||||
repo_id: repo_id.to_string(),
|
repo_id: repo_id.to_string(),
|
||||||
graph_build_id: graph_build_id.to_string(),
|
graph_build_id: graph_build_id.to_string(),
|
||||||
@@ -113,9 +126,45 @@ impl RagPipeline {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
embedded_count += batch_chunks.len() as u32;
|
embedded_count += batch_chunks.len() as u32;
|
||||||
|
|
||||||
|
// Flush pending embeddings to Mongo periodically and update progress.
|
||||||
|
if pending.len() >= EMBED_FLUSH_EVERY {
|
||||||
|
self.embedding_store
|
||||||
|
.store_embeddings(&pending)
|
||||||
|
.await
|
||||||
|
.map_err(|e| {
|
||||||
|
AgentError::Other(format!("Failed to store embeddings: {e}"))
|
||||||
|
})?;
|
||||||
|
pending.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Always update the progress counter on the build doc — even if
|
||||||
|
// we haven't flushed embeddings yet — so the UI shows movement.
|
||||||
|
if let Err(e) = self
|
||||||
|
.embedding_store
|
||||||
|
.update_build(
|
||||||
|
repo_id,
|
||||||
|
graph_build_id,
|
||||||
|
EmbeddingBuildStatus::Running,
|
||||||
|
embedded_count,
|
||||||
|
None,
|
||||||
|
)
|
||||||
|
.await
|
||||||
|
{
|
||||||
|
error!("[{repo_id}] Failed to update build progress: {e}");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Queue the next batch to keep concurrency saturated.
|
||||||
|
if let Some((s, e)) = batch_iter.next() {
|
||||||
|
in_flight.push(self.embed_batch(&chunks[s..e], s, e));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Err(e) => {
|
Err(e) => {
|
||||||
error!("[{repo_id}] Embedding batch failed: {e}");
|
error!("[{repo_id}] Embedding batch failed: {e}");
|
||||||
|
// Flush whatever we have so partial progress isn't lost.
|
||||||
|
if !pending.is_empty() {
|
||||||
|
let _ = self.embedding_store.store_embeddings(&pending).await;
|
||||||
|
}
|
||||||
build.status = EmbeddingBuildStatus::Failed;
|
build.status = EmbeddingBuildStatus::Failed;
|
||||||
build.error_message = Some(e.to_string());
|
build.error_message = Some(e.to_string());
|
||||||
build.completed_at = Some(Utc::now());
|
build.completed_at = Some(Utc::now());
|
||||||
@@ -134,11 +183,13 @@ impl RagPipeline {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Step 4: Store all embeddings
|
// Step 4: Flush any remaining embeddings
|
||||||
|
if !pending.is_empty() {
|
||||||
self.embedding_store
|
self.embedding_store
|
||||||
.store_embeddings(&all_embeddings)
|
.store_embeddings(&pending)
|
||||||
.await
|
.await
|
||||||
.map_err(|e| AgentError::Other(format!("Failed to store embeddings: {e}")))?;
|
.map_err(|e| AgentError::Other(format!("Failed to store embeddings: {e}")))?;
|
||||||
|
}
|
||||||
|
|
||||||
// Step 5: Update build status
|
// Step 5: Update build status
|
||||||
build.status = EmbeddingBuildStatus::Completed;
|
build.status = EmbeddingBuildStatus::Completed;
|
||||||
@@ -161,4 +212,21 @@ impl RagPipeline {
|
|||||||
);
|
);
|
||||||
Ok(build)
|
Ok(build)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Embed one batch of chunks. Returns the (start, end, vectors) tuple so
|
||||||
|
/// out-of-order completion from `FuturesUnordered` can still be reconciled
|
||||||
|
/// against the original chunk slice.
|
||||||
|
async fn embed_batch(
|
||||||
|
&self,
|
||||||
|
batch_chunks: &[compliance_graph::graph::chunking::CodeChunk],
|
||||||
|
start: usize,
|
||||||
|
end: usize,
|
||||||
|
) -> Result<(usize, usize, Vec<Vec<f64>>), AgentError> {
|
||||||
|
let texts: Vec<String> = batch_chunks
|
||||||
|
.iter()
|
||||||
|
.map(|c| format!("{}\n{}", c.context_header, c.content))
|
||||||
|
.collect();
|
||||||
|
let vectors = self.llm.embed(texts).await?;
|
||||||
|
Ok((start, end, vectors))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ thiserror = { workspace = true }
|
|||||||
|
|
||||||
# Web-only
|
# Web-only
|
||||||
reqwest = { workspace = true, optional = true }
|
reqwest = { workspace = true, optional = true }
|
||||||
web-sys = { version = "0.3", optional = true, features = ["Blob", "BlobPropertyBag", "HtmlAnchorElement", "Url", "Document", "Window"] }
|
web-sys = { version = "0.3", optional = true, features = ["Blob", "BlobPropertyBag", "HtmlAnchorElement", "Url", "Document", "Element", "Window", "Storage", "MediaQueryList"] }
|
||||||
js-sys = { version = "0.3", optional = true }
|
js-sys = { version = "0.3", optional = true }
|
||||||
wasm-bindgen = { version = "0.2", optional = true }
|
wasm-bindgen = { version = "0.2", optional = true }
|
||||||
gloo-timers = { version = "0.3", features = ["futures"], optional = true }
|
gloo-timers = { version = "0.3", features = ["futures"], optional = true }
|
||||||
|
|||||||
@@ -61,6 +61,77 @@
|
|||||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Light theme tokens ──
|
||||||
|
Applied when the user has explicitly chosen light (`data-theme="light"`)
|
||||||
|
OR when their OS prefers light AND they have made no explicit choice. */
|
||||||
|
:root[data-theme="light"] {
|
||||||
|
--bg-primary: #f5f7fb;
|
||||||
|
--bg-secondary: #ffffff;
|
||||||
|
--bg-card: rgba(255, 255, 255, 0.85);
|
||||||
|
--bg-card-solid: #ffffff;
|
||||||
|
--bg-card-hover: #f1f5fb;
|
||||||
|
--bg-elevated: #f8fafc;
|
||||||
|
|
||||||
|
--text-primary: #0c1426;
|
||||||
|
--text-secondary: #475569;
|
||||||
|
--text-tertiary: #8a9bb4;
|
||||||
|
|
||||||
|
--accent: #0070d4;
|
||||||
|
--accent-hover: #0080f0;
|
||||||
|
--accent-muted: rgba(0, 112, 212, 0.10);
|
||||||
|
--accent-glow: 0 0 20px rgba(0, 112, 212, 0.10);
|
||||||
|
|
||||||
|
--border: #e2e8f0;
|
||||||
|
--border-bright: #cbd5e1;
|
||||||
|
--border-accent: rgba(0, 112, 212, 0.30);
|
||||||
|
|
||||||
|
--danger: #dc2626;
|
||||||
|
--danger-bg: rgba(220, 38, 38, 0.08);
|
||||||
|
--warning: #d97706;
|
||||||
|
--warning-bg: rgba(217, 119, 6, 0.08);
|
||||||
|
--success: #16a34a;
|
||||||
|
--success-bg: rgba(22, 163, 74, 0.08);
|
||||||
|
--info: #2563eb;
|
||||||
|
--info-bg: rgba(37, 99, 235, 0.08);
|
||||||
|
--orange: #ea580c;
|
||||||
|
--orange-bg: rgba(234, 88, 12, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
--bg-primary: #f5f7fb;
|
||||||
|
--bg-secondary: #ffffff;
|
||||||
|
--bg-card: rgba(255, 255, 255, 0.85);
|
||||||
|
--bg-card-solid: #ffffff;
|
||||||
|
--bg-card-hover: #f1f5fb;
|
||||||
|
--bg-elevated: #f8fafc;
|
||||||
|
|
||||||
|
--text-primary: #0c1426;
|
||||||
|
--text-secondary: #475569;
|
||||||
|
--text-tertiary: #8a9bb4;
|
||||||
|
|
||||||
|
--accent: #0070d4;
|
||||||
|
--accent-hover: #0080f0;
|
||||||
|
--accent-muted: rgba(0, 112, 212, 0.10);
|
||||||
|
--accent-glow: 0 0 20px rgba(0, 112, 212, 0.10);
|
||||||
|
|
||||||
|
--border: #e2e8f0;
|
||||||
|
--border-bright: #cbd5e1;
|
||||||
|
--border-accent: rgba(0, 112, 212, 0.30);
|
||||||
|
|
||||||
|
--danger: #dc2626;
|
||||||
|
--danger-bg: rgba(220, 38, 38, 0.08);
|
||||||
|
--warning: #d97706;
|
||||||
|
--warning-bg: rgba(217, 119, 6, 0.08);
|
||||||
|
--success: #16a34a;
|
||||||
|
--success-bg: rgba(22, 163, 74, 0.08);
|
||||||
|
--info: #2563eb;
|
||||||
|
--info-bg: rgba(37, 99, 235, 0.08);
|
||||||
|
--orange: #ea580c;
|
||||||
|
--orange-bg: rgba(234, 88, 12, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ── Reset & Base ── */
|
/* ── Reset & Base ── */
|
||||||
|
|
||||||
@@ -396,6 +467,44 @@ code {
|
|||||||
background: rgba(0, 200, 255, 0.06);
|
background: rgba(0, 200, 255, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: 11px 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 11px;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 13.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s, background 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
opacity: 0.75;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover svg {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.collapsed .theme-toggle {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 11px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar.collapsed .sidebar-header {
|
.sidebar.collapsed .sidebar-header {
|
||||||
padding: 22px 0;
|
padding: 22px 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -3889,3 +3998,33 @@ tbody tr:last-child td {
|
|||||||
.copyable code, .copyable .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
.copyable code, .copyable .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
.code-snippet-wrapper { position: relative; }
|
.code-snippet-wrapper { position: relative; }
|
||||||
.code-snippet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
|
.code-snippet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════════════════
|
||||||
|
LIGHT THEME — surface overrides for the few hardcoded dark
|
||||||
|
colors that don't go through CSS custom properties.
|
||||||
|
═══════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
:root[data-theme="light"] .main-content {
|
||||||
|
background-image: radial-gradient(circle at 1px 1px, rgba(100, 116, 139, 0.18) 1px, transparent 0);
|
||||||
|
}
|
||||||
|
:root[data-theme="light"] .code-block {
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #0c1426;
|
||||||
|
}
|
||||||
|
:root[data-theme="light"] .graph-stab-overlay {
|
||||||
|
background: radial-gradient(ellipse at center, rgba(245, 247, 251, 0.92) 0%, rgba(245, 247, 251, 0.98) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="dark"]) .main-content {
|
||||||
|
background-image: radial-gradient(circle at 1px 1px, rgba(100, 116, 139, 0.18) 1px, transparent 0);
|
||||||
|
}
|
||||||
|
:root:not([data-theme="dark"]) .code-block {
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #0c1426;
|
||||||
|
}
|
||||||
|
:root:not([data-theme="dark"]) .graph-stab-overlay {
|
||||||
|
background: radial-gradient(ellipse at center, rgba(245, 247, 251, 0.92) 0%, rgba(245, 247, 251, 0.98) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -12,4 +12,5 @@ pub mod pentest_wizard;
|
|||||||
pub mod severity_badge;
|
pub mod severity_badge;
|
||||||
pub mod sidebar;
|
pub mod sidebar;
|
||||||
pub mod stat_card;
|
pub mod stat_card;
|
||||||
|
pub mod theme_toggle;
|
||||||
pub mod toast;
|
pub mod toast;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ use dioxus_free_icons::icons::bs_icons::*;
|
|||||||
use dioxus_free_icons::Icon;
|
use dioxus_free_icons::Icon;
|
||||||
|
|
||||||
use crate::app::Route;
|
use crate::app::Route;
|
||||||
|
use crate::components::theme_toggle::ThemeToggle;
|
||||||
|
|
||||||
struct NavItem {
|
struct NavItem {
|
||||||
label: &'static str,
|
label: &'static str,
|
||||||
@@ -106,6 +107,7 @@ pub fn Sidebar() -> Element {
|
|||||||
}
|
}
|
||||||
// Spacer pushes footer to the bottom
|
// Spacer pushes footer to the bottom
|
||||||
div { class: "sidebar-spacer" }
|
div { class: "sidebar-spacer" }
|
||||||
|
ThemeToggle { collapsed: collapsed() }
|
||||||
button {
|
button {
|
||||||
class: "sidebar-toggle",
|
class: "sidebar-toggle",
|
||||||
onclick: move |_| collapsed.set(!collapsed()),
|
onclick: move |_| collapsed.set(!collapsed()),
|
||||||
|
|||||||
@@ -0,0 +1,104 @@
|
|||||||
|
use dioxus::prelude::*;
|
||||||
|
use dioxus_free_icons::icons::bs_icons::{BsMoonStars, BsSun};
|
||||||
|
use dioxus_free_icons::Icon;
|
||||||
|
|
||||||
|
#[cfg(feature = "web")]
|
||||||
|
const STORAGE_KEY: &str = "compliance-scanner.theme";
|
||||||
|
|
||||||
|
/// Sidebar-footer theme toggle. Reads the initial state on mount from
|
||||||
|
/// localStorage (explicit user choice) or `prefers-color-scheme` (OS default),
|
||||||
|
/// then writes back to both the `<html data-theme="...">` attribute and
|
||||||
|
/// localStorage on every click.
|
||||||
|
#[component]
|
||||||
|
pub fn ThemeToggle(collapsed: bool) -> Element {
|
||||||
|
// `None` until the on-mount effect resolves the real value, so SSR doesn't
|
||||||
|
// render the wrong icon for the user's actual theme.
|
||||||
|
let mut is_dark = use_signal(|| None::<bool>);
|
||||||
|
|
||||||
|
use_effect(move || {
|
||||||
|
let (dark, from_storage) = initial_theme();
|
||||||
|
is_dark.set(Some(dark));
|
||||||
|
// If the user already made an explicit choice (in localStorage), assert it
|
||||||
|
// on the DOM so an OS-vs-stored mismatch can't briefly show the wrong theme.
|
||||||
|
if from_storage {
|
||||||
|
apply_theme(dark);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let label = if collapsed {
|
||||||
|
""
|
||||||
|
} else if is_dark().unwrap_or(true) {
|
||||||
|
"Light mode"
|
||||||
|
} else {
|
||||||
|
"Dark mode"
|
||||||
|
};
|
||||||
|
|
||||||
|
let title = if is_dark().unwrap_or(true) {
|
||||||
|
"Switch to light mode"
|
||||||
|
} else {
|
||||||
|
"Switch to dark mode"
|
||||||
|
};
|
||||||
|
|
||||||
|
rsx! {
|
||||||
|
button {
|
||||||
|
class: "theme-toggle",
|
||||||
|
r#type: "button",
|
||||||
|
title: "{title}",
|
||||||
|
"aria-label": "{title}",
|
||||||
|
onclick: move |_| {
|
||||||
|
let next_dark = !is_dark().unwrap_or(true);
|
||||||
|
is_dark.set(Some(next_dark));
|
||||||
|
apply_theme(next_dark);
|
||||||
|
},
|
||||||
|
if is_dark().unwrap_or(true) {
|
||||||
|
Icon { icon: BsSun, width: 16, height: 16 }
|
||||||
|
} else {
|
||||||
|
Icon { icon: BsMoonStars, width: 16, height: 16 }
|
||||||
|
}
|
||||||
|
if !collapsed {
|
||||||
|
span { class: "theme-toggle-label", "{label}" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Returns `(is_dark, from_storage)`. `from_storage` is true when an explicit
|
||||||
|
/// user choice is in localStorage; false when we fell back to OS preference
|
||||||
|
/// (or to the dark default).
|
||||||
|
#[cfg(feature = "web")]
|
||||||
|
fn initial_theme() -> (bool, bool) {
|
||||||
|
if let Some(window) = web_sys::window() {
|
||||||
|
if let Ok(Some(storage)) = window.local_storage() {
|
||||||
|
if let Ok(Some(value)) = storage.get_item(STORAGE_KEY) {
|
||||||
|
return (value == "dark", true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if let Ok(Some(mql)) = window.match_media("(prefers-color-scheme: dark)") {
|
||||||
|
return (mql.matches(), false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
(true, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(not(feature = "web"))]
|
||||||
|
fn initial_theme() -> (bool, bool) {
|
||||||
|
(true, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(feature = "web")]
|
||||||
|
fn apply_theme(dark: bool) {
|
||||||
|
let theme = if dark { "dark" } else { "light" };
|
||||||
|
if let Some(window) = web_sys::window() {
|
||||||
|
if let Some(document) = window.document() {
|
||||||
|
if let Some(root) = document.document_element() {
|
||||||
|
let _ = root.set_attribute("data-theme", theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if let Ok(Some(storage)) = window.local_storage() {
|
||||||
|
let _ = storage.set_item(STORAGE_KEY, theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(not(feature = "web"))]
|
||||||
|
fn apply_theme(_dark: bool) {}
|
||||||
Reference in New Issue
Block a user