put image list to scroll " <template>
  <v-app>
    <v-container fluid>
      <v-row justify="center" class="py-5">
        <!-- Sidebar for Images and File Inputs -->
        <v-col cols="3">
          <!-- Image Upload with Tooltip -->
          <v-file-input
            label="Upload Images"
            accept="image/*"
            outlined
            @change="onImageUpload"
            multiple
            prepend-icon="mdi-upload"
            hint="Select multiple images for annotation"
            persistent-hint
          ></v-file-input>

          <!-- List of Images with better spacing and highlighting -->
          <v-list class="mt-5" tile>
            <v-subheader class="font-weight-medium">Images</v-subheader>
            <v-list-item
              v-for="(img, index) in images"
              :key="index"
              @click="selectImage(index)"
              :class="{ 'active': selectedImageIndex === index, 'v-list-item--active': selectedImageIndex === index }"
              style="cursor: pointer;"
              :aria-label="'Select image ' + (index + 1)"
            >
              <v-list-item-content>
                <v-list-item-title>Image {{ index + 1 }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-col>

        <!-- Main Content for Canvas and Tools -->
        <v-col cols="9">
          <v-row>
            <v-col cols="8">
              <!-- Export Button positioned logically -->
              <v-btn
                color="primary"
                elevation="2"
                dark
                @click="exportToJson"
                class="mb-3"
                aria-label="Export annotated data with images"
              >
                Export Annotations
              </v-btn>

              <!-- Canvas for Drawing -->
              <v-card elevation="1">
                <v-card-text class="pa-4">
                  <canvas
                    ref="canvas"
                    :width="canvasWidth"
                    :height="canvasHeight"
                    @wheel.prevent="onMouseWheel"
                    @mousedown="onMouseDown"
                    @mouseup="onMouseUp"
                    @mousemove="onMouseMove"
                    style="border: 1px solid #ddd;"
                  ></canvas>
                </v-card-text>
              </v-card>

              <!-- Labels with descriptive badge -->
              <v-chip-group v-if="labels.length" mandatory class="mt-3">
                <v-chip
                  v-for="(label, index) in labels"
                  :key="label.name"
                  @click="selectLabel(label)"
                  :color="selectedLabel === label.name ? label.color : ''"
                  class="ma-2"
                  style="border-radius: 12px;"
                >
                  <v-badge :color="label.color" :content="index + 1" inline></v-badge>
                  <v-label class="ml-2">{{ label.name }}</v-label>
                </v-chip>
              </v-chip-group>
            </v-col>

            <!-- Rectangle List and Import -->
            <v-col cols="4">
              <!-- Import JSON with feedback -->
              <v-file-input
                label="Import Annotated Data"
                accept=".json"
                outlined
                @change="importJsonData"
                prepend-icon="mdi-folder-open"
                hint="Import existing annotations in JSON format"
                persistent-hint
              ></v-file-input>

              <!-- Rectangle List with emphasis on active selection -->
              <v-list v-if="rectangles.length" class="mt-5" tile>
                <v-subheader class="font-weight-medium">Rectangles</v-subheader>
                <v-list-item
                  v-for="(rect, index) in rectangles"
                  :key="index"
                  @click="toggleRectangleSelection(index, $event)"
                  :class="{ 'active': selectedRectangles.includes(rect), 'v-list-item--active': selectedRectangles.includes(rect) }"
                  style="cursor: pointer;"
                >
                  <template v-slot:prepend>
                    <v-icon :style="{ color: rect.color }">mdi-circle</v-icon>
                  </template>
                  <template v-slot:append>
                    <v-btn
                      icon
                      @click.stop="removeRectangle(index)"
                      color="red"
                      variant="tonal"
                      density="comfortable"
                      aria-label="Remove rectangle"
                    >
                      <v-icon>mdi-delete</v-icon>
                    </v-btn>
                  </template>
                  <v-list-item-content>
                    <v-list-item-title>{{ rect.label }}</v-list-item-title>
                    <v-list-item-subtitle>
                      [x: {{ rect.x }}, y: {{ rect.y }}, w: {{ rect.width }}, h:
                      {{ rect.height }}]
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>

          <!-- Export to ZIP Button -->
          <v-btn
            color="success"
            elevation="2"
            dark
            @click="exportToZip"
            class="my-3"
            aria-label="Export annotations and images as ZIP"
          >
            Export Annotations & ZIP
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>
"