mirror of
https://github.com/Kilo-Org/kilocode.git
synced 2026-10-24 01:24:18 +08:00
feat(settings): implement Checkpoints, Display, and Context tabs
This commit is contained in:
Mark IJbema
@@ -1,29 +1,57 @@
|
||||
import { Component } from "solid-js"
|
||||
import { useConfig } from "../../context/config"
|
||||
|
||||
const CheckpointsTab: Component = () => {
|
||||
const { config, updateConfig } = useConfig()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--vscode-editor-background)",
|
||||
border: "1px solid var(--vscode-panel-border)",
|
||||
"border-radius": "4px",
|
||||
padding: "16px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
{/* Snapshot toggle */}
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
margin: 0,
|
||||
"line-height": "1.5",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "space-between",
|
||||
padding: "10px 12px",
|
||||
background: "var(--vscode-editor-background)",
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: "var(--vscode-foreground)" }}>This section is not implemented yet.</strong> It will
|
||||
contain configuration options and explanatory text related to the selected settings category. During
|
||||
reimplementation, use this space to validate layout, spacing, scrolling behavior, and navigation state before
|
||||
wiring up real controls.
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
"font-weight": "500",
|
||||
color: "var(--vscode-foreground)",
|
||||
}}
|
||||
>
|
||||
Enable Snapshots
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "11px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
"margin-top": "2px",
|
||||
}}
|
||||
>
|
||||
Create checkpoints before file edits so you can restore previous states
|
||||
</div>
|
||||
</div>
|
||||
<label style={{ display: "flex", "align-items": "center", cursor: "pointer" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config().snapshot !== false}
|
||||
onChange={(e) => updateConfig({ snapshot: e.currentTarget.checked })}
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,29 +1,157 @@
|
||||
import { Component } from "solid-js"
|
||||
import { Component, For, createSignal } from "solid-js"
|
||||
import { useConfig } from "../../context/config"
|
||||
|
||||
const inputStyle = {
|
||||
padding: "4px 8px",
|
||||
"border-radius": "4px",
|
||||
border: "1px solid var(--vscode-input-border, var(--vscode-panel-border))",
|
||||
background: "var(--vscode-input-background)",
|
||||
color: "var(--vscode-input-foreground)",
|
||||
"font-size": "12px",
|
||||
"font-family": "var(--vscode-font-family)",
|
||||
outline: "none",
|
||||
flex: "1",
|
||||
}
|
||||
|
||||
const ContextTab: Component = () => {
|
||||
const { config, updateConfig } = useConfig()
|
||||
const [newPattern, setNewPattern] = createSignal("")
|
||||
|
||||
const patterns = () => config().watcher?.ignore ?? []
|
||||
|
||||
const addPattern = () => {
|
||||
const value = newPattern().trim()
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
const current = [...patterns()]
|
||||
if (!current.includes(value)) {
|
||||
current.push(value)
|
||||
updateConfig({ watcher: { ignore: current } })
|
||||
}
|
||||
setNewPattern("")
|
||||
}
|
||||
|
||||
const removePattern = (index: number) => {
|
||||
const current = [...patterns()]
|
||||
current.splice(index, 1)
|
||||
updateConfig({ watcher: { ignore: current } })
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--vscode-editor-background)",
|
||||
border: "1px solid var(--vscode-panel-border)",
|
||||
"border-radius": "4px",
|
||||
padding: "16px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
margin: 0,
|
||||
"line-height": "1.5",
|
||||
padding: "10px 12px",
|
||||
background: "var(--vscode-editor-background)",
|
||||
"border-bottom": "1px solid var(--vscode-panel-border)",
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: "var(--vscode-foreground)" }}>This section is not implemented yet.</strong> It will
|
||||
contain configuration options and explanatory text related to the selected settings category. During
|
||||
reimplementation, use this space to validate layout, spacing, scrolling behavior, and navigation state before
|
||||
wiring up real controls.
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
"font-weight": "500",
|
||||
color: "var(--vscode-foreground)",
|
||||
}}
|
||||
>
|
||||
File Watcher Ignore Patterns
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "11px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
"margin-top": "2px",
|
||||
}}
|
||||
>
|
||||
Glob patterns for files the watcher should ignore
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add new pattern */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
padding: "8px 12px",
|
||||
background: "var(--vscode-editor-background)",
|
||||
"border-bottom": patterns().length > 0 ? "1px solid var(--vscode-panel-border)" : "none",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={inputStyle}
|
||||
value={newPattern()}
|
||||
placeholder="e.g. **/node_modules/**"
|
||||
onInput={(e) => setNewPattern(e.currentTarget.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
addPattern()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={addPattern}
|
||||
style={{
|
||||
padding: "4px 12px",
|
||||
"border-radius": "4px",
|
||||
border: "1px solid var(--vscode-button-border, transparent)",
|
||||
background: "var(--vscode-button-background)",
|
||||
color: "var(--vscode-button-foreground)",
|
||||
"font-size": "12px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Pattern list */}
|
||||
<For each={patterns()}>
|
||||
{(pattern, index) => (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "space-between",
|
||||
padding: "6px 12px",
|
||||
background: "var(--vscode-editor-background)",
|
||||
"border-bottom": index() < patterns().length - 1 ? "1px solid var(--vscode-panel-border)" : "none",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
"font-family": "var(--vscode-editor-font-family, monospace)",
|
||||
color: "var(--vscode-foreground)",
|
||||
}}
|
||||
>
|
||||
{pattern}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removePattern(index())}
|
||||
style={{
|
||||
padding: "2px 8px",
|
||||
"border-radius": "4px",
|
||||
border: "1px solid var(--vscode-panel-border)",
|
||||
background: "transparent",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
"font-size": "11px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,29 +1,130 @@
|
||||
import { Component } from "solid-js"
|
||||
import { useConfig } from "../../context/config"
|
||||
|
||||
const inputStyle = {
|
||||
padding: "4px 8px",
|
||||
"border-radius": "4px",
|
||||
border: "1px solid var(--vscode-input-border, var(--vscode-panel-border))",
|
||||
background: "var(--vscode-input-background)",
|
||||
color: "var(--vscode-input-foreground)",
|
||||
"font-size": "12px",
|
||||
"font-family": "var(--vscode-font-family)",
|
||||
outline: "none",
|
||||
width: "200px",
|
||||
}
|
||||
|
||||
const selectStyle = {
|
||||
padding: "4px 8px",
|
||||
"border-radius": "4px",
|
||||
border: "1px solid var(--vscode-dropdown-border, var(--vscode-panel-border))",
|
||||
background: "var(--vscode-dropdown-background)",
|
||||
color: "var(--vscode-dropdown-foreground)",
|
||||
"font-size": "12px",
|
||||
"font-family": "var(--vscode-font-family)",
|
||||
cursor: "pointer",
|
||||
outline: "none",
|
||||
"min-width": "120px",
|
||||
}
|
||||
|
||||
const DisplayTab: Component = () => {
|
||||
const { config, updateConfig } = useConfig()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--vscode-editor-background)",
|
||||
border: "1px solid var(--vscode-panel-border)",
|
||||
"border-radius": "4px",
|
||||
padding: "16px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
{/* Username */}
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
margin: 0,
|
||||
"line-height": "1.5",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "space-between",
|
||||
padding: "10px 12px",
|
||||
background: "var(--vscode-editor-background)",
|
||||
"border-bottom": "1px solid var(--vscode-panel-border)",
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: "var(--vscode-foreground)" }}>This section is not implemented yet.</strong> It will
|
||||
contain configuration options and explanatory text related to the selected settings category. During
|
||||
reimplementation, use this space to validate layout, spacing, scrolling behavior, and navigation state before
|
||||
wiring up real controls.
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
"font-weight": "500",
|
||||
color: "var(--vscode-foreground)",
|
||||
}}
|
||||
>
|
||||
Username
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "11px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
"margin-top": "2px",
|
||||
}}
|
||||
>
|
||||
Custom username displayed in conversations
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
style={inputStyle}
|
||||
value={config().username ?? ""}
|
||||
placeholder="User"
|
||||
onBlur={(e) => {
|
||||
const value = e.currentTarget.value.trim()
|
||||
updateConfig({ username: value || undefined })
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.currentTarget.blur()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Layout mode */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "space-between",
|
||||
padding: "10px 12px",
|
||||
background: "var(--vscode-editor-background)",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "12px",
|
||||
"font-weight": "500",
|
||||
color: "var(--vscode-foreground)",
|
||||
}}
|
||||
>
|
||||
Layout
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
"font-size": "11px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
"margin-top": "2px",
|
||||
}}
|
||||
>
|
||||
Layout mode for the chat interface
|
||||
</div>
|
||||
</div>
|
||||
<select
|
||||
style={selectStyle}
|
||||
value={config().layout ?? "auto"}
|
||||
onChange={(e) => updateConfig({ layout: e.currentTarget.value as "auto" | "stretch" })}
|
||||
>
|
||||
<option value="auto">Auto</option>
|
||||
<option value="stretch">Stretch</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user