web: add initial actionToolbar

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']

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>
 

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({

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,

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>
+
+
+