@riligar/elysia-sqlite 1.1.0

package/src/ui/src/index.css

@@ -0,0 +1,123 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background-color: #ffffff;
+  color: #11181c;
+}
+
+/* Scrollbar - Minimalist */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #e5e7eb;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #d1d5db;
+}
+
+/* Sidebar Overrides (if needed beyond AppShell default) */
+.mantine-AppShell-navbar {
+  background-color: #fafafa !important;
+  border-right: 1px solid #e5e7eb !important;
+}
+
+[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar {
+  background-color: #111111 !important;
+  border-right: 1px solid #222222 !important;
+}
+
+/* Table - Clean Rows */
+.mantine-Table-table {
+  border-collapse: collapse;
+}
+
+.mantine-Table-thead tr th {
+  border-bottom: 1px solid #e5e7eb !important;
+  font-weight: 500;
+  font-size: 12px;
+  color: #687076; /* Secondary text */
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.mantine-Table-tbody tr td {
+  font-size: 13px;
+  color: #11181C;
+  border-bottom: 1px solid #f3f4f6;
+  padding: 8px 16px !important;
+}
+
+.mantine-Table-tbody tr[data-hover]:hover {
+  background-color: #F9FAFB;
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Table-tbody tr td {
+  color: #C1C2C5;
+  border-bottom-color: #2C2E33;
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Table-tbody tr[data-hover]:hover {
+  background-color: #25262B;
+}
+
+/* Editable Cell */
+.editable-cell {
+  padding: 4px 8px;
+  margin: -4px -8px;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+
+.editable-cell:hover {
+  background-color: #f3f4f6;
+  color: #000000;
+}
+
+/* NavLink Styles */
+.mantine-NavLink-root {
+  color: #687076;
+  transition: all 0.2s ease;
+}
+
+.mantine-NavLink-root:hover {
+  background-color: #F9FAFB;
+}
+
+.mantine-NavLink-root[data-active] {
+  background-color: #F3F4F6;
+  color: #11181C;
+}
+
+[data-mantine-color-scheme="dark"] .mantine-NavLink-root {
+  color: #909296;
+}
+
+[data-mantine-color-scheme="dark"] .mantine-NavLink-root:hover {
+  background-color: #25262B;
+}
+
+[data-mantine-color-scheme="dark"] .mantine-NavLink-root[data-active] {
+  background-color: #2C2E33;
+  color: #FFFFFF;
+}

package/src/ui/src/main.jsx

@@ -0,0 +1,115 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { MantineProvider, createTheme } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+import App from "./App";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import "./index.css";
+
+// Notion-inspired theme
+const theme = createTheme({
+  fontFamily: "Montserrat, -apple-system, BlinkMacSystemFont, sans-serif",
+  primaryColor: "dark",
+  defaultRadius: 6,
+  colors: {
+    // Custom monochromatic gray scale from design.md
+    gray: [
+      "#F9FAFB", // 0 - app bg / sidebar (lightest)
+      "#F3F4F6", // 1 - hover
+      "#E5E7EB", // 2 - borders / lines
+      "#D1D5DB", // 3
+      "#9CA3AF", // 4
+      "#6B7280", // 5 - secondary text
+      "#4B5563", // 6
+      "#374151", // 7
+      "#1F2937", // 8
+      "#11181C", // 9 - primary text
+    ],
+    dark: [
+      "#C1C2C5", // 0
+      "#A6A7AB", // 1
+      "#909296", // 2
+      "#5C5F66", // 3
+      "#373A40", // 4
+      "#2C2E33", // 5
+      "#25262B", // 6
+      "#1A1B1E", // 7
+      "#141517", // 8
+      "#101113", // 9
+    ],
+  },
+  components: {
+    Button: {
+      defaultProps: {
+        size: "sm", // 32px height
+      },
+      styles: (theme, params) => ({
+        root: {
+          height: "32px",
+          fontWeight: 500,
+          border:
+            params.variant === "default" ? "1px solid #E5E7EB" : undefined,
+          backgroundColor: params.variant === "filled" ? "#000000" : undefined, // Primary Black
+          color: params.variant === "filled" ? "#FFFFFF" : undefined,
+          "&:hover": {
+            backgroundColor:
+              params.variant === "filled" ? "#2f2f2f" : undefined,
+          },
+        },
+      }),
+    },
+    Table: {
+      defaultProps: {
+        withColumnBorders: false,
+        verticalSpacing: "sm",
+      },
+    },
+    TextInput: {
+      styles: {
+        input: {
+          border: "1px solid #E5E5E5",
+          "&:focus": {
+            borderColor: "#000000",
+          },
+        },
+      },
+    },
+    Modal: {
+      styles: {
+        header: {
+          backgroundColor: "transparent",
+        },
+        content: {
+          boxShadow: "0 4px 20px rgba(0,0,0,0.05)",
+        },
+        overlay: {
+          backdropFilter: "blur(4px)",
+        },
+      },
+    },
+    Badge: {
+      defaultProps: {
+        variant: "light",
+        radius: "sm",
+      },
+    },
+    NavLink: {
+      styles: {
+        root: {
+          borderRadius: 6,
+          fontWeight: 500,
+        },
+      },
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <MantineProvider theme={theme} defaultColorScheme="light">
+      <Notifications position="bottom-right" />
+      <App />
+    </MantineProvider>
+  </React.StrictMode>
+);

package/src/ui/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  base: "./",
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  server: {
+    proxy: {
+      "/admin": {
+        target: "http://localhost:3000",
+        changeOrigin: true,
+      },
+    },
+  },
+});