admin ui: started color centralization + made sidebar resizable

examples/react/src/App.tsx

@@ -1,14 +1,15 @@
-import { createContext, lazy, useEffect, useState, Suspense, Fragment } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { App } from "bknd";
-import { checksum, secureRandomString } from "bknd/utils";
+import { checksum } from "bknd/utils";
 import { boolean, em, entity, text } from "bknd/data";
 import { SQLocalConnection } from "@bknd/sqlocal";
 import { Route, Router, Switch } from "wouter";
 import IndexPage from "~/routes/_index";
-const Admin = lazy(() => import("~/routes/admin"));
 import { Center } from "~/components/Center";
 import { ClientProvider } from "bknd/client";
 
+const Admin = lazy(() => import("~/routes/admin"));
+
 export default function () {
    const [app, setApp] = useState<App | undefined>(undefined);
    const [hash, setHash] = useState<string>("");

examples/react/src/routes/_index.tsx

@@ -1,12 +1,15 @@
 import { Center } from "~/components/Center";
 import type { App } from "bknd";
 import { useEntityQuery } from "bknd/client";
+import type { SQLocalConnection } from "@bknd/sqlocal/src";
+import { useEffect, useState } from "react";
 
 export default function IndexPage({ app }: { app: App }) {
-   const user = app.getApi().getUser();
+   //const user = app.getApi().getUser();
    const limit = 5;
    const { data: todos, ...$q } = useEntityQuery("todos", undefined, {
       limit,
+      sort: "-id",
    });
    // @ts-ignore
    const total = todos?.body.meta.total || 0;
@@ -29,30 +32,31 @@ export default function IndexPage({ app }: { app: App }) {
                   </div>
                )}
                <div className="flex flex-col gap-3">
-                  {todos?.reverse().map((todo) => (
-                     <div className="flex flex-row" key={String(todo.id)}>
-                        <div className="flex flex-row flex-grow items-center gap-3 ml-1">
-                           <input
-                              type="checkbox"
-                              className="flex-shrink-0 cursor-pointer"
-                              defaultChecked={!!todo.done}
-                              onChange={async () => {
-                                 await $q.update({ done: !todo.done }, todo.id);
+                  {todos &&
+                     [...todos].reverse().map((todo) => (
+                        <div className="flex flex-row" key={String(todo.id)}>
+                           <div className="flex flex-row flex-grow items-center gap-3 ml-1">
+                              <input
+                                 type="checkbox"
+                                 className="flex-shrink-0 cursor-pointer"
+                                 defaultChecked={!!todo.done}
+                                 onChange={async () => {
+                                    await $q.update({ done: !todo.done }, todo.id);
+                                 }}
+                              />
+                              <div className="text-foreground/90 leading-none">{todo.title}</div>
+                           </div>
+                           <button
+                              type="button"
+                              className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
+                              onClick={async () => {
+                                 await $q._delete(todo.id);
                               }}
-                           />
-                           <div className="text-foreground/90 leading-none">{todo.title}</div>
+                           >
+                              ❌
+                           </button>
                         </div>
-                        <button
-                           type="button"
-                           className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
-                           onClick={async () => {
-                              await $q._delete(todo.id);
-                           }}
-                        >
-                           ❌
-                        </button>
-                     </div>
-                  ))}
+                     ))}
                </div>
                <form
                   className="flex flex-row w-full gap-3 mt-2"
@@ -87,6 +91,49 @@ export default function IndexPage({ app }: { app: App }) {
                   )}
                </div>*/}
          </div>
+         <Debug app={app} />
       </Center>
    );
 }
+
+function Debug({ app }: { app: App }) {
+   const [info, setInfo] = useState<any>();
+   const connection = app.em.connection as SQLocalConnection;
+
+   useEffect(() => {
+      (async () => {
+         setInfo(await connection.client.getDatabaseInfo());
+         app.emgr.onAny(
+            async () => {
+               setInfo(await connection.client.getDatabaseInfo());
+            },
+            { mode: "sync", id: "debug" },
+         );
+      })();
+   }, []);
+
+   async function download() {
+      const databaseFile = await connection.client.getDatabaseFile();
+      const fileUrl = URL.createObjectURL(databaseFile);
+
+      const a = document.createElement("a");
+      a.href = fileUrl;
+      a.download = "database.sqlite3";
+      a.click();
+      a.remove();
+
+      URL.revokeObjectURL(fileUrl);
+   }
+
+   return (
+      <div className="flex flex-col gap-2 items-center">
+         <button
+            className="bg-foreground/20 leading-none py-2 px-3.5 rounded-lg text-sm hover:bg-foreground/30 transition-colors cursor-pointer"
+            onClick={download}
+         >
+            Download Database
+         </button>
+         <pre className="text-xs">{JSON.stringify(info, null, 2)}</pre>
+      </div>
+   );
+}