icons

client/app/components/Gallery/Card.vue

@@ -10,7 +10,7 @@
       class="absolute bottom-2 text-sm opacity-70 group-hover:opacity-100"
       rounded
     >
-      {{ isMe ? 'You' : client.username }}
+      {{ isMe ? 'You' : client.displayName }}
     </PrimeTag>
   </div>
 </template>

client/app/layouts/default.vue

@@ -40,7 +40,7 @@
       <PrimeSelectButton
         v-model="activeTab"
         :options="tabs"
-        data-key="id"
+        option-label="id"
         :allow-empty="false"
         style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
       >

client/app/pages/preferences.vue

@@ -74,7 +74,14 @@
       <p class="text-sm mb-2 text-center">
         FPS
       </p>
-      <PrimeSelectButton v-model="shareFps" :options="[5, 30, 60]" fluid size="small" />
+      <PrimeSelectButton
+        v-model="shareFps"
+        :options="shareFpsOptions"
+        fluid
+        size="small"
+        option-label="label"
+        option-value="value"
+      />
     </div>
 
     <template v-if="isTauri">
@@ -152,6 +159,13 @@ const {
   shareFps,
 } = usePreferences()
 
+const shareFpsOptions = [5, 30, 60].map((value) => {
+  return {
+    label: value.toString(),
+    value,
+  }
+})
+
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
 const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)