feat(app): add desktop v2 home, session entry, and titlebar (#28442)
Co-authored-by: Brendan Allan <git@brendonovich.dev>
This commit is contained in:
Luke Parker
co-authored by
Brendan Allan
Brendan Allan
parent
6602341c0d
commit
b207e32249
@@ -1,29 +1,94 @@
|
||||
import { type ComponentProps, splitProps } from "solid-js"
|
||||
import { onMount, type ComponentProps, splitProps } from "solid-js"
|
||||
|
||||
const icons = {
|
||||
edit: {
|
||||
viewBox: "0 0 20 20",
|
||||
body: `<path d="M17.0832 17.0807V17.5807H17.5832V17.0807H17.0832ZM2.9165 17.0807H2.4165V17.5807H2.9165V17.0807ZM2.9165 2.91406V2.41406H2.4165V2.91406H2.9165ZM9.58317 3.41406H10.0832V2.41406H9.58317V2.91406V3.41406ZM17.5832 10.4141V9.91406H16.5832V10.4141H17.0832H17.5832ZM6.24984 11.2474L5.89628 10.8938L5.74984 11.0403V11.2474H6.24984ZM6.24984 13.7474H5.74984V14.2474H6.24984V13.7474ZM8.74984 13.7474V14.2474H8.95694L9.10339 14.101L8.74984 13.7474ZM15.2082 2.28906L15.5617 1.93551L15.2082 1.58196L14.8546 1.93551L15.2082 2.28906ZM17.7082 4.78906L18.0617 5.14262L18.4153 4.78906L18.0617 4.43551L17.7082 4.78906ZM17.0832 17.0807V16.5807H2.9165V17.0807V17.5807H17.0832V17.0807ZM2.9165 17.0807H3.4165V2.91406H2.9165H2.4165V17.0807H2.9165ZM2.9165 2.91406V3.41406H9.58317V2.91406V2.41406H2.9165V2.91406ZM17.0832 10.4141H16.5832V17.0807H17.0832H17.5832V10.4141H17.0832ZM6.24984 11.2474H5.74984V13.7474H6.24984H6.74984V11.2474H6.24984ZM6.24984 13.7474V14.2474H8.74984V13.7474V13.2474H6.24984V13.7474ZM6.24984 11.2474L6.60339 11.6009L15.5617 2.64262L15.2082 2.28906L14.8546 1.93551L5.89628 10.8938L6.24984 11.2474ZM15.2082 2.28906L14.8546 2.64262L17.3546 5.14262L17.7082 4.78906L18.0617 4.43551L15.5617 1.93551L15.2082 2.28906ZM17.7082 4.78906L17.3546 4.43551L8.39628 13.3938L8.74984 13.7474L9.10339 14.101L18.0617 5.14262L17.7082 4.78906Z" fill="currentColor"/>`,
|
||||
},
|
||||
"folder-add-left": {
|
||||
viewBox: "0 0 20 20",
|
||||
body: `<path d="M2.08333 9.58268V2.91602H8.33333L10 5.41602H17.9167V16.2493H8.75M3.75 12.0827V14.5827M3.75 14.5827V17.0827M3.75 14.5827H1.25M3.75 14.5827H6.25" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
},
|
||||
"grid-plus": {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
|
||||
},
|
||||
help: {
|
||||
viewBox: "0 0 20 20",
|
||||
body: `<path d="M7.91683 7.91927V6.2526H12.0835V8.7526L10.0002 10.0026V12.0859M10.0002 13.7526V13.7609M17.9168 10.0026C17.9168 14.3749 14.3724 17.9193 10.0002 17.9193C5.62791 17.9193 2.0835 14.3749 2.0835 10.0026C2.0835 5.63035 5.62791 2.08594 10.0002 2.08594C14.3724 2.08594 17.9168 5.63035 17.9168 10.0026Z" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
},
|
||||
"magnifying-glass": {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M13 13L10.6418 10.6418M11.9552 7.47761C11.9552 9.95053 9.95053 11.9552 7.47761 11.9552C5.0047 11.9552 3 9.95053 3 7.47761C3 5.0047 5.0047 3 7.47761 3C9.95053 3 11.9552 5.0047 11.9552 7.47761Z" stroke="currentColor" stroke-linecap="square" vector-effect="non-scaling-stroke"/>`,
|
||||
},
|
||||
menu: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M2 8H14M2 4.664H14M2 11.336H14" stroke="currentColor"/>`,
|
||||
},
|
||||
plus: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M8 2.88867V13.1109" stroke="currentColor" stroke-linejoin="round"/><path d="M2.88867 8H13.1109" stroke="currentColor" stroke-linejoin="round"/>`,
|
||||
},
|
||||
"settings-gear": {
|
||||
viewBox: "0 0 20 20",
|
||||
body: `<path d="M7.62516 4.46094L5.05225 3.86719L3.86475 5.05469L4.4585 7.6276L2.0835 9.21094V10.7943L4.4585 12.3776L3.86475 14.9505L5.05225 16.138L7.62516 15.5443L9.2085 17.9193H10.7918L12.3752 15.5443L14.9481 16.138L16.1356 14.9505L15.5418 12.3776L17.9168 10.7943V9.21094L15.5418 7.6276L16.1356 5.05469L14.9481 3.86719L12.3752 4.46094L10.7918 2.08594H9.2085L7.62516 4.46094Z" stroke="currentColor"/><path d="M12.5002 10.0026C12.5002 11.3833 11.3809 12.5026 10.0002 12.5026C8.61945 12.5026 7.50016 11.3833 7.50016 10.0026C7.50016 8.62189 8.61945 7.5026 10.0002 7.5026C11.3809 7.5026 12.5002 8.62189 12.5002 10.0026Z" stroke="currentColor"/>`,
|
||||
},
|
||||
"xmark-small": {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M4.25 11.75L11.75 4.25M11.75 11.75L4.25 4.25" stroke="currentColor"/>`,
|
||||
},
|
||||
}
|
||||
|
||||
const spriteID = "opencode-v2-icon-sprite"
|
||||
const symbol = (name: keyof typeof icons) => `opencode-v2-icon-${name}`
|
||||
let spriteInserted = false
|
||||
|
||||
function ensureSprite() {
|
||||
if (spriteInserted) return
|
||||
if (typeof document === "undefined") return
|
||||
if (document.getElementById(spriteID)) {
|
||||
spriteInserted = true
|
||||
return
|
||||
}
|
||||
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
|
||||
svg.id = spriteID
|
||||
svg.setAttribute("aria-hidden", "true")
|
||||
svg.setAttribute("width", "0")
|
||||
svg.setAttribute("height", "0")
|
||||
svg.style.position = "absolute"
|
||||
svg.style.overflow = "hidden"
|
||||
svg.innerHTML = Object.entries(icons)
|
||||
.map(([name, icon]) => `<symbol id="${symbol(name as keyof typeof icons)}" viewBox="${icon.viewBox}">${icon.body}</symbol>`)
|
||||
.join("")
|
||||
document.body.insertBefore(svg, document.body.firstChild)
|
||||
spriteInserted = true
|
||||
}
|
||||
|
||||
export interface IconProps extends ComponentProps<"svg"> {
|
||||
name: string
|
||||
name: keyof typeof icons | (string & {})
|
||||
size?: "small" | "normal" | "large"
|
||||
}
|
||||
|
||||
/**
|
||||
* Placeholder icon component
|
||||
*/
|
||||
export function Icon(props: IconProps) {
|
||||
const [split, rest] = splitProps(props, ["name", "size"])
|
||||
const iconName = () => (icons[split.name as keyof typeof icons] ? (split.name as keyof typeof icons) : "plus")
|
||||
const icon = () => icons[iconName()]
|
||||
const pixelSize = split.size === "small" ? 14 : split.size === "large" ? 20 : 16
|
||||
onMount(ensureSprite)
|
||||
|
||||
return (
|
||||
<svg
|
||||
{...rest}
|
||||
data-slot="icon-svg"
|
||||
width={pixelSize}
|
||||
height={pixelSize}
|
||||
viewBox="0 0 16 16"
|
||||
viewBox={icon().viewBox}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden={rest["aria-hidden"] ?? "true"}
|
||||
>
|
||||
<path d="M8 2.88867V13.1109" stroke="currentColor" stroke-linejoin="round" />
|
||||
<path d="M2.88867 8H13.1109" stroke="currentColor" stroke-linejoin="round" />
|
||||
<use href={`#${symbol(iconName())}`} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user