@ssebastien/tcmd 0.1.3 → 0.1.7

package/src/js/tcmd/components/App.xml

@@ -10,7 +10,7 @@
 		<!-- Identity bar: the one visible trace of TinyCmd itself (the host
 		     aside, everything else on screen is the user's files). "Tiny"
 		     shimmers blue letter by letter, "Cmd" shimmers orange. -->
-		<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+		<box flexDirection="row" height="1" paddingLeft="1" paddingRight="1" overflow="hidden">
 			<text out="brandT" out:fg="brandTFg" wrapMode="none"></text>
 			<text out="brandI" out:fg="brandIFg" wrapMode="none"></text>
 			<text out="brandN" out:fg="brandNFg" wrapMode="none"></text>
@@ -19,6 +19,26 @@
 			<text out="brandM" out:fg="brandMFg" wrapMode="none"></text>
 			<text out="brandD" out:fg="brandDFg" wrapMode="none"></text>
 			<text out="topBar" out:fg="topBarFg" wrapMode="none"></text>
+			<box flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden"></box>
+			<!-- The view mode, letter by letter so each carries its gradient:
+			     explorer shimmers along the Tiny blues, commander along the
+			     Cmd oranges (see `modeGradient` in Frame.js). The trailing
+			     slots of the shorter word are empty and take no column. -->
+			<box flexDirection="row" flexShrink="0" overflow="hidden">
+				<!-- Clicking the mode word flips explorer ⇄ commander. -->
+				<box flexDirection="row" overflow="hidden" on:click="!view:toggleMode">
+					<text when="modeHas0" out="modeL0" out:fg="modeFg0" wrapMode="none"></text>
+					<text when="modeHas1" out="modeL1" out:fg="modeFg1" wrapMode="none"></text>
+					<text when="modeHas2" out="modeL2" out:fg="modeFg2" wrapMode="none"></text>
+					<text when="modeHas3" out="modeL3" out:fg="modeFg3" wrapMode="none"></text>
+					<text when="modeHas4" out="modeL4" out:fg="modeFg4" wrapMode="none"></text>
+					<text when="modeHas5" out="modeL5" out:fg="modeFg5" wrapMode="none"></text>
+					<text when="modeHas6" out="modeL6" out:fg="modeFg6" wrapMode="none"></text>
+					<text when="modeHas7" out="modeL7" out:fg="modeFg7" wrapMode="none"></text>
+					<text when="modeHas8" out="modeL8" out:fg="modeFg8" wrapMode="none"></text>
+				</box>
+				<text out="topBarStatus" out:fg="topBarStatusFg" wrapMode="none"></text>
+			</box>
 		</box>
 
 		<!-- Minimum-size gate: below the breakpoint the workspace is unusable. -->
@@ -27,72 +47,106 @@
 			<text out="minSizeHint" out:fg="dimFg"></text>
 		</box>
 
-		<!-- Two boxed panes plus the inline inspector. -->
+		<!-- Columns: commander tiles source and destination; explorer leads
+		     with the parent mirror so the current pane sits in the middle,
+		     slightly wider than its neighbours. The inspector completes the
+		     three columns in either mode. -->
 		<box when="!tooSmall" flexDirection="column" flexGrow="1" overflow="hidden">
-			<box flexDirection="row" flexGrow="1" overflow="hidden">
-				<box flexDirection="column" flexGrow="1" border borderStyle="single"
+			<box when="!showPreviewFull" flexDirection="row" flexGrow="1" overflow="hidden">
+				<box when="showParentPane" flexDirection="column" flexGrow="1" flexBasis="0" border borderStyle="single"
+				     out:border="leftBorder" out:borderColor="parentBorderFg"
+				     on:click="parentId!pane:activate">
+					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+						<box when="!parentFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
+							<breadcrumbs in:segments="parentSegments" in:paneId="parentId" height="1"></breadcrumbs>
+						</box>
+						<filterbar in:query="parentFilter" in:paneId="parentId" in:filtering="filtering" in:entries="parentEntries" in:setFilter="parentSetFilter"></filterbar>
+					</box>
+					<box height="1" out:border="headRule" out:borderColor="parentHeadRuleFg"></box>
+					<filelist in:entries="parentEntries" in:cursor="parentCursor" in:marked="parentMarked"
+					          in:active="parentActive" in:paneId="parentId" in:loading="parentLoading"
+					          in:viewport="listViewport"></filelist>
+					<entrydetail in:entry="parentEntry" in:marked="parentMarked" height="2"></entrydetail>
+				</box>
+				<box when="showLeftPane" flexDirection="column" flexBasis="0" out:flexGrow="leftGrow" border borderStyle="single"
 				     out:border="leftBorder" out:borderColor="leftBorderFg"
 				     on:click="leftId!pane:activate">
 					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
 						<box when="!leftFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
 							<breadcrumbs in:segments="leftSegments" in:paneId="leftId" height="1"></breadcrumbs>
 						</box>
-						<filterbar in:query="leftFilter" in:paneId="leftId" in:filtering="filtering" in:entries="leftEntries"></filterbar>
+						<filterbar in:query="leftFilter" in:paneId="leftId" in:filtering="filtering" in:entries="leftEntries" in:setFilter="leftSetFilter"></filterbar>
 					</box>
 					<box height="1" out:border="headRule" out:borderColor="leftHeadRuleFg"></box>
 					<filelist in:entries="leftEntries" in:cursor="leftCursor" in:marked="leftMarked"
 					          in:active="leftActive" in:paneId="leftId" in:loading="leftLoading"
 					          in:viewport="listViewport"></filelist>
 					<entrydetail in:entry="leftEntry" in:marked="leftMarked" height="2"></entrydetail>
-					<summary in:entries="leftEntries" in:disk="leftDisk" height="1"></summary>
 				</box>
-				<box flexDirection="column" flexGrow="1" border borderStyle="single"
+				<box when="showRightPane" flexDirection="column" flexBasis="0" out:flexGrow="rightGrow" border borderStyle="single"
 				     out:border="rightBorder" out:borderColor="rightBorderFg"
 				     on:click="rightId!pane:activate">
 					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
 						<box when="!rightFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
 							<breadcrumbs in:segments="rightSegments" in:paneId="rightId" height="1"></breadcrumbs>
 						</box>
-						<filterbar in:query="rightFilter" in:paneId="rightId" in:filtering="filtering" in:entries="rightEntries"></filterbar>
+						<filterbar in:query="rightFilter" in:paneId="rightId" in:filtering="filtering" in:entries="rightEntries" in:setFilter="rightSetFilter"></filterbar>
 					</box>
 					<box height="1" out:border="headRule" out:borderColor="rightHeadRuleFg"></box>
 					<filelist in:entries="rightEntries" in:cursor="rightCursor" in:marked="rightMarked"
 					          in:active="rightActive" in:paneId="rightId" in:loading="rightLoading"
 					          in:viewport="listViewport"></filelist>
 					<entrydetail in:entry="rightEntry" in:marked="rightMarked" height="2"></entrydetail>
-					<summary in:entries="rightEntries" in:disk="rightDisk" height="1"></summary>
 				</box>
 				<filepreview when="showInspectorInline" in:preview="preview" in:show="showInspectorInline"
-				             in:entry="appEntry" flexGrow="1"></filepreview>
+				             in:entry="appEntry" in:paneId="previewId" in:scroll="previewScroll"
+				             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
+				             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
+				             in:dirActive="previewActive" in:dirLoading="previewLoading"
+				             flexGrow="1" flexBasis="0"></filepreview>
 			</box>
+			<!-- Maximized inspector (`⇧V`): the preview takes the whole pane
+			     row, the identity and command bars staying in place. -->
+			<filepreview when="showPreviewFull" in:preview="preview" in:show="showPreviewFull"
+			             in:entry="appEntry" in:paneId="previewId" in:scroll="previewScroll"
+			             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
+			             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
+			             in:dirActive="previewActive" in:dirLoading="previewLoading"
+			             flexGrow="1"></filepreview>
 			<commandbar in:items="commandBarItems" in:notice="notice" in:leftError="leftError"
-			            in:rightError="rightError" in:active="active"
+			            in:rightError="rightError" in:active="active" in:uiSize="uiSize"
 			            in:leftMarked="leftMarked" in:rightMarked="rightMarked" out:height="barHeight"></commandbar>
 		</box>
 	</box>
 
-	<!-- Fullscreen inspector for narrow viewports. -->
+	<!-- Fullscreen inspector overlay: `v` below the inline breakpoint, or
+	     Enter on a file the host cannot edit (any width). -->
 	<box when="showViewer" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="10"
 	     alignItems="center" justifyContent="center">
 		<box width="80%" height="90%">
-			<filepreview in:preview="preview" in:show="showViewer" in:entry="appEntry"></filepreview>
+			<filepreview in:preview="preview" in:show="showViewer" in:entry="appEntry" in:paneId="previewId"
+			             in:scroll="previewScroll"
+			             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
+			             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
+			             in:dirActive="previewActive" in:dirLoading="previewLoading"></filepreview>
 		</box>
 	</box>
 
-	<commandpalette when="paletteOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="20"
-	                in:open="paletteOpen" in:mode="paletteMode" in:query="paletteQuery"
-	                in:items="paletteItems" in:selected="paletteIndex"></commandpalette>
 	<commandpanel when="panelOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="22"
-	              in:open="panelOpen" in:operation="panelOperation" in:items="panelItems"
+	              in:open="panelOpen" in:entry="panelEntry" in:items="panelItems"
 	              in:opCursor="panelOpIndex" in:rows="panelRows" in:argCursor="panelRowIndex"
-	              in:focus="panelFocus" in:textual="panelTextual" in:argRow="panelCursorRow"
-	              in:command="panelCommand" in:runnable="panelRunnable"
+	              in:permBit="panelPermBit" in:focus="panelFocus"
+	              in:preview="panelPreview"
+	              in:picking="pickerOpen"
+	              in:pickerPathText="pickerPathText" in:pickerFocus="pickerFocus" in:pickerRows="pickerRows"
 	              in:query="panelQuery" in:value="panelValue"></commandpanel>
 	<bookmarklist when="bookmarkOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="25"
-	              in:open="bookmarkOpen" in:mode="bookmarkMode" in:query="bookmarkQuery"
-	              in:target="bookmarkTarget" in:items="bookmarkItems" in:selected="bookmarkIndex"></bookmarklist>
+	              in:open="bookmarkOpen" in:query="bookmarkQuery"
+	              in:items="bookmarkItems" in:selected="bookmarkIndex"></bookmarklist>
+	<overlaylist when="overlayOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="27"
+	             in:open="overlay" in:mode="overlay" in:items="overlayItems" in:cursor="overlayIndex"></overlaylist>
 	<confirm when="confirm" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="30"
 	         in:confirm="confirm"></confirm>
 	<help when="helpOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="40"
-	      in:open="helpOpen"></help>
+	      in:open="helpOpen" in:size="uiSize"></help>
 </box>

package/src/js/tcmd/components/BookmarkList.html

@@ -1,12 +1,12 @@
-<div class="bookmark-list" when="open">
-	<div class="bookmark-dialog">
+<div class="bookmark-list" when="open" role="dialog" aria-modal="true" aria-label="Bookmarks" on:click="!dialog:bookmark-cancel">
+	<div class="bookmark-dialog" on:click="dialogStop">
+		<h2 out="title"></h2>
 		<header>
 			<span class="bookmark-sign" out="sign"></span>
-			<input class="bookmark-query" type="text" inout="query" on:enter="confirm">
+			<input class="bookmark-query" type="text" inout="query" aria-label="Filter bookmarks" on:enter="confirm">
 		</header>
-		<p class="bookmark-target" when="inputVisible" out="target"></p>
 		<p class="bookmark-empty" when="emptyList" out="empty"></p>
-		<ul class="bookmark-rows" when="listVisible" out="rows"></ul>
+		<ul class="bookmark-rows" out="rows"></ul>
 		<footer out="footer"></footer>
 	</div>
 </div>

package/src/js/tcmd/components/BookmarkList.js

@@ -4,65 +4,39 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/BookmarkList
-// BookmarkList: the `g`/`b` overlay. In "name" mode it shows an input to name
-// the path being recorded; in "list" mode it shows the fuzzy picker over the
-// stored bookmarks (matched by name or path). The row logic lives in
+// BookmarkList: the single bookmarks panel opened with `b`. The input filters
+// the stored bookmarks (matched by name or path); the first row offers to add
+// the current path when it is not bookmarked yet. The row logic lives in
 // `BookmarkRow.js`; this parent maps its `items` to rows.
 //
 // Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
-// (footer/path), `textHeadingFg` (title), `rows(data)` returning the keyed rows
-// and `scrollTop(self, data)` (TUI viewport tracking).
+// (footer), `textHeadingFg` (title), `rows(data)` returning the keyed rows and
+// `scrollTop(self, data)` (TUI viewport tracking).
 
 import { unwrap } from "select/state/cells"
 
-// Function: title
-// The overlay title: "bookmark" while naming, "bookmarks" while picking.
-function bookmarkTitle(mode) {
-	return unwrap(mode) === "name" ? "bookmark" : "bookmarks"
-}
-
-// Function: footer
-function bookmarkFooter(mode) {
-	return unwrap(mode) === "name"
-		? "name the bookmark   ↵ save   Esc cancel"
-		: "↑↓ move   ↵ jump   Esc close"
-}
-
-// Function: targetLine
-// The path being recorded (name mode). `target` is `{ path, isDir }` or null.
-function targetLine(target) {
-	const value = unwrap(target)
-	if (!value) return ""
-	if (typeof value === "string") return value
-	return `${value.path ?? ""}${value.isDir === true ? "/" : ""}`
-}
-
 // Function: createBehaviors
 // Builds the BookmarkList behavior map for the given renderer environment.
 function createBehaviors(env) {
 	const behaviors = {
 		bg: () => env.overlayBg,
 		borderFg: () => env.borderPrimaryActiveFg,
-		confirm: (self, data) => self.pub("bookmark:confirm"),
-		footer: (_self, data) => bookmarkFooter(data.mode),
+		confirm: (self) => self.pub("bookmark:confirm"),
+		footer: () => "↑↓ move   ⌫/Del remove   ↵ open   Esc close",
 		footerFg: () => env.textSecondaryFg,
-		// The input is focused/typing in name mode; the list navigates otherwise.
+		// The filter input owns typing; the list navigates with the arrows.
 		focused: (_self, data) => Boolean(unwrap(data.open)),
-		inputVisible: (_self, data) => unwrap(data.mode) === "name",
-		listVisible: (_self, data) => unwrap(data.mode) === "list",
 		open: (_self, data) => Boolean(unwrap(data.open)),
-		pathFg: () => env.textSecondaryFg,
-		sign: (_self, data) => (unwrap(data.mode) === "name" ? "+" : "›"),
-		target: (_self, data) => targetLine(data.target),
-		title: (_self, data) => bookmarkTitle(data.mode),
+		sign: () => "›",
+		title: () => "bookmarks",
 		titleColor: () => env.textHeadingFg,
-		emptyList: (_self, data) =>
-			unwrap(data.mode) === "list" && (unwrap(data.items)?.length ?? 0) === 0,
-		empty: () => "  no bookmarks",
+		emptyList: (_self, data) => (unwrap(data.items)?.length ?? 0) === 0,
+		empty: (_self, data) =>
+			`${unwrap(data.query) ?? ""}`.trim() ? "  no matching bookmarks" : "  no bookmarks",
 		emptyFg: () => env.textSecondaryFg,
 	}
 	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
+		behaviors.rows = (self, data) => env.rows(self, data)
 	}
 	if (env?.scrollTop) {
 		behaviors.scrollTop = (self, data) => env.scrollTop(self, data)
@@ -70,4 +44,4 @@ function createBehaviors(env) {
 	return behaviors
 }
 
-export { bookmarkTitle, createBehaviors }
+export { createBehaviors }

package/src/js/tcmd/components/BookmarkList.xml

@@ -6,9 +6,8 @@
 			<text out="sign" out:fg="titleColor"></text>
 			<input ref="query" inout="query" flexGrow="1" height="1" out:focused="focused" on:enter="confirm"></input>
 		</box>
-		<text when="inputVisible" out="target" out:fg="pathFg" paddingLeft="1" wrapMode="none" truncate="true"></text>
 		<text when="emptyList" out="empty" out:fg="emptyFg" paddingLeft="1" wrapMode="none"></text>
-		<scrollbox when="listVisible" ref="list" flexGrow="1">
+		<scrollbox ref="list" flexGrow="1">
 			<box out="rows" flexDirection="column"></box>
 		</scrollbox>
 		<box flexDirection="row" height="1" paddingLeft="1">

package/src/js/tcmd/components/BookmarkRow.html

@@ -1,5 +1,6 @@
-<li class="bookmark-row" out:class="rowClass" on:click="item.name!bookmark:select">
+<li class="bookmark-row" out:class="rowClass" on:click="item.key!bookmark:select">
 	<span class="bookmark-marker" out="rowMarker"></span>
+	<svg class="bookmark-icon ui-icon" when="hasIcon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use out:href="rowIconHref"></use></svg>
 	<span class="bookmark-name" out="rowName"></span>
 	<span class="bookmark-path" out="rowPath"></span>
 </li>

package/src/js/tcmd/components/BookmarkRow.js

@@ -4,17 +4,18 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/BookmarkRow
-// One row of the bookmark picker. Reads `{ item: { name, path }, index,
-// selected }`, the same bag shape in both engines. Selection is snapshotted by
-// the row builder into a plain `selectedRow` boolean and read through the
-// shared `isSelected` predicate, with the `selected` cell as fallback for
-// hand-built bags.
+// One row of the bookmarks panel. Reads `{ item: { name, path, add? }, index,
+// selected }`, the same bag shape in both engines. The synthetic add row reads
+// as an action; stored rows read as `name/` for directories. Selection is
+// snapshotted by the row builder into a plain `selectedRow` boolean and read
+// through the shared `isSelected` predicate, with the `selected` cell as
+// fallback for hand-built bags.
 //
 // Environment: `accentFg`, `textFg`, `textSecondaryFg`, `selectionBg` (TUI row
 // background), `selectedClass` (web), `icons` (show Nerd Font icons).
 
 import { isSelected } from "./rows.js"
-import { iconFor } from "./icons.js"
+import { iconFor, lucideIconFor } from "./icons.js"
 
 // Function: createBehaviors
 // Builds the BookmarkRow behavior map for the given renderer environment.
@@ -25,13 +26,17 @@ function createBehaviors(env) {
 		rowFg: (_self, data) => (isSelected(data) ? env.accentFg : env.textFg),
 		// The icon is its own slot, dimmer than the name; it collapses when
 		// the environment keeps rows icon-free.
-		hasIcon: () => Boolean(env.icons),
+		hasIcon: () => Boolean(env.icons || env.lucideIcons),
 		rowIcon: (_self, data) => (env.icons ? iconFor(data.item) : ""),
+		rowIconHref: (_self, data) => (env.lucideIcons ? `#lucide-${lucideIconFor(data.item)}` : ""),
 		rowIconFg: () => env.textSecondaryFg,
 		rowMarker: (_self, data) => (isSelected(data) ? ">" : " "),
-		// A directory bookmark reads as `name/`, mirroring the listing.
+		// The add row names its action; a directory bookmark reads as
+		// `name/`, mirroring the listing.
 		rowName: (_self, data) =>
-			`${data.item?.name ?? ""}${data.item?.isDir === true ? "/" : ""}`,
+			data.item?.add
+				? data.item.name ?? ""
+				: `${data.item?.name ?? ""}${data.item?.isDir === true ? "/" : ""}`,
 		rowPath: (_self, data) => `${data.item?.path ?? ""}`,
 		rowPathFg: () => env.textSecondaryFg,
 	}

package/src/js/tcmd/components/BookmarkRow.xml

@@ -1,4 +1,4 @@
-<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="item.name!bookmark:select">
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="item.key!bookmark:select">
 	<text out="rowMarker" width="2" out:fg="rowFg"></text>
 	<text out="rowIcon" out:fg="rowIconFg" wrapMode="none" when="hasIcon"></text>
 	<box minWidth="12" flexShrink="0">

package/src/js/tcmd/components/Breadcrumbs.js

@@ -17,7 +17,7 @@
 function createBehaviors(env) {
 	const behaviors = { listClass: () => env?.listClass }
 	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
+		behaviors.rows = (self, data) => env.rows(self, data)
 	}
 	return behaviors
 }

package/src/js/tcmd/components/CommandArgRow.html

@@ -0,0 +1,28 @@
+<li class="panel-row" out:class="rowClass" out:data-risk="row.risk" out:data-group="row.group" out:data-type="row.type" out:data-selected="rowSelected" on:click="row.key!panel:select">
+	<span class="panel-list-indent" when="isList" out="listSpacer"></span>
+	<span class="panel-list-box" when="isList">
+		<span class="panel-marker" when="isItem" out="marker"></span>
+		<span class="panel-name" when="isItem" out="name"></span>
+		<span class="panel-summary" when="isItem" out="summary"></span>
+	</span>
+	<span class="panel-name panel-group-name" when="isGroup" out="name"></span>
+	<span class="panel-marker" when="showPlain" out="marker"></span>
+	<span class="panel-name" when="showPlain" out="name"></span>
+	<span class="panel-marker" when="isArg" out="marker"></span>
+	<span class="panel-name panel-arg-name" when="isArg" out="name"></span>
+	<span class="panel-perm" when="isPerm">
+		<span class="panel-perm-class" out="permClass"></span>
+		<button class="panel-perm-bit" type="button" tabindex="-1" out:class="permRClass" out:aria-pressed="permROn" on:click="row.keyR!panel:perm." out="permR"></button>
+		<button class="panel-perm-bit" type="button" tabindex="-1" out:class="permWClass" out:aria-pressed="permWOn" on:click="row.keyW!panel:perm." out="permW"></button>
+		<button class="panel-perm-bit" type="button" tabindex="-1" out:class="permXClass" out:aria-pressed="permXOn" on:click="row.keyX!panel:perm." out="permX"></button>
+	</span>
+	<button class="panel-run-button" when="isRun" type="button" tabindex="-1" out:aria-label="runAriaLabel" out="runLabel"></button>
+	<span class="panel-field" when="isArg" out:data-editable="editable">
+		<span class="panel-field-bracket" out="fieldOpen"></span>
+		<input class="panel-value" when="editing" type="text" inout="value" aria-label="Argument value" />
+		<span class="panel-field-value" when="!editing" out="summary"></span>
+		<span class="panel-field-bracket" out="fieldClose"></span>
+	</span>
+	<span class="panel-summary" when="isPlain" out="summary"></span>
+	<svg class="panel-op-chevron ui-icon" when="isOp" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-chevron-right"></use></svg>
+</li>