Update server forms

src/renderer/features/servers/components/add-server-form.tsx

@@ -2,7 +2,6 @@ import { Checkbox, Stack, Group } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
-import { useTranslation } from 'react-i18next';
 import { ServerType } from '@/renderer/api/types';
 import {
   Button,
@@ -23,7 +22,6 @@ interface AddServerFormProps {
 }
 
 export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
-  const { t } = useTranslation();
   const focusTrapRef = useFocusTrap(true);
 
   const form = useForm({
@@ -53,27 +51,23 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
         <TextInput
           data-autofocus
           required
-          label={t('modal.add_server.name_label')}
+          label="Name"
           {...form.getInputProps('name')}
         />
+        <TextInput required label="Url" {...form.getInputProps('url')} />
         <TextInput
           required
-          label={t('modal.add_server.url_label')}
-          {...form.getInputProps('url')}
-        />
-        <TextInput
-          required
-          label={t('modal.add_server.username_label')}
+          label="Username"
           {...form.getInputProps('username')}
         />
         <PasswordInput
           required
-          label={t('modal.add_server.password_label')}
+          label="Password"
           {...form.getInputProps('password')}
         />
         {form.values.type === ServerType.SUBSONIC && (
           <Checkbox
-            label={t('modal.add_server.legacy_label')}
+            label="Enable legacy authentication"
             {...form.getInputProps('legacyAuth', { type: 'checkbox' })}
           />
         )}
@@ -86,7 +80,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
             type="submit"
             variant="filled"
           >
-            {t('modal.add_server.submit_label')}
+            Submit
           </Button>
         </Group>
       </Stack>

src/renderer/features/servers/components/edit-server-form.tsx

@@ -1,6 +1,5 @@
 import { Checkbox, Stack, Group } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useTranslation } from 'react-i18next';
 import { RiInformationLine } from 'react-icons/ri';
 import { Server, ServerType } from '@/renderer/api/types';
 import { Button, PasswordInput, TextInput, toast } from '@/renderer/components';
@@ -12,7 +11,6 @@ interface EditServerFormProps {
 }
 
 export const EditServerForm = ({ server, onCancel }: EditServerFormProps) => {
-  const { t } = useTranslation();
   const updateServer = useUpdateServer();
 
   const serverDetailsForm = useForm({
@@ -57,7 +55,7 @@ export const EditServerForm = ({ server, onCancel }: EditServerFormProps) => {
       <Stack>
         <TextInput
           required
-          label={t('generic.name')}
+          label="Name"
           rightSection={
             serverDetailsForm.isDirty('name') && (
               <RiInformationLine color="red" />
@@ -67,7 +65,7 @@ export const EditServerForm = ({ server, onCancel }: EditServerFormProps) => {
         />
         <TextInput
           required
-          label={t('generic.url')}
+          label="Url"
           rightSection={
             serverDetailsForm.isDirty('url') && (
               <RiInformationLine color="red" />
@@ -76,7 +74,7 @@ export const EditServerForm = ({ server, onCancel }: EditServerFormProps) => {
           {...serverDetailsForm.getInputProps('url')}
         />
         <TextInput
-          label={t('generic.username')}
+          label="Username"
           rightSection={
             serverDetailsForm.isDirty('username') && (
               <RiInformationLine color="red" />
@@ -85,12 +83,12 @@ export const EditServerForm = ({ server, onCancel }: EditServerFormProps) => {
           {...serverDetailsForm.getInputProps('username')}
         />
         <PasswordInput
-          label={t('generic.password')}
+          label="Password"
           {...serverDetailsForm.getInputProps('password')}
         />
         {isSubsonic && (
           <Checkbox
-            label={t('generic.legacyauth')}
+            label="Enable legacy authentication"
             {...serverDetailsForm.getInputProps('legacyAuth', {
               type: 'checkbox',
             })}

src/renderer/features/servers/components/server-list-item.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { Stack, Group, Divider } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useQueryClient } from '@tanstack/react-query';
-import { RiDeleteBin2Fill, RiEdit2Fill } from 'react-icons/ri';
+import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
 import { queryKeys } from '@/renderer/api/query-keys';
 import { Server, TaskType } from '@/renderer/api/types';
 import { Button, Switch, Text, toast } from '@/renderer/components';
@@ -160,7 +160,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                 <Button
                   compact
                   disabled={true || isRunningTask}
-                  variant="filled"
+                  variant="subtle"
                   onClick={handleQuickScan}
                 >
                   Quick scan
@@ -182,20 +182,19 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                   <Text>Username</Text>
                 </Stack>
                 <Stack>
-                  <Text>{server.url}</Text>
-                  <Text>{server.username}</Text>
+                  <Text size="sm">{server.url}</Text>
+                  <Text size="sm">{server.username}</Text>
                 </Stack>
               </Group>
               <Group>
-                {permissions.editServer && (
-                  <Button
-                    tooltip={{ label: 'Edit server details' }}
-                    variant="default"
-                    onClick={() => editHandlers.toggle()}
-                  >
-                    <RiEdit2Fill color="white" />
-                  </Button>
-                )}
+                <Button
+                  disabled={!permissions.editServer}
+                  tooltip={{ label: 'Edit server details' }}
+                  variant="default"
+                  onClick={() => editHandlers.toggle()}
+                >
+                  <RiEdit2Fill color="white" />
+                </Button>
               </Group>
             </Group>
           )}
@@ -204,20 +203,22 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
           <Stack>
             {server.serverFolders?.map((folder) => (
               <Group key={folder.id} position="apart">
-                <Text>{folder.name}</Text>
                 <Group>
-                  {permissions.deleteServerFolder && (
-                    <Button compact disabled radius="xl" variant="subtle">
-                      <RiDeleteBin2Fill />
-                    </Button>
-                  )}
-                  <Switch
-                    checked={folder.enabled}
-                    onChange={(e) =>
-                      handleToggleFolder(folder.id, !e.currentTarget.checked)
-                    }
-                  />
+                  <Button
+                    compact
+                    disabled={true || !permissions.deleteServerFolder}
+                    variant="subtle"
+                  >
+                    <RiDeleteBin2Line color="var(--danger-color)" />
+                  </Button>
+                  <Text size="sm">{folder.name}</Text>
                 </Group>
+                <Switch
+                  checked={folder.enabled}
+                  onChange={(e) =>
+                    handleToggleFolder(folder.id, !e.currentTarget.checked)
+                  }
+                />
               </Group>
             ))}
           </Stack>
@@ -233,41 +234,38 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
               <Stack>
                 {serverCredentials?.map((credential) => (
                   <Group key={credential.id} position="apart">
-                    <Text>{credential.username}</Text>
                     <Group>
-                      {permissions.deleteServerCredential && (
-                        <Button
-                          compact
-                          radius="xl"
-                          variant="subtle"
-                          onClick={() => handleDeleteCredential(credential.id)}
-                        >
-                          <RiDeleteBin2Fill />
-                        </Button>
-                      )}
-                      <Switch
-                        checked={credential.enabled}
-                        onChange={(e) =>
-                          handleToggleCredential(
-                            credential.id,
-                            !e.currentTarget.checked
-                          )
-                        }
-                      />
+                      <Button
+                        compact
+                        disabled={!permissions.deleteServerCredential}
+                        variant="subtle"
+                        onClick={() => handleDeleteCredential(credential.id)}
+                      >
+                        <RiDeleteBin2Line color="var(--danger-color)" />
+                      </Button>
+                      <Text size="sm">{credential.username}</Text>
                     </Group>
+                    <Switch
+                      checked={credential.enabled}
+                      onChange={(e) =>
+                        handleToggleCredential(
+                          credential.id,
+                          !e.currentTarget.checked
+                        )
+                      }
+                    />
                   </Group>
                 ))}
               </Stack>
-              {permissions.createServerCredential && (
-                <Button
-                  compact
-                  mt={10}
-                  variant="default"
-                  onClick={() => addCredentialHandlers.open()}
-                >
-                  Add credential
-                </Button>
-              )}
+              <Button
+                compact
+                disabled={!permissions.createServerCredential}
+                mt={10}
+                variant="subtle"
+                onClick={() => addCredentialHandlers.open()}
+              >
+                Add credential
+              </Button>
             </>
           )}
         </ServerSection>
@@ -282,61 +280,59 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
               <Stack>
                 {server.serverUrls?.map((serverUrl) => (
                   <Group key={serverUrl.id} position="apart">
-                    <Text>{serverUrl.url}</Text>
                     <Group>
-                      {permissions.deleteServerUrl && (
-                        <Button
-                          compact
-                          radius="xl"
-                          variant="subtle"
-                          onClick={() => handleDeleteUrl(serverUrl.id)}
-                        >
-                          <RiDeleteBin2Fill />
-                        </Button>
-                      )}
-                      <Switch
-                        checked={serverUrl.enabled}
-                        onChange={(e) =>
-                          handleToggleUrl(
-                            serverUrl.id,
-                            !e.currentTarget.checked
-                          )
-                        }
-                      />
+                      <Button
+                        compact
+                        disabled={!permissions.deleteServerUrl}
+                        variant="subtle"
+                        onClick={() => handleDeleteUrl(serverUrl.id)}
+                      >
+                        <RiDeleteBin2Line color="var(--danger-color)" />
+                      </Button>
+                      <Text size="sm">{serverUrl.url}</Text>
                     </Group>
+                    <Switch
+                      checked={serverUrl.enabled}
+                      onChange={(e) =>
+                        handleToggleUrl(serverUrl.id, !e.currentTarget.checked)
+                      }
+                    />
                   </Group>
                 ))}
               </Stack>
-              {permissions.createServerUrl && (
-                <Button
-                  compact
-                  mt={10}
-                  variant="default"
-                  onClick={() => addUrlHandlers.open()}
-                >
-                  Add URL
-                </Button>
-              )}
+              <Button
+                compact
+                disabled={!permissions.createServerUrl}
+                mt={10}
+                variant="subtle"
+                onClick={() => addUrlHandlers.open()}
+              >
+                Add url
+              </Button>
             </>
           )}
         </ServerSection>
 
         <ServerSection title="Danger zone">
           <Group position="apart">
-            <Text>Require user credentials</Text>
+            <Text size="sm">Require user credentials</Text>
             <Switch
               checked={server.noCredential}
+              disabled={!permissions.isAdmin}
               onChange={(e) =>
                 toggleRequiredCredential(e.currentTarget.checked)
               }
             />
           </Group>
           <Divider my="xl" />
-          {permissions.deleteServer && (
-            <Button compact color="red" leftIcon={<RiDeleteBin2Fill />}>
-              Delete server
-            </Button>
-          )}
+          <Button
+            compact
+            disabled={!permissions.deleteServer}
+            leftIcon={<RiDeleteBin2Line color="var(--danger-color)" />}
+            variant="default"
+          >
+            Delete server
+          </Button>
         </ServerSection>
       </Stack>
     </>