@genesislcap/pbc-notify-ui 15.8.3 → 15.9.0

package/src/components/foundation-inbox/inbox.template.ts

@@ -261,6 +261,14 @@ export const FoundationInboxTemplate = html<FoundationInbox>`
           </rapid-tab>
         `,
       )}
+      <rapid-tab
+        slot="sounds-tab"
+        id=${InboxTab.SOUNDS}
+        @click=${(x) => x.inboxTabChanged(InboxTab.SOUNDS)}
+        appearance="secondary"
+      >
+        Sounds
+      </rapid-tab>
 
       <!-- Alerts -->
       ${(_) => alertsTab(InboxTab.ALERTS_NEW)} ${(_) => alertsTab(InboxTab.ALERT_HISTORY)}
@@ -372,6 +380,14 @@ export const FoundationInboxTemplate = html<FoundationInbox>`
           </rapid-tab-panel>
         `,
       )}
+      <rapid-tab-panel
+        slot="sounds-tab"
+        class="sounds-tab-panel"
+        id=${InboxTab.SOUNDS}
+        style=${(x) => (x.selectedTab === InboxTab.SOUNDS ? '' : 'display: none;')}
+      >
+        <foundation-sounds-panel ${ref('sounds')}></foundation-sounds-panel>
+      </rapid-tab-panel>
     </rapid-tabs>
   </div>
 `;

package/src/components/foundation-inbox/inbox.types.ts

@@ -9,6 +9,8 @@ export interface Alert {
   NOTIFY_SEVERITY: string;
   TABLE_ENTITY_ID: string;
   TOPIC: string;
+  /** Source notify template/rule that produced this alert. */
+  DYNAMIC_RULE_ID?: string;
 }
 
 export enum AlertStatus {
@@ -87,4 +89,5 @@ export enum InboxTab {
   ALERTS_NEW,
   ALERT_HISTORY,
   SUBSCRIBE,
+  SOUNDS,
 }

package/src/components/foundation-notification-dashboard/alert-sound-attachment.ts

@@ -0,0 +1,283 @@
+import { showNotification } from '@genesislcap/foundation-notifications';
+import { GenesisElement, html, observable, ref, when } from '@genesislcap/web-core';
+import type { RuleService } from '../../services/rule.service';
+import {
+  AlertSoundPlayer,
+  base64ToBlob,
+  blobToBase64,
+  formatBytes,
+  MAX_SOUND_FILE_BYTES,
+  resolveAudioMimeType,
+} from '../../utils/alert-sound';
+
+type Constructor<T = object> = abstract new (...args: any[]) => T;
+
+/** Sound fields included on rule/template create & update event payloads. */
+export type AlertSoundPayloadFields = {
+  ALERT_SOUND_FILE_NAME?: string;
+  ALERT_SOUND_MIME_TYPE?: string;
+  ALERT_SOUND_DATA?: string;
+  CLEAR_ALERT_SOUND?: boolean;
+};
+
+function showAlertSoundNotice(title: string, body: string) {
+  showNotification(
+    {
+      title,
+      body,
+      config: {
+        snackbar: {
+          type: 'error',
+        },
+      },
+    },
+    'rapid',
+  );
+}
+
+/**
+ * Host surface required by {@link alertSoundAttachmentTemplate} and the mixin.
+ * @public
+ */
+export interface AlertSoundAttachmentHost {
+  alertSoundFileName: string;
+  hasAlertSound: boolean;
+  fileInput: HTMLInputElement;
+  openAlertSoundPicker(): void;
+  onAlertSoundSelected(event: Event): void | Promise<void>;
+  testAttachedAlertSound(): void;
+  clearAttachedAlertSound(): void;
+}
+
+/**
+ * Shared Attach/Replace/Test/Clear UI for rule and template dialogs.
+ * @public
+ */
+export const alertSoundAttachmentTemplate = html<AlertSoundAttachmentHost>`
+  <div class="alert-sound">
+    <input
+      ${ref('fileInput')}
+      class="file-input"
+      type="file"
+      accept="audio/*"
+      @change=${(x, c) => x.onAlertSoundSelected(c.event)}
+    />
+    <label>Alert sound</label>
+    <div class="alert-sound-row">
+      <span class="alert-sound-name" title=${(x) => x.alertSoundFileName || ''}>
+        ${(x) => x.alertSoundFileName || 'No sound attached'}
+      </span>
+      <rapid-button appearance="lightweight" @click=${(x) => x.openAlertSoundPicker()}>
+        ${(x) => (x.hasAlertSound ? 'Replace' : 'Attach')}
+      </rapid-button>
+      ${when(
+        (x) => x.hasAlertSound,
+        html<AlertSoundAttachmentHost>`
+          <rapid-button appearance="lightweight" @click=${(x) => x.testAttachedAlertSound()}>
+            Test
+          </rapid-button>
+          <rapid-button appearance="lightweight" @click=${(x) => x.clearAttachedAlertSound()}>
+            Clear
+          </rapid-button>
+        `,
+      )}
+    </div>
+  </div>
+`;
+
+/**
+ * Mixin: pick / test / clear / load server sound + apply fields to submit payload.
+ *
+ * Subclasses must provide {@link ruleService}, {@link isAlertSoundEditMode},
+ * {@link alertSoundEntityId}, and {@link alertSoundCacheSyncMode}.
+ *
+ * @public
+ */
+export function AlertSoundAttachmentMixin<TBase extends Constructor<GenesisElement>>(Base: TBase) {
+  abstract class AlertSoundAttachment extends Base implements AlertSoundAttachmentHost {
+    abstract ruleService: RuleService;
+
+    /**
+     * True when editing an existing entity (clear should set CLEAR_ALERT_SOUND).
+     */
+    abstract get isAlertSoundEditMode(): boolean;
+
+    /**
+     * DYNAMIC_RULE_ID of the entity being edited (null on create).
+     * Used when {@link alertSoundCacheSyncMode} is `'entity'`.
+     */
+    abstract get alertSoundEntityId(): string | null;
+
+    /**
+     * `'entity'` — update/clear cache for {@link alertSoundEntityId} (rules).
+     * `'all'` — drop every cached server sound (templates; instance ids unknown).
+     */
+    abstract get alertSoundCacheSyncMode(): 'entity' | 'all';
+
+    /** Display name of the attached / pending alert sound file. */
+    @observable alertSoundFileName: string = '';
+    @observable alertSoundMimeType: string = '';
+    /** True when edit loaded an existing server sound (or user attached one). */
+    @observable hasAlertSound = false;
+    fileInput: HTMLInputElement;
+    pendingAlertSoundData: string | null = null;
+    /** True when the user picked a new file this session (needs upload). */
+    alertSoundDirty = false;
+    clearAlertSound = false;
+    /** In-progress Test playback; not private — mixin return type is exported. */
+    testAudio: HTMLAudioElement | null = null;
+
+    async loadExistingAlertSound(dynamicRuleId: string) {
+      if (!dynamicRuleId) {
+        return;
+      }
+      const sound = await this.ruleService.getAlertSound(dynamicRuleId);
+      if (!sound?.SOUND_DATA) {
+        return;
+      }
+      this.alertSoundFileName = sound.ALERT_SOUND_FILE_NAME || 'Attached sound';
+      this.alertSoundMimeType = sound.ALERT_SOUND_MIME_TYPE || 'audio/mpeg';
+      this.pendingAlertSoundData = sound.SOUND_DATA;
+      this.hasAlertSound = true;
+      this.alertSoundDirty = false;
+      this.clearAlertSound = false;
+    }
+
+    openAlertSoundPicker() {
+      this.fileInput?.click();
+    }
+
+    async onAlertSoundSelected(event: Event) {
+      const input = event.target as HTMLInputElement;
+      const file = input.files?.[0];
+      input.value = '';
+      if (!file) {
+        return;
+      }
+      if (file.size > MAX_SOUND_FILE_BYTES) {
+        showAlertSoundNotice(
+          'Sound file too large',
+          `Sound file must be ${formatBytes(MAX_SOUND_FILE_BYTES)} or smaller.`,
+        );
+        return;
+      }
+      try {
+        this.pendingAlertSoundData = await blobToBase64(file);
+        this.alertSoundFileName = file.name;
+        this.alertSoundMimeType = resolveAudioMimeType(file.name, file.type);
+        this.hasAlertSound = true;
+        this.alertSoundDirty = true;
+        this.clearAlertSound = false;
+      } catch {
+        showAlertSoundNotice('Could not read sound file', 'The selected file could not be read.');
+      }
+    }
+
+    clearAttachedAlertSound() {
+      this.stopTestSound();
+      this.resetAlertSoundState();
+      this.clearAlertSound = this.isAlertSoundEditMode;
+    }
+
+    testAttachedAlertSound() {
+      this.stopTestSound();
+      if (!this.pendingAlertSoundData) {
+        return;
+      }
+      const blob = base64ToBlob(
+        this.pendingAlertSoundData,
+        this.alertSoundMimeType || 'audio/mpeg',
+      );
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      this.testAudio = audio;
+      void audio.play().catch(() => {
+        showAlertSoundNotice(
+          'Could not play sound',
+          'The browser could not play this file. Try MP3 or WAV.',
+        );
+      });
+      audio.addEventListener(
+        'ended',
+        () => {
+          URL.revokeObjectURL(url);
+          if (this.testAudio === audio) {
+            this.testAudio = null;
+          }
+        },
+        { once: true },
+      );
+    }
+
+    stopTestSound() {
+      if (!this.testAudio) {
+        return;
+      }
+      this.testAudio.pause();
+      const src = this.testAudio.src;
+      if (src.startsWith('blob:')) {
+        URL.revokeObjectURL(src);
+      }
+      this.testAudio = null;
+    }
+
+    resetAlertSoundState() {
+      this.alertSoundFileName = '';
+      this.alertSoundMimeType = '';
+      this.pendingAlertSoundData = null;
+      this.hasAlertSound = false;
+      this.alertSoundDirty = false;
+      this.clearAlertSound = false;
+      if (this.fileInput) {
+        this.fileInput.value = '';
+      }
+    }
+
+    /** Merges pending sound / clear flag onto a create/update DETAILS object. */
+    applyAlertSoundToPayload<T extends AlertSoundPayloadFields>(target: T): T {
+      if (this.clearAlertSound) {
+        target.CLEAR_ALERT_SOUND = true;
+      } else if (this.alertSoundDirty && this.pendingAlertSoundData && this.alertSoundFileName) {
+        target.ALERT_SOUND_FILE_NAME = this.alertSoundFileName;
+        target.ALERT_SOUND_MIME_TYPE = this.alertSoundMimeType;
+        target.ALERT_SOUND_DATA = this.pendingAlertSoundData;
+      }
+      return target;
+    }
+
+    /**
+     * Keep AlertSoundPlayer's in-memory NOTIFY_ALERT_SOUND cache in sync with
+     * what we just saved — otherwise the next alert still plays the old file.
+     */
+    syncAlertSoundCacheAfterSave() {
+      if (this.alertSoundCacheSyncMode === 'all') {
+        if (!this.clearAlertSound && !this.alertSoundDirty) {
+          return;
+        }
+        AlertSoundPlayer.shared.clearAllServerSounds();
+        return;
+      }
+
+      const id = this.alertSoundEntityId?.trim();
+      if (!id) {
+        return;
+      }
+
+      if (this.clearAlertSound) {
+        AlertSoundPlayer.shared.clearServerSound(id);
+        return;
+      }
+
+      if (this.alertSoundDirty && this.pendingAlertSoundData) {
+        const mimeType = this.alertSoundMimeType || 'audio/mpeg';
+        AlertSoundPlayer.shared.setServerSound(id, {
+          blob: base64ToBlob(this.pendingAlertSoundData, mimeType),
+          fileName: this.alertSoundFileName,
+          mimeType,
+        });
+      }
+    }
+  }
+
+  return AlertSoundAttachment;
+}

package/src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.ts

@@ -2,6 +2,7 @@ import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@genesislcap/web-core';
 import { ConditionNode, Severity, UpdateType } from '../../../../../notify.types';
 import { eventDetail } from '../../../../../utils/eventDetail';
+import { alertSoundAttachmentTemplate } from '../../../alert-sound-attachment';
 import type { RuleDialog } from './rule-dialog';
 
 const isGroup = (node: ConditionNode) => Array.isArray((node as any).CHILDREN);
@@ -124,6 +125,8 @@ export const RuleDialogTemplate = html<RuleDialog>`
         </div>
       </div>
 
