fix(ux): optimize event lists and fix editor line wrapping
- Implemented 'Details' toggle in Session lists to defer expensive presenter/file sub-component renders, improving initial hydration speed. - Fixed line-wrapping for long lines in Journals Editor (both plain textarea and CodeMirror). - Updated TODO.md and GEMINI.md to reflect Journals standardization and performance optimizations.
This commit is contained in:
Scott Idem
@@ -173,17 +173,13 @@
|
||||
/* overflow: auto; */
|
||||
/* background-color: var(--cm-background); */
|
||||
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
text-wrap: wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.codemirror-wrapper :global(.cm-editor) {
|
||||
/* font-size: .8rem; */
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
text-wrap: wrap;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
/* max-width: 100%; */
|
||||
/* max-height: 100%; */
|
||||
|
||||
@@ -77,8 +77,12 @@
|
||||
let ae_tmp: key_val = $state({});
|
||||
let ae_triggers: key_val = $state({});
|
||||
let trigger_reload_session_id: string = $state('');
|
||||
let show_details_kv: Record<string, boolean> = $state({});
|
||||
|
||||
// *** Functions and Logic
|
||||
function toggle_details(id: string) {
|
||||
show_details_kv[id] = !show_details_kv[id];
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- xs:max-w-sm lg:max-w-100 -->
|
||||
@@ -143,74 +147,91 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<a
|
||||
href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
|
||||
class="
|
||||
btn
|
||||
ae_btn_secondary_filled
|
||||
min-w-full max-w-md
|
||||
sm:w-80
|
||||
text-xs/3 sm:text-xs/4 md:text-xs/4 lg:text-sm/4 xl:text-base/5
|
||||
md:max-w-xs
|
||||
sm:btn-sm
|
||||
md:btn-md
|
||||
"
|
||||
title={`Code = ${session_obj?.code}\n${session_obj?.name}\nID = ${session_obj?.event_session_id}\nDay = ${ae_util.iso_datetime_formatter(session_obj?.start_datetime, 'dddd')}\nStart = ${ae_util.iso_datetime_formatter(session_obj?.start_datetime, 'time_12_short')}\nEnd = ${ae_util.iso_datetime_formatter(session_obj?.end_datetime, 'time_12_short')}\nLocation = ${session_obj?.event_location_name}`}
|
||||
>
|
||||
<!-- <span class="fas fa-eye m-0.25 text-xs text-surface-800-200"></span> -->
|
||||
<span
|
||||
class="fas fa-chalkboard-teacher m-0.25 text-xs text-neutral-800/50"
|
||||
></span>
|
||||
<!-- overflow-x-scroll -->
|
||||
<span
|
||||
class="
|
||||
grow overflow-hidden text-wrap text-left
|
||||
max-h-12 sm:max-h-12 md:max-h-9 lg:max-h-12 xl:max-h-16
|
||||
"
|
||||
>
|
||||
<!-- <div> -->
|
||||
<strong>{session_obj?.name}</strong>
|
||||
<!-- </div> -->
|
||||
</span>
|
||||
{#if session_obj?.file_count_all}
|
||||
<span
|
||||
class="badge preset-tonal-success hover:preset-filled-success-500"
|
||||
title="{session_obj?.file_count_all}× files under session"
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<a
|
||||
href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
|
||||
class="
|
||||
btn
|
||||
ae_btn_secondary_filled
|
||||
grow max-w-md
|
||||
text-xs/3 sm:text-xs/4 md:text-xs/4 lg:text-sm/4 xl:text-base/5
|
||||
md:max-w-xs
|
||||
sm:btn-sm
|
||||
md:btn-md
|
||||
"
|
||||
title={`Code = ${session_obj?.code}\n${session_obj?.name}\nID = ${session_obj?.event_session_id}\nDay = ${ae_util.iso_datetime_formatter(session_obj?.start_datetime, 'dddd')}\nStart = ${ae_util.iso_datetime_formatter(session_obj?.start_datetime, 'time_12_short')}\nEnd = ${ae_util.iso_datetime_formatter(session_obj?.end_datetime, 'time_12_short')}\nLocation = ${session_obj?.event_location_name}`}
|
||||
>
|
||||
<span class="fas fa-file-alt mx-1"></span>
|
||||
{session_obj?.file_count_all}×
|
||||
</span>
|
||||
{:else}
|
||||
<!-- Nothing -->
|
||||
<!-- <span class="fas fa-eye m-0.25 text-xs text-surface-800-200"></span> -->
|
||||
<span
|
||||
class="fas fa-chalkboard-teacher m-0.25 text-xs text-neutral-800/50"
|
||||
></span>
|
||||
<!-- overflow-x-scroll -->
|
||||
<span
|
||||
class="
|
||||
grow overflow-hidden text-wrap text-left
|
||||
max-h-12 sm:max-h-12 md:max-h-9 lg:max-h-12 xl:max-h-16
|
||||
"
|
||||
>
|
||||
<!-- <div> -->
|
||||
<strong>{session_obj?.name}</strong>
|
||||
<!-- </div> -->
|
||||
</span>
|
||||
{#if session_obj?.file_count_all}
|
||||
<span
|
||||
class="badge preset-tonal-success hover:preset-filled-success-500"
|
||||
title="{session_obj?.file_count_all}× files under session"
|
||||
>
|
||||
<span class="fas fa-file-alt mx-1"></span>
|
||||
{session_obj?.file_count_all}×
|
||||
</span>
|
||||
{:else}
|
||||
<!-- Nothing -->
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
{#if (show__session_presentations || show__session_files) && $ae_loc.manager_access}
|
||||
<button
|
||||
class="btn btn-icon btn-sm variant-soft-surface"
|
||||
onclick={() => toggle_details(session_obj.event_session_id)}
|
||||
title="Toggle Presenters & Files"
|
||||
>
|
||||
<span class="fas fa-chevron-{show_details_kv[session_obj.event_session_id] ? 'up' : 'down'}"></span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if show_details_kv[session_obj.event_session_id]}
|
||||
<div class="p-2 bg-surface-500/5 rounded-lg border border-surface-500/10 mt-1 animate-fade-in">
|
||||
{#if show__session_presentations && $ae_loc.manager_access}
|
||||
<Comp_event_presenter_obj_li
|
||||
link_to_type={'event_session'}
|
||||
link_to_id={session_obj?.event_session_id}
|
||||
display_mode={'minimal'}
|
||||
{log_lvl}
|
||||
></Comp_event_presenter_obj_li>
|
||||
{/if}
|
||||
|
||||
{#if show__session_files && $ae_loc.manager_access}
|
||||
<Element_manage_event_file_li
|
||||
link_to_type={'event_session'}
|
||||
link_to_id={session_obj?.event_session_id}
|
||||
allow_basic={$events_loc.auth__kv.session[
|
||||
$events_slct.event_session_id
|
||||
] ||
|
||||
$events_loc.auth__kv.presenter[
|
||||
$events_slct.event_presenter_id
|
||||
]}
|
||||
allow_moderator={$events_loc.auth__kv.session[
|
||||
$events_slct.event_session_id
|
||||
]}
|
||||
container_class_li={''}
|
||||
display_mode={'minimal'}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
{#if show__session_presentations && $ae_loc.manager_access}
|
||||
<Comp_event_presenter_obj_li
|
||||
link_to_type={'event_session'}
|
||||
link_to_id={session_obj?.event_session_id}
|
||||
display_mode={'minimal'}
|
||||
{log_lvl}
|
||||
></Comp_event_presenter_obj_li>
|
||||
{/if}
|
||||
|
||||
{#if show__session_files && $ae_loc.manager_access}
|
||||
<Element_manage_event_file_li
|
||||
link_to_type={'event_session'}
|
||||
link_to_id={session_obj?.event_session_id}
|
||||
allow_basic={$events_loc.auth__kv.session[
|
||||
$events_slct.event_session_id
|
||||
] ||
|
||||
$events_loc.auth__kv.presenter[
|
||||
$events_slct.event_presenter_id
|
||||
]}
|
||||
allow_moderator={$events_loc.auth__kv.session[
|
||||
$events_slct.event_session_id
|
||||
]}
|
||||
container_class_li={''}
|
||||
display_mode={'minimal'}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="flex flex-col text-xs lg:text-sm">
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
{:else}
|
||||
<textarea
|
||||
bind:value={tmp_entry_obj.content}
|
||||
class="textarea grow w-full max-w-6xl p-4 font-mono shadow-lg rounded-lg border-orange-500/30 h-[500px]"
|
||||
class="textarea grow w-full max-w-6xl p-4 font-mono shadow-lg rounded-lg border-orange-500/30 h-[500px] whitespace-pre-wrap break-words"
|
||||
placeholder="Edit content..."
|
||||
></textarea>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user