hermes/hermes-os
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Auto-refresh active sessions, collapsible skill categories, platform toolsets in config, search highlighting

Browse Source
This commit is contained in:
Hermes
2026-04-09 21:38:33 -05:00
parent d86cbea6a5
commit 61e512ffe5
4 changed files with 83 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/skills/page.tsx
+41 -18
View File
@@ -2,13 +2,14 @@
import { useState } from "react";
import Link from "next/link";
import { ChevronRight, Search, X } from "lucide-react";
import { ChevronRight, ChevronDown, Search, X } from "lucide-react";
import { useSkills } from "@/lib/hooks";
import type { SkillSummary } from "@/lib/types";
export default function SkillsPage() {
const { data, isLoading } = useSkills();
const [search, setSearch] = useState("");
const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
const skills = data?.skills || [];
const categories = [...new Set(skills.map((s) => s.category || "uncategorized"))].sort();
@@ -21,6 +22,14 @@ export default function SkillsPage() {
.map((cat) => ({ category: cat, skills: filtered.filter((s) => (s.category || "uncategorized") === cat) }))
.filter((g) => g.skills.length > 0);
const toggle = (cat: string) => {
setCollapsed((prev) => {
const next = new Set(prev);
next.has(cat) ? next.delete(cat) : next.add(cat);
return next;
});
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
@@ -48,25 +57,39 @@ export default function SkillsPage() {
{isLoading ? (
<div className="space-y-2">{[...Array(5)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} /></div>)}</div>
) : (
<div className="space-y-5">
{grouped.map(({ category, skills }) => (
<div key={category}>
<div className="section-label mb-2">{category}</div>
{skills.map((s) => (
<Link key={s.name} href={"/skills/" + s.name}>
<div className="flex items-center gap-3 py-2.5 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
<div className="flex-1 min-w-0">
<div className="text-[14px]" style={{ color: "var(--text-1)" }}>{s.name}</div>
<div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
<div className="space-y-3">
{grouped.map(({ category, skills }) => {
const isCollapsed = collapsed.has(category) && !search;
return (
<div key={category}>
<button
onClick={() => toggle(category)}
className="flex items-center gap-1.5 w-full text-left mb-1.5 px-1 active:opacity-70"
>
{isCollapsed ? (
<ChevronRight size={14} style={{ color: "var(--text-3)" }} />
) : (
<ChevronDown size={14} style={{ color: "var(--text-3)" }} />
)}
<span className="section-label">{category}</span>
<span className="text-[10px] ml-1" style={{ color: "var(--text-3)" }}>{skills.length}</span>
</button>
{!isCollapsed && skills.map((s) => (
<Link key={s.name} href={"/skills/" + s.name}>
<div className="flex items-center gap-3 py-2.5 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
<div className="flex-1 min-w-0">
<div className="text-[14px]" style={{ color: "var(--text-1)" }}>{s.name}</div>
<div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
</div>
<ChevronRight size={16} style={{ color: "var(--text-3)" }} />
</div>
<ChevronRight size={16} style={{ color: "var(--text-3)" }} />
</div>
</Link>
))}
</div>
))}
</Link>
))}
</div>
);
})}
{grouped.length === 0 && (
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match "{search}"</p>
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match &ldquo;{search}&rdquo;</p>
)}
</div>
)}