95fdad7523
Replace permission dots with a shield indicator and adjust permission colors to stand out from working/compacting.
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import { Component, createMemo } from "solid-js"
|
|
import type { Instance } from "../types/instance"
|
|
import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
|
|
import { FolderOpen, ShieldAlert, X } from "lucide-solid"
|
|
|
|
interface InstanceTabProps {
|
|
instance: Instance
|
|
active: boolean
|
|
onSelect: () => void
|
|
onClose: () => void
|
|
}
|
|
|
|
function formatFolderName(path: string, instances: Instance[], currentInstance: Instance): string {
|
|
const name = path.split("/").pop() || path
|
|
|
|
const duplicates = instances.filter((i) => {
|
|
const iName = i.folder.split("/").pop() || i.folder
|
|
return iName === name
|
|
})
|
|
|
|
if (duplicates.length > 1) {
|
|
const index = duplicates.findIndex((i) => i.id === currentInstance.id)
|
|
return `~/${name} (${index + 1})`
|
|
}
|
|
|
|
return `~/${name}`
|
|
}
|
|
|
|
const InstanceTab: Component<InstanceTabProps> = (props) => {
|
|
const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
|
|
const statusClassName = createMemo(() => {
|
|
const status = aggregatedStatus()
|
|
return status === "permission" ? "session-permission" : `session-${status}`
|
|
})
|
|
const statusTitle = createMemo(() => {
|
|
switch (aggregatedStatus()) {
|
|
case "permission":
|
|
return "Waiting on permission"
|
|
case "compacting":
|
|
return "Compacting"
|
|
case "working":
|
|
return "Working"
|
|
default:
|
|
return "Idle"
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div class="group">
|
|
<button
|
|
class={`tab-base ${props.active ? "tab-active" : "tab-inactive"}`}
|
|
onClick={props.onSelect}
|
|
title={props.instance.folder}
|
|
role="tab"
|
|
aria-selected={props.active}
|
|
>
|
|
<FolderOpen class="w-4 h-4 flex-shrink-0" />
|
|
<span class="tab-label">
|
|
{props.instance.folder.split("/").pop() || props.instance.folder}
|
|
</span>
|
|
<span
|
|
class={`status-indicator session-status ml-auto ${statusClassName()}`}
|
|
title={statusTitle()}
|
|
aria-label={`Instance status: ${statusTitle()}`}
|
|
>
|
|
{aggregatedStatus() === "permission" ? (
|
|
<ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
|
|
) : (
|
|
<span class="status-dot" />
|
|
)}
|
|
</span>
|
|
<span
|
|
class="tab-close"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
props.onClose()
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Close instance"
|
|
>
|
|
<X class="w-3 h-3" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default InstanceTab
|