From 590a0ef20c9789e57562b1bbf13d7cac9e57652b Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Thu, 25 Jan 2024 11:14:46 -0500
Subject: [PATCH] Revert "remove all unused components"

---
 apps/builddao/widget/{feed => }/Bookmarks.jsx |   0
 apps/builddao/widget/Feed.jsx                 |   2 +-
 apps/builddao/widget/Post.jsx                 | 372 ++++++++++++++++++
 apps/builddao/widget/Post/Header.jsx          | 169 ++++++++
 4 files changed, 542 insertions(+), 1 deletion(-)
 rename apps/builddao/widget/{feed => }/Bookmarks.jsx (100%)
 create mode 100644 apps/builddao/widget/Post.jsx
 create mode 100644 apps/builddao/widget/Post/Header.jsx

diff --git a/apps/builddao/widget/feed/Bookmarks.jsx b/apps/builddao/widget/Bookmarks.jsx
similarity index 100%
rename from apps/builddao/widget/feed/Bookmarks.jsx
rename to apps/builddao/widget/Bookmarks.jsx
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 1fc1b1d1..f1c47b1a 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -203,7 +203,7 @@ return (
                 }}
               />
             ) : (
-              <Widget src="/*__@appAccount__*//widget/feed.Bookmarks" />
+              <Widget src="/*__@appAccount__*//widget/Bookmarks" />
             )
           ) : (
             <Widget
diff --git a/apps/builddao/widget/Post.jsx b/apps/builddao/widget/Post.jsx
new file mode 100644
index 00000000..94901be7
--- /dev/null
+++ b/apps/builddao/widget/Post.jsx
@@ -0,0 +1,372 @@
+const accountId = props.accountId;
+if (!accountId) {
+  return "No accountId";
+}
+const blockHeight =
+  props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const hideButtons = !!props.hideButtons;
+const content =
+  props.content ??
+  JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+const subscribe = !!props.subscribe;
+const raw = !!props.raw;
+const groupId = props.groupId ?? content.groupId;
+const indexKey = props.indexKey;
+const permissions = props.permissions;
+const fullPostLink = props.fullPostLink;
+const postPage = props.postPage ?? "mob.near/widget/MainPage.N.Post.Page";
+
+const notifyAccountId = accountId;
+const item = {
+  type: "social",
+  path: `${accountId}/post/main`,
+  blockHeight,
+};
+
+const link =
+  props.link ??
+  props.fullPostLink ??
+  `/${postPage}?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+const StyledPost = styled.div`
+  margin-bottom: 1rem;
+  .post {
+    border-radius: 16px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    color: #b6b6b8;
+    padding: 24px !important;
+    background-color: #0b0c14;
+    transition: all 300ms;
+
+    &:hover {
+      background-color: #171929 !important;
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgb(23, 25, 41, 0),
+          rgb(23, 25, 41, 1) 25%
+        ) !important;
+      }
+    }
+
+    .post-header {
+      span,
+      .text-muted {
+        color: #fff !important;
+      }
+    }
+
+    .buttons {
+      border-top: 1px solid #3c3d43;
+      padding: 0.5rem;
+    }
+
+    .expand-post {
+      background-image: linear-gradient(
+        to bottom,
+        rgb(11, 12, 20, 0),
+        rgb(11, 12, 20, 1) 25%
+      ) !important;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: #0b0c14 !important;
+    color: #fff !important;
+
+    li.dropdown-item {
+      color: #fff !important;
+      &:hover {
+        a {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+
+    .link-dark,
+    .dropdown-item {
+      color: #fff !important;
+
+      &:hover {
+        color: #0b0c14 !important;
+
+        span {
+          color: #0b0c14 !important;
+        }
+      }
+    }
+  }
+
+  textarea {
+    color: #b6b6b8 !important;
+  }
+`;
+
+const Wrapper = styled.div`
+  margin: 0 -12px;
+  line-height: normal;
+
+  .post {
+    position: relative;
+    padding: 12px;
+    padding-bottom: 4px;
+    display: flex;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 16px !important;
+    }
+    @media (max-width: 767px) {
+      font-size: 15px !important;
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 15px !important;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong,
+    b {
+      font-weight: 500 !important;
+    }
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0.5rem;
+      white-space: inherit;
+    }
+    p {
+      margin-bottom: 0.5rem;
+    }
+    hr {
+      display: none;
+    }
+    img {
+      border-radius: var(--bs-border-radius-lg);
+      max-height: 40em;
+    }
+    th {
+      min-width: 5em;
+    }
+
+    .table > :not(caption) > * > * {
+      padding: 0.3rem;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+      .expand-post {
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(247.35, 247.35, 247.35, 1) 25%
+        );
+      }
+    }
+
+    .post-header {
+      margin: 4px 0;
+    }
+  }
+
+  .post:not(:last-child):before {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 56px;
+    bottom: 0;
+    width: 2px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .post:not(:first-child):after {
+    content: "";
+    position: absolute;
+    left: 30px;
+    top: 0;
+    width: 2px;
+    height: 8px;
+    background-color: #ddd;
+    z-index: -1;
+  }
+
+  .left {
+    margin-right: 12px;
+    min-width: 40px;
+    width: 40px;
+    overflow: hidden;
+  }
+  .right {
+    margin-top: -4px;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .buttons-placeholder {
+    padding-bottom: 10px;
+  }
+
+  .buttons {
+    margin-top: 10px;
+    margin-bottom: 6px;
+    column-gap: 4px;
+    color: #888;
+  }
+
+  .reposted {
+    padding-top: 30px;
+  }
+`;
+
+const contentWidget = (
+  <Widget
+    key="content"
+    loading={
+      <div
+        className="overflow-hidden w-100 placeholder-glow"
+        style={{ minHeight: "100px" }}
+      />
+    }
+    src="mob.near/widget/MainPage.N.Post.Content"
+    props={{
+      content,
+      raw,
+      truncateContent: props.truncateContent,
+      noEmbed: props.noEmbed,
+    }}
+  />
+);
+
+return (
+  <StyledPost>
+    <Wrapper
+      className="w-100 mx-auto"
+      style={
+        props.hideComments || props.noBorder
+          ? undefined
+          : {
+              borderBottom: "1px solid #eee",
+            }
+      }
+    >
+      <div className={`post ${props.reposted ? "reposted" : ""}`}>
+        <div className="right d-flex flex-column gap-3">
+          <Widget
+            loading={<div className="post-header" />}
+            src="/*__@appAccount__*//widget/Post.Header"
+            props={{
+              accountId,
+              blockHeight,
+              pinned,
+              hideMenu,
+              link,
+              postType: "post",
+              flagItem: item,
+            }}
+          />
+          {fullPostLink ? (
+            <a
+              key="full-post-link"
+              target="_blank"
+              href={fullPostLink}
+              className="text-decoration-none link-dark"
+            >
+              {contentWidget}
+            </a>
+          ) : (
+            contentWidget
+          )}
+          {props.customButtons ? (
+            props.customButtons
+          ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+            <div className="buttons d-flex justify-content-between">
+              <Widget
+                loading=""
+                src="mob.near/widget/N.CommentButton"
+                props={{
+                  disabled: permissions.disableComment,
+                  onClick: () => State.update({ showReply: !state.showReply }),
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/N.RepostButton"
+                props={{
+                  disable: permissions.disableRepost,
+                  notifyAccountId,
+                  item,
+                  // indexKey,
+                  // groupId,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/N.LikeButton"
+                props={{
+                  notifyAccountId,
+                  item,
+                }}
+              />
+              <Widget
+                loading=""
+                src="mob.near/widget/MainPage.N.Post.ShareButton"
+                props={{ accountId, blockHeight, postType: "post", groupId }}
+              />
+            </div>
+          ) : (
+            <div className="buttons-placeholder" />
+          )}
+        </div>
+      </div>
+      {state.showReply && (
+        <div className="border-top">
+          <Widget
+            loading=""
+            src="mob.near/widget/MainPage.N.Comment.Compose"
+            props={{
+              notifyAccountId,
+              item,
+              onComment: () => State.update({ showReply: false }),
+            }}
+          />
+        </div>
+      )}
+      {props.customComments
+        ? props.customComments
+        : !props.hideComments && (
+            <div className="ms-5 my-3">
+              <Widget
+                key="comments"
+                loading={false}
+                src="mob.near/widget/MainPage.N.Comment.Feed"
+                props={{
+                  item,
+                  highlightComment: props.highlightComment,
+                  limit: props.commentsLimit,
+                  subscribe,
+                  raw,
+                  accounts: props.commentAccounts,
+                  groupId,
+                  permissions,
+                }}
+              />
+            </div>
+          )}
+    </Wrapper>
+  </StyledPost>
+);
diff --git a/apps/builddao/widget/Post/Header.jsx b/apps/builddao/widget/Post/Header.jsx
new file mode 100644
index 00000000..d08ddf0b
--- /dev/null
+++ b/apps/builddao/widget/Post/Header.jsx
@@ -0,0 +1,169 @@
+const accountId = props.accountId;
+const blockHeight = props.blockHeight;
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const name = Social.get(`${accountId}/profile/name`);
+
+const postType = props.postType ?? "post";
+const link = props.link;
+const isPremium = !!props.isPremium;
+
+const Overlay = (props) => (
+  <a
+    className="link-dark text-truncate d-inline-flex mw-100"
+    href={`/mob.near/widget/ProfilePage?accountId=${accountId}`}
+  >
+    <Widget
+      src="mob.near/widget/Profile.N.OverlayTrigger"
+      loading={props.children}
+      props={{
+        accountId,
+        children: props.children,
+      }}
+    />
+  </a>
+);
+
+const DotsSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="-2 -2 20 20"
+    style={{ width: "1.25em" }}
+  >
+    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
+  </svg>
+);
+
+const Button = styled.div`
+  line-height: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+  background: inherit;
+  color: #6c757d;
+  font-size: 16px;
+  .icon {
+    position: relative;
+    &:before {
+      margin: -8px;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]):hover {
+    opacity: 1 !important;
+    color: DeepSkyBlue;
+
+    .icon:before {
+      background: rgba(0, 191, 255, 0.1);
+    }
+  }
+`;
+
+return (
+  <div className="d-flex flex-row align-items-center post-header">
+    <div className="flex-grow-1" style={{ minWidth: 0, overflow: "hidden" }}>
+      <div className="d-flex">
+        <div className="left">
+          <Widget
+            loading=""
+            src="mob.near/widget/MainPage.N.Post.Left"
+            props={{ accountId, groupId }}
+          />
+        </div>
+        <div className="d-flex flex-column">
+          <div className="d-flex flex flex-shrink-1 overflow-hidden">
+            {name && (
+              <Overlay>
+                <div className="text-truncate fw-bold">{name}</div>
+              </Overlay>
+            )}
+            <div className="flex-shrink-0">
+              <Widget
+                loading={""}
+                src="mob.near/widget/Checkmark"
+                props={{ isPremium, accountId }}
+              />
+            </div>
+          </div>
+          <div
+            className="d-flex flex-column flex-shrink-1 overflow-hidden mw-100"
+            style={{ marginLeft: "2px" }}
+          >
+            <div className="flex-shrink-1 overflow-hidden">
+              <Overlay>
+                <div className="text-truncate text-muted">@{accountId}</div>
+              </Overlay>
+            </div>
+            {!pinned && (
+              <div className="text-nowrap text-muted flex-shrink-0">
+                {blockHeight === "now" ? (
+                  "now"
+                ) : (
+                  <a className="text-muted" href={link}>
+                    <Widget
+                      loading=""
+                      src="mob.near/widget/TimeAgo"
+                      props={{ blockHeight }}
+                    />
+                  </a>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+    {pinned && (
+      <span title="Pinned" className="ms-2">
+        <i className="bi bi-pin-angle" />
+      </span>
+    )}
+    {!pinned && !hideMenu && blockHeight !== "now" && (
+      <span>
+        <Button data-bs-toggle="dropdown" aria-expanded="false">
+          <span className="icon">{DotsSvg}</span>
+        </Button>
+        <ul className="dropdown-menu">
+          <li className="dropdown-item">
+            <a
+              className="link-dark text-decoration-none"
+              href={`${link}&raw=true`}
+            >
+              <i className="bi bi-filetype-raw" /> View raw markdown source
+            </a>
+          </li>
+          <li>
+            <Widget
+              src="mob.near/widget/MainPage.Common.HideAccount"
+              props={{ accountId }}
+            />
+          </li>
+          {props.flagItem && (
+            <li>
+              <Widget
+                src="mob.near/widget/MainPage.Common.FlagContent"
+                props={{
+                  item: props.flagItem,
+                  label: `Flag ${postType} for moderation`,
+                }}
+              />
+            </li>
+          )}
+        </ul>
+      </span>
+    )}
+  </div>
+);