From e7c64e47c4870b19d41ec4f7a500d312c06df853 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 18:52:27 +0200
Subject: [PATCH 1/4] undo the removal of toggled state for unstyled button
 since it is used

---
 src/components/button_unstyled.style.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a2d854aaa..a47701db7 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -4,7 +4,8 @@ export default {
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
+    focused: ':focus-within',
+    toggled: '.toggled'
   },
   validInnerComponents: [
     'Text',

From fb55c98483950bf02758ca1ec21e3e428fe35751 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:06:50 +0200
Subject: [PATCH 2/4] fix polls options

---
 src/App.scss                 | 6 ++++--
 src/components/poll/poll.vue | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 219269a18..9e549b86e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -488,7 +488,8 @@ textarea {
 .input {
   &.unstyled {
     border-radius: 0;
-    background: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
     box-shadow: none;
     height: unset;
   }
@@ -528,6 +529,7 @@ textarea {
     &:checked + label::before {
       box-shadow: var(--shadow);
       background-color: var(--background);
+      color: var(--text);
     }
 
     &:disabled {
@@ -541,7 +543,7 @@ textarea {
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: "";
+      content: "•";
       transition: box-shadow 200ms;
       width: 1.1em;
       height: 1.1em;
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 57ec879a5..1e97b3cae 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -38,6 +38,7 @@
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
           @click="activateOption(index)"
+          class="input unstyled"
         >
           <!-- TODO: USE CHECKBOX -->
           <input

From 23a8bee053c7c5cfa0daee1fe8bd46d22221bb56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:30:54 +0200
Subject: [PATCH 3/4] fix more attachments issues

---
 src/components/attachment/attachment.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index b1a3fa5ee..47660bf68 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -82,6 +82,13 @@
     }
   }
 
+  .video-container {
+    border: none;
+    outline: none;
+    color: inherit;
+    background: transparent;
+  }
+
   .audio-container {
     display: flex;
     align-items: flex-end;

From 01f6f89c7de7dee3c91d2850490981d73a3c0465 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:54:25 +0200
Subject: [PATCH 4/4] interactive lists & non-interactive lists

---
 src/App.scss                                       | 4 ++++
 src/components/list/list.vue                       | 6 +++++-
 src/components/list/list_item.style.js             | 2 +-
 src/components/selectable_list/selectable_list.vue | 2 ++
 src/components/user_profile/user_profile.vue       | 4 ++--
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 9e549b86e..289add77e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -411,6 +411,10 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-non-interactive {
+    cursor: auto;
+  }
+
   &.-active,
   &:hover {
     border-top-width: 1px;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index b8fcaf9d2..c885bacd9 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -7,7 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
-      :class="getClass(item)"
+      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
       role="listitem"
     >
       <slot
@@ -38,6 +38,10 @@ export default {
     getClass: {
       type: Function,
       default: item => ''
+    },
+    nonInteractive: {
+      type: Boolean,
+      default: false
     }
   }
 }
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
index ae8dc5f4d..e82a0a830 100644
--- a/src/components/list/list_item.style.js
+++ b/src/components/list/list_item.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.list-item',
   states: {
     active: '.-active',
-    hover: ':hover'
+    hover: ':hover:not(.-non-interactive)'
   },
   validInnerComponents: [
     'Text',
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e54132d67..3d3a5ff04 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -29,11 +29,13 @@
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+          @click.stop="toggle(!isSelected(item), item)"
         >
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox
               :model-value="isSelected(item)"
               @update:model-value="checked => toggle(checked, item)"
+              @click.stop
             />
           </div>
           <slot
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 042d52216..011f32da6 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -75,7 +75,7 @@
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId">
+          <FriendList :user-id="userId" :non-interactive="true">
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -87,7 +87,7 @@
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId">
+          <FollowerList :user-id="userId" :non-interactive="true">
             <template #item="{item}">
               <FollowCard
                 :user="item"