A lot of cosmetic clean up and some code clean up. Also new util functions from old Svelte NPM library.

src/lib/ae_events_functions.ts

@@ -1488,8 +1488,10 @@ function handle_db_save_ae_obj_li__event_file({obj_type, obj_li}) {
 
             try {
                 const id_random = await db_events.files.put({
+                    id: obj.event_file_id_random,
                     id_random: obj.event_file_id_random,
                     event_file_id_random: obj.event_file_id_random,
+
                     hosted_file_id_random: obj.hosted_file_id_random,
                     hash_sha256: obj.hash_sha256, // Renamed with alias in FastAPI model
 
@@ -1549,8 +1551,11 @@ function handle_db_save_ae_obj_li__event_session({obj_type, obj_li}) {
 
             try {
                 const id_random = await db_events.sessions.put({
-                    id_random: obj.event_session_id_random,
+                    id: obj.event_session_id_random,
+                    // id_random: obj.event_session_id_random,
+                    event_session_id: obj.event_session_id_random,
                     event_session_id_random: obj.event_session_id_random,
+
                     external_id: obj.external_id,
                     code: obj.code,
 
@@ -1690,19 +1695,28 @@ function handle_db_save_ae_obj_li__event_presenter({obj_type, obj_li}) {
 
             try {
                 const id_random = await db_events.presenters.put({
-                    id_random: obj.event_presenter_id_random,
+                    id: obj.event_presenter_id_random,
+                    // id_random: obj.event_presenter_id_random,
+                    event_presenter_id: obj.event_presenter_id_random,
                     event_presenter_id_random: obj.event_presenter_id_random,
+
                     external_id: obj.external_id,
                     code: obj.code,
 
                     // for_type: obj.for_type,
                     // for_id_random: obj.for_id_random,
 
+                    event_id: obj.event_id_random,
                     event_id_random: obj.event_id_random,
+                    event_session_id: obj.event_session_id_random,
                     event_session_id_random: obj.event_session_id_random,
-                    event_person_id_random: obj.event_person_id_random,
+                    event_presentation_id: obj.event_presentation_id_random,
                     event_presentation_id_random: obj.event_presentation_id_random,
+                    event_person_id: obj.event_person_id_random,
+                    event_person_id_random: obj.event_person_id_random,
+                    person_id: obj.person_id_random,
                     person_id_random: obj.person_id_random,
+                    person_profile_id: obj.person_profile_id_random,
                     person_profile_id_random: obj.person_profile_id_random, // The new table person_profile will be used soon...
 
                     pronouns: obj.pronouns,
@@ -1742,6 +1756,12 @@ function handle_db_save_ae_obj_li__event_presenter({obj_type, obj_li}) {
                     updated_on: obj.updated_on,
 
                     file_count: obj.file_count,
+
+                    person_given_name: obj.person_given_name,
+                    person_family_name: obj.person_family_name,
+                    person_full_name: obj.person_full_name,
+                    person_primary_email: obj.person_primary_email,
+                    person_passcode: obj.person_passcode,
                 });
                 // console.log(`Put obj with ID: ${obj.event_presenter_id_random} or ${id_random}`);
             } catch (error) {

src/lib/ae_utils.ts

@@ -1,5 +1,9 @@
 import dayjs from 'dayjs';
 
+type key_str = {
+    [key: string]: string;
+};
+
 type key_val = {
     [key: string]: any;
 };
@@ -610,9 +614,6 @@ function count_words(text: string) {
 }
 
 
-
-
-
 /* Adapted from: To Title Case © 2018 David Gouch | https://github.com/gouch/to-title-case */
 
 // eslint-disable-next-line no-extend-native
@@ -660,6 +661,158 @@ function to_title_case (text_string) {
 }
 
 
+// Updated 2024-06-19
+export let shorten_string = function shorten_string(
+        {
+            string,
+            max_length=45,
+            begin_length=15,
+            end_length=5,
+            wildcard_length=3
+        } : {
+            string: string,
+            max_length?: number,
+            begin_length?: number,
+            end_length?: number,
+            wildcard_length?: number
+        }
+        ) {
+    // console.log('*** shorten_filename() ***');
+
+    if (!string || typeof string != 'string') {
+        console.log('Invalid string value passed');
+        return false;
+    }
+
+    // NOTE: max_length is not the actual end result length. The actual max will be 45 characters.
+    // 20 part 1 characters, 5 part 2 characters, 20 part 3 characters
+
+    // let length = string.length;
+    let char_over = string.length-max_length;
+    let new_string = null;
+    let wildcards = char_over;
+    if (char_over > 0) {
+        let part1 = string.slice(0, begin_length);
+
+        let part2 = '';
+        if (char_over > 5) {
+            wildcards = 5;
+        } else {
+        }
+
+        if (wildcard_length) {
+            part2 = '.'.repeat(wildcard_length);
+        } else {
+            part2 = '.'.repeat(wildcards);
+        }
+
+        let part3 = string.slice(end_length*-1);
+
+        new_string = part1+part2+part3;
+    } else {
+        new_string = string;
+    }
+    return new_string;
+}
+
+
+// Updated 2024-06-19
+// This function should return a shorted version of a filename if over the max length. It should always contain at least the first character of the original filename and the complete extension.
+// Example 1: The Original Long File Name.pdf -> The Orig....pdf
+// Example 2: The Original Long File Name.html -> The Ori....html
+function shorten_filename(
+        {
+            filename,
+            max_length=20,
+            slice_end_at=15,
+            max_end_length=5
+        } : {
+            filename: string,
+            max_length?: number,
+            slice_end_at?: number,
+            max_end_length?: number
+        }
+        ) {
+    // console.log('*** shorten_filename() ***');
+
+    if (typeof filename !== 'string' || filename.length <= max_length) {
+        return filename;
+    }
+
+    let new_filename = null;
+    let char_over = filename.length - max_length;
+    let wildcards = char_over - 4; // The number of characters over the max length
+    if (wildcards < 1) {
+        return filename; // No point in changing the filename?
+    }
+
+    let part_1 = filename.slice(0, slice_end_at);
+    if (wildcards > 3) {
+        wildcards = 3;
+    } else {
+    }
+    let part_2 = '.'.repeat(wildcards);
+    let part_3 = filename.slice(max_end_length*-1);
+
+    new_filename = part_1+part_2+part_3;
+
+    return new_filename;
+}
+
+
+// Updated 2024-6-19
+function file_extension_icon(
+        extension: string
+        ) {
+    // console.log('*** file_extension_icon() ***');
+
+    let file_icons: key_str = {
+        'file': 'file',
+        '3gp': 'file-video',
+        '7z': 'file-archive',
+        'aac': 'file-audio',
+        'ac3': 'file-audio',
+        'aif': 'file-audio',
+        'aiff': 'file-audio',
+        'avi': 'file-video',
+        'bmp': 'file-image',
+        'csv': 'file-csv',
+        'doc': 'file-word',
+        'docx': 'file-word',
+        'eps': 'file-image',
+        'flac': 'file-audio',
+        'gif': 'file-image',
+        'htm': 'file-code',
+        'html': 'file-code',
+        'jpeg': 'file-image',
+        'jpg': 'file-image',
+        'key': 'file-powerpoint',
+        'mkv': 'file-video',
+        'mov': 'file-video',
+        'mp3': 'file-audio',
+        'mp4': 'file-video',
+        'odp': 'file-powerpoint',
+        'pdf': 'file-pdf',
+        'png': 'file-image',
+        'ppt': 'file-powerpoint',
+        'pptx': 'file-powerpoint',
+        'txt': 'file-alt',
+        'wav': 'file-audio',
+        'webp': 'file-image',
+        'xls': 'file-excel',
+        'xlsx': 'file-excel',
+        'zip': 'file-archive'
+    };
+
+    if (file_icons[extension]) {
+        return file_icons[extension];
+    } else {
+        // return null;
+        return file_icons['file'];
+    }
+}
+
+
 // Updated 2023-08-18
 function set_obj_prop_display_name({prop_name, obj_type=null, prefix_w_obj_type=true, prefix_all_w_obj_type=false, replace_underscores=true, title_case=true, override=null}) {
     console.log('*** set_obj_prop_display_name() ***');
@@ -850,6 +1003,9 @@ export let ae_util = {
     create_video_element: create_video_element,
     count_words: count_words,
     to_title_case: to_title_case,
+    shorten_string: shorten_string,
+    shorten_filename: shorten_filename,
+    file_extension_icon: file_extension_icon,
     set_obj_prop_display_name: set_obj_prop_display_name,
     return_obj_type_path: return_obj_type_path,
 };

src/lib/db_events.ts

@@ -179,8 +179,10 @@ export interface Exhibit_tracking {
 }
 
 export interface File {
+    id: string;
     id_random: string;
     event_file_id_random: string;
+
     hosted_file_id_random: string;
     hash_sha256: string;
 
@@ -218,27 +220,35 @@ export interface File {
     hosted_file_size: number; // In bytes
 }
 
+// Updated 2024-06-19
 export interface Session {
-    id_random: string;
+    id: string;
+    // id_random: string;
+    event_session_id: string;
     event_session_id_random: string;
-    external_id: string;
+
-    code: string;
+    external_id: null|string;
+    code: null|string;
 
     for_type: string;
+    for_id: string;
     for_id_random: string;
 
     type_code: string;
 
+    event_id: string;
     event_id_random: string;
-    event_location_id_random: string;
+    event_location_id: null|string;
+    event_location_id_random: null|string;
 
-    poc_person_id_random: string;
+    poc_person_id: null|string;
+    poc_person_id_random: null|string;
 
     name: string;
     description: null|string;
 
-    start_datetime: Date;
+    start_datetime: null|Date;
-    end_datetime: Date;
+    end_datetime: null|Date;
 
     passcode: null|string;
 
@@ -259,42 +269,49 @@ export interface Session {
     updated_on: null|Date;
 
     // Additional fields for convenience (database views)
-    file_count: number;
+    file_count: null|number;
 
-    poc_person_given_name: string;
+    poc_person_given_name: null|string;
-    poc_person_family_name: string;
+    poc_person_family_name: null|string;
-    poc_person_full_name: string;
+    poc_person_full_name: null|string;
-    poc_person_primary_email: string;
+    poc_person_primary_email: null|string;
-    poc_person_passcode: string;
+    poc_person_passcode: null|string;
     poc_kv_json: null|string;
 
-    event_location_code: string;
+    event_location_code: null|string;
-    event_location_name: string;
+    event_location_name: null|string;
 }
 
 // Updated 2024-06-10
 export interface Presentation {
+    id: string;
     id_random: string;
+    event_presentation_id: string;
     event_presentation_id_random: string;
-    external_id: string;
+
-    code: string;
+    external_id: null|string;
+    code: null|string;
 
     for_type: string;
+    for_id: string;
     for_id_random: string;
 
     type_code: string;
 
+    event_id: string;
     event_id_random: string;
+    event_session_id: string;
     event_session_id_random: string;
-    event_abstract_id_random: string;
+    event_abstract_id: null|string;
+    event_abstract_id_random: null|string;
 
-    abstract_code: string;
+    abstract_code: null|string;
 
     name: string;
     description: null|string;
 
-    start_datetime: Date;
+    start_datetime: null|Date;
-    end_datetime: Date;
+    end_datetime: null|Date;
 
     hide_event_launcher: null|boolean;
 
@@ -306,21 +323,36 @@ export interface Presentation {
     notes: null|string;
     created_on: Date;
     updated_on: null|Date;
+
+    // Additional fields for convenience (database views)
+    // file_count: null|number;
+
+    event_session_code: null|string;
+    event_session_name: null|string;
 }
 
 // Updated 2024-06-10
 export interface Presenter {
-    id_random: string;
+    id: string;
+    // id_random: string;
+    event_presenter_id: string;
     event_presenter_id_random: string;
+
     external_id: string;
     code: string;
 
+    event_id: string;
     event_id_random: string;
+    event_session_id: string;
     event_session_id_random: string;
-    event_person_id_random: string;
+    event_person_id: null|string;
+    event_person_id_random: null|string;
+    event_presentation_id: string;
     event_presentation_id_random: string;
-    person_id_random: string;
+    person_id: null|string;
-    person_profile_id_random: string; // The new table person_profile will be used soon...
+    person_id_random: null|string;
+    person_profile_id: null|string;
+    person_profile_id_random: null|string; // The new table person_profile will be used soon...
 
     pronouns: null|string;
     informal_name: null|string;
@@ -359,9 +391,13 @@ export interface Presenter {
     updated_on: null|Date;
 
     // Additional fields for convenience (database views)
-    file_count: number;
+    file_count: null|number;
-    person_passcode: string;
+
-    person_primary_email: string;
+    person_given_name: null|string;
+    person_family_name: null|string;
+    person_full_name: null|string;
+    person_primary_email: null|string;
+    person_passcode: null|string;
 }
 
 
@@ -385,7 +421,7 @@ export class MySubClassedDexie extends Dexie {
                 id_random, event_id_random,
                 code, account_id_random,
                 conference, type,
-                name, summary, description,
+                name,
                 start_datetime, end_datetime,
                 timezone, location_address_json,
                 mod_abstracts_json, mod_badges_json, mod_exhibits_json, mod_pres_mgmt_json,
@@ -414,14 +450,17 @@ export class MySubClassedDexie extends Dexie {
                 enable, hide, priority, sort, group, notes, created_on, updated_on`,
 
             sessions: `
-                id_random, event_session_id_random, external_id, code,
+                event_session_id, event_session_id_random,
-                for_type, for_id_random, type_code,
+                external_id, code,
+                for_type, for_id, for_id_random,
+                type_code,
+                event_id, event_location_id,
+                poc_person_id,
                 event_id_random, event_location_id_random,
-                poc_person_id_random, poc_person_given_name, poc_person_family_name, poc_person_full_name, poc_person_primary_email, poc_kv_json,
+                poc_person_id_random,
-                name, description, start_datetime, end_datetime,
+                name, start_datetime, end_datetime,
-                passcode,
                 hide_event_launcher,
-                enable, hide, priority, sort, group, notes, created_on, updated_on`,
+                enable, hide, priority, sort, group, created_on, updated_on`,
 
             files: `
                 id_random, event_file_id_random, hosted_file_id_random, hash_sha256,
@@ -442,12 +481,15 @@ export class MySubClassedDexie extends Dexie {
                 `,
 
             presenters: `
-                id_random, event_presenter_id_random, external_id, code,
+                event_presenter_id, event_presenter_id_random,
+                external_id, code,
+                event_id, event_session_id, event_person_id, event_presentation_id,
                 event_id_random, event_session_id_random, event_person_id_random, event_presentation_id_random,
+                person_id, person_profile_id,
                 person_id_random, person_profile_id_random,
-                pronouns, informal_name, title_names, given_name, middle_name, family_name, designations,
+                given_name, family_name,
-                professional_title, full_name, affiliations, email,
+                full_name, affiliations, email,
-                biography, agree, comments, passcode,
+                agree
                 hide_event_launcher,
                 data_json,
                 enable, hide, priority, sort, group, notes, created_on, updated_on

src/routes/events_pres_mgmt/event/[slug]/+page.svelte

@@ -290,10 +290,12 @@ $: if ($events_trigger == 'load__event_session_obj_li' && $events_slct.event_id)
     <td>
         <a
             href="/events_pres_mgmt/session/{session_obj.event_session_id_random}"
-            class="btn btn-md variant-ghost-secondary hover:variant-filled-secondary"
+            class="btn btn-md variant-ghost-secondary hover:variant-filled-secondary w-full"
             >
             <span class="fas fa-eye mx-1"></span>
+            <span class="grow">
             <strong>{session_obj.name}</strong>
+            </span>
         </a>
     </td>
     <td>

src/routes/events_pres_mgmt/session/[slug]/+page.svelte

@@ -305,14 +305,32 @@ $: if ($slct_trigger == 'load__event_presenter_obj_li') {
 }
 
 
-function send_init_confirm_email({to_email, to_name, person_id, person_passcode, presentation_id, presenter_id, presentation_name}) {
+function send_init_confirm_email(
+        {
+            to_email,
+            to_name,
+            person_id,
+            person_passcode,
+            presentation_id,
+            presenter_id,
+            presentation_name
+        }: {
+            to_email: string,
+            to_name: string,
+            person_id: string,
+            person_passcode: string,
+            presentation_id: string,
+            presenter_id: string,
+            presentation_name: string
+        }
+        ) {
     console.log(`*** send_init_confirm_email() *** to ${to_email}.`);
 
     // to_email = 'test+agree@oneskyit.com';
 
     let sign_in_url = encodeURI(`${data.url.origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${person_id}&person_pass=${person_passcode}&presentation_id=${presentation_id}&presenter_id=${presenter_id}`)
 
-    let subject = `LCI Congress 2024 - Pres Mgmt Hub Sign In Link for ${$lq__event_session_obj.name} (ID: ${$events_slct.event_session_id})`;
+    let subject = `LCI Congress 2024 - Pres Mgmt Hub Sign In Link for ${$lq__event_session_obj?.name} (ID: ${$events_slct.event_session_id})`;
 
     let body_html = `
     <div>${to_name},
@@ -322,8 +340,8 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
     <div>
     <strong>26th Annual Lean Construction Congress (2024)</strong>:<br>
     <p>
-    Session Name: ${$lq__event_session_obj.name}<br>
+    Session Name: ${$lq__event_session_obj?.name}<br>
-    Session ID: ${$lq__event_session_obj.event_session_id_random}<br>
+    Session ID: ${$lq__event_session_obj?.event_session_id_random}<br>
     Presentation Name: ${presentation_name}<br>
     Presentation ID: ${presentation_id}
     </p>
@@ -342,20 +360,19 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
 }
 
 
-function send_sign_in_poc_email({
+function send_sign_in_poc_email(
+        {
             to_email,
             to_name,
             person_id,
             person_passcode,
             session_id,
-            session_name
         }: {
             to_email: string,
             to_name: string,
             person_id: string,
             person_passcode: string,
             session_id: string,
-            session_name: string
         }
         ) {
     console.log(`*** send_sign_in_poc_email() *** to ${to_email}.`);
@@ -400,7 +417,7 @@ function send_sign_in_poc_email({
 
 {#if $events_slct.event_session_id && $lq__event_session_obj}
 
-<h2 class="h2 text-center">{$lq__event_session_obj.name}</h2>
+<h2 class="h2 text-center">{$lq__event_session_obj?.name ?? '-- not set --'}</h2>
 
 <!-- Information about the session -->
 <section>
@@ -455,7 +472,6 @@ function send_sign_in_poc_email({
                             person_id: $lq__event_session_obj.poc_person_id_random,
                             person_passcode: $lq__event_session_obj.poc_person_passcode,
                             session_id: $lq__event_session_obj.event_session_id_random,
-                            session_name: $lq__event_session_obj.name,
                         }
                     );
                 }}
@@ -543,22 +559,28 @@ function send_sign_in_poc_email({
     {/if}
 
     {#if $ae_loc.trusted_access || $events_loc.auth__kv.session[$events_slct.event_session_id] || ($events_loc.auth__kv.presenter[$events_slct.event_presenter_id] &&  $lq__event_presenter_obj?.agree)}
+
+    <div class="min-w-max flex flex-col gap-1">
     <a
-        class="btn btn-md variant-ghost-primary hover:variant-filled-primary"
+        class="btn btn-md variant-ghost-primary hover:variant-filled-primary flex flex-row items-center justify-between min-w-full"
         href="https://static.oneskyit.com/c/LCI/files/LCI_Congress_Template_2024.pptx"
         >
         <span class="fas fa-download mx-1"></span>
+        <span class="text-center grow">
         Download
         LCI Congress Template 2024 (PowerPoint)
+        </span>
     </a>
     <a
-        class="btn btn-md variant-ghost-primary hover:variant-filled-primary"
+        class="btn btn-md variant-ghost-primary hover:variant-filled-primary flex flex-row items-center justify-between min-w-full"
         href="https://static.oneskyit.com/c/LCI/files/LCI_Speaker_and_Champion_Congress_Task_List_2024.xlsx"
         >
         <span class="fas fa-download mx-1"></span>
         Download
         LCI Speaker and Champion Congress Task List (Excel)
     </a>
+    </div>
+
     {:else}
     <span class="text-lg text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100 space-y-2">
         <p><strong>Read and Consent Agreement?</strong></p>
@@ -784,11 +806,13 @@ function send_sign_in_poc_email({
                                         $events_sess.pres_mgmt.show_content__presenter_start = event_presenter_obj.event_presenter_id_random;
                                     }
                                 }
-                                class="btn btn-lg variant-ghost-primary text-lg font-bold min-w-56 hover:variant-filled-primary"
+                                class="btn btn-md variant-ghost-primary hover:variant-filled-primary font-bold min-w-64"
                                 title="Person ID: {event_presenter_obj.person_id_random}; Email: {event_presenter_obj.email}"
                             >
-                                <span class="fas fa-user mx-1"></span>
+                                    <span class="fas fa-user mx-1"></span>
-                                {event_presenter_obj.full_name}
+                                    <span class="text-center grow">
+                                    {event_presenter_obj.full_name}
+                                    </span>
                             </button>
 
 
@@ -947,10 +971,16 @@ function send_sign_in_poc_email({
                 class="space-y-2 px-4"
                 >
             {#each $lq__event_file_obj_li as event_file_obj}
-                {#if (event_file_obj.event_presentation_id_random == event_presentation_obj.event_presentation_id_random && ($ae_loc.trusted_access || $events_loc.auth__kv.presentation[event_presentation_obj.event_presentation_id_random]))}
+                {#if (
+                    event_file_obj.event_presentation_id_random == event_presentation_obj.event_presentation_id_random
+                    && (
+                        $ae_loc.trusted_access
+                        || $events_loc.auth__kv.presentation[event_presentation_obj.event_presentation_id_random]
+                        || $events_loc.auth__kv.session[$events_slct.event_session_id]    // This is the session ID of the person who signed in.
+                    )
+                    )}
                     <li>
                          <button
-                            class="btn btn-md variant-soft-primary"
                             on:click={() => {
                                 // ae_promises[event_file_obj.event_file_id_random]
                                 ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
@@ -964,15 +994,13 @@ function send_sign_in_poc_email({
 
                                 // window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
                             }}
+                            class="btn btn-md variant-soft-primary hover:variant-filled-primary min-w-96"
                             title={`Download this file: ${event_file_obj.filename} [API] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
                             >
                             {#await ae_promises[event_file_obj.event_file_id_random]}
-
+                                <span class="fas fa-spinner fa-spin mx-1"></span>
-                                <span class="mx-1">
+                                <span class="">
-                                    <span class="fas fa-spinner fa-spin mx-1"></span>
-
                                     Downloading
-
                                     {#if $ae_sess.download[`/hosted_file/${event_file_obj.hosted_file_id_random}/download`]}
                                         {$ae_sess.download[`/hosted_file/${event_file_obj.hosted_file_id_random}/download`].percent_completed}%
                                     {/if}
@@ -980,10 +1008,14 @@ function send_sign_in_poc_email({
                                 </span>
                             {:then}
                                 <span class="fas fa-download mx-1"></span>
+                                <span class="text-sm">
                                 Download:
+                                </span>
                             {/await}
 
-                            {event_file_obj.filename.slice(0, 20)}...{event_file_obj.extension}
+                            <span class="grow">
+                            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 25})}
+                            </span>
                         </button>
                     </li>
                 {/if}

src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte

@@ -10,7 +10,7 @@ import { liveQuery } from "dexie";
 const dispatch = createEventDispatcher();
 
 import type { key_val } from '$lib/ae_stores';
-import { ae_util } from '$lib/ae_utils';
+import { ae_util, shorten_string } from '$lib/ae_utils';
 import { api } from '$lib/api';
 import Element_data_store from '$lib/element_data_store.svelte';
 import Element_ae_crud from '$lib/element_ae_crud.svelte';
@@ -435,7 +435,6 @@ WARNING: The file upload and management is a work in progress. You can upload an
                     >{file_obj.filename}</a> -->
 
                 <button
-                    class="btn btn-md variant-soft-primary min-w-96"
                     on:click={() => {
                         // ae_promises[event_file_obj.event_file_id_random]
                         ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
@@ -449,15 +448,13 @@ WARNING: The file upload and management is a work in progress. You can upload an
 
                         // window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
                     }}
+                    class="btn btn-md variant-ghost-primary hover:variant-filled-primary min-w-96"
                     title={`Download this file: ${event_file_obj.filename} [API] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
                     >
                     {#await ae_promises[event_file_obj.event_file_id_random]}
-
+                        <span class="fas fa-spinner fa-spin mx-1"></span>
-                        <span class="mx-1">
+                        <span class="">
-                            <span class="fas fa-spinner fa-spin mx-1"></span>
-
                             Downloading
-
                             {#if $ae_sess.download[`/hosted_file/${event_file_obj.hosted_file_id_random}/download`]}
                                 {$ae_sess.download[`/hosted_file/${event_file_obj.hosted_file_id_random}/download`].percent_completed}%
                             {/if}
@@ -465,10 +462,14 @@ WARNING: The file upload and management is a work in progress. You can upload an
                         </span>
                     {:then}
                         <span class="fas fa-download mx-1"></span>
+                        <span class="text-sm">
                         Download:
+                        </span>
                     {/await}
 
-                    {event_file_obj.filename.slice(0, 20)}...{event_file_obj.extension}
+                    <span class="grow">
+                    {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 25})}
+                    </span>
                 </button>
 
                 <button type="button"