added mobile view and resolves comments

Rajgupta36 · Rajgupta36 · commit b322dc24d110 · 2025-10-18T12:30:33.000+05:30
diff --git a/backend/apps/github/api/internal/nodes/issue.py b/backend/apps/github/api/internal/nodes/issue.py
@@ -51,6 +51,11 @@ def labels(self) -> list[str]:
         """Resolve label names for the issue."""
         return list(self.labels.values_list("name", flat=True))
 
+    @strawberry.field
+    def is_merged(self) -> bool:
+        """Return True if this issue has at least one merged pull request."""
+        return self.pull_requests.filter(state="closed", merged_at__isnull=False).exists()
+
     @strawberry.field
     def interested_users(self) -> list[UserNode]:
         """Return all users who have expressed interest in this issue."""
@@ -65,3 +70,4 @@ def interested_users(self) -> list[UserNode]:
     def pull_requests(self) -> list[PullRequestNode]:
         """Return all pull requests linked to this issue."""
         return list(self.pull_requests.select_related("author", "repository").all())
+
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
@@ -32,6 +32,26 @@ import { TruncatedText } from 'components/TruncatedText'
 const ModuleIssueDetailsPage = () => {
   const params = useParams() as { programKey: string; moduleKey: string; issueId: string }
   const { programKey, moduleKey, issueId } = params
+
+  const formatDeadline = (deadline: string | null) => {
+    if (!deadline) return { text: 'No deadline set', color: 'text-gray-600 dark:text-gray-300' }
+
+    const deadlineDate = new Date(deadline)
+    const today = new Date()
+    const isOverdue = deadlineDate < today
+    const daysLeft = Math.ceil((deadlineDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+
+    const statusText = isOverdue
+      ? '(overdue)'
+      : daysLeft === 0
+        ? '(today)'
+        : `(${daysLeft} days left)`
+
+    return {
+      text: `${deadlineDate.toLocaleDateString()} ${statusText}`,
+      color: 'text-[#DA3633]',
+    }
+  }
   const { data, loading, error } = useQuery(GET_MODULE_ISSUE_VIEW, {
     variables: { programKey, moduleKey, number: Number(issueId) },
     skip: !issueId,
@@ -167,10 +187,14 @@ const ModuleIssueDetailsPage = () => {
               </span>
               <span
                 className={`inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium ${
-                  issue.state === 'open' ? 'bg-[#2cbe4e] text-white' : 'bg-[#cb2431] text-white'
+                  issue.state === 'open'
+                    ? 'bg-[#238636] text-white'
+                    : issue.isMerged
+                      ? 'bg-[#8657E5] text-white'
+                      : 'bg-[#DA3633] text-white'
                 }`}
               >
-                {issue.state === 'open' ? 'Open' : 'Closed'}
+                {issue.state === 'open' ? 'Open' : issue.isMerged ? 'Merged' : 'Closed'}
               </span>
             </div>
           </div>
@@ -195,23 +219,18 @@ const ModuleIssueDetailsPage = () => {
             </div>
 
             <div className="flex flex-col gap-2">
-              <div className="flex flex-wrap items-center gap-2">
-                <span className="font-medium">Deadline:</span>
+              <div className="flex flex-wrap items-center">
+                <span className="font-medium">Deadline: </span>
                 {isEditingDeadline && canEditDeadline ? (
-                  <span className="inline-flex items-center gap-2">
-                    <input
-                      type="date"
-                      value={deadlineInput}
-                      onChange={(e) => setDeadlineInput(e.target.value)}
-                      min={new Date().toISOString().slice(0, 10)}
-                      className="h-8 rounded border border-gray-300 px-2 text-xs dark:border-gray-600"
-                    />
-                    <button
-                      type="button"
-                      disabled={!deadlineInput || settingDeadline}
-                      onClick={async () => {
-                        if (!deadlineInput || settingDeadline || !issueId) return
-                        const localDate = new Date(deadlineInput + 'T23:59:59')
+                  <input
+                    type="date"
+                    value={deadlineInput}
+                    onChange={async (e) => {
+                      const newValue = e.target.value
+                      setDeadlineInput(newValue)
+
+                      if (newValue && !settingDeadline && issueId) {
+                        const localDate = new Date(newValue + 'T23:59:59')
                         const iso = localDate.toISOString()
                         await setTaskDeadlineMutation({
                           variables: {
@@ -221,64 +240,35 @@ const ModuleIssueDetailsPage = () => {
                             deadlineAt: iso,
                           },
                         })
-                      }}
-                      className="flex items-center justify-center rounded-md border border-[#1D7BD7] px-3 py-1 text-xs font-medium text-[#1D7BD7] transition-all hover:bg-[#1D7BD7] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {settingDeadline ? 'Saving…' : 'Save'}
-                    </button>
-                    <button
-                      type="button"
-                      aria-label="Cancel deadline edit"
-                      title="Cancel"
-                      onClick={() => {
-                        setDeadlineInput(
-                          taskDeadline ? new Date(taskDeadline).toISOString().slice(0, 10) : ''
-                        )
                         setIsEditingDeadline(false)
-                      }}
-                      className="inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                      <FontAwesomeIcon icon={faXmark} className="h-3.5 w-3.5" />
-                    </button>
-                  </span>
+                      }
+                    }}
+                    min={new Date().toISOString().slice(0, 10)}
+                    className="h-8 rounded border border-gray-300 px-2 text-xs dark:border-gray-600"
+                  />
                 ) : (
-                  <span className="inline-flex items-center gap-2">
-                    {(() => {
-                      if (!taskDeadline) {
-                        return (
-                          <span className="text-xs font-medium text-gray-600 dark:text-gray-300">
-                            No deadline set
-                          </span>
+                  <button
+                    type="button"
+                    disabled={!canEditDeadline}
+                    onClick={() => {
+                      if (canEditDeadline) {
+                        setDeadlineInput(
+                          taskDeadline ? new Date(taskDeadline).toISOString().slice(0, 10) : ''
                         )
+                        setIsEditingDeadline(true)
                       }
-                      const d = new Date(taskDeadline)
-                      const today = new Date()
-                      const isPast = d.setHours(0, 0, 0, 0) < today.setHours(0, 0, 0, 0)
-                      const diffDays = Math.ceil(
-                        (d.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)
-                      )
-                      const textClass = 'text-red-700 dark:text-red-300'
-                      return (
-                        <span className={`text-xs font-medium ${textClass}`}>
-                          {d.toLocaleDateString()}{' '}
-                          {isPast
-                            ? '(overdue)'
-                            : diffDays > 0
-                              ? `(in ${diffDays} days)`
-                              : '(today)'}
-                        </span>
-                      )
+                    }}
+                    className={`inline-flex items-center gap-2 rounded px-2 py-1 text-left transition-colors ${
+                      canEditDeadline
+                        ? 'hover:bg-gray-100 dark:hover:bg-gray-800'
+                        : 'cursor-not-allowed'
+                    }`}
+                  >
+                    {(() => {
+                      const { text, color } = formatDeadline(taskDeadline)
+                      return <span className={`text-xs font-medium ${color}`}>{text}</span>
                     })()}
-                    {canEditDeadline && (
-                      <button
-                        type="button"
-                        className="ml-2 text-xs text-blue-600 hover:underline dark:text-blue-400"
-                        onClick={() => setIsEditingDeadline(true)}
-                      >
-                        Edit
-                      </button>
-                    )}
-                  </span>
+                  </button>
                 )}
               </div>
             </div>
@@ -407,21 +397,21 @@ const ModuleIssueDetailsPage = () => {
                     {pr.state === 'closed' && pr.mergedAt ? (
                       <span
                         className="inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium text-white"
-                        style={{ backgroundColor: '#6f42c1' }}
+                        style={{ backgroundColor: '#8657E5' }}
                       >
                         Merged
                       </span>
                     ) : pr.state === 'closed' ? (
                       <span
                         className="inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium text-white"
-                        style={{ backgroundColor: '#cb2431' }}
+                        style={{ backgroundColor: '#DA3633' }}
                       >
                         Closed
                       </span>
                     ) : (
                       <span
                         className="inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium text-white"
-                        style={{ backgroundColor: '#2cbe4e' }}
+                        style={{ backgroundColor: '#238636' }}
                       >
                         Open
                       </span>
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx
@@ -44,6 +44,7 @@ const IssuesPage = () => {
     number: number
     title: string
     state: string
+    isMerged: boolean
     labels: string[]
     assignees: Array<{ avatarUrl: string; login: string; name: string }>
   }
@@ -54,6 +55,7 @@ const IssuesPage = () => {
       number: i.number,
       title: i.title,
       state: i.state,
+      isMerged: i.isMerged,
       labels: i.labels || [],
       assignees: i.assignees || [],
     }))
@@ -135,7 +137,8 @@ const IssuesPage = () => {
           </div>
         </div>
 
-        <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+        {/* Desktop Table - unchanged */}
+        <div className="hidden overflow-hidden rounded-lg border border-gray-200 lg:block dark:border-gray-700">
           <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
             <thead className="bg-gray-50 dark:bg-[#2a2e33]">
               <tr>
@@ -186,16 +189,20 @@ const IssuesPage = () => {
                       </button>
                     </Tooltip>
                   </td>
-                  <td className="px-6 py-4 text-sm whitespace-nowrap">
-                    <span
-                      className={`inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium ${
-                        issue.state === 'open'
-                          ? 'bg-[#2cbe4e] text-white'
-                          : 'bg-[#cb2431] text-white'
-                      }`}
-                    >
-                      {issue.state === 'open' ? 'Open' : 'Closed'}
-                    </span>
+                  <td className="px-6 py-4 text-center text-sm whitespace-nowrap">
+                    <div className="flex justify-center">
+                      <span
+                        className={`inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-medium ${
+                          issue.state === 'open'
+                            ? 'bg-[#238636] text-white'
+                            : issue.isMerged
+                              ? 'bg-[#8657E5] text-white'
+                              : 'bg-[#DA3633] text-white'
+                        }`}
+                      >
+                        {issue.state === 'open' ? 'Open' : issue.isMerged ? 'Merged' : 'Closed'}
+                      </span>
+                    </div>
                   </td>
                   <td className="px-6 py-4">
                     <div className="flex flex-wrap gap-2">
@@ -234,7 +241,9 @@ const IssuesPage = () => {
                             alt={issue.assignees[0].login}
                             className="rounded-full"
                           />
-                          <span>{issue.assignees[0].login || issue.assignees[0].name}</span>
+                          <span className="max-w-[80px] truncate sm:max-w-[100px] md:max-w-[120px] lg:max-w-[150px]">
+                            {issue.assignees[0].login || issue.assignees[0].name}
+                          </span>
                         </div>
                         {issue.assignees.length > 1 && (
                           <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
@@ -260,6 +269,79 @@ const IssuesPage = () => {
           </table>
         </div>
 
+        {/* Mobile & Tablet Cards */}
+        <div className="space-y-6 lg:hidden">
+          {moduleIssues.map((issue) => (
+            <div
+              key={issue.objectID}
+              className="rounded-lg border border-gray-200 bg-white p-4 mt-4 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-[#1f2327]"
+            >
+              <div className="mb-3 flex items-start justify-between gap-3">
+                <button
+                  type="button"
+                  onClick={() => handleIssueClick(Number(issue.number))}
+                  className="flex-1 text-left text-sm font-medium text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
+                >
+                  {issue.title}
+                </button>
+                <span
+                  className={`inline-flex flex-shrink-0 items-center rounded-full px-2 py-1 text-xs font-medium ${
+                    issue.state === 'open'
+                      ? 'bg-[#238636] text-white'
+                      : issue.isMerged
+                        ? 'bg-[#8657E5] text-white'
+                        : 'bg-[#DA3633] text-white'
+                  }`}
+                >
+                  {issue.state === 'open' ? 'Open' : issue.isMerged ? 'Merged' : 'Closed'}
+                </span>
+              </div>
+
+              {issue.labels?.length > 0 && (
+                <div className="mb-3 flex flex-wrap gap-1">
+                  {issue.labels.slice(0, 3).map((label) => (
+                    <span
+                      key={label}
+                      className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+                    >
+                      {label}
+                    </span>
+                  ))}
+                  {issue.labels.length > 3 && (
+                    <span className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+                      +{issue.labels.length - 3}
+                    </span>
+                  )}
+                </div>
+              )}
+
+              {issue.assignees?.length > 0 && (
+                <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+                  <Image
+                    height={18}
+                    width={18}
+                    src={issue.assignees[0].avatarUrl}
+                    alt={issue.assignees[0].login}
+                    className="rounded-full"
+                  />
+                  <span className="truncate">
+                    {issue.assignees[0].login || issue.assignees[0].name}
+                    {issue.assignees.length > 1 && ` +${issue.assignees.length - 1}`}
+                  </span>
+                </div>
+              )}
+            </div>
+          ))}
+
+          {moduleIssues.length === 0 && (
+            <div className="rounded-lg border border-gray-200 bg-white p-6 text-center dark:border-gray-700 dark:bg-[#1f2327]">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                No issues found for the selected filter.
+              </p>
+            </div>
+          )}
+        </div>
+
         {/* Pagination Controls */}
         <Pagination
           currentPage={currentPage}
diff --git a/frontend/src/server/queries/issueQueries.ts b/frontend/src/server/queries/issueQueries.ts
@@ -13,6 +13,7 @@ export const GET_MODULE_ISSUE_VIEW = gql`
         body
         url
         state
+        isMerged
         organizationName
         repositoryName
         assignees {
diff --git a/frontend/src/server/queries/moduleQueries.ts b/frontend/src/server/queries/moduleQueries.ts
@@ -94,6 +94,7 @@ export const GET_MODULE_ISSUES = gql`
         number
         title
         state
+        isMerged
         labels
         assignees {
           avatarUrl
