feat: seed learning resources and implement competency<>resource UI

app/actions/competency_resource_links.ts

@@ -1,21 +1,35 @@
 'use server';
 
 import { competencyResourceLinkService } from '@/domain_core/services/competency_resource_link';
+import { ResourceMatchType } from '@/domain_core/model/domain_model';
 
 export async function createCompetencyResourceLinkAction(formData: FormData) {
   try {
     const competencyId = formData.get('competencyId') as string | null;
     const resourceId = formData.get('resourceId') as string | null;
     const userId = formData.get('userId') as string | null;
+    const matchType = formData.get('matchType') as ResourceMatchType | null;
 
-    if (!competencyId || !resourceId || !userId) {
+    if (!competencyId || !resourceId || !userId || !matchType) {
       return { success: false, error: 'All fields are required' };
     }
 
+    // Validate matchType is a valid enum value
+    const validMatchTypes: ResourceMatchType[] = [
+      'UNRELATED',
+      'WEAK',
+      'GOOD_FIT',
+      'PERFECT_MATCH',
+    ];
+    if (!validMatchTypes.includes(matchType)) {
+      return { success: false, error: 'Invalid match type' };
+    }
+
     const link = await competencyResourceLinkService.createLink({
       competencyId,
       resourceId,
       userId,
+      matchType,
     });
 
     return { success: true, link };

app/actions/learning_resources.ts

@@ -100,3 +100,18 @@ export async function deleteLearningResourceAction(id: string) {
     };
   }
 }
+
+export async function getRandomLearningResourceAction() {
+  try {
+    const resource = await learningResourceService.getRandomLearningResource();
+    return { success: true, resource };
+  } catch (error) {
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Failed to fetch random learning resource',
+    };
+  }
+}

app/globals.css

@@ -81,3 +81,26 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: rgb(203 213 225);
+    border-radius: 4px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(148 163 184);
+  }
+}

app/layout.tsx

@@ -37,10 +37,10 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div className="relative min-h-screen bg-gradient-to-br from-[#d7e3ff] via-[#f3f5ff] to-[#e8ecff] dark:bg-slate-950">
+          <div className="relative min-h-screen flex flex-col bg-gradient-to-br from-[#d7e3ff] via-[#f3f5ff] to-[#e8ecff] dark:bg-slate-950">
             <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.9),_rgba(237,242,255,0.55))]" />
             <Navbar />
-            {children}
+            <div className="flex-1 flex flex-col w-full">{children}</div>
             <Footer />
           </div>
         </ThemeProvider>

app/page.tsx

@@ -46,7 +46,7 @@ export default function Page() {
                 <span className="bg-gradient-to-r from-[#0a4da2] via-[#5538d1] to-[#9b5dfa] bg-clip-text text-transparent">
                   transparent competency benchmark
                 </span>
-                . Let’s build it together.
+                . Let&apos;s build it together.
               </h1>
               <p className="max-w-4xl text-xl font-medium leading-relaxed text-slate-1000">
                 Memo turns collaborative competency mapping into an open
@@ -92,15 +92,7 @@ export default function Page() {
                 <br />
                 Competency-Based Recommenders
               </h2>
-              <p
-                className="text-lg leading-relaxed text-slate-700"
-                style={{
-                  display: '-webkit-box',
-                  WebkitLineClamp: 2,
-                  WebkitBoxOrient: 'vertical',
-                  overflow: 'hidden',
-                }}
-              >
+              <p className="text-lg leading-relaxed text-slate-700 line-clamp-2">
                 Competency-based recommenders use{' '}
                 <span className="font-semibold text-slate-900">
                   competency networks