Create admin page with ability to control featured communities

src/gigs-board/components/molecule/button.jsx

@@ -109,6 +109,10 @@ const styles = `
   line-height: 1.5;
   text-decoration: none !important;
 
+	&.vertical {
+		padding: 1.2rem 0.5rem !important;
+	}
+
   &:not(.shadow-none) {
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
     transition: box-shadow 0.6s;
@@ -241,7 +245,13 @@ const Button = ({
     >
       {Struct.typeMatch(iconProps) && widget("components.atom.icon", iconProps)}
 
-      <span className={classNames?.label} style={{ lineHeight: "inherit" }}>
+      <span
+        className={[
+          classNames?.label,
+          typeof label === "string" ? "" : "d-none",
+        ].join(" ")}
+        style={{ lineHeight: "inherit" }}
+      >
         {label}
       </span>
     </ButtonRoot>

src/gigs-board/components/molecule/tile.jsx

@@ -27,6 +27,13 @@ const AttractableImage = styled.img`
 `;
 /* END_INCLUDE: "core/lib/gui/attractable" */
 
+const TileRoot = ({ children, noFrame, ...otherProps }) =>
+  noFrame ? (
+    <div {...otherProps}>{children}</div>
+  ) : (
+    <AttractableDiv {...otherProps}>{children}</AttractableDiv>
+  );
+
 const Tile = ({
   children,
   borderRadius,
@@ -42,7 +49,7 @@ const Tile = ({
   minHeight,
   style,
 }) => (
-  <AttractableDiv
+  <TileRoot
     className={[
       "d-flex flex-column gap-3",
       className,
@@ -58,16 +65,13 @@ const Tile = ({
       height: "fit-content",
       ...style,
     }}
-    {...{ id }}
+    {...{ id, noFrame }}
   >
     {
       <div
         className={[
           "d-flex align-items-center justify-content-between gap-3",
-
-          noFrame || (!heading && !headingAdornment && !headerSlotRight)
-            ? "d-none"
-            : "",
+          !heading && !headingAdornment && !headerSlotRight ? "d-none" : "",
         ].join(" ")}
         style={{ minHeight: 30 }}
       >
@@ -81,7 +85,7 @@ const Tile = ({
     }
 
     {children}
-  </AttractableDiv>
+  </TileRoot>
 );
 
 return Tile(props);

src/gigs-board/components/organism/app-header.jsx

@@ -63,75 +63,100 @@ const Header = styled.div`
   }
 `;
 
-const AppHeader = ({ path }) => (
-  <Header className="d-flex justify-content-between align-items-center">
-    <div className="d-flex gap-2">
-      <a href={href("Feed")}>
-        <img src="https://ipfs.near.social/ipfs/bafkreibjsn3gswlcc5mvgkfv7ady2lzkd2htm55l472suarbd34qryh2uy"></img>
-      </a>
-
-      {widget("components.molecule.breadcrumbs", {
-        classNames: { link: "fs-5" },
-        path,
-      })}
-    </div>
-
-    <div className="d-flex align-items-center gap-3">
-      {!(path ?? []).some(({ pageId }) => pageId === "communities") ? (
-        <a href={href("communities")} class="text-white me-2">
+const AppHeader = ({ path, viewer }) => {
+  console.log(JSON.stringify(viewer, undefined, 2));
+
+  return (
+    <Header className="d-flex justify-content-between align-items-center">
+      <div className="d-flex gap-2">
+        <a href={href("Feed")}>
+          <img src="https://ipfs.near.social/ipfs/bafkreibjsn3gswlcc5mvgkfv7ady2lzkd2htm55l472suarbd34qryh2uy"></img>
+        </a>
+
+        {widget("components.molecule.breadcrumbs", {
+          classNames: { link: "fs-5" },
+          path,
+        })}
+      </div>
+
+      <div className="d-flex align-items-center gap-3">
+        <a
+          className={[
+            "text-white me-2",
+
+            (path ?? []).some(({ pageId }) => pageId === "communities")
+              ? "d-none"
+              : "",
+          ].join(" ")}
+          href={href("communities")}
+        >
           Communities
         </a>
-      ) : null}
-
-      <a
-        className="text-white"
-        href="https://www.neardevgov.org/blog/near-developer-dao"
-        target="_blank"
-      >
-        Developer DAO
-      </a>
-
-      <div className="btn-group" role="group">
-        <button
-          type="button"
-          className="btn btn-outline-light border-opacity-75 rounded-circle"
-          style={{
-            width: "30px",
-            height: "30px",
-            padding: "6px 0px",
-            borderWidth: "2px",
-            lineHeight: "0px",
-          }}
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
+
+        <a
+          className={[
+            "text-white me-2",
+
+            !(path ?? []).some(({ pageId }) => pageId === "admin") &&
+            viewer.role.isDevHubModerator
+              ? ""
+              : "d-none",
+          ].join(" ")}
+          href={href("admin")}
+        >
+          Admin
+        </a>
+
+        <a
+          className="text-white"
+          href="https://www.neardevgov.org/blog/near-developer-dao"
+          target="_blank"
         >
-          <i className="bi bi-question-lg"></i>
-        </button>
-
-        <ul className="dropdown-menu dropdown-menu-end">
-          <li>
-            <a
-              target="_blank"
-              className="dropdown-item"
-              href="https://github.com/near/devgigsboard-widgets/issues/new?assignees=&labels=bug&template=bug_report.md&title="
-            >
-              Report a bug
-            </a>
-          </li>
-
-          <li>
-            <a
-              target="_blank"
-              className="dropdown-item"
-              href="https://github.com/near/devgigsboard-widgets/issues/new?assignees=&labels=enhancement&template=feature-request.md&title="
-            >
-              Suggest an improvement
-            </a>
-          </li>
-        </ul>
+          Developer DAO
+        </a>
+
+        <div className="btn-group" role="group">
+          <button
+            type="button"
+            className="btn btn-outline-light border-opacity-75 rounded-circle"
+            style={{
+              width: "30px",
+              height: "30px",
+              padding: "6px 0px",
+              borderWidth: "2px",
+              lineHeight: "0px",
+            }}
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            <i className="bi bi-question-lg"></i>
+          </button>
+
+          <ul className="dropdown-menu dropdown-menu-end">
+            <li>
+              <a
+                target="_blank"
+                className="dropdown-item"
+                href="https://github.com/near/devgigsboard-widgets/issues/new?assignees=&labels=bug&template=bug_report.md&title="
+              >
+                Report a bug
+              </a>
+            </li>
+
+            <li>
+              <a
+                target="_blank"
+                className="dropdown-item"
+                href="https://github.com/near/devgigsboard-widgets/issues/new?assignees=&labels=enhancement&template=feature-request.md&title="
+              >
+                Suggest an improvement
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  </Header>
-);
+    </Header>
+  );
+};
 
 return AppHeader(props);

src/gigs-board/components/organism/configurator.jsx

@@ -239,7 +239,20 @@ const defaultFieldsRender = ({ schema, form, isEditable, isUnlocked }) => (
   <>
     {Object.entries(schema).map(
       (
-        [key, { format, inputProps, noop, label, order, style, ...fieldProps }],
+        [
+          key,
+          {
+            format,
+            hints,
+            inputProps,
+            noop,
+            label,
+            order,
+            style,
+            title,
+            ...fieldProps
+          },
+        ],
         idx
       ) => {
         const fieldKey = `${idx}-${key}`,
@@ -314,10 +327,9 @@ const defaultFieldsRender = ({ schema, form, isEditable, isUnlocked }) => (
                 ...(inputProps ?? {}),
                 disabled: isDisabled,
 
-                title:
-                  noop ?? false
-                    ? "Temporarily disabled due to technical reasons."
-                    : inputProps.title,
+                title: isDisabled
+                  ? hints.disabled
+                  : hints.default ?? inputProps.title,
 
                 ...(fieldParamsByType[fieldType].inputProps ?? {}),
                 tabIndex: order,
@@ -421,7 +433,7 @@ const Configurator = ({
         <div className={`d-flex flex-column gap-${isActive ? 1 : 4}`}>
           {fieldsRender({
             form,
-            isEditable: isUnlocked && isActive,
+            isEditable: isActive,
             isUnlocked,
             schema,
           })}

src/gigs-board/components/template/app-layout.jsx

@@ -52,9 +52,9 @@ function href(widgetName, linkProps) {
 }
 /* END_INCLUDE: "common.jsx" */
 
-const AppLayout = ({ banner, children, path }) => (
+const AppLayout = ({ banner, children, path, viewer }) => (
   <div className="d-flex flex-column w-100 h-100" style={{ minHeight: "86vh" }}>
-    {widget("components.organism.app-header", { path })}
+    {widget("components.organism.app-header", { path, viewer })}
     {banner}
     <div className="w-100 h-100">{children}</div>
   </div>

src/gigs-board/entity/community/card.jsx

@@ -81,6 +81,7 @@ const AttractableImage = styled.img`
 /* END_INCLUDE: "core/lib/gui/attractable" */
 
 const CommunityCard = ({
+  actions,
   format,
   isBannerEnabled,
   metadata,
@@ -92,12 +93,10 @@ const CommunityCard = ({
   const link = href("community.activity", { handle: metadata.handle });
 
   const formatSmall = (
-    <AttractableLink
+    <AttractableDiv
       {...otherProps}
-      href={link}
       className={[
-        "d-flex flex-shrink-0 p-3",
-        "rounded-4 border border-2",
+        "d-flex flex-shrink-0 gap-3 p-3 rounded-4 border border-2",
         "text-black text-decoration-none",
       ].join(" ")}
       style={{
@@ -110,8 +109,12 @@ const CommunityCard = ({
         height: 110,
       }}
     >
-      <div
-        className="d-flex align-items-center gap-3 rounded-4 w-100 h-100"
+      <a
+        className={[
+          "d-flex align-items-center gap-3 rounded-4 w-100 h-100",
+          "text-dark text-decoration-none",
+        ].join(" ")}
+        href={link}
         style={{
           background: "rgba(255, 255, 255, 0.9)",
           backdropFilter: "blur(4px)",
@@ -140,8 +143,10 @@ const CommunityCard = ({
             {metadata.description}
           </p>
         </div>
-      </div>
-    </AttractableLink>
+      </a>
+
+      {actions}
+    </AttractableDiv>
   );
 
   const formatMedium = (