ui: add theme button

Author: feunard

apps/example-saas/src/AppSecurity.ts

@@ -1,5 +1,5 @@
 import { $userRealm } from "alepha/api/users";
 
 export class AppSecurity {
-  realm = $userRealm();
+  realm = $userRealm({});
 }

apps/example-saas/src/main.server.ts

@@ -1,4 +1,3 @@
-import { AlephaDevtools } from "@alepha/devtools";
 import { Alepha, run } from "alepha";
 import { AlephaApiFiles } from "alepha/api/files";
 import { AppRouter } from "./AppRouter.ts";
@@ -7,7 +6,6 @@ import { AppSecurity } from "./AppSecurity.ts";
 const alepha = Alepha.create();
 
 alepha.with(AlephaApiFiles);
-alepha.with(AlephaDevtools);
 alepha.with(AppSecurity);
 alepha.with(AppRouter);
 

apps/roadmap/src/components/project/ProjectBoard.tsx

@@ -73,6 +73,7 @@ const ProjectBoard = () => {
       const result = await taskApi.getTasks({
         params: { projectId: project.id },
         query: {
+          size: 100,
           status,
           search: searchQuery || undefined,
         },

apps/roadmap/src/components/project/QuestLog.tsx

@@ -80,7 +80,7 @@ const QuestLog = () => {
             </Flex>
             <Flex flex={1} />
             <Flex px={1}>
-              <ActionIcon disabled variant={"subtle"}>
+              <ActionIcon variant={"subtle"}>
                 <IconSelector size={theme.icon.size.md} />
               </ActionIcon>
               <Menu
@@ -90,7 +90,7 @@ const QuestLog = () => {
                 position="bottom-start"
               >
                 <Menu.Target>
-                  <ActionIcon disabled variant={"subtle"}>
+                  <ActionIcon variant={"subtle"}>
                     <IconDots size={theme.icon.size.md} />
                   </ActionIcon>
                 </Menu.Target>

apps/roadmap/src/components/shared/HeaderActions.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "@alepha/react";
 import { useAuth } from "@alepha/react/auth";
 import { useI18n } from "@alepha/react/i18n";
-import { DarkModeButton, LanguageButton } from "@alepha/ui";
+import { DarkModeButton, LanguageButton, ThemeButton } from "@alepha/ui";
 import type { AuthRouter } from "@alepha/ui/auth";
 import { Flex, Menu } from "@mantine/core";
 import { IconLogout, IconSettings, IconUser } from "@tabler/icons-react";
@@ -15,6 +15,7 @@ const HeaderActions = () => {
   return (
     <Flex gap={"xs"} align="center" justify="center">
       <AuthButton />
+      <ThemeButton />
       <LanguageButton actionProps={{ variant: "subtle" }} />
       <DarkModeButton actionProps={{ variant: "subtle" }} />
     </Flex>

apps/roadmap/src/constants/theme.ts

@@ -3,11 +3,11 @@ import type { MantineColorScheme, MantineTheme } from "@mantine/core";
 export const theme = {
   defaultColorScheme: "dark" as MantineColorScheme,
   mantine: {
-    primaryColor: "gray",
-    primaryShade: {
-      light: 9,
-      dark: 8,
-    },
+    //primaryColor: "gray",
+    // primaryShade: {
+    //   light: 9,
+    //   dark: 8,
+    // },
     cursorType: "pointer",
   } as MantineTheme,
   container: {

apps/roadmap/src/styles.css

@@ -28,59 +28,9 @@ html {
   }
 }
 
-.root {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.shadow {
-  box-shadow:
-    0 1px 3px var(--alepha-shadow),
-    0 1px 2px var(--alepha-shadow);
-}
-
-.shadow-2 {
-  box-shadow:
-    0 4px 6px var(--alepha-shadow),
-    0 1px 3px var(--alepha-shadow),
-    inset 0 -1px 4px rgba(255, 255, 255, 0.1);
-}
-
-/*
- * ---------------------------------------------------------------------------------------------------------------------
- * Mantine overrides
- */
-
-pre > code {
-  background-color: transparent !important;
-  padding: 0 !important;
-}
-
-.mantine-Drawer-content {
-  border-left: 1px solid var(--paper-border-color);
-  border-right: 1px solid var(--paper-border-color);
-}
-
-.mantine-Modal-content {
-  border: 1px solid var(--alepha-border);
-}
-
-.mantine-SegmentedControl-root {
-  background-color: var(--alepha-surface);
-  border: 1px solid var(--alepha-border);
-}
-
-.mantine-Action-iconOnly .mantine-Button-section {
-  margin-inline-end: 4px;
-  margin-inline-start: 4px;
-}
-
 .tiptap.ProseMirror {
   height: 100%;
   min-height: 200px;
-  background-color: var(--alepha-surface);
 }
 
 /**

packages/alepha/src/api-users/primitives/$userRealm.ts

@@ -48,7 +48,7 @@ export const $userRealm = (
   const userRealmProvider = alepha.inject(UserRealmProvider);
   const name = options.realm?.name ?? DEFAULT_USER_REALM_NAME;
 
-  userRealmProvider.register(name, options);
+  const userRealm = userRealmProvider.register(name, options);
 
   const realm: UserRealmPrimitive = $realm({
     ...options.realm,
@@ -111,13 +111,19 @@ export const $userRealm = (
     const auth: Record<string, AuthPrimitive> = {};
     if (identities.credentials) {
       auth.credentials = $authCredentials(realm);
+    } else {
+      // if credentials auth is disabled, disable registration as well
+      userRealm.settings.registrationAllowed = false;
     }
+
     if (identities.google) {
       auth.google = $authGoogle(realm);
     }
+
     if (identities.github) {
       auth.github = $authGithub(realm);
     }
+
     alepha.with(() => auth);
   }
 

packages/alepha/src/api-users/providers/UserRealmProvider.ts

@@ -70,6 +70,7 @@ export class UserRealmProvider {
         },
       },
     });
+    return this.getRealm(userRealmName);
   }
 
   /**

packages/alepha/src/server-cookies/providers/ServerCookiesProvider.ts

@@ -11,6 +11,7 @@ import {
   $hook,
   $inject,
   Alepha,
+  AlephaError,
   type Static,
   type TSchema,
   t,
@@ -89,7 +90,7 @@ export class ServerCookiesProvider {
       this.alepha.context.get<ServerRequest>("request")?.cookies;
     if (cookies) return cookies;
     if (contextCookies) return contextCookies;
-    throw new Error(
+    throw new AlephaError(
       "Cookie context is not available. This method must be called within a server request cycle.",
     );
   }