diff --git a/.vscode/settings.json b/.vscode/settings.json
index 55712c19..222cc7d3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,25 @@
{
- "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "workbench.colorCustomizations": {
+ "activityBar.background": "#73b3e7",
+ "titleBar.activeBackground": "#97b8ed",
+ "titleBar.activeForeground": "#001a42",
+ "activityBar.inactiveForeground": "#005eff", //icon inactive
+ }
+}
+
+// {
+// "typescript.tsdk": "node_modules/typescript/lib",
+// "workbench.colorCustomizations": {
+// "activityBar.background": "#2af7dc",
+// "titleBar.activeBackground": "#8bf125",
+// "titleBar.activeForeground": "#f953b7",
+// "activityBar.activeBorder": "#4f3be6", //icon border left active
+// "activityBar.activeBackground": "#f6a0ef", //icon background active
+// "activityBar.border": "#9dff00", //border left
+// "activityBar.foreground": "#4f3be6", //icons active
+// "activityBar.inactiveForeground": "#0004ff", //icon inactive
+// "activityBarBadge.background": "#e63bbe", //icon's badge background
+// "activityBarBadge.foreground": "#2e4a01", //icon's badge color
+// }
+// }
\ No newline at end of file
diff --git a/imports/icons/down.tsx b/imports/icons/down.tsx
new file mode 100644
index 00000000..6f19df78
--- /dev/null
+++ b/imports/icons/down.tsx
@@ -0,0 +1,51 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function DownIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/from.tsx b/imports/icons/from.tsx
new file mode 100644
index 00000000..2656bd9a
--- /dev/null
+++ b/imports/icons/from.tsx
@@ -0,0 +1,27 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function FromIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/in.tsx b/imports/icons/in.tsx
new file mode 100644
index 00000000..9cfa8224
--- /dev/null
+++ b/imports/icons/in.tsx
@@ -0,0 +1,37 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function InIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/out.tsx b/imports/icons/out.tsx
new file mode 100644
index 00000000..0317c1f9
--- /dev/null
+++ b/imports/icons/out.tsx
@@ -0,0 +1,49 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function OutIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/to.tsx b/imports/icons/to.tsx
new file mode 100644
index 00000000..1a794de6
--- /dev/null
+++ b/imports/icons/to.tsx
@@ -0,0 +1,25 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function ToIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/type.tsx b/imports/icons/type.tsx
new file mode 100644
index 00000000..2a4c233d
--- /dev/null
+++ b/imports/icons/type.tsx
@@ -0,0 +1,47 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function TypeIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/typed.tsx b/imports/icons/typed.tsx
new file mode 100644
index 00000000..3ac5135d
--- /dev/null
+++ b/imports/icons/typed.tsx
@@ -0,0 +1,29 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function TypedIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/imports/icons/up.tsx b/imports/icons/up.tsx
new file mode 100644
index 00000000..9e1a2796
--- /dev/null
+++ b/imports/icons/up.tsx
@@ -0,0 +1,61 @@
+import { useColorMode } from "@chakra-ui/react";
+
+export function UpIcon({
+ strokePath = '#000',
+ strokeCircle = '#000',
+}:{
+ strokePath?: string;
+ strokeCircle?: string;
+}) {
+ const { colorMode } = useColorMode();
+ return (
+
+ )
+}
diff --git a/imports/tree.tsx b/imports/tree.tsx
index 95c3d521..a538ad59 100644
--- a/imports/tree.tsx
+++ b/imports/tree.tsx
@@ -9,6 +9,7 @@ import {
EditableInput,
EditablePreview,
EditableTextarea,
+ IconButton
} from '@chakra-ui/react';
import { useDeep } from "@deep-foundation/deeplinks/imports/client";
import { Id, Link } from '@deep-foundation/deeplinks/imports/minilinks';
@@ -19,6 +20,14 @@ import { link } from 'fs';
import { MdEdit, MdSaveAlt } from "react-icons/md";
import { Editor } from './editor';
import isEqual from 'lodash/isEqual';
+import { TypedIcon } from './icons/typed';
+import { DownIcon } from './icons/down';
+import { UpIcon } from './icons/up';
+import { TypeIcon } from './icons/type';
+import { InIcon } from './icons/in';
+import { OutIcon } from './icons/out';
+import { FromIcon } from './icons/from';
+import { ToIcon } from './icons/to';
type NavDirection = 'current' | 'from' | 'type' | 'to' | 'out' | 'typed' | 'in' | 'up' | 'down' | 'promises' | 'rejects' | 'selectors' | 'selected' | 'prev' | 'next' | 'contains' | 'value' | 'results' | 'auto';
@@ -343,8 +352,9 @@ export const PathItem = memo(function PathItem({
variant={!link?.['from_id'] ? 'disabled' : p === 'from' ? 'active' : undefined} justifyContent='right' textAlign='right'
onClick={() => go({ itemIndex: i, position: 'from', active: true })}
disabled={!link?.from_id}
+ rightIcon={}
>
- from ⊢
+ from
{symbol(link?.from)} {!!link?.from && deep.nameLocal(link.from_id)} {link?.from_id}
@@ -371,22 +383,26 @@ export const PathItem = memo(function PathItem({
ref={p === 'out' ? ref : undefined}
variant={p === 'out' ? 'active' : undefined} justifyContent='left' textAlign='left'
onClick={() => go({ itemIndex: i, position: 'out', active: true })}
+ leftIcon={}
>
- ⊨ out
+ out
+ {/* } /> */}
@@ -394,15 +410,17 @@ export const PathItem = memo(function PathItem({
ref={p === 'up' ? ref : undefined}
variant={p === 'up' ? 'active' : undefined} justifyContent='center'
onClick={() => go({ itemIndex: i, position: 'up', active: true })}
+ leftIcon={}
>
- ≥ up
+ up