Add ability to view source and edit components

apps/builddao/widget/components/Button.jsx

@@ -18,8 +18,9 @@ const StyledButton = styled.button`
     display: flex;
     width: 40px;
     height: 40px;
-    padding: 5px;
+    padding: 0px;
     flex-shrink: 0;
+    font-size: 16px;
     border-radius: 50%;
   `}
 

apps/builddao/widget/components/buttons/UserDropdown.jsx

@@ -25,7 +25,7 @@ const StyledDropdown = styled.div`
       margin: 5px 10px;
       margin-right: 0;
       line-height: normal;
-      max-width: 140px;
+      max-width: 100px;
 
       .profile-name,
       .profile-username {
@@ -45,7 +45,7 @@ const StyledDropdown = styled.div`
   ul {
     background-color: #2b2f31;
     width: 100%;
-    width: 240px;
+    width: 210px;
 
     li {
       padding: 0 6px;
@@ -176,11 +176,7 @@ return (
         <div className="profile-username">{context.accountId}</div>
       </div>
     </button>
-    <ul
-      className="dropdown-menu"
-      aria-labelledby="dropdownMenu2222"
-      style={{ minWidth: "fit-content" }}
-    >
+    <ul className="dropdown-menu" aria-labelledby="dropdownMenu2222">
       <li>
         <Link
           className="dropdown-item"

apps/builddao/widget/components/navigation/header.jsx

@@ -96,6 +96,85 @@ const SignInOrConnect = () => (
   </>
 );
 
+const StyledDropdown = styled.div`
+  .dropdown-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--slate-dark-5);
+    border-radius: 50px;
+    outline: none;
+    border: 0;
+    width: 40px;
+    height: 40px;
+
+    &:after {
+      display: none;
+    }
+
+    .menu {
+      width: 18px;
+      height: 24px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+
+      div {
+        background-color: var(--slate-dark-11);
+        height: 2px;
+        width: 100%;
+        border-radius: 30px;
+      }
+    }
+
+    :hover {
+      .menu {
+        div {
+          background-color: white;
+        }
+      }
+    }
+  }
+
+  ul {
+    background-color: var(--slate-dark-5);
+    width: 100%;
+
+    li {
+      padding: 0 6px;
+    }
+
+    button,
+    a {
+      color: var(--slate-dark-11);
+      display: flex;
+      align-items: center;
+      border-radius: 8px;
+      padding: 12px;
+
+      :hover,
+      :focus {
+        text-decoration: none;
+        background-color: var(--slate-dark-1);
+        color: white;
+
+        svg {
+          path {
+            stroke: white;
+          }
+        }
+      }
+
+      svg {
+        margin-right: 7px;
+        path {
+          stroke: var(--slate-dark-9);
+        }
+      }
+    }
+  }
+`;
+
 const AppHeader = ({ page, routes, ...props }) => (
   <Navbar>
     <div className="d-flex align-items-center justify-content-between w-100">
@@ -133,7 +212,56 @@ const AppHeader = ({ page, routes, ...props }) => (
             })}
         </ButtonGroup>
 
-        <div style={{ flex: 1, display: "flex", justifyContent: "flex-end" }}>
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <StyledDropdown className="dropdown">
+            <button
+              className="dropdown-toggle"
+              type="button"
+              id="dropdownMenu2222"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i style={{ color: "white" }} className="bi bi-list"></i>
+            </button>
+            <ul className="dropdown-menu" aria-labelledby="dropdownMenu2222">
+              <li>
+                <a
+                  href={href({
+                    widgetSrc: "buildhub.near/widget/app",
+                    params: {
+                      page: "inspect",
+                      widgetSrc: routes[page].path,
+                    },
+                  })}
+                  type="icon"
+                  variant="outline"
+                  className="d-flex align-tiems-center gap-2"
+                >
+                  <i className="bi bi-code"></i>
+                  <span>View Source</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  href={`/edit/${routes[page].path}`}
+                  type="icon"
+                  variant="outline"
+                  className="d-flex align-items-center gap-2"
+                >
+                  <i className="bi bi-pencil"></i>
+                  <span>Edit</span>
+                </a>
+              </li>
+            </ul>
+          </StyledDropdown>
           <SignInOrConnect />
         </div>
       </DesktopNavigation>
@@ -186,7 +314,48 @@ const AppHeader = ({ page, routes, ...props }) => (
                 );
               })}
           </ButtonGroup>
