feat: user profiles (#32)

* add user profiles and theme selectors

* lowercase buttons by default

* basic layout

* (wip) init token APIs

* refactor server to support variable options

* fix types

* api refactor / registration tests

* implement UI for url and join

* remove console.logs

* rename repository factory

* fix upload size

frontend/composables/use-api.ts

@@ -1,5 +1,5 @@
 import { PublicApi } from "~~/lib/api/public";
-import { UserApi } from "~~/lib/api/user";
+import { UserClient } from "~~/lib/api/user";
 import { Requests } from "~~/lib/requests";
 import { useAuthStore } from "~~/stores/auth";
 
@@ -28,7 +28,7 @@ export function usePublicApi(): PublicApi {
   return new PublicApi(requests);
 }
 
-export function useUserApi(): UserApi {
+export function useUserApi(): UserClient {
   const authStore = useAuthStore();
 
   const requests = new Requests("", () => authStore.token, {});
@@ -43,5 +43,5 @@ export function useUserApi(): UserApi {
     requests.addResponseInterceptor(observer.handler);
   }
 
-  return new UserApi(requests);
+  return new UserClient(requests);
 }

frontend/composables/use-preferences.ts

@@ -1,9 +1,41 @@
 import { Ref } from "vue";
 
+export type DaisyTheme =
+  | "light"
+  | "dark"
+  | "cupcake"
+  | "bumblebee"
+  | "emerald"
+  | "corporate"
+  | "synthwave"
+  | "retro"
+  | "cyberpunk"
+  | "valentine"
+  | "halloween"
+  | "garden"
+  | "forest"
+  | "aqua"
+  | "lofi"
+  | "pastel"
+  | "fantasy"
+  | "wireframe"
+  | "black"
+  | "luxury"
+  | "dracula"
+  | "cmyk"
+  | "autumn"
+  | "business"
+  | "acid"
+  | "lemonade"
+  | "night"
+  | "coffee"
+  | "winter";
+
 export type LocationViewPreferences = {
   showDetails: boolean;
   showEmpty: boolean;
   editorSimpleView: boolean;
+  theme: DaisyTheme;
 };
 
 /**
@@ -17,6 +49,7 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
       showDetails: true,
       showEmpty: true,
       editorSimpleView: true,
+      theme: "garden",
     },
     { mergeDefaults: true }
   );

frontend/composables/use-theme.ts

@@ -0,0 +1,40 @@
+import { ComputedRef } from "vue";
+import { DaisyTheme } from "./use-preferences";
+
+export interface UseTheme {
+  theme: ComputedRef<DaisyTheme>;
+  setTheme: (theme: DaisyTheme) => void;
+}
+
+const themeRef = ref<DaisyTheme>("garden");
+
+export function useTheme(): UseTheme {
+  const preferences = useViewPreferences();
+  themeRef.value = preferences.value.theme;
+
+  const setTheme = (newTheme: DaisyTheme) => {
+    preferences.value.theme = newTheme;
+
+    if (htmlEl) {
+      htmlEl.value.setAttribute("data-theme", newTheme);
+    }
+
+    themeRef.value = newTheme;
+  };
+
+  const htmlEl = ref<HTMLElement>(null);
+
+  onMounted(() => {
+    if (htmlEl.value) {
+      return;
+    }
+
+    htmlEl.value = document.querySelector("html");
+  });
+
+  const theme = computed(() => {
+    return themeRef.value;
+  });
+
+  return { theme, setTheme };
+}