From 24e9dee60a5aad5cf94461b79f55a1a18c3fd768 Mon Sep 17 00:00:00 2001
From: Koding Dev <kodingdev@pm.me>
Date: Sun, 29 May 2022 18:06:56 +1000
Subject: [PATCH 1/2] fix: volumes dropdown

---
 .../src/components/primitive/Listbox.tsx      | 117 ++++++++----------
 .../src/screens/settings/GeneralSettings.tsx  |  37 +++---
 2 files changed, 73 insertions(+), 81 deletions(-)

diff --git a/packages/interface/src/components/primitive/Listbox.tsx b/packages/interface/src/components/primitive/Listbox.tsx
index 4116d086f..2cb990412 100644
--- a/packages/interface/src/components/primitive/Listbox.tsx
+++ b/packages/interface/src/components/primitive/Listbox.tsx
@@ -1,7 +1,7 @@
-import { Listbox as ListboxPrimitive, Transition } from '@headlessui/react';
+import { Listbox as ListboxPrimitive } from '@headlessui/react';
 import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
 import clsx from 'clsx';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 interface ListboxOption {
 	option: string;
@@ -21,79 +21,72 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 	return (
 		<>
 			<ListboxPrimitive value={selected} onChange={setSelected}>
-				<div className="relative w-full">
+				<div className='relative w-full'>
 					<ListboxPrimitive.Button
 						className={clsx(
 							`relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-500 
-              rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 
-              focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 
-              focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm`,
+								rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 
+								focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 
+								focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm`,
 							props.className
 						)}
 					>
 						{selected?.option ? (
-							<span className="block truncate">{selected?.option}</span>
+							<span className='block truncate'>{selected?.option}</span>
 						) : (
-							<span className="block truncate opacity-70">Nothing selected...</span>
+							<span className='block truncate opacity-70'>Nothing selected...</span>
 						)}
-						<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-							<SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+
+						<span className='absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'>
+							<SelectorIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
 						</span>
 					</ListboxPrimitive.Button>
-					<Transition
-						as={Fragment}
-						leave="transition ease-in duration-100"
-						leaveFrom="opacity-100"
-						leaveTo="opacity-0"
-					>
-						<ListboxPrimitive.Options
-							className={`
-                absolute w-full mt-1 overflow-auto rounded-md sm:text-sm
-                text-base bg-white dark:bg-gray-500 shadow-lg max-h-60 
-                ring-1 ring-black ring-opacity-5 focus:outline-none
-                `}
-						>
-							{props.options.map((person, personIdx) => (
-								<ListboxPrimitive.Option
-									key={personIdx}
-									className={({ active }) =>
-										`cursor-default select-none relative rounded m-1 py-2 pl-8 pr-4 dark:text-white focus:outline-none  ${
-											active
-												? 'text-primary-900 bg-primary-600'
-												: 'text-gray-900 dark:hover:bg-gray-600 dark:hover:bg-opacity-20'
-										}`
-									}
-									value={person}
-								>
-									{({ selected }) => (
-										<>
-											<span
-												className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
-											>
-												{person.option}
-												{person.description && (
-													<span
-														className={clsx(
-															'text-gray-300 leading-5 ml-3 text-xs',
-															selected && 'text-white'
-														)}
-													>
-														{person.description}
-													</span>
-												)}
-											</span>
 
-											{selected ? (
-												<span className="absolute inset-y-0 left-0 flex items-center pl-2 text-white">
-													<CheckIcon className="w-5 h-5" aria-hidden="true" />
+					<ListboxPrimitive.Options
+						className={`
+							absolute w-full mt-1 overflow-auto rounded-md sm:text-sm
+							text-base bg-white dark:bg-gray-500 shadow-lg max-h-60 
+							ring-1 ring-black ring-opacity-5 focus:outline-none
+						`}
+					>
+						{props.options.map((option, index) => (
+							<ListboxPrimitive.Option
+								key={option.key}
+								className={({ active }) =>
+									`cursor-default select-none relative rounded m-1 py-2 pl-8 pr-4 dark:text-white focus:outline-none  ${
+										active
+											? 'text-primary-900 bg-primary-600'
+											: 'text-gray-900 dark:hover:bg-gray-600 dark:hover:bg-opacity-20'
+									}`
+								}
+								value={option}
+							>
+								{({ selected }) => (
+									<>
+										<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
+											{option.option}
+											{option.description && (
+												<span
+													className={clsx(
+														'text-gray-300 leading-5 ml-3 text-xs',
+														selected && 'text-white'
+													)}
+												>
+													{option.description}
 												</span>
-											) : null}
-										</>
-									)}
-								</ListboxPrimitive.Option>
-							))}
-						</ListboxPrimitive.Options>
-					</Transition>
+											)}
+										</span>
+
+										{selected ? (
+											<span className='absolute inset-y-0 left-0 flex items-center pl-2 text-white'>
+												<CheckIcon className='w-5 h-5' aria-hidden='true' />
+                      </span>
+										) : null}
+									</>
+								)}
+							</ListboxPrimitive.Option>
+						))}
+					</ListboxPrimitive.Options>
 				</div>
 			</ListboxPrimitive>
 		</>
diff --git a/packages/interface/src/screens/settings/GeneralSettings.tsx b/packages/interface/src/screens/settings/GeneralSettings.tsx
index 50e11fadc..c7fbb3861 100644
--- a/packages/interface/src/screens/settings/GeneralSettings.tsx
+++ b/packages/interface/src/screens/settings/GeneralSettings.tsx
@@ -1,23 +1,19 @@
-import { useBridgeCommand, useBridgeQuery } from '@sd/client';
-import { Button } from '@sd/ui';
-import React, { useState } from 'react';
-
-import { Input } from '../../components/primitive';
+import { useBridgeQuery } from '@sd/client';
+import React from 'react';
 import { InputContainer } from '../../components/primitive/InputContainer';
 import Listbox from '../../components/primitive/Listbox';
-import Slider from '../../components/primitive/Slider';
 
 export default function GeneralSettings() {
 	const { data: volumes } = useBridgeQuery('SysGetVolumes');
 
 	return (
-		<div className="flex flex-col flex-grow max-w-4xl space-y-4">
-			<div className="mt-3 mb-3">
-				<h1 className="text-2xl font-bold">General Settings</h1>
-				<p className="mt-1 text-sm text-gray-400">Basic settings related to this client</p>
+		<div className='flex flex-col flex-grow max-w-4xl space-y-4'>
+			<div className='mt-3 mb-3'>
+				<h1 className='text-2xl font-bold'>General Settings</h1>
+				<p className='mt-1 text-sm text-gray-400'>Basic settings related to this client</p>
 				{/* <hr className="mt-4 border-gray-550" /> */}
 			</div>
-			<p className="px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
+			<p className='px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600'>
 				<b>Note: </b>This is a pre-alpha build of Spacedrive, many features are yet to be
 				functional.
 			</p>
@@ -47,16 +43,19 @@ export default function GeneralSettings() {
         </div>
       </InputContainer> */}
 
-			<InputContainer title="Volumes" description="A list of volumes running on this device.">
-				<div className="flex flex-row space-x-2">
-					<div className="flex flex-grow">
+			<InputContainer title='Volumes' description='A list of volumes running on this device.'>
+				<div className='flex flex-row space-x-2'>
+					<div className='flex flex-grow'>
 						<Listbox
 							options={
-								volumes?.map((volume) => ({
-									key: volume.name,
-									option: volume.name,
-									description: volume.mount_point
-								})) ?? []
+								volumes?.map((volume) => {
+									const name = volume.name && volume.name.length ? volume.name : volume.mount_point;
+									return {
+										key: name,
+										option: name,
+										description: volume.mount_point
+									};
+								}) ?? []
 							}
 						/>
 					</div>

From dcbf29da064c5b543b7a37c0e5879044d4589253 Mon Sep 17 00:00:00 2001
From: maxichrome <maxichrome@users.noreply.github.com>
Date: Sun, 29 May 2022 03:14:20 -0500
Subject: [PATCH 2/2] use jsx double quotes on koding changes

---
 .../src/components/primitive/Listbox.tsx        | 16 ++++++++--------
 .../src/screens/settings/GeneralSettings.tsx    | 17 +++++++++--------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/interface/src/components/primitive/Listbox.tsx b/packages/interface/src/components/primitive/Listbox.tsx
index 2cb990412..2fc900812 100644
--- a/packages/interface/src/components/primitive/Listbox.tsx
+++ b/packages/interface/src/components/primitive/Listbox.tsx
@@ -21,7 +21,7 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 	return (
 		<>
 			<ListboxPrimitive value={selected} onChange={setSelected}>
-				<div className='relative w-full'>
+				<div className="relative w-full">
 					<ListboxPrimitive.Button
 						className={clsx(
 							`relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-500 
@@ -32,13 +32,13 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 						)}
 					>
 						{selected?.option ? (
-							<span className='block truncate'>{selected?.option}</span>
+							<span className="block truncate">{selected?.option}</span>
 						) : (
-							<span className='block truncate opacity-70'>Nothing selected...</span>
+							<span className="block truncate opacity-70">Nothing selected...</span>
 						)}
 
-						<span className='absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'>
-							<SelectorIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
+						<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+							<SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
 						</span>
 					</ListboxPrimitive.Button>
 
@@ -78,9 +78,9 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 										</span>
 
 										{selected ? (
-											<span className='absolute inset-y-0 left-0 flex items-center pl-2 text-white'>
-												<CheckIcon className='w-5 h-5' aria-hidden='true' />
-                      </span>
+											<span className="absolute inset-y-0 left-0 flex items-center pl-2 text-white">
+												<CheckIcon className="w-5 h-5" aria-hidden="true" />
+											</span>
 										) : null}
 									</>
 								)}
