add import dialog

Author: vitormv

package.json

@@ -15,9 +15,10 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
-    "@types/yargs-parser": "^21",
+    "@types/yargs-parser": "^21.0.3",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
+    "@zerodevx/svelte-toast": "^0.9.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",

src/components/ExportOptions.svelte

@@ -91,11 +91,6 @@
   h3 {
     margin: 0;
   }
-  .export {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-  }
 
   .content {
     display: flex;

src/components/Home.svelte

@@ -10,6 +10,9 @@
   import { importFromUrlHash } from '~/data/import/importFromUrlHash';
   import { colorsStore } from '~/data/colors.store';
   import { optionsStore } from '~/data/options.store';
+  import ExportOptions from '~/components/ExportOptions.svelte';
+  import ImportOptions from '~/components/ImportOptions.svelte';
+  import { SvelteToast } from '@zerodevx/svelte-toast';
 
   let terminalContentEl: HTMLDivElement;
 
@@ -68,11 +71,29 @@
 
   <div class="panel-terminal">
     <Box title="Preview" bind:contentEl={terminalContentEl}>
+      <svelte:fragment slot="buttons">
+        <ImportOptions />
+        <ExportOptions />
+      </svelte:fragment>
+
       <TerminalWindow />
     </Box>
   </div>
 </main>
 
+<SvelteToast
+  options={{
+    reversed: true,
+    intro: { y: 192 },
+    theme: {
+      '--toastColor': 'mintcream',
+      '--toastBackground': 'rgba(72,187,120,0.9)',
+      '--toastBarBackground': '#2F855A',
+      '--toastBarHeight': 0,
+    },
+  }}
+/>
+
 <style lang="scss">
   .layout {
     display: flex;

src/components/ImportOptions.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import Modal from '~/components/common/Modal.svelte';
+  import { toast } from '@zerodevx/svelte-toast';
+
+  import { ArrowForwardOutline, CodeDownloadOutline } from 'svelte-ionicons';
+  import { importFromEnvArgs } from '~/data/import/importFromEnvArgs';
+
+  let textareaEl: HTMLTextAreaElement;
+  let isModalOpen = false;
+
+  let errorMessage = '';
+
+  function validateInput(textareaValue: string) {
+    if (textareaValue.startsWith('export ') || textareaValue.includes('FZF_DEFAULT_OPTS')) {
+      errorMessage =
+        'Invalid input. Text should not start with "export" and should not contain "FZF_DEFAULT_OPTS".';
+      return false;
+    }
+    errorMessage = '';
+    return true;
+  }
+
+  function onClickImport() {
+    if (!textareaEl) return;
+
+    const value = textareaEl.value;
+
+    if (validateInput(value)) {
+      importFromEnvArgs(value);
+      isModalOpen = false;
+
+      textareaEl.value = '';
+      toast.push('Imported theme and colors!', {});
+    }
+  }
+</script>
+
+<button
+  class="export btn btn-primary"
+  on:click={() => (isModalOpen = true)}
+  on:change={() => (errorMessage = '')}
+>
+  Import Options <CodeDownloadOutline size="16" />
+</button>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="wrapper" on:mousemove|stopPropagation>
+  <Modal bind:showModal={isModalOpen}>
+    <h2 slot="header">Import Options</h2>
+
+    <div class="content">
+      <p style="flex: 1;">
+        Paste the <strong>contents</strong> of your <code>FZF_DEFAULT_OPTS</code> variable.
+      </p>
+
+      <textarea
+        bind:this={textareaEl}
+        placeholder="Paste only the variable contents (inside the quotes)..."
+      ></textarea>
+
+      <div class="footer">
+        <div class="error" style="word-wrap: break-word; overflow-wrap: break-word;">
+          {errorMessage}
+        </div>
+        <button class="export btn btn-primary" on:click={onClickImport}>
+          Import <ArrowForwardOutline size="16" />
+        </button>
+      </div>
+    </div>
+  </Modal>
+</div>
+
+<style lang="scss">
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: 100%;
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
+</style>

src/components/TerminalWindow.svelte

@@ -6,7 +6,6 @@
   import { renderLines } from '~/utils/tui/renderLines';
   import { addDelegateEventListener } from '~/utils/addDelegateEventListener';
   import { toFzfColorName } from '~/utils/colors/toFzfColorName';
-  import ExportOptions from '~/components/ExportOptions.svelte';
 
   // take all known color tokens and set them as css variables
   $: allTokenVariables = orderedColorTokens
@@ -114,8 +113,6 @@
   });
 </script>
 
