handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
refactor: alter header layout slightly
+62
-60
+62
-60
src/views/repository/repo-archive-explore/views/explore.tsx
+62
-60
src/views/repository/repo-archive-explore/views/explore.tsx
···
20
20
21
21
return (
22
22
<>
23
-
<div class="flex flex-wrap items-center p-2">
24
-
<button
25
-
type="button"
26
-
title="This repository"
27
-
disabled={view().type === 'repo'}
28
-
onClick={() => {
29
-
setView({ type: 'repo' });
30
-
}}
31
-
class="grid shrink-0 place-items-center rounded p-1.5 text-xl text-purple-700 hover:bg-gray-200 disabled:pointer-events-none disabled:text-black"
32
-
>
33
-
<ArchiveOutlinedIcon />
34
-
</button>
23
+
<div class="flex items-start justify-between gap-1 p-2">
24
+
<div class="flex flex-wrap items-center">
25
+
<button
26
+
type="button"
27
+
title="This repository"
28
+
disabled={view().type === 'repo'}
29
+
onClick={() => {
30
+
setView({ type: 'repo' });
31
+
}}
32
+
class="grid shrink-0 place-items-center rounded p-1.5 text-xl text-purple-700 hover:bg-gray-200 disabled:pointer-events-none disabled:text-black"
33
+
>
34
+
<ArchiveOutlinedIcon />
35
+
</button>
35
36
36
-
<Show
37
-
when={(() => {
38
-
const $view = view();
39
-
switch ($view.type) {
40
-
case 'collection':
41
-
case 'record': {
42
-
return $view.collection;
37
+
<Show
38
+
when={(() => {
39
+
const $view = view();
40
+
switch ($view.type) {
41
+
case 'collection':
42
+
case 'record': {
43
+
return $view.collection;
44
+
}
43
45
}
44
-
}
45
-
})()}
46
-
>
47
-
{(collection) => (
48
-
<>
49
-
<ChevronRightIcon class="shrink-0 text-base text-gray-500" />
50
-
<button
51
-
type="button"
52
-
disabled={view().type === 'collection'}
53
-
onClick={() => {
54
-
setView({ type: 'collection', collection: collection() });
55
-
}}
56
-
class="truncate rounded p-1.5 font-mono font-medium text-purple-700 hover:bg-gray-200 disabled:pointer-events-none disabled:text-black"
57
-
>
58
-
{collection().name}
59
-
</button>
60
-
</>
61
-
)}
62
-
</Show>
46
+
})()}
47
+
>
48
+
{(collection) => (
49
+
<>
50
+
<ChevronRightIcon class="shrink-0 text-base text-gray-500" />
51
+
<button
52
+
type="button"
53
+
disabled={view().type === 'collection'}
54
+
onClick={() => {
55
+
setView({ type: 'collection', collection: collection() });
56
+
}}
57
+
class="truncate rounded p-1.5 font-mono font-medium text-purple-700 hover:bg-gray-200 disabled:pointer-events-none disabled:text-black"
58
+
>
59
+
{collection().name}
60
+
</button>
61
+
</>
62
+
)}
63
+
</Show>
63
64
64
-
<Show
65
-
when={(() => {
66
-
const $view = view();
67
-
switch ($view.type) {
68
-
case 'record': {
69
-
return $view.record;
65
+
<Show
66
+
when={(() => {
67
+
const $view = view();
68
+
switch ($view.type) {
69
+
case 'record': {
70
+
return $view.record;
71
+
}
70
72
}
71
-
}
72
-
})()}
73
-
>
74
-
{(record) => (
75
-
<>
76
-
<ChevronRightIcon class="shrink-0 text-base text-gray-500" />
77
-
<button
78
-
type="button"
79
-
disabled={view().type === 'record'}
80
-
class="truncate rounded p-1.5 font-mono font-medium text-purple-700 hover:bg-gray-200 disabled:pointer-events-none disabled:text-black"
81
-
>
82
-
{record().key}
83
-
</button>
84
-
</>
85
-
)}
86
-
</Show>
73
+
})()}
74
+
>
75
+
{(record) => (
76
+
<>
77
+
<ChevronRightIcon class="shrink-0 text-base text-gray-500" />
78
+
<button
79
+
type="button"
80
+
disabled={view().type === 'record'}
81
+
class="truncate rounded p-1.5 font-mono font-medium text-purple-700 hover:bg-gray-200 disabled:pointer-events-none disabled:text-black"
82
+
>
83
+
{record().key}
84
+
</button>
85
+
</>
86
+
)}
87
+
</Show>
88
+
</div>
87
89
88
90
<div class="grow"></div>
89
91