Add chevron indicators to API element headers

Author: milanofthe

src/lib/components/api/ClassDoc.svelte

@@ -116,18 +116,23 @@
 				<span class="class-desc">{cls.description}</span>
 			{/if}
 		</div>
-		{#if cls.source && isExpanded}
-			<span
-				role="button"
-				tabindex="0"
-				class="icon-btn view-toggle-btn"
-				onclick={toggleView}
-				onkeydown={(e) => e.key === 'Enter' && toggleView(e)}
-				use:tooltip={viewMode === 'docs' ? 'View source' : 'View docs'}
-			>
-				<Icon name={viewMode === 'docs' ? 'braces' : 'book'} size={14} />
+		<div class="header-actions">
+			{#if cls.source && isExpanded}
+				<span
+					role="button"
+					tabindex="0"
+					class="icon-btn view-toggle-btn"
+					onclick={toggleView}
+					onkeydown={(e) => e.key === 'Enter' && toggleView(e)}
+					use:tooltip={viewMode === 'docs' ? 'View source' : 'View docs'}
+				>
+					<Icon name={viewMode === 'docs' ? 'braces' : 'book'} size={14} />
+				</span>
+			{/if}
+			<span class="icon-btn chevron-btn">
+				<Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} size={14} />
 			</span>
-		{/if}
+		</div>
 	</button>
 
 	{#if isExpanded}
@@ -228,11 +233,25 @@
 		line-height: 1.5;
 	}
 
+	/* Header actions container */
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs);
+		flex-shrink: 0;
+	}
+
 	/* View toggle button - inherits .icon-btn styles */
 	.view-toggle-btn {
 		flex-shrink: 0;
 	}
 
+	/* Chevron button */
+	.chevron-btn {
+		flex-shrink: 0;
+		pointer-events: none;
+	}
+
 	/* Source view - no padding, CodeMirror fills the space */
 	.source-body {
 		padding: 0;

src/lib/components/api/FunctionDoc.svelte

@@ -116,18 +116,23 @@
 				<span class="badge accent">{methodType}</span>
 			{/if}
 		</div>
-		{#if func.source && isExpanded}
-			<span
-				role="button"
-				tabindex="0"
-				class="icon-btn view-toggle-btn"
-				onclick={toggleView}
-				onkeydown={(e) => e.key === 'Enter' && toggleView(e)}
-				use:tooltip={viewMode === 'docs' ? 'View source' : 'View docs'}
-			>
-				<Icon name={viewMode === 'docs' ? 'braces' : 'book'} size={14} />
+		<div class="header-actions">
+			{#if func.source && isExpanded}
+				<span
+					role="button"
+					tabindex="0"
+					class="icon-btn view-toggle-btn"
+					onclick={toggleView}
+					onkeydown={(e) => e.key === 'Enter' && toggleView(e)}
+					use:tooltip={viewMode === 'docs' ? 'View source' : 'View docs'}
+				>
+					<Icon name={viewMode === 'docs' ? 'braces' : 'book'} size={14} />
+				</span>
+			{/if}
+			<span class="icon-btn chevron-btn">
+				<Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} size={14} />
 			</span>
-		{/if}
+		</div>
 	</button>
 
 	{#if isExpanded}
@@ -214,11 +219,25 @@
 		text-overflow: ellipsis;
 	}
 
+	/* Header actions container */
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs);
+		flex-shrink: 0;
+	}
+
 	/* View toggle button - inherits .icon-btn styles */
 	.view-toggle-btn {
 		flex-shrink: 0;
 	}
 
+	/* Chevron button */
+	.chevron-btn {
+		flex-shrink: 0;
+		pointer-events: none;
+	}
+
 	.method-body {
 		padding: var(--space-md);
 	}