patch of appview/pages: rework profile overview page to use tabs model · round #0 · pull #540 · tangled.org/core

+14

appview/db/profile.go

···

       22
       22
        
       	ByMonth []ByMonth

     

       23
       23
        
       }

     

       24
       24
        
       

     

       25
       25
       +
       func (p *ProfileTimeline) IsEmpty() bool {

     

       26
       26
       +
       	if p == nil {

     

       27
       27
       +
       		return true

     

       28
       28
       +
       	}

     

       29
       29
       +
       

     

       30
       30
       +
       	for _, m := range p.ByMonth {

     

       31
       31
       +
       		if !m.IsEmpty() {

     

       32
       32
       +
       			return false

     

       33
       33
       +
       		}

     

       34
       34
       +
       	}

     

       35
       35
       +
       

     

       36
       36
       +
       	return true

     

       37
       37
       +
       }

     

       38
       38
       +
       

     

       25
       39
        
       type ByMonth struct {

     

       26
       40
        
       	RepoEvents  []RepoEvent

     

       27
       41
        
       	IssueEvents IssueEvents

+4 -4

appview/db/punchcard.go

···

       29
       29
        
       	Punches []Punch

     

       30
       30
        
       }

     

       31
       31
        
       

     

       32
       32
       -
       func MakePunchcard(e Execer, filters ...filter) (Punchcard, error) {

     

       33
       33
       -
       	punchcard := Punchcard{}

     

       32
       32
       +
       func MakePunchcard(e Execer, filters ...filter) (*Punchcard, error) {

     

       33
       33
       +
       	punchcard := &Punchcard{}

     

       34
       34
        
       	now := time.Now()

     

       35
       35
        
       	startOfYear := time.Date(now.Year(), 1, 1, 0, 0, 0, 0, time.UTC)

     

       36
       36
        
       	endOfYear := time.Date(now.Year(), 12, 31, 0, 0, 0, 0, time.UTC)

     
···

       63
       63
        
       

     

       64
       64
        
       	rows, err := e.Query(query, args...)

     

       65
       65
        
       	if err != nil {

     

       66
       66
       -
       		return punchcard, err

     

       66
       66
       +
       		return nil, err

     

       67
       67
        
       	}

     

       68
       68
        
       	defer rows.Close()

     

       69
       69
        
       

     
···

       72
       72
        
       		var date string

     

       73
       73
        
       		var count sql.NullInt64

     

       74
       74
        
       		if err := rows.Scan(&date, &count); err != nil {

     

       75
       75
       -
       			return punchcard, err

     

       75
       75
       +
       			return nil, err

     

       76
       76
        
       		}

     

       77
       77
        
       

     

       78
       78
        
       		punch.Date, err = time.Parse(time.DateOnly, date)

+28 -9

appview/pages/pages.go

···

       409
       409
        
       	return p.execute("repo/fork", w, params)

     

       410
       410
        
       }

     

       411
       411
        
       

     

       412
       412
       -
       type ProfileHomePageParams struct {

     

       413
       413
       -
       	LoggedInUser       *oauth.User

     

       414
       414
       -
       	Repos              []db.Repo

     

       415
       415
       -
       	CollaboratingRepos []db.Repo

     

       416
       416
       -
       	ProfileTimeline    *db.ProfileTimeline

     

       417
       417
       -
       	Card               ProfileCard

     

       418
       418
       -
       	Punchcard          db.Punchcard

     

       419
       419
       -
       }

     

       420
       420
       -
       

     

       421
       412
        
       type ProfileCard struct {

     

       422
       413
        
       	UserDid        string

     

       423
       414
        
       	UserHandle     string

     

       424
       415
        
       	FollowStatus   db.FollowStatus

     

       425
       416
        
       	FollowersCount int

     

       426
       417
        
       	FollowingCount int

     

       418
       418
       +
       	Punchcard      *db.Punchcard

     

       419
       419
       +
       	Profile        *db.Profile

     

       420
       420
       +
       	Active         string

     

       421
       421
       +
       }

     

       422
       422
       +
       

     

       423
       423
       +
       func (p *ProfileCard) GetTabs() [][]string {

     

       424
       424
       +
       	tabs := [][]string{

     

       425
       425
       +
       		{"overview", "overview", "square-chart-gantt"},

     

       426
       426
       +
       		{"repos", "repos", "book-marked"},

     

       427
       427
       +
       		{"starred", "starred", "star"},

     

       428
       428
       +
       	}

     

       429
       429
       +
       

     

       430
       430
       +
       	return tabs

     

       431
       431
       +
       }

     

       432
       432
       +
       

     

       433
       433
       +
       type ProfileOverviewParams struct {

     

       434
       434
       +
       	LoggedInUser       *oauth.User

     

       435
       435
       +
       	Repos              []db.Repo

     

       436
       436
       +
       	CollaboratingRepos []db.Repo

     

       437
       437
       +
       	ProfileTimeline    *db.ProfileTimeline

     

       438
       438
       +
       	Card               *ProfileCard

     

       439
       439
       +
       	Active             string

     

       440
       440
       +
       }

     

       441
       441
       +
       

     

       442
       442
       +
       func (p *Pages) ProfileOverview(w io.Writer, params ProfileOverviewParams) error {

     

       443
       443
       +
       	params.Active = "overview"

     

       444
       444
       +
       	return p.executeProfile("user/overview", w, params)

     

       445
       445
       +
       }

     

       427
       446
        
       

     

       428
       447
        
       	Profile *db.Profile

     

       429
       448
        
       }

