package.json

@@ -31,8 +31,8 @@
     "@types/chroma-js": "^2.4.4",
     "@types/events": "^3.0.3",
     "@types/ramda": "^0.30.1",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"

src/components/NavigationBar.tsx

@@ -1,26 +0,0 @@
-import { Spacer } from "@/foundations";
-import { flex, mq } from "@/style-predefines";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import chroma from "chroma-js";
-
-const NavigationContainer = styled.div(
-  ({ theme }) => css`
-    height: 100%;
-    width: ${theme.spacings.xxs * 36}px;
-    padding-top: ${theme.spacings.xxs * 24}px;
-    background-color: ${chroma(theme.backgroundColor.light).darken(0.3).hex()};
-    ${flex(theme, "column", "flex-start", "stretch", "sm")}
-    ${mq.dark} {
-      background-color: ${chroma(theme.backgroundColor.dark).brighten(0.3).hex()};
-    }
-  `
-);
-
-export function NavigationBar() {
-  return (
-    <NavigationContainer>
-      <Spacer />
-    </NavigationContainer>
-  );
-}

src/components/WindowMoveHandler.tsx

@@ -1,17 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-const Handler = styled.div(
-  ({ theme }) => css`
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: ${theme.spacings.xxs * 24}px;
-    z-index: 1;
-  `
-);
-
-export function WindowMoveHandler() {
-  return <Handler data-tauri-drag-region />;
-}

src/components/WindowMoveHandler/WindowMoveHandler.tsx

@@ -0,0 +1,17 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+const Handler = styled.div(({ theme }) =>
+  css({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: theme.spacings.xxs * 24,
+    zIndex: 1,
+  })
+);
+
+export function WindowMoveHandler() {
+  return <Handler data-tauri-drag-region />;
+}

src/components/index.tsx

@@ -1,2 +1 @@
-export { NavigationBar } from "./NavigationBar";
+export { WindowMoveHandler } from "./WindowMoveHandler/WindowMoveHandler";
-export { WindowMoveHandler } from "./WindowMoveHandler";

src/foundations/Avatar.tsx

@@ -1,42 +0,0 @@
-import { flex } from "@/style-predefines";
-import { css, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import { __, always, cond, includes, T } from "ramda";
-import { PropsWithChildren } from "react";
-
-type AvatarProps = {
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-  square?: boolean;
-  bgColor?: string;
-};
-
-const AvatarContainer = styled("div")<AvatarProps>(({ theme, size, square }) => {
-  const radiusSize = cond([
-    [includes(__, ["xs", "sm", "md"]), always("xxs")],
-    [T, always("xs")],
-  ])(size);
-  return css`
-    height: ${theme.spacings[size]};
-    width: ${theme.spacings[size]};
-    border-radius: ${theme.radius[square ? "none" : radiusSize]};
-    overflow: hidden;
-    ${flex(theme, "row", "center", "center")}
-    .child {
-      overflow: hidden;
-    }
-  `;
-});
-
-export function Avatar({
-  size = "md",
-  square = false,
-  bgColor,
-  children,
-}: PropsWithChildren<AvatarProps>) {
-  const theme = useTheme();
-  return (
-    <AvatarContainer size={size} square={square}>
-      <div className="child">{children}</div>
-    </AvatarContainer>
-  );
-}

src/foundations/Spacer.tsx

@@ -1,10 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-export const Spacer = styled.div(
-  () => css`
-    flex-grow: 1;
-    flex-shrink: 0;
-    align-self: stretch;
-  `
-);

src/foundations/index.tsx

@@ -1 +0,0 @@
-export { Spacer } from "./Spacer";

src/global-style.tsx

@@ -1,33 +1,21 @@
-import { css, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 import { mq } from "./style-predefines";
 
-export const globalStyle = (theme: Theme) => css`
+export const globalStyle = (theme) =>
-  :root {
+  css({
-    color-scheme: light dark;
+    [":root"]: {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+      colorScheme: "light dark",
-    font-size: 0.625;
+      fontFamily: "Inter, Avenir, Helvetica, Arial, sans-serif",
-    font-synthesis: none;
+      fontSize: 0.625,
-    text-rendering: optimizeLegibility;
+      fontSynthesis: "none",
-    -webkit-font-smoothing: antialiased;
+      textRendering: "optimizeLegibility",
-    -moz-osx-font-smoothing: grayscale;
+      WebkitFontSmoothing: "antialiased",
-    -webkit-text-size-adjust: 100%;
+      MozOsxFontSmoothing: "grayscale",
-    color: ${theme.foregroundColor.light};
+      WebkitTextSizeAdjust: "100%",
-    background-color: ${theme.backgroundColor.light};
+      backgroundColor: theme.backgroundColor.light,
-    overflow: hidden;
+      overflow: "hidden",
-    height: 100vh;
+      [mq.dark]: {
-    width: 100vw;
+        backgroundColor: theme.backgroundColor.dark,
-    ${mq.dark} {
+      },
-      color: ${theme.foregroundColor.dark};
+    },
-      background-color: ${theme.backgroundColor.dark};
+  });
-    }
-  }
-  body {
-    height: inherit;
-    width: inherit;
-    overflow: hidden;
-    #root {
-      height: inherit;
-      width: inherit;
-    }
-  }
-`;

src/pages/MainLayout.tsx

@@ -1,27 +1,22 @@
-import { NavigationBar, WindowMoveHandler } from "@/components";
+import { WindowMoveHandler } from "@/components";
 import { flex } from "@/style-predefines";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-const LayoutContainer = styled.div(
+const LayoutContainer = styled.div(({ theme }) =>
-  ({ theme }) => css`
+  css({
-    height: 100%;
+    height: "100vh",
-    width: 100%;
+    width: "100vw",
-    overflow: hidden;
+    paddingTop: theme.spacings.xxs * 24,
-    ${flex(theme, "row", "flex-start", "stretch")}
+    ...flex(theme, "row", "flex-start", "stretch"),
-    .main-content {
+    overflow: "hidden",
-      flex-grow: 1;
+  })
-      overflow: hidden;
-    }
-  `
 );
 
 export function MainLayout() {
   return (
     <LayoutContainer>
       <WindowMoveHandler />
-      <NavigationBar />
-      <div className="main-content">Main Content</div>
     </LayoutContainer>
   );
 }

src/style-predefines.tsx

@@ -35,8 +35,8 @@ export function flex(
   direction: Property.FlexDirection = "row",
   justify: Property.JustifyContent = "flex-start",
   align: Property.AlignItems = "start",
-  gap: MeasureUnit = "none",
+  wrap: Property.FlexWrap = "nowrap",
-  wrap: Property.FlexWrap = "nowrap"
+  gap: MeasureUnit = "none"
 ) {
   return css({
     display: "flex",

src/theme.tsx

@@ -24,12 +24,12 @@ export const theme: Partial<Theme> = {
   white: "#ffffff",
   black: "#000000",
   foregroundColor: {
-    light: chroma.hsl(0, 0, 0.12).hex(),
+    light: chroma.hsl(0, 0, 0.06).hex(),
-    dark: chroma.hsl(0, 0, 0.82).hex(),
+    dark: chroma.hsl(0, 0, 0.88).hex(),
   },
   backgroundColor: {
-    light: chroma.hsl(0, 0, 0.94).hex(),
+    light: chroma.hsl(0, 0, 0.96).hex(),
-    dark: chroma.hsl(0, 0, 0.098).hex(),
+    dark: chroma.hsl(0, 0, 0.18).hex(),
   },
   successColor: {
     light: colors.green[5],