switch to table
This commit is contained in:
Julian Freeman
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import SortDropdown from "../SortDropdown.vue";
|
||||
import type {
|
||||
AssociatedProfileSortKey,
|
||||
AssociatedProfileSummary,
|
||||
@@ -24,12 +23,9 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const sortKey = ref<AssociatedProfileSortKey>("id");
|
||||
|
||||
const sortedProfiles = computed(() => sortAssociatedProfiles(props.profiles, sortKey.value));
|
||||
|
||||
function hasBookmarkPath(
|
||||
profile: ModalProfile,
|
||||
): profile is BookmarkAssociatedProfileSummary {
|
||||
function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedProfileSummary {
|
||||
return "bookmarkPath" in profile;
|
||||
}
|
||||
</script>
|
||||
@@ -44,33 +40,40 @@ function hasBookmarkPath(
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-toolbar">
|
||||
<SortDropdown
|
||||
v-model="sortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Profile ID', value: 'id' },
|
||||
{ label: 'Name', value: 'name' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-table">
|
||||
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
|
||||
<div class="header-cell icon-cell">Avatar</div>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="sortKey = 'id'">Profile ID</button>
|
||||
<div v-if="isBookmark" class="header-cell">Bookmark Path</div>
|
||||
<div class="header-cell actions-cell">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-list">
|
||||
<article v-for="profile in sortedProfiles" :key="profile.id" class="modal-profile-card">
|
||||
<div class="modal-profile-avatar">
|
||||
<img
|
||||
v-if="profile.avatarDataUrl"
|
||||
:src="profile.avatarDataUrl"
|
||||
:alt="`${profile.name} avatar`"
|
||||
/>
|
||||
<span v-else>{{ profile.avatarLabel }}</span>
|
||||
</div>
|
||||
<div class="modal-profile-body">
|
||||
<div class="modal-profile-topline">
|
||||
<div class="modal-profile-heading">
|
||||
<h4>{{ profile.name }}</h4>
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
<div class="modal-list">
|
||||
<article
|
||||
v-for="profile in sortedProfiles"
|
||||
:key="profile.id"
|
||||
class="modal-table-row modal-grid"
|
||||
:class="{ bookmark: isBookmark }"
|
||||
>
|
||||
<div class="modal-profile-avatar">
|
||||
<img v-if="profile.avatarDataUrl" :src="profile.avatarDataUrl" :alt="`${profile.name} avatar`" />
|
||||
<span v-else>{{ profile.avatarLabel }}</span>
|
||||
</div>
|
||||
<div class="row-cell primary-cell">
|
||||
<strong>{{ profile.name }}</strong>
|
||||
</div>
|
||||
<div class="row-cell">
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isBookmark && hasBookmarkPath(profile)"
|
||||
class="row-cell muted-cell"
|
||||
:title="profile.bookmarkPath"
|
||||
>
|
||||
{{ profile.bookmarkPath }}
|
||||
</div>
|
||||
<div class="row-cell actions-cell">
|
||||
<button
|
||||
class="card-action-button"
|
||||
type="button"
|
||||
@@ -80,11 +83,8 @@ function hasBookmarkPath(
|
||||
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="isBookmark && hasBookmarkPath(profile)" class="modal-bookmark-path">
|
||||
{{ profile.bookmarkPath }}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ function hasBookmarkPath(
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(720px, 100%);
|
||||
width: min(760px, 100%);
|
||||
max-height: min(78vh, 820px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -123,46 +123,87 @@ function hasBookmarkPath(
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-header h3,
|
||||
.modal-profile-heading h4 {
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.modal-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: var(--panel-strong);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 56px minmax(180px, 1fr) 132px 110px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-grid.bookmark {
|
||||
grid-template-columns: 56px minmax(140px, 0.9fr) 120px minmax(180px, 1fr) 110px;
|
||||
}
|
||||
|
||||
.modal-table-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.77rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.header-cell.sortable {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-cell.sortable.active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.modal-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.modal-table-row {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.modal-profile-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 16px;
|
||||
background: var(--panel-strong);
|
||||
.modal-table-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-table-row:hover {
|
||||
background: rgba(248, 250, 252, 0.65);
|
||||
}
|
||||
|
||||
.modal-profile-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #dbeafe, #eff6ff);
|
||||
color: #1d4ed8;
|
||||
font-size: 1rem;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -173,29 +214,31 @@ function hasBookmarkPath(
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.modal-profile-body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-profile-topline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-profile-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.row-cell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.modal-bookmark-path {
|
||||
margin: 8px 0 0;
|
||||
.primary-cell strong {
|
||||
display: block;
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.muted-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.icon-cell {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@@ -203,10 +246,14 @@ function hasBookmarkPath(
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-profile-card,
|
||||
.modal-profile-topline,
|
||||
.modal-profile-heading {
|
||||
flex-direction: column;
|
||||
.modal-grid,
|
||||
.modal-grid.bookmark {
|
||||
grid-template-columns: 56px minmax(0, 1fr) 96px;
|
||||
}
|
||||
|
||||
.modal-grid > :nth-child(4),
|
||||
.modal-grid.bookmark > :nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import SortDropdown from "../SortDropdown.vue";
|
||||
import type { BookmarkSortKey, BookmarkSummary } from "../../types/browser";
|
||||
|
||||
defineProps<{
|
||||
bookmarks: BookmarkSummary[];
|
||||
sortKey: BookmarkSortKey;
|
||||
domainFromUrl: (url: string) => string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -16,36 +14,23 @@ const emit = defineEmits<{
|
||||
|
||||
<template>
|
||||
<section class="content-section">
|
||||
<div class="sort-bar">
|
||||
<SortDropdown
|
||||
:model-value="sortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Name', value: 'title' },
|
||||
{ label: 'URL', value: 'url' },
|
||||
]"
|
||||
@update:model-value="emit('update:sortKey', $event as BookmarkSortKey)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="bookmarks.length" class="data-table">
|
||||
<div class="data-table-header bookmarks-grid">
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
|
||||
<div class="header-cell actions-cell">Profiles</div>
|
||||
</div>
|
||||
|
||||
<div v-if="bookmarks.length" class="bookmark-list">
|
||||
<article v-for="bookmark in 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="emit('showProfiles', bookmark.url)"
|
||||
>
|
||||
<span>View Profiles</span>
|
||||
<span class="badge neutral">{{ bookmark.profileIds.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid">
|
||||
<div class="row-cell primary-cell">
|
||||
<strong>{{ bookmark.title }}</strong>
|
||||
</div>
|
||||
<div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div>
|
||||
<div class="row-cell actions-cell">
|
||||
<button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)">
|
||||
<span>View</span>
|
||||
<span class="badge neutral">{{ bookmark.profileIds.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -56,37 +41,70 @@ const emit = defineEmits<{
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bookmark-card {
|
||||
.data-table {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
border-radius: 18px;
|
||||
padding: 14px;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: var(--panel-strong);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bookmark-body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bookmark-topline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
.bookmarks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.2fr) 154px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bookmark-topline h4 {
|
||||
margin: 0;
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.35;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
.data-table-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
}
|
||||
|
||||
.bookmark-url {
|
||||
margin: 6px 0 0;
|
||||
.header-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.77rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.header-cell.sortable {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-cell.sortable.active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.data-table-row {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.data-table-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.data-table-row:hover {
|
||||
background: rgba(248, 250, 252, 0.65);
|
||||
}
|
||||
|
||||
.row-cell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.primary-cell strong {
|
||||
display: block;
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.muted-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.87rem;
|
||||
overflow: hidden;
|
||||
@@ -94,10 +112,6 @@ const emit = defineEmits<{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.source-disclosure {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disclosure-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -112,9 +126,24 @@ const emit = defineEmits<{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.bookmarks-grid {
|
||||
grid-template-columns: minmax(160px, 0.9fr) minmax(200px, 1fr) 148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.bookmark-card {
|
||||
flex-direction: column;
|
||||
.bookmarks-grid {
|
||||
grid-template-columns: minmax(0, 1fr) 132px;
|
||||
}
|
||||
|
||||
.bookmarks-grid > :nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,7 +103,6 @@ const emit = defineEmits<{
|
||||
v-else
|
||||
:bookmarks="sortedBookmarks"
|
||||
:sort-key="bookmarkSortKey"
|
||||
:domain-from-url="domainFromUrl"
|
||||
@update:sort-key="emit('update:bookmarkSortKey', $event)"
|
||||
@show-profiles="emit('showBookmarkProfiles', $event)"
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import SortDropdown from "../SortDropdown.vue";
|
||||
import type { ExtensionSortKey, ExtensionSummary } from "../../types/browser";
|
||||
|
||||
defineProps<{
|
||||
@@ -16,50 +15,33 @@ const emit = defineEmits<{
|
||||
|
||||
<template>
|
||||
<section class="content-section">
|
||||
<div class="sort-bar">
|
||||
<SortDropdown
|
||||
:model-value="sortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Extension ID', value: 'id' },
|
||||
]"
|
||||
@update:model-value="emit('update:sortKey', $event as ExtensionSortKey)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="extensions.length" class="data-table">
|
||||
<div class="data-table-header extensions-grid">
|
||||
<div class="header-cell icon-cell">Icon</div>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Extension ID</button>
|
||||
<div class="header-cell">Version</div>
|
||||
<div class="header-cell actions-cell">Profiles</div>
|
||||
</div>
|
||||
|
||||
<div v-if="extensions.length" class="stack-list">
|
||||
<article
|
||||
v-for="extension in extensions"
|
||||
:key="extension.id"
|
||||
class="extension-card"
|
||||
>
|
||||
<div class="extension-icon">
|
||||
<img
|
||||
v-if="extension.iconDataUrl"
|
||||
:src="extension.iconDataUrl"
|
||||
:alt="`${extension.name} icon`"
|
||||
/>
|
||||
<article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid">
|
||||
<div class="extension-icon table-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>
|
||||
</div>
|
||||
<p class="meta-line">{{ extension.id }}</p>
|
||||
<div class="source-disclosure">
|
||||
<button
|
||||
class="disclosure-button"
|
||||
type="button"
|
||||
@click="emit('showProfiles', extension.id)"
|
||||
>
|
||||
<span>View Profiles</span>
|
||||
<span class="badge neutral">{{ extension.profileIds.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row-cell primary-cell">
|
||||
<strong>{{ extension.name }}</strong>
|
||||
</div>
|
||||
<div class="row-cell muted-cell" :title="extension.id">{{ extension.id }}</div>
|
||||
<div class="row-cell">
|
||||
<span v-if="extension.version" class="badge neutral">v{{ extension.version }}</span>
|
||||
<span v-else class="muted-cell">-</span>
|
||||
</div>
|
||||
<div class="row-cell actions-cell">
|
||||
<button class="disclosure-button" type="button" @click="emit('showProfiles', extension.id)">
|
||||
<span>View</span>
|
||||
<span class="badge neutral">{{ extension.profileIds.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -70,56 +52,92 @@ const emit = defineEmits<{
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.extension-card {
|
||||
.data-table {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
border-radius: 18px;
|
||||
padding: 14px;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: var(--panel-strong);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.extensions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 60px minmax(180px, 1.1fr) minmax(220px, 1fr) 108px 154px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data-table-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.77rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.header-cell.sortable {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-cell.sortable.active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.data-table-row {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.data-table-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.data-table-row:hover {
|
||||
background: rgba(248, 250, 252, 0.65);
|
||||
}
|
||||
|
||||
.extension-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #e2e8f0, #f8fafc);
|
||||
color: #475569;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.extension-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.extension-body {
|
||||
.row-cell {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.extension-topline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
.primary-cell strong {
|
||||
display: block;
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.extension-topline h4 {
|
||||
margin: 0;
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.35;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.meta-line {
|
||||
margin: 6px 0 0;
|
||||
.muted-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.87rem;
|
||||
overflow: hidden;
|
||||
@@ -127,10 +145,6 @@ const emit = defineEmits<{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.source-disclosure {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disclosure-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -145,14 +159,29 @@ const emit = defineEmits<{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.icon-cell {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.extensions-grid {
|
||||
grid-template-columns: 56px minmax(160px, 1fr) minmax(160px, 1fr) 96px 148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.extension-card {
|
||||
flex-direction: column;
|
||||
.extensions-grid {
|
||||
grid-template-columns: 56px minmax(0, 1fr) 132px;
|
||||
}
|
||||
|
||||
.extension-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.extensions-grid > :nth-child(3),
|
||||
.extensions-grid > :nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import SortDropdown from "../SortDropdown.vue";
|
||||
import type { ProfileSortKey, ProfileSummary } from "../../types/browser";
|
||||
|
||||
defineProps<{
|
||||
@@ -22,45 +21,38 @@ const emit = defineEmits<{
|
||||
{{ openProfileError }}
|
||||
</div>
|
||||
|
||||
<div class="sort-bar">
|
||||
<SortDropdown
|
||||
:model-value="sortKey"
|
||||
label="Sort by"
|
||||
:options="[
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Email', value: 'email' },
|
||||
{ label: 'Profile ID', value: 'id' },
|
||||
]"
|
||||
@update:model-value="emit('update:sortKey', $event as ProfileSortKey)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="profiles.length" class="data-table">
|
||||
<div class="data-table-header profiles-grid">
|
||||
<div class="header-cell icon-cell">Avatar</div>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'email' }" type="button" @click="emit('update:sortKey', 'email')">Email</button>
|
||||
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Profile ID</button>
|
||||
<div class="header-cell actions-cell">Action</div>
|
||||
</div>
|
||||
|
||||
<div v-if="profiles.length" class="stack-list">
|
||||
<article v-for="profile in profiles" :key="profile.id" class="profile-card">
|
||||
<div class="profile-avatar">
|
||||
<img
|
||||
v-if="profile.avatarDataUrl"
|
||||
:src="profile.avatarDataUrl"
|
||||
:alt="`${profile.name} avatar`"
|
||||
/>
|
||||
<article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid">
|
||||
<div class="profile-avatar table-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>
|
||||
<div class="profile-actions">
|
||||
<button
|
||||
class="card-action-button"
|
||||
:disabled="isOpeningProfile(browserId, profile.id)"
|
||||
type="button"
|
||||
@click="emit('openProfile', browserId, profile.id)"
|
||||
>
|
||||
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
|
||||
</button>
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="profile-email">{{ profile.email || "No email found" }}</p>
|
||||
<div class="row-cell primary-cell">
|
||||
<strong>{{ profile.name }}</strong>
|
||||
</div>
|
||||
<div class="row-cell muted-cell" :title="profile.email ?? undefined">
|
||||
{{ profile.email || "" }}
|
||||
</div>
|
||||
<div class="row-cell">
|
||||
<span class="badge neutral">{{ profile.id }}</span>
|
||||
</div>
|
||||
<div class="row-cell actions-cell">
|
||||
<button
|
||||
class="card-action-button"
|
||||
:disabled="isOpeningProfile(browserId, profile.id)"
|
||||
type="button"
|
||||
@click="emit('openProfile', browserId, profile.id)"
|
||||
>
|
||||
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -71,78 +63,123 @@ const emit = defineEmits<{
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-card {
|
||||
.data-table {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
border-radius: 18px;
|
||||
padding: 14px;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: var(--panel-strong);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(180px, 1.2fr) minmax(180px, 1fr) 132px 110px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data-table-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.77rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.header-cell.sortable {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-cell.sortable.active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.data-table-row {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.data-table-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.data-table-row:hover {
|
||||
background: rgba(248, 250, 252, 0.65);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(135deg, #dbeafe, #eff6ff);
|
||||
color: #1d4ed8;
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.profile-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
.row-cell {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-topline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
.primary-cell strong {
|
||||
display: block;
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.profile-topline h4 {
|
||||
margin: 0;
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.35;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-email {
|
||||
margin: 6px 0 0;
|
||||
.muted-cell {
|
||||
color: var(--muted);
|
||||
font-size: 0.87rem;
|
||||
font-size: 0.86rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.icon-cell {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.profiles-grid {
|
||||
grid-template-columns: 56px minmax(140px, 1fr) minmax(140px, 1fr) 110px 96px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.profile-card {
|
||||
flex-direction: column;
|
||||
.profiles-grid {
|
||||
grid-template-columns: 56px minmax(0, 1fr) 96px;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.profiles-grid > :nth-child(3),
|
||||
.profiles-grid > :nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user