From 4a25c0a3c5cf8d30fdb77987eaa44184147c26b2 Mon Sep 17 00:00:00 2001
From: Mika <mika.bomm@outlook.com>
Date: Mon, 8 Jul 2024 15:39:05 +0200
Subject: [PATCH] web: add initial actionToolbar

---
 web/components.d.ts                      |  1 +
 web/src/App.vue                          |  2 +
 web/src/components/CategoryContainer.vue |  1 -
 web/src/components/ListViewElement.vue   |  2 -
 web/src/components/actionToolbar.vue     | 54 ++++++++++++++++++++++++
 5 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/actionToolbar.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index 187ed8e..fb22071 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ActionToolbar: typeof import('./src/components/actionToolbar.vue')['default']
     CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
     HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
diff --git a/web/src/App.vue b/web/src/App.vue
index b5dd2fb..7c83622 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -3,6 +3,7 @@
     <v-main>
       <HeaderBar />
       <div class="ma-8">
+        <actionToolbar />
         <li>
           <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
           <CategoryContainer licenseGroupName="Microsoft"/>
@@ -16,6 +17,7 @@
 <script setup lang="ts">
 import HeaderBar from './components/HeaderBar.vue';
 import CategoryContainer from './components/CategoryContainer.vue';
+import actionToolbar from './components/actionToolbar.vue';
 
 </script>
 
diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
index 76d979b..b805ff1 100644
--- a/web/src/components/CategoryContainer.vue
+++ b/web/src/components/CategoryContainer.vue
@@ -24,7 +24,6 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps } from 'vue'
   import ListViewElement from './ListViewElement.vue'
 
   const props = defineProps({
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 1bd1218..73e1963 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -41,8 +41,6 @@
   import { KeyRound } from 'lucide-vue-next';
   import { Check } from 'lucide-vue-next';
   import { Skull } from 'lucide-vue-next';
-  import { defineProps } from 'vue'
-
 
   const props = defineProps({
     licenseName: String,
diff --git a/web/src/components/actionToolbar.vue b/web/src/components/actionToolbar.vue
new file mode 100644
index 0000000..36096bb
--- /dev/null
+++ b/web/src/components/actionToolbar.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-card flat>
+    <v-container fluid>
+      <v-row class="child-flex">
+        <div>
+          <v-toolbar>
+            <v-btn
+              class="hidden-xs-only"
+              icon
+            >
+              <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+
+            <v-toolbar-title>Title</v-toolbar-title>
+
+            <v-spacer></v-spacer>
+
+            <v-btn
+              class="hidden-xs-only"
+              icon
+            >
+              <v-icon>mdi-magnify</v-icon>
+            </v-btn>
+          </v-toolbar>
+        </div>
+
+        <div style="flex-basis: 20%">
+          <v-toolbar dark>
+            <v-spacer></v-spacer>
+
+            <v-btn icon>
+              <v-icon>mdi-reply</v-icon>
+            </v-btn>
+
+            <v-btn icon>
+              <v-icon>mdi-dots-vertical</v-icon>
+            </v-btn>
+          </v-toolbar>
+        </div>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
+
+
+