Implement select in order to select devices

package.json

@@ -23,7 +23,6 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-svelte3": "^4.0.0",
-    "flowbite": "^1.5.3",
     "flowbite-svelte": "^0.26.7",
     "postcss": "^8.4.14",
     "postcss-import": "^15.0.0",

pnpm-lock.yaml

@@ -13,7 +13,6 @@ specifiers:
   eslint-config-airbnb-typescript: ^17.0.0
   eslint-plugin-import: ^2.25.2
   eslint-plugin-svelte3: ^4.0.0
-  flowbite: ^1.5.3
   flowbite-svelte: ^0.26.7
   postcss: ^8.4.14
   postcss-import: ^15.0.0
@@ -42,7 +41,6 @@ devDependencies:
   eslint-config-airbnb-typescript: 17.0.0_nwt6qmnsbmuicuvak5hafgwebq
   eslint-plugin-import: 2.26.0_wyxuyzvlfep3lsyoibc4fosfq4
   eslint-plugin-svelte3: 4.0.0_sc4laremvjv7grvyfrqmp3xv5q
-  flowbite: 1.5.3
   flowbite-svelte: 0.26.7
   postcss: 8.4.16
   postcss-import: 15.0.0_postcss@8.4.16

src-tauri/src/main.rs

@@ -126,19 +126,19 @@ fn download_resources(
   integrations_url: String,
 ) -> Result<(), io::Error> {
   let revanced_cli_filename = "revanced_cli.jar";
-  let cli_download_response = match download_in_dir(tmp_dir.path(), cli_url.as_str(), revanced_cli_filename) {
+  let _cli_download_response = match download_in_dir(tmp_dir.path(), cli_url.as_str(), revanced_cli_filename) {
     Ok(response) => response,
     Err(e) => e,
   };
 
   let revanced_patches_filename = "revanced_patches.jar";
-  let patches_download_response = match download_in_dir(tmp_dir.path(), patches_url.as_str(), revanced_patches_filename) {
+  let _patches_download_response = match download_in_dir(tmp_dir.path(), patches_url.as_str(), revanced_patches_filename) {
     Ok(response) => response,
     Err(e) => e,
   };
 
   let revanced_integrations_filename = "integrations.apk";
-  let integrations_download_response = match download_in_dir(tmp_dir.path(), integrations_url.as_str(), revanced_integrations_filename) {
+  let _integrations_download_response = match download_in_dir(tmp_dir.path(), integrations_url.as_str(), revanced_integrations_filename) {
     Ok(response) => response,
     Err(e) => e,
   };

src/App.svelte

@@ -7,7 +7,8 @@
 
   let version: string = '';
 
-  let devices: string[];
+  let devices: string[] = [];
+  let selectedDevice;
 
   let revancedCliReleases: Map<string, Release> | undefined;
   let revancedVersions: Array<Array<string>> | undefined;
@@ -31,7 +32,9 @@
   const getDevices = () => {
     invoke('get_devices')
       .then((response: string[]) => {
-        devices = response;
+        devices = response
+          .filter((s) => s.length <= 0)
+          .map((s) => s.split('\t')[0]);
       });
   };
 
@@ -133,6 +136,15 @@
       options={integrationsVersions}
       bind:selected={selectedIntegrationsVersion}
     />
+
+    {#if devices.length > 0}
+    <Select
+      id="devices"
+      defaultText={'Select the target device'}
+      options={devices.map((d) => [d, d])}
+      bind:selected={selectedDevice}
+    />
+    {/if}
   </div>
 
 </main>

src/app.postcss

@@ -30,4 +30,7 @@ body {
     dark:bg-gray-800 dark:text-gray-400 
     dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700
   }
+  :root {
+    @apply dark:bg-slate-900
+  }
 }

src/lib/Select.postcss

@@ -0,0 +1,3 @@
+.Select {
+  -webkit-appearance: none;
+}

src/lib/Select.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import './Select.postcss';
+  
   export let id: string;
   export let options: Array<Array<string>> | undefined;
   export let defaultText: string;
@@ -14,7 +16,7 @@
 <select
   bind:value={selected}
   id={id}
-  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+  class="Select bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
 >
   <option selected>{defaultText}</option>
   {#if options !== undefined}

tailwind.config.cjs

@@ -8,12 +8,7 @@ const config = {
   theme: {
     extend: {
     },
-  },
-
-  plugins: [
-    require('flowbite/plugin')
-  ],
-  darkMode: 'class',
+  }
 };
 
 module.exports = config;