feat: home screen and navigation design

web/src/composables/useApi.ts

@@ -21,6 +21,7 @@ export class NetworkError extends Error {
 
 export interface MeResult {
 	verified: boolean
+	username?: string
 }
 
 export type OnUnauthorized = 'redirect' | 'passthrough'
@@ -99,10 +100,10 @@ export function useApi() {
 	}
 
 	async function getMe(): Promise<MeResult> {
-		const body = await request<{ is_verified: boolean }>('/v1/auth/me', {
+		const body = await request<{ is_verified: boolean; username?: string }>('/v1/auth/me', {
 			onUnauthorized: 'passthrough',
 		})
-		return { verified: Boolean(body.is_verified) }
+		return { verified: Boolean(body.is_verified), username: body.username }
 	}
 
 	return { getMe, request }

web/src/composables/useArticles.ts

@@ -0,0 +1,26 @@
+import { useApi } from '@/composables/useApi'
+
+export interface ArticleImage {
+	id: number
+	url: string
+}
+
+export interface Article {
+	id: number
+	title: string
+	body: string
+	images: ArticleImage[]
+	is_online: boolean
+	created_at: string
+	updated_at: string
+}
+
+export function useArticles() {
+	const { request } = useApi()
+
+	function listArticles(): Promise<Article[]> {
+		return request<Article[]>('/v1/article/')
+	}
+
+	return { listArticles }
+}

web/src/composables/useColorMode.ts

@@ -0,0 +1,19 @@
+import { useColorMode as useVueUseColorMode } from '@vueuse/core'
+
+export type ColorModePreference = 'system' | 'light' | 'dark'
+
+export function useColorMode() {
+	const { store, system } = useVueUseColorMode()
+
+	return {
+		get preference(): ColorModePreference {
+			return store.value === 'auto' ? 'system' : (store.value as ColorModePreference)
+		},
+		set preference(value: ColorModePreference) {
+			store.value = value === 'system' ? 'auto' : value
+		},
+		get value() {
+			return store.value === 'auto' ? system.value : store.value
+		},
+	}
+}