Improve NoCompanyView design and fix header for no-company state

Personalize welcome heading with user name, add descriptive subtitle,
improve invitation card styling, remove redundant logout button. Fix
hasCreateAbilities check in header to actually call the function.
Widen company switcher dropdown and improve invitation row layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 00:48:00 +02:00
parent c3a59a46db
commit c85051161b
4 changed files with 71 additions and 87 deletions

View File

@@ -43,7 +43,7 @@
class="
overflow-y-auto
scrollbar-thin scrollbar-thumb-rounded-full
w-[250px]
w-[300px]
max-h-[350px]
scrollbar-thumb-gray-300 scrollbar-track-gray-10
pb-4
@@ -93,7 +93,7 @@
"
:class="{
'bg-gray-100 text-primary-500':
companyStore.selectedCompany.id === company.id,
companyStore.selectedCompany && companyStore.selectedCompany.id === company.id,
}"
@click="changeCompany(company)"
>
@@ -148,39 +148,37 @@
<div
v-for="invitation in invitationStore.pendingInvitations"
:key="invitation.id"
class="p-2 px-3 rounded-md opacity-60"
class="p-2 px-3 rounded-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span
class="
flex items-center justify-center mr-3
overflow-hidden text-xs font-semibold
bg-gray-200 rounded-md w-9 h-9 text-gray-400
"
>
{{ initGenerator(invitation.company?.name || '?') }}
</span>
<div class="flex flex-col">
<span class="text-sm text-gray-500">{{ invitation.company?.name }}</span>
<span class="text-xs text-gray-400">{{ invitation.role?.title }}</span>
</div>
</div>
<div class="flex space-x-1">
<button
class="text-xs px-2 py-1 rounded bg-primary-500 text-white hover:bg-primary-600"
@click.stop="acceptInvitation(invitation.token)"
>
{{ $t('general.accept') }}
</button>
<button
class="text-xs px-2 py-1 rounded bg-gray-200 text-gray-600 hover:bg-gray-300"
@click.stop="declineInvitation(invitation.token)"
>
{{ $t('general.decline') }}
</button>
<div class="flex items-center mb-2">
<span
class="
flex items-center justify-center mr-3
overflow-hidden text-xs font-semibold
bg-gray-200 rounded-md w-9 h-9 shrink-0 text-gray-400
"
>
{{ initGenerator(invitation.company?.name || '?') }}
</span>
<div class="flex flex-col min-w-0">
<span class="text-sm text-gray-700 truncate">{{ invitation.company?.name }}</span>
<span class="text-xs text-gray-400">{{ invitation.role?.title }}</span>
</div>
</div>
<div class="flex space-x-1 pl-12">
<button
class="text-xs px-2 py-1 rounded bg-primary-500 text-white hover:bg-primary-600"
@click.stop="acceptInvitation(invitation.token)"
>
{{ $t('general.accept') }}
</button>
<button
class="text-xs px-2 py-1 rounded bg-gray-200 text-gray-600 hover:bg-gray-300"
@click.stop="declineInvitation(invitation.token)"
>
{{ $t('general.decline') }}
</button>
</div>
</div>
</div>