-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add link to frontend in popup (#915)
* Simplify Network component * Add an optional href prop for Network * Use a component-specific selector * Refactor state quite a bit * Add filtering to selector * Update tests * Refactor to prevent unnecessary renders * Refactor a bit * Convert Tailwind config to TypeScript; use it to make a constant with resolved config * Render a button for setting the frontend * Set a default frontend URL; tweak the Network component * Fix some spacing issues * Fix some lint issues * Remove unused prop * Move const to tailwind config package * Only allow approved sites to be selected as the frontend URL * Remove unused method; update tests * Fix imports * Point the network link to the status page * Redesign index page * Default to the first available frontend if the current one is deleted
- Loading branch information
1 parent
a1b1371
commit 5bc8311
Showing
21 changed files
with
385 additions
and
290 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 0 additions & 148 deletions
148
apps/extension/src/routes/popup/settings/settings-connected-sites.tsx
This file was deleted.
Oops, something went wrong.
37 changes: 37 additions & 0 deletions
37
apps/extension/src/routes/popup/settings/settings-connected-sites/frontend-url-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Button } from '@penumbra-zone/ui/components/ui/button'; | ||
| import { | ||
| TooltipProvider, | ||
| Tooltip, | ||
| TooltipTrigger, | ||
| TooltipContent, | ||
| } from '@penumbra-zone/ui/components/ui/tooltip'; | ||
| import { Star } from 'lucide-react'; | ||
| import { RESOLVED_TAILWIND_CONFIG } from '@penumbra-zone/tailwind-config/resolved-tailwind-config'; | ||
|
|
||
| export const FrontendUrlButton = ({ | ||
| isSelected, | ||
| onClick, | ||
| }: { | ||
| isSelected: boolean; | ||
| onClick: () => void; | ||
| }) => { | ||
| const { theme } = RESOLVED_TAILWIND_CONFIG; | ||
| const label = isSelected ? 'Primary Penumbra frontend' : 'Set as primary Penumbra frontend'; | ||
|
|
||
| return ( | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger className='h-[16px]'> | ||
| <Button aria-label={label} className='h-auto bg-transparent' onClick={onClick}> | ||
| <Star | ||
| fill={isSelected ? theme.colors.muted.foreground : 'transparent'} | ||
| className='text-muted-foreground' | ||
| size={16} | ||
| /> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent side='left'>{label}</TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ); | ||
| }; |
73 changes: 73 additions & 0 deletions
73
apps/extension/src/routes/popup/settings/settings-connected-sites/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; | ||
| import { Input } from '@penumbra-zone/ui/components/ui/input'; | ||
| import { LinkGradientIcon } from '../../../../icons/link-gradient'; | ||
| import { OriginRecord } from '@penumbra-zone/storage/chrome/types'; | ||
| import { AllSlices, useStore } from '../../../../state'; | ||
| import { UserChoice } from '@penumbra-zone/types/src/user-choice'; | ||
| import { SettingsScreen } from '../settings-screen'; | ||
| import { useStoreShallow } from '../../../../utils/use-store-shallow'; | ||
| import { allSitesFilteredOutSelector } from '../../../../state/connected-sites'; | ||
| import Map from '@penumbra-zone/polyfills/src/Map.groupBy'; | ||
| import { KnownSitesGroup } from './known-sites-group'; | ||
|
|
||
| const settingsConnectedSitesSelector = (state: AllSlices) => ({ | ||
| filter: state.connectedSites.filter, | ||
| setFilter: state.connectedSites.setFilter, | ||
| knownSites: state.connectedSites.knownSites, | ||
| }); | ||
|
|
||
| const getGroupedSites = (knownSites: OriginRecord[], filter?: string) => { | ||
| const groupedSites = Map.groupBy(knownSites, ({ choice }) => choice); | ||
| const filterFn = (site: OriginRecord) => !filter || site.origin.includes(filter); | ||
|
|
||
| return { | ||
| approvedSites: groupedSites.get(UserChoice.Approved)?.filter(filterFn) ?? [], | ||
| deniedSites: groupedSites.get(UserChoice.Denied)?.filter(filterFn) ?? [], | ||
| ignoredSites: groupedSites.get(UserChoice.Ignored)?.filter(filterFn) ?? [], | ||
| }; | ||
| }; | ||
|
|
||
| export const SettingsConnectedSites = () => { | ||
| const { filter, setFilter, knownSites } = useStoreShallow(settingsConnectedSitesSelector); | ||
| const allSitesFilteredOut = useStore(allSitesFilteredOutSelector); | ||
| const { approvedSites, deniedSites, ignoredSites } = getGroupedSites(knownSites, filter); | ||
|
|
||
| return ( | ||
| <SettingsScreen title='Connected sites' IconComponent={LinkGradientIcon}> | ||
| <div className='relative mt-5 flex w-full items-center justify-center'> | ||
| <div className='absolute inset-y-0 left-3 flex items-center'> | ||
| <MagnifyingGlassIcon className='size-5 text-muted-foreground' /> | ||
| </div> | ||
| <Input | ||
| disabled={!knownSites.length} | ||
| variant={allSitesFilteredOut ? 'warn' : null} | ||
| className='pl-10' | ||
| onChange={e => setFilter(e.target.value)} | ||
| placeholder='Search by origin...' | ||
| /> | ||
| </div> | ||
| <div className='text-muted-foreground'> | ||
| {!knownSites.length ? ( | ||
| <div className='py-[2em] text-center text-lg font-bold'>no known sites</div> | ||
| ) : allSitesFilteredOut ? ( | ||
| <div className='py-[2em] text-center text-lg font-bold text-yellow-500'> | ||
| all known sites filtered | ||
| </div> | ||
| ) : ( | ||
| <div className='mt-4 flex flex-col gap-4'> | ||
| {!!approvedSites.length && ( | ||
| <KnownSitesGroup label='Approved sites' sites={approvedSites} /> | ||
| )} | ||
| {!!deniedSites.length && <KnownSitesGroup label='Denied sites' sites={deniedSites} />} | ||
| {!!ignoredSites.length && ( | ||
| <> | ||
| {!!(approvedSites.length || deniedSites.length) && <hr className='my-2' />} | ||
| <KnownSitesGroup label='Ignored sites' sites={ignoredSites} /> | ||
| </> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </SettingsScreen> | ||
| ); | ||
| }; |
Oops, something went wrong.