mirror of
https://github.com/kunkunsh/kunkun-ext-neohtop.git
synced 2025-04-03 17:36:41 +00:00
Merge branch 'main' into apply_blur
This commit is contained in:
Abdenasser Elidrissi
GitHub
commit
8f46808b7e
@ -1,31 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { getVersion } from "@tauri-apps/api/app";
|
||||
import { onMount } from "svelte";
|
||||
import ThemeSwitcher from "./ThemeSwitcher.svelte";
|
||||
import { ThemeSwitcher } from "$lib/components";
|
||||
import { faInfo } from "@fortawesome/free-solid-svg-icons";
|
||||
import Fa from "svelte-fa";
|
||||
import { ASCII_ART, APP_INFO } from "$lib/constants";
|
||||
|
||||
let version = "";
|
||||
let latestVersion = "";
|
||||
let showInfo = false;
|
||||
let hasUpdate = false;
|
||||
|
||||
const ASCII_ART = `
|
||||
███╗ ██╗███████╗ ██████╗ ██╗ ██╗████████╗ ██████╗ ██████╗
|
||||
████╗ ██║██╔════╝██╔═══██╗██║ ██║╚══██╔══╝██╔═══██╗██╔══██╗
|
||||
██╔██╗ ██║█████╗ ██║ ██║███████║ ██║ ██║ ██║██████╔╝
|
||||
██║╚██╗██║██╔══╝ ██║ ██║██╔══██║ ██║ ██║ ██║██╔═══╝
|
||||
██║ ╚████║███████╗╚██████╔╝██║ ██║ ██║ ╚██████╔╝██║
|
||||
╚═╝ ╚═══╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝
|
||||
`;
|
||||
|
||||
const APP_INFO = {
|
||||
name: "NeoHtop",
|
||||
developer: "Abdenasser",
|
||||
github: "https://github.com/Abdenasser/neohtop",
|
||||
stack: ["Tauri", "Rust", "Svelte", "TypeScript"],
|
||||
};
|
||||
|
||||
async function checkLatestVersion() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
|
||||
@ -1,430 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
faThumbtack,
|
||||
faInfoCircle,
|
||||
faXmark,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import Fa from "svelte-fa";
|
||||
import type { Process, Column } from "$lib/types";
|
||||
import * as SimpleIcons from "simple-icons";
|
||||
|
||||
export let processes: Process[];
|
||||
export let columns: Column[];
|
||||
export let systemStats: { memory_total: number } | null;
|
||||
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
|
||||
export let pinnedProcesses: Set<string>;
|
||||
|
||||
export let onToggleSort: (field: keyof Process) => void;
|
||||
export let onTogglePin: (command: string) => void;
|
||||
export let onShowDetails: (process: Process) => void;
|
||||
export let onKillProcess: (process: Process) => void;
|
||||
|
||||
function getSortIndicator(field: keyof Process) {
|
||||
if (sortConfig.field !== field) return "↕";
|
||||
return sortConfig.direction === "asc" ? "↑" : "↓";
|
||||
}
|
||||
|
||||
function handleImageError(event: Event) {
|
||||
const img = event.target as HTMLImageElement;
|
||||
img.src = getIconForProcess("default"); // Fallback to default icon
|
||||
img.onerror = null; // Prevent infinite loop if default icon also fails
|
||||
}
|
||||
|
||||
function getIconForProcess(name: string): string {
|
||||
// First try with com.company.something pattern
|
||||
if (name.startsWith("com.")) {
|
||||
const companyName = name.replace(/^com\.([^.]+)\..*$/, "$1");
|
||||
const formattedCompanyName =
|
||||
companyName.charAt(0).toUpperCase() + companyName.slice(1);
|
||||
const companyIconKey = `si${formattedCompanyName}`;
|
||||
const companyIcon =
|
||||
SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
|
||||
|
||||
if (companyIcon) {
|
||||
// Use theme color instead of brand color
|
||||
const color = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--text")
|
||||
.trim();
|
||||
const svg =
|
||||
typeof companyIcon === "object" && "svg" in companyIcon
|
||||
? companyIcon.svg
|
||||
: "";
|
||||
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
||||
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// If no company icon found, fall back to original implementation
|
||||
const cleanName = name
|
||||
.replace(/\.(app|exe)$/i, "")
|
||||
.replace(/[-_./\\]/g, " ")
|
||||
.split(" ")[0]
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
|
||||
const formattedName =
|
||||
cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
|
||||
const iconKey = `si${formattedName}`;
|
||||
let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons];
|
||||
|
||||
// Default icon if no match found
|
||||
if (!simpleIcon) {
|
||||
simpleIcon = SimpleIcons.siGhostery;
|
||||
}
|
||||
|
||||
// Use theme color instead of brand color
|
||||
const color = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--text")
|
||||
.trim();
|
||||
|
||||
const svg =
|
||||
typeof simpleIcon === "object" && "svg" in simpleIcon
|
||||
? simpleIcon.svg
|
||||
: "";
|
||||
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
||||
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{#each columns.filter((col) => col.visible) as column}
|
||||
<th class="sortable" on:click={() => onToggleSort(column.id)}>
|
||||
<div class="th-content">
|
||||
{column.label}
|
||||
<span
|
||||
class="sort-indicator"
|
||||
class:active={sortConfig.field === column.id}
|
||||
>
|
||||
{getSortIndicator(column.id)}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each processes as process (process.pid)}
|
||||
<tr
|
||||
class:high-usage={process.cpu_usage > 50 ||
|
||||
process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
|
||||
class:pinned={pinnedProcesses.has(process.command)}
|
||||
>
|
||||
{#each columns.filter((col) => col.visible) as column}
|
||||
<td class="truncate">
|
||||
{#if column.id === "name"}
|
||||
<div class="name-cell">
|
||||
<img
|
||||
class="process-icon"
|
||||
src={getIconForProcess(process.name)}
|
||||
alt=""
|
||||
height="16"
|
||||
width="16"
|
||||
on:error={handleImageError}
|
||||
/>
|
||||
<span class="process-name">{process.name}</span>
|
||||
</div>
|
||||
{:else if column.format}
|
||||
{@html column.format(process[column.id])}
|
||||
{:else}
|
||||
{process[column.id]}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
<td class="col-actions">
|
||||
<div class="action-buttons">
|
||||
<button
|
||||
class="btn-action pin-btn"
|
||||
class:pinned={pinnedProcesses.has(process.command)}
|
||||
on:click={() => onTogglePin(process.command)}
|
||||
title={pinnedProcesses.has(process.command) ? "Unpin" : "Pin"}
|
||||
>
|
||||
<Fa icon={faThumbtack} />
|
||||
</button>
|
||||
<button
|
||||
class="btn-action info-btn"
|
||||
on:click={() => onShowDetails(process)}
|
||||
title="Show Details"
|
||||
>
|
||||
<Fa icon={faInfoCircle} />
|
||||
</button>
|
||||
<button
|
||||
class="btn-action kill-btn"
|
||||
on:click={() => onKillProcess(process)}
|
||||
title="End Process"
|
||||
>
|
||||
<Fa icon={faXmark} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
/* Scrollbar styles */
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
|
||||
}
|
||||
|
||||
/* Webkit scrollbar styles (Chrome, Safari, Edge) */
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: var(--mantle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: var(--surface2);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-corner {
|
||||
background: var(--mantle);
|
||||
}
|
||||
|
||||
/* When both scrollbars are present, add some padding to prevent overlap */
|
||||
.table-container::-webkit-scrollbar-corner {
|
||||
background-color: var(--mantle);
|
||||
}
|
||||
|
||||
table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--mantle);
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
color: var(--subtext0);
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
transition: background-color 0.2s ease;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
color: var(--text);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: var(--surface0);
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.th-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sort-indicator {
|
||||
color: var(--overlay0);
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sort-indicator.active {
|
||||
color: var(--blue);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sortable:hover .sort-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.high-usage {
|
||||
background-color: color-mix(in srgb, var(--red) 10%, transparent);
|
||||
}
|
||||
|
||||
.high-usage:hover {
|
||||
background-color: color-mix(in srgb, var(--red) 15%, transparent);
|
||||
}
|
||||
|
||||
tr.pinned {
|
||||
background-color: color-mix(in srgb, var(--blue) 10%, transparent);
|
||||
}
|
||||
|
||||
tr.pinned:hover {
|
||||
background-color: color-mix(in srgb, var(--blue) 15%, transparent);
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.col-actions {
|
||||
position: sticky;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: var(--base);
|
||||
border-left: 1px solid var(--surface0);
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-action::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-action:hover::before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.pin-btn {
|
||||
color: var(--sapphire);
|
||||
}
|
||||
|
||||
.pin-btn::before {
|
||||
background: var(--sapphire);
|
||||
}
|
||||
|
||||
.pin-btn.pinned {
|
||||
color: var(--blue);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.pin-btn.pinned::before {
|
||||
background: var(--blue);
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
color: var(--lavender);
|
||||
}
|
||||
|
||||
.info-btn::before {
|
||||
background: var(--lavender);
|
||||
}
|
||||
|
||||
.kill-btn {
|
||||
color: var(--red);
|
||||
border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
|
||||
}
|
||||
|
||||
.kill-btn:hover {
|
||||
color: var(--base);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.kill-btn:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
.btn-action:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.pin-btn.pinned:active {
|
||||
transform: rotate(45deg) translateY(1px);
|
||||
}
|
||||
|
||||
.btn-action:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
|
||||
}
|
||||
|
||||
.btn-action:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-action:disabled:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-action:disabled::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.process-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -1,461 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Fa from "svelte-fa";
|
||||
import {
|
||||
faMicrochip,
|
||||
faMemory,
|
||||
faServer,
|
||||
faNetworkWired,
|
||||
faHardDrive,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import type { SystemStats } from "$lib/types";
|
||||
import {
|
||||
formatUptime,
|
||||
formatMemorySize,
|
||||
formatPercentage,
|
||||
getUsageClass,
|
||||
} from "$lib/utils";
|
||||
|
||||
export let systemStats: SystemStats | null = null;
|
||||
$: memoryPercentage = systemStats
|
||||
? (systemStats.memory_used / systemStats.memory_total) * 100
|
||||
: 0;
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let value = bytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (value >= 1024 && unitIndex < units.length - 1) {
|
||||
value /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${value.toFixed(1)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
$: diskUsagePercentage = systemStats
|
||||
? (systemStats.disk_used_bytes / systemStats.disk_total_bytes) * 100
|
||||
: 0;
|
||||
</script>
|
||||
|
||||
<div class="dashboard-stats">
|
||||
{#if systemStats}
|
||||
<div class="stats-layout">
|
||||
<!-- CPU Panel -->
|
||||
<div class="stat-panel">
|
||||
<div class="panel-header">
|
||||
<Fa icon={faMicrochip} />
|
||||
<h3>CPU Usage</h3>
|
||||
<div class="usage-pill">
|
||||
{formatPercentage(
|
||||
systemStats.cpu_usage.reduce((a, b) => a + b, 0) /
|
||||
systemStats.cpu_usage.length,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-content cpu-grid">
|
||||
{#each systemStats.cpu_usage as usage, i}
|
||||
<div class="stat-item with-progress">
|
||||
<div class="progress-container">
|
||||
<span class="label">Core {i}</span>
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="usage-bar {getUsageClass(usage)}"
|
||||
style="transform: translateX({usage - 100}%);"
|
||||
></div>
|
||||
</div>
|
||||
<span class="value">{Math.round(usage)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Panel -->
|
||||
<div class="stat-panel">
|
||||
<div class="panel-header">
|
||||
<Fa icon={faMemory} />
|
||||
<h3>Memory</h3>
|
||||
<div class="usage-pill">{formatPercentage(memoryPercentage)}</div>
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
<div class="stat-item with-progress">
|
||||
<div class="memory-progress-container">
|
||||
<span class="label">Memory usage</span>
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="usage-bar {getUsageClass(memoryPercentage)}"
|
||||
style="transform: translateX({memoryPercentage - 100}%);"
|
||||
></div>
|
||||
</div>
|
||||
<span class="value">{formatPercentage(memoryPercentage)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>Total</span>
|
||||
<span>{formatMemorySize(systemStats.memory_total)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>Used</span>
|
||||
<span>{formatMemorySize(systemStats.memory_used)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>Free</span>
|
||||
<span>{formatMemorySize(systemStats.memory_free)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage Panel -->
|
||||
<div class="stat-panel">
|
||||
<div class="panel-header">
|
||||
<Fa icon={faHardDrive} />
|
||||
<h3>Storage</h3>
|
||||
<div class="usage-pill">
|
||||
{formatPercentage(diskUsagePercentage)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
<div class="stat-item">
|
||||
<span>Total</span>
|
||||
<span>{formatBytes(systemStats.disk_total_bytes)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>Used</span>
|
||||
<span>{formatBytes(systemStats.disk_used_bytes)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>Free</span>
|
||||
<span>{formatBytes(systemStats.disk_free_bytes)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Panel -->
|
||||
<div class="stat-panel">
|
||||
<div class="panel-header">
|
||||
<Fa icon={faServer} />
|
||||
<h3>System</h3>
|
||||
</div>
|
||||
<div class="system-grid">
|
||||
<div class="stat-item">
|
||||
<span>Uptime</span>
|
||||
<span>{formatUptime(systemStats.uptime)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>1m Load</span>
|
||||
<span>{systemStats.load_avg[0].toFixed(2)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>5m Load</span>
|
||||
<span>{systemStats.load_avg[1].toFixed(2)}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>15m Load</span>
|
||||
<span>{systemStats.load_avg[2].toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Panel -->
|
||||
<div class="stat-panel">
|
||||
<div class="panel-header">
|
||||
<Fa icon={faNetworkWired} />
|
||||
<h3>Network I/O</h3>
|
||||
</div>
|
||||
<div class="network-stats">
|
||||
<div class="stat-item">
|
||||
<span>↓ Receiving</span>
|
||||
<span>{formatBytes(systemStats.network_rx_bytes)}/s</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span>↑ Sending</span>
|
||||
<span>{formatBytes(systemStats.network_tx_bytes)}/s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-stats {
|
||||
padding: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stats-layout {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat-panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background-color: var(--mantle);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header :global(svg) {
|
||||
color: var(--blue);
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.usage-pill {
|
||||
margin-left: auto;
|
||||
background: var(--surface0);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cpu-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.cpu-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.cpu-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
height: 8px;
|
||||
background: var(--surface0);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-container.main-bar {
|
||||
height: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.usage-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.usage-bar.low {
|
||||
background: var(--blue);
|
||||
}
|
||||
.usage-bar.medium {
|
||||
background: var(--yellow);
|
||||
}
|
||||
.usage-bar.high {
|
||||
background: var(--peach);
|
||||
}
|
||||
.usage-bar.critical {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.memory-grid,
|
||||
.disk-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.system-grid,
|
||||
.network-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.load-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.network-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stat-item span:first-child {
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.stat-item span:last-child {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.network-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.stat-item.with-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.7rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 4rem 1fr 3rem;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.memory-progress-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 5rem 1fr 2.5rem;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.memory-progress-container .label {
|
||||
color: var(--subtext0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.memory-progress-container .value {
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-container .label {
|
||||
color: var(--subtext0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-container .value {
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
height: 8px;
|
||||
background: var(--surface0);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.usage-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.cpu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.4rem 2rem;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem 1fr 2.5rem;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Make CPU panel take more space */
|
||||
.stat-panel:first-child {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
/* Customize flex distribution for each panel */
|
||||
.stat-panel:nth-child(1) {
|
||||
flex: 2.5; /* CPU: more space for 2 columns */
|
||||
}
|
||||
.stat-panel:nth-child(2) {
|
||||
flex: 2; /* Memory: more space for details */
|
||||
}
|
||||
.stat-panel:nth-child(3),
|
||||
.stat-panel:nth-child(4),
|
||||
.stat-panel:nth-child(5) {
|
||||
flex: 0.8; /* Storage, System, and Network: less space */
|
||||
min-width: 125px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { themeStore } from "$lib/stores";
|
||||
import { themes } from "$lib/styles";
|
||||
import { themes } from "$lib/definitions";
|
||||
import { fade } from "svelte/transition";
|
||||
import Fa from "svelte-fa";
|
||||
import {
|
||||
@ -8,51 +8,12 @@
|
||||
faChevronRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { platform } from "@tauri-apps/plugin-os";
|
||||
import { THEME_GROUPS } from "$lib/constants";
|
||||
|
||||
let showMenu = false;
|
||||
|
||||
const themeGroups = [
|
||||
{
|
||||
label: "Dark",
|
||||
themes: [
|
||||
"catppuccin",
|
||||
"dracula",
|
||||
"monokaiPro",
|
||||
"tokyoNight",
|
||||
"ayuDark",
|
||||
"ayuMirage",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Light",
|
||||
themes: ["githubLight", "solarizedLight", "oneLight", "ayuLight"],
|
||||
},
|
||||
{
|
||||
label: "Warm",
|
||||
themes: ["gruvbox"],
|
||||
},
|
||||
{
|
||||
label: "Cool",
|
||||
themes: ["nord", "oneDark"],
|
||||
},
|
||||
{
|
||||
label: "Fun",
|
||||
themes: [
|
||||
"bubblegum",
|
||||
"rosePine",
|
||||
"cottonCandy",
|
||||
"synthwave",
|
||||
"candyfloss",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Retro",
|
||||
themes: ["terminal", "amber", "ibmPC"],
|
||||
},
|
||||
{
|
||||
label: "Accessibility",
|
||||
themes: ["highContrast"],
|
||||
},
|
||||
...THEME_GROUPS,
|
||||
...(platform() === "windows" || platform() === "macos"
|
||||
? [
|
||||
{
|
||||
|
||||
@ -1,18 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { Window } from "@tauri-apps/api/window";
|
||||
|
||||
const appWindow = new Window("main");
|
||||
let isMaximized = false;
|
||||
|
||||
async function toggleMaximize() {
|
||||
isMaximized = await appWindow.isMaximized();
|
||||
if (isMaximized) {
|
||||
await appWindow.unmaximize();
|
||||
} else {
|
||||
await appWindow.maximize();
|
||||
}
|
||||
isMaximized = await appWindow.isMaximized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="title-bar" data-tauri-drag-region>
|
||||
|
||||
@ -1,542 +0,0 @@
|
||||
<script lang="ts">
|
||||
import AppInfo from "./AppInfo.svelte";
|
||||
import { statusMap } from "$lib/utils";
|
||||
import Fa from "svelte-fa";
|
||||
import {
|
||||
faPlay,
|
||||
faPause,
|
||||
faChevronDown,
|
||||
faChevronRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { configStore } from "$lib/stores/config";
|
||||
import type { AppConfig } from "$lib/types/config";
|
||||
export let searchTerm: string;
|
||||
export let statusFilter: string = "all";
|
||||
export let itemsPerPage: number;
|
||||
export let currentPage: number;
|
||||
export let totalPages: number;
|
||||
export let totalResults: number;
|
||||
export let columns: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
required?: boolean;
|
||||
}>;
|
||||
export let refreshRate: number;
|
||||
export let isFrozen: boolean;
|
||||
|
||||
const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
|
||||
let showColumnMenu = false;
|
||||
const statusOptions = [
|
||||
{ value: "all", label: "All Statuses" },
|
||||
...Object.values(statusMap).map((status) => ({
|
||||
value: status.label,
|
||||
label: status.label,
|
||||
})),
|
||||
];
|
||||
|
||||
const refreshRateOptions = [
|
||||
{ value: 1000, label: "1s" },
|
||||
{ value: 2000, label: "2s" },
|
||||
{ value: 5000, label: "5s" },
|
||||
{ value: 10000, label: "10s" },
|
||||
{ value: 30000, label: "30s" },
|
||||
];
|
||||
|
||||
function changePage(page: number) {
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
currentPage = page;
|
||||
}
|
||||
}
|
||||
|
||||
function handleColumnVisibilityChange(columnId: string, visible: boolean) {
|
||||
configStore.updateConfig({
|
||||
appearance: {
|
||||
columnVisibility: {
|
||||
...$configStore.appearance.columnVisibility,
|
||||
[columnId]: visible,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||
configStore.updateConfig({
|
||||
behavior: {
|
||||
...$configStore.behavior,
|
||||
[key]: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-content">
|
||||
<div class="search-box">
|
||||
<div class="search-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search processes"
|
||||
bind:value={searchTerm}
|
||||
class="search-input"
|
||||
/>
|
||||
{#if searchTerm}
|
||||
<button class="btn-clear" on:click={() => (searchTerm = "")}>
|
||||
Clear
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
<select
|
||||
bind:value={statusFilter}
|
||||
on:change={() =>
|
||||
updateBehaviorConfig("defaultStatusFilter", statusFilter)}
|
||||
class="select-input"
|
||||
>
|
||||
{#each statusOptions as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-spacer"></div>
|
||||
|
||||
<div class="pagination-controls">
|
||||
<select
|
||||
class="select-input"
|
||||
bind:value={itemsPerPage}
|
||||
on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
|
||||
aria-label="Items per page"
|
||||
>
|
||||
{#each itemsPerPageOptions as option}
|
||||
<option value={option}>{option} per page</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<div class="pagination">
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === 1}
|
||||
on:click={() => changePage(1)}
|
||||
>
|
||||
««
|
||||
</button>
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === 1}
|
||||
on:click={() => changePage(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<div class="page-info">
|
||||
<span>Page {currentPage} of {totalPages}</span>
|
||||
<span class="results-info">({totalResults} processes)</span>
|
||||
</div>
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === totalPages}
|
||||
on:click={() => changePage(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === totalPages}
|
||||
on:click={() => changePage(totalPages)}
|
||||
>
|
||||
»»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-spacer"></div>
|
||||
|
||||
<div class="column-toggle">
|
||||
<button
|
||||
class="btn-toggle"
|
||||
on:click={() => (showColumnMenu = !showColumnMenu)}
|
||||
aria-label="Toggle columns"
|
||||
>
|
||||
Columns
|
||||
<span class="icon">
|
||||
{#if showColumnMenu}
|
||||
<Fa icon={faChevronDown} />
|
||||
{:else}
|
||||
<Fa icon={faChevronRight} />
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{#if showColumnMenu}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="column-menu" on:mouseleave={() => (showColumnMenu = false)}>
|
||||
{#each columns as column}
|
||||
<label class="column-option">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={column.visible}
|
||||
disabled={column.required}
|
||||
on:change={(e) =>
|
||||
handleColumnVisibilityChange(
|
||||
column.id,
|
||||
e.currentTarget.checked,
|
||||
)}
|
||||
/>
|
||||
<span>{column.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="toolbar-group">
|
||||
<div class="refresh-controls">
|
||||
<select
|
||||
class="select-input"
|
||||
bind:value={refreshRate}
|
||||
on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
|
||||
disabled={isFrozen}
|
||||
>
|
||||
{#each refreshRateOptions as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button
|
||||
class="btn-action"
|
||||
class:frozen={isFrozen}
|
||||
on:click={() => (isFrozen = !isFrozen)}
|
||||
title={isFrozen ? "Resume Updates" : "Pause Updates"}
|
||||
>
|
||||
{#if isFrozen}
|
||||
<Fa icon={faPlay} />
|
||||
{:else}
|
||||
<Fa icon={faPause} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppInfo />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toolbar {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
background-color: var(--mantle);
|
||||
}
|
||||
|
||||
.toolbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
padding-right: 70px;
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
background-color: var(--surface0);
|
||||
color: var(--text);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
color: var(--subtext0);
|
||||
background: var(--surface1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
background: var(--surface2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 4px;
|
||||
background: var(--overlay0);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
|
||||
no-repeat 50% 50%;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
|
||||
no-repeat 50% 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-cancel-button:hover {
|
||||
background: var(--text);
|
||||
}
|
||||
|
||||
.search-input:hover {
|
||||
background-color: var(--surface1);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
padding-right: 24px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.select-input:hover {
|
||||
background-color: var(--surface1);
|
||||
}
|
||||
|
||||
.select-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-page {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-page:hover:not(:disabled) {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.btn-page:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 12px;
|
||||
color: var(--subtext0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.page-info span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.results-info {
|
||||
color: var(--overlay0);
|
||||
}
|
||||
|
||||
.column-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-toggle:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 10px;
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.column-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
padding: 8px;
|
||||
background: var(--base);
|
||||
border: 1px solid var(--surface0);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar-track {
|
||||
background: var(--mantle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar-thumb {
|
||||
background: var(--surface2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.column-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-option:hover {
|
||||
background: var(--surface0);
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--surface2);
|
||||
border-radius: 4px;
|
||||
background: var(--mantle);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"]:checked {
|
||||
background: var(--blue);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
color: var(--base);
|
||||
font-size: 12px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"]:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.refresh-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refresh-controls :global(svg) {
|
||||
font-size: 14px;
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: var(--surface0);
|
||||
color: var(--text);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.btn-action.frozen {
|
||||
background: var(--blue);
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
.select-input {
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
background: var(--surface0);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-input:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
7
src/lib/components/index.ts
Normal file
7
src/lib/components/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export * from "./toolbar";
|
||||
export * from "./process";
|
||||
export * from "./stats";
|
||||
export * from "./modals";
|
||||
export { default as AppInfo } from "./AppInfo.svelte";
|
||||
export { default as TitleBar } from "./TitleBar.svelte";
|
||||
export { default as ThemeSwitcher } from "./ThemeSwitcher.svelte";
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Modal from "./Modal.svelte";
|
||||
import { Modal } from "$lib/components";
|
||||
|
||||
interface Process {
|
||||
pid: number;
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Modal from "./Modal.svelte";
|
||||
import { formatStatus, formatUptime } from "$lib/utils";
|
||||
import { Modal } from "$lib/components";
|
||||
import { formatUptime, formatBytes, formatDate } from "$lib/utils";
|
||||
import type { Process } from "$lib/types";
|
||||
import Fa from "svelte-fa";
|
||||
import {
|
||||
@ -8,34 +8,15 @@
|
||||
faMemory,
|
||||
faMicrochip,
|
||||
faHardDrive,
|
||||
faNetworkWired,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export let show = false;
|
||||
export let process: Process | null = null;
|
||||
export let onClose: () => void;
|
||||
|
||||
$: currentProcess = process;
|
||||
|
||||
function formatMemory(bytes: number) {
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024)
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number) {
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal {show} title="Process Details" maxWidth="700px" {onClose}>
|
||||
{#if currentProcess}
|
||||
{#if process}
|
||||
<div class="process-details">
|
||||
<!-- Basic Info Section -->
|
||||
<section class="detail-section">
|
||||
@ -43,25 +24,23 @@
|
||||
<div class="detail-grid">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Name:</span>
|
||||
<span class="detail-value">{currentProcess.name}</span>
|
||||
<span class="detail-value">{process.name}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">PID:</span>
|
||||
<span class="detail-value">{currentProcess.pid}</span>
|
||||
<span class="detail-value">{process.pid}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Parent PID:</span>
|
||||
<span class="detail-value">{currentProcess.ppid}</span>
|
||||
<span class="detail-value">{process.ppid}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">User:</span>
|
||||
<span class="detail-value">{currentProcess.user}</span>
|
||||
<span class="detail-value">{process.user}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Status:</span>
|
||||
<span class="detail-value">
|
||||
{@html formatStatus(currentProcess.status)}
|
||||
</span>
|
||||
<span class="detail-value">{process.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -80,12 +59,12 @@
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
style="width: {currentProcess.cpu_usage}%"
|
||||
class:high={currentProcess.cpu_usage > 50}
|
||||
class:critical={currentProcess.cpu_usage > 80}
|
||||
style="width: {process.cpu_usage}%"
|
||||
class:high={process.cpu_usage > 50}
|
||||
class:critical={process.cpu_usage > 80}
|
||||
></div>
|
||||
</div>
|
||||
<span>{currentProcess.cpu_usage.toFixed(1)}%</span>
|
||||
<span>{process.cpu_usage.toFixed(1)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -96,8 +75,8 @@
|
||||
<span>Memory Usage</span>
|
||||
</div>
|
||||
<div class="resource-stats">
|
||||
<div>Physical: {formatBytes(currentProcess.memory_usage)}</div>
|
||||
<div>Virtual: {formatBytes(currentProcess.virtual_memory)}</div>
|
||||
<div>Physical: {formatBytes(process.memory_usage)}</div>
|
||||
<div>Virtual: {formatBytes(process.virtual_memory)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -108,8 +87,8 @@
|
||||
<span>Disk I/O</span>
|
||||
</div>
|
||||
<div class="resource-stats">
|
||||
<div>Read: {formatBytes(currentProcess.disk_usage[0])}</div>
|
||||
<div>Written: {formatBytes(currentProcess.disk_usage[1])}</div>
|
||||
<div>Read: {formatBytes(process.disk_usage[0])}</div>
|
||||
<div>Written: {formatBytes(process.disk_usage[1])}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -120,8 +99,8 @@
|
||||
<span>Time Information</span>
|
||||
</div>
|
||||
<div class="resource-stats">
|
||||
<div>Started: {formatDate(currentProcess.start_time)}</div>
|
||||
<div>Running: {formatUptime(currentProcess.run_time)}</div>
|
||||
<div>Started: {formatDate(process.start_time)}</div>
|
||||
<div>Running: {formatUptime(process.run_time)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,17 +112,17 @@
|
||||
<div class="detail-grid">
|
||||
<div class="detail-row full-width">
|
||||
<span class="detail-label">Command:</span>
|
||||
<span class="detail-value command">{currentProcess.command}</span>
|
||||
<span class="detail-value command">{process.command}</span>
|
||||
</div>
|
||||
<div class="detail-row full-width">
|
||||
<span class="detail-label">Root:</span>
|
||||
<span class="detail-value path">{currentProcess.root}</span>
|
||||
<span class="detail-value path">{process.root}</span>
|
||||
</div>
|
||||
{#if currentProcess.environ.length > 0}
|
||||
{#if process.environ.length > 0}
|
||||
<div class="detail-row full-width">
|
||||
<span class="detail-label">Environment:</span>
|
||||
<div class="detail-value env-vars">
|
||||
{#each currentProcess.environ as env}
|
||||
{#each process.environ as env}
|
||||
<div class="env-var">{env}</div>
|
||||
{/each}
|
||||
</div>
|
||||
3
src/lib/components/modals/index.ts
Normal file
3
src/lib/components/modals/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as Modal } from "./Modal.svelte";
|
||||
export { default as ProcessDetailsModal } from "./ProcessDetailsModal.svelte";
|
||||
export { default as KillProcessModal } from "./KillProcessModal.svelte";
|
||||
164
src/lib/components/process/ActionButtons.svelte
Normal file
164
src/lib/components/process/ActionButtons.svelte
Normal file
@ -0,0 +1,164 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
faThumbtack,
|
||||
faInfoCircle,
|
||||
faXmark,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import Fa from "svelte-fa";
|
||||
import type { Process } from "$lib/types";
|
||||
|
||||
export let process: Process;
|
||||
export let isPinned: boolean;
|
||||
export let onTogglePin: (command: string) => void;
|
||||
export let onShowDetails: (process: Process) => void;
|
||||
export let onKillProcess: (process: Process) => void;
|
||||
</script>
|
||||
|
||||
<td class="col-actions">
|
||||
<div class="action-buttons">
|
||||
<button
|
||||
class="btn-action pin-btn"
|
||||
class:pinned={isPinned}
|
||||
on:click={() => onTogglePin(process.command)}
|
||||
title={isPinned ? "Unpin" : "Pin"}
|
||||
>
|
||||
<Fa icon={faThumbtack} />
|
||||
</button>
|
||||
<button
|
||||
class="btn-action info-btn"
|
||||
on:click={() => onShowDetails(process)}
|
||||
title="Show Details"
|
||||
>
|
||||
<Fa icon={faInfoCircle} />
|
||||
</button>
|
||||
<button
|
||||
class="btn-action kill-btn"
|
||||
on:click={() => onKillProcess(process)}
|
||||
title="End Process"
|
||||
>
|
||||
<Fa icon={faXmark} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<style>
|
||||
td {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
color: var(--text);
|
||||
z-index: 1;
|
||||
}
|
||||
.col-actions {
|
||||
position: sticky;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: var(--base);
|
||||
border-left: 1px solid var(--surface0);
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-action::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-action:hover::before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.pin-btn {
|
||||
color: var(--sapphire);
|
||||
}
|
||||
|
||||
.pin-btn::before {
|
||||
background: var(--sapphire);
|
||||
}
|
||||
|
||||
.pin-btn.pinned {
|
||||
color: var(--blue);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.pin-btn.pinned::before {
|
||||
background: var(--blue);
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
color: var(--lavender);
|
||||
}
|
||||
|
||||
.info-btn::before {
|
||||
background: var(--lavender);
|
||||
}
|
||||
|
||||
.kill-btn {
|
||||
color: var(--red);
|
||||
border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
|
||||
}
|
||||
|
||||
.kill-btn:hover {
|
||||
color: var(--base);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.kill-btn:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
.btn-action:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.pin-btn.pinned:active {
|
||||
transform: rotate(45deg) translateY(1px);
|
||||
}
|
||||
|
||||
.btn-action:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
|
||||
}
|
||||
|
||||
.btn-action:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-action:disabled:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-action:disabled::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
84
src/lib/components/process/ProcessIcon.svelte
Normal file
84
src/lib/components/process/ProcessIcon.svelte
Normal file
@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import * as SimpleIcons from "simple-icons";
|
||||
|
||||
export let processName: string;
|
||||
export let size: number = 16;
|
||||
|
||||
function handleImageError(event: Event) {
|
||||
const img = event.target as HTMLImageElement;
|
||||
img.src = getIconForProcess("default");
|
||||
img.onerror = null;
|
||||
}
|
||||
|
||||
function getIconForProcess(name: string): string {
|
||||
// First try with com.company.something pattern
|
||||
if (name.startsWith("com.")) {
|
||||
const companyName = name.replace(/^com\.([^.]+)\..*$/, "$1");
|
||||
const formattedCompanyName =
|
||||
companyName.charAt(0).toUpperCase() + companyName.slice(1);
|
||||
const companyIconKey = `si${formattedCompanyName}`;
|
||||
const companyIcon =
|
||||
SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
|
||||
|
||||
if (companyIcon) {
|
||||
// Use theme color instead of brand color
|
||||
const color = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--text")
|
||||
.trim();
|
||||
const svg =
|
||||
typeof companyIcon === "object" && "svg" in companyIcon
|
||||
? companyIcon.svg
|
||||
: "";
|
||||
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
||||
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// If no company icon found, fall back to original implementation
|
||||
const cleanName = name
|
||||
.replace(/\.(app|exe)$/i, "")
|
||||
.replace(/[-_./\\]/g, " ")
|
||||
.split(" ")[0]
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
|
||||
const formattedName =
|
||||
cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
|
||||
const iconKey = `si${formattedName}`;
|
||||
let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons];
|
||||
|
||||
// Default icon if no match found
|
||||
if (!simpleIcon) {
|
||||
simpleIcon = SimpleIcons.siGhostery;
|
||||
}
|
||||
|
||||
// Use theme color instead of brand color
|
||||
const color = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--text")
|
||||
.trim();
|
||||
|
||||
const svg =
|
||||
typeof simpleIcon === "object" && "svg" in simpleIcon
|
||||
? simpleIcon.svg
|
||||
: "";
|
||||
const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
|
||||
return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<img
|
||||
class="process-icon"
|
||||
src={getIconForProcess(processName)}
|
||||
alt=""
|
||||
height={size}
|
||||
width={size}
|
||||
on:error={handleImageError}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.process-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
79
src/lib/components/process/ProcessRow.svelte
Normal file
79
src/lib/components/process/ProcessRow.svelte
Normal file
@ -0,0 +1,79 @@
|
||||
<script lang="ts">
|
||||
import type { Process, Column } from "$lib/types";
|
||||
import { ProcessIcon, ActionButtons } from "$lib/components";
|
||||
|
||||
export let process: Process;
|
||||
export let columns: Column[];
|
||||
export let isPinned: boolean;
|
||||
export let isHighUsage: boolean;
|
||||
|
||||
export let onTogglePin: (command: string) => void;
|
||||
export let onShowDetails: (process: Process) => void;
|
||||
export let onKillProcess: (process: Process) => void;
|
||||
</script>
|
||||
|
||||
<tr class:high-usage={isHighUsage} class:pinned={isPinned}>
|
||||
{#each columns.filter((col) => col.visible) as column}
|
||||
<td class="truncate">
|
||||
{#if column.id === "name"}
|
||||
<div class="name-cell">
|
||||
<ProcessIcon processName={process.name} />
|
||||
<span class="process-name">{process.name}</span>
|
||||
</div>
|
||||
{:else if column.format}
|
||||
{@html column.format(process[column.id])}
|
||||
{:else}
|
||||
{process[column.id]}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
<ActionButtons
|
||||
{process}
|
||||
{isPinned}
|
||||
{onTogglePin}
|
||||
{onShowDetails}
|
||||
{onKillProcess}
|
||||
/>
|
||||
</tr>
|
||||
|
||||
<style>
|
||||
td {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
color: var(--text);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: var(--surface0);
|
||||
}
|
||||
|
||||
.high-usage {
|
||||
background-color: color-mix(in srgb, var(--red) 10%, transparent);
|
||||
}
|
||||
|
||||
.high-usage:hover {
|
||||
background-color: color-mix(in srgb, var(--red) 15%, transparent);
|
||||
}
|
||||
|
||||
tr.pinned {
|
||||
background-color: color-mix(in srgb, var(--blue) 10%, transparent);
|
||||
}
|
||||
|
||||
tr.pinned:hover {
|
||||
background-color: color-mix(in srgb, var(--blue) 15%, transparent);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
77
src/lib/components/process/ProcessTable.svelte
Normal file
77
src/lib/components/process/ProcessTable.svelte
Normal file
@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
import type { Process, Column } from "$lib/types";
|
||||
import { TableHeader, ProcessRow } from "$lib/components";
|
||||
|
||||
export let processes: Process[];
|
||||
export let columns: Column[];
|
||||
export let systemStats: { memory_total: number } | null;
|
||||
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
|
||||
export let pinnedProcesses: Set<string>;
|
||||
|
||||
export let onToggleSort: (field: keyof Process) => void;
|
||||
export let onTogglePin: (command: string) => void;
|
||||
export let onShowDetails: (process: Process) => void;
|
||||
export let onKillProcess: (process: Process) => void;
|
||||
</script>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<TableHeader {columns} {sortConfig} {onToggleSort} />
|
||||
<tbody>
|
||||
{#each processes as process (process.pid)}
|
||||
<ProcessRow
|
||||
{process}
|
||||
{columns}
|
||||
isPinned={pinnedProcesses.has(process.command)}
|
||||
isHighUsage={process.cpu_usage > 50 ||
|
||||
process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
|
||||
{onTogglePin}
|
||||
{onShowDetails}
|
||||
{onKillProcess}
|
||||
/>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--surface2) var(--mantle);
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: var(--mantle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: var(--surface2);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-corner {
|
||||
background: var(--mantle);
|
||||
}
|
||||
|
||||
table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
79
src/lib/components/process/TableHeader.svelte
Normal file
79
src/lib/components/process/TableHeader.svelte
Normal file
@ -0,0 +1,79 @@
|
||||
<script lang="ts">
|
||||
import type { Process, Column } from "$lib/types";
|
||||
|
||||
export let columns: Column[];
|
||||
export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
|
||||
export let onToggleSort: (field: keyof Process) => void;
|
||||
|
||||
function getSortIndicator(field: keyof Process) {
|
||||
if (sortConfig.field !== field) return "↕";
|
||||
return sortConfig.direction === "asc" ? "↑" : "↓";
|
||||
}
|
||||
</script>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
{#each columns.filter((col) => col.visible) as column}
|
||||
<th class="sortable" on:click={() => onToggleSort(column.id)}>
|
||||
<div class="th-content">
|
||||
{column.label}
|
||||
<span
|
||||
class="sort-indicator"
|
||||
class:active={sortConfig.field === column.id}
|
||||
>
|
||||
{getSortIndicator(column.id)}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<style>
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--mantle);
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
color: var(--subtext0);
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
transition: background-color 0.2s ease;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.th-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sort-indicator {
|
||||
color: var(--overlay0);
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sort-indicator.active {
|
||||
color: var(--blue);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sortable:hover .sort-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
5
src/lib/components/process/index.ts
Normal file
5
src/lib/components/process/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export { default as ProcessTable } from "./ProcessTable.svelte";
|
||||
export { default as ProcessRow } from "./ProcessRow.svelte";
|
||||
export { default as TableHeader } from "./TableHeader.svelte";
|
||||
export { default as ActionButtons } from "./ActionButtons.svelte";
|
||||
export { default as ProcessIcon } from "./ProcessIcon.svelte";
|
||||
59
src/lib/components/stats/CpuPanel.svelte
Normal file
59
src/lib/components/stats/CpuPanel.svelte
Normal file
@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
|
||||
import { PanelHeader, ProgressBar } from "$lib/components";
|
||||
import { formatPercentage } from "$lib/utils";
|
||||
|
||||
export let cpuUsage: number[];
|
||||
|
||||
$: averageUsage = formatPercentage(
|
||||
cpuUsage.reduce((a, b) => a + b, 0) / cpuUsage.length,
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="stat-panel">
|
||||
<PanelHeader icon={faMicrochip} title="CPU Usage" usageValue={averageUsage} />
|
||||
<div class="stats-content cpu-grid">
|
||||
{#each cpuUsage as usage, i}
|
||||
<div class="stat-item with-progress">
|
||||
<ProgressBar
|
||||
label={`Core ${i}`}
|
||||
value={usage}
|
||||
labelWidth="2.5rem"
|
||||
valueWidth="2.5rem"
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-panel {
|
||||
flex: 2.5;
|
||||
min-width: 0;
|
||||
background-color: var(--mantle);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.cpu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.4rem 2rem;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.stat-item.with-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
</style>
|
||||
56
src/lib/components/stats/MemoryPanel.svelte
Normal file
56
src/lib/components/stats/MemoryPanel.svelte
Normal file
@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { faMemory } from "@fortawesome/free-solid-svg-icons";
|
||||
import { PanelHeader, ProgressBar, StatItem } from "$lib/components";
|
||||
import { formatMemorySize, formatPercentage } from "$lib/utils";
|
||||
|
||||
export let memoryTotal: number;
|
||||
export let memoryUsed: number;
|
||||
export let memoryFree: number;
|
||||
|
||||
$: memoryPercentage = (memoryUsed / memoryTotal) * 100;
|
||||
</script>
|
||||
|
||||
<div class="stat-panel">
|
||||
<PanelHeader
|
||||
icon={faMemory}
|
||||
title="Memory"
|
||||
usageValue={formatPercentage(memoryPercentage)}
|
||||
/>
|
||||
<div class="stats-content">
|
||||
<div class="stat-item with-progress">
|
||||
<ProgressBar
|
||||
label="Memory usage"
|
||||
value={memoryPercentage}
|
||||
labelWidth="5rem"
|
||||
valueWidth="2.5rem"
|
||||
/>
|
||||
</div>
|
||||
<StatItem label="Total" value={formatMemorySize(memoryTotal)} />
|
||||
<StatItem label="Used" value={formatMemorySize(memoryUsed)} />
|
||||
<StatItem label="Free" value={formatMemorySize(memoryFree)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-panel {
|
||||
flex: 2;
|
||||
min-width: 0;
|
||||
background-color: var(--mantle);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.stat-item.with-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
</style>
|
||||
34
src/lib/components/stats/NetworkPanel.svelte
Normal file
34
src/lib/components/stats/NetworkPanel.svelte
Normal file
@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { faNetworkWired } from "@fortawesome/free-solid-svg-icons";
|
||||
import { PanelHeader, StatItem } from "$lib/components";
|
||||
import { formatBytes } from "$lib/utils";
|
||||
|
||||
export let networkRxBytes: number;
|
||||
export let networkTxBytes: number;
|
||||
</script>
|
||||
|
||||
<div class="stat-panel">
|
||||
<PanelHeader icon={faNetworkWired} title="Network I/O" />
|
||||
<div class="network-stats">
|
||||
<StatItem label="↓ Receiving" value={formatBytes(networkRxBytes)} />
|
||||
<StatItem label="↑ Sending" value={formatBytes(networkTxBytes)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-panel {
|
||||
flex: 0.8;
|
||||
min-width: 125px;
|
||||
background-color: var(--mantle);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.network-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
50
src/lib/components/stats/PanelHeader.svelte
Normal file
50
src/lib/components/stats/PanelHeader.svelte
Normal file
@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import Fa from "svelte-fa";
|
||||
import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export let icon: IconDefinition;
|
||||
export let title: string;
|
||||
export let usageValue: string | null = null;
|
||||
</script>
|
||||
|
||||
<div class="panel-header">
|
||||
<Fa {icon} />
|
||||
<h3>{title}</h3>
|
||||
{#if usageValue}
|
||||
<div class="usage-pill">{usageValue}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header :global(svg) {
|
||||
color: var(--blue);
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.usage-pill {
|
||||
margin-left: auto;
|
||||
background: var(--surface0);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
80
src/lib/components/stats/ProgressBar.svelte
Normal file
80
src/lib/components/stats/ProgressBar.svelte
Normal file
@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
export let label: string;
|
||||
export let value: number;
|
||||
export let labelWidth = "2.5rem";
|
||||
export let valueWidth = "2.5rem";
|
||||
|
||||
function getUsageClass(usage: number): string {
|
||||
if (usage > 90) return "critical";
|
||||
if (usage > 75) return "high";
|
||||
if (usage > 50) return "medium";
|
||||
return "low";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="progress-container"
|
||||
style="--label-width: {labelWidth}; --value-width: {valueWidth}"
|
||||
>
|
||||
<span class="label">{label}</span>
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="usage-bar {getUsageClass(value)}"
|
||||
style="transform: translateX({value - 100}%);"
|
||||
></div>
|
||||
</div>
|
||||
<span class="value">{Math.round(value)}%</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-width) 1fr var(--value-width);
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--subtext0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
height: 8px;
|
||||
background: var(--surface0);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.usage-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.usage-bar.low {
|
||||
background: var(--blue);
|
||||
}
|
||||
.usage-bar.medium {
|
||||
background: var(--yellow);
|
||||
}
|
||||
.usage-bar.high {
|
||||
background: var(--peach);
|
||||
}
|
||||
.usage-bar.critical {
|
||||
background: var(--red);
|
||||
}
|
||||
</style>
|
||||
30
src/lib/components/stats/StatItem.svelte
Normal file
30
src/lib/components/stats/StatItem.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
export let label: string;
|
||||
export let value: string;
|
||||
</script>
|
||||
|
||||
<div class="stat-item">
|
||||
<span>{label}</span>
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stat-item span:first-child {
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.stat-item span:last-child {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
34
src/lib/components/stats/StatPanel.svelte
Normal file
34
src/lib/components/stats/StatPanel.svelte
Normal file
@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let flex = 1;
|
||||
</script>
|
||||
|
||||
<div class="stat-panel" style="--flex: {flex}">
|
||||
<h3 class="panel-title">{title}</h3>
|
||||
<div class="panel-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-panel {
|
||||
flex: var(--flex);
|
||||
min-width: 125px;
|
||||
background: var(--mantle);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--subtext0);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
52
src/lib/components/stats/StatsBar.svelte
Normal file
52
src/lib/components/stats/StatsBar.svelte
Normal file
@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import type { SystemStats } from "$lib/types";
|
||||
import {
|
||||
CpuPanel,
|
||||
MemoryPanel,
|
||||
StoragePanel,
|
||||
SystemPanel,
|
||||
NetworkPanel,
|
||||
} from "$lib/components";
|
||||
|
||||
export let systemStats: SystemStats | null = null;
|
||||
</script>
|
||||
|
||||
<div class="dashboard-stats">
|
||||
{#if systemStats}
|
||||
<div class="stats-layout">
|
||||
<CpuPanel cpuUsage={systemStats.cpu_usage} />
|
||||
|
||||
<MemoryPanel
|
||||
memoryTotal={systemStats.memory_total}
|
||||
memoryUsed={systemStats.memory_used}
|
||||
memoryFree={systemStats.memory_free}
|
||||
/>
|
||||
|
||||
<StoragePanel
|
||||
diskTotalBytes={systemStats.disk_total_bytes}
|
||||
diskUsedBytes={systemStats.disk_used_bytes}
|
||||
diskFreeBytes={systemStats.disk_free_bytes}
|
||||
/>
|
||||
|
||||
<SystemPanel uptime={systemStats.uptime} loadAvg={systemStats.load_avg} />
|
||||
|
||||
<NetworkPanel
|
||||
networkRxBytes={systemStats.network_rx_bytes}
|
||||
networkTxBytes={systemStats.network_tx_bytes}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-stats {
|
||||
padding: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stats-layout {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
42
src/lib/components/stats/StoragePanel.svelte
Normal file
42
src/lib/components/stats/StoragePanel.svelte
Normal file
@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { faHardDrive } from "@fortawesome/free-solid-svg-icons";
|
||||
import { PanelHeader, StatItem } from "$lib/components";
|
||||
import { formatBytes, formatPercentage } from "$lib/utils";
|
||||
|
||||
export let diskTotalBytes: number;
|
||||
export let diskUsedBytes: number;
|
||||
export let diskFreeBytes: number;
|
||||
|
||||
$: diskUsagePercentage = (diskUsedBytes / diskTotalBytes) * 100;
|
||||
</script>
|
||||
|
||||
<div class="stat-panel">
|
||||
<PanelHeader
|
||||
icon={faHardDrive}
|
||||
title="Storage"
|
||||
usageValue={formatPercentage(diskUsagePercentage)}
|
||||
/>
|
||||
<div class="stats-content">
|
||||
<StatItem label="Total" value={formatBytes(diskTotalBytes)} />
|
||||
<StatItem label="Used" value={formatBytes(diskUsedBytes)} />
|
||||
<StatItem label="Free" value={formatBytes(diskFreeBytes)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-panel {
|
||||
flex: 0.8;
|
||||
min-width: 125px;
|
||||
background-color: var(--mantle);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
37
src/lib/components/stats/SystemPanel.svelte
Normal file
37
src/lib/components/stats/SystemPanel.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { faServer } from "@fortawesome/free-solid-svg-icons";
|
||||
import { PanelHeader, StatItem } from "$lib/components";
|
||||
import { formatUptime } from "$lib/utils";
|
||||
|
||||
export let uptime: number;
|
||||
export let loadAvg: [number, number, number];
|
||||
</script>
|
||||
|
||||
<div class="stat-panel">
|
||||
<PanelHeader icon={faServer} title="System" />
|
||||
<div class="system-grid">
|
||||
<StatItem label="Uptime" value={formatUptime(uptime)} />
|
||||
<StatItem label="1m Load" value={loadAvg[0].toFixed(2)} />
|
||||
<StatItem label="5m Load" value={loadAvg[1].toFixed(2)} />
|
||||
<StatItem label="15m Load" value={loadAvg[2].toFixed(2)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat-panel {
|
||||
flex: 0.8;
|
||||
min-width: 125px;
|
||||
background-color: var(--mantle);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.system-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
9
src/lib/components/stats/index.ts
Normal file
9
src/lib/components/stats/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export { default as StatsBar } from "./StatsBar.svelte";
|
||||
export { default as CpuPanel } from "./CpuPanel.svelte";
|
||||
export { default as MemoryPanel } from "./MemoryPanel.svelte";
|
||||
export { default as StoragePanel } from "./StoragePanel.svelte";
|
||||
export { default as SystemPanel } from "./SystemPanel.svelte";
|
||||
export { default as NetworkPanel } from "./NetworkPanel.svelte";
|
||||
export { default as PanelHeader } from "./PanelHeader.svelte";
|
||||
export { default as ProgressBar } from "./ProgressBar.svelte";
|
||||
export { default as StatItem } from "./StatItem.svelte";
|
||||
172
src/lib/components/toolbar/ColumnToggle.svelte
Normal file
172
src/lib/components/toolbar/ColumnToggle.svelte
Normal file
@ -0,0 +1,172 @@
|
||||
<script lang="ts">
|
||||
import Fa from "svelte-fa";
|
||||
import {
|
||||
faChevronDown,
|
||||
faChevronRight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { settingsStore } from "$lib/stores";
|
||||
|
||||
export let columns: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
required?: boolean;
|
||||
}>;
|
||||
|
||||
let showColumnMenu = false;
|
||||
|
||||
function handleColumnVisibilityChange(columnId: string, visible: boolean) {
|
||||
settingsStore.updateConfig({
|
||||
appearance: {
|
||||
columnVisibility: {
|
||||
...$settingsStore.appearance.columnVisibility,
|
||||
[columnId]: visible,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="column-toggle">
|
||||
<button
|
||||
class="btn-toggle"
|
||||
on:click={() => (showColumnMenu = !showColumnMenu)}
|
||||
aria-label="Toggle columns"
|
||||
>
|
||||
Columns
|
||||
<span class="icon">
|
||||
{#if showColumnMenu}
|
||||
<Fa icon={faChevronDown} />
|
||||
{:else}
|
||||
<Fa icon={faChevronRight} />
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{#if showColumnMenu}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="column-menu" on:mouseleave={() => (showColumnMenu = false)}>
|
||||
{#each columns as column}
|
||||
<label class="column-option">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={column.visible}
|
||||
disabled={column.required}
|
||||
on:change={(e) =>
|
||||
handleColumnVisibilityChange(column.id, e.currentTarget.checked)}
|
||||
/>
|
||||
<span>{column.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.column-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-toggle:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 10px;
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.column-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
padding: 8px;
|
||||
background: var(--base);
|
||||
border: 1px solid var(--surface0);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar-track {
|
||||
background: var(--mantle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar-thumb {
|
||||
background: var(--surface2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-menu::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.column-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-option:hover {
|
||||
background: var(--surface0);
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--surface2);
|
||||
border-radius: 4px;
|
||||
background: var(--mantle);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"]:checked {
|
||||
background: var(--blue);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
color: var(--base);
|
||||
font-size: 12px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.column-option input[type="checkbox"]:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
148
src/lib/components/toolbar/PaginationControls.svelte
Normal file
148
src/lib/components/toolbar/PaginationControls.svelte
Normal file
@ -0,0 +1,148 @@
|
||||
<script lang="ts">
|
||||
import type { AppConfig } from "$lib/types";
|
||||
import { settingsStore } from "$lib/stores";
|
||||
import { ITEMS_PER_PAGE_OPTIONS } from "$lib/constants";
|
||||
|
||||
export let itemsPerPage: number;
|
||||
export let currentPage: number;
|
||||
export let totalPages: number;
|
||||
export let totalResults: number;
|
||||
|
||||
function changePage(page: number) {
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
currentPage = page;
|
||||
}
|
||||
}
|
||||
|
||||
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||
settingsStore.updateConfig({
|
||||
behavior: {
|
||||
...$settingsStore.behavior,
|
||||
[key]: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="pagination-controls">
|
||||
<select
|
||||
class="select-input"
|
||||
bind:value={itemsPerPage}
|
||||
on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
|
||||
aria-label="Items per page"
|
||||
>
|
||||
{#each ITEMS_PER_PAGE_OPTIONS as option}
|
||||
<option value={option}>{option} per page</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<div class="pagination">
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === 1}
|
||||
on:click={() => changePage(1)}
|
||||
>
|
||||
««
|
||||
</button>
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === 1}
|
||||
on:click={() => changePage(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<div class="page-info">
|
||||
<span>Page {currentPage} of {totalPages}</span>
|
||||
<span class="results-info">({totalResults} processes)</span>
|
||||
</div>
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === totalPages}
|
||||
on:click={() => changePage(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
<button
|
||||
class="btn-page"
|
||||
disabled={currentPage === totalPages}
|
||||
on:click={() => changePage(totalPages)}
|
||||
>
|
||||
»»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
padding-right: 24px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.select-input:hover {
|
||||
background-color: var(--surface1);
|
||||
}
|
||||
|
||||
.select-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-page {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
background: var(--surface0);
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-page:hover:not(:disabled) {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.btn-page:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 12px;
|
||||
color: var(--subtext0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.page-info span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.results-info {
|
||||
color: var(--overlay0);
|
||||
}
|
||||
</style>
|
||||
109
src/lib/components/toolbar/RefreshControls.svelte
Normal file
109
src/lib/components/toolbar/RefreshControls.svelte
Normal file
@ -0,0 +1,109 @@
|
||||
<script lang="ts">
|
||||
import Fa from "svelte-fa";
|
||||
import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
|
||||
import type { AppConfig } from "$lib/types";
|
||||
import { settingsStore } from "$lib/stores";
|
||||
import { REFRESH_RATE_OPTIONS } from "$lib/constants";
|
||||
export let refreshRate: number;
|
||||
export let isFrozen: boolean;
|
||||
|
||||
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||
settingsStore.updateConfig({
|
||||
behavior: {
|
||||
...$settingsStore.behavior,
|
||||
[key]: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="refresh-controls">
|
||||
<select
|
||||
class="select-input"
|
||||
bind:value={refreshRate}
|
||||
on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
|
||||
disabled={isFrozen}
|
||||
>
|
||||
{#each REFRESH_RATE_OPTIONS as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button
|
||||
class="btn-action"
|
||||
class:frozen={isFrozen}
|
||||
on:click={() => (isFrozen = !isFrozen)}
|
||||
title={isFrozen ? "Resume Updates" : "Pause Updates"}
|
||||
>
|
||||
{#if isFrozen}
|
||||
<Fa icon={faPlay} />
|
||||
{:else}
|
||||
<Fa icon={faPause} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.refresh-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refresh-controls :global(svg) {
|
||||
font-size: 14px;
|
||||
color: var(--subtext0);
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: var(--surface0);
|
||||
color: var(--text);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background: var(--surface1);
|
||||
}
|
||||
|
||||
.btn-action.frozen {
|
||||
background: var(--blue);
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
.select-input {
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
background: var(--surface0);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
padding-right: 24px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.select-input:hover {
|
||||
background-color: var(--surface1);
|
||||
}
|
||||
|
||||
.select-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.select-input:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
90
src/lib/components/toolbar/SearchBox.svelte
Normal file
90
src/lib/components/toolbar/SearchBox.svelte
Normal file
@ -0,0 +1,90 @@
|
||||
<script lang="ts">
|
||||
export let searchTerm: string;
|
||||
</script>
|
||||
|
||||
<div class="search-box">
|
||||
<div class="search-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search processes"
|
||||
bind:value={searchTerm}
|
||||
class="search-input"
|
||||
/>
|
||||
{#if searchTerm}
|
||||
<button class="btn-clear" on:click={() => (searchTerm = "")}>
|
||||
Clear
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.search-box {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
padding-right: 70px;
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
background-color: var(--surface0);
|
||||
color: var(--text);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
color: var(--subtext0);
|
||||
background: var(--surface1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
background: var(--surface2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 4px;
|
||||
background: var(--overlay0);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
|
||||
no-repeat 50% 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-cancel-button:hover {
|
||||
background: var(--text);
|
||||
}
|
||||
|
||||
.search-input:hover {
|
||||
background-color: var(--surface1);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
|
||||
}
|
||||
</style>
|
||||
60
src/lib/components/toolbar/StatusFilter.svelte
Normal file
60
src/lib/components/toolbar/StatusFilter.svelte
Normal file
@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import { STATUS_OPTIONS } from "$lib/constants";
|
||||
import type { AppConfig } from "$lib/types";
|
||||
import { settingsStore } from "$lib/stores";
|
||||
|
||||
export let statusFilter: string = "all";
|
||||
|
||||
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
|
||||
settingsStore.updateConfig({
|
||||
behavior: {
|
||||
...$settingsStore.behavior,
|
||||
[key]: value,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="toolbar-group">
|
||||
<select
|
||||
bind:value={statusFilter}
|
||||
on:change={() => updateBehaviorConfig("defaultStatusFilter", statusFilter)}
|
||||
class="select-input"
|
||||
>
|
||||
{#each STATUS_OPTIONS as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.select-input {
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--surface1);
|
||||
border-radius: 6px;
|
||||
background: var(--surface0);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
padding-right: 24px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.select-input:hover {
|
||||
background-color: var(--surface1);
|
||||
}
|
||||
|
||||
.select-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.select-input:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
68
src/lib/components/toolbar/ToolBar.svelte
Normal file
68
src/lib/components/toolbar/ToolBar.svelte
Normal file
@ -0,0 +1,68 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
AppInfo,
|
||||
StatusFilter,
|
||||
SearchBox,
|
||||
RefreshControls,
|
||||
PaginationControls,
|
||||
ColumnToggle,
|
||||
} from "$lib/components";
|
||||
|
||||
export let searchTerm: string;
|
||||
export let statusFilter: string = "all";
|
||||
export let itemsPerPage: number;
|
||||
export let currentPage: number;
|
||||
export let totalPages: number;
|
||||
export let totalResults: number;
|
||||
export let columns: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
required?: boolean;
|
||||
}>;
|
||||
export let refreshRate: number;
|
||||
export let isFrozen: boolean;
|
||||
</script>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-content">
|
||||
<SearchBox bind:searchTerm />
|
||||
<StatusFilter bind:statusFilter />
|
||||
|
||||
<div class="toolbar-spacer"></div>
|
||||
|
||||
<PaginationControls
|
||||
bind:itemsPerPage
|
||||
bind:currentPage
|
||||
{totalPages}
|
||||
{totalResults}
|
||||
/>
|
||||
<div class="toolbar-spacer"></div>
|
||||
|
||||
<ColumnToggle {columns} />
|
||||
|
||||
<RefreshControls bind:refreshRate bind:isFrozen />
|
||||
|
||||
<AppInfo />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toolbar {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--surface0);
|
||||
background-color: var(--mantle);
|
||||
}
|
||||
|
||||
.toolbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
6
src/lib/components/toolbar/index.ts
Normal file
6
src/lib/components/toolbar/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export { default as ToolBar } from "./ToolBar.svelte";
|
||||
export { default as SearchBox } from "./SearchBox.svelte";
|
||||
export { default as StatusFilter } from "./StatusFilter.svelte";
|
||||
export { default as PaginationControls } from "./PaginationControls.svelte";
|
||||
export { default as ColumnToggle } from "./ColumnToggle.svelte";
|
||||
export { default as RefreshControls } from "./RefreshControls.svelte";
|
||||
71
src/lib/constants/index.ts
Normal file
71
src/lib/constants/index.ts
Normal file
@ -0,0 +1,71 @@
|
||||
export const ASCII_ART = `
|
||||
███╗ ██╗███████╗ ██████╗ ██╗ ██╗████████╗ ██████╗ ██████╗
|
||||
████╗ ██║██╔════╝██╔═══██╗██║ ██║╚══██╔══╝██╔═══██╗██╔══██╗
|
||||
██╔██╗ ██║█████╗ ██║ ██║███████║ ██║ ██║ ██║██████╔╝
|
||||
██║╚██╗██║██╔══╝ ██║ ██║██╔══██║ ██║ ██║ ██║██╔═══╝
|
||||
██║ ╚████║███████╗╚██████╔╝██║ ██║ ██║ ╚██████╔╝██║
|
||||
╚═╝ ╚═══╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝
|
||||
`;
|
||||
|
||||
export const APP_INFO = {
|
||||
name: "NeoHtop",
|
||||
developer: "Abdenasser",
|
||||
github: "https://github.com/Abdenasser/neohtop",
|
||||
stack: ["Tauri", "Rust", "Svelte", "TypeScript"],
|
||||
};
|
||||
|
||||
export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
|
||||
|
||||
export const REFRESH_RATE_OPTIONS = [
|
||||
{ value: 1000, label: "1s" },
|
||||
{ value: 2000, label: "2s" },
|
||||
{ value: 5000, label: "5s" },
|
||||
{ value: 10000, label: "10s" },
|
||||
{ value: 30000, label: "30s" },
|
||||
];
|
||||
|
||||
export const STATUS_OPTIONS = [
|
||||
{ value: "all", label: "All Statuses" },
|
||||
{ value: "running", label: "Running" },
|
||||
{ value: "sleeping", label: "Sleeping" },
|
||||
{ value: "idle", label: "Idle" },
|
||||
{ value: "unknown", label: "Unknown" },
|
||||
];
|
||||
|
||||
export const THEME_GROUPS = [
|
||||
{
|
||||
label: "Dark",
|
||||
themes: [
|
||||
"catppuccin",
|
||||
"dracula",
|
||||
"monokaiPro",
|
||||
"tokyoNight",
|
||||
"ayuDark",
|
||||
"ayuMirage",
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Light",
|
||||
themes: ["githubLight", "solarizedLight", "oneLight", "ayuLight"],
|
||||
},
|
||||
{
|
||||
label: "Warm",
|
||||
themes: ["gruvbox"],
|
||||
},
|
||||
{
|
||||
label: "Cool",
|
||||
themes: ["nord", "oneDark"],
|
||||
},
|
||||
{
|
||||
label: "Fun",
|
||||
themes: ["bubblegum", "rosePine", "cottonCandy", "synthwave", "candyfloss"],
|
||||
},
|
||||
{
|
||||
label: "Retro",
|
||||
themes: ["terminal", "amber", "ibmPC"],
|
||||
},
|
||||
{
|
||||
label: "Accessibility",
|
||||
themes: ["highContrast"],
|
||||
},
|
||||
];
|
||||
61
src/lib/definitions/columns.ts
Normal file
61
src/lib/definitions/columns.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import type { Column } from "$lib/types";
|
||||
import { formatMemorySize } from "$lib/utils";
|
||||
|
||||
export let column_definitions: Column[] = [
|
||||
{ id: "name", label: "Process Name", visible: true, required: true },
|
||||
{ id: "pid", label: "PID", visible: true, required: false },
|
||||
{
|
||||
id: "status",
|
||||
label: "Status",
|
||||
visible: true,
|
||||
},
|
||||
{ id: "user", label: "User", visible: true },
|
||||
{
|
||||
id: "cpu_usage",
|
||||
label: "CPU %",
|
||||
visible: true,
|
||||
format: (v) => v.toFixed(1) + "%",
|
||||
},
|
||||
{
|
||||
id: "memory_usage",
|
||||
label: "RAM",
|
||||
visible: true,
|
||||
format: (v) => (v / (1024 * 1024)).toFixed(1) + " MB",
|
||||
},
|
||||
{
|
||||
id: "virtual_memory",
|
||||
label: "VIRT",
|
||||
visible: true,
|
||||
format: (v) => formatMemorySize(v),
|
||||
},
|
||||
{
|
||||
id: "disk_usage",
|
||||
label: "Disk R/W",
|
||||
visible: true,
|
||||
format: (v) =>
|
||||
`${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
|
||||
},
|
||||
{ id: "ppid", label: "Parent PID", visible: false },
|
||||
{ id: "root", label: "Root", visible: false },
|
||||
{ id: "command", label: "Command", visible: false },
|
||||
{ id: "environ", label: "Environment Variables", visible: false },
|
||||
{ id: "session_id", label: "Session ID", visible: false },
|
||||
{
|
||||
id: "start_time",
|
||||
label: "Start Time",
|
||||
visible: false,
|
||||
format: (v) => new Date(v * 1000).toLocaleString(), // v is the time where the process was started (in seconds) from epoch
|
||||
},
|
||||
{
|
||||
id: "run_time",
|
||||
label: "Run Time",
|
||||
visible: true,
|
||||
format: (v) => {
|
||||
const seconds = v; // v is the time the process has been running in seconds
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${hours}h ${minutes}m ${remainingSeconds}s`; // Format as HH:MM:SS
|
||||
},
|
||||
},
|
||||
];
|
||||
3
src/lib/definitions/index.ts
Normal file
3
src/lib/definitions/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./columns";
|
||||
export * from "./settings";
|
||||
export * from "./themes";
|
||||
@ -1,13 +1,4 @@
|
||||
export interface AppConfig {
|
||||
appearance: {
|
||||
columnVisibility: Record<string, boolean>;
|
||||
};
|
||||
behavior: {
|
||||
itemsPerPage: number;
|
||||
refreshRate: number;
|
||||
defaultStatusFilter: string;
|
||||
};
|
||||
}
|
||||
import type { AppConfig } from "$lib/types";
|
||||
|
||||
export const DEFAULT_CONFIG: AppConfig = {
|
||||
appearance: {
|
||||
@ -1,30 +1,4 @@
|
||||
export interface Theme {
|
||||
name: string;
|
||||
label: string;
|
||||
colors: {
|
||||
base: string;
|
||||
mantle: string;
|
||||
crust: string;
|
||||
text: string;
|
||||
subtext0: string;
|
||||
subtext1: string;
|
||||
surface0: string;
|
||||
surface1: string;
|
||||
surface2: string;
|
||||
overlay0: string;
|
||||
overlay1: string;
|
||||
blue: string;
|
||||
lavender: string;
|
||||
sapphire: string;
|
||||
sky: string;
|
||||
red: string;
|
||||
maroon: string;
|
||||
peach: string;
|
||||
yellow: string;
|
||||
green: string;
|
||||
teal: string;
|
||||
};
|
||||
}
|
||||
import type { Theme } from "$lib/types";
|
||||
|
||||
export const themes: Record<string, Theme> = {
|
||||
catppuccin: {
|
||||
@ -1,58 +1,3 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { themes, type Theme } from "$lib/styles";
|
||||
|
||||
function createThemeStore() {
|
||||
// Default theme
|
||||
const defaultTheme = themes.catppuccin;
|
||||
|
||||
// Initialize with default theme
|
||||
const { subscribe, set } = writable<Theme>(defaultTheme);
|
||||
|
||||
// Initialize theme on client-side only
|
||||
if (typeof window !== "undefined") {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme && themes[storedTheme]) {
|
||||
set(themes[storedTheme]);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
setTheme: (themeName: string) => {
|
||||
const theme = themes[themeName];
|
||||
if (theme) {
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.setItem("theme", themeName);
|
||||
// Add this line to set the data-theme attribute
|
||||
document.documentElement.setAttribute("data-theme", themeName);
|
||||
}
|
||||
set(theme);
|
||||
applyTheme(theme);
|
||||
}
|
||||
},
|
||||
init: () => {
|
||||
const storedTheme =
|
||||
typeof window !== "undefined" ? localStorage.getItem("theme") : null;
|
||||
const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
|
||||
if (typeof window !== "undefined") {
|
||||
// Add this line to set the data-theme attribute on init
|
||||
document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
storedTheme || "catppuccin",
|
||||
);
|
||||
}
|
||||
applyTheme(theme);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function applyTheme(theme: Theme) {
|
||||
if (typeof window !== "undefined") {
|
||||
const root = document.documentElement;
|
||||
Object.entries(theme.colors).forEach(([key, value]) => {
|
||||
root.style.setProperty(`--${key}`, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const themeStore = createThemeStore();
|
||||
export * from "./processes";
|
||||
export * from "./theme";
|
||||
export * from "./settings";
|
||||
|
||||
218
src/lib/stores/processes.ts
Normal file
218
src/lib/stores/processes.ts
Normal file
@ -0,0 +1,218 @@
|
||||
import { writable, derived } from "svelte/store";
|
||||
import type { Process, SystemStats } from "$lib/types";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
interface ProcessStore {
|
||||
processes: Process[];
|
||||
systemStats: SystemStats | null;
|
||||
error: string | null;
|
||||
isLoading: boolean;
|
||||
searchTerm: string;
|
||||
currentPage: number;
|
||||
pinnedProcesses: Set<string>;
|
||||
selectedProcess: Process | null;
|
||||
showInfoModal: boolean;
|
||||
showConfirmModal: boolean;
|
||||
processToKill: Process | null;
|
||||
isKilling: boolean;
|
||||
isFrozen: boolean;
|
||||
selectedProcessPid: number | null;
|
||||
sortConfig: {
|
||||
field: keyof Process;
|
||||
direction: "asc" | "desc";
|
||||
};
|
||||
}
|
||||
|
||||
const initialState: ProcessStore = {
|
||||
processes: [],
|
||||
systemStats: null,
|
||||
error: null,
|
||||
isLoading: true,
|
||||
searchTerm: "",
|
||||
currentPage: 1,
|
||||
pinnedProcesses: new Set(),
|
||||
selectedProcess: null,
|
||||
showInfoModal: false,
|
||||
showConfirmModal: false,
|
||||
processToKill: null,
|
||||
isKilling: false,
|
||||
isFrozen: false,
|
||||
selectedProcessPid: null,
|
||||
sortConfig: {
|
||||
field: "cpu_usage",
|
||||
direction: "desc",
|
||||
},
|
||||
};
|
||||
|
||||
function createProcessStore() {
|
||||
const { subscribe, set, update } = writable<ProcessStore>(initialState);
|
||||
|
||||
// Define all methods first
|
||||
const setIsLoading = (isLoading: boolean) =>
|
||||
update((state) => ({ ...state, isLoading }));
|
||||
|
||||
const getProcesses = async () => {
|
||||
try {
|
||||
const result = await invoke<[Process[], SystemStats]>("get_processes");
|
||||
update((state) => {
|
||||
let updatedSelectedProcess = state.selectedProcess;
|
||||
if (state.selectedProcessPid) {
|
||||
updatedSelectedProcess =
|
||||
result[0].find((p) => p.pid === state.selectedProcessPid) || null;
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
processes: result[0],
|
||||
systemStats: result[1],
|
||||
error: null,
|
||||
selectedProcess: updatedSelectedProcess,
|
||||
};
|
||||
});
|
||||
} catch (e: unknown) {
|
||||
update((state) => ({
|
||||
...state,
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const killProcess = async (pid: number) => {
|
||||
try {
|
||||
update((state) => ({ ...state, isKilling: true }));
|
||||
const success = await invoke<boolean>("kill_process", { pid });
|
||||
if (success) {
|
||||
await getProcesses();
|
||||
} else {
|
||||
throw new Error("Failed to kill process");
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
update((state) => ({
|
||||
...state,
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
}));
|
||||
} finally {
|
||||
update((state) => ({ ...state, isKilling: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSort = (field: keyof Process) => {
|
||||
update((state) => ({
|
||||
...state,
|
||||
sortConfig: {
|
||||
field,
|
||||
direction:
|
||||
state.sortConfig.field === field
|
||||
? state.sortConfig.direction === "asc"
|
||||
? "desc"
|
||||
: "asc"
|
||||
: "desc",
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const togglePin = (command: string) => {
|
||||
update((state) => {
|
||||
const newPinnedProcesses = new Set(state.pinnedProcesses);
|
||||
if (newPinnedProcesses.has(command)) {
|
||||
newPinnedProcesses.delete(command);
|
||||
} else {
|
||||
newPinnedProcesses.add(command);
|
||||
}
|
||||
return { ...state, pinnedProcesses: newPinnedProcesses };
|
||||
});
|
||||
};
|
||||
|
||||
const setSearchTerm = (searchTerm: string) =>
|
||||
update((state) => ({ ...state, searchTerm, currentPage: 1 }));
|
||||
|
||||
const setIsFrozen = (isFrozen: boolean) =>
|
||||
update((state) => ({ ...state, isFrozen }));
|
||||
|
||||
const setCurrentPage = (currentPage: number) =>
|
||||
update((state) => ({ ...state, currentPage }));
|
||||
|
||||
const showProcessDetails = (process: Process) => {
|
||||
update((state) => ({
|
||||
...state,
|
||||
selectedProcessPid: process.pid,
|
||||
selectedProcess: process,
|
||||
showInfoModal: true,
|
||||
}));
|
||||
};
|
||||
|
||||
const closeProcessDetails = () => {
|
||||
update((state) => ({
|
||||
...state,
|
||||
showInfoModal: false,
|
||||
selectedProcess: null,
|
||||
selectedProcessPid: null,
|
||||
}));
|
||||
};
|
||||
|
||||
const confirmKillProcess = (process: Process) => {
|
||||
update((state) => ({
|
||||
...state,
|
||||
processToKill: process,
|
||||
showConfirmModal: true,
|
||||
}));
|
||||
};
|
||||
|
||||
const closeConfirmKill = () => {
|
||||
update((state) => ({
|
||||
...state,
|
||||
showConfirmModal: false,
|
||||
processToKill: null,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleConfirmKill = async () => {
|
||||
let processToKill: Process | null = null;
|
||||
|
||||
let currentState: ProcessStore | undefined;
|
||||
const unsubscribe = subscribe((state) => {
|
||||
currentState = state;
|
||||
});
|
||||
unsubscribe();
|
||||
|
||||
if (currentState?.processToKill && "pid" in currentState.processToKill) {
|
||||
processToKill = currentState.processToKill;
|
||||
}
|
||||
|
||||
if (!processToKill?.pid) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await killProcess(processToKill.pid);
|
||||
} finally {
|
||||
update((state) => ({
|
||||
...state,
|
||||
showConfirmModal: false,
|
||||
processToKill: null,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// Return all methods
|
||||
return {
|
||||
subscribe,
|
||||
set,
|
||||
update,
|
||||
setIsLoading,
|
||||
getProcesses,
|
||||
killProcess,
|
||||
toggleSort,
|
||||
togglePin,
|
||||
setSearchTerm,
|
||||
setIsFrozen,
|
||||
setCurrentPage,
|
||||
showProcessDetails,
|
||||
closeProcessDetails,
|
||||
confirmKillProcess,
|
||||
closeConfirmKill,
|
||||
handleConfirmKill,
|
||||
};
|
||||
}
|
||||
|
||||
export const processStore = createProcessStore();
|
||||
@ -1,8 +1,8 @@
|
||||
import { writable } from "svelte/store";
|
||||
import type { AppConfig } from "$lib/types/config";
|
||||
import { DEFAULT_CONFIG } from "$lib/types/config";
|
||||
import type { AppConfig } from "$lib/types";
|
||||
import { DEFAULT_CONFIG } from "$lib/definitions/settings";
|
||||
|
||||
function createConfigStore() {
|
||||
function createSettingsStore() {
|
||||
const { subscribe, set, update } = writable<AppConfig>(DEFAULT_CONFIG);
|
||||
|
||||
return {
|
||||
@ -33,4 +33,4 @@ function createConfigStore() {
|
||||
};
|
||||
}
|
||||
|
||||
export const configStore = createConfigStore();
|
||||
export const settingsStore = createSettingsStore();
|
||||
58
src/lib/stores/theme.ts
Normal file
58
src/lib/stores/theme.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { themes } from "$lib/definitions/themes";
|
||||
import type { Theme } from "$lib/types";
|
||||
function createThemeStore() {
|
||||
// Default theme
|
||||
const defaultTheme = themes.catppuccin;
|
||||
|
||||
// Initialize with default theme
|
||||
const { subscribe, set } = writable<Theme>(defaultTheme);
|
||||
|
||||
// Initialize theme on client-side only
|
||||
if (typeof window !== "undefined") {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme && themes[storedTheme]) {
|
||||
set(themes[storedTheme]);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
setTheme: (themeName: string) => {
|
||||
const theme = themes[themeName];
|
||||
if (theme) {
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.setItem("theme", themeName);
|
||||
// Add this line to set the data-theme attribute
|
||||
document.documentElement.setAttribute("data-theme", themeName);
|
||||
}
|
||||
set(theme);
|
||||
applyTheme(theme);
|
||||
}
|
||||
},
|
||||
init: () => {
|
||||
const storedTheme =
|
||||
typeof window !== "undefined" ? localStorage.getItem("theme") : null;
|
||||
const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
|
||||
if (typeof window !== "undefined") {
|
||||
// Add this line to set the data-theme attribute on init
|
||||
document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
storedTheme || "catppuccin",
|
||||
);
|
||||
}
|
||||
applyTheme(theme);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function applyTheme(theme: Theme) {
|
||||
if (typeof window !== "undefined") {
|
||||
const root = document.documentElement;
|
||||
Object.entries(theme.colors).forEach(([key, value]) => {
|
||||
root.style.setProperty(`--${key}`, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const themeStore = createThemeStore();
|
||||
@ -40,3 +40,76 @@ export interface Column {
|
||||
required?: boolean;
|
||||
format?: (value: any) => string;
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
name: string;
|
||||
label: string;
|
||||
colors: {
|
||||
base: string;
|
||||
mantle: string;
|
||||
crust: string;
|
||||
text: string;
|
||||
subtext0: string;
|
||||
subtext1: string;
|
||||
surface0: string;
|
||||
surface1: string;
|
||||
surface2: string;
|
||||
overlay0: string;
|
||||
overlay1: string;
|
||||
blue: string;
|
||||
lavender: string;
|
||||
sapphire: string;
|
||||
sky: string;
|
||||
red: string;
|
||||
maroon: string;
|
||||
peach: string;
|
||||
yellow: string;
|
||||
green: string;
|
||||
teal: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
appearance: {
|
||||
columnVisibility: Record<string, boolean>;
|
||||
};
|
||||
behavior: {
|
||||
itemsPerPage: number;
|
||||
refreshRate: number;
|
||||
defaultStatusFilter: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ColumnDefinition {
|
||||
id: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
export interface StatusOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface RefreshRateOption {
|
||||
value: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface ToolBarProps {
|
||||
searchTerm: string;
|
||||
statusFilter: string;
|
||||
itemsPerPage: number;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalResults: number;
|
||||
columns: ColumnDefinition[];
|
||||
refreshRate: number;
|
||||
isFrozen: boolean;
|
||||
}
|
||||
|
||||
export interface SortConfig {
|
||||
field: keyof Process;
|
||||
direction: "asc" | "desc";
|
||||
}
|
||||
|
||||
@ -1,39 +1,12 @@
|
||||
import type { Process } from "$lib/types";
|
||||
import type { SortConfig } from "$lib/types";
|
||||
|
||||
export interface ProcessStatus {
|
||||
label: string;
|
||||
emoji: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export const statusMap: Record<string, ProcessStatus> = {
|
||||
Running: {
|
||||
label: "Running",
|
||||
emoji: "🏃",
|
||||
color: "var(--green)",
|
||||
},
|
||||
Sleeping: {
|
||||
label: "Sleeping",
|
||||
emoji: "😴",
|
||||
color: "var(--blue)",
|
||||
},
|
||||
Idle: {
|
||||
label: "Idle",
|
||||
emoji: "⌛",
|
||||
color: "var(--overlay0)",
|
||||
},
|
||||
Unknown: {
|
||||
label: "Unknown",
|
||||
emoji: "❓",
|
||||
color: "var(--overlay0)",
|
||||
},
|
||||
};
|
||||
|
||||
export function formatStatus(status: string): string {
|
||||
const processStatus = statusMap[status] || statusMap.Unknown;
|
||||
return `<span class="status-badge" style="--status-color: ${processStatus.color}">
|
||||
${processStatus.label}
|
||||
</span>`;
|
||||
}
|
||||
|
||||
export function formatMemorySize(bytes: number): string {
|
||||
const gb = bytes / (1024 * 1024 * 1024);
|
||||
return `${gb.toFixed(1)} GB`;
|
||||
@ -56,3 +29,123 @@ export function getUsageClass(percentage: number): string {
|
||||
if (percentage >= 30) return "medium";
|
||||
return "low";
|
||||
}
|
||||
|
||||
export function formatBytes(bytes: number): string {
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let value = bytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (value >= 1024 && unitIndex < units.length - 1) {
|
||||
value /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${value.toFixed(1)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
export function formatDate(timestamp: number) {
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
// Cache for compiled regex patterns
|
||||
const regexCache = new Map<string, RegExp>();
|
||||
|
||||
export function filterProcesses(
|
||||
processes: Process[],
|
||||
searchTerm: string,
|
||||
statusFilter: string,
|
||||
): Process[] {
|
||||
// Early return for empty search and "all" status
|
||||
if (searchTerm.length === 0 && statusFilter === "all") {
|
||||
return processes;
|
||||
}
|
||||
|
||||
// Pre-process search terms once
|
||||
const terms =
|
||||
searchTerm.length > 0
|
||||
? searchTerm.split(",").map((term) => term.trim())
|
||||
: [];
|
||||
|
||||
return processes.filter((process) => {
|
||||
// Early status check
|
||||
if (
|
||||
statusFilter !== "all" &&
|
||||
process.status.toLowerCase() !== statusFilter
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Skip search if no terms
|
||||
if (terms.length === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Cache lowercase values
|
||||
const processNameLower = process.name.toLowerCase();
|
||||
const processCommandLower = process.command.toLowerCase();
|
||||
const processPidString = process.pid.toString();
|
||||
|
||||
// Check each term
|
||||
return terms.some((term) => {
|
||||
const termLower = term.toLowerCase();
|
||||
|
||||
// Try exact matches first (faster)
|
||||
if (
|
||||
processNameLower.includes(termLower) ||
|
||||
processCommandLower.includes(termLower) ||
|
||||
processPidString.includes(term)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Try regex match last (slower)
|
||||
try {
|
||||
let regex = regexCache.get(term);
|
||||
if (!regex) {
|
||||
regex = new RegExp(term, "i");
|
||||
regexCache.set(term, regex);
|
||||
}
|
||||
return regex.test(process.name);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Create a Map for quick pinned status lookup
|
||||
const isPinned = new Map<string, boolean>();
|
||||
|
||||
export function sortProcesses(
|
||||
processes: Process[],
|
||||
sortConfig: SortConfig,
|
||||
pinnedProcesses: Set<string>,
|
||||
): Process[] {
|
||||
// Clear the cache before sorting
|
||||
isPinned.clear();
|
||||
|
||||
return [...processes].sort((a, b) => {
|
||||
// Cache pinned status
|
||||
let aPin = pinnedProcesses.has(a.command);
|
||||
isPinned.set(a.command, aPin);
|
||||
|
||||
let bPin = pinnedProcesses.has(b.command);
|
||||
isPinned.set(b.command, bPin);
|
||||
|
||||
// Quick pin comparison
|
||||
if (aPin !== bPin) {
|
||||
return aPin ? -1 : 1;
|
||||
}
|
||||
|
||||
// Only compute direction once
|
||||
const direction = sortConfig.direction === "asc" ? 1 : -1;
|
||||
const aValue = a[sortConfig.field];
|
||||
const bValue = b[sortConfig.field];
|
||||
|
||||
// Type-specific comparisons
|
||||
if (typeof aValue === "string") {
|
||||
return direction * aValue.localeCompare(bValue as string);
|
||||
}
|
||||
return direction * (Number(aValue) - Number(bValue));
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,154 +1,53 @@
|
||||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import StatsBar from "$lib/components/StatsBar.svelte";
|
||||
import ToolBar from "$lib/components/ToolBar.svelte";
|
||||
import ProcessTable from "$lib/components/ProcessTable.svelte";
|
||||
import ProcessDetailsModal from "$lib/components/ProcessDetailsModal.svelte";
|
||||
import KillProcessModal from "$lib/components/KillProcessModal.svelte";
|
||||
import { formatMemorySize, formatStatus } from "$lib/utils";
|
||||
import { themeStore } from "$lib/stores";
|
||||
import type { Process, SystemStats, Column } from "$lib/types";
|
||||
import TitleBar from "$lib/components/TitleBar.svelte";
|
||||
import { configStore } from "$lib/stores/config";
|
||||
import {
|
||||
StatsBar,
|
||||
ToolBar,
|
||||
TitleBar,
|
||||
ProcessTable,
|
||||
ProcessDetailsModal,
|
||||
KillProcessModal,
|
||||
} from "$lib/components/index";
|
||||
import { themeStore, settingsStore, processStore } from "$lib/stores/index";
|
||||
import { column_definitions } from "$lib/definitions/columns";
|
||||
import { filterProcesses, sortProcesses } from "$lib/utils";
|
||||
|
||||
$: ({
|
||||
processes,
|
||||
systemStats,
|
||||
error,
|
||||
searchTerm,
|
||||
isLoading,
|
||||
currentPage,
|
||||
pinnedProcesses,
|
||||
selectedProcess,
|
||||
showInfoModal,
|
||||
showConfirmModal,
|
||||
processToKill,
|
||||
isKilling,
|
||||
isFrozen,
|
||||
sortConfig,
|
||||
} = $processStore);
|
||||
|
||||
let processes: Process[] = [];
|
||||
let systemStats: SystemStats | null = null;
|
||||
let intervalId: number;
|
||||
let error: string | null = null;
|
||||
let searchTerm = "";
|
||||
let isLoading = true;
|
||||
let currentPage = 1;
|
||||
let pinnedProcesses: Set<string> = new Set();
|
||||
let selectedProcess: Process | null = null;
|
||||
let showInfoModal = false;
|
||||
let showConfirmModal = false;
|
||||
let processToKill: Process | null = null;
|
||||
let isKilling = false;
|
||||
let isFrozen = false;
|
||||
let selectedProcessPid: number | null = null;
|
||||
|
||||
let columnDefinitions: Column[] = [
|
||||
{ id: "name", label: "Process Name", visible: true, required: true },
|
||||
{ id: "pid", label: "PID", visible: true, required: false },
|
||||
{
|
||||
id: "status",
|
||||
label: "Status",
|
||||
visible: true,
|
||||
format: formatStatus,
|
||||
},
|
||||
{ id: "user", label: "User", visible: true },
|
||||
{
|
||||
id: "cpu_usage",
|
||||
label: "CPU %",
|
||||
visible: true,
|
||||
format: (v) => v.toFixed(1) + "%",
|
||||
},
|
||||
{
|
||||
id: "memory_usage",
|
||||
label: "RAM",
|
||||
visible: true,
|
||||
format: (v) => (v / (1024 * 1024)).toFixed(1) + " MB",
|
||||
},
|
||||
{
|
||||
id: "virtual_memory",
|
||||
label: "VIRT",
|
||||
visible: true,
|
||||
format: (v) => formatMemorySize(v),
|
||||
},
|
||||
{
|
||||
id: "disk_usage",
|
||||
label: "Disk R/W",
|
||||
visible: true,
|
||||
format: (v) =>
|
||||
`${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
|
||||
},
|
||||
{ id: "ppid", label: "Parent PID", visible: false },
|
||||
{ id: "root", label: "Root", visible: false },
|
||||
{ id: "command", label: "Command", visible: false },
|
||||
{ id: "environ", label: "Environment Variables", visible: false },
|
||||
{ id: "session_id", label: "Session ID", visible: false },
|
||||
{
|
||||
id: "start_time",
|
||||
label: "Start Time",
|
||||
visible: false,
|
||||
format: (v) => new Date(v * 1000).toLocaleString(), // v is the time where the process was started (in seconds) from epoch
|
||||
},
|
||||
{
|
||||
id: "run_time",
|
||||
label: "Run Time",
|
||||
visible: true,
|
||||
format: (v) => {
|
||||
const seconds = v; // v is the time the process has been running in seconds
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${hours}h ${minutes}m ${remainingSeconds}s`; // Format as HH:MM:SS
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// Merge column definitions with stored visibility
|
||||
$: columns = columnDefinitions.map((col) => ({
|
||||
$: columns = column_definitions.map((col) => ({
|
||||
...col,
|
||||
visible:
|
||||
col.required ||
|
||||
($configStore.appearance.columnVisibility[col.id] ?? col.visible),
|
||||
($settingsStore.appearance.columnVisibility[col.id] ?? col.visible),
|
||||
}));
|
||||
$: itemsPerPage = $configStore.behavior.itemsPerPage;
|
||||
$: refreshRate = $configStore.behavior.refreshRate;
|
||||
$: statusFilter = $configStore.behavior.defaultStatusFilter;
|
||||
$: itemsPerPage = $settingsStore.behavior.itemsPerPage;
|
||||
$: refreshRate = $settingsStore.behavior.refreshRate;
|
||||
$: statusFilter = $settingsStore.behavior.defaultStatusFilter;
|
||||
|
||||
let sortConfig = {
|
||||
field: "cpu_usage" as keyof Process,
|
||||
direction: "desc" as "asc" | "desc",
|
||||
};
|
||||
$: filteredProcesses = filterProcesses(processes, searchTerm, statusFilter);
|
||||
|
||||
$: filteredProcesses = processes.filter((process) => {
|
||||
let matchesSearch = searchTerm.length === 0;
|
||||
searchTerm
|
||||
.split(",")
|
||||
.map((term) => term.trim())
|
||||
.forEach((term) => {
|
||||
const nameSubstringMatch = process.name
|
||||
.toLowerCase()
|
||||
.includes(term.toLowerCase());
|
||||
const nameRegexMatch = (() => {
|
||||
try {
|
||||
return new RegExp(term, "i").test(process.name);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
const commandMatch = process.command
|
||||
.toLowerCase()
|
||||
.includes(term.toLowerCase());
|
||||
const pidMatch = process.pid.toString().includes(term);
|
||||
matchesSearch ||=
|
||||
nameSubstringMatch || nameRegexMatch || commandMatch || pidMatch;
|
||||
});
|
||||
|
||||
const matchesStatus =
|
||||
statusFilter === "all" ? true : process.status === statusFilter;
|
||||
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
|
||||
$: sortedProcesses = filteredProcesses.sort((a, b) => {
|
||||
const aPin = pinnedProcesses.has(a.command);
|
||||
const bPin = pinnedProcesses.has(b.command);
|
||||
if (aPin && !bPin) return -1;
|
||||
if (!aPin && bPin) return 1;
|
||||
|
||||
const aValue = a[sortConfig.field];
|
||||
const bValue = b[sortConfig.field];
|
||||
const direction = sortConfig.direction === "asc" ? 1 : -1;
|
||||
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return direction * aValue.localeCompare(bValue);
|
||||
}
|
||||
return direction * (Number(aValue) - Number(bValue));
|
||||
});
|
||||
$: sortedProcesses = sortProcesses(
|
||||
filteredProcesses,
|
||||
sortConfig,
|
||||
pinnedProcesses,
|
||||
);
|
||||
|
||||
$: totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
|
||||
$: paginatedProcesses = sortedProcesses.slice(
|
||||
@ -157,7 +56,6 @@
|
||||
);
|
||||
|
||||
$: {
|
||||
// Reset to first page when filtering or changing items per page
|
||||
if (searchTerm || itemsPerPage) {
|
||||
currentPage = 1;
|
||||
}
|
||||
@ -167,104 +65,21 @@
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
if (!isFrozen) {
|
||||
intervalId = setInterval(() => {
|
||||
getProcesses();
|
||||
processStore.getProcesses();
|
||||
}, refreshRate);
|
||||
}
|
||||
}
|
||||
|
||||
$: if (selectedProcessPid && processes.length > 0) {
|
||||
selectedProcess =
|
||||
processes.find((p) => p.pid === selectedProcessPid) || null;
|
||||
}
|
||||
|
||||
async function getProcesses() {
|
||||
try {
|
||||
const result = await invoke<[Process[], SystemStats]>("get_processes");
|
||||
processes = result[0];
|
||||
systemStats = result[1];
|
||||
error = null;
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = String(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function killProcess(pid: number) {
|
||||
try {
|
||||
const success = await invoke<boolean>("kill_process", { pid });
|
||||
if (success) {
|
||||
await getProcesses();
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = String(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSort(field: keyof Process) {
|
||||
if (sortConfig.field === field) {
|
||||
sortConfig.direction = sortConfig.direction === "asc" ? "desc" : "asc";
|
||||
} else {
|
||||
sortConfig.field = field;
|
||||
sortConfig.direction = "desc";
|
||||
}
|
||||
}
|
||||
|
||||
function togglePin(command: string) {
|
||||
if (pinnedProcesses.has(command)) {
|
||||
pinnedProcesses.delete(command);
|
||||
} else {
|
||||
pinnedProcesses.add(command);
|
||||
}
|
||||
pinnedProcesses = pinnedProcesses; // Trigger reactivity
|
||||
}
|
||||
|
||||
function showProcessDetails(process: Process) {
|
||||
selectedProcessPid = process.pid;
|
||||
selectedProcess = process;
|
||||
showInfoModal = true;
|
||||
}
|
||||
|
||||
function confirmKillProcess(process: Process) {
|
||||
processToKill = process;
|
||||
showConfirmModal = true;
|
||||
}
|
||||
|
||||
async function handleConfirmKill() {
|
||||
if (processToKill) {
|
||||
isKilling = true;
|
||||
try {
|
||||
await killProcess(processToKill.pid);
|
||||
} finally {
|
||||
isKilling = false;
|
||||
showConfirmModal = false;
|
||||
processToKill = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleModalClose() {
|
||||
showInfoModal = false;
|
||||
selectedProcess = null;
|
||||
selectedProcessPid = null;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await getProcesses();
|
||||
await processStore.getProcesses();
|
||||
} catch (error) {
|
||||
console.error("Failed to load processes:", error);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
processStore.setIsLoading(false);
|
||||
}
|
||||
|
||||
configStore.init();
|
||||
settingsStore.init();
|
||||
themeStore.init();
|
||||
});
|
||||
|
||||
@ -288,12 +103,12 @@
|
||||
{/if}
|
||||
|
||||
<ToolBar
|
||||
bind:searchTerm
|
||||
bind:searchTerm={$processStore.searchTerm}
|
||||
bind:statusFilter
|
||||
bind:itemsPerPage
|
||||
bind:currentPage
|
||||
bind:currentPage={$processStore.currentPage}
|
||||
bind:refreshRate
|
||||
bind:isFrozen
|
||||
bind:isFrozen={$processStore.isFrozen}
|
||||
{totalPages}
|
||||
totalResults={filteredProcesses.length}
|
||||
bind:columns
|
||||
@ -309,10 +124,10 @@
|
||||
{systemStats}
|
||||
{sortConfig}
|
||||
{pinnedProcesses}
|
||||
onToggleSort={toggleSort}
|
||||
onTogglePin={togglePin}
|
||||
onShowDetails={showProcessDetails}
|
||||
onKillProcess={confirmKillProcess}
|
||||
onToggleSort={processStore.toggleSort}
|
||||
onTogglePin={processStore.togglePin}
|
||||
onShowDetails={processStore.showProcessDetails}
|
||||
onKillProcess={processStore.confirmKillProcess}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
@ -321,18 +136,15 @@
|
||||
<ProcessDetailsModal
|
||||
show={showInfoModal}
|
||||
process={selectedProcess}
|
||||
onClose={handleModalClose}
|
||||
onClose={processStore.closeProcessDetails}
|
||||
/>
|
||||
|
||||
<KillProcessModal
|
||||
show={showConfirmModal}
|
||||
process={processToKill}
|
||||
{isKilling}
|
||||
onClose={() => {
|
||||
showConfirmModal = false;
|
||||
processToKill = null;
|
||||
}}
|
||||
onConfirm={handleConfirmKill}
|
||||
onClose={processStore.closeConfirmKill}
|
||||
onConfirm={processStore.handleConfirmKill}
|
||||
/>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user