✨ Star roles

Was going to call these 'roles' but that would
clash with Dexie cloud's built-in roles table.

components/db.ts

@@ -1,25 +1,22 @@
 import Dexie, { Table } from 'dexie'
 
-import dexieCloud from 'dexie-cloud-addon'
+import dexieCloud, { DexieCloudTable } from 'dexie-cloud-addon'
 
 export interface Todo {
+	completedAt?: Date
+	id: string
 	note?: Note
-	role?: Role
+	starRole?: StarRole['id']
 	starPoints?: string
 	title: string
 }
 
-export interface CreatedTodo extends Todo {
-	createdAt: Date
-	completedAt?: Date
-	id?: string
-}
-
 export interface Note {
 	uri: string
 }
 
-export interface Role {
+export interface StarRole {
+	id: string
 	title: string
 }
 
@@ -40,17 +37,19 @@ export interface Setting {
 
 export class DexieStarfocus extends Dexie {
 	lists!: Table<List>
-	settings!: Table<Setting>
-	todos!: Table<CreatedTodo>
+	settings!: DexieCloudTable<Setting, 'key'>
+	starRoles: DexieCloudTable<StarRole, 'id'>
+	todos!: DexieCloudTable<Todo, 'id'>
 
 	constructor() {
 		super('starfocus', {
 			addons: [dexieCloud],
 		})
-		this.version(2).stores({
-			todos: '@id, createdAt, completedAt, title',
+		this.version(3).stores({
+			todos: '@id, createdAt, completedAt, starRole, title',
 			lists: 'type',
 			settings: '&key',
+			starRoles: '@id, title',
 		})
 		this.cloud.configure({
 			databaseUrl: 'https://zy0myinc2.dexie.cloud',

components/pages/Constellation.tsx

@@ -1,9 +1,94 @@
-import { IonPage } from '@ionic/react'
+import {
+	IonContent,
+	IonFab,
+	IonFabButton,
+	IonHeader,
+	IonIcon,
+	IonItem,
+	IonLabel,
+	IonList,
+	IonPage,
+	IonReorder,
+	IonReorderGroup,
+	IonSpinner,
+	IonTitle,
+	IonToolbar,
+} from '@ionic/react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { add, starOutline } from 'ionicons/icons'
+import { useCallback, useRef } from 'react'
+import { db } from '../db'
+import { useCreateStarRoleModal } from '../starRoles/create/useCreateStarRoleModal'
 
 export default function Constellation() {
+	const starRoles = useLiveQuery(() => db.starRoles.toArray())
+	const isLoading = starRoles === undefined
+
+	const fab = useRef<HTMLIonFabElement>(null)
+	const [presentCreateStarRoleModal, dismiss] = useCreateStarRoleModal()
+	const openCreateStarRoleModal = useCallback(() => {
+		presentCreateStarRoleModal({
+			onWillDismiss: () => {
+				if (fab.current) fab.current.activated = false
+			},
+		})
+	}, [fab, presentCreateStarRoleModal])
+
 	return (
 		<IonPage>
-			<h1>Constellation</h1>
+			<IonHeader>
+				<IonToolbar>
+					<IonTitle>Constellation</IonTitle>
+				</IonToolbar>
+			</IonHeader>
+			<IonContent fullscreen>
+				{isLoading ? (
+					<div className="flex items-center justify-center h-full">
+						<IonSpinner
+							className="w-20 h-20"
+							name="dots"
+						/>
+					</div>
+				) : starRoles.length === 0 ? (
+					<div className="flex flex-col items-center justify-center h-full gap-5">
+						<IonIcon
+							icon={starOutline}
+							size="large"
+						/>
+						<p>
+							Create some roles to focus on what matters in different areas of
+							your life
+						</p>
+					</div>
+				) : (
+					<IonList inset>
+						<IonReorderGroup
+							disabled={false}
+							// onIonItemReorder={handleReorder}
+						>
+							{starRoles.map(role => (
+								<IonItem
+									button
+									key={role.id}
+								>
+									<IonLabel>{role?.title}</IonLabel>
+									<IonReorder slot="end"></IonReorder>
+								</IonItem>
+							))}
+						</IonReorderGroup>
+					</IonList>
+				)}
+				<IonFab
+					ref={fab}
+					slot="fixed"
+					vertical="bottom"
+					horizontal="end"
+				>
+					<IonFabButton onClick={openCreateStarRoleModal}>
+						<IonIcon icon={add}></IonIcon>
+					</IonFabButton>
+				</IonFab>
+			</IonContent>
 		</IonPage>
 	)
 }