fix: add icon for github mirrors

Author: marcus-pousette

packages/apps/explorer/src/components/GithubImportCard.tsx

@@ -13,6 +13,7 @@ import {
 } from '@ps/daemon-client'
 import type { Database } from '@ps/schema'
 import { useTheme } from '../ui/theme-context'
+import { FaGithub } from 'react-icons/fa'
 
 export const REPO_IMPORT_EVENT = '__powergit:repo-imported'
 
@@ -111,6 +112,11 @@ export function GithubImportCard(): React.JSX.Element | null {
     job?.branch ??
     null
 
+  const isGithubMirrorTarget =
+    typeof resultOrgId === 'string' && resultOrgId.startsWith('gh-') && resultOrgId.length > 3
+  const displayTargetOrgId =
+    typeof resultOrgId === 'string' ? (isGithubMirrorTarget ? resultOrgId.slice(3) : resultOrgId) : ''
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     setError(null)
@@ -249,7 +255,17 @@ export function GithubImportCard(): React.JSX.Element | null {
       {showSummary && resultOrgId && resultRepoId ? (
         <div className={`${summaryContainerClass} mt-3 flex flex-wrap items-center gap-2`} data-testid="import-summary">
           <div className={isDark ? 'font-medium text-slate-100' : 'font-medium text-slate-800'}>
-            Target: <code>{resultOrgId}/{resultRepoId}</code>
+            Target:{' '}
+            <span className="inline-flex items-center gap-1">
+              {isGithubMirrorTarget ? (
+                <FaGithub
+                  className={`${isDark ? 'text-slate-200' : 'text-slate-500'} text-[14px]`}
+                  title="GitHub mirror"
+                  aria-hidden
+                />
+              ) : null}
+              <code>{displayTargetOrgId}/{resultRepoId}</code>
+            </span>
           </div>
           <div className={isDark ? 'text-slate-200' : 'text-slate-600'}>
             Status: <span className="uppercase tracking-wide text-[11px]">{displayStatus}</span>

packages/apps/explorer/src/routes/index.tsx

@@ -9,6 +9,7 @@ import type { Database } from '@ps/schema'
 import { useTheme } from '../ui/theme-context'
 import { deleteDaemonRepo, isDaemonPreferred } from '@ps/daemon-client'
 import { IoTrashOutline } from 'react-icons/io5'
+import { FaGithub } from 'react-icons/fa'
 import { InlineSpinner } from '../components/InlineSpinner'
 
 type HomeSearch = {
@@ -280,6 +281,8 @@ export function Home() {
             {sortedSummaries.map((repo) => {
               const branchCount = Array.from(repo.branches).filter((name) => name && name !== 'HEAD').length
               const importStatus = repo.status?.trim().toLowerCase() ?? null
+              const isGithubMirror = repo.orgId.startsWith('gh-') && repo.orgId.length > 3
+              const displayOrgId = isGithubMirror ? repo.orgId.slice(3) : repo.orgId
               const branchSummary = (() => {
                 if (branchCount > 0) return `${branchCount} branch${branchCount === 1 ? '' : 'es'}`
                 if (importStatus === 'queued') return 'Import queued'
@@ -293,9 +296,20 @@ export function Home() {
                 <li key={repoKey} className={repoCardBase}>
                   <div className="space-y-1">
                     <div className={`text-base font-semibold ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
-                      {repo.orgId}
-                      <span className="text-slate-400">/</span>
-                      {repo.repoId}
+                      <span className="inline-flex items-center gap-2">
+                        {isGithubMirror ? (
+                          <FaGithub
+                            className={`${isDark ? 'text-slate-300' : 'text-slate-500'} text-[16px]`}
+                            title="GitHub mirror"
+                            aria-hidden
+                          />
+                        ) : null}
+                        <span>
+                          {displayOrgId}
+                          <span className="text-slate-400">/</span>
+                          {repo.repoId}
+                        </span>
+                      </span>
                     </div>
                     <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
                       {branchSummary} · Updated {formatTimestamp(repo.updatedAt)}

packages/apps/explorer/src/routes/org.$orgId.repo.$repoId.index.tsx

@@ -6,6 +6,7 @@ import { useCollections } from '@tsdb/collections'
 import { useLiveQuery } from '@tanstack/react-db'
 import type { Database } from '@ps/schema'
 import { useTheme } from '../ui/theme-context'
+import { FaGithub } from 'react-icons/fa'
 
 export const Route = createFileRoute('/org/$orgId/repo/$repoId/' as any)({
   component: RepoOverview,
@@ -15,6 +16,8 @@ function RepoOverview() {
   const { orgId, repoId } = Route.useParams()
   const { theme } = useTheme()
   const isDark = theme === 'dark'
+  const isGithubMirror = orgId.startsWith('gh-') && orgId.length > 3
+  const displayOrgId = isGithubMirror ? orgId.slice(3) : orgId
   useRepoStreams(orgId, repoId)
   const { refs } = useCollections()
 
@@ -48,7 +51,19 @@ function RepoOverview() {
   return (
     <div className="mx-auto max-w-6xl space-y-4">
       <h2 className={headingClass}>
-        Repo: {orgId}/{repoId}
+        Repo:{' '}
+        <span className="inline-flex items-center gap-2">
+          {isGithubMirror ? (
+            <FaGithub
+              className={`${isDark ? 'text-slate-300' : 'text-slate-500'} text-[18px]`}
+              title="GitHub mirror"
+              aria-hidden
+            />
+          ) : null}
+          <span>
+            {displayOrgId}/{repoId}
+          </span>
+        </span>
       </h2>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div className={cardClass}>