Skip to content

Commit 91595b4

Browse files
killerappkillerapp
committed
docs: update codebase context editor -> suite
1 parent cb1ac6a commit 91595b4

File tree

2 files changed

+96
-63
lines changed

2 files changed

+96
-63
lines changed

‎examples/context-editor/src/App.tsx‎

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useCallback } from 'react';
2-
import { Container, Paper, Box, Typography, Link as MuiLink, Snackbar, IconButton, Accordion, AccordionSummary, AccordionDetails, Divider, Button } from '@mui/material';
2+
import { Container, Paper, Box, Typography, Link as MuiLink, Snackbar, IconButton, Accordion, AccordionSummary, AccordionDetails, Button } from '@mui/material';
33
import { ThemeProvider } from '@mui/material/styles';
44
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
55
import CloseIcon from '@mui/icons-material/Close';
@@ -46,10 +46,15 @@ const App: React.FC = () => {
4646
<ThemeProvider theme={theme}>
4747
<Container className="container" maxWidth="lg">
4848
<Paper className="paper" elevation={3}>
49-
<Box className="header" display="flex" justifyContent="space-between" alignItems="center">
50-
<Typography className="title" variant="h4" component="h1">
51-
Codebase Context Editor
52-
</Typography>
49+
<Box className="header" display="flex" justifyContent="space-between" alignItems="flex-start" mb={4}>
50+
<Box>
51+
<Typography className="title" variant="h4" component="h1" gutterBottom>
52+
Codebase Context Suite
53+
</Typography>
54+
<Typography variant="subtitle1">
55+
A comprehensive tool for managing codebase context, generating prompts, and enhancing development workflows.
56+
</Typography>
57+
</Box>
5358
<Box display="flex" alignItems="center">
5459
<Button
5560
onClick={() => setSpecModalOpen(true)}
@@ -65,50 +70,50 @@ const App: React.FC = () => {
6570
</Box>
6671
</Box>
6772

68-
<Divider sx={{ my: 3 }} />
69-
7073
<NavTabs value={selectedTab} onChange={handleTabChange} />
7174

72-
{selectedTab === 0 && (
73-
<Box>
74-
<Typography variant="h5" sx={{ mb: 2 }}>Coding Assistant Prompts</Typography>
75-
<Accordion defaultExpanded>
76-
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
77-
<Typography>Claude-dev Prompt</Typography>
78-
</AccordionSummary>
79-
<AccordionDetails>
80-
<PromptViewer
81-
title="CLAUDE-DEV Prompt"
82-
subtitle="CLAUDE-DEV-PROMPT.md"
83-
explanation={codingAssistantPrompts['claude-dev']?.explanation || ''}
84-
content={codingAssistantPrompts['claude-dev']?.content || ''}
85-
onCopy={() => handleCopy(codingAssistantPrompts['claude-dev']?.content || '')}
86-
/>
87-
</AccordionDetails>
88-
</Accordion>
89-
{/* Add other coding assistant prompts here if needed */}
90-
</Box>
91-
)}
75+
<Box mt={2}>
76+
{selectedTab === 0 && (
77+
<Box>
78+
<Typography variant="h5" sx={{ mb: 2 }}>Coding Assistant Prompts</Typography>
79+
<Accordion defaultExpanded>
80+
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
81+
<Typography>Claude-dev Prompt</Typography>
82+
</AccordionSummary>
83+
<AccordionDetails>
84+
<PromptViewer
85+
title="CLAUDE-DEV Prompt"
86+
subtitle="CLAUDE-DEV-PROMPT.md"
87+
explanation={codingAssistantPrompts['claude-dev']?.explanation || ''}
88+
content={codingAssistantPrompts['claude-dev']?.content || ''}
89+
onCopy={() => handleCopy(codingAssistantPrompts['claude-dev']?.content || '')}
90+
/>
91+
</AccordionDetails>
92+
</Accordion>
93+
{/* Add other coding assistant prompts here if needed */}
94+
</Box>
95+
)}
9296

93-
{selectedTab === 1 && (
94-
<Box>
95-
<Typography variant="h5" sx={{ mb: 2 }}>Generate Context Files</Typography>
96-
<PromptViewer
97-
title="Generate Context Prompt"
98-
subtitle="GENERATE-CONTEXT-PROMPT.md"
99-
explanation={generateContextPrompt.explanation}
100-
content={generateContextPrompt.content}
101-
onCopy={() => handleCopy(generateContextPrompt.content)}
102-
/>
103-
</Box>
104-
)}
97+
{selectedTab === 1 && (
98+
<Box>
99+
<Typography variant="h5" sx={{ mb: 2 }}>Generate Context Files</Typography>
100+
<PromptViewer
101+
title="Generate Context Prompt"
102+
subtitle="GENERATE-CONTEXT-PROMPT.md"
103+
explanation={generateContextPrompt.explanation}
104+
content={generateContextPrompt.content}
105+
onCopy={() => handleCopy(generateContextPrompt.content)}
106+
/>
107+
</Box>
108+
)}
105109

106-
{selectedTab === 2 && (
107-
<Box>
108-
<Typography variant="h5" sx={{ mb: 2 }}>Manual Context Form</Typography>
109-
<ContextForm onSubmit={handleContextFormSubmit} />
110-
</Box>
111-
)}
110+
{selectedTab === 2 && (
111+
<Box>
112+
<Typography variant="h5" sx={{ mb: 2 }}>Manual Context Form</Typography>
113+
<ContextForm onSubmit={handleContextFormSubmit} />
114+
</Box>
115+
)}
116+
</Box>
112117
</Paper>
113118

114119
<SpecificationModal

‎examples/context-editor/src/components/NavTabs.tsx‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Tabs, Tab } from '@mui/material';
2+
import { Tabs, Tab, Box } from '@mui/material';
33
import DescriptionIcon from '@mui/icons-material/Description';
44
import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
55
import BlockIcon from '@mui/icons-material/Block';
@@ -11,23 +11,51 @@ interface NavTabsProps {
1111

1212
const NavTabs: React.FC<NavTabsProps> = ({ value, onChange }) => {
1313
return (
14-
<Tabs value={value} onChange={onChange} aria-label="file type tabs" variant="fullWidth">
15-
<Tab
16-
icon={<DescriptionIcon />}
17-
label="Coding Assistant Prompts"
18-
sx={{ textTransform: 'none' }}
19-
/>
20-
<Tab
21-
icon={<LibraryBooksIcon />}
22-
label="Generate Context Files"
23-
sx={{ textTransform: 'none' }}
24-
/>
25-
<Tab
26-
icon={<BlockIcon />}
27-
label="Manual Context Form"
28-
sx={{ textTransform: 'none' }}
29-
/>
30-
</Tabs>
14+
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
15+
<Tabs
16+
value={value}
17+
onChange={onChange}
18+
aria-label="file type tabs"
19+
variant="fullWidth"
20+
sx={{
21+
'& .MuiTab-root': {
22+
textTransform: 'none',
23+
padding: '12px 16px',
24+
'&.Mui-selected': {
25+
backgroundColor: 'action.selected',
26+
},
27+
},
28+
}}
29+
>
30+
<Tab
31+
icon={<DescriptionIcon />}
32+
label="Coding Assistant Prompts"
33+
sx={{
34+
'&.Mui-selected': {
35+
fontWeight: 'bold',
36+
},
37+
}}
38+
/>
39+
<Tab
40+
icon={<LibraryBooksIcon />}
41+
label="Generate Context Files"
42+
sx={{
43+
'&.Mui-selected': {
44+
fontWeight: 'bold',
45+
},
46+
}}
47+
/>
48+
<Tab
49+
icon={<BlockIcon />}
50+
label="Manual Context Form"
51+
sx={{
52+
'&.Mui-selected': {
53+
fontWeight: 'bold',
54+
},
55+
}}
56+
/>
57+
</Tabs>
58+
</Box>
3159
);
3260
};
3361

0 commit comments

Comments
 (0)