From 3d58627f303784e0bf6a2e507dbd1c89c39bb0d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aneta=20Jastrz=C4=99bska?=
 <1544710+anetaj@users.noreply.github.com>
Date: Sat, 21 Sep 2024 15:39:06 +0200
Subject: [PATCH] style included code tag + toolbar

---
 .../src/sidebar/MarkdownRender/BlockCode.tsx  | 53 +++++++++++--------
 extensions/void/src/sidebar/Sidebar.tsx       | 34 +++++++-----
 .../void/src/sidebar/components/Files.tsx     |  2 +-
 3 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx b/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
index 37d5b5bd..1ce07d80 100644
--- a/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
+++ b/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React, { ReactNode, useCallback, useEffect, useState } from "react"
 import { getVSCodeAPI } from "../getVscodeApi"
+import { classNames } from "../utils"
 
 enum CopyButtonState {
 	Copy = "Copy",
@@ -12,10 +13,14 @@ const COPY_FEEDBACK_TIMEOUT = 1000
 // code block with Apply button at top
 const BlockCode = ({
 	text,
+	toolbar,
 	hideToolbar = false,
+	className,
 }: {
 	text: string
+	toolbar?: ReactNode
 	hideToolbar?: boolean
+	className?: string
 }) => {
 	const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy)
 
@@ -38,34 +43,40 @@ const BlockCode = ({
 		)
 	}, [text])
 
+	const defaultToolbar = (
+		<>
+			<button
+				className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
+				onClick={onCopy}
+			>
+				{copyButtonState}
+			</button>
+			<button
+				className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
+				onClick={async () => {
+					getVSCodeAPI().postMessage({ type: "applyCode", code: text })
+				}}
+			>
+				Apply
+			</button>
+		</>
+	)
+
 	return (
 		<div className="relative group">
 			{!hideToolbar && (
 				<div className="absolute top-0 right-0 invisible group-hover:visible">
-					<div className="flex space-x-2 p-2">
-						<button
-							className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
-							onClick={onCopy}
-						>
-							{copyButtonState}
-						</button>
-						<button
-							className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
-							onClick={async () => {
-								getVSCodeAPI().postMessage({ type: "applyCode", code: text })
-							}}
-						>
-							Apply
-						</button>
-					</div>
+					<div className="flex space-x-2 p-2">{toolbar || defaultToolbar}</div>
 				</div>
 			)}
 			<div
-				className={`overflow-x-auto rounded-sm text-vscode-editor-fg bg-vscode-editor-bg ${
-					hideToolbar ? "" : "rounded-tl-none"
-				}`}
+				className={classNames(
+					"overflow-x-auto rounded-sm text-vscode-editor-fg bg-vscode-editor-bg",
+					!hideToolbar && "rounded-tl-none",
+					className
+				)}
 			>
-				<pre className="p-4">{text}</pre>
+				<pre className="p-2">{text}</pre>
 			</div>
 		</div>
 	)
diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index 1aefaf47..3af8540a 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -220,23 +220,33 @@ const Sidebar = () => {
 			<div className="shrink-0 py-4">
 				<div className="input">
 					{/* selection */}
-					<div className="text-left">
+					{(files.length || selection?.selectionStr) && <div className="p-2 pb-0 space-y-2">
 						{/* selected files */}
 						<FilesSelector files={files} setFiles={setFiles} />
 						{/* selected code */}
-						{!selection?.selectionStr ? null
-							: (
-								<div className="relative">
-									<button 
-										onClick={clearSelection}
-										className="absolute top-2 right-2 text-white hover:text-gray-300 z-10"
+						{!!selection?.selectionStr && (
+							<BlockCode className="rounded border border-vscode-input-border bg-vscode-sidebar-bg" text={selection.selectionStr} toolbar={(
+								<button 
+									onClick={clearSelection}
+									className="btn btn-primary btn-sm rounded py-2"
 									>
-										X
-									</button>
-									<BlockCode text={selection.selectionStr} hideToolbar />
-								</div>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										className="size-4"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											d="M6 18 18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							)} />
 						)}
-					</div>
+					</div>}
 					<form
 						ref={formRef}
 						className="flex flex-row items-center rounded-md p-2"
diff --git a/extensions/void/src/sidebar/components/Files.tsx b/extensions/void/src/sidebar/components/Files.tsx
index 64e4f7fa..b6abf5eb 100644
--- a/extensions/void/src/sidebar/components/Files.tsx
+++ b/extensions/void/src/sidebar/components/Files.tsx
@@ -20,7 +20,7 @@ export const FilesSelector = ({
 
 	return (
 		files.length !== 0 && (
-			<div className="flex flex-wrap p-2 pb-0 -mx-1 -mb-1">
+			<div className="flex flex-wrap -mx-1 -mb-1">
 				{files.map((filename, i) => (
 					<button
 						key={filename.path}