added browser db, made dark mode the default, changed homepage ui, an…

…d a few bugfixes and improvements here and there
GrayHat12 · Sep 16, 2023 · 5103bab · 5103bab
1 parent f1d38b1
commit 5103bab
Show file tree

Hide file tree

Showing 13 changed files with 442 additions and 180 deletions.
diff --git a/custom.css b/custom.css
@@ -0,0 +1,59 @@
+#left-pane div[data-path="%2Fa%2F%5B0%5D"],
+#left-pane div[data-path="%2Fa"],
+#left-pane div[data-path="%2Fa%2F%5B1%5D"],
+#left-pane div[data-path="%2Fb%2Fc%2Fd"],
+#left-pane div[data-path="%2Fb%2Fc"],
+#left-pane div[data-path="%2Fb"] {
+    --background-color-custom: #F6D283
+}
+
+#left-pane div[data-path="%2Fa%2F%5B0%5D"]>div:first-child>div,
+#left-pane div[data-path="%2Fa"]>div:first-child>div,
+#left-pane div[data-path="%2Fa%2F%5B1%5D"]>div:first-child>div,
+#left-pane div[data-path="%2Fb%2Fc%2Fd"]>div:first-child>div,
+#left-pane div[data-path="%2Fb%2Fc"]>div:first-child>div,
+#left-pane div[data-path="%2Fb"]>div:first-child>div {
+    color: #292D1C !important;
+    --jse-key-color: #292D1C !important;
+    background-color: var(--background-color-custom) !important
+}
+
+#left-pane div[data-path="%2Fa%2F%5B0%5D"]:first-child,
+#left-pane div[data-path="%2Fa"]:first-child,
+#left-pane div[data-path="%2Fa%2F%5B1%5D"]:first-child,
+#left-pane div[data-path="%2Fb%2Fc%2Fd"]:first-child,
+#left-pane div[data-path="%2Fb%2Fc"]:first-child,
+#left-pane div[data-path="%2Fb"]:first-child {
+    color: #292D1C !important;
+    --jse-selection-background-inactive-color: var(--background-color-custom) !important
+}
+
+#right-pane div[data-path="%2Fa%2F%5B0%5D"],
+#right-pane div[data-path="%2Fa"],
+#right-pane div[data-path="%2Fa%2F%5B1%5D"],
+#right-pane div[data-path="%2Fb%2Fc%2Fd"],
+#right-pane div[data-path="%2Fb%2Fc"],
+#right-pane div[data-path="%2Fb"] {
+    --background-color-custom: #F6D283
+}
+
+#right-pane div[data-path="%2Fa%2F%5B0%5D"]>div:first-child>div,
+#right-pane div[data-path="%2Fa"]>div:first-child>div,
+#right-pane div[data-path="%2Fa%2F%5B1%5D"]>div:first-child>div,
+#right-pane div[data-path="%2Fb%2Fc%2Fd"]>div:first-child>div,
+#right-pane div[data-path="%2Fb%2Fc"]>div:first-child>div,
+#right-pane div[data-path="%2Fb"]>div:first-child>div {
+    color: #292D1C !important;
+    --jse-key-color: #292D1C !important;
+    background-color: var(--background-color-custom) !important
+}
+
+#right-pane div[data-path="%2Fa%2F%5B0%5D"]:first-child,
+#right-pane div[data-path="%2Fa"]:first-child,
+#right-pane div[data-path="%2Fa%2F%5B1%5D"]:first-child,
+#right-pane div[data-path="%2Fb%2Fc%2Fd"]:first-child,
+#right-pane div[data-path="%2Fb%2Fc"]:first-child,
+#right-pane div[data-path="%2Fb"]:first-child {
+    color: #292D1C !important;
+    --jse-selection-background-inactive-color: var(--background-color-custom) !important
+}
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
   "dependencies": {
     "@nextui-org/react": "1.0.0-beta.13",
     "dequal": "^2.0.3",
+    "dexie": "^3.2.4",
+    "dexie-react-hooks": "^1.1.6",
     "isoworker": "^0.2.4",
     "jsonabc": "github:GrayHat12/jsonabc",
     "localforage": "^1.10.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,8 @@
 import { lazy, Suspense, LazyExoticComponent } from "react";
 import { createHashRouter, RouterProvider } from "react-router-dom";
 import Loading from "./pages/Loading";
-import { AppProvider } from "./context/AppContext";
 import Header from "./components/Header";
-import Drawer from "./components/Drawer";
+// import Drawer from "./components/Drawer";
 import { Outlet } from "react-router-dom";
 import { Grid } from "@nextui-org/react";
 
@@ -22,10 +21,10 @@ export function RootApp() {
     return (
         <>
             <Header>
-                <Grid.Container gap={2} justify="start">
-                    <Grid sm={1}>
+                <Grid.Container gap={1} justify="start">
+                    {/* <Grid sm={1} style={{borderRight: '5px solid white'}}>
                         <Drawer />
-                    </Grid>
+                    </Grid> */}
                     <Grid sm>
                         <Outlet />
                     </Grid>
@@ -62,8 +61,6 @@ const router = createHashRouter([
 
 export default function App() {
     return (
-        <AppProvider>
-            <RouterProvider router={router}></RouterProvider>
-        </AppProvider>
+        <RouterProvider router={router}></RouterProvider>
     );
 }
diff --git a/src/components/ComparisonCard/index.tsx b/src/components/ComparisonCard/index.tsx
@@ -0,0 +1,32 @@
+import { Card, Container, Text } from "@nextui-org/react";
+import { ComparisonMetaData } from "../../context/AppContext";
+import { useNavigate } from "react-router-dom";
+
+export interface ComparsionCardProps {
+    metadata?: ComparisonMetaData;
+};
+
+export default function ComparisonCard(props: ComparsionCardProps) {
+    const navigate = useNavigate();
+
+    function onClick() {
+        if (props.metadata) {
+            navigate(`compare/${props.metadata.id}`)
+        }
+        else {
+            navigate("compare/new");
+        }
+    }
+
+    return (
+        <Container>
+            <Card onClick={onClick} isPressable css={{ w: "inherit", h: "inherit", $$cardColor: props.metadata ? '$colors$primary' : '$colors$secondary' }}>
+                <Card.Body>
+                    <Container css={{ display: "flex", w: "$50", h: "$50", maxH: "$100", maxW: "$100", wordWrap: "break-word" }}>
+                        <Text color="white" h4>{props.metadata?.title || "New Comparison"}</Text>
+                    </Container>
+                </Card.Body>
+            </Card>
+        </Container>
+    );
+}
diff --git a/src/components/Drawer/Drawer.module.css b/src/components/Drawer/Drawer.module.css
@@ -0,0 +1,9 @@
+.card {
+    width: 100px;
+    height: 100px;
+    margin: auto;
+    border-radius: 10px;
+    background: #212121;
+    box-shadow: 1.5px 1.5px 3px rgb(25, 25, 25),
+        -1.5px -1.5px 3px rgb(60, 60, 60);
+}
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
@@ -1,6 +1,9 @@
 import { Card, Container, Text } from "@nextui-org/react";
-import { ComparisonMetaData, useAppContext } from "../../context/AppContext";
+import { ComparisonMetaData } from "../../context/AppContext";
 import { useNavigate } from "react-router-dom";
+import { db as database } from "../../context/db";
+import { useLiveQuery } from "dexie-react-hooks";
+import styles from "./Drawer.module.css";
 
 function generateMockData(items: number) {
     const data = [];
@@ -18,30 +21,40 @@ export interface ComparisonMetaProps {
 }
 
 export function CompareMetaCard(props: ComparisonMetaProps) {
+    console.log('props', props);
     let navigate = useNavigate();
     function navigateToCompare() {
         navigate(`compare/${props.metadata.id}`);
     }
 
+    // return (
+    //     <Card
+    //         onPress={navigateToCompare}
+    //         isPressable
+    //         isHoverable
+    //         variant="bordered"
+    //         css={{ mw: "400px", marginBottom: 20 }}
+    //     >
+    //         <Card.Body css={{ textAlign: "justify" }}>
+    //             <Text>{props.metadata.title}</Text>
+    //         </Card.Body>
+    //     </Card>
+    // );
     return (
-        <Card
-            onPress={navigateToCompare}
-            isPressable
-            isHoverable
-            variant="bordered"
-            css={{ mw: "400px", marginBottom: 20 }}
-        >
-            <Card.Body css={{ textAlign: "justify" }}>
-                <Text>{props.metadata.title}</Text>
-            </Card.Body>
-        </Card>
-    );
+        <div className={styles.card}>
+            <Text>{props.metadata.title}</Text>
+        </div>
+    )
 }
 
 export default function Drawer() {
-    const { savedComparisons } = useAppContext();
+    // const { savedComparisons } = useAppContext();
+    // console.log('saved comparisons', savedComparisons);
     // const savedComparisonsList = savedComparisons.length ? savedComparisons : generateMockData(10);
 
+    const savedComparisons = useLiveQuery(() => database.comparisons.toArray());
+    console.log(savedComparisons);
+
     const myAvlHeight = 1152;
     const usableHeight = 870;
     const usablePercentage = usableHeight / myAvlHeight;
@@ -61,10 +74,10 @@ export default function Drawer() {
                 <Text h5>Saved Comparisons</Text>
             </Container>
             <div style={{ maxHeight: currentAvlHeight, overflowX: "hidden", overflowY: "auto" }}>
-                {savedComparisons.map((meta) => (
-                    <CompareMetaCard key={meta.id} metadata={meta} />
+                {savedComparisons?.map((meta) => (
+                    <CompareMetaCard key={meta.id} metadata={{ id: meta.id as number, title: meta.data.title }} />
                 ))}
-                {savedComparisons.length === 0 && <Text>No Saved Instances</Text>}
+                {savedComparisons?.length === 0 && <Text>No Saved Instances</Text>}
             </div>
         </Container>
     );

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -2,17 +2,18 @@ import { Navbar, Switch, Text } from "@nextui-org/react";
 import AppLogo from "../../assets/vite.svg";
 import Layout from "../Layout";
 import useDarkMode from "use-dark-mode";
+import { Link } from "react-router-dom";
 import { PropsWithChildren } from "react";
 import { PiMoon, PiSunBold } from "react-icons/pi";
 
-interface HeaderProps extends PropsWithChildren {}
+interface HeaderProps extends PropsWithChildren { };
 
 export default function Header(props: HeaderProps) {
     const darkMode = useDarkMode();
     return (
         <Layout content={props.children}>
             <Navbar isCompact isBordered variant="static">
-                <Navbar.Brand>
+                <Navbar.Brand as={Link} to="/" href="/">
                     <img src={AppLogo} alt="Vite Logo" width="32" height="32" />
                     <Text b color="inherit" hideIn="xs">
                         JSON Compare