diff --git a/documentation/OLD_README_guidelines_ui_ux.md b/documentation/OLD_README_guidelines_ui_ux.md new file mode 100644 index 00000000..650e3a3e --- /dev/null +++ b/documentation/OLD_README_guidelines_ui_ux.md @@ -0,0 +1,137 @@ +# AE UI Components, Layout, and Style Standards (HTML/CSS) + +## Aether Components + +### System Components + +- [header] +- [main/module]s +- [footer] +- [app] refresh, clear IDB, clear local storage (settings), iframe toggle (also updates URL param), copy URL, generate and show QR +- [menu][mode] edit, more (all or details) +- [menu][access_type] passcode input, clear +- [menu][user] sign in/out, reset password, email link, change username and email +- [menu][theme] mode (light/dark), name (theme list) +- [debug] toggle (also updates URL param), show core and module storages, manually set init timestamp +- [scroll_to] top, page up, page down, bottom + +### Core Components + +- [copy_btn] clipboard, bind:value, btn_text, btn_html +- [txt_editor] textarea +- [md_editor] CodeMirror, ShadEditor TipTap (need to remove) +- [html_editor] +- [media_player] + - hosted_file archive_content media_player, + - bind:host_id, + - bind:media_type + - status - stopped, paused, playing +- [hosted_file_li] manage_hosted_file_li, make available for selection +- [hosted_file_link_to] list links per object, bind:add link, bind:remove link +- [upload_to_host] - input_hosted_file; needs to handle multiple files + - link_type, + - link_id, + - inner fragment - label html + - bind:trigger + - bind:show_spinner + - bind:show_percent + - status + - result - started, uploading, finished +- [upload_file_tbl] input_hosted_file_tbl, check for dup file hash, remove from list +- [download_from_host] + - bind:host_file_id + - bind:filename + - bind:file_ext + - btn inner fragment + - bind:trigger + - bind:show_spinner + - bind:show_percent + - status + - result - started, downloading, finished +- [data_store] +- [ae_crud] need to simplify! obj, prop, current_value, bind:value, bind:trigger, inner fragment +- [ae_obj_prop_val] - essentially a wrapper for the function + - bind:obj_type + - bind:obj_id + - bind:obj_prop + - bind:obj_value + - bind:obj_new_value + - bind:trigger + - bind:show_spinner + - bind:show_percent + - status + - result +- [sql_qry] +- [obj_tbl] obj sql results tbl or similar +- [qr_scanner] +- [websocket] + +### Main / Module Components + +- [menu][options] various settings, show/hide content and options, limit, sorting options, etc +- [menu][actions] various actions, sign in/out, email + +### Object Menu + +- properties: id, name, group, priority, sort, alert, hide, enable, note +- future properties: ext_id (not ready yet), ext_sys_id (not ready yet), code (not ready yet) +- actions: create, view, edit, update, hide, disable, delete, alert (message), archive (not ready yet) +- future actions: copy, import +- sort options: + - [default] group > priority > sort (ASC/DESC) > alert > name + - [sort_updated] group > priority > sort (ASC/DESC) > alert > updated_on > created_on + - [priority_updated] group > priority > updated_on (ASC/DESC) > created_on + - [priority_name] group > priority > name (ASC/DESC) > sort > alert > updated_on > created_on + - [name] priority > name (ASC/DESC) > sort > alert > updated_on > created_on + - [created_on] priority > created_on (ASC/DESC) + - [updated_on] priority > updated_on (ASC/DESC) > created_on + +### Pop-ups: + +- modal_header + - title + - close +- modal_main +- modal_meta +- modal_footer + - close + +#### Pop-up Modal (blocking) + +- modal position + +#### Pop-up Modal Inline + +- inline, inline-block, block + +#### Pop-up Dialog + +- dialog position + +## Containers + +### Navigation + +- link +- download + +### Forms + +- save +- clear value +- set null value + +### Other Containers + +- help - blue +- info - blue +- alert - yellow +- warning - orange +- error - red +- message - green + +--- + +## Need to organize: + +- lu: id, account_id, for_obj_id, code, name, description, group, sort, priority, enable, perm_level diff --git a/documentation/OLD_README_guidelines_v1.md b/documentation/OLD_README_guidelines_v1.md new file mode 100644 index 00000000..82f4192b --- /dev/null +++ b/documentation/OLD_README_guidelines_v1.md @@ -0,0 +1,80 @@ +# One Sky IT's Aether App - UI and UX Guidelines and Rules + +## General + +### Events + +#### layout header + +#### layout footer + +### Journals + +#### buttons + +##### alert + +##### info + +##### priority, flag + +##### warning, hide + +```css +variant-soft-warning hover:variant-filled-warning +``` + +##### error, delete, disable + +```css +variant-soft-error hover:variant-filled-error +``` + +#### new root layout header + +#### submenu + +```css +flex flex-row items-center justify-center gap-1 +``` + +#### new layout footer + +## Svelte 5 and SvelteKit v2 (framework and routing) + +## Tailwind 3.x CSS (styles) + +Waiting to upgrade to 4.x when ShadCN is ready. ShadCN is still being worked on as of late March 2025. + +- https://ui.shadcn.com/docs/tailwind-v4 + +## CodeMirror 6.x (text and code editor) + +- https://codemirror.net + +## ShadCN (Tailwind Components) + +- https://ui.shadcn.com/docs +- https://github.com/shadcn-ui/ui + +## Skeleton (Design System, Tailwind Components, Functional Components) + +Waiting to upgrade to Skeleton v3. Mostly because of the Tailwind 4.x upgrade needed for ShadCN. + +- https://www.skeleton.dev/docs/get-started/migrate-from-v2 + +## Flowbite (Tailwind Components) + +## Lucide Icons (SVG Icons) + +- https://lucide.dev/icons/ + +## Markdown + +Using marked for Markdown parsing. + +- https://marked.js.org/ + +## Edra (TipTap based Rich Text Editor) + +- https://edra.tsuzat.com/ diff --git a/documentation/OLD_README_guidelines_v2.md b/documentation/OLD_README_guidelines_v2.md new file mode 100644 index 00000000..e167724e --- /dev/null +++ b/documentation/OLD_README_guidelines_v2.md @@ -0,0 +1,173 @@ +# AE Svelte and SvelteKit Technical Standards + +## Official Modules + +### Core + +- Accounts - Minimal +- Files +- People - Minimal +- Sites - Minimal +- Users - Minimal + +### Extended + +Archives - Minimal, Events - Badges, Events - Presentation Management, Posts - Minimal, Journals + +### Custom + +IDAA - Archives, IDAA - BB, IDAA - Recovery Meetings + +--- + +## localStorage: + +- api +- app - global +- core - core modules +- [module] - extended modules +- [custom] - custom modules + +--- + +## Indexed DB + +- ae_core_db +- [module] +- [custom] - custom modules: none currently + +--- + +## Data Sorting + +- group > priority > sort > updated/created on +- type > start date/time > code or name + +--- + +## Objects + +### Function - Obj Prop Update + +- obj_type +- obj_id +- obj_prop +- obj_value + +### Core + +### Extended + +### Custom + +--- + +## Object Properties or Fields + +### Core + +Expected standard field names: id, id_random, [obj-type]\_id_random, code, name, enable, hide, priority, sort, group, notes, created_on, updated_on +Special use field names: for_type, for_id, archive_on, passcode, external_id + +### Configs and Fields with JSON + +- cfg_json +- data_json +- linked_li_json + +### Special Generated Fields + +tmp_sort_1, tmp_sort_2, + +### Future standard fields!!! + +obj_id?: null|string; +obj_ext_uid?: null|string; // Probably not needed for journals +obj_ext_id?: null|string; // Probably not needed for journals +obj_import_id?: null|string; // Probably not needed for journals +obj_code?: null|string; +obj_account_id?: null|string; +obj_passcode?: null|string; +obj_type?: null|string; // Should always be 'journal' in this case +obj_type_ver_id?: null|string; // The ID from the table for the object type +obj_name?: null|string; +obj_summary?: null|string; // LLM (AI) generated summary...??? +obj_outline?: null|string; // LLM (AI) generated outline...??? +obj_description?: null|string; // Probably not needed for journals +obj_enable?: null|boolean; +obj_enable_on?: null|Date; +obj_archive_on?: null|Date; +obj_hide?: null|boolean; +obj_priority?: null|number; +obj_sort?: null|number; +obj_group?: null|string; +obj_cfg_json?: null|string; +obj_notes?: null|string; +obj_created_on?: Date; +obj_updated_on?: null|Date; + +## Dixie IDB liveQuery with Select Objects (slct) and Lists of Objects (slct_x_li) + +Use this method below to create a read/write snapshot of the current liveQuery results. This allows you to use it as part of a form and binding values. It might make since to call this something like "lqw**x_obj" and "lqw**x_obj_li". lqw = liveQuery writable + +lq**xyz_obj - Use for general read only +lqw**xyz_obj - Use for forms and binding values. What happens if the actual LQ obj is updated after the bind? +$slct or $lqw ? + +Sort of related.... more permission/security though: Create a new table that will be attached to every v\_ view in the DB. This new table would be a field permission list. It could work similar to the data_store table and related view. This seems like a good idea????? 2025-08-11 + +```ts +let lq__post_obj = $derived( + liveQuery(async () => { + if (log_lvl) { + console.log(`lq__post_obj: post_id = ${$idaa_slct?.post_id}`); + } + let results = await db_posts.post.get($idaa_slct.post_id ?? ''); // null or undefined does not reset things like '' does + + // Check if results are different than the current $idaa_slct.post_obj + if ($idaa_slct.post_obj && results) { + if (JSON.stringify($idaa_slct.post_obj) !== JSON.stringify(results)) { + $idaa_slct.post_obj = { ...results }; + if (log_lvl) { + console.log(`$idaa_slct.post_obj = `, $idaa_slct.post_obj); + } + } else { + if (log_lvl) { + console.log(`Post object has not changed for post_id: ${$idaa_slct.post_id}`); + } + } + } + + return results; + }) +); + +let lq__post_comment_obj_li = $derived( + liveQuery(async () => { + let results = await db_posts.comment + .where('post_id') + .equals($idaa_slct.post_id ?? '') // null or undefined does not reset things like '' does + .reverse() + .sortBy('updated_on'); + // .sortBy('title'); + + if ( + $idaa_slct.post_comment_obj_li && + JSON.stringify($idaa_slct.post_comment_obj_li) !== JSON.stringify(results) + ) { + $idaa_slct.post_comment_obj_li = [...results]; + if (log_lvl) { + console.log(`$idaa_slct.post_comment_obj_li = `, $idaa_slct.post_comment_obj_li); + } + } else { + if (log_lvl) { + console.log( + `Post comment object list has not changed for post_id: ${$idaa_slct.post_id}` + ); + } + } + + return results; + }) +); +``` diff --git a/src/routes/events/ae_comp__event_presentation_obj_li.svelte b/src/routes/events/ae_comp__event_presentation_obj_li.svelte index 01b708a3..c7c9a2a6 100644 --- a/src/routes/events/ae_comp__event_presentation_obj_li.svelte +++ b/src/routes/events/ae_comp__event_presentation_obj_li.svelte @@ -55,7 +55,7 @@