rework app key groups to be part of the key name delimited by underscore

Author: drewvolz

modules/app-config/index.tsx

@@ -1,5 +1,5 @@
 import {getFeatureFlag} from '../../source/lib/storage'
-import {AppConfigKey, AppConfigGroupKey, FeatureFlagType} from './types'
+import {AppConfigKey, FeatureFlagType} from './types'
 import {useQuery} from '@tanstack/react-query'
 import {isDevMode} from '@frogpond/constants'
 
@@ -10,7 +10,6 @@ export const AppConfig = async (): Promise<FeatureFlagType[]> => {
 	return [
 		{
 			configKey: AppConfigKey.TestDataKey,
-			group: AppConfigGroupKey.test,
 			title: 'Test config key',
 			active: await getFeatureFlag(AppConfigKey.TestDataKey),
 		},

modules/app-config/types.ts

@@ -1,14 +1,11 @@
 export interface FeatureFlagType {
 	configKey: AppConfigKey
 	title: string
-	group: AppConfigGroupKey
 	active: boolean
 }
 
 export enum AppConfigKey {
 	TestDataKey = 'TestData',
 }
 
-export enum AppConfigGroupKey {
-	test = 'test',
 }

source/views/settings/screens/feature-flags.tsx

@@ -27,15 +27,19 @@ export const FeatureFlagsView = (): JSX.Element => {
 		return <ListEmpty mode="bug" />
 	}
 
+	let findGroup = (configKey: FeatureFlagType['configKey']) => {
+		return configKey.split('_')?.[0] ?? 'Unknown'
+	}
+
 	let sorters: Array<(flag: FeatureFlagType) => string> = [
-		(flag) => flag.group,
+		(flag) => findGroup(flag.configKey),
 		(flag) => flag.title,
 	]
 
 	let ordered: Array<'desc' | 'asc'> = ['desc', 'asc', 'desc']
 
 	let sorted = orderBy(sections, sorters, ordered)
-	let grouped = groupBy(sorted, (s) => s.group)
+	let grouped = groupBy(sorted, (s) => findGroup(s.configKey))
 	let groupedSections = Object.entries(grouped)
 		.map(([key, value]) => ({
 			title: key,