From a6b1004b741092de487db9352c151efdbf081cab Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 22 Feb 2024 16:56:44 +0300
Subject: [PATCH 1/3] overall better

---
 src/App.svelte                                | 30 +++++++++----------
 src/ManipulationsPanel.svelte                 |  2 --
 src/app.css                                   |  3 +-
 src/components/Heading.svelte                 | 12 ++++++++
 src/components/TextArea.svelte                |  8 ++---
 .../components/Manipulation.svelte            | 10 ++-----
 6 files changed, 34 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Heading.svelte

diff --git a/src/App.svelte b/src/App.svelte
index e0178d5..bb581fa 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,20 +3,15 @@
   import ManipulationsPanel from "./ManipulationsPanel.svelte";
   
   import TextArea from "./components/TextArea.svelte";
+  import Heading from "./components/Heading.svelte";
 
-  let source = "Try me!\nPress \"Apply\""
+  let source = "Try me!\nResult will update automatically"
   let result = ""
   let manipulations: TManipulation[] = [{
     type: "replace",
-    from: "\\n", to: "--", id: "initial"
+    from: "\\n", to: " -- ", id: "initial"
   }]
 
-  function onApply(event: MouseEvent) {
-    if (event.type == "click") {
-      result = applyManipulations(source, manipulations)
-    }
-  }
-
   document.addEventListener("keydown", (event) => {
     if (event.ctrlKey && event.key === "Enter") {
       result = applyManipulations(source, manipulations)
@@ -28,26 +23,29 @@
 
 <div class="panels">
   <div class="panel">
-    <TextArea id="source" labelText="Source" bind:value={source} />
+    <Heading text="Source" />
+    <TextArea id="source" bind:value={source} />
   </div>
-  
+
   <div class="panel">
-    <TextArea id="result" labelText="Result" bind:value={result} />
+    <Heading text="Manipulations" />
+    <ManipulationsPanel bind:manipulations />
   </div>
 
   <div class="panel">
-    <ManipulationsPanel bind:manipulations />
-    <!-- <button on:click={onApply}>Apply</button> -->
+    <Heading text="Result" />
+    <TextArea id="result" bind:value={result} />
   </div>
-  
 </div>
 
 
 <style>
   .panels {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
+
+    padding: 10px;
   }
 
   .panel {
diff --git a/src/ManipulationsPanel.svelte b/src/ManipulationsPanel.svelte
index 03bd96b..fa8ce32 100644
--- a/src/ManipulationsPanel.svelte
+++ b/src/ManipulationsPanel.svelte
@@ -3,11 +3,9 @@
   import { ManipulationsList } from "./manipulations";
 
   export let manipulations: TManipulation[] = []
-  // $: console.log(manipulations)
 </script>
 
 <div class="panel">
-  <label for="manipulations">Manipulations</label>
   <ManipulationsList bind:manipulations/>
 </div>
 
diff --git a/src/app.css b/src/app.css
index 4dc8eae..3fbb622 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,9 +2,10 @@ html {
   --bg-color-100: hsl(157, 100%, 90%);
   --border-color-100: hsl(157, 100%, 10%);
 
-  --text-color: #000
+  --text-color: hsl(157, 100%, 10%);
 }
 
 body {
   background-color: var(--bg-color-100);
+  font-family: monospace;
 }
diff --git a/src/components/Heading.svelte b/src/components/Heading.svelte
new file mode 100644
index 0000000..c6dd819
--- /dev/null
+++ b/src/components/Heading.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let text: string
+</script>
+
+<h1>{text}</h1>
+
+<style>
+  h1 {
+    color: var(--text-color);
+    font-family: monospace;
+  }
+</style>
diff --git a/src/components/TextArea.svelte b/src/components/TextArea.svelte
index 764c503..6296e78 100644
--- a/src/components/TextArea.svelte
+++ b/src/components/TextArea.svelte
@@ -13,13 +13,13 @@
 
 <style>
   textarea {
-    height: 500px;
-    width: 300px;
-    /* background-color: #FFF; */
+    width: 100%;
     color: var(--text-color);
     border-radius: 10px;
-    border: 1px solid var(--border-color-100);
+    border: 2px solid var(--border-color-100);
     padding: 10px;
+
+    font-family: monospace;
   }
 
   textarea:focus {
diff --git a/src/manipulations/components/Manipulation.svelte b/src/manipulations/components/Manipulation.svelte
index 270dd86..add6e60 100644
--- a/src/manipulations/components/Manipulation.svelte
+++ b/src/manipulations/components/Manipulation.svelte
@@ -38,14 +38,6 @@
 </div>
 
 <style>
-  :global(.manipulation) {
-    /* default colors */
-    --manipulation-bg-color: grey;
-    --manipulation-border-color: white;
-
-    
-  }
-
   div {
     display: flex;
     flex-direction: row;
@@ -66,6 +58,8 @@
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
+
+    margin-left: auto;
   }
 
   .delete:hover {

From cf96cbe87103c99eedfb9cd5c971f9f6059c5b3f Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 22 Feb 2024 17:32:26 +0300
Subject: [PATCH 2/3] icons

---
 index.html                                    |  4 ++--
 public/lines.svg                              | 22 +++++++++++++++++++
 public/trash-can.svg                          |  4 ++++
 public/vite.svg                               |  1 -
 .../components/Manipulation.svelte            |  7 +++++-
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 public/lines.svg
 create mode 100644 public/trash-can.svg
 delete mode 100644 public/vite.svg

diff --git a/index.html b/index.html
index 87d57ea..d10025e 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/lines.svg" />
     <link rel="stylesheet" href="/reset.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
+    <title>String Manipulator</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/public/lines.svg b/public/lines.svg
new file mode 100644
index 0000000..817c9cd
--- /dev/null
+++ b/public/lines.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
+<style type="text/css">
+	.pictogram_een{fill:#F4D6B0;}
+	.pictogram_twee{fill:#F8AD89;}
+	.pictogram_zes{fill:#0C6667;}
+	.pictogram_drie{fill:#F27261;}
+	.st0{fill:#E54D2E;}
+	.st1{fill:#01A59C;}
+	.st2{fill:#F8AD89;}
+	.st3{fill:none;}
+	.st4{fill:#008A74;}
+</style>
+<g>
+	<path class="pictogram_twee" d="M11,27H4v-4h7h5v-5H4v-4h12V9H8H4V5h4h8V0H3C1.35,0,0,1.35,0,3v26c0,1.65,1.35,3,3,3h13v-5H11z"/>
+	<path class="pictogram_een" d="M29,0H16v5h12v4H16v5h10v4H16v5h9h3v4h-3h-9v5h13c1.65,0,3-1.35,3-3V3C32,1.35,30.65,0,29,0z"/>
+	<path class="pictogram_zes" d="M28,5v4H8V5H28z M28,27v-4h-3v4H28z M4,18h12v-4H4V18z M4,23v4h7v-4H4z"/>
+	<path class="pictogram_drie" d="M16,18v-4h12v4H16z M4,5v4h4V5H4z M11,23v4h14v-4H11z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/trash-can.svg b/public/trash-can.svg
new file mode 100644
index 0000000..d6ac341
--- /dev/null
+++ b/public/trash-can.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12L14 16M14 12L10 16M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M18 6V16.2C18 17.8802 18 18.7202 17.673 19.362C17.3854 19.9265 16.9265 20.3854 16.362 20.673C15.7202 21 14.8802 21 13.2 21H10.8C9.11984 21 8.27976 21 7.63803 20.673C7.07354 20.3854 6.6146 19.9265 6.32698 19.362C6 18.7202 6 17.8802 6 16.2V6" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/manipulations/components/Manipulation.svelte b/src/manipulations/components/Manipulation.svelte
index add6e60..edb310a 100644
--- a/src/manipulations/components/Manipulation.svelte
+++ b/src/manipulations/components/Manipulation.svelte
@@ -34,7 +34,7 @@
   {:else if manipulation.type == "splitJoin"}
     <SplitJoin bind:splitString={manipulation.splitString} bind:joinString={manipulation.joinString} bind:innerManipulations={manipulation.innerManipulations}/>
   {/if}
-  <button class="delete" on:click={sendDeleteEvent}>X</button>
+  <button class="delete" on:click={sendDeleteEvent}><img src="trash-can.svg" alt="Delete"/></button>
 </div>
 
 <style>
@@ -71,4 +71,9 @@
     outline: none;
     background-color: var(--bg-color-100);
   }
+
+  .delete img {
+    min-width: 20px;
+    height: 20px;
+  }
 </style>

From a3ec2f5dddc3f24ca8efbd27b5df4201a897f384 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 22 Feb 2024 17:43:31 +0300
Subject: [PATCH 3/3] clean up

---
 src/manipulations/components/Manipulation.svelte      | 1 -
 src/manipulations/components/ManipulationsList.svelte | 1 -
 src/manipulations/components/SplitJoin.svelte         | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/manipulations/components/Manipulation.svelte b/src/manipulations/components/Manipulation.svelte
index edb310a..966f2d8 100644
--- a/src/manipulations/components/Manipulation.svelte
+++ b/src/manipulations/components/Manipulation.svelte
@@ -9,7 +9,6 @@
   const dispatch = createEventDispatcher()
 
   function sendDeleteEvent() {
-    console.log(`Sendind delete event for ${manipulation.id}`)
     dispatch("delete", {
       id: manipulation.id
     })
diff --git a/src/manipulations/components/ManipulationsList.svelte b/src/manipulations/components/ManipulationsList.svelte
index ec03b65..e3985c7 100644
--- a/src/manipulations/components/ManipulationsList.svelte
+++ b/src/manipulations/components/ManipulationsList.svelte
@@ -9,7 +9,6 @@
       return manipulation.id !== event.detail.id
     })
   }
-  // $: console.log(manipulations)
 </script>
 
 <div id="manipulations" class="manipulations">
diff --git a/src/manipulations/components/SplitJoin.svelte b/src/manipulations/components/SplitJoin.svelte
index ab7c582..f9c2701 100644
--- a/src/manipulations/components/SplitJoin.svelte
+++ b/src/manipulations/components/SplitJoin.svelte
@@ -36,7 +36,6 @@
     flex-direction: column;
     gap: 10px;
 
-    /* border: 2px solid black; */
     padding: 5px;
   }