Show the packet side of a photo as a Front | Back | None control

On a seed's own page, the owner now chooses which side of the packet a photo
is of with one small button group, the current choice lit, in place of a badge
and up to three long text links that wrapped in a narrow card. Everyone else
sees just a badge. The unused "mark as" locale keys are removed.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/views/photos/_packet_label.html.haml

@@ -1,11 +1,16 @@
--# On a seed's own page: whether each of its photos is of the packet, and which
--# side. Everyone sees what it is; the seed's owner can change it.
+-# On a seed's own page: which side of the packet each of its photos is of, if it
+-# is of one. The seed's owner chooses with the buttons, the current choice
+-# being the lit one; everyone else sees what it is.
 - label = seed.label_of(photo)
-.packet-label.small.mt-1
-  - if label
-    %span.badge.text-bg-secondary= t("seeds.packet.label_#{label}")
+.packet-label.mt-2
   - if can?(:update, seed)
-    - PhotoAssociation::LABELS['Seed'].without(label).each do |choice|
-      = link_to t("seeds.packet.mark_#{choice}"), packet_label_path(seed, photo, choice), method: :patch, class: 'me-2'
-    - not_packet_path = packet_label_path(seed, photo, '')
-    = link_to t('seeds.packet.not_packet'), not_packet_path, method: :patch, class: 'me-2' if label
+    .btn-group.btn-group-sm{ role: 'group', 'aria-label': t('seeds.packet.group') }
+      - [*PhotoAssociation::LABELS['Seed'], nil].each do |choice|
+        - words = t("seeds.packet.choice_#{choice || 'none'}")
+        - if choice == label
+          %span.btn.btn-secondary.active{ 'aria-current': 'true' }= words
+        - else
+          - path = packet_label_path(seed, photo, choice.to_s)
+          = link_to words, path, method: :patch, class: 'btn btn-outline-secondary'
+  - elsif label
+    %span.badge.text-bg-secondary= t("seeds.packet.label_#{label}")

config/locales/en.yml

@@ -987,11 +987,12 @@ en:
         default: Everyone's seeds
         owner_seeds: "%{owner} seeds"
     packet:
+      choice_back: Back
+      choice_front: Front
+      choice_none: None
+      group: Packet photo
       label_back: Back of packet
       label_front: Front of packet
-      mark_back: Mark as back of packet
-      mark_front: Mark as front of packet
-      not_packet: Not a packet
       photo_back: Add a photo of the back of the packet
       photo_front: Add a photo of the front of the packet
     save_seeds: Save seeds

spec/requests/seeds_show_packet_photos_spec.rb

@@ -12,15 +12,18 @@ describe SeedsController, '#show' do
   before { seed.photo_associations.create!(photo:, label: 'back') }
 
   context 'when its owner looks' do
+    let(:page) { Capybara.string(response.body) }
+
     before do
       sign_in seed.owner
       get seed_path(seed)
     end
 
-    it('says it is the back of the packet') { expect(response.body).to include('Back of packet') }
-    it('offers to make it the front') { expect(response.body).to include('Mark as front of packet') }
-    it('offers to say it is not a packet') { expect(response.body).to include('Not a packet') }
-    it('does not offer what it already is') { expect(response.body).not_to include('Mark as back of packet') }
+    it('lights the side it is') { expect(page).to have_css('.packet-label .btn.active', text: 'Back') }
+    it('does not make the side it is a link') { expect(page).to have_no_link('Back') }
+    it('offers to make it the front') { expect(page).to have_link('Front', href: /label=front/) }
+    it('offers to say it is not of the packet') { expect(page).to have_link('None', href: /label=(&|$)/) }
+    it('does not add a badge as well') { expect(page).to have_no_css('.packet-label .badge') }
   end
 
   context 'with the text read from the packet' do
@@ -34,12 +37,14 @@ describe SeedsController, '#show' do
   end
 
   context 'when someone else looks' do
+    let(:page) { Capybara.string(response.body) }
+
     before do
       sign_in create(:member)
       get seed_path(seed)
     end
 
-    it('says it is the back of the packet') { expect(response.body).to include('Back of packet') }
-    it('offers no changes') { expect(response.body).not_to include('Mark as front of packet') }
+    it('says it is the back of the packet') { expect(page).to have_css('.packet-label .badge', text: 'Back of packet') }
+    it('offers no changes') { expect(page).to have_no_css('.packet-label .btn') }
   end
 end