-          <div className="d-flex w-100 justify-content-center">
+          <div className="d-flex w-100 align-items-center gap-3 justify-content-center">
+            <StyledDropdown className="dropdown">
+              <button
+                className="dropdown-toggle"
+                type="button"
+                id="dropdownMenu2222"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i style={{ color: "white" }} className="bi bi-list"></i>
+              </button>
+              <ul className="dropdown-menu" aria-labelledby="dropdownMenu2222">
+                <li>
+                  <a
+                    href={href({
+                      widgetSrc: "buildhub.near/widget/app",
+                      params: {
+                        page: "inspect",
+                        widgetSrc: routes[page].path,
+                      },
+                    })}
+                    type="icon"
+                    variant="outline"
+                    className="d-flex align-tiems-center gap-2"
+                  >
+                    <i className="bi bi-code"></i>
+                    <span>View Source</span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href={`/edit/${routes[page].path}`}
+                    type="icon"
+                    variant="outline"
+                    className="d-flex align-items-center gap-2"
+                  >
+                    <i className="bi bi-pencil"></i>
+                    <span>Edit</span>
+                  </a>
+                </li>
+              </ul>
+            </StyledDropdown>
             <SignInOrConnect />
           </div>
         </div>

apps/builddao/widget/config/app.jsx

@@ -44,5 +44,13 @@ return {
       },
       hide: true,
     },
+    inspect: {
+      path: "buildhub.near/widget/page.inspect",
+      blockHeight: "final",
+      init: {
+        name: "Inspect",
+      },
+      hide: true,
+    },
   },
 };

apps/builddao/widget/inspect/WidgetDependencies.jsx

@@ -0,0 +1,50 @@
+const src = props.src;
+const code = props.code ?? Social.get(src);
+
+const dependencyMatch =
+  code && code.matchAll(/<Widget[\s\S]*?src=.*?"(.+)"[\s\S]*?\/>/g);
+let dependencySources = [...(dependencyMatch || [])]
+  .map((r) => r[1])
+  .filter((r) => !!r);
+dependencySources = dependencySources
+  .filter((r, i) => dependencySources.indexOf(r) === i && r !== "(.+)")
+  .map((src) => {
+    const parts = src.split("/");
+    return { src, accountId: parts[0], widgetName: parts[2] };
+  });
+
+const { href } = VM.require("buildhub.near/widget/lib.url") || {
+  href: () => {},
+};
+
+return (
+  <>
+    {dependencySources.map((c, i) => (
+      <div key={c.src}>
+        <Widget
+          src="mob.near/widget/ComponentSearch.Item"
+          props={{
+            link: `/${c.src}`,
+            accountId: c.accountId,
+            widgetName: c.widgetName,
+            extraButtons: ({ widgetPath }) => (
+              <Link
+                className="btn btn-outline-secondary"
+                //href={`#/mob.near/widget/WidgetSource?src=${widgetPath}`}
+                to={href({
+                  widgetSrc: "buildhub.near/widget/app",
+                  params: {
+                    page: "inspect",
+                    widgetSrc: widgetPath,
+                  },
+                })}
+              >
+                Source
+              </Link>
+            ),
+          }}
+        />
+      </div>
+    ))}
+  </>
+);

apps/builddao/widget/inspect/WidgetSource.jsx

@@ -0,0 +1,26 @@
+const src = props.src ?? "mob.near/widget/WidgetSource";
+const blockHeight = props.blockHeight;
+const [accountId, widget, widgetName] = src.split("/");
+
+const code = Social.get(src, blockHeight);
+
+const text = `
+\`\`\`jsx
+${code}
+\`\`\`
+`;
+
+return (
+  <>
+    <Widget
+      src="mob.near/widget/WidgetMetadata"
+      props={{ accountId, widgetName, expanded: true }}
+    />
+    <Markdown text={text} />
+    <h3>Dependencies</h3>
+    <Widget
+      src="buildhub.near/widget/inspect.WidgetDependencies"
+      props={{ src, code }}
+    />
+  </>
+);

apps/builddao/widget/page/inspect.jsx

@@ -0,0 +1,33 @@
+const StyledWidgetSource = styled.div`
+  pre {
+    margin: 1rem 0;
+    div {
+      border-radius: 1rem;
+    }
+  }
+
+  h3 {
+    color: var(--text-color, #fff);
+    margin-bottom: 1rem;
+  }
+
+  .text-truncate {
+    color: var(--text-color, #fff);
+  }
+
+  span {
+    color: var(--text-color, #fff);
+  }
+`;
+
+return (
+  <StyledWidgetSource className="container-xl my-3" data-bs-theme="dark">
+    <Widget
+      src="buildhub.near/widget/inspect.WidgetSource"
+      props={{
+        src: props.widgetSrc,
+      }}
+      loading=""
+    />
+  </StyledWidgetSource>
+);

src/pages/EditorPage.js

@@ -901,7 +901,7 @@ export default function EditorPage(props) {
             >
               <div className="container mt-4">
                 <div className="row">
-                  <div className="d-inline-block position-relative overflow-hidden">
+                  <div className="position-relative">
                     {renderCode ? (
                       <Widget
                         key={`${previewKey}-${jpath}`}
@@ -923,7 +923,7 @@ export default function EditorPage(props) {
             >
               <div className="container">
                 <div className="row">
-                  <div className="d-inline-block position-relative overflow-hidden mt-4">
+                  <div className="position-relative mt-4">
                     <Widget
                       key={`metadata-${jpath}`}
                       src={props.widgets.widgetMetadata}