+1 -1

appview/pages/templates/user/fragments/editBio.html

···

       13
       13
        
             <label class="m-0 p-0" for="description">bio</label>

     

       14
       14
        
             <textarea 

     

       15
       15
        
               type="text" 

     

       16
       16
       -
               class="py-1 px-1 w-full" 

     

       16
       16
       +
               class="p-2 w-full" 

     

       17
       17
        
               name="description" 

     

       18
       18
        
               rows="3"

     

       19
       19
        
               placeholder="write a bio">{{ $description }}</textarea>

-2

appview/pages/templates/user/fragments/profileCard.html

···

       1
       1
        
       {{ define "user/fragments/profileCard" }}

     

       2
       2
        
         {{ $userIdent := didOrHandle .UserDid .UserHandle }}

     

       3
       3
       -
         <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm max-h-fit">

     

       4
       3
        
           <div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center">

     

       5
       4
        
             <div id="avatar" class="col-span-1 flex justify-center items-center">

     

       6
       5
        
               <div class="w-3/4 aspect-square relative">

     
···

       85
       84
        
               <div id="update-profile" class="text-red-400 dark:text-red-500"></div>

     

       86
       85
        
             </div>

     

       87
       86
        
           </div>

     

       88
       88
       -
         </div>

     

       89
       87
        
       {{ end }}

     

       90
       88
        
       

     

       91
       89
        
       {{ define "followerFollowing" }}

+37 -97

appview/pages/templates/user/profile.html appview/pages/templates/user/overview.html

