webui: cleanup gui and features for first beta release

Author: sreimers

webui/src/components/LocalTrack.vue

@@ -10,7 +10,7 @@
         </div>
 
         <div class="flex mt-1">
-            <div class="bg-sl-02dpa rounded-lg min-h-[11em] w-full shadow pb-2">
+            <div class="bg-sl-02dpa rounded-lg min-h-[10em] w-full shadow pb-2">
                 <div class="flex justify-between items-center">
                     <div :id="`track${pkey}`" tabindex="0"
                         :class="{ 'bg-sl-disabled': isActive(), 'bg-sl-24dpa': !isActive() }"

webui/src/components/Navbar.vue

@@ -13,7 +13,7 @@
 			</a>
 			<a
 				href="#"
-				class="ml-4 inline-flex items-center px-1 pt-1 border-transparent text-base font-medium leading-5 text-sl-disabled hover:text-sl-on_surface_1 focus:text-gray-300 focus:border-gray-300"
+				class="hidden ml-4 inline-flex items-center px-1 pt-1 border-transparent text-base font-medium leading-5 text-sl-disabled hover:text-sl-on_surface_1 focus:text-gray-300 focus:border-gray-300"
 			>Options</a>
 		</div>
 	</nav>

webui/src/components/RemoteTrack.vue

@@ -1,5 +1,5 @@
 <template>
-    <li aria-label="Remote track" class="col-span-1" @mouseenter="setActive()" @touchstart.passive="setActive()">
+    <li aria-label="Remote track" class="aspect-video col-span-1" @mouseenter="setActive()" @touchstart.passive="setActive()">
         <div class="flex justify-between h-5">
             <h2 class="ml-1 font-semibold text-sl-disabled text-sm truncate pr-2">{{ getTrackName() }}</h2>
             <div class="flex">
@@ -13,7 +13,7 @@
         </div>
 
         <div class="flex mt-1">
-            <div class="relative bg-sl-02dpa rounded-lg min-h-[11em] w-full shadow pb-2">
+            <div class="relative bg-sl-02dpa rounded-lg min-h-[10em] w-full shadow pb-2">
                 <div class="flex justify-between items-center">
                     <div :id="`track${pkey}`" ref="tid" tabindex="0" @focus="setActive()"
                         :class="[isActive() ? 'bg-sl-disabled' : 'bg-sl-24dpa']"

webui/src/components/RoomsNav.vue

@@ -8,7 +8,7 @@
               font-medium
               text-sl-disabled
               hover:text-sl-on_surface_2
-            ">Room</a>
+            ">Studio</a>
                 </div>
             </li>
 
@@ -25,19 +25,7 @@
                     <button type="button"
                         class="ml-3 text-sl-disabled group inline-flex items-center rounded-md text-sm font-medium hover:text-sl-on_surface_1"
                         aria-expanded="false">
-                        <span>Default</span>
-                        <!--
-      Heroicon name: mini/chevron-down
-
-      Item active: "text-gray-600", Item inactive: "text-gray-400"
-    -->
-                        <svg class="text-sl-disabled ml-2 h-5 w-5 group-hover:text-sl-on_surface_1"
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-                            aria-hidden="true">
-                            <path fill-rule="evenodd"
-                                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                                clip-rule="evenodd" />
-                        </svg>
+                        <span>Local</span>
                     </button>
                 </div>
             </li>

webui/src/components/StudioNav.vue

@@ -24,12 +24,12 @@
                                 <div
                                     class="flex items-center justify-center w-12 h-12 transition-all duration-200 overflow-hidden rounded-2xl text-white hover:bg-sl-08dpa">
                                     <img class="h-10" src="/logo_solo.svg" alt="Studio Link - Default" />
-                                    <span class="sr-only">Studio Link Default</span>
+                                    <span class="sr-only">Studio - Local</span>
                                 </div>
                             </div>
                         </a>
                         <hr class="w-2/3 border-t-white/[.06] border-t-2 rounded mx-2" />
-                        <a href="#" class="relative block group">
+                        <a href="#" class="hidden relative block group" title="New Studio">
                             <div class="absolute flex items-center h-full -left-4">
                                 <div
                                     class="h-5 scale-0 opacity-0 group-hover:opacity-100 group-hover:scale-100 w-1 transition-all duration-200 origin-left bg-sl-primary rounded-r">
@@ -43,20 +43,25 @@
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                             d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                     </svg>
-                                    <span class="sr-only">New Studio Link</span>
+                                    <span class="sr-only">New Studio</span>
                                 </div>
                             </div>
                         </a>
                     </nav>
                 </div>
-                <div class="flex flex-shrink-0 pb-5">
-                    <a href="#" class="w-full flex-shrink-0" @click="oauth">
+                <div class="hidden flex flex-shrink-0 pb-5">
+                    <a v-if="auth" href="#" class="w-full flex-shrink-0" @click="oauth">
                         <img class="mx-auto block h-10 w-10 rounded-full" :src="user.imageUrl" alt="" />
                         <div class="sr-only">
                             <p>{{ user.name }}</p>
                             <p>Account settings</p>
                         </div>
                     </a>
+                    <a v-if="!auth" href="#" class="w-full flex-shrink-0" @click="oauth">
+                        <svg class="text-sl-on_surface_2 mx-auto block size-10 rounded-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25" />
+</svg>
+                    </a>
                 </div>
             </div>
         </div>
@@ -80,6 +85,8 @@ const user = {
         'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
 }
 
+const auth = false;
+
 const navigation = [
     { name: 'Home', href: '#', icon: HomeIcon },
     { name: 'Trending', href: '#', icon: FireIcon },

webui/src/components/Version.vue

@@ -2,6 +2,6 @@
     <div
       class="text-right text-xs text-sl-disabled pr-2"
     >
-      v22.11.0-alpha
+      v25.11.0-alpha
     </div>
 </template>