salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use shield icon for permission status

Browse Source 
Replace permission dots with a shield indicator and adjust permission colors to stand out from working/compacting.
This commit is contained in:
Shantur Rathore
2026-01-05 20:18:07 +00:00
parent 06416a9eb3
commit 95fdad7523
3 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/components/instance-tab.tsx
View File

@@ -1,7 +1,7 @@
import { Component, createMemo } from "solid-js"
import type { Instance } from "../types/instance"
import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
import { FolderOpen, X } from "lucide-solid"
import { FolderOpen, ShieldAlert, X } from "lucide-solid"
interface InstanceTabProps {
instance: Instance
@@ -63,7 +63,11 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
title={statusTitle()}
aria-label={`Instance status: ${statusTitle()}`}
>
<span class="status-dot" />
{aggregatedStatus() === "permission" ? (
<ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
) : (
<span class="status-dot" />
)}
</span>
<span
class="tab-close"

8
packages/ui/src/components/session-list.tsx
View File

@@ -1,7 +1,7 @@
import { Component, For, Show, createSignal, createMemo, JSX } from "solid-js"
import type { Session, SessionStatus } from "../types/session"
import { getSessionStatus } from "../stores/session-status"
import { MessageSquare, Info, X, Copy, Trash2, Pencil } from "lucide-solid"
import { MessageSquare, Info, X, Copy, Trash2, Pencil, ShieldAlert } from "lucide-solid"
import KeyboardHint from "./keyboard-hint"
import Kbd from "./kbd"
import SessionRenameDialog from "./session-rename-dialog"
@@ -172,7 +172,11 @@ const SessionList: Component<SessionListProps> = (props) => {
</div>
<div class="session-item-row session-item-meta">
<span class={`status-indicator session-status session-status-list ${statusClassName()}`}>
<span class="status-dot" />
{pendingPermission() ? (
<ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
) : (
<span class="status-dot" />
)}
{statusText()}
</span>
<div class="session-item-actions">

12
packages/ui/src/styles/tokens.css
View File

@@ -42,8 +42,8 @@
--session-status-compacting-bg: rgba(109, 40, 217, 0.18);
--session-status-idle-fg: #15803d;
--session-status-idle-bg: rgba(22, 163, 74, 0.16);
--session-status-permission-fg: #c2410c;
--session-status-permission-bg: rgba(251, 191, 36, 0.25);
--session-status-permission-fg: #b91c1c;
--session-status-permission-bg: rgba(239, 68, 68, 0.16);
--list-item-highlight-bg: rgba(0, 102, 255, 0.1);
--list-item-highlight-bg-solid: #e5f0ff;
--list-item-highlight-border: rgba(0, 102, 255, 0.25);
@@ -191,8 +191,8 @@
--session-status-compacting-bg: rgba(192, 132, 252, 0.28);
--session-status-idle-fg: #4ade80;
--session-status-idle-bg: rgba(74, 222, 128, 0.22);
--session-status-permission-fg: #fbbf24;
--session-status-permission-bg: rgba(251, 191, 36, 0.35);
--session-status-permission-fg: #f87171;
--session-status-permission-bg: rgba(248, 113, 113, 0.22);
--list-item-highlight-bg: rgba(0, 128, 255, 0.2);
--list-item-highlight-bg-solid: #15324e;
--list-item-highlight-border: rgba(0, 128, 255, 0.4);
@@ -345,8 +345,8 @@
--session-status-compacting-bg: rgba(192, 132, 252, 0.28);
--session-status-idle-fg: #4ade80;
--session-status-idle-bg: rgba(74, 222, 128, 0.22);
--session-status-permission-fg: #fbbf24;
--session-status-permission-bg: rgba(251, 191, 36, 0.35);
--session-status-permission-fg: #f87171;
--session-status-permission-bg: rgba(248, 113, 113, 0.22);
--list-item-highlight-bg: rgba(0, 128, 255, 0.2);
--list-item-highlight-bg-solid: #15324e;
--list-item-highlight-border: rgba(0, 128, 255, 0.4);