From e394d687723c76f07a02473c2076ccdc0ca2cef1 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 25 Feb 2026 00:24:29 +0000
Subject: [PATCH] fix: Remove unused components from web-app (#242)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/fcomponents/FSlider.vue    | 269 ------------------
 web-app/src/components/layouts/FFooter.vue    |  57 ----
 2 files changed, 326 deletions(-)
 delete mode 100644 web-app/src/components/fcomponents/FSlider.vue
 delete mode 100644 web-app/src/components/layouts/FFooter.vue

diff --git a/web-app/src/components/fcomponents/FSlider.vue b/web-app/src/components/fcomponents/FSlider.vue
deleted file mode 100644
index 6b797ed..0000000
--- a/web-app/src/components/fcomponents/FSlider.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-  <div>
-    <div class="slider-wrapper">
-      <div class="disabled-slider" :style="{ 'flex-basis': minPercentage + '%' }">
-        <div class="dot"></div>
-      </div>
-      <div class="range-slider">
-        <input
-          class="range-slider__range"
-          type="range"
-          ref="sliderInput"
-          :style="{
-            background: `linear-gradient(90deg, ${settings.fill} ${percentageDot}%, ${settings.background} ${percentageDot + 0.1}%)`,
-          }"
-          :value="props.modelValue"
-          :min="props.min"
-          :max="props.max"
-          @input="updateModelValue"
-        />
-        <div
-          class="testbla"
-          @mousemove="testMove"
-          :style="{
-            left: percentageDot + '%',
-          }"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref, computed } from 'vue';
-
-const sliderInput = ref<HTMLInputElement | null>(null);
-
-interface Emits {
-  (event: 'update:modelValue', value: number): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const props = defineProps<{
-  modelValue: number;
-  min: number;
-  max: number;
-}>();
-
-const minPercentage = computed(() => {
-  if (!props.min || !props.max) {
-    return 0;
-  }
-  return (props.min * 100) / props.max;
-});
-
-function updateModelValue(event: Event) {
-  emit('update:modelValue', (event.target as HTMLInputElement).valueAsNumber);
-}
-
-const sliderValue = computed({
-  // getter
-  get() {
-    return Number.isFinite(props.modelValue) ? props.modelValue : props.min;
-  },
-  // setter
-  set(newValue: number) {
-    emit('update:modelValue', newValue);
-  },
-});
-
-const percentageDot = computed(() => {
-  const range = props.max - props.min;
-  if (range <= 0) {
-    return 0;
-  }
-
-  let percentage = (100 * (sliderValue.value - props.min)) / range;
-
-  if (percentage < 20) {
-    percentage = percentage + 1;
-  } else if (percentage > 50) {
-    percentage = percentage - 2;
-  } else if (percentage > 80) {
-    percentage = percentage - 3;
-  }
-
-  return percentage;
-});
-
-const settings = {
-  fill: '#7550AE',
-  background: '#000000',
-};
-
-onMounted(() => {
-  if (sliderInput.value) {
-    sliderInput.value.addEventListener('input', setSliderValue);
-  }
-});
-
-function setSliderValue(event: Event) {
-  const target = event.target as HTMLInputElement | null;
-  if (target) {
-    sliderValue.value = target.valueAsNumber;
-  }
-}
-
-function testMove(_event: unknown) {}
-
-onUnmounted(() => {
-  if (sliderInput.value) {
-    sliderInput.value.removeEventListener('input', setSliderValue);
-  }
-});
-</script>
-
-<style lang="scss">
-.slider-wrapper {
-  display: flex;
-}
-.testbla {
-  position: absolute;
-  height: 25px;
-  width: 25px;
-  background-color: var(--color-based-blue);
-  user-select: none;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  right: 50%;
-  border-radius: 25px;
-  pointer-events: none;
-  z-index: 10;
-}
-.disabled-slider {
-  width: 60px;
-  height: 7px;
-  background-color: var(--color-border-main);
-  /* margin-top: auto; */
-  align-self: center;
-  margin-top: 2px;
-  position: relative;
-  z-index: 3;
-  pointer-events: none;
-}
-.dot {
-  border-radius: 50px;
-  height: 15px;
-  width: 15px;
-  background-color: var(--color-border-main);
-  position: absolute;
-  right: -14px;
-  /* bottom: 50%; */
-  top: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-// Base Colors
-$shade-10: #4682b4 !default;
-$shade-1: #d7dcdf !default;
-$shade-0: #fff !default;
-$teal: #4682b4 !default;
-
-// Range Slider
-$range-width: 100% !default;
-
-$range-handle-color: $shade-10 !default;
-$range-handle-color-hover: $teal !default;
-$range-handle-size: 15px !default;
-
-$range-track-color: $shade-1 !default;
-$range-track-height: 7px !default;
-
-$range-label-color: $shade-10 !default;
-$range-label-width: 60px !default;
-
-.range-slider {
-  width: $range-width;
-  position: relative;
-  accent-color: #7550ae;
-}
-
-.range-slider__range {
-  // width: calc(100% - (#{$range-label-width + 13px}));
-  width: 100%;
-  height: $range-track-height;
-  border-radius: 5px;
-  background: $range-track-color;
-  outline: none;
-  padding: 0;
-  margin: 0;
-
-  // Range Handle
-  &::-webkit-slider-thumb {
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    opacity: 0;
-    padding: 5px;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  &:active::-webkit-slider-thumb {
-    background: $range-handle-color-hover;
-  }
-
-  &::-moz-range-thumb {
-    width: $range-handle-size;
-    height: $range-handle-size;
-    border: 0;
-    border-radius: 50%;
-    background: $range-handle-color;
-    cursor: pointer;
-    transition: background 0.15s ease-in-out;
-
-    &:hover {
-      background: $range-handle-color-hover;
-    }
-  }
-
-  &:active::-moz-range-thumb {
-    background: $range-handle-color-hover;
-  }
-
-  // Focus state
-  &:focus {
-    &::-webkit-slider-thumb {
-      background-color: transparent;
-    }
-  }
-}
-
-// Range Label
-.range-slider__value {
-  display: inline-block;
-  position: relative;
-  width: $range-label-width;
-  color: $shade-0;
-  line-height: 20px;
-  text-align: center;
-  border-radius: 3px;
-  background: $range-label-color;
-  padding: 5px 10px;
-  margin-left: 8px;
-
-  &:after {
-    position: absolute;
-    top: 8px;
-    left: -7px;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-right: 7px solid $range-label-color;
-    border-bottom: 7px solid transparent;
-    content: '';
-  }
-}
-
-// Firefox Overrides
-::-moz-range-track {
-  background: $range-track-color;
-  border: 0;
-}
-
-input::-moz-focus-inner,
-input::-moz-focus-outer {
-  border: 0;
-}
-</style>
diff --git a/web-app/src/components/layouts/FFooter.vue b/web-app/src/components/layouts/FFooter.vue
deleted file mode 100644
index f9bcb21..0000000
--- a/web-app/src/components/layouts/FFooter.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="footer" :style="{ color: props.dark ? 'white' : 'black' }">
-    <div class="footer-inner">
-      <div class="footer-headline subheader2">Follow HARBERG Protocol</div>
-      <div class="social-links">
-        <SocialButton :dark="props.dark" type="discord" :href="discord"></SocialButton>
-        <SocialButton :dark="props.dark" type="telegram" :href="telegram"></SocialButton>
-        <SocialButton :dark="props.dark" type="twitter" :href="twitter"></SocialButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import SocialButton from '@/components/SocialButton.vue';
-
-interface Props {
-  dark?: boolean;
-}
-
-const discord = import.meta.env.VITE_DISCORD;
-const telegram = import.meta.env.VITE_TELEGRAM;
-const twitter = import.meta.env.VITE_TWITTER;
-
-const props = withDefaults(defineProps<Props>(), {});
-</script>
-
-<style lang="sass">
-.footer
-    height: auto
-    background-color: var(--midnight-black)
-    border-top: 0.5px solid
-    margin-top: auto
-    @media (min-width: 768px)
-        height: 150px
-        min-height: 150px
-        display: flex
-        flex-direction: column
-        justify-content: center
-        padding-bottom: unset
-        padding-bottom: 72px
-    .footer-inner
-        padding: 24px 0
-        font-size: 24px
-        display: flex
-        flex-direction: column
-        gap: 16px
-        align-items: center
-        border-top: 1px solid #000
-        @media (min-width: 768px)
-            padding: 16px 0 24px 0
-            justify-content: center
-            border-top: unset
-            background-color: transparent
-        .footer-headline subheader2
-            font-size: 16px
-</style>