refactor(settings): improve responsive styles on small viewports

packages/i18n/locales/en/settings.json

@@ -42,7 +42,7 @@
   "networkInputNameDescription": "Provide the name of the network",
   "networkInputNameLabel": "Name",
   "networkInputNamePlaceholder": "Network name",
-  "networkInputTypeDescription": "You can't change the type of network after you created it.",
+  "networkInputTypeDescription": "You cannot change the type of network after you created it.",
   "networkInputTypeLabel": "Network",
   "networkPageAddTitle": "Add Network",
   "networkPageEditTitle": "Edit network",
@@ -61,7 +61,7 @@
   "pageWalletName": "Wallets",
   "themeDark": "Dark",
   "themeLight": "Light",
-  "walletAddAccountDeriveDescription": "Derive an account from the Wallet's mnemonic",
+  "walletAddAccountDeriveDescription": "Derive an account from the Wallet's mnemonic",
   "walletAddAccountDeriveTitle": "Derive an account",
   "walletAddAccountImportDescription": "Import an account from a base58 secret key or byte array",
   "walletAddAccountImportLabel": "Enter secret key (base58 or byte array)",

packages/i18n/src/resources.d.ts

@@ -106,7 +106,7 @@ interface Resources {
     networkInputNameDescription: 'Provide the name of the network'
     networkInputNameLabel: 'Name'
     networkInputNamePlaceholder: 'Network name'
-    networkInputTypeDescription: 'You can't change the type of network after you created it.'
+    networkInputTypeDescription: 'You cannot change the type of network after you created it.'
     networkInputTypeLabel: 'Network'
     networkPageAddTitle: 'Add Network'
     networkPageEditTitle: 'Edit network'
@@ -125,7 +125,7 @@ interface Resources {
     pageWalletName: 'Wallets'
     themeDark: 'Dark'
     themeLight: 'Light'
-    walletAddAccountDeriveDescription: 'Derive an account from the Wallet's mnemonic'
+    walletAddAccountDeriveDescription: "Derive an account from the Wallet's mnemonic"
     walletAddAccountDeriveTitle: 'Derive an account'
     walletAddAccountImportDescription: 'Import an account from a base58 secret key or byte array'
     walletAddAccountImportLabel: 'Enter secret key (base58 or byte array)'

packages/settings/src/settings-feature-general-danger-delete-database.tsx

@@ -13,7 +13,7 @@ export function SettingsFeatureGeneralDangerDeleteDatabase() {
   const navigate = useNavigate()
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-2 md:space-y-6">
       <div className="flex items-start gap-3">
         <Checkbox checked={accept} id={acceptId} onCheckedChange={() => setAccept((prev) => !prev)} />
         <div className="grid gap-2">

packages/settings/src/settings-feature-general.tsx

@@ -13,8 +13,12 @@ export function SettingsFeatureGeneral() {
   const { t } = useTranslation('settings')
   const page = useSettingsPage({ pageId: 'general' })
   return (
-    <div className="space-y-4">
-      <UiCard contentProps={{ className: 'grid gap-4 space-y-4' }} description={page.description} title={page.name}>
+    <div className="space-y-2 md:space-y-4">
+      <UiCard
+        contentProps={{ className: 'space-y-2 md:space-y-6 md:py-2' }}
+        description={page.description}
+        title={page.name}
+      >
         <SettingsFeatureGeneralLanguage />
         <SettingsFeatureGeneralTheme />
         <SettingsFeatureGeneralApiEndpoint />

packages/settings/src/settings-feature-wallet-add-account.tsx

@@ -84,7 +84,7 @@ export function SettingsFeatureWalletAddAccount() {
       description={t(($) => $.walletPageAddAccountDescription)}
       title={<SettingsUiWalletItem item={item} />}
     >
-      <div className="space-y-6">
+      <div className="space-y-2 md:space-y-6">
         <Item variant="outline">
           <ItemMedia variant="icon">
             <AccountUiIcon type="Derived" />

packages/settings/src/settings-feature-wallet-details.tsx

@@ -7,13 +7,14 @@ import { UiError } from '@workspace/ui/components/ui-error'
 import { UiIcon } from '@workspace/ui/components/ui-icon'
 import { UiLoader } from '@workspace/ui/components/ui-loader'
 import { UiNotFound } from '@workspace/ui/components/ui-not-found'
-import { Link, useParams } from 'react-router'
+import { Link, useLocation, useParams } from 'react-router'
 import { useSortAccounts } from './data-access/use-sort-accounts.tsx'
 import { SettingsUiAccountTable } from './ui/settings-ui-account-table.tsx'
 import { SettingsUiWalletItem } from './ui/settings-ui-wallet-item.tsx'
 
 export function SettingsFeatureWalletDetails() {
   const { t } = useTranslation('settings')
+  const { pathname: from } = useLocation()
   const { walletId } = useParams() as { walletId: string }
   const { data: item, error, isError, isLoading } = useWalletFindUnique({ id: walletId })
   const accounts = useAccountLive({ walletId })
@@ -33,15 +34,16 @@ export function SettingsFeatureWalletDetails() {
     <UiCard
       backButtonTo="/settings/wallets"
       title={
-        <div className="flex w-full items-center justify-between">
-          <SettingsUiWalletItem item={item} />
+        <div className="flex w-full items-center justify-between whitespace-nowrap">
           <div className="flex items-center gap-2">
-            <Button asChild title={t(($) => $.actionEditWallet)} variant="outline">
-              <Link to={`./edit`}>
+            <SettingsUiWalletItem item={item} />
+            <Button asChild size="icon" title={t(($) => $.actionEditWallet)} variant="ghost">
+              <Link state={{ from }} to={`./edit`}>
                 <UiIcon className="size-4" icon="edit" />
-                {t(($) => $.actionEditWallet)}
               </Link>
             </Button>
+          </div>
+          <div className="flex items-center gap-2">
             <Button asChild title={t(($) => $.actionEditWalletMessage)} variant="outline">
               <Link to={`./add`}>
                 <UiIcon className="size-4" icon="add" />
@@ -52,7 +54,7 @@ export function SettingsFeatureWalletDetails() {
         </div>
       }
     >
-      <div className="space-y-6">
+      <div className="space-y-2 md:space-y-6">
         <SettingsUiAccountTable items={sorted} />
       </div>
     </UiCard>

packages/settings/src/settings-feature-wallet-generate.tsx

@@ -19,7 +19,7 @@ export function SettingsFeatureWalletGenerate() {
   return (
     <UiCard
       backButtonTo="/settings/wallets/create"
-      contentProps={{ className: 'grid gap-6' }}
+      contentProps={{ className: 'space-y-2 md:space-y-6' }}
       title={t(($) => $.walletPageGenerateTitle)}
     >
       <SettingsUiWalletMnemonicStrength setStrength={setStrength} strength={strength} />

packages/settings/src/settings-feature-wallet-list.tsx

@@ -1,3 +1,4 @@
+import { useSetting } from '@workspace/db-react/use-setting'
 import { useWalletDelete } from '@workspace/db-react/use-wallet-delete'
 import { useTranslation } from '@workspace/i18n'
 import { Button } from '@workspace/ui/components/button'
@@ -17,8 +18,8 @@ export function SettingsFeatureWalletList() {
     onError: () => toastError('Error deleting wallet'),
     onSuccess: () => toastSuccess('Wallet deleted'),
   })
-  const { wallets, active } = useActiveWallet()
-
+  const { wallets } = useActiveWallet()
+  const [activeId] = useSetting('activeWalletId')
   return wallets.length ? (
     <UiCard
       action={
@@ -30,7 +31,7 @@ export function SettingsFeatureWalletList() {
       title={page.name}
     >
       <SettingsUiWalletList
-        active={active}
+        activeId={activeId}
         deleteItem={(input) => deleteMutation.mutateAsync({ id: input.id })}
         items={wallets}
       />

packages/settings/src/settings-feature-wallet-update.tsx

@@ -5,13 +5,15 @@ import { UiCard } from '@workspace/ui/components/ui-card'
 import { UiError } from '@workspace/ui/components/ui-error'
 import { UiLoader } from '@workspace/ui/components/ui-loader'
 import { UiNotFound } from '@workspace/ui/components/ui-not-found'
-import { useNavigate, useParams } from 'react-router'
+import { useLocation, useNavigate, useParams } from 'react-router'
 import { SettingsUiWalletFormUpdate } from './ui/settings-ui-wallet-form-update.tsx'
 
 export function SettingsFeatureWalletUpdate() {
   const { t } = useTranslation('settings')
   const navigate = useNavigate()
   const { walletId } = useParams() as { walletId: string }
+  const { state } = useLocation()
+  const from = state?.from ?? `/settings/wallets/${walletId}`
   const updateMutation = useWalletUpdate()
   const { data: item, error, isError, isLoading } = useWalletFindUnique({ id: walletId })
 
@@ -26,12 +28,12 @@ export function SettingsFeatureWalletUpdate() {
   }
 
   return (
-    <UiCard backButtonTo={`/settings/wallets/${item.id}`} title={t(($) => $.walletPageEditTitle)}>
+    <UiCard backButtonTo={from} title={t(($) => $.walletPageEditTitle)}>
       <SettingsUiWalletFormUpdate
         item={item}
         submit={async (input) =>
           await updateMutation.mutateAsync({ id: item.id, input }).then(() => {
-            navigate(`/settings/wallets/${item.id}`)
+            navigate(from)
           })
         }
       />

packages/settings/src/ui/settings-ui-network-form-create.tsx

@@ -28,7 +28,7 @@ export function SettingsUiNetworkFormCreate({ submit }: { submit: (input: Networ
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormField
           control={form.control}
           name="type"

packages/settings/src/ui/settings-ui-network-form-update.tsx

@@ -34,7 +34,7 @@ export function SettingsUiNetworkFormUpdate({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="flex flex-col space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormItem className="flex w-full flex-col gap-2 py-1">
           <FormLabel>{t(($) => $.networkInputTypeLabel)}</FormLabel>
           <FormControl>

packages/settings/src/ui/settings-ui-network-item.tsx

@@ -0,0 +1,12 @@
+import type { Network } from '@workspace/db/network/network'
+
+import { UiAvatar } from '@workspace/ui/components/ui-avatar'
+
+export function SettingsUiNetworkItem({ item }: { item: Network }) {
+  return (
+    <div className="flex items-center gap-2 whitespace-nowrap">
+      <UiAvatar label={item.name} />
+      {item.name}
+    </div>
+  )
+}

packages/settings/src/ui/settings-ui-network-list-item.tsx

@@ -0,0 +1,54 @@
+import type { Network } from '@workspace/db/network/network'
+import { useTranslation } from '@workspace/i18n'
+import { Button } from '@workspace/ui/components/button'
+import { Item, ItemActions, ItemContent, ItemTitle } from '@workspace/ui/components/item'
+import { UiConfirm } from '@workspace/ui/components/ui-confirm'
+import { UiIcon } from '@workspace/ui/components/ui-icon'
+import { Link } from 'react-router'
+import { SettingsUiNetworkItem } from './settings-ui-network-item.tsx'
+
+export function SettingsUiNetworkListItem({
+  activeId,
+  deleteItem,
+  item,
+}: {
+  activeId: null | string
+  deleteItem: (item: Network) => Promise<void>
+  item: Network
+}) {
+  const { t } = useTranslation('settings')
+  return (
+    <Item
+      className="flex-row items-center items-stretch"
+      key={item.id}
+      role="listitem"
+      variant={activeId === item.id ? 'muted' : 'outline'}
+    >
+      <ItemContent className="flex justify-center">
+        <ItemTitle>
+          <Link to={`./${item.id}`}>
+            <SettingsUiNetworkItem item={item} />
+          </Link>
+        </ItemTitle>
+      </ItemContent>
+      <ItemActions>
+        <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
+          <Link to={`./${item.id}`}>
+            <UiIcon className="size-4" icon="edit" />
+          </Link>
+        </Button>
+        <UiConfirm
+          action={async () => await deleteItem(item)}
+          actionLabel="Delete"
+          actionVariant="destructive"
+          description="This action cannot be reversed."
+          title="Are you sure you want to delete this network?"
+        >
+          <Button size="icon" title={t(($) => $.actionDelete)} variant="outline">
+            <UiIcon className="size-4 text-red-500" icon="delete" />
+          </Button>
+        </UiConfirm>
+      </ItemActions>
+    </Item>
+  )
+}

packages/settings/src/ui/settings-ui-network-list.tsx

@@ -1,10 +1,7 @@
 import type { Network } from '@workspace/db/network/network'
-import { useTranslation } from '@workspace/i18n'
-import { Button } from '@workspace/ui/components/button'
-import { Item, ItemActions, ItemContent, ItemGroup, ItemTitle } from '@workspace/ui/components/item'
-import { UiConfirm } from '@workspace/ui/components/ui-confirm'
-import { UiIcon } from '@workspace/ui/components/ui-icon'
-import { Link } from 'react-router'
+
+import { ItemGroup } from '@workspace/ui/components/item'
+import { SettingsUiNetworkListItem } from './settings-ui-network-list-item.tsx'
 
 export function SettingsUiNetworkList({
   activeId,
@@ -15,40 +12,10 @@ export function SettingsUiNetworkList({
   deleteItem: (item: Network) => Promise<void>
   items: Network[]
 }) {
-  const { t } = useTranslation('settings')
   return (
     <ItemGroup className="gap-2 md:gap-4">
       {items.map((item) => (
-        <Item
-          className="flex-row items-center items-stretch"
-          key={item.id}
-          role="listitem"
-          variant={activeId === item.id ? 'muted' : 'outline'}
-        >
-          <ItemContent>
-            <ItemTitle className="line-clamp-1">
-              <Link to={`./${item.id}`}>{item.name}</Link>
-            </ItemTitle>
-          </ItemContent>
-          <ItemActions>
-            <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
-              <Link to={`./${item.id}`}>
-                <UiIcon className="size-4" icon="edit" />
-              </Link>
-            </Button>
-            <UiConfirm
-              action={async () => await deleteItem(item)}
-              actionLabel="Delete"
-              actionVariant="destructive"
-              description="This action cannot be reversed."
-              title="Are you sure you want to delete this network?"
-            >
-              <Button size="icon" title={t(($) => $.actionDelete)} variant="outline">
-                <UiIcon className="size-4 text-red-500" icon="delete" />
-              </Button>
-            </UiConfirm>
-          </ItemActions>
-        </Item>
+        <SettingsUiNetworkListItem activeId={activeId} deleteItem={deleteItem} item={item} key={item.id} />
       ))}
     </ItemGroup>
   )

packages/settings/src/ui/settings-ui-wallet-create-options.tsx

@@ -6,7 +6,7 @@ import { SettingsUiWalletCreateLink } from './settings-ui-wallet-create-link.tsx
 export function SettingsUiWalletCreateOptions() {
   const { t } = useTranslation('settings')
   return (
-    <div className="grid gap-4">
+    <div className="space-y-2 md:space-y-6">
       <SettingsUiWalletCreateHeader icon="mnemonic" label={t(($) => $.walletCreateHeaderSeed)} />
       <SettingsUiWalletCreateLink
         description={t(($) => $.walletCreateGenerateDescription)}

packages/settings/src/ui/settings-ui-wallet-form-generate.tsx

@@ -38,7 +38,7 @@ export function SettingsUiWalletFormGenerate({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormField
           control={form.control}
           name="name"

packages/settings/src/ui/settings-ui-wallet-form-import.tsx

@@ -41,7 +41,7 @@ export function SettingsUiWalletFormImport({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input, redirect))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input, redirect))}>
         <FormField
           control={form.control}
           name="name"

packages/settings/src/ui/settings-ui-wallet-form-update.tsx

@@ -31,7 +31,7 @@ export function SettingsUiWalletFormUpdate({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormField
           control={form.control}
           name="name"

packages/settings/src/ui/settings-ui-wallet-item.tsx

@@ -4,7 +4,7 @@ import { UiAvatar } from '@workspace/ui/components/ui-avatar'
 
 export function SettingsUiWalletItem({ item }: { item: Wallet }) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 whitespace-nowrap">
       <UiAvatar label={item.name} />
       {item.name}
     </div>