From f3ee0b9f7701944294f3908e5c1c0154dcbcd76c Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Fri, 13 Dec 2024 10:01:44 +0100
Subject: [PATCH] feat(ui): [WIP] activate UIv2 (new designs, new routes)

---
 front/src/App.vue                   |  9 ++++-
 front/src/router/index.ts           |  7 +++-
 front/src/ui/components/Sidebar.vue | 60 +++++++++++++++--------------
 3 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 54cd5643b..72d6929a3 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -78,7 +78,12 @@ onKeyboardShortcut('h', () => toggleShortcutsModal())
 //       because we want to learn if we are authenticated at all
 store.dispatch('auth/fetchUser')
 
-const isUIv2 = useLocalStorage('ui-v2', false)
+// TODO:
+// Research...
+// - "What is the use case for this toggle?"
+// - "Is Local Storage (persistence on a specific browser
+//    on a specific machine) the right place?"
+const isUIv2 = useLocalStorage('ui-v2', true)
 </script>
 
 <template>
@@ -89,5 +94,7 @@ const isUIv2 = useLocalStorage('ui-v2', false)
 <style>
 html, body {
   font-size: 16px;
+
 }
+
 </style>
diff --git a/front/src/router/index.ts b/front/src/router/index.ts
index 8589d6249..c39644cd8 100644
--- a/front/src/router/index.ts
+++ b/front/src/router/index.ts
@@ -5,7 +5,12 @@ import { forceInstanceChooser } from './guards'
 import routesV1 from './routes'
 import routesV2 from '~/ui/routes'
 
-const isUIv2 = useLocalStorage('ui-v2', false)
+// TODO:
+// Research...
+// - "What is the use case for this toggle?"
+// - "Is Local Storage (persistence on a specific browser
+//    on a specific machine) the right place?"
+const isUIv2 = useLocalStorage('ui-v2', true)
 const routes = isUIv2.value ? routesV2 : routesV1
 
 const router = createRouter({
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 325a41989..0c1160964 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -4,6 +4,10 @@ import { useUploadsStore } from '../stores/upload'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
+import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Pill from '~/components/ui/Pill.vue'
+
 const searchQuery = ref('')
 
 // Hide the fake app when the real one is loaded
@@ -29,14 +33,14 @@ const uploads = useUploadsStore()
           >
         </RouterLink>
 
-        <FwButton
+        <Button
           icon="bi:wrench"
           color="secondary"
           variant="ghost"
         />
 
         <RouterLink to="/upload" custom v-slot="{ navigate, isExactActive }">
-          <FwButton
+          <Button
             icon="bi:upload"
             color="secondary"
             variant="ghost"
@@ -55,10 +59,10 @@ const uploads = useUploadsStore()
                 />
               </div>
             </Transition>
-          </FwButton>
+          </Button>
         </RouterLink>
 
-        <FwButton
+        <Button
           icon="bi:inbox"
           color="secondary"
           variant="ghost"
@@ -86,7 +90,7 @@ const uploads = useUploadsStore()
       </nav>
 
       <div class="search">
-        <FwInput
+        <Input
           v-model="searchQuery"
           icon="bi-search"
           :placeholder="t('components.audio.SearchBar.placeholder.search')"
@@ -95,82 +99,82 @@ const uploads = useUploadsStore()
 
       <h3>Explore</h3>
       <nav class="button-list">
-        <FwButton
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-compass"
         >
           All Funkwhale
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-music-note-beamed"
         >
           Music
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-mic"
         >
           Podcasts
-        </FwButton>
+        </Button>
       </nav>
 
       <h3>Library</h3>
       <div class="pill-list">
-        <FwPill>Music</FwPill>
-        <FwPill outline>
+        <Pill>Music</Pill>
+        <Pill outline>
           Podcasts
-        </FwPill>
-        <FwPill outline>
+        </Pill>
+        <Pill outline>
           Sharing
-        </FwPill>
+        </Pill>
       </div>
       <nav class="button-list">
-        <FwButton
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-collection"
         >
           Collections
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-person"
         >
           Artists
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-disc"
         >
           Albums
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-music-note-list"
         >
           Playlists
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-question-diamond"
         >
           Radios
-        </FwButton>
-        <FwButton
+        </Button>
+        <Button
           color="secondary"
           variant="ghost"
           icon="bi-heart"
         >
           Favorites
-        </FwButton>
+        </Button>
       </nav>
     </div>
   </aside>