Feat: Add Hermes brain change buttons and skills.sh guide source

2026-06-26 13:34:53 +02:00
parent 0c7b0b19af
commit 066feee3ea
16 changed files with 1201 additions and 504 deletions
@@ -0,0 +1,67 @@
+import { X } from "lucide-react"
+
+export interface CustomDialogProps {
+  type: "alert" | "confirm" | "prompt"
+  title: string
+  message: string
+  defaultValue?: string
+  onConfirm: (val?: string) => void
+  onCancel?: () => void
+}
+
+export function CustomDialog({ type, title, message, defaultValue, onConfirm, onCancel }: CustomDialogProps) {
+  return (
+    <div className="fixed inset-0 z-[99] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="w-full max-w-sm rounded-2xl border border-border/80 bg-card p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-200">
+        <div className="flex items-center justify-between border-b border-border/20 pb-2">
+          <h3 className="text-xs font-bold uppercase tracking-wider text-primary">{title}</h3>
+          <button 
+            onClick={onCancel || (() => onConfirm())}
+            className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
+        
+        {type === "prompt" && (
+          <input
+            type="text"
+            id="custom-dialog-input"
+            defaultValue={defaultValue}
+            className="w-full h-9 px-3 text-xs bg-background/40 border border-border/60 rounded-lg outline-none focus:border-primary transition-colors text-foreground"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                const val = (document.getElementById("custom-dialog-input") as HTMLInputElement)?.value
+                onConfirm(val)
+              }
+            }}
+          />
+        )}
+        
+        <div className="flex justify-end gap-3 pt-2">
+          {(type === "confirm" || type === "prompt") && (
+            <button
+              onClick={onCancel}
+              className="h-8 px-4 flex items-center justify-center text-xs font-semibold text-muted-foreground border border-border/60 bg-background/20 hover:bg-accent rounded-lg transition-colors cursor-pointer"
+            >
+              Abbrechen
+            </button>
+          )}
+          <button
+            onClick={() => {
+              const val = type === "prompt" 
+                ? (document.getElementById("custom-dialog-input") as HTMLInputElement)?.value 
+                : undefined
+              onConfirm(val)
+            }}
+            className="h-8 px-4 flex items-center justify-center text-xs font-semibold text-primary-foreground bg-primary hover:bg-primary/95 rounded-lg transition-colors cursor-pointer"
+          >
+            {type === "confirm" ? "Ja, fortfahren" : type === "prompt" ? "Übernehmen" : "OK"}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}