optimize ui
This commit is contained in:
Julian Freeman
241
src/App.vue
241
src/App.vue
@@ -157,9 +157,6 @@ onMounted(() => {
|
||||
<h1>Browser Assistant</h1>
|
||||
<p>Local Chromium profile manager</p>
|
||||
</div>
|
||||
<button class="refresh-button" type="button" @click="scanBrowsers">
|
||||
{{ loading ? "Scanning..." : "Refresh" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="browsers.length" class="browser-nav">
|
||||
@@ -182,6 +179,10 @@ onMounted(() => {
|
||||
<div v-else class="sidebar-empty">
|
||||
<p>No supported Chromium browser data was found yet.</p>
|
||||
</div>
|
||||
|
||||
<button class="refresh-button sidebar-refresh" type="button" @click="scanBrowsers">
|
||||
{{ loading ? "Scanning..." : "Refresh" }}
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<main class="content-panel">
|
||||
@@ -228,130 +229,132 @@ onMounted(() => {
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section v-if="activeSection === 'profiles'" class="content-section">
|
||||
<div v-if="currentBrowser.profiles.length" class="stack-list">
|
||||
<article
|
||||
v-for="profile in currentBrowser.profiles"
|
||||
:key="profile.id"
|
||||
class="profile-card"
|
||||
>
|
||||
<div class="profile-avatar">
|
||||
<img
|
||||
v-if="profile.avatarDataUrl"
|
||||
:src="profile.avatarDataUrl"
|
||||
:alt="`${profile.name} avatar`"
|
||||
/>
|
||||
<span v-else>{{ profile.avatarLabel }}</span>
|
||||
</div>
|
||||
<div class="profile-body">
|
||||
<div class="profile-topline">
|
||||
<h4>{{ profile.name }}</h4>
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
<div class="content-scroll-area">
|
||||
<section v-if="activeSection === 'profiles'" class="content-section">
|
||||
<div v-if="currentBrowser.profiles.length" class="stack-list">
|
||||
<article
|
||||
v-for="profile in currentBrowser.profiles"
|
||||
:key="profile.id"
|
||||
class="profile-card"
|
||||
>
|
||||
<div class="profile-avatar">
|
||||
<img
|
||||
v-if="profile.avatarDataUrl"
|
||||
:src="profile.avatarDataUrl"
|
||||
:alt="`${profile.name} avatar`"
|
||||
/>
|
||||
<span v-else>{{ profile.avatarLabel }}</span>
|
||||
</div>
|
||||
<p class="profile-email">{{ profile.email || "No email found" }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty-card">
|
||||
<p>No profile directories were found for this browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="profile-body">
|
||||
<div class="profile-topline">
|
||||
<h4>{{ profile.name }}</h4>
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
<p class="profile-email">{{ profile.email || "No email found" }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty-card">
|
||||
<p>No profile directories were found for this browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else-if="activeSection === 'extensions'" class="content-section">
|
||||
<div v-if="currentBrowser.extensions.length" class="stack-list">
|
||||
<article
|
||||
v-for="extension in currentBrowser.extensions"
|
||||
:key="extension.id"
|
||||
class="extension-card"
|
||||
>
|
||||
<div class="extension-icon">
|
||||
<img
|
||||
v-if="extension.iconDataUrl"
|
||||
:src="extension.iconDataUrl"
|
||||
:alt="`${extension.name} icon`"
|
||||
/>
|
||||
<span v-else>{{ extensionMonogram(extension.name) }}</span>
|
||||
</div>
|
||||
<div class="extension-body">
|
||||
<div class="extension-topline">
|
||||
<h4>{{ extension.name }}</h4>
|
||||
<span v-if="extension.version" class="badge neutral">
|
||||
v{{ extension.version }}
|
||||
</span>
|
||||
<section v-else-if="activeSection === 'extensions'" class="content-section">
|
||||
<div v-if="currentBrowser.extensions.length" class="stack-list">
|
||||
<article
|
||||
v-for="extension in currentBrowser.extensions"
|
||||
:key="extension.id"
|
||||
class="extension-card"
|
||||
>
|
||||
<div class="extension-icon">
|
||||
<img
|
||||
v-if="extension.iconDataUrl"
|
||||
:src="extension.iconDataUrl"
|
||||
:alt="`${extension.name} icon`"
|
||||
/>
|
||||
<span v-else>{{ extensionMonogram(extension.name) }}</span>
|
||||
</div>
|
||||
<p class="meta-line">{{ extension.id }}</p>
|
||||
<div class="source-disclosure">
|
||||
<button
|
||||
class="disclosure-button"
|
||||
type="button"
|
||||
@click="toggleExtensionProfiles(extension.id)"
|
||||
>
|
||||
<span>Profiles</span>
|
||||
<span class="badge neutral">{{ extension.profileIds.length }}</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="extensionProfilesExpanded(extension.id)"
|
||||
class="disclosure-panel"
|
||||
>
|
||||
<span
|
||||
v-for="profileId in extension.profileIds"
|
||||
:key="`${extension.id}-${profileId}`"
|
||||
class="badge"
|
||||
>
|
||||
{{ profileId }}
|
||||
<div class="extension-body">
|
||||
<div class="extension-topline">
|
||||
<h4>{{ extension.name }}</h4>
|
||||
<span v-if="extension.version" class="badge neutral">
|
||||
v{{ extension.version }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty-card">
|
||||
<p>No extensions were discovered for this browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else class="content-section">
|
||||
<div v-if="currentBrowser.bookmarks.length" class="bookmark-list">
|
||||
<article
|
||||
v-for="bookmark in currentBrowser.bookmarks"
|
||||
:key="bookmark.url"
|
||||
class="bookmark-card"
|
||||
>
|
||||
<div class="bookmark-body">
|
||||
<div class="bookmark-topline">
|
||||
<h4>{{ bookmark.title }}</h4>
|
||||
<span class="badge neutral">{{ domainFromUrl(bookmark.url) }}</span>
|
||||
</div>
|
||||
<p class="bookmark-url" :title="bookmark.url">{{ bookmark.url }}</p>
|
||||
<div class="source-disclosure">
|
||||
<button
|
||||
class="disclosure-button"
|
||||
type="button"
|
||||
@click="toggleBookmarkProfiles(bookmark.url)"
|
||||
>
|
||||
<span>Profiles</span>
|
||||
<span class="badge neutral">{{ bookmark.profileIds.length }}</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="bookmarkProfilesExpanded(bookmark.url)"
|
||||
class="disclosure-panel"
|
||||
>
|
||||
<span
|
||||
v-for="profileId in bookmark.profileIds"
|
||||
:key="`${bookmark.url}-${profileId}`"
|
||||
class="badge"
|
||||
<p class="meta-line">{{ extension.id }}</p>
|
||||
<div class="source-disclosure">
|
||||
<button
|
||||
class="disclosure-button"
|
||||
type="button"
|
||||
@click="toggleExtensionProfiles(extension.id)"
|
||||
>
|
||||
{{ profileId }}
|
||||
</span>
|
||||
<span>Profiles</span>
|
||||
<span class="badge neutral">{{ extension.profileIds.length }}</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="extensionProfilesExpanded(extension.id)"
|
||||
class="disclosure-panel"
|
||||
>
|
||||
<span
|
||||
v-for="profileId in extension.profileIds"
|
||||
:key="`${extension.id}-${profileId}`"
|
||||
class="badge"
|
||||
>
|
||||
{{ profileId }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty-card">
|
||||
<p>No bookmarks were discovered for this browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty-card">
|
||||
<p>No extensions were discovered for this browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else class="content-section">
|
||||
<div v-if="currentBrowser.bookmarks.length" class="bookmark-list">
|
||||
<article
|
||||
v-for="bookmark in currentBrowser.bookmarks"
|
||||
:key="bookmark.url"
|
||||
class="bookmark-card"
|
||||
>
|
||||
<div class="bookmark-body">
|
||||
<div class="bookmark-topline">
|
||||
<h4>{{ bookmark.title }}</h4>
|
||||
<span class="badge neutral">{{ domainFromUrl(bookmark.url) }}</span>
|
||||
</div>
|
||||
<p class="bookmark-url" :title="bookmark.url">{{ bookmark.url }}</p>
|
||||
<div class="source-disclosure">
|
||||
<button
|
||||
class="disclosure-button"
|
||||
type="button"
|
||||
@click="toggleBookmarkProfiles(bookmark.url)"
|
||||
>
|
||||
<span>Profiles</span>
|
||||
<span class="badge neutral">{{ bookmark.profileIds.length }}</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="bookmarkProfilesExpanded(bookmark.url)"
|
||||
class="disclosure-panel"
|
||||
>
|
||||
<span
|
||||
v-for="profileId in bookmark.profileIds"
|
||||
:key="`${bookmark.url}-${profileId}`"
|
||||
class="badge"
|
||||
>
|
||||
{{ profileId }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty-card">
|
||||
<p>No bookmarks were discovered for this browser.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<section v-else class="state-panel">
|
||||
|
||||
Reference in New Issue
Block a user