diff --git a/.gitignore b/.gitignore
index 68c6351..58e13d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,7 @@ erl_crash.dump
.lasso-marks-tracker
+
+
+# blak hole
+node_modules
diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..e882a75
Binary files /dev/null and b/bun.lockb differ
diff --git a/gleam.toml b/gleam.toml
index 48103e1..73c39be 100644
--- a/gleam.toml
+++ b/gleam.toml
@@ -1,14 +1,18 @@
name = "okane"
version = "1.0.0"
-# Fill out these fields if you intend to generate HTML documentation or publish
-# your project to the Hex package manager.
-#
-# description = ""
+description = "A bill splitting app"
licences = ["MIT"]
repository = { type = "github", user = "soulsam480", repo = "okane" }
# links = [{ title = "Website", href = "https://gleam.run" }]
-#
+
+[tailwind]
+args = [
+ "--config=tailwind.config.js",
+ "--input=./src/app/css/app.css",
+ "--output=./priv/ui/css/app.css"
+]
+path = "./node_modules/.bin/tailwind"
migrations_dir = "./src/app/db/migrations"
schemafile = "./src/app/db/schema.sql"
@@ -29,6 +33,8 @@ feather = ">= 1.2.0 and < 2.0.0"
decode = ">= 0.3.0 and < 1.0.0"
birl = ">= 1.7.1 and < 2.0.0"
gleam_json = ">= 2.0.0 and < 3.0.0"
+filespy = ">= 0.5.0 and < 1.0.0"
[dev-dependencies]
gleeunit = "~> 1.0.0"
+glailglind = ">= 1.1.3 and < 2.0.0"
diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..f67b2c6
--- /dev/null
+++ b/index.ts
@@ -0,0 +1 @@
+console.log("Hello via Bun!");
\ No newline at end of file
diff --git a/manifest.toml b/manifest.toml
index 57a1a3e..da76753 100644
--- a/manifest.toml
+++ b/manifest.toml
@@ -15,9 +15,11 @@ packages = [
{ name = "filepath", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "EFB6FF65C98B2A16378ABC3EE2B14124168C0CE5201553DE652E2644DCFDB594" },
{ name = "filespy", version = "0.5.0", build_tools = ["gleam"], requirements = ["fs", "gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "filespy", source = "hex", outer_checksum = "F8E7A9C9CA86D68CCC25491125BFF36BEF7483892D7BEC24AA30D6B540504F06" },
{ name = "fs", version = "8.6.1", build_tools = ["rebar3"], requirements = [], otp_app = "fs", source = "hex", outer_checksum = "61EA2BDAEDAE4E2024D0D25C63E44DCCF65622D4402DB4A2DF12868D1546503F" },
+ { name = "glailglind", version = "1.1.3", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_http", "gleam_httpc", "gleam_stdlib", "shellout", "simplifile", "tom"], otp_app = "glailglind", source = "hex", outer_checksum = "4617C93C84172CF99EC05B4706720098A0BF299539DD58DD3D90DB2BF2B472F8" },
{ name = "gleam_crypto", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_crypto", source = "hex", outer_checksum = "8AE56026B3E05EBB1F076778478A762E9EB62B31AEEB4285755452F397029D22" },
{ name = "gleam_erlang", version = "0.27.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "DE468F676D71B313C6C8C5334425CFCF827837333F8AB47B64D8A6D7AA40185D" },
{ name = "gleam_http", version = "3.7.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "EA66440C2269F7CED0F6845E5BD0DB68095775D627FA709A841CA78A398D6D56" },
+ { name = "gleam_httpc", version = "2.3.0", build_tools = ["gleam"], requirements = ["gleam_http", "gleam_stdlib"], otp_app = "gleam_httpc", source = "hex", outer_checksum = "CF6CDD88830CC9853F7638ECC0BE7D7CD9522640DA5FAB4C08CFAC8DEBD08028" },
{ name = "gleam_json", version = "2.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "CB10B0E7BF44282FB25162F1A24C1A025F6B93E777CCF238C4017E4EEF2CDE97" },
{ name = "gleam_otp", version = "0.12.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BFACC1513410DF5A1617169A9CD7EA334973AC71D860A17574BA7B2EADD89A6F" },
{ name = "gleam_stdlib", version = "0.40.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86606B75A600BBD05E539EB59FABC6E307EEEA7B1E5865AFB6D980A93BCB2181" },
@@ -47,6 +49,8 @@ cake = { version = "~> 2.0.1" }
decode = { version = ">= 0.3.0 and < 1.0.0" }
dot_env = { version = "~> 1.2.0" }
feather = { version = ">= 1.2.0 and < 2.0.0" }
+filespy = { version = ">= 0.5.0 and < 1.0.0" }
+glailglind = { version = ">= 1.1.3 and < 2.0.0" }
gleam_erlang = { version = "~> 0.27.0" }
gleam_http = { version = "~> 3.7.0" }
gleam_json = { version = ">= 2.0.0 and < 3.0.0" }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e4465d8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "okane",
+ "type": "module",
+ "devDependencies": {
+ "@types/bun": "latest",
+ "tailwindcss": "^3.4.14"
+ },
+ "peerDependencies": {
+ "typescript": "^5.0.0"
+ },
+ "dependencies": {
+ "daisyui": "^4.12.14"
+ }
+}
diff --git a/priv/ui/components/login.html b/priv/ui/components/login.html
new file mode 100644
index 0000000..eeeb3db
--- /dev/null
+++ b/priv/ui/components/login.html
@@ -0,0 +1,9 @@
+
+
+
diff --git a/priv/ui/css/index.css b/priv/ui/css/index.css
new file mode 100644
index 0000000..906acd0
--- /dev/null
+++ b/priv/ui/css/index.css
@@ -0,0 +1,852 @@
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
+}
+
+/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ /* 1 */
+ border-width: 0;
+ /* 2 */
+ border-style: solid;
+ /* 2 */
+ border-color: #e5e7eb;
+ /* 2 */
+}
+
+::before,
+::after {
+ --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+ line-height: 1.5;
+ /* 1 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+ -moz-tab-size: 4;
+ /* 3 */
+ -o-tab-size: 4;
+ tab-size: 4;
+ /* 3 */
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ /* 4 */
+ font-feature-settings: normal;
+ /* 5 */
+ font-variation-settings: normal;
+ /* 6 */
+ -webkit-tap-highlight-color: transparent;
+ /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+ margin: 0;
+ /* 1 */
+ line-height: inherit;
+ /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+ height: 0;
+ /* 1 */
+ color: inherit;
+ /* 2 */
+ border-top-width: 1px;
+ /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ /* 1 */
+ font-feature-settings: normal;
+ /* 2 */
+ font-variation-settings: normal;
+ /* 3 */
+ font-size: 1em;
+ /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+ font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+ text-indent: 0;
+ /* 1 */
+ border-color: inherit;
+ /* 2 */
+ border-collapse: collapse;
+ /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ /* 1 */
+ font-feature-settings: inherit;
+ /* 1 */
+ font-variation-settings: inherit;
+ /* 1 */
+ font-size: 100%;
+ /* 1 */
+ font-weight: inherit;
+ /* 1 */
+ line-height: inherit;
+ /* 1 */
+ letter-spacing: inherit;
+ /* 1 */
+ color: inherit;
+ /* 1 */
+ margin: 0;
+ /* 2 */
+ padding: 0;
+ /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+ text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+ -webkit-appearance: button;
+ /* 1 */
+ background-color: transparent;
+ /* 2 */
+ background-image: none;
+ /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+ outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+ vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+ display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+fieldset {
+ margin: 0;
+ padding: 0;
+}
+
+legend {
+ padding: 0;
+}
+
+ol,
+ul,
+menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+ padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+ resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ opacity: 1;
+ /* 1 */
+ color: #9ca3af;
+ /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+ /* 1 */
+ color: #9ca3af;
+ /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+ cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+ cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+ This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: block;
+ /* 1 */
+ vertical-align: middle;
+ /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+ max-width: 100%;
+ height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+ display: none;
+}
+
+:root,
+[data-theme] {
+ background-color: var(--fallback-b1,oklch(var(--b1)/1));
+ color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+
+@supports not (color: oklch(0% 0 0)) {
+ :root {
+ color-scheme: light;
+ --fallback-p: #491eff;
+ --fallback-pc: #d4dbff;
+ --fallback-s: #ff41c7;
+ --fallback-sc: #fff9fc;
+ --fallback-a: #00cfbd;
+ --fallback-ac: #00100d;
+ --fallback-n: #2b3440;
+ --fallback-nc: #d7dde4;
+ --fallback-b1: #ffffff;
+ --fallback-b2: #e5e6e6;
+ --fallback-b3: #e5e6e6;
+ --fallback-bc: #1f2937;
+ --fallback-in: #00b3f0;
+ --fallback-inc: #000000;
+ --fallback-su: #00ca92;
+ --fallback-suc: #000000;
+ --fallback-wa: #ffc22d;
+ --fallback-wac: #000000;
+ --fallback-er: #ff6f70;
+ --fallback-erc: #000000;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ --fallback-p: #7582ff;
+ --fallback-pc: #050617;
+ --fallback-s: #ff71cf;
+ --fallback-sc: #190211;
+ --fallback-a: #00c7b5;
+ --fallback-ac: #000e0c;
+ --fallback-n: #2a323c;
+ --fallback-nc: #a6adbb;
+ --fallback-b1: #1d232a;
+ --fallback-b2: #191e24;
+ --fallback-b3: #15191e;
+ --fallback-bc: #a6adbb;
+ --fallback-in: #00b3f0;
+ --fallback-inc: #000000;
+ --fallback-su: #00ca92;
+ --fallback-suc: #000000;
+ --fallback-wa: #ffc22d;
+ --fallback-wac: #000000;
+ --fallback-er: #ff6f70;
+ --fallback-erc: #000000;
+ }
+ }
+}
+
+html {
+ -webkit-tap-highlight-color: transparent;
+}
+
+* {
+ scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
+}
+
+*:hover {
+ scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
+}
+
+:root {
+ color-scheme: light;
+ --in: 72.06% 0.191 231.6;
+ --su: 64.8% 0.150 160;
+ --wa: 84.71% 0.199 83.87;
+ --er: 71.76% 0.221 22.18;
+ --pc: 89.824% 0.06192 275.75;
+ --ac: 15.352% 0.0368 183.61;
+ --inc: 0% 0 0;
+ --suc: 0% 0 0;
+ --wac: 0% 0 0;
+ --erc: 0% 0 0;
+ --rounded-box: 1rem;
+ --rounded-btn: 0.5rem;
+ --rounded-badge: 1.9rem;
+ --animation-btn: 0.25s;
+ --animation-input: .2s;
+ --btn-focus-scale: 0.95;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.5rem;
+ --p: 49.12% 0.3096 275.75;
+ --s: 69.71% 0.329 342.55;
+ --sc: 98.71% 0.0106 342.55;
+ --a: 76.76% 0.184 183.61;
+ --n: 32.1785% 0.02476 255.701624;
+ --nc: 89.4994% 0.011585 252.096176;
+ --b1: 100% 0 0;
+ --b2: 96.1151% 0 0;
+ --b3: 92.4169% 0.00108 197.137559;
+ --bc: 27.8078% 0.029596 256.847952;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ --in: 72.06% 0.191 231.6;
+ --su: 64.8% 0.150 160;
+ --wa: 84.71% 0.199 83.87;
+ --er: 71.76% 0.221 22.18;
+ --pc: 13.138% 0.0392 275.75;
+ --sc: 14.96% 0.052 342.55;
+ --ac: 14.902% 0.0334 183.61;
+ --inc: 0% 0 0;
+ --suc: 0% 0 0;
+ --wac: 0% 0 0;
+ --erc: 0% 0 0;
+ --rounded-box: 1rem;
+ --rounded-btn: 0.5rem;
+ --rounded-badge: 1.9rem;
+ --animation-btn: 0.25s;
+ --animation-input: .2s;
+ --btn-focus-scale: 0.95;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.5rem;
+ --p: 65.69% 0.196 275.75;
+ --s: 74.8% 0.26 342.55;
+ --a: 74.51% 0.167 183.61;
+ --n: 31.3815% 0.021108 254.139175;
+ --nc: 74.6477% 0.0216 264.435964;
+ --b1: 25.3267% 0.015896 252.417568;
+ --b2: 23.2607% 0.013807 253.100675;
+ --b3: 21.1484% 0.01165 254.087939;
+ --bc: 74.6477% 0.0216 264.435964;
+ }
+}
+
+[data-theme=light] {
+ color-scheme: light;
+ --in: 72.06% 0.191 231.6;
+ --su: 64.8% 0.150 160;
+ --wa: 84.71% 0.199 83.87;
+ --er: 71.76% 0.221 22.18;
+ --pc: 89.824% 0.06192 275.75;
+ --ac: 15.352% 0.0368 183.61;
+ --inc: 0% 0 0;
+ --suc: 0% 0 0;
+ --wac: 0% 0 0;
+ --erc: 0% 0 0;
+ --rounded-box: 1rem;
+ --rounded-btn: 0.5rem;
+ --rounded-badge: 1.9rem;
+ --animation-btn: 0.25s;
+ --animation-input: .2s;
+ --btn-focus-scale: 0.95;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.5rem;
+ --p: 49.12% 0.3096 275.75;
+ --s: 69.71% 0.329 342.55;
+ --sc: 98.71% 0.0106 342.55;
+ --a: 76.76% 0.184 183.61;
+ --n: 32.1785% 0.02476 255.701624;
+ --nc: 89.4994% 0.011585 252.096176;
+ --b1: 100% 0 0;
+ --b2: 96.1151% 0 0;
+ --b3: 92.4169% 0.00108 197.137559;
+ --bc: 27.8078% 0.029596 256.847952;
+}
+
+[data-theme=dark] {
+ color-scheme: dark;
+ --in: 72.06% 0.191 231.6;
+ --su: 64.8% 0.150 160;
+ --wa: 84.71% 0.199 83.87;
+ --er: 71.76% 0.221 22.18;
+ --pc: 13.138% 0.0392 275.75;
+ --sc: 14.96% 0.052 342.55;
+ --ac: 14.902% 0.0334 183.61;
+ --inc: 0% 0 0;
+ --suc: 0% 0 0;
+ --wac: 0% 0 0;
+ --erc: 0% 0 0;
+ --rounded-box: 1rem;
+ --rounded-btn: 0.5rem;
+ --rounded-badge: 1.9rem;
+ --animation-btn: 0.25s;
+ --animation-input: .2s;
+ --btn-focus-scale: 0.95;
+ --border-btn: 1px;
+ --tab-border: 1px;
+ --tab-radius: 0.5rem;
+ --p: 65.69% 0.196 275.75;
+ --s: 74.8% 0.26 342.55;
+ --a: 74.51% 0.167 183.61;
+ --n: 31.3815% 0.021108 254.139175;
+ --nc: 74.6477% 0.0216 264.435964;
+ --b1: 25.3267% 0.015896 252.417568;
+ --b2: 23.2607% 0.013807 253.100675;
+ --b3: 21.1484% 0.01165 254.087939;
+ --bc: 74.6477% 0.0216 264.435964;
+}
+
+@keyframes button-pop {
+ 0% {
+ transform: scale(var(--btn-focus-scale, 0.98));
+ }
+
+ 40% {
+ transform: scale(1.02);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes checkmark {
+ 0% {
+ background-position-y: 5px;
+ }
+
+ 50% {
+ background-position-y: -2px;
+ }
+
+ 100% {
+ background-position-y: 0;
+ }
+}
+
+@keyframes modal-pop {
+ 0% {
+ opacity: 0;
+ }
+}
+
+@keyframes progress-loading {
+ 50% {
+ background-position-x: -115%;
+ }
+}
+
+@keyframes radiomark {
+ 0% {
+ box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
+ 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset;
+ }
+
+ 50% {
+ box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset,
+ 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset;
+ }
+
+ 100% {
+ box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
+ 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
+ }
+}
+
+@keyframes rating-pop {
+ 0% {
+ transform: translateY(-0.125em);
+ }
+
+ 40% {
+ transform: translateY(-0.125em);
+ }
+
+ 100% {
+ transform: translateY(0);
+ }
+}
+
+@keyframes skeleton {
+ from {
+ background-position: 150%;
+ }
+
+ to {
+ background-position: -50%;
+ }
+}
+
+@keyframes toast-pop {
+ 0% {
+ transform: scale(0.9);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
diff --git a/priv/ui/js/boot.js b/priv/ui/js/boot.js
new file mode 100644
index 0000000..882b211
--- /dev/null
+++ b/priv/ui/js/boot.js
@@ -0,0 +1,18 @@
+/**
+ * @param {string} path
+ */
+async function load_component(path) {
+ await import(path).then((comp) => {
+ console.log("LOG", comp);
+ });
+}
+
+// console.log(okane);
+
+// window.sprae.effect(() => {
+// console.log("SOME");
+
+// if (window.okane.user === null) {
+// console.log("JE::P");
+// }
+// });
diff --git a/src/app/controllers/home.gleam b/src/app/controllers/home.gleam
deleted file mode 100644
index 737fc67..0000000
--- a/src/app/controllers/home.gleam
+++ /dev/null
@@ -1,22 +0,0 @@
-import gleam/http.{Get}
-import gleam/string_builder
-import wisp.{type Request, type Response}
-
-fn show(_req: Request) -> Response {
- // The home page can only be accessed via GET requests, so this middleware is
- // used to return a 405: Method Not Allowed response for all other methods.
- // use <- wisp.require_method(req, Get)
-
- let html = string_builder.from_string("Welcome to Okane")
-
- wisp.ok()
- |> wisp.html_body(html)
-}
-
-pub fn controller(req: Request) -> Response {
- case req.method {
- Get -> show(req)
-
- _ -> wisp.method_not_allowed([Get])
- }
-}
diff --git a/src/app/controllers/sessions.gleam b/src/app/controllers/sessions.gleam
index f3f5978..5b559d7 100644
--- a/src/app/controllers/sessions.gleam
+++ b/src/app/controllers/sessions.gleam
@@ -1,6 +1,6 @@
import app/config
import app/db/models/user
-import app/hooks/auth
+import app/lib/auth_cookie
import app/serializers/base_serializer
import app/serializers/user_serializer
import gleam/http
@@ -50,7 +50,7 @@ fn handle_login(req: Request, ctx: config.Context) -> Response {
// read it when looking for user in auth hook
wisp.ok()
|> wisp.json_body(user_serializer.run(user))
- |> auth.set_cookie(req, user)
+ |> auth_cookie.set_cookie(req, user)
}
False -> {
@@ -99,7 +99,7 @@ fn handle_register(req: Request, ctx: config.Context) {
Ok(new_user) -> {
wisp.ok()
|> wisp.json_body(user_serializer.run(new_user))
- |> auth.set_cookie(req, new_user)
+ |> auth_cookie.set_cookie(req, new_user)
}
}
}
diff --git a/src/app/css/app.css b/src/app/css/app.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/app/css/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/app/css/tailwind.gleam b/src/app/css/tailwind.gleam
new file mode 100644
index 0000000..bbf022e
--- /dev/null
+++ b/src/app/css/tailwind.gleam
@@ -0,0 +1,52 @@
+import filespy
+import gleam/list
+import gleam/string
+import tailwind
+import wisp
+
+pub fn build() {
+ wisp.log_info("[HOT CSS]: starting tailwind build....")
+
+ let _ =
+ [
+ "--config=tailwind.config.js", "--input=./src/app/css/app.css",
+ "--output=./priv/ui/css/index.css",
+ ]
+ |> tailwind.run()
+
+ wisp.log_info("[HOT CSS]: done building css with tailwind.")
+}
+
+pub fn start() {
+ // 1. build tailwind on start
+ build()
+
+ // 2. watch and rebuild on further changes
+ let _ =
+ filespy.new()
+ |> filespy.add_dir("./src/app/css")
+ |> filespy.add_dir("./priv/ui")
+ |> filespy.set_handler(fn(path, event) {
+ let is_path =
+ !string.ends_with(path, "index.css")
+ && {
+ [".gleam", ".css", ".html"]
+ |> list.any(fn(el) { string.ends_with(path, el) })
+ }
+
+ case event {
+ filespy.Closed | filespy.Closed -> {
+ case is_path {
+ True -> build()
+ _ -> Nil
+ }
+ }
+ _ -> Nil
+ }
+
+ Nil
+ })
+ |> filespy.start()
+
+ Nil
+}
diff --git a/src/app/hooks/auth.gleam b/src/app/hooks/auth.gleam
index d9a03c2..87359a2 100644
--- a/src/app/hooks/auth.gleam
+++ b/src/app/hooks/auth.gleam
@@ -1,23 +1,19 @@
import app/config
import app/db/models/user
+import app/lib/auth_cookie
import app/lib/response_helpers
import app/serializers/base_serializer
+import gleam/option
import gleam/result
import wisp
-pub const cookie_max_age = 604_800
-
-pub const cookie_name = "__session"
-
-pub fn get_cookie(
+fn get_cookie(
req: wisp.Request,
with: fn(String) -> wisp.Response,
) -> wisp.Response {
- let cookie_res = wisp.get_cookie(req, cookie_name, wisp.Signed)
-
- case cookie_res {
- Ok(c) -> with(c)
- Error(_) -> {
+ case auth_cookie.get_cookie(req) {
+ option.Some(c) -> with(c)
+ option.None -> {
response_helpers.unauthorized()
|> wisp.json_body(base_serializer.serialize_error(
"Invalid token or token not found",
@@ -26,17 +22,6 @@ pub fn get_cookie(
}
}
-pub fn set_cookie(res: wisp.Response, req: wisp.Request, user: user.User) {
- wisp.set_cookie(
- res,
- req,
- cookie_name,
- user.email,
- wisp.Signed,
- cookie_max_age,
- )
-}
-
/// session/auth hook
/// 1. check if cookie is present
/// 2. find user if there and put it inside context
@@ -46,6 +31,8 @@ pub fn hook(
ctx: config.Context,
handle: fn(config.Context) -> wisp.Response,
) -> wisp.Response {
+ // TODO: re-use user inside ctx
+
use user_email <- get_cookie(req)
user.find_by_email(user_email, ctx.db)
diff --git a/src/app/hooks/hook.gleam b/src/app/hooks/hook.gleam
index 221ed32..941a3b9 100644
--- a/src/app/hooks/hook.gleam
+++ b/src/app/hooks/hook.gleam
@@ -1,5 +1,6 @@
import app/config.{type Context}
import app/hooks/auth
+import app/hooks/ui
import wisp
pub fn hook_on(
@@ -19,6 +20,10 @@ pub fn hook_on(
// Rewrite HEAD requests to GET requests and return an empty body.
use req <- wisp.handle_head(req)
+ // serve UI
+ // NOTE: this will add user to context if present
+ use ctx <- ui.hook(req, ctx)
+
case wisp.path_segments(req) {
["auth"] -> {
use auth_ctx <- auth.hook(req, ctx)
diff --git a/src/app/hooks/ui.gleam b/src/app/hooks/ui.gleam
new file mode 100644
index 0000000..b9f9645
--- /dev/null
+++ b/src/app/hooks/ui.gleam
@@ -0,0 +1,102 @@
+import app/config
+import app/db/models/user
+import app/lib/auth_cookie
+import app/serializers/user_serializer
+import gleam/json
+import gleam/option
+import gleam/result
+import gleam/string_builder
+import wisp
+
+fn make_ssr_data(user: option.Option(user.User)) {
+ json.object([
+ #("user", case user {
+ option.Some(u) -> user_serializer.to_json(u)
+ _ -> json.null()
+ }),
+ ])
+ |> json.to_string_builder
+}
+
+fn app_shell(user: option.Option(user.User)) {
+ string_builder.new()
+ |> string_builder.append(
+ "
+
+
+
+
+
+ Okane | A Bill splitting app
+
+
+
+
+
+
+
+
+ ",
+ )
+ |> string_builder.append_builder(make_ssr_data(user))
+ |> string_builder.append(
+ "
+
+
+
+",
+ )
+}
+
+/// this hook handles UI and related redirects
+/// 1. render app shell with SSR'ed user session
+/// 2. serve ui from priv/ui
+pub fn hook(
+ req: wisp.Request,
+ ctx: config.Context,
+ handle: fn(config.Context) -> wisp.Response,
+) -> wisp.Response {
+ let assert Ok(priv) = wisp.priv_directory("okane")
+
+ use <- wisp.serve_static(req, "/", priv <> "/ui")
+
+ let user_email = auth_cookie.get_cookie(req)
+
+ // TODO: find ways to improve this
+ let user =
+ user_email
+ |> option.to_result(Nil)
+ |> result.map(fn(email) {
+ user.find_by_email(email, ctx.db) |> result.replace_error(Nil)
+ })
+ |> result.flatten
+ |> option.from_result
+
+ case wisp.path_segments(req) {
+ [] -> {
+ wisp.ok() |> wisp.html_body(app_shell(user))
+ }
+ _ ->
+ handle(case user {
+ option.Some(u) -> config.set_user(ctx, u)
+ _ -> ctx
+ })
+ }
+}
diff --git a/src/app/lib/auth_cookie.gleam b/src/app/lib/auth_cookie.gleam
new file mode 100644
index 0000000..0b350e2
--- /dev/null
+++ b/src/app/lib/auth_cookie.gleam
@@ -0,0 +1,22 @@
+import app/db/models/user
+import gleam/option
+import wisp
+
+pub const cookie_max_age = 604_800
+
+pub const cookie_name = "__session"
+
+pub fn get_cookie(req: wisp.Request) -> option.Option(String) {
+ wisp.get_cookie(req, cookie_name, wisp.Signed) |> option.from_result
+}
+
+pub fn set_cookie(res: wisp.Response, req: wisp.Request, user: user.User) {
+ wisp.set_cookie(
+ res,
+ req,
+ cookie_name,
+ user.email,
+ wisp.Signed,
+ cookie_max_age,
+ )
+}
diff --git a/src/app/lib/logger.gleam b/src/app/lib/logger.gleam
index e59ff2e..3276d95 100644
--- a/src/app/lib/logger.gleam
+++ b/src/app/lib/logger.gleam
@@ -1,5 +1,5 @@
import wisp
pub fn info(message: String) {
- wisp.log_notice("[Okane]: " <> message)
+ wisp.log_info("[Okane]: " <> message)
}
diff --git a/src/app/router.gleam b/src/app/router.gleam
index b2853d1..f0a778d 100644
--- a/src/app/router.gleam
+++ b/src/app/router.gleam
@@ -1,5 +1,4 @@
import app/config
-import app/controllers/home
import app/controllers/sessions
import app/controllers/users
import app/hooks/hook
@@ -9,8 +8,6 @@ pub fn handle_request(req: Request, ctx: config.Context) -> Response {
use req, ctx <- hook.hook_on(req, ctx)
case wisp.path_segments(req) {
- [] -> home.controller(req)
-
["sessions", ..session_segments] ->
sessions.controller(req, ctx |> config.scope_to(session_segments))
diff --git a/src/app/serializers/user_serializer.gleam b/src/app/serializers/user_serializer.gleam
index cdec199..841262f 100644
--- a/src/app/serializers/user_serializer.gleam
+++ b/src/app/serializers/user_serializer.gleam
@@ -2,16 +2,20 @@ import app/db/models/user
import app/serializers/base_serializer
import gleam/json
-/// here we can do many things. taking inspirations from rails serializers
-/// 1. control visibility of attributes
-/// 2. computed attributes that are only needed during response
-/// 3. calling and serializing sub queries
-pub fn run(user: user.User) {
+pub fn to_json(user: user.User) {
json.object([
#("id", json.int(user.id)),
#("email", json.string(user.email)),
#("name", json.string(user.name)),
#("created_at", json.string(user.created_at)),
])
+}
+
+/// here we can do many things. taking inspirations from rails serializers
+/// 1. control visibility of attributes
+/// 2. computed attributes that are only needed during response
+/// 3. calling and serializing sub queries
+pub fn run(user: user.User) {
+ to_json(user)
|> base_serializer.wrap
}
diff --git a/src/dev.gleam b/src/dev.gleam
new file mode 100644
index 0000000..c3072ad
--- /dev/null
+++ b/src/dev.gleam
@@ -0,0 +1,28 @@
+import app/css/tailwind
+import gleam/list
+import gleam/result
+import gleam/string
+import radiate
+import wisp
+
+pub fn run() -> Nil {
+ tailwind.start()
+
+ let _ =
+ radiate.new()
+ |> radiate.add_dir("src")
+ //TODO: handle mac
+ // |> radiate.add_dir(".")
+ |> radiate.on_reload(fn(_, path) {
+ wisp.log_info(
+ "[HOT RELOAD]: "
+ <> path
+ |> string.split("/")
+ |> list.last()
+ |> result.unwrap("unknown"),
+ )
+ })
+ |> radiate.start()
+
+ Nil
+}
diff --git a/src/okane.gleam b/src/okane.gleam
index 8c5d42a..e98ed5e 100644
--- a/src/okane.gleam
+++ b/src/okane.gleam
@@ -2,12 +2,11 @@ import app/config
import app/db/connection
import app/db/migrator
import app/router
+import dev
import dot_env
import dot_env/env
import gleam/erlang/process
-import gleam/io
import mist
-import radiate
import wisp
import wisp/wisp_mist
@@ -15,28 +14,16 @@ pub fn main() {
// load env vars
dot_env.load_default()
+ // This sets the logger to print INFO level logs, and other sensible defaults
+ // for a web application.
+ wisp.configure_logger()
+
// only enable hot-reload in dev
case env.get_string_or("MODE", "dev") {
- "dev" -> {
- let _ =
- radiate.new()
- |> radiate.add_dir("src")
- |> radiate.add_dir(".")
- |> radiate.on_reload(fn(_state, path) {
- io.println("Change in " <> path <> ", reloading!")
- })
- |> radiate.start()
-
- Nil
- }
-
+ "dev" -> dev.run()
_ -> Nil
}
- // This sets the logger to print INFO level logs, and other sensible defaults
- // for a web application.
- wisp.configure_logger()
-
let assert Ok(_) = migrator.migrate_to_latest()
use db <- connection.with_connection()
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..d09b78f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("daisyui")],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..238655f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ // Enable latest features
+ "lib": ["ESNext", "DOM"],
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleDetection": "force",
+ "jsx": "react-jsx",
+ "allowJs": true,
+
+ // Bundler mode
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+
+ // Best practices
+ "strict": true,
+ "skipLibCheck": true,
+ "noFallthroughCasesInSwitch": true,
+
+ // Some stricter flags (disabled by default)
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noPropertyAccessFromIndexSignature": false
+ }
+}