From f7b8e349051207833520f47fd97e2968cec4289b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 6 Jan 2023 14:49:41 -0800
Subject: [PATCH] Improve semantic html of default layout and add ids

---
 .../hooks/use-fixed-table-header.tsx          |   4 +-
 .../shared/components/animated-page.tsx       |   2 +-
 src/renderer/layouts/default-layout.tsx       | 245 +++++++++---------
 3 files changed, 126 insertions(+), 125 deletions(-)

diff --git a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
index f7acb778..3089e79f 100644
--- a/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
+++ b/src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
@@ -14,8 +14,8 @@ export const useFixedTableHeader = () => {
   });
 
   useEffect(() => {
-    const header = document.querySelector('.ag-header');
-    const root = document.querySelector('.ag-root');
+    const header = document.querySelector('main .ag-header');
+    const root = document.querySelector('main .ag-root');
 
     if (isNotPastTableIntersection || !tableInView) {
       header?.classList.remove('ag-header-fixed');
diff --git a/src/renderer/features/shared/components/animated-page.tsx b/src/renderer/features/shared/components/animated-page.tsx
index 25b6d485..a3dfb1ef 100644
--- a/src/renderer/features/shared/components/animated-page.tsx
+++ b/src/renderer/features/shared/components/animated-page.tsx
@@ -7,7 +7,7 @@ interface AnimatedPageProps {
   children: ReactNode;
 }
 
-const StyledAnimatedPage = styled(motion.div)`
+const StyledAnimatedPage = styled(motion.main)`
   position: relative;
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/layouts/default-layout.tsx b/src/renderer/layouts/default-layout.tsx
index 7781e357..33eb59f8 100644
--- a/src/renderer/layouts/default-layout.tsx
+++ b/src/renderer/layouts/default-layout.tsx
@@ -28,7 +28,7 @@ if (!isElectron()) {
 const Layout = styled.div`
   display: grid;
   grid-template-areas:
-    'main'
+    'main-content'
     'player';
   grid-template-rows: calc(100vh - 85px) 85px;
   grid-template-columns: 1fr;
@@ -36,7 +36,7 @@ const Layout = styled.div`
   height: 100%;
 `;
 
-const MainContainer = styled.main<{
+const MainContentContainer = styled.div<{
   leftSidebarWidth: string;
   rightExpanded?: boolean;
   rightSidebarWidth?: string;
@@ -44,7 +44,7 @@ const MainContainer = styled.main<{
 }>`
   position: relative;
   display: ${(props) => (props.shell ? 'flex' : 'grid')};
-  grid-area: main;
+  grid-area: main-content;
   grid-template-areas: 'sidebar . right-sidebar';
   grid-template-rows: 1fr;
   grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
@@ -53,14 +53,14 @@ const MainContainer = styled.main<{
   background: var(--main-bg);
 `;
 
-const SidebarContainer = styled.div`
+const SidebarContainer = styled.aside`
   position: relative;
   grid-area: sidebar;
   background: var(--sidebar-bg);
   border-right: var(--sidebar-border);
 `;
 
-const RightSidebarContainer = styled(motion.div)`
+const RightSidebarContainer = styled(motion.aside)`
   position: relative;
   grid-area: right-sidebar;
   height: 100%;
@@ -253,125 +253,126 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
   }, [throttledResize, stopResizing]);
 
   return (
-    <>
-      <Layout>
-        <MainContainer
-          leftSidebarWidth={sidebar.leftWidth}
-          rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
-          rightSidebarWidth={sidebar.rightWidth}
-          shell={shell}
-        >
-          {!shell && (
-            <>
-              <SidebarContainer>
-                <ResizeHandle
-                  ref={sidebarRef}
-                  isResizing={isResizing}
-                  placement="right"
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    startResizing('left');
-                  }}
-                />
-                <Sidebar />
-              </SidebarContainer>
-              <AnimatePresence
-                initial={false}
-                mode="wait"
-              >
-                {isQueueDrawerButtonVisible && (
-                  <QueueDrawerArea
-                    key="queue-drawer-button"
-                    animate="visible"
-                    exit="hidden"
-                    initial="hidden"
-                    variants={queueDrawerButtonVariants}
-                    whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
-                    onMouseEnter={handleEnterDrawerButton}
-                    onMouseLeave={handleLeaveDrawerButton}
-                  >
-                    <TbArrowBarLeft size={12} />
-                  </QueueDrawerArea>
-                )}
+    <Layout id="default-layout">
+      <MainContentContainer
+        id="main-content"
+        leftSidebarWidth={sidebar.leftWidth}
+        rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
+        rightSidebarWidth={sidebar.rightWidth}
+        shell={shell}
+      >
+        {!shell && (
+          <>
+            <SidebarContainer id="sidebar">
+              <ResizeHandle
+                ref={sidebarRef}
+                isResizing={isResizing}
+                placement="right"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  startResizing('left');
+                }}
+              />
+              <Sidebar />
+            </SidebarContainer>
+            <AnimatePresence
+              initial={false}
+              mode="wait"
+            >
+              {isQueueDrawerButtonVisible && (
+                <QueueDrawerArea
+                  key="queue-drawer-button"
+                  animate="visible"
+                  exit="hidden"
+                  initial="hidden"
+                  variants={queueDrawerButtonVariants}
+                  whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
+                  onMouseEnter={handleEnterDrawerButton}
+                  onMouseLeave={handleLeaveDrawerButton}
+                >
+                  <TbArrowBarLeft size={12} />
+                </QueueDrawerArea>
+              )}
 
-                {drawer && (
-                  <QueueDrawer
-                    key="queue-drawer"
-                    animate="open"
-                    exit="closed"
-                    initial="closed"
-                    variants={queueDrawerVariants}
-                    onMouseLeave={() => {
-                      // The drawer will close due to the delay when setting isReorderingQueue
-                      setTimeout(() => {
-                        if (useAppStore.getState().isReorderingQueue) return;
-                        drawerHandler.close();
-                      }, 50);
-                    }}
-                  >
-                    <DrawerPlayQueue />
-                  </QueueDrawer>
-                )}
-              </AnimatePresence>
-              <AnimatePresence
-                key="queue-sidebar"
-                presenceAffectsLayout
-                initial={false}
-                mode="wait"
-              >
-                {showSideQueue && (
-                  <>
-                    {sideQueueType === 'sideQueue' ? (
-                      <RightSidebarContainer
-                        key="queue-sidebar"
-                        animate="open"
-                        exit="closed"
-                        initial="closed"
-                        variants={queueSidebarVariants}
-                      >
-                        <ResizeHandle
-                          ref={rightSidebarRef}
-                          isResizing={isResizingRight}
-                          placement="left"
-                          onMouseDown={(e) => {
-                            e.preventDefault();
-                            startResizing('right');
-                          }}
-                        />
-                        <SidebarPlayQueue />
-                      </RightSidebarContainer>
-                    ) : (
-                      <QueueDrawer
-                        key="queue-drawer"
-                        animate="open"
-                        exit="closed"
-                        initial="closed"
-                        variants={queueDrawerVariants}
-                        onMouseLeave={() => {
-                          // The drawer will close due to the delay when setting isReorderingQueue
-                          setTimeout(() => {
-                            if (useAppStore.getState().isReorderingQueue) return;
-                            drawerHandler.close();
-                          }, 50);
+              {drawer && (
+                <QueueDrawer
+                  key="queue-drawer"
+                  animate="open"
+                  exit="closed"
+                  initial="closed"
+                  variants={queueDrawerVariants}
+                  onMouseLeave={() => {
+                    // The drawer will close due to the delay when setting isReorderingQueue
+                    setTimeout(() => {
+                      if (useAppStore.getState().isReorderingQueue) return;
+                      drawerHandler.close();
+                    }, 50);
+                  }}
+                >
+                  <DrawerPlayQueue />
+                </QueueDrawer>
+              )}
+            </AnimatePresence>
+            <AnimatePresence
+              key="queue-sidebar"
+              presenceAffectsLayout
+              initial={false}
+              mode="wait"
+            >
+              {showSideQueue && (
+                <>
+                  {sideQueueType === 'sideQueue' ? (
+                    <RightSidebarContainer
+                      key="queue-sidebar"
+                      animate="open"
+                      exit="closed"
+                      id="sidebar-queue"
+                      initial="closed"
+                      variants={queueSidebarVariants}
+                    >
+                      <ResizeHandle
+                        ref={rightSidebarRef}
+                        isResizing={isResizingRight}
+                        placement="left"
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          startResizing('right');
                         }}
-                      >
-                        <DrawerPlayQueue />
-                      </QueueDrawer>
-                    )}
-                  </>
-                )}
-              </AnimatePresence>
-            </>
-          )}
-          <Suspense fallback={<></>}>
-            <Outlet />
-          </Suspense>
-        </MainContainer>
-        <PlayerbarContainer>
-          <Playerbar />
-        </PlayerbarContainer>
-      </Layout>
-    </>
+                      />
+                      <SidebarPlayQueue />
+                    </RightSidebarContainer>
+                  ) : (
+                    <QueueDrawer
+                      key="queue-drawer"
+                      animate="open"
+                      exit="closed"
+                      id="drawer-queue"
+                      initial="closed"
+                      variants={queueDrawerVariants}
+                      onMouseLeave={() => {
+                        // The drawer will close due to the delay when setting isReorderingQueue
+                        setTimeout(() => {
+                          if (useAppStore.getState().isReorderingQueue) return;
+                          drawerHandler.close();
+                        }, 50);
+                      }}
+                    >
+                      <DrawerPlayQueue />
+                    </QueueDrawer>
+                  )}
+                </>
+              )}
+            </AnimatePresence>
+          </>
+        )}
+        <Suspense fallback={<></>}>
+          <Outlet />
+        </Suspense>
+      </MainContentContainer>
+      <PlayerbarContainer id="player-bar">
+        <Playerbar />
+      </PlayerbarContainer>
+    </Layout>
   );
 };