refactor group settings to use group settings form

frontend/components/Domain/Group/GroupPreferencesEditor.vue

@@ -1,11 +1,24 @@
 <template>
   <div v-if="preferences">
-    <BaseCardSectionTitle :title="$t('group.general-preferences')" />
-    <v-checkbox
-      v-model="preferences.privateGroup"
-      class="mt-n4"
-      :label="$t('group.private-group')"
-    />
+    <BaseCardSectionTitle :title="$t('group.group-preferences')" />
+    <div class="mb-6">
+      <v-checkbox
+        v-model="preferences.privateGroup"
+        hide-details
+        density="compact"
+        color="primary"
+        :label="$t('group.private-group')"
+      />
+      <div class="ml-8">
+        <p class="text-subtitle-2 my-0 py-0">
+          {{ $t("group.private-group-description") }}
+        </p>
+        <DocLink
+          class="mt-2"
+          link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -14,5 +27,3 @@ import type { ReadGroupPreferences } from "~/lib/api/types/user";
 
 const preferences = defineModel<ReadGroupPreferences>({ required: true });
 </script>
-
-<style lang="scss" scoped></style>