feat(ui): rework permission center to reuse tool call view
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { Show, createMemo, type Component } from "solid-js"
|
||||
import { ShieldAlert } from "lucide-solid"
|
||||
import { getPermissionQueueLength } from "../stores/instances"
|
||||
import { isElectronHost } from "../lib/runtime-env"
|
||||
|
||||
interface PermissionNotificationBannerProps {
|
||||
instanceId: string
|
||||
@@ -10,46 +10,25 @@ interface PermissionNotificationBannerProps {
|
||||
const PermissionNotificationBanner: Component<PermissionNotificationBannerProps> = (props) => {
|
||||
const queueLength = createMemo(() => getPermissionQueueLength(props.instanceId))
|
||||
const hasPermissions = createMemo(() => queueLength() > 0)
|
||||
const isElectron = isElectronHost()
|
||||
const label = createMemo(() => {
|
||||
const count = queueLength()
|
||||
return `${count} permission${count === 1 ? "" : "s"} pending approval`
|
||||
})
|
||||
|
||||
return (
|
||||
<Show when={hasPermissions()}>
|
||||
{/* Electron: Full banner with text */}
|
||||
<Show when={isElectron}>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-notification-banner"
|
||||
onClick={props.onClick}
|
||||
aria-label={`${queueLength()} permission${queueLength() > 1 ? "s" : ""} pending approval`}
|
||||
>
|
||||
<span class="permission-notification-icon" aria-hidden="true">
|
||||
⚠️
|
||||
</span>
|
||||
<span class="permission-notification-text">
|
||||
Approval Required
|
||||
</span>
|
||||
<Show when={queueLength() > 1}>
|
||||
<span class="permission-notification-count" aria-label={`${queueLength()} permissions`}>
|
||||
{queueLength()}
|
||||
</span>
|
||||
</Show>
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
{/* Web: Compact indicator button */}
|
||||
<Show when={!isElectron}>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-indicator-button"
|
||||
onClick={props.onClick}
|
||||
aria-label={`${queueLength()} permission${queueLength() > 1 ? "s" : ""} pending approval. Click to review.`}
|
||||
title={`${queueLength()} permission${queueLength() > 1 ? "s" : ""} pending approval`}
|
||||
>
|
||||
<span class="permission-indicator-badge">
|
||||
{queueLength() > 9 ? "9+" : queueLength()}
|
||||
</span>
|
||||
</button>
|
||||
</Show>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-center-trigger"
|
||||
onClick={props.onClick}
|
||||
aria-label={label()}
|
||||
title={label()}
|
||||
>
|
||||
<ShieldAlert class="permission-center-icon" aria-hidden="true" />
|
||||
<span class="permission-center-count" aria-hidden="true">
|
||||
{queueLength() > 9 ? "9+" : queueLength()}
|
||||
</span>
|
||||
</button>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user