rvlib-shipkit 1.1.1 → 1.3.0

package/src/serve/hub-app/project-gutter.tsx

@@ -1,128 +0,0 @@
-// the project gutter: one icon per repo that shares this hub's house wiki,
-// down the far left of the page. The face stays quiet (faceOf): at most one
-// badge, the open asks; the icon dims while VS Code does not have the folder
-// open; a thin edge pulses while Claude sessions run in it; the selected
-// background marks this hub's own repo. Everything else is the hover card,
-// shown at once to the right of the icon. A click opens the folder in VS
-// Code, a drag reorders the rail, and the button on top sorts it once by
-// last activity. Fixed position, so it takes no cell of the page grid
-// (project-gutter.css).
-import { observer } from 'mobx-react-lite'
-import { useEffect, useLayoutEffect, useRef } from 'react'
-import type { HubSt } from './hub-st.ts'
-import { cardModel, faceOf, hueOf, type Project } from './projects-svc.ts'
-
-export const Tile = observer(({ app, p, i }: { app: HubSt; p: Project; i: number }) => {
-    const s = app.projects
-    const gap = s.shownGap
-    const face = faceOf(p)
-    // the drop line rides on a tile edge, so showing it moves nothing
-    const edge = gap === i ? ' dropb' : gap === i + 1 && i === s.list.length - 1 ? ' dropa' : ''
-    const cls = `pgt${p.current ? ' cur' : ''}${face.dim ? ' dim' : ''}${s.drag === p.name ? ' dragging' : ''}${edge}`
-    return (
-    <button className={cls} aria-label={p.name}
-        draggable onClick={() => void s.open(p.name)}
-        onMouseEnter={(e) => {
-            const r = e.currentTarget.getBoundingClientRect()
-            s.hoverIn(p.name, r.top + r.height / 2)
-        }}
-        onMouseLeave={() => s.hoverOut(p.name)}
-        onDragStart={(e) => {
-            e.dataTransfer.effectAllowed = 'move'
-            e.dataTransfer.setData('text/plain', p.name)
-            s.dragStart(p.name)
-        }}
-        onDragOver={(e) => {
-            if (s.drag == null) return
-            e.preventDefault()
-            const r = e.currentTarget.getBoundingClientRect()
-            s.dragOver(i, e.clientY - r.top, r.height)
-        }}
-        onDrop={(e) => {
-            e.preventDefault()
-            s.drop()
-        }}
-        onDragEnd={() => s.dragEnd()}>
-        <Face p={p} />
-        {face.badge != null ? <b className="pga">{face.badge}</b> : null}
-        {face.busy ? <i className="pgs" /> : null}
-    </button>
-    )
-})
-
-const Face = ({ p }: { p: Project }) => (p.icon != null
-    ? <img src={p.icon} alt="" draggable={false} />
-    : <span className={`pgi h${hueOf(p.name)}`}>{(p.name.match(/[a-zA-Z]/)?.[0] ?? p.name.charAt(0)).toUpperCase()}</span>)
-
-/** the card for one repo: header, what needs a human, then the fact rows,
- *  in the label and value shape the check page's WHAT widget uses */
-export const Card = ({ p, now }: { p: Project; now: number }) => {
-    const m = cardModel(p, now)
-    return (
-        <>
-            <div className="pgch">
-                <span className="pgcface"><Face p={p} /></span>
-                <b className="pgcname">{m.head.name}{m.head.current ? <span className="pgcthis"> this hub</span> : null}</b>
-                {m.head.version == null ? null : <span className="pgcver">v{m.head.version.replace(/^v/, '')}</span>}
-            </div>
-            {m.head.branch == null ? null : <div className="pgcline">{m.head.branch}</div>}
-            {m.head.description == null ? null : <div className="pgcdesc">{m.head.description}</div>}
-            {m.needs == null ? null : (
-                <div className="pgcneeds">
-                    {m.needs.asks == null ? null : (
-                        <div className="pgcneed">
-                            <span className="pgcask">{m.needs.asks.count} ask{m.needs.asks.count === 1 ? '' : 's'}: {m.needs.asks.titles.join(' · ')}</span>
-                            {m.needs.asks.more > 0 ? <span className="pgcmore">+{m.needs.asks.more}</span> : null}
-                        </div>
-                    )}
-                    {m.needs.gate == null ? null : <div className="pgcneed red">{m.needs.gate}</div>}
-                </div>
-            )}
-            {m.facts.length === 0 ? null : (
-                <div className="pgcfacts">
-                    {m.facts.map((f) => (
-                        <div key={f.k} className="wfact">
-                            <span className="wk">{f.k}</span>
-                            <span className={`wv${f.tone == null ? '' : ` ${f.tone}`}`}>{f.v}</span>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </>
-    )
-}
-
-/** the one hover card: right of the rail, centred on the icon's row, then
- *  clamped into the viewport once its own height is known */
-export const HoverCard = observer(({ app }: { app: HubSt }) => {
-    const s = app.projects
-    const p = s.hovered
-    const y = s.hover?.y ?? 0
-    const ref = useRef<HTMLDivElement>(null)
-    useLayoutEffect(() => {
-        const el = ref.current
-        if (el == null) return
-        const h = el.offsetHeight
-        el.style.top = `${Math.max(8, Math.min(y - h / 2, window.innerHeight - h - 8))}px`
-    })
-    if (p == null) return null
-    return (
-        <div ref={ref} className="pgcard" role="tooltip">
-            <Card p={p} now={Date.now()} />
-        </div>
-    )
-})
-
-export const ProjectGutter = observer(({ app }: { app: HubSt }) => {
-    useEffect(() => app.projects.start(), [app])
-    const s = app.projects
-    if (s.list.length === 0 && s.error === '') return null
-    return (
-        <nav className="pgut" aria-label="projects">
-            <button className="pgsort" title="sort by last activity, once: the result is the new manual order" onClick={() => s.sortByActivity()}>⇅</button>
-            {s.list.map((p, i) => <Tile key={p.name} app={app} p={p} i={i} />)}
-            {s.error !== '' ? <span className="pgerr" title={s.error}>!</span> : null}
-            <HoverCard app={app} />
-        </nav>
-    )
-})