Josh Lambert
373bbf84f2
Combines infrastructure (PR 1) and getting-started content (PR 2) into a single reviewable PR. Infrastructure: - Platform type (legacy/new/all) in NavLink interface - PageVersionSwitcher banner for legacy-only and new-only pages - PlatformBadge component in SideNav with Legacy/New labels - Tabs hydration fix (SSR-safe useState + useEffect) - _app.tsx reads frontmatter.platform and renders banner Getting Started pages with tab content: - quickstart.md: Auth flow, kilo run --auto, config overview - setup-authentication.md: Tabbed auth flows per platform - settings/index.md: Config locations, precedence, export/import - auto-approving-actions.md: Per-tool permission system Platform markers: - settings/auto-cleanup.md: platform: legacy (frontmatter + nav) - settings/system-notifications.md: platform: legacy (frontmatter + nav) Fixes from code validation and PR review: - Remove false Variable Substitution section (does not exist) - Replace misleading provider env config format - Fix 'most tools prompt for approval' (default is mostly allow) - Add warning about secrets in kilo.json for version control - Fix experimental features tab referencing VSCode instead of Legacy
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React from "react"
|
|
import type { Platform } from "../lib/types"
|
|
|
|
interface Props {
|
|
platform?: Platform
|
|
}
|
|
|
|
export function PageVersionSwitcher({ platform }: Props) {
|
|
if (!platform || platform === "all") return null
|
|
|
|
const legacy = platform === "legacy"
|
|
return (
|
|
<div className="version-banner">
|
|
<span className="version-banner-icon">{legacy ? "\u24D8" : "\u2728"}</span>
|
|
<span>
|
|
{legacy
|
|
? "This page applies to the legacy VSCode extension."
|
|
: "This page applies to the current VSCode extension & CLI."}
|
|
</span>
|
|
|
|
<style jsx>{`
|
|
.version-banner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.version-banner-icon {
|
|
flex-shrink: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|