···

       1
       1
        
       {{ define "title" }}{{ or .Card.UserHandle .Card.UserDid }}{{ end }}

     

       2
       2
        
       

     

       3
       3
       -
       {{ define "extrameta" }}

     

       4
       4
       -
           <meta property="og:title" content="{{ or .Card.UserHandle .Card.UserDid }}" />

     

       5
       5
       -
           <meta property="og:type" content="profile" />

     

       6
       6
       -
           <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}" />

     

       7
       7
       -
           <meta property="og:description" content="{{ or .Card.Profile.Description .Card.UserHandle .Card.UserDid }}" />

     

       8
       8
       -
       {{ end }}

     

       9
       9
       -
       

     

       10
       10
       -
       {{ define "content" }}

     

       11
       11
       -
       <div class="grid grid-cols-1 md:grid-cols-11 gap-4">

     

       12
       12
       -
           <div class="md:col-span-3 order-1 md:order-1">

     

       13
       13
       -
             <div class="grid grid-cols-1 gap-4">

     

       14
       14
       -
               {{ template "user/fragments/profileCard" .Card }}

     

       15
       15
       -
               {{ block "punchcard" .Punchcard }} {{ end }}

     

       16
       16
       -
             </div>

     

       17
       17
       -
           </div>

     

       18
       18
       -
           <div id="all-repos" class="md:col-span-4 order-2 md:order-2">

     

       19
       19
       -
             <div class="grid grid-cols-1 gap-4">

     

       20
       20
       -
               {{ block "ownRepos" . }}{{ end }}

     

       21
       21
       -
               {{ block "collaboratingRepos" . }}{{ end }}

     

       22
       22
       -
             </div>

     

       23
       23
       -
           </div>

     

       24
       24
       -
           <div class="md:col-span-4 order-3 md:order-3">

     

       25
       25
       -
               {{ block "profileTimeline" . }}{{ end }}

     

       3
       3
       +
       {{ define "profileContent" }}

     

       4
       4
       +
         <div id="all-repos" class="md:col-span-4 order-2 md:order-2">

     

       5
       5
       +
           <div class="grid grid-cols-1 gap-4">

     

       6
       6
       +
             {{ block "ownRepos" . }}{{ end }}

     

       7
       7
       +
             {{ block "collaboratingRepos" . }}{{ end }}

     

       26
       8
        
           </div>

     

       27
       27
       -
       </div>

     

       9
       9
       +
         </div>

     

       10
       10
       +
         <div class="md:col-span-4 order-3 md:order-3">

     

       11
       11
       +
             {{ block "profileTimeline" . }}{{ end }}

     

       12
       12
       +
         </div>

     

       28
       13
        
       {{ end }}

     

       29
       14
        
       

     

       30
       15
        
       {{ define "profileTimeline" }}

     

       31
       31
       -
         <p class="text-sm font-bold p-2 dark:text-white">ACTIVITY</p>

     

       16
       16
       +
         <p class="text-sm font-bold px-2 pb-4 dark:text-white">ACTIVITY</p>

     

       32
       17
        
         <div class="flex flex-col gap-4 relative">

     

       18
       18
       +
           {{ if .ProfileTimeline.IsEmpty }}

     

       19
       19
       +
             <p class="dark:text-white">This user does not have any activity yet.</p>

     

       20
       20
       +
           {{ end }}

     

       21
       21
       +
       

     

       33
       22
        
           {{ with .ProfileTimeline }}

     

       34
       23
        
             {{ range $idx, $byMonth := .ByMonth }}

     

       35
       24
        
               {{ with $byMonth }}

     

       36
       36
       -
               <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm">

     

       37
       37
       -
                 {{ if eq $idx 0 }}

     

       38
       38
       -
       

     

       39
       39
       -
                 {{ else }}

     

       40
       40
       -
                   {{ $s := "s" }}

     

       41
       41
       -
                   {{ if eq $idx 1 }}

     

       42
       42
       -
                     {{ $s = "" }}

     

       43
       43
       -
                   {{ end }}

     

       44
       44
       -
                   <p class="text-sm font-bold dark:text-white mb-2">{{$idx}} month{{$s}} ago</p>

     

       45
       45
       -
                 {{ end }}

     

       25
       25
       +
                 {{ if not .IsEmpty }}

     

       26
       26
       +
                   <div class="border border-gray-200 dark:border-gray-700 rounded-sm py-4 px-6">

     

       27
       27
       +
                   <p class="text-sm font-mono mb-2 text-gray-500 dark:text-gray-400">

     

       28
       28
       +
                     {{ if eq $idx 0 }}

     

       29
       29
       +
                       this month

     

       30
       30
       +
                     {{ else }}

     

       31
       31
       +
                       {{$idx}} month{{if ne $idx 1}}s{{end}} ago

     

       32
       32
       +
                     {{ end }}

     

       33
       33
       +
                   </p>

     

       46
       34
        
       

     

       47
       47
       -
                 {{ if .IsEmpty }}

     

       48
       48
       -
                   <div class="text-gray-500 dark:text-gray-400">

     

       49
       49
       -
                     No activity for this month

     

       50
       50
       -
                   </div>

     

       51
       51
       -
                 {{ else }}

     

       52
       52
       -
                   <div class="flex flex-col gap-1">

     

       53
       53
       -
                     {{ block "repoEvents"  .RepoEvents }} {{ end }}

     

       54
       54
       -
                     {{ block "issueEvents" .IssueEvents }} {{ end }}

     

       55
       55
       -
                     {{ block "pullEvents"  .PullEvents }} {{ end }}

     

       35
       35
       +
                     <div class="flex flex-col gap-1">

     

       36
       36
       +
                       {{ block "repoEvents"  .RepoEvents }} {{ end }}

     

       37
       37
       +
                       {{ block "issueEvents" .IssueEvents }} {{ end }}

     

       38
       38
       +
                       {{ block "pullEvents"  .PullEvents }} {{ end }}

     

       39
       39
       +
                     </div>

     

       56
       40
        
                   </div>

     

       57
       41
        
                 {{ end }}

     

       58
       58
       -
               </div>

     

       59
       59
       -
       

     

       60
       42
        
               {{ end }}

     

       61
       61
       -
             {{ else }}

     

       62
       62
       -
               <p class="dark:text-white">This user does not have any activity yet.</p>

     

       63
       43
        
             {{ end }}

     

       64
       44
        
           {{ end }}

     

       65
       45
        
         </div>

     