-<ExportOptions />
-
 <div bind:this={wrapperEl} class="wrapper" style={allTokenVariables}>
   <div class="window-title" style:max-width={maxTerminalWidth}>
     <div class="dot red"></div>

src/components/common/Box.svelte

@@ -5,17 +5,29 @@
   export let contentStyle: string = '';
 
   export let contentEl: HTMLDivElement | undefined = undefined;
+
+  const hasButtons = !!$$slots.buttons;
 </script>
 
 <div class="box" style={style}>
-  {#if title}
-    <h2 class="title">{title}</h2>
+  {#if hasButtons || title}
+    <div class="header">
+      {#if title}
+        <h2 class="title">{title}</h2>
+      {/if}
+
+      {#if hasButtons}
+        <div class="buttons">
+          <slot name="buttons" />
+        </div>
+      {/if}
+    </div>
   {/if}
 
   <div bind:this={contentEl} class="content" style={contentStyle}><slot /></div>
 </div>
 
-<style>
+<style lang="scss">
   .box {
     background-color: var(--box-bg-color);
     padding: 15px;
@@ -24,12 +36,24 @@
     flex-direction: column;
   }
 
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    gap: 15px;
+
+    .buttons {
+      display: flex;
+      gap: 15px;
+    }
+  }
+
   .title {
-    margin-bottom: 1rem;
     font-size: 1.2rem;
     font-weight: bold;
-    margin-bottom: 15px;
     margin-top: 0;
+    margin-bottom: 0;
   }
 
   .content {

src/components/common/Modal.svelte

@@ -5,6 +5,8 @@
   let dialog: HTMLDialogElement;
 
   $: if (dialog && showModal) dialog.showModal();
+
+  $: if (dialog && !showModal) dialog.close();
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
@@ -50,7 +52,7 @@
   }
 
   .wrapper {
-    min-width: 700px;
+    width: 700px;
     min-height: 500px;
     background-color: var(--bg-color);
     color: var(--text-color);

src/data/import/importFromEnvArgs.ts

@@ -1,12 +1,26 @@
-import parser from 'yargs-parser';
+import parser from 'yargs-parser/browser';
+import type { Options } from 'yargs-parser';
+import { colorsStore } from '~/data/colors.store';
 import { fzfOptionsConfig } from '~/data/fzfOptions.config';
 import { validateAndParseColors } from '~/data/import/validateAndParseColors';
 import { validateAndParseThemeOptions } from '~/data/import/validateAndParseThemeOptions';
-import { isValidOption, type ThemeOption, type ThemeOptions } from '~/data/options.store';
+import {
+  isValidOption,
+  optionsStore,
+  type ThemeOption,
+  type ThemeOptions,
+} from '~/data/options.store';
 import { toFzfColorName } from '~/utils/colors/toFzfColorName';
 
-export const importFromEnvArgs = (argsStr: string) => {
-  const parsedObj = parser(argsStr.replace(/\n/g, ' '));
+const yargsParserOptions: Options = {
+  configuration: {
+    'parse-numbers': false,
+    'camel-case-expansion': false,
+  },
+};
+
+export const parseEnvArgs = (argsStr: string) => {
+  const parsedObj = parser(argsStr.replace(/\n/g, ' '), yargsParserOptions);
   const themeOptions: Partial<ThemeOptions> = {};
   const colors: Record<string, string> = {};
 
@@ -40,3 +54,12 @@ export const importFromEnvArgs = (argsStr: string) => {
     colors: validateAndParseColors(colors),
   };
 };
+
+export const importFromEnvArgs = (argsStr: string) => {
+  const parsed = parseEnvArgs(argsStr);
+
+  optionsStore.updateAll(parsed.themeOptions);
+  colorsStore.updateAllColors(parsed.colors);
+
+  return parsed;
+};

src/styles/main.css

@@ -91,3 +91,10 @@ a:hover {
     pointer-events: none;
   }
 }
+
+:root {
+  --toastContainerTop: auto;
+  --toastContainerRight: auto;
+  --toastContainerBottom: 2rem;
+  --toastContainerLeft: calc(50vw - 8rem);
+}

src/vendor.d.ts

@@ -8,3 +8,8 @@ declare module '*.md' {
   // Modify below per your usage
   export { attributes, html };
 }
+
+declare module 'yargs-parser/browser' {
+  export * from 'yargs-parser';
+  export { default } from 'yargs-parser';
+}