From 197b736f3ef52ceb1d1331efbd088edf0d9215de Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 14:08:53 -0300
Subject: [PATCH 01/12] Add nav and footer ID's

---
 src/shared/components/app/footer.tsx |  5 ++++-
 src/shared/components/app/navbar.tsx | 30 ++++++++++++++++------------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
index bd66165e..d9ae173d 100644
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@@ -16,7 +16,10 @@ export class Footer extends Component<FooterProps, any> {
 
   render() {
     return (
-      <nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
+      <nav
+        id="footer"
+        className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3"
+      >
         <div className="navbar-collapse">
           <ul className="navbar-nav ml-auto">
             {this.props.site?.version !== VERSION && (
diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 6d310eef..4afe2e19 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -86,8 +86,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
-      <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
+      <nav
+        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
+        id="navbar"
+      >
         <NavLink
+          id="navTitle"
           to="/"
           title={siteView?.site.description ?? siteView?.site.name}
           className="d-flex align-items-center navbar-brand mr-md-3"
@@ -100,10 +104,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
         </NavLink>
         {person && (
           <ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
-            <li className="nav-item">
+            <li className="nav-item nav-item-icon">
               <NavLink
                 to="/inbox"
-                className="p-1 nav-link border-0"
+                className="p-1 nav-link border-0 nav-messages"
                 title={i18n.t("unread_messages", {
                   count: Number(this.state.unreadApplicationCountRes.state),
                   formattedCount: numToSI(this.unreadInboxCount),
@@ -119,7 +123,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </NavLink>
             </li>
             {this.moderatesSomething && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-icon">
                 <NavLink
                   to="/reports"
                   className="p-1 nav-link border-0"
@@ -139,7 +143,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </li>
             )}
             {amAdmin() && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-icon">
                 <NavLink
                   to="/registration_applications"
                   className="p-1 nav-link border-0"
@@ -178,7 +182,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           id="navbarDropdown"
           ref={this.mobileMenuRef}
         >
-          <ul className="mr-auto navbar-nav">
+          <ul id="navbarLinks" className="mr-auto navbar-nav">
             <li className="nav-item">
               <NavLink
                 to="/communities"
@@ -228,8 +232,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </a>
             </li>
           </ul>
-          <ul className="navbar-nav">
-            <li className="nav-item">
+          <ul id="navbarIcons" className="navbar-nav">
+            <li className="nav-item nav-item-search">
               <NavLink
                 to="/search"
                 className="nav-link"
@@ -240,7 +244,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </NavLink>
             </li>
             {amAdmin() && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-admin">
                 <NavLink
                   to="/admin"
                   className="nav-link"
@@ -253,7 +257,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             )}
             {person ? (
               <>
-                <li className="nav-item">
+                <li className="nav-item nav-item-messages">
                   <NavLink
                     className="nav-link"
                     to="/inbox"
@@ -272,7 +276,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </NavLink>
                 </li>
                 {this.moderatesSomething && (
-                  <li className="nav-item">
+                  <li className="nav-item nav-item-moderation">
                     <NavLink
                       className="nav-link"
                       to="/reports"
@@ -292,7 +296,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {amAdmin() && (
-                  <li className="nav-item">
+                  <li className="nav-item nav-item-applications">
                     <NavLink
                       to="/registration_applications"
                       className="nav-link"
@@ -312,7 +316,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {person && (
-                  <div className="dropdown">
+                  <div id="dropdownUser" className="dropdown">
                     <button
                       className="btn dropdown-toggle"
                       role="button"

From a5dc5c0b3f95a8358b4606a65996a5ceecda1529 Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 14:09:35 -0300
Subject: [PATCH 02/12] Rename markdown-textarea ID's

---
 src/shared/components/common/markdown-textarea.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index a4459ac0..a3a9cbde 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -63,8 +63,9 @@ export class MarkdownTextArea extends Component<
   MarkdownTextAreaProps,
   MarkdownTextAreaState
 > {
-  private id = `comment-textarea-${randomStr()}`;
-  private formId = `comment-form-${randomStr()}`;
+  private id = `markdown-textarea-${randomStr()}`;
+  private formId = `markdown-form-${randomStr()}`;
+
   private tribute: any;
 
   state: MarkdownTextAreaState = {

From 3ca2bce9f0d3e490f570f297da91766b67e551de Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 14:10:56 -0300
Subject: [PATCH 03/12] Add classes to post and comment repy textareas

---
 src/shared/components/comment/comment-form.tsx | 3 ++-
 src/shared/components/comment/comment-node.tsx | 2 ++
 src/shared/components/post/post.tsx            | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-form.tsx b/src/shared/components/comment/comment-form.tsx
index c60cde20..7e4aa9fe 100644
--- a/src/shared/components/comment/comment-form.tsx
+++ b/src/shared/components/comment/comment-form.tsx
@@ -21,6 +21,7 @@ interface CommentFormProps {
   onReplyCancel?(): void;
   allLanguages: Language[];
   siteLanguages: number[];
+  containerClass?: string;
   onUpsertComment(form: EditComment | CreateComment): void;
 }
 
@@ -40,7 +41,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
         : undefined;
 
     return (
-      <div className="mb-3">
+      <div className={["mb-3", this.props.containerClass].join(" ")}>
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea
             initialContent={initialContent}
diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 0380a726..9ebbf348 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -400,6 +400,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 focus
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}
+                containerClass="comment-comment-container"
                 onUpsertComment={this.props.onEditComment}
               />
             )}
@@ -1143,6 +1144,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             focus
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
+            containerClass="comment-comment-container"
             onUpsertComment={this.props.onCreateComment}
           />
         )}
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 9c68532b..652c38c2 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -384,6 +384,7 @@ export class Post extends Component<any, PostState> {
                 disabled={res.post_view.post.locked}
                 allLanguages={this.state.siteRes.all_languages}
                 siteLanguages={this.state.siteRes.discussion_languages}
+                containerClass="post-comment-container"
                 onUpsertComment={this.handleCreateComment}
                 finished={this.state.finished.get(0)}
               />

From 2d79ad32b55f8976bd6b4d67af05fec2ebdc96bf Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 14:12:07 -0300
Subject: [PATCH 04/12] Add clases and ID's to post form/listing

---
 src/shared/components/post/create-post.tsx  |  5 ++++-
 src/shared/components/post/post-listing.tsx | 10 +++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index c7597917..baa7b45f 100644
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -166,7 +166,10 @@ export class CreatePost extends Component<
           </h5>
         ) : (
           <div className="row">
-            <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+            <div
+              id="createPostForm"
+              className="col-12 col-lg-6 offset-lg-3 mb-4"
+            >
               <h5>{i18n.t("create_post")}</h5>
               <PostForm
                 onCreate={this.handlePostCreate}
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 60e188a3..23ae3892 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -230,7 +230,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   body() {
     const body = this.postView.post.body;
     return body ? (
-      <div className="col-12 card my-2 p-2">
+      <div id="postContent" className="col-12 card my-2 p-2">
         {this.state.viewSource ? (
           <pre>{body}</pre>
         ) : (
@@ -464,7 +464,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </button>
         {showScores() ? (
           <div
-            className={`unselectable pointer font-weight-bold text-muted px-1`}
+            className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
             data-tippy-content={this.pointsTippy}
           >
             {numToSI(this.postView.counts.score)}
@@ -1398,7 +1398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {/* The mobile view*/}
         <div className="d-block d-sm-none">
-          <div className="row">
+          <div className="row post-container">
             <div className="col-12">
               {this.createdLine()}
 
@@ -1418,9 +1418,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
         {/* The larger view*/}
         <div className="d-none d-sm-block">
-          <div className="row">
+          <div className="row post-container">
             {!this.props.viewOnly && this.voteBar()}
-            <div className="col-sm-2 pr-0">
+            <div className="col-sm-2 pr-0 post-media">
               <div className="">{this.thumbnail()}</div>
             </div>
             <div className="col-12 col-sm-9">

From da1a4f81dfe1ea2369c7c07df445730a87f39c72 Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 14:12:27 -0300
Subject: [PATCH 05/12] Add ID's and classes to sidebars

---
 src/shared/components/community/sidebar.tsx | 6 +++---
 src/shared/components/home/home.tsx         | 6 +++---
 src/shared/components/home/site-sidebar.tsx | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 63378a18..692987b5 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -135,8 +135,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <div>
-        <div className="card border-secondary mb-3">
+      <div id="sidebarContainer">
+        <div id="sidebarMain" className="card border-secondary mb-3">
           <div className="card-body">
             {this.communityTitle()}
             {this.props.editable && this.adminButtons()}
@@ -158,7 +158,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             )}
           </div>
         </div>
-        <div className="card border-secondary mb-3">
+        <div id="sidebarInfo" className="card border-secondary mb-3">
           <div className="card-body">
             {this.description()}
             {this.badges()}
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 1abb1ee3..9c7cd753 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -423,8 +423,8 @@ export class Home extends Component<any, HomeState> {
 
     return (
       <div>
-        <div>
-          <div className="card border-secondary mb-3">
+        <div id="sidebarContainer">
+          <div id="sidebarMain" className="card border-secondary mb-3">
             <div className="card-body">
               {this.trendingCommunities()}
               {canCreateCommunity(this.state.siteRes) && (
@@ -447,7 +447,7 @@ export class Home extends Component<any, HomeState> {
             showLocal={showLocal(this.isoData)}
           />
           {this.hasFollows && (
-            <div className="card border-secondary mb-3">
+            <div id="sidebarSubscribed" className="card border-secondary mb-3">
               <div className="card-body">{this.subscribedCommunities}</div>
             </div>
           )}
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 051c3afd..d96a1381 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -30,7 +30,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <div className="card border-secondary mb-3">
+      <div id="sidebarInfo" className="card border-secondary mb-3">
         <div className="card-body">
           <div>
             <div className="mb-2">{this.siteName()}</div>

From e597e59bfee85aa007528d89f0a46d165bd045e7 Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 14:21:01 -0300
Subject: [PATCH 06/12] Add lemmy-site class for easier detection

---
 src/shared/components/app/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 96857f31..c495548c 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -25,7 +25,7 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={i18n}>
-          <div id="app">
+          <div id="app" className="lemmy-site">
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}

From c4146cc66a83c659922ed5aede0f63ea5a88389b Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 17:26:58 -0300
Subject: [PATCH 07/12] Use footer semantic HTML tag

---
 src/shared/components/app/footer.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
index d9ae173d..aabe4eff 100644
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@@ -16,10 +16,7 @@ export class Footer extends Component<FooterProps, any> {
 
   render() {
     return (
-      <nav
-        id="footer"
-        className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3"
-      >
+      <footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
         <div className="navbar-collapse">
           <ul className="navbar-nav ml-auto">
             {this.props.site?.version !== VERSION && (
@@ -66,7 +63,7 @@ export class Footer extends Component<FooterProps, any> {
             </li>
           </ul>
         </div>
-      </nav>
+      </footer>
     );
   }
 }

From 5d7e5cac33fc27a1a67196377963a54082d5c69e Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 17:27:41 -0300
Subject: [PATCH 08/12] Use article semantic HTML tag for posts/comments

---
 src/shared/components/comment/comment-node.tsx |  4 ++--
 src/shared/components/post/post-listing.tsx    | 12 ++++++------
 src/shared/components/post/post.tsx            |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 9ebbf348..aeb4a71c 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -282,7 +282,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     return (
       <li className="comment" role="comment">
-        <div
+        <article
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
             "border-top border-light": !this.props.noBorder,
@@ -945,7 +945,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </div>
             )}
           </div>
-        </div>
+        </article>
         {showMoreChildren && (
           <div
             className={classNames("details ml-1 comment-node py-2", {
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 23ae3892..e170a332 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -230,13 +230,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   body() {
     const body = this.postView.post.body;
     return body ? (
-      <div id="postContent" className="col-12 card my-2 p-2">
+      <article id="postContent" className="col-12 card my-2 p-2">
         {this.state.viewSource ? (
           <pre>{body}</pre>
         ) : (
           <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
         )}
-      </div>
+      </article>
     ) : (
       <></>
     );
@@ -1398,7 +1398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {/* The mobile view*/}
         <div className="d-block d-sm-none">
-          <div className="row post-container">
+          <article className="row post-container">
             <div className="col-12">
               {this.createdLine()}
 
@@ -1413,12 +1413,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.duplicatesLine()}
               {this.removeAndBanDialogs()}
             </div>
-          </div>
+          </article>
         </div>
 
         {/* The larger view*/}
         <div className="d-none d-sm-block">
-          <div className="row post-container">
+          <article className="row post-container">
             {!this.props.viewOnly && this.voteBar()}
             <div className="col-sm-2 pr-0 post-media">
               <div className="">{this.thumbnail()}</div>
@@ -1435,7 +1435,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 </div>
               </div>
             </div>
-          </div>
+          </article>
         </div>
       </>
     );
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index dadebcf9..36c84368 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -548,7 +548,7 @@ export class Post extends Component<any, PostState> {
     const res = this.state.postRes;
     if (res.state === "success") {
       return (
-        <div className="mb-3">
+        <aside className="mb-3">
           <Sidebar
             community_view={res.data.community_view}
             moderators={res.data.moderators}
@@ -566,7 +566,7 @@ export class Post extends Component<any, PostState> {
             onBlockCommunity={this.handleBlockCommunity}
             onEditCommunity={this.handleEditCommunity}
           />
-        </div>
+        </aside>
       );
     }
   }

From 9a943e1f2ee9536a3cbd903264dbdc38691a3210 Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 17:27:55 -0300
Subject: [PATCH 09/12] Use aside semantic HTML tag for sidebars

---
 src/shared/components/community/sidebar.tsx |  8 +--
 src/shared/components/home/home.tsx         | 55 +++++++++++----------
 src/shared/components/home/site-sidebar.tsx |  4 +-
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 0d08e77e..11870f5d 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -133,7 +133,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const { name, actor_id } = this.props.community_view.community;
     return (
       <div id="sidebarContainer">
-        <div id="sidebarMain" className="card border-secondary mb-3">
+        <section id="sidebarMain" className="card border-secondary mb-3">
           <div className="card-body">
             {this.communityTitle()}
             {this.props.editable && this.adminButtons()}
@@ -154,14 +154,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               </div>
             )}
           </div>
-        </div>
-        <div id="sidebarInfo" className="card border-secondary mb-3">
+        </section>
+        <section id="sidebarInfo" className="card border-secondary mb-3">
           <div className="card-body">
             {this.description()}
             {this.badges()}
             {this.mods()}
           </div>
-        </div>
+        </section>
       </div>
     );
   }
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 9c7cd753..c7780a9e 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -422,36 +422,37 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div>
-        <div id="sidebarContainer">
-          <div id="sidebarMain" className="card border-secondary mb-3">
-            <div className="card-body">
-              {this.trendingCommunities()}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
+      <div id="sidebarContainer">
+        <section id="sidebarMain" className="card border-secondary mb-3">
+          <div className="card-body">
+            {this.trendingCommunities()}
+            {canCreateCommunity(this.state.siteRes) && (
               <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
+                path="/create_community"
+                translationKey="create_a_community"
               />
-            </div>
+            )}
+            <LinkButton
+              path="/communities"
+              translationKey="explore_communities"
+            />
           </div>
-          <SiteSidebar
-            site={site}
-            admins={admins}
-            counts={counts}
-            online={online}
-            showLocal={showLocal(this.isoData)}
-          />
-          {this.hasFollows && (
-            <div id="sidebarSubscribed" className="card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
-            </div>
-          )}
-        </div>
+        </section>
+        <SiteSidebar
+          site={site}
+          admins={admins}
+          counts={counts}
+          online={online}
+          showLocal={showLocal(this.isoData)}
+        />
+        {this.hasFollows && (
+          <section
+            id="sidebarSubscribed"
+            className="card border-secondary mb-3"
+          >
+            <div className="card-body">{this.subscribedCommunities}</div>
+          </section>
+        )}
       </div>
     );
   }
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index d96a1381..d2a3eee0 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -30,7 +30,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <div id="sidebarInfo" className="card border-secondary mb-3">
+      <section id="sidebarInfo" className="card border-secondary mb-3">
         <div className="card-body">
           <div>
             <div className="mb-2">{this.siteName()}</div>
@@ -42,7 +42,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             )}
           </div>
         </div>
-      </div>
+      </section>
     );
   }
 

From fe54ae971539a32a451362c06df7aa884b33cb95 Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 18:28:50 -0300
Subject: [PATCH 10/12] Switch navbar classes to ids

---
 src/shared/components/app/navbar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 4afe2e19..c17837c9 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -104,7 +104,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
         </NavLink>
         {person && (
           <ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
-            <li className="nav-item nav-item-icon">
+            <li id="navMessages" className="nav-item nav-item-icon">
               <NavLink
                 to="/inbox"
                 className="p-1 nav-link border-0 nav-messages"
@@ -233,7 +233,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             </li>
           </ul>
           <ul id="navbarIcons" className="navbar-nav">
-            <li className="nav-item nav-item-search">
+            <li id="navSearch" className="nav-item">
               <NavLink
                 to="/search"
                 className="nav-link"
@@ -244,7 +244,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </NavLink>
             </li>
             {amAdmin() && (
-              <li className="nav-item nav-item-admin">
+              <li id="navAdmin" className="nav-item">
                 <NavLink
                   to="/admin"
                   className="nav-link"
@@ -257,7 +257,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             )}
             {person ? (
               <>
-                <li className="nav-item nav-item-messages">
+                <li id="navMessages" className="nav-item">
                   <NavLink
                     className="nav-link"
                     to="/inbox"
@@ -276,7 +276,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </NavLink>
                 </li>
                 {this.moderatesSomething && (
-                  <li className="nav-item nav-item-moderation">
+                  <li id="navModeration" className="nav-item">
                     <NavLink
                       className="nav-link"
                       to="/reports"
@@ -296,7 +296,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {amAdmin() && (
-                  <li className="nav-item nav-item-applications">
+                  <li id="navApplications" className="nav-item">
                     <NavLink
                       to="/registration_applications"
                       className="nav-link"

From a03bee512aeae23c04a2409dec3ee74e32e4e8ac Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 18:47:37 -0300
Subject: [PATCH 11/12] Add a class to the more button on a comment node

---
 src/shared/components/comment/comment-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index aeb4a71c..806d2c2f 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -513,7 +513,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </button>
                       {!this.state.showAdvanced ? (
                         <button
-                          className="btn btn-link btn-animate text-muted"
+                          className="btn btn-link btn-animate text-muted btn-more"
                           onClick={linkEvent(this, this.handleShowAdvanced)}
                           data-tippy-content={i18n.t("more")}
                           aria-label={i18n.t("more")}

From e13d6145cb6a8880f808c403e13921c6e0a11480 Mon Sep 17 00:00:00 2001
From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 18:56:06 -0300
Subject: [PATCH 12/12] Remove extra div in post sidebar

---
 src/shared/components/community/sidebar.tsx | 64 +++++++++++----------
 src/shared/components/post/post.tsx         | 34 ++++++-----
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 5c8f46ad..f4c74528 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -131,37 +131,39 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <div id="sidebarContainer">
-        <section id="sidebarMain" className="card border-secondary mb-3">
-          <div className="card-body">
-            {this.communityTitle()}
-            {this.props.editable && this.adminButtons()}
-            {myUSerInfo && this.subscribe()}
-            {this.canPost && this.createPost()}
-            {myUSerInfo && this.blockCommunity()}
-            {!myUSerInfo && (
-              <div className="alert alert-info" role="alert">
-                <T
-                  i18nKey="community_not_logged_in_alert"
-                  interpolation={{
-                    community: name,
-                    instance: hostname(actor_id),
-                  }}
-                >
-                  #<code className="user-select-all">#</code>#
-                </T>
-              </div>
-            )}
-          </div>
-        </section>
-        <section id="sidebarInfo" className="card border-secondary mb-3">
-          <div className="card-body">
-            {this.description()}
-            {this.badges()}
-            {this.mods()}
-          </div>
-        </section>
-      </div>
+      <aside className="mb-3">
+        <div id="sidebarContainer">
+          <section id="sidebarMain" className="card border-secondary mb-3">
+            <div className="card-body">
+              {this.communityTitle()}
+              {this.props.editable && this.adminButtons()}
+              {myUSerInfo && this.subscribe()}
+              {this.canPost && this.createPost()}
+              {myUSerInfo && this.blockCommunity()}
+              {!myUSerInfo && (
+                <div className="alert alert-info" role="alert">
+                  <T
+                    i18nKey="community_not_logged_in_alert"
+                    interpolation={{
+                      community: name,
+                      instance: hostname(actor_id),
+                    }}
+                  >
+                    #<code className="user-select-all">#</code>#
+                  </T>
+                </div>
+              )}
+            </div>
+          </section>
+          <section id="sidebarInfo" className="card border-secondary mb-3">
+            <div className="card-body">
+              {this.description()}
+              {this.badges()}
+              {this.mods()}
+            </div>
+          </section>
+        </div>
+      </aside>
     );
   }
 
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 1b10a98c..25fd1b3f 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -548,24 +548,22 @@ export class Post extends Component<any, PostState> {
     const res = this.state.postRes;
     if (res.state === "success") {
       return (
-        <aside className="mb-3">
-          <Sidebar
-            community_view={res.data.community_view}
-            moderators={res.data.moderators}
-            admins={this.state.siteRes.admins}
-            enableNsfw={enableNsfw(this.state.siteRes)}
-            showIcon
-            allLanguages={this.state.siteRes.all_languages}
-            siteLanguages={this.state.siteRes.discussion_languages}
-            onDeleteCommunity={this.handleDeleteCommunityClick}
-            onLeaveModTeam={this.handleAddModToCommunity}
-            onFollowCommunity={this.handleFollow}
-            onRemoveCommunity={this.handleModRemoveCommunity}
-            onPurgeCommunity={this.handlePurgeCommunity}
-            onBlockCommunity={this.handleBlockCommunity}
-            onEditCommunity={this.handleEditCommunity}
-          />
-        </aside>
+        <Sidebar
+          community_view={res.data.community_view}
+          moderators={res.data.moderators}
+          admins={this.state.siteRes.admins}
+          enableNsfw={enableNsfw(this.state.siteRes)}
+          showIcon
+          allLanguages={this.state.siteRes.all_languages}
+          siteLanguages={this.state.siteRes.discussion_languages}
+          onDeleteCommunity={this.handleDeleteCommunityClick}
+          onLeaveModTeam={this.handleAddModToCommunity}
+          onFollowCommunity={this.handleFollow}
+          onRemoveCommunity={this.handleModRemoveCommunity}
+          onPurgeCommunity={this.handlePurgeCommunity}
+          onBlockCommunity={this.handleBlockCommunity}
+          onEditCommunity={this.handleEditCommunity}
+        />
       );
     }
   }