@fleetbase/ember-ui 0.3.4 → 0.3.6

package/addon/components/activity-log.hbs

@@ -0,0 +1,137 @@
+<div class="activity-log w-full space-y-4" ...attributes>
+    <div class="flex items-center justify-between {{@headerWrapperClass}}">
+        <div class="text-sm font-semibold tracking-wider uppercase text-gray-500 dark:text-gray-400">{{t "common.activity"}}</div>
+        <div class="flex flex-row items-center space-x-2">
+            <div>
+                {{yield to="filters"}}
+                <DatePicker
+                    @value={{this.dateFilter}}
+                    @onSelect={{this.setDateFilter}}
+                    @placeholder={{t "common.filter-by-field" field=(t "common.date")}}
+                    @range={{true}}
+                    @toggleSelected={{@toggleSelected}}
+                    @autoClose={{@autoClose}}
+                    @buttons={{@dateFilterButtons}}
+                    class="filter-date-input form-input-sm w-44"
+                />
+            </div>
+            <Button @size="sm" @icon="refresh" @helpText={{t "common.refresh"}} @isLoading={{this.loadActivities.isRunning}} @onClick={{this.reload}} />
+        </div>
+    </div>
+
+    {{#each this.groups as |group|}}
+        <section class={{@groupClass}}>
+            <header class="mb-3 flex items-center gap-3">
+                <div class="text-[10px] {{@groupLabelClass}} font-semibold tracking-wider uppercase text-gray-500 dark:text-gray-400">
+                    {{group.dateLabel}}
+                </div>
+                <div class="flex-1 border-t border-gray-200 dark:border-gray-800"></div>
+            </header>
+
+            <ol class="relative ml-3 pl-6">
+                <span class="absolute left-0 top-0 h-full w-px bg-gray-200 dark:bg-gray-800"></span>
+
+                {{#each group.items as |item|}}
+                    <li class="relative mb-4 {{@itemClass}}" data-key={{item.key}}>
+                        <span class="activity-log-knob"></span>
+
+                        <div class="rounded-xl border border-gray-100 bg-white/90 dark:bg-[#0b0c10] dark:border-gray-800 px-3 py-2 shadow-sm">
+                            <div class="flex items-start gap-3">
+                                {{#if this.showAvatars}}
+                                    <img
+                                        src={{or item.actor.avatarUrl "/assets/images/avatar-placeholder.png"}}
+                                        alt={{item.actor.name}}
+                                        class="h-8 w-8 rounded-full ring-1 ring-gray-200 dark:ring-gray-700 object-cover"
+                                        referrerpolicy="no-referrer"
+                                    />
+                                {{/if}}
+
+                                <div class="min-w-0 flex-1 {{@itemDetailsClass}}">
+                                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+                                        <span class="text-sm {{@itemSentenceClass}} font-medium text-gray-900 dark:text-gray-100">
+                                            {{item.sentence}}
+                                        </span>
+
+                                        {{#if this.showBadges}}
+                                            <span class="{{@itemBadgeClass}} pl-1.5 inline-flex items-center rounded-md px-2 py-0.5 text-xs ring-1 {{item.badge.class}}">
+                                                {{item.badge.text}}
+                                            </span>
+                                        {{/if}}
+                                    </div>
+
+                                    {{#if item.inlineSummary}}
+                                        <div class="{{@itemSummaryClass}} mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300">
+                                            {{item.inlineSummary}}
+                                        </div>
+                                    {{/if}}
+
+                                    <div class="{{@itemRelativeTimestampClass}} mt-1 text-xs text-gray-400 dark:text-gray-500">
+                                        <time title={{item.timestamp.exactLocal}} datetime={{item.timestamp.iso}}>
+                                            {{item.timestamp.relative}}
+                                        </time>
+                                    </div>
+
+                                    {{#if item.advancedChanges.length}}
+                                        <div class="mt-1">
+                                            <button
+                                                type="button"
+                                                class="text-xs inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-indigo-600 hover:text-indigo-700 dark:text-indigo-300 dark:hover:text-indigo-200"
+                                                {{on "click" (fn this.toggleAdvanced item.key)}}
+                                            >
+                                                <FaIcon @icon={{if (set-has-item this.expanded item.key) "chevron-down" "chevron-right"}} @size="sm" />
+                                                {{#if (set-has-item this.expanded item.key)}}
+                                                    Hide advanced
+                                                {{else}}
+                                                    Show advanced ({{item.advancedChanges.length}})
+                                                {{/if}}
+                                            </button>
+
+                                            {{#if (set-has-item this.expanded item.key)}}
+                                                <div
+                                                    class="{{@advancedChangesWrapperClass}} mt-1 rounded-md border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/40 px-3 py-2 text-xs text-gray-800 dark:text-gray-200 overflow-x-auto"
+                                                >
+                                                    {{#each item.advancedChanges as |c|}}
+                                                        <div class="py-1 leading-6">
+                                                            <span
+                                                                class="inline-flex items-center rounded bg-white dark:bg-gray-900 px-2 py-0.5 text-xs font-mono font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-200 dark:ring-gray-700"
+                                                            >
+                                                                {{c.key}}
+                                                            </span>
+                                                            <span class="mx-1 font-mono text-gray-500 dark:text-gray-400">from</span>
+                                                            <code
+                                                                class="px-1 py-0.5 font-mono rounded bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-700 text-gray-900 dark:text-gray-100"
+                                                            >{{c.from}}</code>
+                                                            <span class="mx-1 font-mono text-gray-500 dark:text-gray-400">to</span>
+                                                            <code
+                                                                class="px-1 py-0.5 font-mono rounded bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-700 text-gray-900 dark:text-gray-100"
+                                                            >{{c.to}}</code>
+                                                        </div>
+                                                    {{/each}}
+                                                </div>
+                                            {{/if}}
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                {{/each}}
+            </ol>
+        </section>
+    {{/each}}
+
+    {{#if (eq this.groups.length 0)}}
+        <div class="min-h-24 p-4 col-span-2">
+            <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                <div class="text-center">
+                    {{#if this.loadActivities.isRunning}}
+                        <Spinner @loadingMessage="Loading activity..." />
+                    {{else}}
+                        <FaIcon @icon="bars-staggered" @size="2x" class="text-gray-400 mb-2" />
+                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">No activity yet</div>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    {{/if}}
+</div>

package/addon/components/activity-log.js

@@ -0,0 +1,310 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { isArray } from '@ember/array';
+import { capitalize } from '@ember/string';
+import { htmlSafe } from '@ember/template';
+import { task } from 'ember-concurrency';
+import { parseISO, isDate, isValid, format, formatDistanceToNow } from 'date-fns';
+import smartHumanize from '../utils/smart-humanize';
+
+export default class ActivityLogComponent extends Component {
+    @service store;
+    @tracked activities = [];
+    @tracked expanded = new Set();
+    @tracked dateFilter = null;
+    @tracked query = null;
+
+    // Optional style “knobs” (you can pass in from the parent)
+    get density() {
+        return this.args.density ?? 'compact';
+    } // 'cozy'|'compact'
+    get showAvatars() {
+        return this.args.showAvatars ?? true;
+    }
+    get showBadges() {
+        return this.args.showBadges ?? true;
+    }
+
+    get groups() {
+        const activities = isArray(this.activities) ? this.activities : [];
+
+        const normalized = activities.map((a, i) => this.#normalizeActivity(a, i)).sort((a, b) => (b.timestamp?.dateMs ?? 0) - (a.timestamp?.dateMs ?? 0));
+
+        const byDay = new Map();
+        for (const item of normalized) {
+            const key = item.dayKey ?? 'unknown';
+            if (!byDay.has(key)) byDay.set(key, { dateLabel: item.dayLabel ?? key, items: [] });
+            byDay.get(key).items.push(item);
+        }
+        return [...byDay.values()];
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadActivities.perform();
+    }
+
+    // ── Data ────────────────────────────────────────────────────────────────────
+    @task *loadActivities() {
+        try {
+            const params = {};
+            if (this.args.subjectId) params.subject_id = this.args.subjectId;
+            if (this.args.causerId) params.causer_id = this.args.causerId;
+            if (this.dateFilter) params.created_at = this.dateFilter;
+
+            const activities = yield this.store.query('activity', params);
+            this.activities = activities.toArray();
+        } catch (err) {
+            debug('Failed to load activities: ' + err.message);
+        }
+    }
+
+    @action reload() {
+        this.loadActivities.perform();
+    }
+
+    @action setDateFilter({ formattedDate }) {
+        this.dateFilter = formattedDate;
+        this.loadActivities.perform();
+    }
+
+    @action onCauserClick(causer) {
+        if (typeof this.args.onCauserClick === 'function') this.args.onCauserClick(causer);
+    }
+
+    @action onSubjectClick(subject) {
+        if (typeof this.args.onSubjectClick === 'function') this.args.onSubjectClick(subject);
+    }
+
+    @action toggleAdvanced(itemKey) {
+        const next = new Set(this.expanded);
+        next.has(itemKey) ? next.delete(itemKey) : next.add(itemKey);
+        this.expanded = next;
+    }
+
+    // ── Normalize & Phrase ──────────────────────────────────────────────────────
+    #normalizeActivity(activity, idx = 0) {
+        const createdISO = activity?.created_at ?? null;
+        const updatedISO = activity?.updated_at ?? null;
+        const tsISO = createdISO ?? updatedISO ?? null;
+
+        const d = this.#parseDate(tsISO);
+        const dateMs = d ? d.getTime() : 0;
+        const dayKey = d ? format(d, 'yyyy-MM-dd') : 'unknown';
+        const dayLabel = d ? format(d, 'EEE, MMM dd, yyyy') : 'Unknown date';
+        const exactLocal = d ? format(d, 'PP p') : '';
+        const relative = d ? formatDistanceToNow(d, { addSuffix: true }) : '';
+
+        const causer = activity?.causer ?? {};
+        const subject = activity?.subject ?? {};
+        const subjectTypeLabel = activity?.humanized_subject_type ?? this.#subjectTypeLabel(activity?.subject_type);
+        const subjectDisplay = this.#subjectDisplay(subject);
+        const event = String(activity?.event || '').toLowerCase();
+
+        const eventLabel = capitalize(event || 'updated');
+        const verb = this.#eventToVerb(event, activity?.description);
+
+        // Diffs → split into simple vs advanced, and also build a human inline sentence
+        const allChanges = this.#computeChanges(activity?.properties);
+        const simpleChanges = [];
+        const advancedChanges = [];
+
+        for (const c of allChanges) {
+            if (this.#isAdvancedValue(c.fromRaw, c.toRaw) || this.#isLikelyUuidKey(c.key)) {
+                advancedChanges.push(c);
+            } else {
+                simpleChanges.push(c);
+            }
+        }
+
+        const inlineSummary = this.#summarizeSimple(simpleChanges);
+
+        const sentence = `${causer?.name ?? 'Someone'} ${verb} ${subjectTypeLabel} (${subjectDisplay})`;
+
+        // Event → badge style (Fleetbase-ish accent mapping)
+        const badge = this.#eventBadge(event);
+
+        return {
+            key: `${dayKey}-${idx}`,
+            actor: {
+                name: causer?.name ?? 'Unknown',
+                avatarUrl: causer?.avatar_url ?? null,
+                raw: causer,
+            },
+            subject,
+            causer,
+            verb,
+            event,
+            eventLabel,
+            badge, // {text, class}
+            subjectTypeLabel,
+            subjectDisplay,
+            sentence,
+            inlineSummary, // "set color to red; status to live"
+            timestamp: {
+                iso: tsISO,
+                exactLocal,
+                relative,
+                dateMs,
+            },
+            dayKey,
+            dayLabel,
+            simpleChanges,
+            advancedChanges,
+            raw: activity,
+        };
+    }
+
+    #summarizeSimple(simpleChanges) {
+        if (!simpleChanges?.length) return '';
+
+        const parts = [];
+        for (const c of simpleChanges) {
+            const k = c.key.replace(/_/g, ' ');
+
+            if (c.from !== 'null' && c.from !== undefined && c.from !== '' && c.from !== c.to) {
+                parts.push(
+                    `<span class="activity-change">changed <span class="activity-change-prop highlight-gray ${this.args.activityChangePropClass ?? ''}">${k}</span> from <span class="activity-change-prop highlight-gray ${this.args.activityPreviousValueClass ?? ''}">${this.#code(c.from)}</span> to <span class="activity-change-prop highlight-blue ${this.args.activityNewValueClass ?? ''}">${this.#code(c.to)}</span></span>`
+                );
+            } else {
+                parts.push(
+                    `<span class="activity-change">set <span class="activity-change-prop highlight-gray ${this.args.activityChangePropClass ?? ''}">${k}</span> to <span class="activity-change-prop highlight-blue ${this.args.activityNewValueClass ?? ''}">${this.#code(c.to)}</span></span>`
+                );
+            }
+        }
+
+        // Make the entire thing safe once at the end
+        return htmlSafe(parts.join(', '));
+    }
+
+    #code(v) {
+        // lightweight backtick wrapper for inline emphasis
+        return this.args.backtickValues ? `\`${String(v)}\`` : v;
+    }
+
+    #eventToVerb(event, description) {
+        if (description && typeof description === 'string') return description;
+        switch (event) {
+            case 'created':
+                return 'created';
+            case 'deleted':
+                return 'deleted';
+            case 'restored':
+                return 'restored';
+            default:
+                return 'updated';
+        }
+    }
+
+    #eventBadge(event) {
+        // Tailwind classes set to feel like Fleetbase pills
+        switch (event) {
+            case 'created':
+                return { text: 'Created', class: 'bg-green-50 text-green-700 ring-green-200 dark:bg-green-900/20 dark:text-green-300 dark:ring-green-800' };
+            case 'deleted':
+                return { text: 'Deleted', class: 'bg-red-50 text-red-700 ring-red-200 dark:bg-red-900/20 dark:text-red-300 dark:ring-red-800' };
+            case 'restored':
+                return { text: 'Restored', class: 'bg-blue-50 text-blue-700 ring-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:ring-blue-800' };
+            default:
+                return { text: 'Updated', class: 'bg-indigo-50 text-indigo-700 ring-indigo-200 dark:bg-indigo-900/20 dark:text-indigo-300 dark:ring-indigo-800' };
+        }
+    }
+
+    // ── Changes & formatting ─────────────────────────────────────────────────────
+    #computeChanges(properties) {
+        const attrs = properties?.attributes ?? {};
+        const old = properties?.old ?? {};
+        const keys = new Set([...Object.keys(attrs), ...Object.keys(old)]);
+        const out = [];
+
+        for (const key of keys) {
+            const next = attrs[key];
+            const prev = old[key];
+            const same = next === prev || (next == null && prev == null) || (this.#isPlainObject(next) && this.#isPlainObject(prev) && JSON.stringify(next) === JSON.stringify(prev));
+            if (same) continue;
+
+            out.push({
+                key,
+                from: this.#formatValue(prev),
+                to: this.#formatValue(next),
+                fromRaw: prev,
+                toRaw: next,
+            });
+        }
+
+        const priority = ['status', 'scheduled_at', 'name', 'title', 'color', 'plate_number', 'updated_at', 'created_at'];
+        out.sort((a, b) => {
+            const ai = priority.indexOf(a.key);
+            const bi = priority.indexOf(b.key);
+            if (ai !== -1 || bi !== -1) return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
+            return a.key.localeCompare(b.key);
+        });
+
+        return out;
+    }
+
+    #isAdvancedValue(a, b) {
+        const isComplex = (v) => this.#isPlainObject(v) || isArray(v) || (typeof v === 'string' && (this.#looksLikeUuid(v) || v.length > 32));
+        return isComplex(a) || isComplex(b);
+    }
+
+    #isLikelyUuidKey(key) {
+        return typeof key === 'string' && (key.endsWith('_uuid') || key === 'uuid' || key.endsWith('Id') || key.endsWith('_id'));
+    }
+
+    #looksLikeUuid(v) {
+        return /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/.test(v);
+    }
+
+    #parseDate(input) {
+        if (!input) return null;
+        if (isDate(input)) return isValid(input) ? input : null;
+        try {
+            const d = parseISO(String(input));
+            return isValid(d) ? d : null;
+        } catch {
+            return null;
+        }
+    }
+
+    #subjectTypeLabel(subjectType) {
+        if (!subjectType || typeof subjectType !== 'string') return '';
+        const parts = subjectType.split('\\').filter(Boolean);
+        let lastSegment = parts[parts.length - 1];
+        if (lastSegment) {
+            return smartHumanize(lastSegment);
+        }
+
+        return subjectType;
+    }
+
+    #subjectDisplay(subject) {
+        if (!subject) return 'Unknown';
+        return subject.display_name || subject.name || subject.title || subject.address || subject.tracking || subject.public_id || subject.uuid || 'Unknown';
+    }
+
+    #isPlainObject(v) {
+        return v && typeof v === 'object' && !isArray(v);
+    }
+
+    #formatValue(v) {
+        if (v === null || v === undefined) return 'null';
+        if (typeof v === 'boolean') return v ? 'true' : 'false';
+        if (isArray(v)) return v.length ? JSON.stringify(v) : '[]';
+        if (this.#isPlainObject(v)) {
+            if (v.type === 'Point' && isArray(v.coordinates)) {
+                const [lng, lat] = v.coordinates;
+                return `Point(${lat}, ${lng})`;
+            }
+            return JSON.stringify(v);
+        }
+        if (typeof v === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(v)) {
+            const d = this.#parseDate(v);
+            if (d) return format(d, 'PP p');
+        }
+        return String(v);
+    }
+}

package/addon/components/badge.hbs

@@ -1,4 +1,4 @@
-<div class="status-badge {{safe-dasherize (or @type @status "info")}}-status-badge {{@wrapperClass}}" ...attributes>
+<div class="status-badge {{safe-dasherize (or @type @status 'info')}}-status-badge {{@wrapperClass}}" ...attributes>
     <span
         class="status-badge-inner-wrap inline-flex items-center
             {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}}

package/addon/components/bulk-search-dropdown.hbs

@@ -0,0 +1,14 @@
+<DropdownButton @icon={{or @icon "magnifying-glass"}} @buttonWrapperClass={{@buttonWrapperClass}} @size={{or @size "xs"}} as |dd|>
+    <div class="bulk-search-dropdown-container filters-dropdown-container">
+        <div class="filters-dropdown-header">
+            <h4>{{or @title "Bulk Search"}}</h4>
+        </div>
+        <div class="filters-dropdown-body">
+            <Textarea @value={{this.value}} class="form-input w-full" rows={{or @rows "8"}} placeholder={{or @placeholder "Input comma delimited ID's to perform a bulk search"}} />
+        </div>
+        <div class="filters-dropdown-footer space-x-2">
+            <Button @text="Clear" @icon="trash" @size="xs" @onClick={{dropdown-fn dd this.clear}} />
+            <Button @text="Search" @icon="check" @type="primary" @size="xs" @onClick={{dropdown-fn dd this.submit}} />
+        </div>
+    </div>
+</DropdownButton>

package/addon/components/bulk-search-dropdown.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class BulkSearchDropdownComponent extends Component {
+    @tracked value = '';
+
+    constructor(owner, { value = '' }) {
+        super(...arguments);
+        this.value = value;
+    }
+
+    @action clear() {
+        this.value = '';
+
+        if (typeof this.args.onClear === 'function') {
+            this.args.onClear(this.value);
+        }
+    }
+
+    @action submit() {
+        if (typeof this.args.onSubmit === 'function') {
+            this.args.onSubmit(this.value);
+        }
+    }
+}

package/addon/components/button.hbs

@@ -1,5 +1,9 @@
 {{#if this.visible}}
-    <span class="btn-wrapper {{@wrapperClass}} inline-flex rounded-md {{if this.isNotSecondary 'shadow-sm'}} {{if @isLoading 'is-loading'}}" {{did-insert this.setupComponent}} {{did-update this.onArgsChanged @disabled @visible @permission}}> 
+    <span
+        class="btn-wrapper {{@wrapperClass}} inline-flex rounded-md {{if this.isNotSecondary 'shadow-sm'}} {{if @isLoading 'is-loading'}}"
+        {{did-insert this.setupComponent}}
+        {{did-update this.onArgsChanged @disabled @visible @permission}}
+    >
         <button
             class="btn {{if @isLoading 'btn-is-loading'}} {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}"
             disabled={{this.isDisabled}}

package/addon/components/comment-thread/comment.hbs

@@ -5,14 +5,14 @@
     <div class="thread-comment-content-wrapper flex-1">
         <div class="thread-comment-author flex flex-row items-center">
             <div class="thread-comment-author-name text-sm dark:text-white text-black font-bold mr-1.5">{{this.comment.author.name}}</div>
-            <div class="thread-comment-created-at dark:text-gray-300 text-gray-600 text-xs">{{t "component.comment-thread.comment-published-ago" createdAgo=this.comment.createdAgo}}</div>
+            <div class="thread-comment-created-at dark:text-gray-300 text-gray-600 text-xs">{{t "comment-thread.comment-published-ago" createdAgo=this.comment.createdAgo}}</div>
         </div>
         <div class="thread-comment-conent-paragraph-wrapper mt-2">
             {{#if this.editing}}
                 <Textarea
                     @value={{this.comment.content}}
                     class="form-input w-full"
-                    placeholder={{t "component.comment-thread.comment-reply-placeholder"}}
+                    placeholder={{t "comment-thread.comment-reply-placeholder"}}
                     rows={{2}}
                     disabled={{not this.updateComment.isIdle}}
                 />
@@ -43,7 +43,7 @@
                 @iconSize="xs"
                 @textClass="text-xs"
                 @icon="reply"
-                @text={{t "component.comment-thread.reply-comment-button-text"}}
+                @text={{t "comment-thread.reply-comment-button-text"}}
                 @onClick={{this.reply}}
             />
             {{#if this.comment.editable}}
@@ -55,7 +55,7 @@
                     @iconSize="xs"
                     @textClass="text-xs"
                     @icon="edit"
-                    @text={{t "component.comment-thread.edit-comment-button-text"}}
+                    @text={{t "comment-thread.edit-comment-button-text"}}
                     @onClick={{this.edit}}
                 />
                 <Button
@@ -67,7 +67,7 @@
                     @iconClass="text-xs text-danger"
                     @textClass="text-xs text-danger"
                     @icon="trash"
-                    @text={{t "component.comment-thread.delete-comment-button-text"}}
+                    @text={{t "comment-thread.delete-comment-button-text"}}
                     @onClick={{this.delete}}
                 />
             {{/if}}
@@ -77,7 +77,7 @@
                 <Textarea
                     @value={{this.input}}
                     class="form-input w-full"
-                    placeholder={{t "component.comment-thread.comment-reply-placeholder"}}
+                    placeholder={{t "comment-thread.comment-reply-placeholder"}}
                     rows={{2}}
                     disabled={{not this.publishReply.isIdle}}
                 />
@@ -90,7 +90,7 @@
                         @size="xs"
                         @iconSize="xs"
                         @iconClass="text-xs"
-                        @text={{t "component.comment-thread.publish-reply-button-text"}}
+                        @text={{t "comment-thread.publish-reply-button-text"}}
                         @onClick={{perform this.publishReply}}
                         @disabled={{or (not this.publishReply.isIdle) (not this.input)}}
                     />

package/addon/components/comment-thread.hbs

@@ -1,11 +1,11 @@
 <div class="flex flex-col mb-4" ...attributes>
-    <Textarea @value={{this.input}} class="form-input w-full" placeholder={{t "component.comment-thread.comment-input-placeholder"}} rows={{3}} disabled={{not this.publishComment.isIdle}} />
+    <Textarea @value={{this.input}} class="form-input w-full" placeholder={{t "comment-thread.comment-input-placeholder"}} rows={{3}} disabled={{not this.publishComment.isIdle}} />
     <div class="flex flex-row items-center justify-end mt-2">
         <Button
             @type="primary"
             @buttonType="button"
             @icon="paper-plane"
-            @text={{t "component.comment-thread.publish-comment-button-text"}}
+            @text={{t "comment-thread.publish-comment-button-text"}}
             @onClick={{perform this.publishComment}}
             @disabled={{or (not this.publishComment.isIdle) (not this.input)}}
         />