+      ${alertSoundAttachmentTemplate}
+
       <div class="control">
         <label>Condition(s)</label>
         <div class="items">

package/src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.ts

@@ -11,6 +11,7 @@ import { NotifyService } from '../../../../../services/notify.service';
 import { RuleService } from '../../../../../services/rule.service';
 import { Field, SystemService } from '../../../../../services/system.service';
 import { humanize } from '../../../../../utils';
+import { AlertSoundAttachmentMixin } from '../../../alert-sound-attachment';
 import {
   DynamicRuleUtils,
   RuleUtils,
@@ -32,7 +33,7 @@ import { Rule, RuleDialogMode, RuleDialogParams } from './rule-dialog.types';
   template: RuleDialogTemplate,
   styles: DynamicRuleDialogStyles,
 })
-export class RuleDialog extends GenesisElement {
+export class RuleDialog extends AlertSoundAttachmentMixin(GenesisElement) {
   @RuleService ruleService: RuleService;
   @SystemService systemService: SystemService;
   @NotifyService notifyService: NotifyService;
@@ -60,6 +61,18 @@ export class RuleDialog extends GenesisElement {
   @observable fields: Array<Field> = [];
   @observable topics: string[] = [];
 
+  get isAlertSoundEditMode(): boolean {
+    return this.ruleDialogMode === RuleDialogMode.EDIT;
+  }
+
+  get alertSoundEntityId(): string | null {
+    return this.ruleId;
+  }
+
+  get alertSoundCacheSyncMode(): 'entity' | 'all' {
+    return 'entity';
+  }
+
   public async openDialog(params: RuleDialogParams) {
     this.topics = await this.notifyService.getNotifyRouteTopics();
     this.resources = await this.systemService.getResources();
@@ -80,6 +93,7 @@ export class RuleDialog extends GenesisElement {
   }
 
   close() {
+    this.stopTestSound();
     // Objects
     this.ruleId = null;
     this.name = null;
@@ -90,6 +104,7 @@ export class RuleDialog extends GenesisElement {
     this.topic = null;
     this.severity = null;
     this.ruleDialogMode = null;
+    this.resetAlertSoundState();
 
     // Arrays
     this.resources = [];
@@ -132,6 +147,7 @@ export class RuleDialog extends GenesisElement {
     this.conditions = DynamicRuleUtils.resolveLeftValues(loadedConditions, this.fields);
     this.refreshExpressionPreview();
     this.attributeAssignments(rule.RESULT_EXPRESSION?.ASSIGNMENTS);
+    await this.loadExistingAlertSound(rule.DYNAMIC_RULE_ID);
   }
 
   private refreshExpressionPreview() {
@@ -184,7 +200,7 @@ export class RuleDialog extends GenesisElement {
       DynamicRuleUtils.hasOrJoin(this.conditions) ||
       DynamicRuleUtils.hasGroup(this.conditions) ||
       DynamicRuleUtils.hasUnsupportedOperator(this.conditions);
-    return {
+    const rule: Rule = {
       ...(this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId }),
       RULE_NAME: this.name,
       RULE_DESCRIPTION: this.description,
@@ -205,10 +221,13 @@ export class RuleDialog extends GenesisElement {
         ],
       },
     };
+
+    return this.applyAlertSoundToPayload(rule);
   }
 
   validateResponse(response) {
     if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.syncAlertSoundCacheAfterSave();
       this.close();
       return;
     }

package/src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.types.ts

@@ -1,4 +1,5 @@
 import { UpdateType } from '../../../../../notify.types';
+import type { AlertSoundPayloadFields } from '../../../alert-sound-attachment';
 
 export const RuleDialogMode = {
   CREATE: 'create',
@@ -25,4 +26,12 @@ export type Rule = {
   RESULT_EXPRESSION?: {
     ASSIGNMENTS: Array<any>;
   };
+} & AlertSoundPayloadFields;
+
+export type NotifyAlertSound = {
+  ALERT_SOUND_ID: string;
+  DYNAMIC_RULE_ID: string;
+  ALERT_SOUND_FILE_NAME?: string;
+  ALERT_SOUND_MIME_TYPE?: string;
+  SOUND_DATA: string;
 };

package/src/components/foundation-notification-dashboard/components/rules/rule-management.ts

@@ -1,6 +1,7 @@
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
 import { RuleService } from '../../../../services/rule.service';
+import { AlertSoundPlayer } from '../../../../utils/alert-sound';
 import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { RULE_MANAGEMENT_COLUMNS } from './columns';
 import { RuleDialog } from './rule-dialog/rule-dialog';
@@ -61,7 +62,10 @@ export class RuleManagement extends GenesisElement {
           confirmingActions: [
             {
               label: 'Confirm',
-              action: () => this.ruleService.deleteRule(rule.ID),
+              action: () => {
+                AlertSoundPlayer.shared.clearServerSound(rule.ID);
+                this.ruleService.deleteRule(rule.ID);
+              },
             },
           ],
         },

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.ts

@@ -2,6 +2,7 @@ import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@genesislcap/web-core';
 import { ConditionNode, Severity, UpdateType } from '../../../../../notify.types';
 import { eventDetail } from '../../../../../utils/eventDetail';
+import { alertSoundAttachmentTemplate } from '../../../alert-sound-attachment';
 import type { TemplateDialog } from './template-dialog';
 
 const isGroup = (node: ConditionNode) => Array.isArray((node as any).CHILDREN);
@@ -109,6 +110,8 @@ export const TemplateDialogTemplate = html<TemplateDialog>`
         </div>
       </div>
 
+      ${alertSoundAttachmentTemplate}
+
       <div class="control">
         <label>Condition(s)</label>
         <div class="items">

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.ts

@@ -8,9 +8,11 @@ import {
   UpdateType,
 } from '../../../../../notify.types';
 import { NotifyService } from '../../../../../services/notify.service';
+import { RuleService } from '../../../../../services/rule.service';
 import { Field, SystemService } from '../../../../../services/system.service';
 import { TemplateService } from '../../../../../services/template.service';
 import { humanize, logger } from '../../../../../utils';
+import { AlertSoundAttachmentMixin } from '../../../alert-sound-attachment';
 import {
   DynamicRuleUtils,
   showNotificationError,
@@ -32,10 +34,11 @@ import { ParameterBuilderEntity, Template, TemplateDialogMode } from './template
   template: TemplateDialogTemplate,
   styles: DynamicRuleDialogStyles,
 })
-export class TemplateDialog extends GenesisElement {
+export class TemplateDialog extends AlertSoundAttachmentMixin(GenesisElement) {
   @TemplateService templateService: TemplateService;
   @SystemService systemService: SystemService;
   @NotifyService notifyService: NotifyService;
+  @RuleService ruleService: RuleService;
 
   dialog: Modal;
   @observable templateDialogMode: (typeof TemplateDialogMode)[keyof typeof TemplateDialogMode] =
@@ -64,6 +67,20 @@ export class TemplateDialog extends GenesisElement {
 
   private requiredFields = () => [this.name, this.description, this.header, this.message];
 
+  get isAlertSoundEditMode(): boolean {
+    return this.templateDialogMode === TemplateDialogMode.EDIT;
+  }
+
+  get alertSoundEntityId(): string | null {
+    return this.templateId;
+  }
+
+  get alertSoundCacheSyncMode(): 'entity' | 'all' {
+    // Template sound updates propagate to instance rules by NAME on the server;
+    // bust the whole client cache so those instance ids re-fetch.
+    return 'all';
+  }
+
   public async openDialog(params: any) {
     this.topics = await this.notifyService.getNotifyRouteTopics();
     this.resources = await this.systemService.getResources(); // TODO: Tables + Views
@@ -85,6 +102,7 @@ export class TemplateDialog extends GenesisElement {
   }
 
   close() {
+    this.stopTestSound();
     // Objects
     this.templateId = null;
     this.name = null;
@@ -95,6 +113,7 @@ export class TemplateDialog extends GenesisElement {
     this.topic = null;
     this.severity = null;
     this.templateDialogMode = null;
+    this.resetAlertSoundState();
 
     // Arrays
     this.resources = [];
@@ -139,6 +158,7 @@ export class TemplateDialog extends GenesisElement {
     this.conditions = DynamicRuleUtils.resolveLeftValues(loadedConditions, this.fields);
     this.refreshExpressionPreview();
     this.attributeAssignments(template.RESULT_EXPRESSION?.ASSIGNMENTS);
+    await this.loadExistingAlertSound(template.DYNAMIC_RULE_ID);
   }
 
   private refreshExpressionPreview() {
@@ -203,7 +223,7 @@ export class TemplateDialog extends GenesisElement {
       DynamicRuleUtils.hasOrJoin(this.conditions) ||
       DynamicRuleUtils.hasGroup(this.conditions) ||
       DynamicRuleUtils.hasUnsupportedOperator(this.conditions);
-    return {
+    const template: Template = {
       ...(this.templateDialogMode === TemplateDialogMode.EDIT && {
         DYNAMIC_RULE_ID: this.templateId,
       }),
@@ -227,10 +247,13 @@ export class TemplateDialog extends GenesisElement {
       },
       PARAMETER_DETAILS: useRaw ? {} : TemplateUtils.createParameterDetails(this.parameters),
     };
+
+    return this.applyAlertSoundToPayload(template);
   }
 
   validateResponse(response) {
     if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.syncAlertSoundCacheAfterSave();
       this.close();
       return;
     }

package/src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.types.ts

@@ -1,4 +1,5 @@
 import { UpdateType } from '../../../../../notify.types';
+import type { AlertSoundPayloadFields } from '../../../alert-sound-attachment';
 
 export const TemplateDialogMode = {
   CREATE: 'create',
@@ -26,7 +27,7 @@ export type Template = {
     ASSIGNMENTS: Array<any>;
   };
   PARAMETER_DETAILS: any;
-};
+} & AlertSoundPayloadFields;
 
 export type ParameterBuilderEntity = {
   UUID?: string;

package/src/components/foundation-notification-dashboard/components/templates/template-management.ts

@@ -1,6 +1,7 @@
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
 import { TemplateService } from '../../../../services/template.service';
+import { AlertSoundPlayer } from '../../../../utils/alert-sound';
 import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { TEMPLATE_MANAGEMENT_COLUMNS } from './columns';
 import type { TemplateDialog } from './template-dialog/template-dialog';
@@ -61,7 +62,13 @@ export class TemplateManagement extends GenesisElement {
           confirmingActions: [
             {
               label: 'Confirm',
-              action: () => this.templateService.deleteRuleTemplate(template.ID),
+              action: () => {
+                // Template sounds propagate to instance rules by NAME on the
+                // server; the client cache is keyed by those instance ids, not
+                // template.ID — bust everything so deleted audio stops playing.
+                AlertSoundPlayer.shared.clearAllServerSounds();
+                this.templateService.deleteRuleTemplate(template.ID);
+              },
             },
           ],
         },

package/src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts

@@ -97,7 +97,7 @@ export const DynamicRuleDialogStyles = css`
     display: flex;
     flex-direction: column;
     width: ${String(modalWidthPx)}px;
-    max-height: 500px;
+    max-height: 600px;
     overflow-y: scroll;
     gap: calc(var(--design-unit) * 3px);
     padding: calc(var(--design-unit) * 4px);
@@ -168,5 +168,35 @@ export const DynamicRuleDialogStyles = css`
     min-height: calc(var(--design-unit) * 12px);
     resize: vertical;
   }
+
+  .alert-sound {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+    margin-top: calc(var(--design-unit) * 2px);
+  }
+
+  .alert-sound .file-input {
+    display: none;
+  }
+
+  .alert-sound-row {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+    flex-wrap: wrap;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    padding: calc(var(--design-unit) * 2px);
+  }
+
+  .alert-sound-name {
+    flex: 1;
+    min-width: 120px;
+    color: var(--neutral-foreground-hint);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 // #endregion