GitCodeViewer/mobile/reader.ets at main · ada87/GitCodeViewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
interface RepoSummary {
  id: string
  name: string
  branch: string
  author: string
  lastSyncLabel: string
  pinned: boolean
}

const RECENT_REPOS: RepoSummary[] = [
  { id: 'workspace-core', name: 'CodeReader', branch: 'main', author: 'ada', lastSyncLabel: '3 min ago', pinned: true },
  { id: 'mobile-ui', name: 'MobileWorkspace', branch: 'feature/header', author: 'lin', lastSyncLabel: '12 min ago', pinned: true },
  { id: 'syntax-lab', name: 'SyntaxFixtures', branch: 'refresh/samples', author: 'mo', lastSyncLabel: '42 min ago', pinned: false },
  { id: 'release-notes', name: 'ReleaseNotes', branch: 'release/1.3.2', author: 'yan', lastSyncLabel: '1 h ago', pinned: false },
  { id: 'android-shell', name: 'AndroidShell', branch: 'fix/safe-area', author: 'qi', lastSyncLabel: '2 h ago', pinned: false },
  { id: 'docs-site', name: 'DocsSite', branch: 'content/runbook', author: 'zhou', lastSyncLabel: 'yesterday', pinned: false },
]

function formatSubtitle(repo: RepoSummary): string {
  return `${repo.branch} · ${repo.author} · ${repo.lastSyncLabel}`
}

@Component
struct RepoCard {
  repo: RepoSummary
  onOpen?: (id: string) => void

  build() {
    Row({ space: 12 }) {
      Column() {
        Text(this.repo.name)
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .fontColor('#1F2937')
        Text(formatSubtitle(this.repo))
          .fontSize(12)
          .fontColor('#6B7280')
          .margin({ top: 6 })
      }
      .layoutWeight(1)
      if (this.repo.pinned) {
        Text('PINNED')
          .fontSize(11)
          .fontColor('#8A5A24')
          .backgroundColor('#FFF4DB')
          .padding({ left: 8, right: 8, top: 4, bottom: 4 })
          .borderRadius(999)
      }
    }
    .padding(16)
    .backgroundColor('#FFFFFF')
    .borderRadius(14)
    .margin({ bottom: 10 })
    .onClick(() => this.onOpen?.(this.repo.id))
  }
}

@Entry
@Component
struct WorkspacePage {
  @State searchText: string = ''
  @State repos: RepoSummary[] = RECENT_REPOS
  @State lastOpenedId: string = 'workspace-core'

  private filteredRepos(): RepoSummary[] {
    const keyword = this.searchText.trim().toLowerCase()
    if (!keyword) {
      return this.repos
    }
    return this.repos.filter((repo: RepoSummary) => {
      return repo.name.toLowerCase().includes(keyword)
        || repo.branch.toLowerCase().includes(keyword)
        || repo.author.toLowerCase().includes(keyword)
    })
  }

  private openRepo(id: string): void {
    this.lastOpenedId = id
    console.info(`open repo ${id}`)
  }

  build() {
    Column({ space: 14 }) {
      Text('Recent Workspaces')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Search({ placeholder: 'Filter by repo, branch, or author' })
        .value(this.searchText)
        .onChange((value: string) => this.searchText = value)
      Text(`Last opened: ${this.lastOpenedId}`)
        .fontSize(12)
        .fontColor('#6B7280')
      List() {
        ForEach(this.filteredRepos(), (repo: RepoSummary) => {
          ListItem() {
            RepoCard({ repo, onOpen: (id: string) => this.openRepo(id) })
          }
        }, (repo: RepoSummary) => repo.id)
      }
      .divider({ strokeWidth: 0 })
      .edgeEffect(EdgeEffect.None)
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor('#F4F7FB')
  }
}