diff options
| -rw-r--r-- | makima/frontend/src/components/directives/DirectiveDetail.tsx | 7 | ||||
| -rw-r--r-- | makima/frontend/src/routes/directives.tsx | 218 |
2 files changed, 123 insertions, 102 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx index 95dc7cc..645b8d2 100644 --- a/makima/frontend/src/components/directives/DirectiveDetail.tsx +++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx @@ -176,7 +176,6 @@ function JsonSection({ export function DirectiveDetail({ directive, - onBack, onDelete, onStart, onRefresh, @@ -247,12 +246,6 @@ export function DirectiveDetail({ {/* Header */} <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]"> <div className="flex items-center gap-2 mb-2"> - <button - onClick={onBack} - className="font-mono text-xs text-[#75aafc] hover:text-white transition-colors" - > - ← Back - </button> <span className={`font-mono text-[10px] uppercase ${ statusColors[directive.status as DirectiveStatus] || "text-[#888]" diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx index 9437389..939961c 100644 --- a/makima/frontend/src/routes/directives.tsx +++ b/makima/frontend/src/routes/directives.tsx @@ -32,12 +32,11 @@ export default function DirectivesPage() { ); } - return ( - <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]"> - <Masthead showNav /> - <DirectivesContent /> - </div> - ); + if (isAuthConfigured && !isAuthenticated) { + return null; + } + + return <DirectivesContent />; } function DirectivesContent() { @@ -136,98 +135,127 @@ function DirectivesContent() { [] ); - // Detail view - if (id) { - if (detailLoading) { - return ( - <main className="flex-1 flex items-center justify-center"> - <p className="text-[#7788aa] font-mono text-sm">Loading directive...</p> - </main> - ); - } - if (!selectedDirective) { - return ( - <main className="flex-1 flex items-center justify-center"> - <p className="text-[#7788aa] font-mono text-sm">Directive not found</p> - </main> - ); - } - return ( - <main className="flex-1 p-4 max-w-4xl mx-auto w-full"> - <DirectiveDetail - directive={selectedDirective} - onBack={handleBack} - onDelete={handleDelete} - onStart={handleStart} - onRefresh={handleRefresh} - /> - </main> - ); - } - - // List view return ( - <main className="flex-1 p-4 max-w-4xl mx-auto w-full"> - {error && ( - <div className="mb-4 p-2 border border-red-400/30 bg-red-400/5 font-mono text-xs text-red-400"> - {error} - </div> - )} - - {showCreateForm && ( - <div className="mb-4 p-4 border border-dashed border-[rgba(117,170,252,0.35)] bg-[rgba(117,170,252,0.03)]"> - <h3 className="font-mono text-xs text-[#75aafc] uppercase tracking-wider mb-3"> - New Directive - </h3> - <div className="space-y-2"> - <input - type="text" - placeholder="Title" - value={createTitle} - onChange={(e) => setCreateTitle(e.target.value)} - className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none" - /> - <textarea - placeholder="Goal - what should be accomplished?" - value={createGoal} - onChange={(e) => setCreateGoal(e.target.value)} - rows={3} - className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none resize-none" - /> - <input - type="text" - placeholder="Repository URL (optional)" - value={createRepoUrl} - onChange={(e) => setCreateRepoUrl(e.target.value)} - className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none" - /> - <div className="flex gap-2"> - <button - onClick={handleCreate} - disabled={!createTitle.trim() || !createGoal.trim()} - className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase disabled:opacity-50 disabled:cursor-not-allowed" - > - Create - </button> - <button - onClick={() => setShowCreateForm(false)} - className="px-3 py-1.5 font-mono text-xs text-[#7788aa] hover:text-[#dbe7ff] transition-colors uppercase" - > - Cancel - </button> + <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]"> + <Masthead showNav /> + <main className="flex-1 flex flex-col p-4 pt-2 gap-4 overflow-hidden"> + {error && ( + <div className="p-3 bg-red-400/10 border border-red-400/30 text-red-400 font-mono text-sm"> + {error} + </div> + )} + + {/* Create directive form */} + {showCreateForm && ( + <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"> + <div className="w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)]"> + <h3 className="font-mono text-sm text-[#75aafc] uppercase mb-4"> + New Directive + </h3> + <div className="space-y-3"> + <div> + <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1"> + Title + </label> + <input + type="text" + placeholder="Title" + value={createTitle} + onChange={(e) => setCreateTitle(e.target.value)} + className="w-full px-3 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] focus:border-[#75aafc] outline-none" + autoFocus + /> + </div> + <div> + <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1"> + Goal + </label> + <textarea + placeholder="What should be accomplished?" + value={createGoal} + onChange={(e) => setCreateGoal(e.target.value)} + rows={3} + className="w-full px-3 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] focus:border-[#75aafc] outline-none resize-none" + /> + </div> + <div> + <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1"> + Repository URL (optional) + </label> + <input + type="text" + placeholder="https://github.com/user/repo.git" + value={createRepoUrl} + onChange={(e) => setCreateRepoUrl(e.target.value)} + className="w-full px-3 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] focus:border-[#75aafc] outline-none" + /> + </div> + <div className="flex gap-2 justify-end pt-2"> + <button + onClick={() => { + setShowCreateForm(false); + setCreateTitle(""); + setCreateGoal(""); + setCreateRepoUrl(""); + }} + className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors" + > + Cancel + </button> + <button + onClick={handleCreate} + disabled={!createTitle.trim() || !createGoal.trim()} + className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" + > + Create + </button> + </div> + </div> </div> </div> + )} + + <div className="flex-1 grid grid-cols-[350px_1fr] gap-4 min-h-0"> + {/* Directive list */} + <DirectiveList + directives={directives} + loading={loading} + onSelect={handleSelect} + onCreate={() => setShowCreateForm(true)} + onDelete={(d) => handleDelete(d.id)} + selectedId={id} + /> + + {/* Directive detail or empty state */} + {detailLoading ? ( + <div className="panel h-full flex items-center justify-center"> + <p className="text-[#7788aa] font-mono text-sm">Loading directive...</p> + </div> + ) : selectedDirective ? ( + <DirectiveDetail + directive={selectedDirective} + onBack={handleBack} + onDelete={handleDelete} + onStart={handleStart} + onRefresh={handleRefresh} + /> + ) : ( + <div className="panel h-full flex items-center justify-center"> + <div className="text-center"> + <p className="font-mono text-sm text-[#555] mb-4"> + Select a directive or create a new one + </p> + <button + onClick={() => setShowCreateForm(true)} + className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase" + > + + New Directive + </button> + </div> + </div> + )} </div> - )} - - <DirectiveList - directives={directives} - loading={loading} - onSelect={handleSelect} - onCreate={() => setShowCreateForm(true)} - onDelete={(d) => handleDelete(d.id)} - selectedId={id} - /> - </main> + </main> + </div> ); } |