Merge pull request #28 from duynd0909/dev

Add Ubuntu deployment plan and enhance submission retrieval

Author: davengn

.github/workflows/deploy.yml

@@ -0,0 +1,70 @@
+name: Build & Deploy
+
+on:
+  push:
+    branches: [main]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_PREFIX: ghcr.io/${{ github.repository_owner }}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run typecheck
+      - run: npm run lint
+      - run: npm run test
+
+  build-and-push:
+    needs: test
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    outputs:
+      image_tag: ${{ steps.meta.outputs.version }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GHCR_TOKEN }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_PREFIX }}/stackdify-api,${{ env.IMAGE_PREFIX }}/stackdify-web
+          tags: |
+            type=sha,prefix=sha- 
+
+      - name: Build & push API image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: apps/api/Dockerfile
+          push: true
+          tags: ${{ env.IMAGE_PREFIX }}/stackdify-api:latest,${{ env.IMAGE_PREFIX }}/stackdify-api:sha-${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Build & push Web image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: apps/web/Dockerfile
+          push: true
+          tags: ${{ env.IMAGE_PREFIX }}/stackdify-web:latest,${{ env.IMAGE_PREFIX }}/stackdify-web:sha-${{ github.sha }}
+          build-args: NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

apps/web/src/app/problems/[slug]/page.tsx

@@ -77,6 +77,7 @@ import {
 import { LabelEdge, type SystemEdgeData } from '@/components/game/LabelEdge';
 import { ResultOverlay } from '@/components/game/ResultOverlay';
 import { RequirementsSidebar } from '@/components/game/RequirementsSidebar';
+import { SubmissionGraphModal } from '@/components/game/SubmissionGraphModal';
 import { iconForComponent } from '@/components/game/component-icons';
 import {
   categoryForComponent,
@@ -697,6 +698,10 @@ export default function ProblemGamePage() {
   const [isMinimapVisible, setIsMinimapVisible] = useState(true);
   const [slotFeedback, setSlotFeedback] = useState<Record<string, boolean>>({});
   const [isGlowMode, setIsGlowMode] = useState(false);
+  const [viewingSubmission, setViewingSubmission] = useState<{
+    id: string;
+    order: number;
+  } | null>(null);
 
   const {
     data: reqGraph,
@@ -1422,8 +1427,10 @@ export default function ProblemGamePage() {
                   currentOrder={currentOrder}
                   completedOrders={completedOrders}
                   isLoading={isGraphLoading}
+                  token={token}
                   onSelectRequirement={handleSelectRequirement}
                   onComponentClick={handleComponentClick}
+                  onViewSubmission={(id, order) => setViewingSubmission({ id, order })}
                 />
               </div>
 
@@ -1596,6 +1603,14 @@ export default function ProblemGamePage() {
         onConfirm={handleLeaveConfirm}
         onCancel={handleLeaveCancel}
       />
+
+      <SubmissionGraphModal
+        submissionId={viewingSubmission?.id ?? null}
+        slug={slug}
+        token={token}
+        componentTypes={problemDetail?.componentTypes ?? []}
+        onClose={() => setViewingSubmission(null)}
+      />
     </div>
   );
 }

apps/web/src/app/problems/page.tsx

@@ -95,7 +95,7 @@ function ProblemCard({
 
         <CardTitle className="mb-2">{problem.title}</CardTitle>
         <CardDescription className="line-clamp-2 flex-1">
-          <div dangerouslySetInnerHTML={{ __html: problem.description }}></div>
+          <span dangerouslySetInnerHTML={{ __html: problem.description }}></span>
         </CardDescription>
 
         {isAuthenticated && problem.requirementCount > 0 && (
@@ -146,7 +146,7 @@ function ProblemListRow({
             )}
           </div>
           <p className="mt-0.5 truncate text-xs text-[var(--text-secondary)]">
-            {problem.description}
+            <span dangerouslySetInnerHTML={{ __html: problem.description }}></span>
           </p>
         </div>
 

apps/web/src/components/game/LabelEdge.tsx

@@ -2,6 +2,7 @@
 
 import type { CSSProperties } from 'react';
 import { useReducedMotion } from 'motion/react';
+import { useTheme } from 'next-themes';
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -43,6 +44,8 @@ export function LabelEdge({
   animated,
 }: EdgeProps) {
   const prefersReduced = useReducedMotion();
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === 'dark';
   const edgeData = data as SystemEdgeData | undefined;
   const kind = edgeData?.kind ?? 'request';
   const isActive = edgeData?.isActive ?? false;
@@ -54,6 +57,7 @@ export function LabelEdge({
   const status: SystemEdgeStatus = isActive ? 'active' : edgeData?.status ?? 'normal';
   const kindStyle = EDGE_KIND_STYLES[kind];
   const stroke = edgeStatusStroke(kind, status);
+  const labelStroke = edgeStatusStroke(kind, status, isDark);
   const shouldAnimate = !prefersReduced && (animated || isActive || kind === 'streaming');
 
   // Separate parallel edges by applying a perpendicular offset
@@ -108,8 +112,8 @@ export function LabelEdge({
               position: 'absolute',
               transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
               pointerEvents: 'all',
-              borderColor: isActive || isHighlighted ? stroke : 'color-mix(in srgb, var(--text-primary) 12%, transparent)',
-              color: stroke,
+              borderColor: isActive || isHighlighted ? labelStroke : 'color-mix(in srgb, var(--text-primary) 12%, transparent)',
+              color: labelStroke,
               opacity: isDimmed ? 0.35 : 1,
             }}
             onMouseEnter={() => edgeData?.onHover?.(id)}