mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

consolidate details into collapsible "details" section

Browse source
This commit is contained in:
Hazelnoot 2025-05-29 18:10:11 -04:00
parent 6e58a320ca
commit f2c346d085
1 changed files with 90 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
packages/frontend/src/pages/instance-info.vue
View file

@ -12,22 +12,72 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="fnfelxur"> <div class="fnfelxur">
<!-- TODO copy the alt text stuff from reports UI PR --> <!-- TODO copy the alt text stuff from reports UI PR -->
<img v-if="faviconUrl" :src="faviconUrl" alt="" class="icon"/> <img v-if="faviconUrl" :src="faviconUrl" alt="" class="icon"/>
<span class="name">{{ instance.name || instance.host }}</span> <div :class="$style.headerData">
</div> <span class="name">{{ instance.name || instance.host }}</span>
<div style="display: flex; flex-direction: column; gap: 1em;"> <span>
<MkKeyValue :copy="host" oneline> <span class="_monospace">{{ instance.host }}</span>
<template #key>{{ i18n.ts.name }}</template> <button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(instance.host)"><i class="ti ti-copy"></i></button>
<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template> </span>
</MkKeyValue> <span>
<MkKeyValue oneline> <span class="_monospace">{{ instance.id }}</span>
<template #key>{{ i18n.ts.software }}</template> <button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(instance.id)"><i class="ti ti-copy"></i></button>
<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template> </span>
</MkKeyValue> </div>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.administrator }}</template>
<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
</MkKeyValue>
</div> </div>
<MkFolder>
<template #icon><i class="ph-list-bullets ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.details }}</template>
<div style="display: flex; flex-direction: column; gap: 1em;">
<MkKeyValue :copy="instance.id" oneline>
<template #key>{{ i18n.ts.id }}</template>
<template #value><span class="_monospace">{{ instance.id }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.name" oneline>
<template #key>{{ i18n.ts.name }}</template>
<template #value><span class="_monospace">{{ instance.name || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="host" oneline>
<template #key>{{ i18n.ts.host }}</template>
<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.firstRetrievedAt" oneline>
<template #key>{{ i18n.ts.createdAt }}</template>
<template #value><span class="_monospace"><MkTime :time="instance.firstRetrievedAt" :mode="'detail'"/></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.infoUpdatedAt" oneline>
<template #key>{{ i18n.ts.updatedAt }}</template>
<template #value><span class="_monospace"><MkTime :time="instance.infoUpdatedAt" :mode="'detail'"/></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.latestRequestReceivedAt" oneline>
<template #key>{{ i18n.ts.lastActiveDate }}</template>
<template #value><span class="_monospace"><MkTime :time="instance.latestRequestReceivedAt" :mode="'detail'"/></span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.softwareName" oneline>
<template #key>{{ i18n.ts.software }}</template>
<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.maintainerName" oneline>
<template #key>{{ i18n.ts.administrator }}</template>
<template #value><span class="_monospace">{{ instance.maintainerName || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue :copy="instance.maintainerEmail" oneline>
<template #key>{{ i18n.ts.email }}</template>
<template #value><span class="_monospace">{{ instance.maintainerEmail || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.followingPub }}</template>
<template #value><span class="_monospace"><MkNumber :value="instance.followingCount"/></span></template>
</MkKeyValue>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.followersSub }}</template>
<template #value><span class="_monospace"><MkNumber :value="instance.followersCount"/></span></template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts._delivery.status }}</template>
<template #value><span class="_monospace">{{ i18n.ts._delivery._type[suspensionState] }}</span></template>
</MkKeyValue>
</div>
</MkFolder>
<MkKeyValue> <MkKeyValue>
<template #key>{{ i18n.ts.description }}</template> <template #key>{{ i18n.ts.description }}</template>
<template #value>{{ instance.description }}</template> <template #value>{{ instance.description }}</template>
@ -36,14 +86,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormSection v-if="iAmModerator"> <FormSection v-if="iAmModerator">
<template #label>{{ i18n.ts.moderation }}</template> <template #label>{{ i18n.ts.moderation }}</template>
<div class="_gaps_s"> <div class="_gaps_s">
<MkKeyValue>
<template #key>
{{ i18n.ts._delivery.status }}
</template>
<template #value>
{{ i18n.ts._delivery._type[suspensionState] }}
</template>
</MkKeyValue>
<div class="_buttons"> <div class="_buttons">
<MkButton inline :disabled="!instance" danger @click="deleteAllFiles">{{ i18n.ts.deleteAllFiles }}</MkButton> <MkButton inline :disabled="!instance" danger @click="deleteAllFiles">{{ i18n.ts.deleteAllFiles }}</MkButton>
<MkButton inline :disabled="!instance" danger @click="severAllFollowRelations">{{ i18n.ts.severAllFollowRelations }}</MkButton> <MkButton inline :disabled="!instance" danger @click="severAllFollowRelations">{{ i18n.ts.severAllFollowRelations }}</MkButton>
@ -66,32 +108,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</FormSection> </FormSection>
<FormSection>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.registeredAt }}</template>
<template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></template>
</MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.updatedAt }}</template>
<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
</MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
</MkKeyValue>
</FormSection>
<FormSection>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.followingPub }}</template>
<template #value>{{ number(instance.followingCount) }}</template>
</MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.followersSub }}</template>
<template #value>{{ number(instance.followersCount) }}</template>
</MkKeyValue>
</FormSection>
<FormSection> <FormSection>
<template #label>{{ i18n.ts.wellKnownResources }}</template> <template #label>{{ i18n.ts.wellKnownResources }}</template>
<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink> <FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
@ -199,6 +215,10 @@ import { dateString } from '@/filters/date.js';
import MkTextarea from '@/components/MkTextarea.vue'; import MkTextarea from '@/components/MkTextarea.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import { $i } from '@/i.js'; import { $i } from '@/i.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard';
import { acct } from '@/filters/user';
import MkFolder from '@/components/MkFolder.vue';
import MkNumber from '@/components/MkNumber.vue';
const props = defineProps<{ const props = defineProps<{
host: string; host: string;
@ -524,3 +544,24 @@ definePage(() => ({
} }
} }
</style> </style>
<style lang="scss" module>
.headerData {
display: flex;
flex-direction: column;
> * {
overflow: hidden;
text-overflow: ellipsis;
font-size: 85%;
opacity: 0.7;
}
> :first-child {
text-overflow: initial;
word-break: break-all;
font-size: 100%;
opacity: 1.0;
}
}
</style>