julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

switch to table

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 18:07:00 -04:00
parent 761e4f3186
commit c2fec5a960
5 changed files with 426 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/components/browser-data/ExtensionsList.vue
View File

@@ -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>