add icons

src/ui/src/components/shared/SharedCollapsible.vue

@@ -1,29 +1,51 @@
 <template>
 	<details
 		class="SharedCollapsible"
-		:open="open"
+		:class="{ 'SharedCollapsible--customMarker': icons }"
+		:open="isOpen"
 		:disabled="disabled"
 		@toggle="onToggle"
 	>
-		<summary><slot name="title" /></summary>
+		<summary>
+			<span v-if="icons" class="material-symbols-outlined">{{
+				icon
+			}}</span>
+			<slot name="title" />
+		</summary>
 		<div class="content">
 			<slot name="content" />
 		</div>
 	</details>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { computed, PropType, ref } from "vue";
+
+const props = defineProps({
 	open: { type: Boolean, required: false },
 	disabled: { type: Boolean, required: false },
+	icons: {
+		type: Object as PropType<{ open: string; close: string }>,
+		required: false,
+		default: undefined,
+	},
 });
 
 const emit = defineEmits({
 	toggle: (open: boolean) => typeof open === "boolean",
 });
 
+const isOpen = ref(props.open);
+
+const icon = computed(() => {
+	if (props.icons === undefined) return undefined;
+	return isOpen.value ? props.icons.open : props.icons.close;
+});
+
 function onToggle(event) {
-	emit("toggle", event.newState === "open");
+	const state = event.newState === "open";
+	isOpen.value = state;
+	emit("toggle", state);
 }
 </script>
 
@@ -50,7 +72,7 @@ summary {
 	cursor: pointer;
 }
 
-summary:before {
+details summary:before {
 	content: "";
 	border-width: 6px;
 	border-style: solid;
@@ -64,6 +86,17 @@ summary:before {
 	transition: 0.3s transform ease;
 }
 
+.SharedCollapsible--customMarker summary {
+	padding-left: unset;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 4px;
+	align-items: center;
+}
+.SharedCollapsible--customMarker summary:before {
+	content: none;
+}
+
 summary:focus-visible:before {
 	border-color: transparent transparent transparent var(--primaryTextColor);
 }

src/ui/src/components/shared/SharedSourceFilesTree/ShareSourceFilesTree.vue

@@ -36,5 +36,6 @@ const sourceFilesEntries = computed(() =>
 .SharedSourceFilesTree {
 	display: flex;
 	flex-direction: column;
+	gap: 2px;
 }
 </style>

src/ui/src/components/shared/SharedSourceFilesTree/ShareSourceFilesTreeNode.vue

@@ -18,28 +18,21 @@ defineEmits({
 	select: (path: string[]) => Array.isArray(path),
 });
 
-const isPathActive = computed(() =>
-	props.pathActive
-		.join("/")
-		.startsWith([...props.path, props.root].join("/")),
+const currentPathString = computed(() => [...props.path, props.root].join("/"));
+
+const isPathActive = computed(
+	() => props.pathActive.join("/") === currentPathString.value,
 );
 
 const isDirectory = computed(() => typeof props.content !== "string");
 </script>
 
 <template>
-	<SharedCollapsible v-if="isDirectory">
-		<template #title
-			><span
-				class="SharedSourceFilesTreeNode__folder"
-				:class="{
-					'SharedSourceFilesTreeNode__folder--active': isPathActive,
-				}"
-			>
-				<span class="material-symbols-outlined">folder</span>
-				{{ root }}</span
-			></template
-		>
+	<SharedCollapsible
+		v-if="isDirectory"
+		:icons="{ open: 'folder_open', close: 'folder' }"
+	>
+		<template #title>{{ root }}</template>
 		<template #content>
 			<div class="SharedSourceFilesTreeNode__content">
 				<ShareSourceFilesTree
@@ -57,16 +50,17 @@ const isDirectory = computed(() => typeof props.content !== "string");
 		:class="{
 			'SharedSourceFilesTreeNode__file--active': isPathActive,
 		}"
+		:data-writer-tooltip="currentPathString"
 		@click="$emit('select', [...path, root])"
 	>
-		<span class="material-symbols-outlined"> description </span>
+		<span class="material-symbols-outlined">description</span>
 		{{ root }}
 	</button>
 </template>
 
 <style scoped>
 .SharedSourceFilesTreeNode__content {
-	padding-left: 16px;
+	padding-left: 12px;
 }
 
 .SharedSourceFilesTreeNode__file {