add initial files

src/renderer/layouts/auth/AuthLayout.tsx

@@ -0,0 +1,31 @@
+import { Outlet } from 'react-router-dom';
+import styled from 'styled-components';
+import { Titlebar } from 'renderer/features/titlebar';
+
+const WindowsTitlebarContainer = styled.div`
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  width: 100%;
+  height: 50px;
+  user-select: none;
+  -webkit-app-region: drag;
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+export const AuthLayout = () => {
+  return (
+    <>
+      <WindowsTitlebarContainer>
+        <Titlebar />
+      </WindowsTitlebarContainer>
+      <ContentContainer>
+        <Outlet />
+      </ContentContainer>
+    </>
+  );
+};

src/renderer/layouts/default/DefaultLayout.tsx

@@ -0,0 +1,92 @@
+import { AnimatePresence } from 'framer-motion';
+import { Outlet, useLocation } from 'react-router-dom';
+import * as Space from 'react-spaces';
+import styled from 'styled-components';
+import { Playerbar } from 'renderer/features/player';
+import { Sidebar } from 'renderer/features/sidebar';
+import { Titlebar } from 'renderer/features/titlebar';
+
+const LayoutContainer = styled(Space.ViewPort)``;
+
+const LeftSidebar = styled(Space.LeftResizable)`
+  background: var(--sidebar-bg);
+`;
+
+const RightSidebar = styled(Space.RightResizable)`
+  background: var(--sidebar-bg);
+`;
+
+const TitlebarContainer = styled(Space.Top)`
+  position: sticky;
+  background: var(--titlebar-bg);
+  border-bottom: var(--playerbar-border-top);
+`;
+
+const ContentContainer = styled(Space.Fill)`
+  padding: 1rem;
+`;
+
+const PlayerbarContainer = styled(Space.Bottom)``;
+
+const ResizeHandle = styled.span<{
+  placement: 'top' | 'left' | 'bottom' | 'right';
+}>`
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  border-top: ${({ placement }) =>
+    placement === 'top' && '1px var(--sidebar-handle-bg) solid'};
+  border-right: ${({ placement }) =>
+    placement === 'right' && '1px var(--sidebar-handle-bg) solid'};
+  border-bottom: ${({ placement }) =>
+    placement === 'bottom' && '1px var(--sidebar-handle-bg) solid'};
+  border-left: ${({ placement }) =>
+    placement === 'left' && '1px var(--sidebar-handle-bg) solid'};
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export const DefaultLayout = () => {
+  const location = useLocation();
+  return (
+    <>
+      <LayoutContainer>
+        <TitlebarContainer size={40}>
+          <Titlebar />
+        </TitlebarContainer>
+        <Space.Fill>
+          <LeftSidebar
+            handleRender={(props) => (
+              <ResizeHandle placement="right" {...props} />
+            )}
+            maximumSize={400}
+            minimumSize={175}
+            size={175}
+          >
+            <Sidebar />
+          </LeftSidebar>
+          <RightSidebar
+            handleRender={(props) => (
+              <ResizeHandle placement="left" {...props} />
+            )}
+            maximumSize={400}
+            size={300}
+          />
+          <Space.Fill>
+            <AnimatePresence exitBeforeEnter>
+              <ContentContainer key={location.pathname}>
+                <Outlet />
+              </ContentContainer>
+            </AnimatePresence>
+          </Space.Fill>
+        </Space.Fill>
+        <PlayerbarContainer size={90}>
+          <Playerbar />
+        </PlayerbarContainer>
+      </LayoutContainer>
+    </>
+  );
+};

src/renderer/layouts/default/utils/constrainSidebarWidth.ts

@@ -0,0 +1,11 @@
+export const constrainSidebarWidth = (num: number) => {
+  if (num < 165) {
+    return 165;
+  }
+
+  if (num > 400) {
+    return 400;
+  }
+
+  return num;
+};

src/renderer/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from './auth/AuthLayout';
+export * from './default/DefaultLayout';