feature: show-label on top-bar actions

[SRWieZ]

What's wrong

Top-bar actions are always drawn as a bare icon. label is only read by screen readers, and an action with a label but no icon shows a generic "more" icon. Sometimes a word is clearer than an icon ("Add", "Edit").

What this does

A new opt-in show-label attribute draws the label:

• label only → text button
• icon + label → icon and text side by side

Without show-label, nothing changes. On iOS the toolbar would otherwise shrink a label down to its icon, so it's told to keep both. On Android it's a regular text button, so the disabled look and the touch ripple still work.

How to reproduce

The first two actions show their label, the third stays icon-only as before.

// routes/mobile.php
Route::native('/repro/top-bar-labels', \App\NativeComponents\TopBarLabels::class);

// app/NativeComponents/TopBarLabels.php
namespace App\NativeComponents;

use Illuminate\View\View;
use Native\Mobile\Edge\NativeComponent;

class TopBarLabels extends NativeComponent
{
    public int $count = 0;

    public function add(): void
    {
        $this->count++;
    }

    public function render(): View
    {
        return view('native.top-bar-labels');
    }
}

{{-- resources/views/native/top-bar-labels.blade.php --}}
<native:column class="w-full h-full bg-zinc-100 items-center justify-center">
    <native:top-bar title="Items">
        <native:top-bar-action id="add" label="Add" show-label @press="add" />
        <native:top-bar-action id="edit" icon="pencil" label="Edit" show-label @press="add" />
        <native:top-bar-action id="share" icon="square.and.arrow.up" label="Share" @press="add" />
    </native:top-bar>
    <native:text class="text-[17]">Presses: {{ $count }}</native:text>
</native:column>

[simonhamp]

Does this respect custom text colours on Android the same way it does iOS?

Looks like import androidx.compose.foundation.layout.width is now imported twice