feat: display project rules

Author: sifferhans

frontend/app/api/generated.ts

@@ -248,6 +248,7 @@ export type CreateProjectInput = {
   description?: InputMaybe<Scalars['String']['input']>;
   endDate: Scalars['DateTime']['input'];
   name: Scalars['String']['input'];
+  rules?: InputMaybe<Scalars['String']['input']>;
   startDate: Scalars['DateTime']['input'];
 };
 
@@ -456,6 +457,12 @@ export type ListeningAchievement = Achievement & {
   userHasListened: Array<Track>;
 };
 
+export type MarkdownText = {
+  __typename?: 'MarkdownText';
+  html: Scalars['String']['output'];
+  markdown: Scalars['String']['output'];
+};
+
 export type Mutation = {
   __typename?: 'Mutation';
   _empty?: Maybe<Scalars['Boolean']['output']>;
@@ -919,6 +926,7 @@ export type Project = {
   leaderboard: LeaderboardConnection;
   myTeam?: Maybe<Team>;
   name: Scalars['String']['output'];
+  rules?: Maybe<MarkdownText>;
   startDate: Scalars['DateTime']['output'];
   streaks: Array<Streak>;
   teams: Array<Team>;
@@ -1461,6 +1469,7 @@ export type UpdateProjectInput = {
   description?: InputMaybe<Scalars['String']['input']>;
   endDate?: InputMaybe<Scalars['DateTime']['input']>;
   name?: InputMaybe<Scalars['String']['input']>;
+  rules?: InputMaybe<Scalars['String']['input']>;
   startDate?: InputMaybe<Scalars['DateTime']['input']>;
 };
 
@@ -1554,6 +1563,11 @@ export type UserRole = {
   user: User;
 };
 
+export type ProjectRulesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ProjectRulesQuery = { __typename?: 'Query', myCurrentProject: { __typename?: 'Project', rules?: { __typename?: 'MarkdownText', markdown: string, html: string } | null } };
+
 export type PointHistoryQueryVariables = Exact<{
   first?: InputMaybe<Scalars['Int']['input']>;
 }>;
@@ -1948,6 +1962,20 @@ export type ProfilePageQuery = { __typename?: 'Query', me: { __typename?: 'User'
     >, leaderboard: { __typename?: 'LeaderboardConnection', me?: { __typename?: 'LeaderboardEntry', score: number, rank?: number | null } | null } } };
 
 
+export const ProjectRulesDocument = gql`
+    query ProjectRules {
+  myCurrentProject {
+    rules {
+      markdown
+      html
+    }
+  }
+}
+    `;
+
+export function useProjectRulesQuery(options?: Omit<Urql.UseQueryArgs<never, ProjectRulesQueryVariables | undefined>, 'query'>) {
+  return Urql.useQuery<ProjectRulesQuery, ProjectRulesQueryVariables | undefined>({ query: ProjectRulesDocument, variables: undefined, ...options });
+};
 export const PointHistoryDocument = gql`
     query PointHistory($first: Int) {
   myCurrentProject {

frontend/app/components/profile/ProfileGetPoints.vue

@@ -1,4 +1,20 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+gql(`
+  query ProjectRules {
+    myCurrentProject {
+      rules {
+        markdown
+        html
+      }
+    }
+  }
+`)
+
+const { isAuthReady } = useAuthReady()
+const { data, fetching, error } = useProjectRulesQuery({
+  pause: computed(() => !isAuthReady.value),
+})
+</script>
 
 <template>
   <UModal
@@ -13,7 +29,38 @@
         <template #action>
           <DesignIconButton icon="lucide:x" @click="close" />
         </template>
+
+        <LoadingState v-if="fetching" />
+        <ErrorState v-else-if="error" :error />
+        <div
+          v-else-if="data?.myCurrentProject.rules"
+          id="project-rules"
+          class="p-default"
+          v-html="data.myCurrentProject.rules.html"
+        />
       </PageLayout>
     </template>
   </UModal>
 </template>
+
+<style>
+#project-rules h1,
+#project-rules h2,
+#project-rules h3 {
+  font-size: var(--font-size-title);
+  line-height: var(--line-height-title);
+  font-weight: var(--font-weight-title);
+  letter-spacing: var(--letter-spacing-title);
+  color: var(--color-text-default);
+  margin-bottom: 4px;
+  margin-top: 16px;
+}
+
+#project-rules p {
+  font-size: var(--font-size-paragraph);
+  line-height: var(--line-height-paragraph);
+  font-weight: var(--font-weight-paragraph);
+  letter-spacing: var(--letter-spacing-paragraph);
+  color: var(--color-text-default);
+}
+</style>