diff --git a/packages/interface/src/screens/settings/GeneralSettings.tsx b/packages/interface/src/screens/settings/GeneralSettings.tsx
index c7fbb3861..c727ed3a4 100644
--- a/packages/interface/src/screens/settings/GeneralSettings.tsx
+++ b/packages/interface/src/screens/settings/GeneralSettings.tsx
@@ -1,5 +1,6 @@
 import { useBridgeQuery } from '@sd/client';
 import React from 'react';
+
 import { InputContainer } from '../../components/primitive/InputContainer';
 import Listbox from '../../components/primitive/Listbox';
 
@@ -7,13 +8,13 @@ export default function GeneralSettings() {
 	const { data: volumes } = useBridgeQuery('SysGetVolumes');
 
 	return (
-		<div className='flex flex-col flex-grow max-w-4xl space-y-4'>
-			<div className='mt-3 mb-3'>
-				<h1 className='text-2xl font-bold'>General Settings</h1>
-				<p className='mt-1 text-sm text-gray-400'>Basic settings related to this client</p>
+		<div className="flex flex-col flex-grow max-w-4xl space-y-4">
+			<div className="mt-3 mb-3">
+				<h1 className="text-2xl font-bold">General Settings</h1>
+				<p className="mt-1 text-sm text-gray-400">Basic settings related to this client</p>
 				{/* <hr className="mt-4 border-gray-550" /> */}
 			</div>
-			<p className='px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600'>
+			<p className="px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
 				<b>Note: </b>This is a pre-alpha build of Spacedrive, many features are yet to be
 				functional.
 			</p>
@@ -43,9 +44,9 @@ export default function GeneralSettings() {
         </div>
       </InputContainer> */}
 
-			<InputContainer title='Volumes' description='A list of volumes running on this device.'>
-				<div className='flex flex-row space-x-2'>
-					<div className='flex flex-grow'>
+			<InputContainer title="Volumes" description="A list of volumes running on this device.">
+				<div className="flex flex-row space-x-2">
+					<div className="flex flex-grow">
 						<Listbox
 							options={
 								volumes?.map((volume) => {