handy online tools for AT Protocol boat.kelinci.net
atproto bluesky atcute typescript solidjs

refactor: alter header layout slightly

mary.my.id 82c2e590 ff38bcbc

verified
Changed files
+62 -60
src
views
repository
repo-archive-explore
views
+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