sam/frm.so
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

url scheme done, switch between apps and orgs mostly done

Browse Source
This commit is contained in:
metacryst
2026-01-12 14:10:17 -06:00
parent 434ecac47a
commit 419c8b1151
20 changed files with 406 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ui/_/code/quill.js
View File

@@ -51,12 +51,17 @@ window.setQuery = function(key, value) {
return newUrl;
};
window.navigateTo = function(url) {
window.dispatchEvent(new Event('navigate'));
window.history.pushState({}, '', url);
}
window.setLocation = function(url) {
window.dispatchEvent(new Event('navigate'));
window.history.replaceState({}, '', url);
}
/* $ SELECTOR */
HTMLElement.prototype.$ = function(selector) {
@@ -91,8 +96,6 @@ console.green = function(message) {
}
/* GET CSS VARIABLES FOR DARK OR LIGHT MODE */
window.darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.add(darkMode ? 'dark' : 'light');
window.getColor = function(name) {
const rootStyles = getComputedStyle(document.documentElement);
@@ -815,6 +818,20 @@ window.input = function(placeholder = "", width, height) {
return el
}
window.select = function(cb) {
let el = document.createElement("select")
el.render = cb
quill.render(el)
return el
}
window.option = function(placeholder = "") {
let el = document.createElement("option")
el.innerText = placeholder
quill.render(el)
return el
}
window.label = function(inside) {
let el = document.createElement("label")
if(typeof inside === "string") {
@@ -1034,7 +1051,7 @@ HTMLElement.prototype.onInput = function(cb) {
};
HTMLElement.prototype.onChange = function(cb) {
if(!this.matches('input, textarea, [contenteditable=""], [contenteditable="true"]'))
if(!this.matches('input, textarea, select, [contenteditable=""], [contenteditable="true"]'))
throw new Error("Can't put input event on non-input element!")
this._storeListener("change", cb);
return this;

35
ui/_/code/shared.css
View File

@@ -1,8 +1,10 @@
:root {
--main: var(--brown);
--accent: var(--gold);
--accent2: var(--green);
--main: var(--parchment);
--app: var(--parchment);
--accent: black;
--accent2: black;
--parchment: #FFEBCC;
--gold: #FEBA7D;
--divider: #bb7c36;
--green: #0857265c;
@@ -11,15 +13,15 @@
--brown: #812A18;
--darkbrown: #3f0808;
--house-src: "/_/icons/house.svg";
--nodes-src: "/_/icons/nodes.svg";
--forum-src: "/_/icons/forum.svg";
--people-src: "/_/icons/people.svg";
--house-src: /_/icons/house.svg;
--nodes-src: /_/icons/nodes.svg;
--forum-src: /_/icons/forum.svg;
--people-src: /_/icons/people.svg;
}
@media (prefers-color-scheme: dark) {
:root {
:root.dark {
--main: #000000;
--app: #180404;
--accent: #695b4d;
--accent2: var(--gold);
@@ -28,12 +30,23 @@
--forum-src: /_/icons/forumdark.svg;
--people-src: /_/icons/peopledark.svg;
}
}
:root.red {
--main: var(--red);
--accent: #6a0000;
--app: var(--red);
--accent: black;
--accent2: var(--green);
--house-src: /_/icons/house.svg;
--nodes-src: /_/icons/nodes.svg;
--forum-src: /_/icons/forum.svg;
--people-src: /_/icons/people.svg;
--quill-src: /_/icons/people.svg;
}
:root.public {
--accent: var(--gold);
}
@font-face {

4
ui/_/icons/house.svg
View File

@@ -1,4 +1,4 @@
<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 8.95052V25.6172H23.5V8.95052L12 0.617188L0.5 8.95052Z" stroke="#4C0B00"/>
<path d="M15.8385 25.6169V15.2002H8.17188V25.6169" stroke="#4C0B00"/>
<path d="M0.5 8.95052V25.6172H23.5V8.95052L12 0.617188L0.5 8.95052Z" stroke="black"/>
<path d="M15.8385 25.6169V15.2002H8.17188V25.6169" stroke="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 261 B

After

Width:  |  Height:  |  Size: 257 B

11
ui/_/icons/nodesblack.svg
View File

@@ -1,11 +0,0 @@
<svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14.5" cy="14.5" r="6" stroke="#453C33"/>
<circle cx="26.5" cy="3.5" r="3" stroke="#453C33"/>
<circle cx="8.5" cy="3.5" r="3" stroke="#453C33"/>
<circle cx="3.5" cy="19.5" r="3" stroke="#453C33"/>
<circle cx="26.5" cy="24.5" r="3" stroke="#453C33"/>
<rect x="19.3531" y="10.04" width="6.20598" height="0.5" transform="rotate(-42 19.3531 10.04)" fill="black" stroke="#453C33" stroke-width="0.5"/>
<rect x="11.5018" y="8.76443" width="2.48193" height="0.5" transform="rotate(-118 11.5018 8.76443)" fill="black" stroke="#453C33" stroke-width="0.5"/>
<rect x="8.74289" y="17.7719" width="2.12617" height="0.5" transform="rotate(149 8.74289 17.7719)" fill="black" stroke="#453C33" stroke-width="0.5"/>
<rect x="19.692" y="18.3533" width="5.65271" height="0.5" transform="rotate(43 19.692 18.3533)" fill="black" stroke="#453C33" stroke-width="0.5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 958 B

6
ui/_/icons/people.svg
View File

@@ -1,3 +1,3 @@
<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5208 15.1601C17.867 15.1601 18.9583 16.251 18.9583 17.5966V19.223L18.9498 19.3405C18.6131 21.6429 16.5442 22.75 13.0724 22.75C9.61308 22.75 7.51108 21.6555 7.05733 19.3796L7.04167 19.2209V17.5966C7.04167 16.251 8.13297 15.1601 9.47917 15.1601H16.5208ZM16.5208 16.7844H9.47917C9.03044 16.7844 8.66667 17.1481 8.66667 17.5966V19.1347C8.96977 20.4346 10.3465 21.1257 13.0724 21.1257C15.7981 21.1257 17.113 20.442 17.3333 19.1593V17.5966C17.3333 17.1481 16.9696 16.7844 16.5208 16.7844ZM17.5972 8.66176L23.5625 8.66294C24.9087 8.66294 26 9.75378 26 11.0994V12.7258L25.9915 12.8433C25.6548 15.1457 23.5858 16.2528 20.114 16.2528L19.7729 16.2492C19.4533 15.4764 18.8664 14.8437 18.1278 14.4644C18.6855 14.5737 19.3463 14.6285 20.114 14.6285C22.8398 14.6285 24.1547 13.9448 24.375 12.6621V11.0994C24.375 10.6509 24.0112 10.2872 23.5625 10.2872H17.875C17.875 9.71726 17.7771 9.17014 17.5972 8.66176ZM2.4375 8.66294L8.40282 8.66176C8.25289 9.08541 8.15991 9.53596 8.13309 10.0042L8.125 10.2872H2.4375C1.98877 10.2872 1.625 10.6509 1.625 11.0994V12.6375C1.92811 13.9374 3.30485 14.6285 6.03069 14.6285C6.7046 14.6285 7.29227 14.5867 7.79848 14.5044C7.09349 14.8871 6.53462 15.5039 6.22521 16.2501L6.03069 16.2528C2.57141 16.2528 0.46941 15.1583 0.0156679 12.8824L0 12.7237V11.0994C0 9.75378 1.09131 8.66294 2.4375 8.66294ZM13 6.4972C15.0941 6.4972 16.7917 8.19406 16.7917 10.2872C16.7917 12.3804 15.0941 14.0773 13 14.0773C10.9059 14.0773 9.20833 12.3804 9.20833 10.2872C9.20833 8.19406 10.9059 6.4972 13 6.4972ZM13 8.1215C11.8034 8.1215 10.8333 9.09114 10.8333 10.2872C10.8333 11.4833 11.8034 12.453 13 12.453C14.1966 12.453 15.1667 11.4833 15.1667 10.2872C15.1667 9.09114 14.1966 8.1215 13 8.1215ZM20.0417 0C22.1357 0 23.8333 1.69686 23.8333 3.79004C23.8333 5.88321 22.1357 7.58007 20.0417 7.58007C17.9476 7.58007 16.25 5.88321 16.25 3.79004C16.25 1.69686 17.9476 0 20.0417 0ZM5.95833 0C8.05241 0 9.75 1.69686 9.75 3.79004C9.75 5.88321 8.05241 7.58007 5.95833 7.58007C3.86425 7.58007 2.16667 5.88321 2.16667 3.79004C2.16667 1.69686 3.86425 0 5.95833 0ZM20.0417 1.6243C18.845 1.6243 17.875 2.59393 17.875 3.79004C17.875 4.98614 18.845 5.95577 20.0417 5.95577C21.2383 5.95577 22.2083 4.98614 22.2083 3.79004C22.2083 2.59393 21.2383 1.6243 20.0417 1.6243ZM5.95833 1.6243C4.76172 1.6243 3.79167 2.59393 3.79167 3.79004C3.79167 4.98614 4.76172 5.95577 5.95833 5.95577C7.15495 5.95577 8.125 4.98614 8.125 3.79004C8.125 2.59393 7.15495 1.6243 5.95833 1.6243Z" fill="black"/>
</svg>
<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.4912 0.5C24.6609 0.500107 26.4463 2.29218 26.4463 4.50195C26.4461 5.9638 25.6634 7.24788 24.502 7.94824L23.6514 8.46094L24.5693 8.83887C26.587 9.66866 28.0146 11.6745 28.0146 14.0195V14.5029L28.4541 14.5566C30.4025 14.7942 31.9307 16.4869 31.9307 18.5342C31.9306 19.9965 31.1509 21.2779 29.9912 21.9766L29.1406 22.4893L30.0596 22.8672C32.0762 23.6969 33.5 25.7015 33.5 28.0469V31.4609C33.4998 31.4881 33.4804 31.4983 33.4697 31.499C33.466 31.4988 33.4624 31.4985 33.459 31.4971C33.4553 31.4955 33.4524 31.4944 33.4512 31.4932L33.4482 31.4902L33.4365 31.458V28.0469C33.4365 24.9911 31.019 22.5352 27.9805 22.5352C24.9421 22.5352 22.5225 24.9924 22.5225 28.0469V31.4629C22.5225 31.4743 22.5176 31.4844 22.5117 31.4902C22.5051 31.4967 22.4976 31.4988 22.4902 31.499C22.485 31.4985 22.4784 31.4966 22.4727 31.4912L22.4609 31.4609V28.0469C22.4609 24.9905 20.0379 22.5352 17 22.5352C13.9614 22.5352 11.544 24.9925 11.5439 28.0469V31.4609C11.5439 31.4744 11.5382 31.4841 11.5312 31.4912C11.5246 31.498 11.5191 31.5 11.5137 31.5C11.5104 31.5 11.508 31.4997 11.5049 31.499C11.4948 31.4967 11.4805 31.4846 11.4805 31.4629V28.0488C11.4805 24.9931 9.0629 22.5373 6.02441 22.5371C2.98626 22.5371 0.563477 24.9939 0.563477 28.0488V31.4609C0.563297 31.4882 0.542917 31.4999 0.530273 31.5C0.524251 31.5 0.518186 31.4977 0.511719 31.4912C0.505432 31.4847 0.501504 31.4756 0.500977 31.4629V28.0488C0.500977 25.7039 1.92786 23.7001 3.94531 22.8701L4.86426 22.4912L4.0127 21.9795C2.85121 21.2805 2.06934 19.997 2.06934 18.5352C2.06949 16.4873 3.60107 14.7963 5.55176 14.5586L5.99121 14.5049V14.0205C5.99124 11.6755 7.41775 9.67071 9.43652 8.84082L10.3555 8.46289L9.50391 7.9502C8.34227 7.24961 7.55957 5.96483 7.55957 4.50293C7.55962 2.29286 9.34267 0.502076 11.5137 0.501953H11.5977C13.73 0.546093 15.4668 2.31921 15.4668 4.50195C15.4666 5.96451 14.6864 7.24824 13.5254 7.94824L12.6758 8.46094L13.5938 8.83887C14.9033 9.37789 15.9663 10.4144 16.5479 11.7168L17.0039 12.7393L17.4609 11.7168C18.0426 10.4142 19.1043 9.3778 20.415 8.83887L21.334 8.46094L20.4834 7.94824C19.322 7.24792 18.5402 5.96407 18.54 4.50195C18.54 2.29132 20.3205 0.5 22.4912 0.5ZM11.5127 8.50879C8.47454 8.50879 6.05176 10.9655 6.05176 14.0205V14.5039L6.49219 14.5566C8.44316 14.7921 9.97363 16.4858 9.97363 18.5342C9.9735 19.9963 9.19367 21.2769 8.03418 21.9756L7.18359 22.4883L8.10156 22.8662C9.41094 23.4051 10.4731 24.4415 11.0547 25.7441L11.1865 26.04H11.8369L11.9688 25.7441C12.552 24.4411 13.6128 23.405 14.9219 22.8662L15.8398 22.4883L14.9893 21.9756C13.8297 21.2769 13.0499 19.9963 13.0498 18.5342C13.0498 16.4857 14.5807 14.793 16.5322 14.5566L16.9717 14.5029V14.0205C16.9717 10.9645 14.5521 8.50879 11.5137 8.50879H11.5127ZM22.4902 8.50781C19.4517 8.50781 17.0344 10.9643 17.0342 14.0186V14.5029L17.4736 14.5566C19.4239 14.7945 20.9541 16.4876 20.9541 18.5342C20.954 19.9961 20.173 21.2768 19.0117 21.9756L18.1602 22.4883L19.0791 22.8662C20.3897 23.4051 21.452 24.4414 22.0352 25.7441L22.168 26.04H22.8174L22.9492 25.7441C23.5309 24.4415 24.5929 23.4051 25.9023 22.8662L26.8213 22.4883L25.9697 21.9756C24.8102 21.2769 24.0304 19.9962 24.0303 18.5342C24.0303 16.4856 25.5595 14.793 27.5107 14.5566L27.9512 14.5029V14.0205C27.9512 11.1335 25.7892 8.78398 22.9893 8.53223V8.50781H22.4902ZM6.02344 14.6074C3.8627 14.6074 2.13208 16.3662 2.13184 18.5332C2.13184 20.7012 3.86338 22.4561 6.02344 22.4561C8.18395 22.4559 9.91211 20.7006 9.91211 18.5332C9.91187 16.3669 8.18463 14.6075 6.02344 14.6074ZM16.999 14.6074C14.8379 14.6076 13.1106 16.3669 13.1104 18.5332C13.1104 20.7005 14.8386 22.4559 16.999 22.4561C19.1591 22.4561 20.8916 20.7012 20.8916 18.5332C20.8914 16.3662 19.1598 14.6074 16.999 14.6074ZM27.9795 14.6074C25.8182 14.6075 24.0911 16.3668 24.0908 18.5332C24.0908 20.7006 25.8189 22.456 27.9795 22.4561C30.1404 22.4561 31.8672 20.7004 31.8672 18.5332C31.8669 16.3671 30.1411 14.6074 27.9795 14.6074ZM11.5137 0.579102C9.35372 0.579223 7.62207 2.33401 7.62207 4.50195C7.62232 6.66883 9.35304 8.42761 11.5137 8.42773C13.675 8.42773 15.4031 6.66835 15.4033 4.50195C15.4033 2.3345 13.6743 0.579102 11.5137 0.579102ZM22.4902 0.579102C20.3293 0.579102 18.6025 2.33478 18.6025 4.50195C18.6028 6.66807 20.3287 8.42773 22.4902 8.42773C24.6506 8.42762 26.3835 6.66912 26.3838 4.50195C26.3838 2.33373 24.6499 0.579213 22.4902 0.579102Z" fill="black" stroke="#000000"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

3
ui/_/icons/peopleblack.svg
View File

@@ -1,3 +0,0 @@
<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.4912 0.5C24.6609 0.500107 26.4463 2.29218 26.4463 4.50195C26.4461 5.9638 25.6634 7.24788 24.502 7.94824L23.6514 8.46094L24.5693 8.83887C26.587 9.66866 28.0146 11.6745 28.0146 14.0195V14.5029L28.4541 14.5566C30.4025 14.7942 31.9307 16.4869 31.9307 18.5342C31.9306 19.9965 31.1509 21.2779 29.9912 21.9766L29.1406 22.4893L30.0596 22.8672C32.0762 23.6969 33.5 25.7015 33.5 28.0469V31.4609C33.4998 31.4881 33.4804 31.4983 33.4697 31.499C33.466 31.4988 33.4624 31.4985 33.459 31.4971C33.4553 31.4955 33.4524 31.4944 33.4512 31.4932L33.4482 31.4902L33.4365 31.458V28.0469C33.4365 24.9911 31.019 22.5352 27.9805 22.5352C24.9421 22.5352 22.5225 24.9924 22.5225 28.0469V31.4629C22.5225 31.4743 22.5176 31.4844 22.5117 31.4902C22.5051 31.4967 22.4976 31.4988 22.4902 31.499C22.485 31.4985 22.4784 31.4966 22.4727 31.4912L22.4609 31.4609V28.0469C22.4609 24.9905 20.0379 22.5352 17 22.5352C13.9614 22.5352 11.544 24.9925 11.5439 28.0469V31.4609C11.5439 31.4744 11.5382 31.4841 11.5312 31.4912C11.5246 31.498 11.5191 31.5 11.5137 31.5C11.5104 31.5 11.508 31.4997 11.5049 31.499C11.4948 31.4967 11.4805 31.4846 11.4805 31.4629V28.0488C11.4805 24.9931 9.0629 22.5373 6.02441 22.5371C2.98626 22.5371 0.563477 24.9939 0.563477 28.0488V31.4609C0.563297 31.4882 0.542917 31.4999 0.530273 31.5C0.524251 31.5 0.518186 31.4977 0.511719 31.4912C0.505432 31.4847 0.501504 31.4756 0.500977 31.4629V28.0488C0.500977 25.7039 1.92786 23.7001 3.94531 22.8701L4.86426 22.4912L4.0127 21.9795C2.85121 21.2805 2.06934 19.997 2.06934 18.5352C2.06949 16.4873 3.60107 14.7963 5.55176 14.5586L5.99121 14.5049V14.0205C5.99124 11.6755 7.41775 9.67071 9.43652 8.84082L10.3555 8.46289L9.50391 7.9502C8.34227 7.24961 7.55957 5.96483 7.55957 4.50293C7.55962 2.29286 9.34267 0.502076 11.5137 0.501953H11.5977C13.73 0.546093 15.4668 2.31921 15.4668 4.50195C15.4666 5.96451 14.6864 7.24824 13.5254 7.94824L12.6758 8.46094L13.5938 8.83887C14.9033 9.37789 15.9663 10.4144 16.5479 11.7168L17.0039 12.7393L17.4609 11.7168C18.0426 10.4142 19.1043 9.3778 20.415 8.83887L21.334 8.46094L20.4834 7.94824C19.322 7.24792 18.5402 5.96407 18.54 4.50195C18.54 2.29132 20.3205 0.5 22.4912 0.5ZM11.5127 8.50879C8.47454 8.50879 6.05176 10.9655 6.05176 14.0205V14.5039L6.49219 14.5566C8.44316 14.7921 9.97363 16.4858 9.97363 18.5342C9.9735 19.9963 9.19367 21.2769 8.03418 21.9756L7.18359 22.4883L8.10156 22.8662C9.41094 23.4051 10.4731 24.4415 11.0547 25.7441L11.1865 26.04H11.8369L11.9688 25.7441C12.552 24.4411 13.6128 23.405 14.9219 22.8662L15.8398 22.4883L14.9893 21.9756C13.8297 21.2769 13.0499 19.9963 13.0498 18.5342C13.0498 16.4857 14.5807 14.793 16.5322 14.5566L16.9717 14.5029V14.0205C16.9717 10.9645 14.5521 8.50879 11.5137 8.50879H11.5127ZM22.4902 8.50781C19.4517 8.50781 17.0344 10.9643 17.0342 14.0186V14.5029L17.4736 14.5566C19.4239 14.7945 20.9541 16.4876 20.9541 18.5342C20.954 19.9961 20.173 21.2768 19.0117 21.9756L18.1602 22.4883L19.0791 22.8662C20.3897 23.4051 21.452 24.4414 22.0352 25.7441L22.168 26.04H22.8174L22.9492 25.7441C23.5309 24.4415 24.5929 23.4051 25.9023 22.8662L26.8213 22.4883L25.9697 21.9756C24.8102 21.2769 24.0304 19.9962 24.0303 18.5342C24.0303 16.4856 25.5595 14.793 27.5107 14.5566L27.9512 14.5029V14.0205C27.9512 11.1335 25.7892 8.78398 22.9893 8.53223V8.50781H22.4902ZM6.02344 14.6074C3.8627 14.6074 2.13208 16.3662 2.13184 18.5332C2.13184 20.7012 3.86338 22.4561 6.02344 22.4561C8.18395 22.4559 9.91211 20.7006 9.91211 18.5332C9.91187 16.3669 8.18463 14.6075 6.02344 14.6074ZM16.999 14.6074C14.8379 14.6076 13.1106 16.3669 13.1104 18.5332C13.1104 20.7005 14.8386 22.4559 16.999 22.4561C19.1591 22.4561 20.8916 20.7012 20.8916 18.5332C20.8914 16.3662 19.1598 14.6074 16.999 14.6074ZM27.9795 14.6074C25.8182 14.6075 24.0911 16.3668 24.0908 18.5332C24.0908 20.7006 25.8189 22.456 27.9795 22.4561C30.1404 22.4561 31.8672 20.7004 31.8672 18.5332C31.8669 16.3671 30.1411 14.6074 27.9795 14.6074ZM11.5137 0.579102C9.35372 0.579223 7.62207 2.33401 7.62207 4.50195C7.62232 6.66883 9.35304 8.42761 11.5137 8.42773C13.675 8.42773 15.4031 6.66835 15.4033 4.50195C15.4033 2.3345 13.6743 0.579102 11.5137 0.579102ZM22.4902 0.579102C20.3293 0.579102 18.6025 2.33478 18.6025 4.50195C18.6028 6.66807 20.3287 8.42773 22.4902 8.42773C24.6506 8.42762 26.3835 6.66912 26.3838 4.50195C26.3838 2.33373 24.6499 0.579213 22.4902 0.579102Z" fill="black" stroke="#453C33"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

81
ui/desktop/Home.js
View File

@@ -9,43 +9,49 @@ class Home extends Shadow {
ZStack(() => {
Sidebar()
switch(window.location.pathname) {
case "/":
AppWindow()
AppMenu()
break
case "/app/jobs":
AppWindow("Jobs")
AppMenu("Jobs")
break;
case "/app/messages":
AppWindow("Messages")
AppMenu("Messages")
break;
case "/app/market":
AppWindow("Market")
AppMenu("Market")
break;
case "/app/forum":
AppWindow("Forum")
AppMenu("Forum")
break;
default:
throw new Error("Unknown route!")
}
AppMenu()
AppWindow()
HStack(() => {
// ProfileButton()
// .zIndex(1)
// .cursor("default")
let selected = document.documentElement.className
console.log(selected)
select(() => {
option("")
option("Light").attr({value: "light"})
option("Dark").attr({value: "dark"})
option("Red").attr({value: "red"})
$(`option[value=${selected}]`).selected = "true"
})
.outline("none")
.background("transparent")
.height(2, em)
.color("var(--accent)")
.border("1px solid var(--accent)")
.attr({value: "dark"})
.onChange((e) => {
console.log("onchange")
document.documentElement.className = e.target.value
localStorage.setItem("theme", e.target.value);
const event = new CustomEvent('themechange', {
detail: {}
});
window.dispatchEvent(event)
})
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
a("/signout", "Sign Out")
.background("transparent")
.border(window.location.pathname === "/" ? "1px solid var(--tan)" : "0.5px solid #bb7c36")
.color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
.borderRadius(5, px)
.border("1px solid var(--accent")
.color("var(--accent)")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
@@ -53,15 +59,6 @@ class Home extends Shadow {
this.style.background = ""
}
})
.onNavigate(function () {
if(window.location.pathname === "/") {
this.style.border = "1px solid var(--tan)"
this.style.color = "var(--tan)"
} else {
this.style.border = "0.5px solid #bb7c36"
this.style.color = "var(--accent)"
}
})
})
.gap(1, em)
.xRight(2, em).y(2.3, em)

11
ui/desktop/apps/Dashboard/Dashboard.js Normal file
View File

@@ -0,0 +1,11 @@
class Dashboard extends Shadow {
render() {
VStack(() => {
})
.width(100, pct)
.height(100, pct)
}
}
register(Dashboard)

110
ui/desktop/components/AppMenu.js
View File

@@ -1,17 +1,8 @@
css(`
app-menu img:hover {
opacity: 0.8;
}
`)
register(
class AppMenu extends Shadow {
selected;
constructor(selected) {
super()
this.selected = selected
images = {
"Dashboard": {src: "house-src", size: "1.5em"},
"People": {src: "people-src", size: "1.7em"}
}
render() {
@@ -22,76 +13,49 @@ class AppMenu extends Shadow {
.getPropertyValue("--" + value)
.trim();
}
HStack(() => {
img(cssVariable("house-src"), "1.5em")
img(cssVariable("people-src"), "1.7em")
let currentNetwork = window.currentNetwork
if(!currentNetwork) return
let currentApp = window.currentApp
for(let i = 0; i < currentNetwork.apps.length; i++) {
let app = currentNetwork.apps[i]
img(cssVariable(this.images[app].src), this.images[app].size)
.attr({app: app})
.padding(0.3, em)
.paddingBottom(currentApp === app ? 4 : 5, px)
.borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
.onClick((done) => {
if(done) window.openApp(app)
})
.onHover(function (hovering) {
if(hovering) {
this.style.opacity = 0.8
} else {
this.style.opacity = ""
}
})
}
})
.justifyContent("center")
.gap(3.5, em)
.paddingRight(2, em)
})
.onEvent("themechange", () => {
this.rerender()
})
.onEvent("appchanged", () => {
console.log("event firing successfully")
this.rerender()
})
.position("fixed")
.x(0).yBottom(0)
.width(100, vw)
.paddingVertical(1, em)
.borderTop("0.5px solid var(--accent)")
.onNavigate(() => {
if(window.location.pathname === "/") {
this.styleMaximized()
$("app-window").close()
} else {
this.styleMinimized()
$("app-window").open(this.selected)
}
})
.onAppear(() => {
Array.from(this.querySelectorAll("img")).forEach((el) => {
el.addEventListener("mousedown", (e) => {
el.classList.add("touched")
})
})
window.addEventListener("mouseup", (e) => {
let target = e.target
if(!target.matches("app-menu img")) {
return
}
target.classList.remove("touched")
if(target.classList.contains("selected")) {
this.selected = ""
window.navigateTo("/")
} else {
this.selected = target.innerText
window.navigateTo("/app/" + target.innerText.toLowerCase())
}
})
})
if(this.selected) {
this.styleMinimized()
}
}
styleMaximized() {
$$("app-menu p").forEach((el) => {
el.classList.remove("selected")
})
this.classList.remove("minimized")
$("#divider").style.display = ""
}
styleMinimized() {
$$("app-menu p").forEach((el) => {
if(el.innerText !== this.selected) {
el.classList.remove("selected")
} else {
el.classList.add("selected")
}
})
this.classList.add("minimized")
$("#divider").style.display = "none"
.height(2.5, em)
.paddingVertical(0.7, em)
.borderTop("1px solid var(--accent)")
}
}
, "app-menu")
register(AppMenu, "app-menu")

44
ui/desktop/components/AppWindow.js
View File

@@ -1,3 +1,4 @@
import "../apps/Dashboard/Dashboard.js"
import "../apps/Forum/Forum.js"
import "../apps/Tasks/Tasks.js"
import "../apps/Messages/Messages.js"
@@ -5,16 +6,25 @@ import "../apps/Market/Market.js"
import "../apps/Jobs/Jobs.js"
class AppWindow extends Shadow {
app;
constructor(app) {
super()
this.app = app
calculateWidth() {
let sidebar = $("sidebar-").getBoundingClientRect()
let w = sidebar.width
return w
}
calculateHeight() {
let appmenu = $("app-menu").getBoundingClientRect()
let h = appmenu.height
return h
}
render() {
ZStack(() => {
switch(this.app) {
switch(window.currentApp) {
case "Dashboard":
Dashboard()
break;
case "Forum":
Forum()
break;
@@ -30,25 +40,13 @@ class AppWindow extends Shadow {
}
})
.position("fixed")
.display(this.app ? 'block' : 'none')
.width(100, "vw")
.height(100, "vh")
.background("#591d10")
.x(0)
.y(0)
// .backgroundImage("/_/images/fabric.png")
// .backgroundSize("33vw auto")
.width(window.innerWidth - this.calculateWidth(), px)
.height(window.innerHeight - this.calculateHeight(), px)
.background("var(--app)")
.x(this.calculateWidth(), px)
.yBottom(this.calculateHeight(), px)
.onEvent("appchange", () => this.rerender())
}
open(app) {
this.app = app
this.rerender()
}
close() {
this.style.display = "none"
}
}
register(AppWindow, "app-window")

70
ui/desktop/components/Sidebar.js
View File

@@ -1,47 +1,45 @@
class Sidebar extends Shadow {
currentNetwork = null
render() {
VStack(() => {
img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
.paddingLeft(3, em)
.paddingTop(5, vh)
.onClick(() => {
window.navigateTo("/")
})
img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em", "2.5em")
.marginTop(6, vh)
.marginBottom(2, vh)
let networks = window.profile.networks
for(let i=0; i<networks.length; i++) {
let selected = window.location.pathname.startsWith("/" + networks[i].abbreviation)
img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
.marginTop(3, vh)
.paddingRight(0.5, em)
.paddingLeft(selected ? 9 : 10, px)
.borderLeft(selected ? "1px solid var(--accent)" : "0")
.onHover(function (hovering) {
if(hovering) {
this.style.opacity = 0.8
} else {
this.style.opacity = ""
}
})
.onClick(function (finished) {
if(finished) {
this.setAttribute("selected", "")
this.style.borderLeft = "1px solid var(--accent)"
this.style.paddingLeft = "9px"
}
})
.cursor("default")
}
})
.paddingRight(2, em)
.paddingLeft(1.5, em)
.paddingRight(1, em)
.position("fixed")
.x(0).y(0)
.height(100, vh)
.borderRight("0.5px solid var(--accent)")
.borderRight("1px solid var(--accent)")
.zIndex(3)
.onAppear(async () => {
if(!window.profile) {
window.profile = await this.fetchProfile()
if(profile) {
this.rerender()
}
}
})
}
async fetchProfile() {
try {
const res = await fetch("/profile", {
method: "GET",
credentials: "include",
headers: {
"Content-Type": "application/json"
}
});
if (!res.ok) throw new Error("Failed to fetch profile");
const profile = await res.json();
console.log(profile);
return profile
} catch (err) {
console.error(err);
}
}
}

9
ui/desktop/index.html
View File

@@ -5,6 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/_/icons/quill.svg">
<link rel="stylesheet" href="/_/code/shared.css">
<script>
if(localStorage.getItem("theme")) {
document.documentElement.className = localStorage.getItem("theme")
} else {
if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.className = "dark"
}
}
</script>
<script src="/_/code/quill.js"></script>
<script src="/_/code/zod.js"></script>
<script type="module" src="75820185/index.js"></script>

94
ui/desktop/index.js
View File

@@ -5,4 +5,96 @@ import util from "./util.js"
window.util = util
window.Socket = new Socket()
Home()
window.currentNetwork = ""
window.currentApp = ""
window.addEventListener("navigate", () => {
if(window.currentNetwork !== selectedNetwork()) {
window.currentNetwork = selectedNetwork()
const event = new CustomEvent('networkchanged', {
detail: { name: currentNetwork }
});
window.dispatchEvent(event)
}
if(window.currentApp !== selectedApp()) {
window.currentApp = selectedApp()
const event = new CustomEvent('appchanged', {
detail: { name: window.currentApp }
});
window.dispatchEvent(event)
}
document.title = `${window.currentNetwork.abbreviation} | Parchment`
})
window.selectedNetwork = function () {
const pathname = window.location.pathname;
const firstSegment = pathname.split('/').filter(Boolean)[0] || '';
let networks = window.profile?.networks
for(let i = 0; i < networks.length; i++) {
let network = networks[i]
if(network.abbreviation === firstSegment) {
return network
}
}
}
window.selectedApp = function() {
const pathname = window.location.pathname;
const segments = pathname.split('/').filter(Boolean);
const secondSegment = segments[1] || "";
const capitalized = secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
return capitalized
}
window.openApp = function(appName) {
const appUrl = appName.charAt(0).toLowerCase() + appName.slice(1);
let parts = window.location.pathname.split('/').filter(Boolean);
let newPath = "/" + parts[0] + "/" + appUrl
console.log(newPath)
window.navigateTo(newPath)
// window.history.replaceState({}, '', newPath);
const event = new CustomEvent('appchanged', {
detail: { name: appName }
});
window.dispatchEvent(event)
}
async function getProfile() {
try {
const res = await fetch("/profile", {
method: "GET",
credentials: "include",
headers: {
"Content-Type": "application/json"
}
});
if (!res.ok) throw new Error("Failed to fetch profile");
const profile = await res.json();
console.log(profile);
window.profile = profile
} catch (err) {
console.error(err);
}
}
getProfile().then(() => {
let path = "";
let defaultNetwork = window.profile.networks[0]
if(!selectedNetwork()) {
path += (defaultNetwork.abbreviation + "/")
}
if(!selectedApp()) {
let defaultApp = defaultNetwork.apps[0]
path += defaultApp.toLowerCase()
}
window.navigateTo(path)
Home()
})

2
ui/public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="public">
<head>
<title>Parchment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

4
ui/public/pages/Home.js
View File

@@ -14,7 +14,7 @@ class Home extends Shadow {
.fontFamily("Nabla")
.fontSize(6.5, em)
.marginLeft(1, rem)
.color("var(--accent2)")
.color("var(--accent)")
})
.marginBottom(1, rem)
@@ -24,7 +24,7 @@ class Home extends Shadow {
HStack(() => {
span("The Community OS")
.fontFamily("Canterbury")
.color("var(--accent2)")
.color("var(--accent)")
.fontSize(2.5, em)
.paddingBottom(1, rem)
})