UI, WIP undo

src/components/OperationsList.vue

@@ -0,0 +1,79 @@
+<template>
+  <TransitionGroup name="slide_up">
+    <div
+      class="mb-2 text-center"
+      v-for="(op, i) in operations"
+      :key="i">
+      <div class="inline-block relative text-xl">
+        <!-- OPERATION -->
+        <div
+          class="flex items-center"
+          :class="{ 'text-red-600': isOperationInvalid(op) }">
+          <!-- LEFT -->
+          <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            {{ op.left?.value ?? '&nbsp;' }}
+          </div>
+          <!-- RIGHT -->
+          <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            {{ op.operator ?? '&nbsp;' }}
+          </div>
+
+          <div class="w-[2.5em] border-b border-stone-600 transition-all">
+            {{ op.right?.value ?? '&nbsp;' }}
+          </div>
+
+          <!-- EQUALS -->
+          <div class="mx-4 border-none">
+            =
+          </div>
+
+          <!-- RESULT -->
+          <NumberBox class="w-[2.5em] border-none">
+            <IconSad v-if="isOperationInvalid(op)" />
+            <span
+              v-else-if="
+                op.operator && op.left && op.right && isOperationResultValid(op)
+              ">
+              {{ operate(op.operator, op.left.value, op.right.value) }}
+            </span>
+            <IconQuestion v-else />
+          </NumberBox>
+          <button
+            class="ml-8"
+            @click="undoOperation(i)">
+            <IconUndo
+              class="text-stone-400"
+              :class="{
+                invisible: !canOperationBeDeleted(op),
+              }" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </TransitionGroup>
+</template>
+
+<script setup lang="ts">
+import {
+  isOperationInvalid,
+  isOperationResultValid,
+  operate,
+  operations,
+  pushEmptyOperation,
+} from '@/algo'
+import { Operation } from '@/types'
+import IconQuestion from '~icons/bx/bx-question-mark'
+import IconSad from '~icons/bx/bx-sad'
+import IconUndo from '~icons/bx/bx-undo'
+
+import NumberBox from './common/NumberBox.vue'
+
+function canOperationBeDeleted(op: Operation): boolean {
+  return !!op.left || !!op.right || !!op.operator
+}
+
+function undoOperation(index: number): void {
+  while (operations.length > index) operations.pop()
+  if (!operations.length) pushEmptyOperation()
+}
+</script>

src/components/common/NumberBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex overflow-hidden justify-center font-bold rounded border transition-all">
+    class="flex overflow-hidden justify-center font-bold rounded border border-stone-600 transition-all">
     <span class="self-center text-center"><slot /></span>
   </div>
 </template>