11<script setup lang="ts">
2- import type { TaskStatsResponse } from ' @/types/types' ;
2+ import type { AppManifest , TaskStatsResponse } from ' @/types/types' ;
33
44import { computed , onMounted , ref , watch , type Component , type Ref } from ' vue' ;
55import { useDashboardStore } from ' @/stores/DashboardStore' ;
@@ -17,6 +17,8 @@ import SidebarCard from '@/components/cards/SidebarCard.vue';
1717import LayoutBase from ' @/layouts/LayoutBase.vue' ;
1818
1919import ProiconsLibrary from ' ~icons/proicons/library' ;
20+ import ProiconsServer from ' ~icons/proicons/server' ;
21+ import ProiconsGithub from ' ~icons/proicons/github' ;
2022import ProiconsGraph from ' ~icons/proicons/graph' ;
2123import CircumServer from ' ~icons/circum/server' ;
2224import LucideUsers from ' ~icons/lucide/users' ;
@@ -27,7 +29,7 @@ const { stateTaskStats, stateTotalLibrariesSize, stateLibraryId, stateActiveSess
2729 stateLibraryId: Ref <number >;
2830 stateActiveSessions: Ref <number >;
2931};
30- const { pageTitle, selectedSideBar } = storeToRefs (useAppStore ());
32+ const { pageTitle, selectedSideBar, appManifest } = storeToRefs (useAppStore ()) as unknown as { pageTitle : Ref < any >; selectedSideBar : Ref < any >; appManifest : Ref < AppManifest > } ;
3133const { cycleSideBar } = useAppStore ();
3234const { userData } = storeToRefs (useAuthStore ());
3335
@@ -123,7 +125,7 @@ watch(
123125 <h2 id =" sidebar-title" class =" text-2xl h-8 w-full capitalize dark:text-white" >{{ selectedSideBar }}</h2 >
124126 <hr class =" " />
125127 </div >
126- <section class =" flex flex-col gap-2" >
128+ <section class =" flex flex-col gap-2 flex-1 " >
127129 <SidebarCard
128130 v-for =" (tab , index ) in dashboardTabs .filter ((tab ) => ! tab .disabled ) "
129131 :key =" index "
@@ -143,7 +145,7 @@ watch(
143145 :aria-disabled =" tab .disabled "
144146 >
145147 <template #header >
146- <h3 class =" w-full flex-1" :title =" tab.title ?? tab.name" >{{ tab.title ?? tab.name }}</h3 >
148+ <h3 class =" w-full flex-1 text-gray-900 dark:text-white " :title =" tab.title ?? tab.name" >{{ tab.title ?? tab.name }}</h3 >
147149 <component v-if =" tab.icon" :is =" tab.icon" class =" ml-auto w-6 h-6" />
148150 </template >
149151 <template #body >
@@ -156,6 +158,29 @@ watch(
156158 </h4 >
157159 </template >
158160 </SidebarCard >
161+
162+ <SidebarCard
163+ :to =" ` ${appManifest ?.commit ? ` https://github.com/aminnausin/mediaServer/commit/${appManifest ?.commit } ` : ' ' } ` "
164+ :class =" `
165+ items-center justify-between text-sm
166+ capitalize overflow-hidden bg-white hover:bg-primary-800
167+ ring-inset ring-purple-600 hover:ring-purple-600/50 hover:ring-[0.125rem]
168+ aria-disabled:cursor-not-allowed aria-disabled:hover:ring-neutral-200 aria-disabled:hover:dark:ring-neutral-700 aria-disabled:opacity-60
169+ ` "
170+ @click =" "
171+ :aria-disabled =" false "
172+ >
173+ <template #header >
174+ <h3 class =" text-gray-900 dark:text-white" :title =" 'Source Code'" >#{{ appManifest.commit }}</h3 >
175+ <ProiconsGithub class="ml-auto w-6 h-6" />
176+ </template >
177+ <template #body >
178+ <h4 title =" Description" class =" text-neutral-500 w-full text-wrap truncate sm:text-nowrap flex-1" >MediaServer</h4 >
179+ <h4 v-if =" appManifest.commit" title =" Information" class =" truncate text-nowrap sm:text-right text-neutral-500 w-fit" >
180+ {{ appManifest.version ?? 'V0.1.15b' }}
181+ </h4 >
182+ </template >
183+ </SidebarCard >
159184 </section >
160185 </div >
161186 </template >
0 commit comments