Tweak projects mobile UI

resources/views/components/card.blade.php

@@ -34,14 +34,38 @@ class="text-grey-dark h-10 w-10 fill-current"
         @endif
 
         <div>
-            <div class="mb-2 flex">
+            <div class="mb-1 flex md:mb-2">
                 <h3 class="my-0 mr-2 text-xl font-medium">{{ $title }}</h3>
                 @isset($state)
                     <span
-                        class="{{ $stateClasses }} self-start rounded-full px-2 py-1 text-xs font-semibold tracking-widest uppercase"
+                        class="{{ $stateClasses }} hidden self-start rounded-full px-2 py-1 text-xs font-semibold tracking-widest uppercase md:block"
                     >
                         {{ $state->label() }}
                     </span>
+
+                    @if ($state->raw() === 'live')
+                        <div
+                            aria-label="{{ $state->label() }}"
+                            class="absolute top-4 right-4 size-3 md:hidden"
+                        >
+                            <span
+                                class="bg-jade absolute inset-0 rounded-full"
+                            ></span>
+                            <span
+                                class="bg-jade absolute inset-0 animate-ping rounded-full"
+                            ></span>
+                        </div>
+                    @else
+                        <span
+                            aria-label="{{ $state->label() }}"
+                            class="{{ $stateClasses }} absolute top-3 right-3 flex size-7 items-center justify-center rounded-full md:hidden"
+                        >
+                            <s:partial
+                                :src="'icons/state-' . $state->raw()"
+                                class="size-4"
+                            />
+                        </span>
+                    @endif
                 @endisset
             </div>
 

resources/views/icons/state-archived.antlers.html

@@ -0,0 +1,10 @@
+<svg
+    class="{{ class ?? '' }}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="currentColor"
+        d="M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2 2 2 0 0 1-2 2H4a2 2 0 0 1-2-2m17 4c.513 0 .936.463.993 1.06l.007.14v7.2c0 1.917-1.249 3.484-2.824 3.594L17 21H7c-1.598 0-2.904-1.499-2.995-3.388L4 17.4v-7.2C4 9.537 4.448 9 5 9zm-5 2h-4l-.117.007a1 1 0 0 0 0 1.986L10 13h4l.117-.007a1 1 0 0 0 0-1.986z"
+    />
+</svg>

resources/views/icons/state-experimental.antlers.html

@@ -0,0 +1,19 @@
+<svg
+    class="{{ class ?? '' }}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 48 48"
+>
+    <g fill="none" stroke="currentColor" stroke-width="4">
+        <path stroke-linecap="round" d="M12 4h24" />
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m10.777 30 7.242-14.961V4h12.01v11.039L37.245 30"
+        />
+        <path
+            fill="currentColor"
+            stroke-linejoin="round"
+            d="M7.794 43.673a3.273 3.273 0 0 1-1.52-4.372L10.777 30S18 35 24 30s13.246 0 13.246 0l4.49 9.305A3.273 3.273 0 0 1 38.787 44H9.22c-.494 0-.981-.112-1.426-.327Z"
+        />
+    </g>
+</svg>

resources/views/icons/state-wip.antlers.html

@@ -0,0 +1,12 @@
+<svg
+    class="{{ class ?? '' }}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M10.477.086a4.3 4.3 0 0 0-4.884 5.68L.461 10.898a1.5 1.5 0 0 0 .022 2.143l.56.538a1.5 1.5 0 0 0 2.094-.016L8.34 8.417a4.31 4.31 0 0 0 5.56-4.913 1.26 1.26 0 0 0-.579-.844.5.5 0 0 0-.615.073l-2 2-.006.006a.5.5 0 0 1-.72 0l-.027-.025-.746-.668a.5.5 0 0 1 .008-.688l1.998-1.998a.5.5 0 0 0 .107-.55 1.26 1.26 0 0 0-.843-.724"
+        clip-rule="evenodd"
+    />
+</svg>