···

       232
       212
        
       

     

       233
       213
        
       {{ define "ownRepos" }}

     

       234
       214
        
         <div>

     

       235
       235
       -
           <div class="text-sm font-bold p-2 pr-0 dark:text-white flex items-center justify-between gap-2">

     

       215
       215
       +
           <div class="text-sm font-bold px-2 pb-4 dark:text-white flex items-center gap-2">

     

       236
       216
        
             <a href="/@{{ or $.Card.UserHandle $.Card.UserDid }}?tab=repos"

     

       237
       217
        
               class="flex text-black dark:text-white items-center gap-2 no-underline hover:no-underline group">

     

       238
       218
        
               <span>PINNED REPOS</span>

     

       239
       239
       -
               <span class="flex gap-1 items-center font-normal text-sm text-gray-500 dark:text-gray-400 ">

     

       240
       240
       -
                 view all {{ i "chevron-right" "w-4 h-4" }}

     

       241
       241
       -
               </span>

     

       242
       219
        
             </a>

     

       243
       220
        
             {{ if and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}

     

       244
       244
       -
               <button 

     

       221
       221
       +
               <button

     

       245
       222
        
                 hx-get="profile/edit-pins"

     

       246
       223
        
                 hx-target="#all-repos"

     

       247
       247
       -
                 class="btn py-0 font-normal text-sm flex gap-2 items-center group">

     

       224
       224
       +
                 class="py-0 font-normal text-sm flex gap-2 items-center group">

     

       248
       225
        
                 {{ i "pencil" "w-3 h-3" }}

     

       249
       249
       -
                 edit

     

       250
       226
        
                 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       251
       227
        
               </button>

     

       252
       228
        
             {{ end }}

     

       253
       229
        
           </div>

     

       254
       230
        
           <div id="repos" class="grid grid-cols-1 gap-4 items-stretch">

     

       255
       231
        
             {{ range .Repos }}

     

       232
       232
       +
             <div class="border border-gray-200 dark:border-gray-700 rounded-sm">

     

       256
       233
        
               {{ template "user/fragments/repoCard" (list $ . false) }}

     

       234
       234
       +
             </div>

     

       257
       235
        
             {{ else }}

     

       258
       258
       -
                 <p class="px-6 dark:text-white">This user does not have any repos yet.</p>

     

       236
       236
       +
               <p class="dark:text-white">This user does not have any pinned repos.</p>

     

       259
       237
        
             {{ end }}

     

       260
       238
        
           </div>

     

       261
       239
        
         </div>

     
···

       264
       242
        
       {{ define "collaboratingRepos" }}

     

       265
       243
        
         {{ if gt (len .CollaboratingRepos) 0 }}

     

       266
       244
        
           <div>

     

       267
       267
       -
             <p class="text-sm font-bold p-2 dark:text-white">COLLABORATING ON</p>

     

       245
       245
       +
             <p class="text-sm font-bold px-2 pb-4 dark:text-white">COLLABORATING ON</p>

     

       268
       246
        
             <div id="collaborating" class="grid grid-cols-1 gap-4">

     

       269
       247
        
               {{ range .CollaboratingRepos }}

     

       248
       248
       +
               <div class="border border-gray-200 dark:border-gray-700 rounded-sm">

     

       270
       249
        
                 {{ template "user/fragments/repoCard" (list $ . true) }}

     

       250
       250
       +
               </div>

     

       271
       251
        
               {{ else }}

     

       272
       252
        
                   <p class="px-6 dark:text-white">This user is not collaborating.</p>

     

       273
       253
        
               {{ end }}

     
···

       276
       256
        
         {{ end }}

     

       277
       257
        
       {{ end }}

     

       278
       258
        
       

     

       279
       279
       -
       {{ define "punchcard" }}

     

       280
       280
       -
         {{ $now := now }}

     

       281
       281
       -
         <div>

     

       282
       282
       -
           <p class="p-2 flex gap-2 text-sm font-bold dark:text-white">

     

       283
       283
       -
             PUNCHCARD

     

       284
       284
       -
             <span class="font-normal text-sm text-gray-500 dark:text-gray-400 ">

     

       285
       285
       -
               {{ .Total | int64 | commaFmt }} commits

     

       286
       286
       -
             </span>

     

       287
       287
       -
           </p>

     

       288
       288
       -
           <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm">

     

       289
       289
       -
             <div class="grid grid-cols-28 md:grid-cols-14 gap-y-2 w-full h-full">

     

       290
       290
       -
               {{ range .Punches }}

     

       291
       291
       -
                 {{ $count := .Count }}

     

       292
       292
       -
                 {{ $theme := "bg-gray-200 dark:bg-gray-700 size-[4px]" }}

     

       293
       293
       -
                 {{ if lt $count 1 }}

     

       294
       294
       -
                   {{ $theme = "bg-gray-200 dark:bg-gray-700 size-[4px]" }}

     

       295
       295
       -
                 {{ else if lt $count 2 }}

     

       296
       296
       -
                   {{ $theme = "bg-green-200 dark:bg-green-900 size-[5px]" }}

     

       297
       297
       -
                 {{ else if lt $count 4 }}

     

       298
       298
       -
                   {{ $theme = "bg-green-300 dark:bg-green-800 size-[5px]" }}

     

       299
       299
       -
                 {{ else if lt $count 8 }}

     

       300
       300
       -
                   {{ $theme = "bg-green-400 dark:bg-green-700 size-[6px]" }}

     

       301
       301
       -
                 {{ else }}

     

       302
       302
       -
                   {{ $theme = "bg-green-500 dark:bg-green-600 size-[7px]" }}

     

       303
       303
       -
                 {{ end }}

     

       304
       304
       -
       

     

       305
       305
       -
                 {{ if .Date.After $now }}

     

       306
       306
       -
                   {{ $theme = "border border-gray-200 dark:border-gray-700 size-[4px]" }}

     

       307
       307
       -
                 {{ end }}

     

       308
       308
       -
                 <div class="w-full h-full flex justify-center items-center">

     

       309
       309
       -
                   <div

     

       310
       310
       -
                     class="aspect-square rounded-full transition-all duration-300 {{ $theme }} max-w-full max-h-full"

     

       311
       311
       -
                     title="{{ .Date.Format "2006-01-02" }}: {{ .Count }} commits">

     

       312
       312
       -
                   </div>

     

       313
       313
       -
                 </div>

     

       314
       314
       -
               {{ end }}

     

       315
       315
       -
             </div>

     

       316
       316
       -
           </div>

     

       317
       317
       -
         </div>

     

       318
       318
       -
       {{ end }}